security_vision/chronodiagram
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

move with right btn, add fullscreen btn, index

Browse source
This commit is contained in:
Ruben van de Ven 2022-02-08 12:07:28 +01:00
parent d572d22c61
commit 47ab4241b8
5 changed files with 77 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
files/.gitignore vendored Normal file
View file

@ -0,0 +1,2 @@
*
!.gitignore

2
log/.gitignore vendored
View file

@ -1,2 +1,2 @@
*
!.gitignore
!.gitignore

7
webserver.py
View file

@ -523,11 +523,12 @@ class Server:
DrawingHandler,
{"config": self.config, "index": self.index},
),
(r"/(.+)", StaticFileWithHeaderHandler,
{"path": self.web_root}),
(r"/", IndexHandler,
(r"/index", IndexHandler,
{"config": self.config, "index": self.index}),
(r"/(.*)", StaticFileWithHeaderHandler,
{"path": self.web_root, 'default_filename': 'index.html'}),
],
debug=True,
autoreload=True,

24
www/draw.html
View file

@ -7,6 +7,9 @@
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' />
<title>Draw a line animation</title>
<style media="screen">
body{
background:black;
}
#sample,
svg {
position: absolute;
@ -89,6 +92,7 @@
left: 0;
width: 100%;
height: 100%;
background:white;
}
#info {
@ -150,7 +154,7 @@
bottom: 0;
left: 0;
color: gray;
z-index: -1;
z-index: 1;
font-size: 8pt;
}
@ -162,6 +166,24 @@
cursor: wait;
pointer-events: none;
}
.button-fullscreen{
display: block;
cursor:pointer;
position: absolute;
bottom: 50px;
left: calc(50% - 200px);
width: 400px;
border-radius: 50px;
background:black; color:white;
text-align: center;
line-height: 2;
font-size: 40px;
z-index: 10;
}
body.fullscreen .button-fullscreen{
display:none;
}
</style>
</head>

62
www/draw.js
View file

@ -25,6 +25,7 @@
class Canvas {
constructor(wrapperEl, preload_id) {
this.allowDrawing = false;
this.socket = null; // don't initialise right away
this.viewbox = { "x": 0, "y": 0, "width": null, "height": null };
this.url = window.location.origin.replace('http', 'ws') + '/ws?' + window.location.search.substring(1);
@ -44,6 +45,22 @@ class Canvas {
this.wrapperEl.appendChild(this.filenameEl);
this.fullscreenEl = document.createElement('div');
this.fullscreenEl.classList.add('button-fullscreen');
this.fullscreenEl.innerText = "Fullscreen";
this.wrapperEl.appendChild(this.fullscreenEl);
this.fullscreenEl.addEventListener('click', (e) => {
document.body.requestFullscreen();
});
document.body.addEventListener('fullscreenchange', (e) => {
if (document.fullscreenElement) {
document.body.classList.add('fullscreen');
} else {
document.body.classList.remove('fullscreen');
}
})
this.colors = ["black", "red", "blue", "green"];
this.resize();
@ -64,7 +81,7 @@ class Canvas {
document.body.addEventListener('pointermove', (ev) => {
ev.stopPropagation();
ev.preventDefault();
if (ev.pointerType == "touch" || ev.buttons & 4) { // 4: middle mouse button
if (ev.pointerType == "touch" || ev.buttons & 2) { // 4: middle mouse button
this.moveCanvas(ev);
} else { // pointerType == pen or mouse
this.draw(ev);
@ -73,8 +90,8 @@ class Canvas {
document.body.addEventListener('pointerup', (ev) => {
ev.stopPropagation();
ev.preventDefault();
if (ev.pointerType == "touch" || ev.buttons & 4 || this.isMoving) { // buttons is 0 on pointerup
if (ev.pointerType == "touch" || ev.buttons & 2 || this.isMoving) { // buttons is 0 on pointerup
this.endMoveCanvas(ev);
this.isMoving = false;
} else { // pointerType == pen or mouse
@ -82,13 +99,17 @@ class Canvas {
this.penup(ev);
}
});
this.svgEl.addEventListener('contextmenu', function (e) {
// do something here...
e.preventDefault();
}, false);
this.svgEl.addEventListener('pointerdown', (ev) => {
ev.stopPropagation();
ev.preventDefault();
if (ev.pointerType == "touch" || ev.buttons & 4) { // 4: middle mouse button
if (ev.pointerType == "touch" || ev.buttons & 2) { // 4: middle mouse button, 2; right mouse button
this.isMoving = true;
this.startMoveCanvas(ev);
} else if(ev.buttons & 1) { // pointerType == pen or mouse
} else if (ev.buttons & 1) { // pointerType == pen or mouse
this.startStroke(ev);
}
});
@ -100,13 +121,7 @@ class Canvas {
this.socket = new WebSocket(this.url);
this.socket.addEventListener('open', (e) => {
const d = {
'event': 'dimensions',
'width': this.viewbox.width,
'height': this.viewbox.height
};
console.log('send', d);
this.socket.send(JSON.stringify(d));
this.sendDimensions();
if (preload_id) {
// signal if we want to continue from an existing drawing
@ -115,7 +130,7 @@ class Canvas {
'file': preload_id,
}));
}
})
});
this.socket.addEventListener('message', (e) => {
let msg = JSON.parse(e.data);
console.log('receive', msg);
@ -126,7 +141,7 @@ class Canvas {
}
if (msg.hasOwnProperty('preloaded_svg')) {
console.log('preloaded', msg);
if(msg.dimensions[0] != this.viewbox.width || msg.dimensions[1] != this.viewbox.height){
if (msg.dimensions[0] != this.viewbox.width || msg.dimensions[1] != this.viewbox.height) {
alert(`Loading file with different dimensions. This can lead to odd results. Original: ${msg.dimensions[0]}x${msg.dimensions[1]} Now: ${this.viewbox.width}x${this.viewbox.height}`)
}
this.setPreloaded(msg.preloaded_svg);
@ -206,7 +221,6 @@ class Canvas {
colorEl.addEventListener('click', (e) => {
console.log('set color', color)
this.setColor(color);
})
colorsEl.appendChild(colorEl);
@ -232,6 +246,24 @@ class Canvas {
this.viewbox.height = window.innerHeight;
this.applyViewBox();
this.sendDimensions();
}
sendDimensions() {
const d = {
'event': 'dimensions',
'width': this.viewbox.width,
'height': this.viewbox.height
};
if (this.socket === null) {
// ignore ...
} else if (this.socket.readyState) {
this.socket.send(JSON.stringify(d));
} else {
this.socket.addEventListener('open', (ev) => {
this.socket.send(JSON.stringify(d));
})
}
}
applyViewBox() {