2013-09-27 10:39:47 +00:00
|
|
|
<!DOCTYPE html>
|
2019-06-23 07:47:01 +00:00
|
|
|
<html lang="{{language}}">
|
2013-09-27 10:39:47 +00:00
|
|
|
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="utf-8" />
|
2020-04-21 23:12:50 +00:00
|
|
|
<title>{{board}} | WBO | {{translations.collaborative_whiteboard}}</title>
|
2013-10-03 14:24:45 +00:00
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
2020-05-01 10:33:13 +00:00
|
|
|
<link rel="stylesheet" type="text/css" href="../board.css" />
|
|
|
|
|
<script src="../socket.io/socket.io.js"></script>
|
2020-05-05 13:23:52 +00:00
|
|
|
<meta name="description" content="{{translations.tagline}}" />
|
2019-06-27 13:46:39 +00:00
|
|
|
<meta name="keywords"
|
2020-04-21 23:12:50 +00:00
|
|
|
content="{{translations.collaborative_whiteboard}},online,draw,paint,shared,realtime,wbo,whitebophir" />
|
2020-05-01 10:33:13 +00:00
|
|
|
<link rel="apple-touch-icon" href="../favicon.svg">
|
|
|
|
|
<link rel="icon" type="image/x-icon" sizes="16x16" href="../favicon.ico">
|
2019-06-27 13:46:39 +00:00
|
|
|
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0" />
|
2019-03-20 18:00:12 +00:00
|
|
|
<meta property="og:title" content="{{board}} board on WBO" />
|
2020-05-02 14:27:28 +00:00
|
|
|
<meta property="og:url" content="{{baseUrl}}/boards/{{boardUriComponent}}" />
|
|
|
|
|
<meta property="og:image" content="{{baseUrl}}/preview/{{boardUriComponent}}" />
|
2020-05-01 10:33:13 +00:00
|
|
|
<link rel="canonical" href="{{boardUriComponent}}?lang={{language}}" />
|
2019-06-27 13:44:16 +00:00
|
|
|
{{#languages}}
|
2020-05-01 10:33:13 +00:00
|
|
|
<link rel="alternate" hreflang="{{.}}" href="{{../boardUriComponent}}?lang={{.}}" />
|
2019-06-27 13:44:16 +00:00
|
|
|
{{/languages}}
|
2020-05-05 10:01:46 +00:00
|
|
|
<script src="../polyfill.min.js"></script>
|
2013-09-27 10:39:47 +00:00
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
<body>
|
|
|
|
|
|
2019-06-27 13:46:39 +00:00
|
|
|
<div id="board">
|
|
|
|
|
<svg id="canvas" width="500" height="500" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
|
|
|
|
<defs id="defs"></defs>
|
2020-05-02 04:13:48 +00:00
|
|
|
<g id="drawingArea"></g>
|
|
|
|
|
<g id="cursors"></g>
|
2019-06-27 13:46:39 +00:00
|
|
|
</svg>
|
|
|
|
|
</div>
|
2013-10-06 22:43:00 +00:00
|
|
|
|
2020-04-21 23:12:50 +00:00
|
|
|
<div id="loadingMessage">{{translations.loading}}</div>
|
2019-06-25 11:28:02 +00:00
|
|
|
|
2019-06-27 13:46:39 +00:00
|
|
|
<div id="menu">
|
|
|
|
|
<div id="menuItems">
|
|
|
|
|
<ul id="tools" class="tools">
|
2020-04-28 09:47:43 +00:00
|
|
|
<li class="tool" tabindex="-1">
|
2020-10-14 21:35:14 +00:00
|
|
|
<img class="tool-icon" width="35" height="35" src="" alt="icon" />
|
|
|
|
|
<span class="tool-name"></span>
|
|
|
|
|
<img class="tool-icon secondaryIcon" width="35" height="35" src="data:," alt="icon" />
|
2020-04-25 20:33:02 +00:00
|
|
|
</li>
|
2019-06-27 13:46:39 +00:00
|
|
|
</ul>
|
2013-09-27 10:39:47 +00:00
|
|
|
|
2019-06-27 13:46:39 +00:00
|
|
|
<ul class="tools" id="settings">
|
2020-04-28 09:47:43 +00:00
|
|
|
<li class="tool" tabindex="-1">
|
2020-04-25 22:45:42 +00:00
|
|
|
<input class="tool-icon" type="color" id="chooseColor" value="#1913B0" />
|
2020-04-21 23:12:50 +00:00
|
|
|
<label class="tool-name" for="chooseColor">{{translations.color}}</label>
|
2020-04-03 16:11:32 +00:00
|
|
|
<span class="colorPresets" id="colorPresetSel">
|
|
|
|
|
<span class="colorPresetButton"></span>
|
|
|
|
|
</span>
|
2019-06-27 13:46:39 +00:00
|
|
|
</li>
|
2020-05-02 14:27:28 +00:00
|
|
|
<li class="tool" tabindex="-1"
|
|
|
|
|
title="{{translations.size}} ({{translations.keyboard_shortcut}}: alt + {{translations.mousewheel}})">
|
2020-04-25 22:45:42 +00:00
|
|
|
<img class="tool-icon" width="60" height="60" src="icon-size.svg" alt="size" />
|
2019-06-27 13:46:39 +00:00
|
|
|
<label class="tool-name slider" for="chooseSize">
|
2020-04-21 23:12:50 +00:00
|
|
|
<span>{{translations.size}}</span>
|
2020-04-15 12:49:49 +00:00
|
|
|
<input type="range" id="chooseSize" value="4" min="1" max="50" step="1" class="rangeChooser" />
|
2019-06-27 13:46:39 +00:00
|
|
|
</label>
|
|
|
|
|
</li>
|
2020-04-28 09:47:43 +00:00
|
|
|
<li class="tool" tabindex="-1">
|
2019-06-19 10:09:06 +00:00
|
|
|
<span class="tool-icon">
|
2020-04-26 12:56:51 +00:00
|
|
|
<svg viewBox="0 0 8 8">
|
2019-06-19 10:09:06 +00:00
|
|
|
<pattern id="opacityPattern" x="0" y="0" width="4" height="4" patternUnits="userSpaceOnUse">
|
2020-05-05 10:01:46 +00:00
|
|
|
<rect x=0 y=0 width=2 height=2 fill=black></rect>
|
|
|
|
|
<rect x=2 y=2 width=2 height=2 fill=black></rect>
|
|
|
|
|
<rect x=2 y=0 width=2 height=2 fill=#eeeeee></rect>
|
|
|
|
|
<rect x=0 y=2 width=2 height=2 fill=#eeeeee></rect>
|
2019-06-19 10:09:06 +00:00
|
|
|
</pattern>
|
2020-05-05 10:01:46 +00:00
|
|
|
<circle cx=4 cy=4 id="opacityIndicator" r=3.5 fill="url(#opacityPattern)"></circle>
|
2019-06-19 10:09:06 +00:00
|
|
|
</svg>
|
|
|
|
|
</span>
|
|
|
|
|
<label class="tool-name slider" for="chooseOpacity">
|
2020-04-21 23:12:50 +00:00
|
|
|
<span>{{translations.opacity}}</span>
|
2019-06-27 13:46:39 +00:00
|
|
|
<input type="range" id="chooseOpacity" value="1" min="0.2" max="1" step="0.1"
|
|
|
|
|
class="rangeChooser" />
|
2019-06-19 10:09:06 +00:00
|
|
|
</label>
|
2019-06-27 13:46:39 +00:00
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
2013-09-27 10:39:47 +00:00
|
|
|
</div>
|
|
|
|
|
|
2015-07-17 11:21:17 +00:00
|
|
|
|
2020-05-02 04:13:48 +00:00
|
|
|
<script type="application/json" id="translations">{{{ json translations }}}</script>
|
|
|
|
|
<script type="application/json" id="configuration">{{{ json configuration }}}</script>
|
2020-05-01 10:33:13 +00:00
|
|
|
<script src="../js/path-data-polyfill.js"></script>
|
|
|
|
|
<script src="../js/minitpl.js"></script>
|
|
|
|
|
<script src="../js/board.js"></script>
|
Add a svg export with proper rounding (#58)
* make live version render single-point paths the same as preview does
* implemented smoothing in server side rendering
* separate preview from export
* ensure correct handling of paths with only one child
* break out rendering of 3rd point and up into separate function
* changed test for 2 points to math current implementation and added a test for a bezier curve with 3 lines
* deduplicate code to extrapolate points for bezier curves
* fix merge
* Factor more code between the client and the server
Completely remove the straight line approximation foor paths
Vastly improve preview performance
* Add support for opacity in preview
* Stream board previews to the browser
Previously, svg board previews were generated in memory
and then pushed to the client.
They are now streamed to the client without blocking the main thread.
# Performance
## Before
$ ab -n 30 -c 15 http://localhost:8080/preview/ic3
This is ApacheBench, Version 2.3 <$Revision: 1843412 $>
Copyright 1996 Adam Twiss, Zeus Technology Ltd, http://www.zeustech.net/
Licensed to The Apache Software Foundation, http://www.apache.org/
Benchmarking localhost (be patient).....done
Server Software:
Server Hostname: localhost
Server Port: 8080
Document Path: /preview/ic3
Document Length: 14352691 bytes
Concurrency Level: 15
Time taken for tests: 19.499 seconds
Complete requests: 30
Failed requests: 0
Total transferred: 430588920 bytes
HTML transferred: 430580730 bytes
Requests per second: 1.54 [#/sec] (mean)
Time per request: 9749.374 [ms] (mean)
Time per request: 649.958 [ms] (mean, across all concurrent requests)
Transfer rate: 21565.33 [Kbytes/sec] received
Connection Times (ms)
min mean[+/-sd] median max
Connect: 0 0 0.1 0 0
Processing: 727 8885 1561.6 9220 9817
Waiting: 718 5380 2668.8 5569 9549
Total: 727 8885 1561.6 9220 9817
Percentage of the requests served within a certain time (ms)
50% 9220
66% 9239
75% 9245
80% 9248
90% 9560
95% 9811
98% 9817
99% 9817
100% 9817 (longest request)
## After
$ ab -n 30 -c 15 http://localhost:8080/preview/ic3
This is ApacheBench, Version 2.3 <$Revision: 1843412 $>
Copyright 1996 Adam Twiss, Zeus Technology Ltd, http://www.zeustech.net/
Licensed to The Apache Software Foundation, http://www.apache.org/
Benchmarking localhost (be patient).....done
Server Software:
Server Hostname: localhost
Server Port: 8080
Document Path: /preview/ic3
Document Length: 14352687 bytes
Concurrency Level: 15
Time taken for tests: 17.647 seconds
Complete requests: 30
Failed requests: 0
Total transferred: 430588020 bytes
HTML transferred: 430580610 bytes
Requests per second: 1.70 [#/sec] (mean)
Time per request: 8823.254 [ms] (mean)
Time per request: 588.217 [ms] (mean, across all concurrent requests)
Transfer rate: 23828.86 [Kbytes/sec] received
Connection Times (ms)
min mean[+/-sd] median max
Connect: 0 0 0.1 0 0
Processing: 719 8212 1440.6 8657 8810
Waiting: 701 4666 2324.8 4788 8769
Total: 719 8212 1440.6 8657 8811
Percentage of the requests served within a certain time (ms)
50% 8657
66% 8670
75% 8691
80% 8790
90% 8802
95% 8808
98% 8811
99% 8811
100% 8811 (longest request)
* Write the element id and opacity only when needed
* Fix a bug in wbo_pencil_point
* Rework the integration tests for the pencil tool
* Test server-side rendering in integration tests
* Remove unused function
* Remove unused id fallback
* set return types
* fix rectangle
* set fill for rect in stylesheet instead
Co-authored-by: Ophir LOJKINE <pere.jobs@gmail.com>
2020-05-08 19:15:39 +00:00
|
|
|
<script src="../tools/pencil/wbo_pencil_point.js"></script>
|
2020-05-01 10:33:13 +00:00
|
|
|
<script src="../tools/pencil/pencil.js"></script>
|
2020-05-02 04:13:48 +00:00
|
|
|
<script src="../tools/cursor/cursor.js"></script>
|
2020-05-01 10:33:13 +00:00
|
|
|
<script src="../tools/line/line.js"></script>
|
|
|
|
|
<script src="../tools/rect/rect.js"></script>
|
2020-05-03 15:53:44 +00:00
|
|
|
<script src="../tools/ellipse/ellipse.js"></script>
|
2020-05-01 10:33:13 +00:00
|
|
|
<script src="../tools/text/text.js"></script>
|
|
|
|
|
<script src="../tools/eraser/eraser.js"></script>
|
|
|
|
|
<script src="../tools/hand/hand.js"></script>
|
2020-05-03 17:09:14 +00:00
|
|
|
<script src="../tools/grid/grid.js"></script>
|
2020-05-01 10:33:13 +00:00
|
|
|
<script src="../tools/zoom/zoom.js"></script>
|
2020-05-05 10:01:46 +00:00
|
|
|
<script src="../js/canvascolor.js"></script>
|
2013-09-27 10:39:47 +00:00
|
|
|
</body>
|
2019-06-27 13:46:39 +00:00
|
|
|
|
2020-06-21 21:48:32 +00:00
|
|
|
</html>
|
