-
Notifications
You must be signed in to change notification settings - Fork 0
/
storyBuilderPicRight_yt.html
177 lines (164 loc) · 11.8 KB
/
storyBuilderPicRight_yt.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
<!doctype html>
<html lang="en"><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title id="pageTitle">Story Page Builder (picture left) with Text to Speech</title>
<link rel="stylesheet" href="../css/tts_min_basic_forest.css" id="basicLook">
<link rel="stylesheet" href="../css/tts_min_grid.css" id="gridLook">
<link rel="stylesheet" href="../css/yt_grid.css" type="text/css">
<!-- the following allows for on the fly style changes:
The stylezPath indicates the relative path to where style sheets are housed.
The stylez array has a list of available style sheets.
The stylezIndex should point to the default style in the array.
Use the Alt-L key combo to toggle through the available styles. Use Alt-G to see a different grid size (for applicable pages.)
The style changing function is in tts_min_basicPage.js.
-->
<script type="text/javascript">
var stylezPath = '../css/';
var stylezIndex = 0;
var gridzIndex = 0;
</script>
<!--
This is a simple web page with text-to-speech support that should work in most modern browsers.
Most of the page's elements are organized in rows and columns as denoted by f_row divs which wrap f_items divs.
f_item divs form columns which are automatically distributed courtesy of flex-box styling in css.
To keep presentation easy to view 3 columns is probably a good maximum.
The actors class is a row of buttons and/or anchors which are styled like buttons. You can probably fit 8 or so buttons on a page.
The aside that is classed as notes can contain text that is read when the page opens, but is normally not visible.
-->
</head>
<body>
<audio id="audioPlayer" controls="" class="hidden" style="display: none;" src="https://archive.org/download/FibberMcGeeandMolly1940/400102_Fibber_Builds_A_Doghouse.mp3">
</audio>
<button class="hidden" id="showOptions" tabindex="-1">Edit</button><br>
<div id="options" style="display: none;">
<button id="hideOptions">Close Editor</button>
<button id="hideYTPlayer">Hide YT</button>
<button id="showYTPlayer">Show YT</button>
<button id="hideBtns">Hide Story Section</button>
<button id="showBtns">Show Story Section</button>
<button id="showInfo">Show Editing Info</button><br>
<div class="f_row">
<div class="f_item">
<button id="prevAct">Previous Actor Select</button><br><button id="nextAct">Next Actor Select</button><br><button id="copyAct">Copy Selected Actor</button><br><button id="insertAct">Insert Copied Actor</button><br><br><button id="cutAct">Cut Selected Actor</button><br>
</div>
<div class="f_item" id="sampler">
<button class="actor xl" data-msg="Insert New Button" data-r_action="" id="newBtn" onclick="newButton();"><img alt="push button" class="actorImg" src="https://d18vdu4p71yql0.cloudfront.net/libraries/sclera/press%20button.png"><p class="actorLabel">Insert New Button</p></button><br>
<a class="button actor xl" href="#" id="newLink" onclick="newLink();"><img alt="link" class="actorImg" src="https://cdn0.iconfinder.com/data/icons/glyphpack/52/link-rounded-512.png"><p class="actorLabel">Insert New Link</p></a>
</div>
<div class="f_item">
<button id="dataSetter" onclick="setActorDat();">Apply Actor Changes</button><br>
This actor is a : <span id="tagXName">Link Actor</span><br>
Set the Message for BtnX:<br><input id="btnXMsg" value=""><br>
Set the Label for BtnX:<br><input id="btnXLabel" value=""><br>
Set the Image URL for BtnX:<br><input id="btnXImg" value=""><br>
Set the Alt Text for Image of BtnX:<br><input id="btnXAlt" value=""><br>
Set the Action for BtnX:<br><select id="btnXAct" value=" ">
<option value=""></option>
<option value="_readDefault">_readDefault</option>
<option value="_readBanner">_readBanner</option>
<option value="_setAudio,_playAudio">_setAudio,_playAudio</option>
<option value="_pauseAudio">_pauseAudio</option>
<option value="_muteAdio">_muteAudio</option>
<option value="_volumeDownAudio">_volumeDownAudio</option>
<option value="_volumeUpAudio">_volumeUpAudio</option>
<option value="_loadYTVideo">_loadYTVideo</option>
<option value="_loadYTVideo,_pauseMediaAfter15s">_loadYTVideo,_pauseMediaAfter15s</option>
<option value="_loadYTVideo,_pauseMediaAfter30s">_loadYTVideo,_pauseMediaAfter30s</option>
<option value="_loadYTVideo,_pauseMediaAfter60s">_loadYTVideo,_pauseMediaAfter60s</option>
</select><br>
Set the Link for BtnX:<br><input id="btnXLink" value=""><br><br>
</div>
<div class="f_item">
<button id="pageDataSetter" onclick="setPageData();">Apply Page Changes</button><br>
Set a title for this page (shown on browser tab):<br><input id="pgTitle" value=""><br>
Set a banner for this page (spoken on page open):<br><input id="pgBanner" value=""><br>
Set the picture for left side of page:<br><input id="pgBigPic" value=""><br>
Set the Alt Text for the left side picture:<br><input id="pgBigPicAlt" value=""><br>
Set a hidden note (spoken on page open):<br><input id="pgNote" value=""><br>
Set a name for this page (appears small at page bottom):<br><input id="pgName" value=""><br>
<br>
</div>
<div class="f_item">
Set the text for the right side of page:<br><textarea id="pgMainText">Your Text Here</textarea>
</div>
</div>
Test a YouTube Video using the 11 Character ID:<br><input id="ytId" placeholder="Enter 11 char. YouTube Id"><button id="updateVideo">Get Video</button> <button id="makeNewYt">Prep for new or updated AWP page</button><br>
<div id="info"><button id="hideInfo">Hide Editing Info</button><br>
<p> Use the Next and Previous buttons to move the orange editing selector around the Actors.<br> You can also add, remove, or move Button Actors or Link Actors around using the Cut and Insert buttons. Button Actors can do things like open a Youtube video, play audio streams, and read or edit the message banner. Link Actors are used to open new web pages.</p><p>Make changes to Actors by editing the text fields, or selecting actions for Button Actors from the dropdown menu, and then use the Apply Actor Changes button to update the selected button.</p><p>Don't forget to edit the page title, banner (if you want one,) and page name (which I usually make the html filename.) Use the Apply Page Changes to update the page. <br>There is also an option to enter a "note" which is read out loud on page open. The text for the note, however, is not visible.</p> <p>After making changes to any page you intend to update or save as new be sure to click the "Prep for new/updated page" button. The Prep for new/updated page button assures that the YouTube option will work properly when the saved page loads. Then use the browser's "Developer tools" to copy the "OuterHTML" of the main "html.." tag and paste it into a text editor. <br>Save the result from the text editor as an html document. Be sure to place the new html file properly in the directory structure so any references to css, js, or image resources are correctly related. Improperly located html files or resources cause the page to look bad, have images missing, or lack expected behavior.</p>
<p>Don't be tempted to click on Actors while you are editing. If you navigate away from the page any changes will be lost!</p>
<p>Press Alt-k to see the keyboard shortcut menu.</p>
<h4> I recommend using opensymbols.org for your picture resources. </h4>
</div>
</div>
<div id="thisPage" class="centered">
<div id="daBtns" class="story_page" style="display: grid;">
<div class="f_row">
<div class="centered readThis"><h1 id="pageBanner">Hello There! Press Alt-e to edit this page!</h1></div>
</div>
<div class="f_row">
<div class="f_item"><h4 id="mainText" class="centered readThis"> This page shows a picture of this nice guy on the right, and some text on the left. </h4></div>
<div class="f_item centered"><img id="bigPic" alt="man waving hello" src="../images/hello-man-300px.png"></div>
</div>
<div class="actuators">
<a class="button actor" href="#" style=""><img alt="previous" class="actorImg" src="../images/go-previous-view.png"><p class="actorLabel">Go Back</p></a>
<button class="actor" data-msg="Let's read this page." data-r_action=".readThis"><img alt="man speaking" class="actorImg" src="../images/speakIcon-800px.png"><p class="actorLabel">Read Page</p></button>
<a class="button actor" href="#"><img alt="next" class="actorImg" src="../images/go-next-view.png"><p class="actorLabel">Next</p></a>
</div>
</div>
<div class="yt_strip" id="yt_strip" style="display: none;">
<div class="yt_wrap" id="yt_wrapper">
<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
<div id="yt_placeholder"></div></div>
<div class="yt_actuators">
<div id="actors" class="yt_actuators_v">
<!-- set the href destination "#" in the next line to the desired page address to which you wish to return-->
<a href="#" class="button actor qp" id="returnLink" style="display: none;"><img alt="Return to previous" src="../images/go-prev-page.png" class="actorImg" id="prevBtn"><p class="actorLabel">Go Back</p></a>
<button type="button" id="buttonReload" class="button actor qp" style="display: none;"><img alt="Restart video" src="../images/reload.png" class="actorImg" id="reloadBtn"><p class="actorLabel">Restart</p></button>
<button type="button" id="buttonStop" class="button actor qp"><img alt="stop" src="../images/stopRed.png" class="actorImg" id="stopBtn"><p class="actorLabel">Stop</p></button>
<button type="button" id="buttonPlay" class="button actor qp"><img alt="play" src="../images/playGreen.png" class="actorImg" id="playBtn"><p class="actorLabel">Play</p></button>
<button type="button" id="buttonPause" class="button actor qp"><img alt="pause" src="../images/pause.png" class="actorImg" id="pauseBtn"><p class="actorLabel">Pause</p></button>
<button type="button" id="buttonPrevious" class="button actor qp" style="display: none;"><img alt="previous video" src="../images/previous.png" class="actorImg" id="previousBtn"><p class="actorLabel">Previous</p></button>
<button type="button" id="buttonNext" class="button actor qp" style="display: none;"><img alt="next video" src="../images/next.png" class="actorImg" id="nextBtn"><p class="actorLabel">Next</p></button>
</div>
</div>
</div>
<div class="notes" id="pageNote">This message is an optional hidden note that gets read when the page opens.</div>
<div class="f_row">
<div class="centered" id="htmlName">storyBuilderPicLeft_yt.html</div>
</div>
</div>
<script src="../js/tts_min_basic.js"></script>
<script src="../js/tts_min_basicPage_plus.js"></script>
<script src="../js/editStory_yt.js"></script>
<script src="https://www.youtube.com/iframe_api"></script>
<script type="text/javascript">
var toobyListQuery = "";
var toobyListType = "";
function onYouTubeIframeAPIReady() {
document.getElementById("yt_placeholder").src = "";
var toobyID = "none"; <!--Element holds the 11 character YouTube identifier. Be sure to test the page. Not all YT videos are playable outside the YT domain. -->
var swfFactor = 1.00;
var swfW = 1100;
var swfH = 550;
ytPlayer = new YT.Player('yt_placeholder', {
width: swfW,
height: swfH,
videoId: toobyID,
playerVars: { autoplay:1, controls:0, list:toobyListQuery, listType:toobyListType, rel:0, modestbranding:1},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(event) {
event.target.playVideo();
}
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.ENDED) {
ytStop();
}
}
</script>
</body></html>