aolo2
/
desk2
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Brush preview

infinite
A.Olokhtonov 2 years ago
parent
45c3af9c67
commit
110afe123f
4 changed files with 52 additions and 13 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 12
      client/default.css
  2. 23
      client/index.html
  3. 28
      client/tools.js
  4. 2
      client/webgl.js

12
client/default.css
Unescape View File

@ -15,6 +15,10 @@ html, body { @@ -15,6 +15,10 @@ html, body {
overflow: hidden;
}
.dhide {
display: none !important;
}
canvas {
width: 100%;
height: 100%;
@ -243,4 +247,12 @@ input[type=range]::-moz-range-track { @@ -243,4 +247,12 @@ input[type=range]::-moz-range-track {
.phone-extra-controls {
display: flex;
}
}
#stroke-preview {
position: absolute;
border-radius: 50%;
left: 50%;
top: 96px;
transform: translate(-50%, -50%);
}

23
client/index.html
Unescape View File

@ -6,19 +6,19 @@ @@ -6,19 +6,19 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="shortcut icon" href="icons/favicon.svg" id="favicon">
<link rel="stylesheet" type="text/css" href="default.css?v=8">
<link rel="stylesheet" type="text/css" href="default.css?v=12">
<script type="text/javascript" src="math.js?v=8"></script>
<script type="text/javascript" src="aux.js?v=8"></script>
<script type="text/javascript" src="tools.js?v=8"></script>
<script type="text/javascript" src="webgl_geometry.js?v=8"></script>
<script type="text/javascript" src="webgl_shaders.js?v=8"></script>
<script type="text/javascript" src="webgl_listeners.js?v=8"></script>
<script type="text/javascript" src="webgl.js?v=8"></script>
<script type="text/javascript" src="math.js?v=12"></script>
<script type="text/javascript" src="aux.js?v=12"></script>
<script type="text/javascript" src="tools.js?v=12"></script>
<script type="text/javascript" src="webgl_geometry.js?v=12"></script>
<script type="text/javascript" src="webgl_shaders.js?v=12"></script>
<script type="text/javascript" src="webgl_listeners.js?v=12"></script>
<script type="text/javascript" src="webgl.js?v=12"></script>
<script type="text/javascript" src="client_send.js?v=8"></script>
<script type="text/javascript" src="client_recv.js?v=8"></script>
<script type="text/javascript" src="websocket.js?v=8"></script>
<script type="text/javascript" src="client_send.js?v=12"></script>
<script type="text/javascript" src="client_recv.js?v=12"></script>
<script type="text/javascript" src="websocket.js?v=12"></script>
</head>
<body>
<canvas id="c"></canvas>
@ -27,6 +27,7 @@ @@ -27,6 +27,7 @@
<div class="sizer">
<input type="range" class="slider" id="stroke-width" min="1" max="64">
</div>
<div id="stroke-preview" class="dhide"></div>
</div>
<div class="pallete-wrapper">

28
client/tools.js
Unescape View File

@ -22,9 +22,30 @@ function switch_color(state, item) { @@ -22,9 +22,30 @@ function switch_color(state, item) {
state.colors.active_element.classList.add('active');
}
function show_stroke_preview(state, size) {
const preview = document.querySelector('#stroke-preview');
preview.style.width = size * state.canvas.zoom + 'px';
preview.style.height = size * state.canvas.zoom + 'px';
preview.style.background = color_from_u32(state.colors.active);
preview.classList.remove('dhide');
}
function hide_stroke_preview() {
document.querySelector('#stroke-preview').classList.add('dhide');
}
function switch_stroke_width(e, state) {
const value = e.target.value;
state.stroke_width = value;
show_stroke_preview(state, value);
if (state.hide_preview) {
clearTimeout(state.hide_preview);
}
state.hide_preview = setTimeout(hide_stroke_preview, config.brush_preview_timeout);
}
function init_tools(state) {
@ -38,7 +59,10 @@ function init_tools(state) { @@ -38,7 +59,10 @@ function init_tools(state) {
switch_tool(state, document.querySelector('.tool[data-tool="pencil"]'));
switch_color(state, document.querySelector('.color[data-color="000000"]'));
document.querySelector('#stroke-width').value = state.stroke_width;
document.querySelector('#stroke-width').addEventListener('input', (e) => switch_stroke_width(e, state));
const slider = document.querySelector('#stroke-width');
slider.value = state.stroke_width;
slider.addEventListener('input', (e) => switch_stroke_width(e, state));
document.querySelector('.phone-extra-controls').addEventListener('click', zenmode);
}

2
client/webgl.js
Unescape View File

@ -80,6 +80,7 @@ const config = { @@ -80,6 +80,7 @@ const config = {
image_url: 'http://192.168.100.2/images/',
sync_timeout: 1000,
ws_reconnect_timeout: 10000,
brush_preview_timeout: 1000,
second_finger_timeout: 500,
buffer_first_touchmoves: 5,
debug_print: true,
@ -197,6 +198,7 @@ function main() { @@ -197,6 +198,7 @@ function main() {
'timers': {
'ws_reconnect': null,
'hide_preview': null,
},
'players': {},

Write Preview
Loading…
Cancel
Save