-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathindex.html
234 lines (217 loc) · 9.68 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8>
<title>Roundtable</title>
<link rel="shortcut icon" type="image/x-icon" href="./caroline/images/icon.ico">
<link rel="apple-touch-icon" href="./caroline/images/icon_192.png">
<meta name="description" content="A surface for collaborative feedback. In real life
meetings around Roundtable everyone can point and add their sketched idea
on the presented material. Now we extend that experience for meetings
with physical distancing, with many participants, or even with participants
distributed around the world. Have engaging meetings with collaborative
feedback!">
<meta name="keywords" content="{{ pageKeywords }}" />
<meta name="theme-color" content="#F0F0F0" />
<link rel="manifest" href="./caroline/manifest.json" crossorigin="use-credentials">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link rel="stylesheet" type="text/css" href="./caroline/style/style_bright.css">
<link rel="stylesheet" type="text/css" href="./caroline/style/code_style.css">
<link rel="stylesheet" type="text/css" href="./caroline/style/roundtable_style.css">
</head>
<body>
<div id="intro">
<div>
<div id="intro1">
<div></div>
<h1>Roundtable</h1>
<h2>a surface for collaborative feedback</h2>
<input class="text" id="uname" placeholder="Enter your name..."><br/>
<input type="button" id="gettable" value="Get my roundtable">
</div>
<div id="intro2">
<h3>Set toolbox for</h3>
<div>
<span class='rselect'>left hand use</span>
<span class='rselect rselected'>right hand use</span>
</div>
<h3>Are you human?</h3>
<div class="g-recaptcha"
data-callback='enabaleProceed' data-expired-callback='disableProceed'
data-sitekey="6LdpyLIUAAAAAOZAwrcS3b41YUXcG3q2iNLDVZyq"></div>
<input type="button" id="bproceed" value="Proceed">
</div>
<div id="intro3">
<h3>Setting up a roundtable...</h3>
</div>
<div id="intro4">
<h3>Invite others to join you</h3>
<div id="qr"></div>
<h2>... or share link (it's already copied in clipboard!)</h2>
<div id="rlink"></div>
<input type="button" id="bstart" value="Start collaborating">
</div>
</div>
<div id="about" class='about'>
<div>
<h1>About Roundtable</h1>
<p> In real life
meetings around Roundtable everyone can point and add their sketched idea
on the presented material. Now we extend that experience for meetings
with physical distancing, with many participants, or even with participants
distributed around the world. Have engaging meetings with collaborative
feedback using this distributed discussion surface!</p>
<p><span>Use in-person or in a video conference...</span><br>
...or even as a support when talking over the phone.
For natural feel, open Roundtable in a tablet to have a horizontal
surface for work and keep vertical plane (workstation screen
or direct view of your collaborators) for communication.
Short of a tablet, it works on any web browser of course, be it
a workstation or a mobile phone.
</p>
<p><span>Allows everyone to contribute.</span> <br>
Need to point to something while explaining or asking question?
Or to <b>add a quick sketch</b>, maybe even over existing picture,
or in the corner of that PDF? Or maybe flip through back
to the previous pdf page to <b>add some text</b> and scroll to that
problematic point in code?
Everyone can do it since we are all equal around the Roundtable, and we
all see the same.
</p>
<p><span>A magic surface aware of shared content.</span><br>
Share on Roundtable files and they will come to life. Images open.
PDF lets you flip through the pages. Source code comes completely highlighted.
Even the Jupyter Notebooks will render.
All this while you can still together flip and scroll through, annotating
and commenting. Save files or annotated views simply. Much more than
a file transfer and screen share! Need more space? Just press
+ to get another surface while keeping shared material opened on side!
</p>
<p><span>Made for science. $\lim_{\rm{sci}^3\rightarrow + \infty}|\psi\rangle$</span><br>
Text annotaitons support $\LaTeX$, be it
between <code>$...$</code> or <code>$$...$$</code> or even
<code>\begin{...} ... \end{...}</code>. Made a mistake in added text?
Just double click on it while in pointer mode. Undo works just for your
edits. Or if you want to start fresh, press on the sponge: it cleans
the surface while keeping your hands dry & clean! Quickly save any
view in a meaningfully timestamped filename.
</p>
<p><span>Simple, secure and free.</span><br>
There is no registration or installation. Everytime you will get a unique roundtable URL
that acts as a secret place for your meeting. Server communication is
via HTTPS, and it just acts as a relay for sent information (nothing is saved there).
If you wish, you can use Roundtable with your own local relay server, to
make sure bandwidth is available for you when needed and
without file transfer share limits (contact me below for details about on-premise hosting).
</p>
<span class='me'>
<b>Questions, ideas, feedback...? Contact me below</b>
<a href='https://github.com/nikolasibalic' rel="noreferrer" target="_blank" title='Contact'>web application © Nikola Šibalić, 2021</a>
</span>
</div>
</div>
</div>
<div id="confirmd">
<div>
<h3>Please confirm</h3>
<h2 id="confirmmessage"></h2>
<input type="button" id="bno" value="Cancel"><br/>
<input type="button" id="byes" value="Yes, clear roundtable">
</div>
</div>
<div id="slidespace">
</div>
<div id="cursor" class="cursor">
<div class="cursor-icon"> <div class="cursor-name" id="cname0"></div></div>
</div>
<div id="controlspace">
<div class="control" title="Exit roundtable"></div>
<div class="control" title="Toggle full screen"></div>
<div class="control" title="Next slide"></div>
<div class="control" title="Previous slide"></div>
<div class="control" title="Use pointer"></div>
<div class="control" title="Use pen"></div>
<div class="control" title="color selection"><div class='colors'></div></div>
<div class="control" title="color selection"><div class='colors'></div></div>
<div class="control" title="color selection"><div class='colors'></div></div>
<div class="control" title="color selection"><div class='colors'></div></div>
<div class="control" title="Reduce pen line thickness"></div>
<div class="control" title="Increase pen line thickness"></div>
<div class="control" title="Add text or LaTeX"></div>
<div class="control" title="Roundtable"></div>
<div class="control" title="Share image, PDF, Jupyter notebook or source code"><input type="file" id="selectedimage"></div>
<div class="control" title="Save current view as image"></div>
<div class="control" title="Increase text size"></div>
<div class="control" title="Decrease text size"></div>
<div class="control" title="Remove last annotation"></div>
<div class="control" title="Clear surface"></div>
<div class="control" title="Add slide surface"></div>
</div>
<div id="cameraspace">
<div class="camera" title="Add camera in the corner"></div>
</div>
<div id="roundtable_participants">
</div>
<div id="notify">
<span></span>
</div>
<script>
MathJax = {
tex: {
inlineMath: [['$', '$'], ['\\(', '\\)']],
displayMath: [ // start/end delimiter pairs for display math
['$$', '$$'],
['\\[', '\\]']
],
processEnvironments: true, // process \begin{xxx}...\end{xxx} outside math mode
packages: {'[+]': ['bbox']}
},
svg: {
fontCache: 'global'
},
loader: {load: ['[tex]/bbox']}
};
</script>
<script id="MathJax-script" src="./caroline/js/mathjax/tex-chtml.js" defer></script>
<script src="./caroline/js/socket.io.min.js" defer></script>
<script src="./caroline/js/html2canvas.min.js" defer></script>
<script src="./caroline/js/pdf.min.js"></script>
<script src='./caroline/js/jspdf.umd.min.js'></script>
<script>
var pdfjsLib = window['pdfjs-dist/build/pdf'];
pdfjsLib.GlobalWorkerOptions.workerSrc = './caroline/js/pdf.worker.min.js';</script>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<link id="codelightcss" rel="stylesheet" href="./caroline/style/atom-one-light.min.css" defer disabled="disabled">
<link id="codedarkcss" rel="stylesheet" href="./caroline/style/atom-one-dark.min.css" defer>
<script src="./caroline/js/highlight.min.js" defer></script>
<script src="./caroline/js/markdown-it.min.js" defer></script>
<script src="./caroline/js/markdown-it-mathjax.js" defer></script>
<script src='./caroline/js/nbv.js' defer></script>
<script src="./caroline/js/roundtable.js"></script>
<script src="./caroline/js/caroline.js"></script>
<script>
var roundTable = false; //false;
var username = "";
var room = null; // roundtable room
var data = {"slides":[]};
var logoURL = "";
var leftHanded = false;
var drawingHelp = "dots";
var drawingHelpIntensity = 0.06;
var roundTableCallBack = null;
var roundTableServer = "https://roundtable.researchx3d.com/";
var roundTableAuth = "";
var roundTableExit = null;
var presentationServer = "";
var presenter = true;
window.onload = initRoundTable();
</script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-V2G532WRLD"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-V2G532WRLD');
</script>
</body>