-
Notifications
You must be signed in to change notification settings - Fork 59
/
Copy pathindex.html
365 lines (355 loc) · 19.6 KB
/
index.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
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
<!DOCTYPE html>
<!--
Teleprompter
Copyright (C) 2015 Imaginary Films LLC and contributors
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>.
-->
<html>
<head>
<meta charset="utf-8">
<meta property="og:title" content="Teleprompter by Imaginary Films">
<meta property="og:site_name" content="Imaginary Tech">
<meta property="og:url" content="http://imaginary.tech/teleprompter/">
<meta property="og:description" content="'Teleprompter' is a professional grade, multi-platform, free software teleprompter for everyone to use. It's built on web technologies so it can run in any device.">
<meta property="og:image" content="http://imaginary.tech/teleprompter/img/if-teleprompter-web-fb.jpg">
<meta property="fb:app_id" content="196769633992905">
<title>Teleprompter by Imaginary Films</title>
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/docs.min.css">
<link rel="stylesheet" href="css/editor.css">
<link rel="stylesheet" href="css/prompt.css">
<link rel="stylesheet" href="css/teleprompter-themes.css">
<link rel="stylesheet" href="css/mobilehide.css">
<script src="ckeditor/ckeditor.js"></script>
<!--<script src="tinymce/tinymce.min.js"></script>-->
<script src="js/data.manager.js"></script>
<script src="js/sidebar.js"></script>
<!--<script src="js/jquery.qrcode.js"></script>-->
<script src="js/editor.js"></script>
<script src="js/teleprompter-themes.js"></script>
<script src="js/jscolor.min.js"></script>
</head>
<body>
<div id="wrapper" class="toggled hidden-xs">
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav" id="scripts">
</ul>
<!--<ul class="sidebar-nav" id="images">
<li class="sidebar-brand">Images</li>
</ul>-->
</div>
</div>
<!-- ColorPicker modal dialog -->
<div id="openCustomStyles" class="modalDialog">
<div style="width: 84%;">
<a href="#close" title="Close" class="close">X</a>
<div style="margin-bottom:-15px;">
<h1>Custom Styles <small>Administration Panel</small></h1>
</div>
<div class="row">
<div class="col-md-3">
<h1><small>Styles</small></h1>
<div class="panel panel-default">
<table class="table table-bordered" id="stylesTable" >
<tbody>
<tr>
<th class="table-item"><span>No Styles</span></th>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col-md-9">
<h1><small>Properties</small></h1>
<div class='row'>
<div class='col-md-4'>
<label>Body</label>
<input type="text" class="form-control jscolor" onchange="updateColorOnPreview(this)" id="bodyColor" value="" >
</div>
<div class='col-md-4'>
<label>Overlay</label>
<input type="text" class="form-control jscolor" onchange="updateColorOnPreview(this)" id="overlayColor" value="" >
</div>
<div class='col-md-4'>
<label>Text Color</label>
<input type="text" class="form-control jscolor" onchange="updateColorOnPreview(this)" id="textColor" value="" >
</div>
</div>
<h1><small>Preview</small></h1>
<div id="promptPreviewColor">
<!-- #overlay layers focus area on top of the prompt. -->
<table cellpadding="0" cellspacing="0" id="overlayPreview" >
<tbody>
<tr id="overlayTop" style = "background-color:#000;opacity:0.5;">
<td>Text</td>
</tr>
<tr id="overlayFocus" >
<td>Text</td>
</tr>
<tr id="overlayBottom" class="overlayBg" style = "background-color:#000;opacity:0.5;">
<td>Text</td>
</tr>
</tbody>
</table>
</div>
</br>
<div class='row'>
<div class='col-md-4'>
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">Style Name</span>
<input type="text" class="form-control" placeholder="name" aria-describedby="basic-addon1" id="nameStyle">
</div>
</div>
<div class='col-md-8'>
<button class="btn btn-default" id="editStyleButton" disabled>Update Style</button>
<button class="btn btn-default" id="addStyleButton" disabled>New Style</button>
<button class="btn btn-default" id="removeStyleButton" disabled>Delete Style</button>
<button class="btn btn-default" id="defaultStyleButton">Set As Default</button>
</div>
</div>
</div>
</div>
</div>
</div>
<form>
<!-- Header -->
<header class="navbar navbar-static-top bs-docs-nav" id="top" role="banner">
<div class="container">
<div class='row'>
<ul class="nav navbar-nav navbar-left" style="padding-right:20px;">
<li><a id="menu-toggle" href="#menu-toggle"><span class="glyphicon glyphicon-align-justify" aria-hidden="true"></span></a></li>
</ul>
<div class="navbar-header">
<a class="external navbar-brand" href="http://imaginary.tech/teleprompter" target="_blank"><img src="img/logo.png" alt="Teleprompter" ></a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><a id="updateIt" class="hidden" href=" ">Update</a></li>
<li><a id="promptIt" href=" ">Prompt It!</a></li>
</ul>
</div>
</div>
</header>
<!-- Controls -->
<div class="bs-docs-header" id="content" tabindex="-1">
<div class="container">
<div class='row'>
<div class='col-md-3 col-sm-6'>
<!--<label for="basic-url">Flip mode</label>-->
<label for="basic-url">In-frame prompter</label>
<select class="form-control" id="primary" name="primary">
<option value="0" title="Don't prompt on this window">Disabled (Don't prompt on this window)</option>
<option value="1" title="Normal screen" selected="selected">No Flip (Normal screen)</option>
<option value="2" title="Normal mirror">Horizontal Flip (Mirror)</option>
<option value="3" title="Miror plus 180° rotation">Vertical Flip (Miror plus 180° rotation)</option>
<option value="4" title="180° screen rotation">Double Flip (180° screen rotation)</option>
</select>
</div>
<div class='col-md-3 col-sm-6'>
<label for="basic-url">External prompter</label>
<select class="form-control" id="secondary" name="secondary">
<option value="0" title="Don't prompt to a second window" selected="selected">Disabled (Don't prompt to a second window)</option>
<option value="1" title="Normal screen">No Flip (Normal screen)</option>
<option value="2" title="Normal mirror">Horizontal Flip (Mirror)</option>
<option value="3" title="Miror plus 180° rotation">Vertical Flip (Miror plus 180° rotation)</option>
<option value="4" title="180° screen rotation">Double Flip (180° screen rotation)</option>
</select>
</div>
<div class='col-md-3 col-sm-6'>
<label for="basic-url">Prompter style</label>
<select class="form-control" id="prompterStyle" name="prompterStyle">
<option value="0" selected="selected">Blackboard</option>
<option value="1">Whiteboard</option>
<option value="2">Classic Yellow</option>
<option value="3">Intergalactic</option>
</select>
</div>
<div class='col-md-3 col-sm-6'>
<label for="basic-url">Focus area</label>
<select class="form-control" id="focus" name="focus">
<option value="3" title="You can interact with prompter elements, such as hyperlinks and videos, by disabling focus area.">None</option>
<option value="1">Top Overlay (webcam)</option>
<option value="0" selected="selected">Middle Overlay (professional prompter)</option>
<option value="2">Bottom Overlay (screen above camera)</option>
</select>
</div>
</div>
</div>
</div>
<div id="editorcontainer">
<div id="toolbar"></div>
<div id="promptcontainer">
<div id="prompt" contenteditable="true">
<h3>Welcome to Teleprompter!</h3>
<p>Are you ready to tell your story?</p>
<br>
<p>"Teleprompter" is a professional grade, multi-platform, free software teleprompter for anyone to use. Click on "Prompt It!" whenever you're ready and control the speed with the arrow keys.</p>
<br>
<h3>Here are some of our features:</h3>
<ol>
<li>Control the speed with the Arrow keys, WASD keys or the mouse wheel. You may pause at anytime with the 'spacebar'.</li>
<li>Different focus areas allow you to easily use Teleprompter with a webcam, a tablet, or professional teleprompter equipment.</li>
<li>Flip modes allow <em>mirroring</em> the prompter in every possible way.</li>
<li>You can use one or two instances. Mirror one, monitor on the other one.</li>
<li><a id="5" name="5">Set almost any key as an Anchor and instantly jump to any part of the script. Try pressing '5' now!</a></li>
<li>The Rich Text Editor gives unlimited possibilities on what you can prompt.</li>
<ul>
<li>You can generate and display mathematical equations.<br>
<table border="1" cellpadding="1" cellspacing="1">
<tbody>
<tr>
<td> </td>
<td><img alt="\bg_white \huge \sum_{\Theta+\Pi }^{80} sin(\Theta)" src="http://latex.codecogs.com/gif.latex?%5Cdpi%7B300%7D%20%5Cbg_white%20%5Chuge%20%5Csum_%7B%5CTheta&plus;%5CPi%20%7D%5E%7B80%7D%20sin%28%5CTheta%29" /></td>
<td> </td>
</tr>
</tbody>
</table>
</li>
<li>Insert images from the web or copy and paste them into the prompter.
<img alt="Picture: Arecibo Sky" src="img/arecibo-sky.jpg">
</li>
</ul>
<li>There are various Prompter Styles to choose from. You may also create your own.</li>
<li>Text can be pasted from other word processors like Microsoft Word® or Libre Office Writer™.</li>
<li>Animations are hardware accelerated for a smooth result.</li>
<li>Press 'F11' to enter and leave fullscreen.</li>
<li>All data is managed locally. No data is stored on our servers.</li>
<li>An offline version can be downloaded for Windows, OS X, Linux and Chrome OS.</li>
<li>Enjoy the ease of a smart fullscreen in the local version.</li>
<li>Close prompts and return to the editor by pressing 'ESC'.</li>
</ol>
<hr>
<h4>How to use anchor shortcuts:</h4>
<ol>
<li>Select a keyword or line you want to jump to on your text in the editor.</li>
<li>Click on the <strong>Flag Icon</strong> on the editor's tool bar.</li>
<li>A box named "Anchor Properties" should have appeared. Type any single key of your choice and click 'Ok'.<br>Note preassigned keys, such as WASD and Spacebar will be ignored.</li>
<li>Repeat as many times as you wish.</li>
<li>When prompting, press on the shortcut key to jump into the desired location.</li>
</ol>
<p>###</p>
</div>
</div>
<div id="statusbar"></div>
</div>
</form>
<!-- Footer -->
<footer id="footer" class="bs-docs-footer" role="contentinfo">
<div class="container">
<p style="color:#FFF;">© <a class="external" href="http://imaginary.tech" target="_blank">Imaginary Films LLC</a></p>
<p>Developed by: <a class="external" href="https://www.linkedin.com/in/javier-oscar-cordero-p%25C3%25A9rez-70658033" target="_blank">Javier Cordero</a>,<br>
<a class="external" href="https://twitter.com/Va2ron1" target="_blank">Victor Ortiz</a>, <a class="external" href="https://github.com/keyvanp">Keyvan Pérez</a> & <a class="external" href="https://www.facebook.com/rafael.jose.7737">Rafael Sierra</a>.</p>
<ul class="bs-docs-footer-links">
<li>Currently v2.1</li>
<li>·</li>
<li>Licensed under <a rel="license" href="LICENSE" target="_blank">GPL3</a>, assets under <a class="external" rel="license" href="https://creativecommons.org/licenses/by/4.0/" target="_blank">CC BY 4.0</a></li>
<br>
<li>·</li>
<li><a id="credits-link" href="#">Full Credits</a></li>
<li>·</li>
<li><a class="external" target="_blank" href="https://github.com/imaginaryfilms/Teleprompter.git">Source Code</a></li>
<li>·</li>
<li><a class="external" target="_blank" href="http://imaginary.tech/teleprompter/download/">Downloads</a></li>
<li>·</li>
</ul>
<!--<li><a class="external" target="_blank" href="http://imaginary.tech/software/teleprompter">About</a></li>-->
</div>
</footer>
<div id="framecontainer">
<iframe id="teleprompterframe" src="blank.html" class="fullsize"></iframe>
</div>
</body>
<script type="text/javascript">
if (inElectron()){
var {ipcMain} = require('electron');
var {shell} = require('electron');
}
if (typeof CKEDITOR!=="undefined") {
// Turn off automatic editor creation first.
CKEDITOR.disableAutoInline = true;
// Create editor
CKEDITOR.inline( 'prompt', {
// To enable source code editing in a dialog window, inline editors require the "sourcedialog" plugin.
extraPlugins: 'sharedspace,sourcedialog',
removePlugins: 'floatingspace,maximize,resize',
sharedSpaces: {
top: 'toolbar',
bottom: 'statusbar'
},
toolbarGroups: [
{ name: 'document', groups: [ 'document', 'print', 'mode', 'tools' ] },
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ] },
{ name: 'insert' },
{ name: 'others' },
{ name: 'colors' },
{ name: 'about' },
'/',
{ name: 'links' },
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] },
{ name: 'styles' }
],
// Remove the redundant buttons from toolbar groups defined above.
removeButtons: 'Save,Smiley,ShowBlocks,Unlink,Link,Blockquote,CreateDiv,PageBreak,Language,Styles',/*,Styles,Specialchar*/
// Font sizes
fontSize_sizes: '0.7 em/0.7em;0.8 em/0.8em;0.9 em/0,9em;1.0 em/1em;1.1 em/1.1em;1.2 em/1.2em;1.3 em/1.3em;1.4 em/1.4em;1.5 em/1.5em;1.6 em/1.6em;1.7 em/1.7em;1.8 em/1.8em;1.9 em/1.9em;2.0 em/2em;2.1 em/2.1em;2.2 em/2.2em;2.3 em/2.3em;2.4 em/2.4em;2.5 em/2.5em;2.6 em/2.6em;2.7 em/2.7em;2.8 em/2.8em;2.9 em/2.9em;3.0 em/3em',
// Font sizes
line_height: '1 em/1em;1.1 em/1.1em;1.2 em/1.2em;1.3 em/1.3em;1.4 em/1.4em;1.5 em/1.5em;1.6 em/1.6em;1.7 em/1.7em;1.8 em/1.8em;1.9 em/1.9em;2.0 em/2.0em',
// Quick tables
qtRows: 10, // Count of rows
qtColumns: 10, // Count of columns
qtBorder: '0', // Border of inserted table
qtWidth: '100%', // Width of inserted table
qtCellPadding: '0', // Cell padding table
qtCellSpacing: '0', // Cell spacing table
});
CKEDITOR.on( 'dialogDefinition', function( ev ) {
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;
console.log(dialogName);
if ( dialogName == 'table' ) {
var info = dialogDefinition.getContents( 'info' );
console.log(info);
info.get( 'txtWidth' )[ 'default' ] = '100%';
info.get( 'txtBorder' )[ 'default' ] = '0';
info.get( 'txtRows' )[ 'default' ] = '1';
info.get( 'txtCols' )[ 'default' ] = '3';
info.get( 'txtCellSpace' )[ 'default' ] = '0';
info.get( 'txtCellPad' )[ 'default' ] = '0';
}
if ( dialogName == 'iframe' ) {
var info = dialogDefinition.getContents( 'info' );
console.log(info);
info.get( 'width' )[ 'default' ] = '100%';
info.get( 'height' )[ 'default' ] = '50%';
}
if ( dialogName == 'flash' ) {
var info = dialogDefinition.getContents( 'info' );
console.log(info);
info.get( 'width' )[ 'default' ] = '100%';
info.get( 'height' )[ 'default' ] = '50%';
info.get( 'hSpace' )[ 'default' ] = '0';
info.get( 'vSpace' )[ 'default' ] = '0';
}
if ( dialogName == 'image2' ) {
var info = dialogDefinition.getContents( 'info' );
console.log(info);
info.get( 'width' )[ 'default' ] = '100%';
info.get( 'height' )[ 'default' ] = 'auto';
}
});
}
</script>
</html>