A.Olokhtonov
2 years ago
12 changed files with 436 additions and 340 deletions
@ -0,0 +1,143 @@ |
|||||||
|
// NEXT: fire events for brush changes
|
||||||
|
|
||||||
|
document.addEventListener('DOMContentLoaded', main); |
||||||
|
|
||||||
|
const config = { |
||||||
|
ws_url: 'ws://192.168.100.2/ws/', |
||||||
|
ping_url: 'http://192.168.100.2/api/ping', |
||||||
|
image_url: 'http://192.168.100.2/images/', |
||||||
|
sync_timeout: 1000, |
||||||
|
ws_reconnect_timeout: 2000, |
||||||
|
brush_preview_timeout: 1000, |
||||||
|
second_finger_timeout: 500, |
||||||
|
buffer_first_touchmoves: 5, |
||||||
|
debug_print: true, |
||||||
|
min_zoom: 0.01, |
||||||
|
max_zoom: 100.0, |
||||||
|
initial_offline_timeout: 1000, |
||||||
|
default_color: 0x00, |
||||||
|
default_width: 8, |
||||||
|
}; |
||||||
|
|
||||||
|
const EVENT = Object.freeze({ |
||||||
|
PREDRAW: 10, |
||||||
|
SET_COLOR: 11, |
||||||
|
SET_WIDTH: 12, |
||||||
|
|
||||||
|
STROKE: 20, |
||||||
|
RULER: 21, /* gets re-written with EVENT.STROKE before sending to server */ |
||||||
|
|
||||||
|
UNDO: 30, |
||||||
|
REDO: 31, |
||||||
|
|
||||||
|
IMAGE: 40, |
||||||
|
IMAGE_MOVE: 41, |
||||||
|
|
||||||
|
ERASER: 50, |
||||||
|
}); |
||||||
|
|
||||||
|
const MESSAGE = Object.freeze({ |
||||||
|
INIT: 100, |
||||||
|
SYN: 101, |
||||||
|
ACK: 102, |
||||||
|
FULL: 103, |
||||||
|
FIRE: 104, |
||||||
|
JOIN: 105, |
||||||
|
}); |
||||||
|
|
||||||
|
function main() { |
||||||
|
const state = { |
||||||
|
'online': false, |
||||||
|
'me': null, |
||||||
|
|
||||||
|
'canvas': { |
||||||
|
'offset': { 'x': 0, 'y': 0 }, |
||||||
|
'zoom': 1.0, |
||||||
|
}, |
||||||
|
|
||||||
|
'cursor': { |
||||||
|
'x': 0, |
||||||
|
'y': 0, |
||||||
|
}, |
||||||
|
|
||||||
|
'sn': 0, |
||||||
|
'lsn': 0, |
||||||
|
'server_lsn': 0, |
||||||
|
|
||||||
|
'touch': { |
||||||
|
'moves': 0, |
||||||
|
'drawing': false, |
||||||
|
'moving': false, |
||||||
|
'waiting_for_second_finger': false, |
||||||
|
'first_finger_position': null, |
||||||
|
'second_finger_position': null, |
||||||
|
'buffered': [], |
||||||
|
'ids': [], |
||||||
|
}, |
||||||
|
|
||||||
|
'moving': false, |
||||||
|
'drawing': false, |
||||||
|
'spacedown': false, |
||||||
|
|
||||||
|
'current_strokes': {}, |
||||||
|
|
||||||
|
'queue': [], |
||||||
|
'events': [], |
||||||
|
|
||||||
|
'tools': { |
||||||
|
'active': null, |
||||||
|
'active_element': null, |
||||||
|
}, |
||||||
|
|
||||||
|
'colors': { |
||||||
|
'active_element': null, |
||||||
|
}, |
||||||
|
|
||||||
|
'timers': { |
||||||
|
'hide_preview': null, |
||||||
|
'offline_toast': null, |
||||||
|
'raf': false, |
||||||
|
}, |
||||||
|
|
||||||
|
'players': {}, |
||||||
|
}; |
||||||
|
|
||||||
|
const context = { |
||||||
|
'canvas': null, |
||||||
|
'gl': null, |
||||||
|
'programs': {}, |
||||||
|
'buffers': {}, |
||||||
|
'locations': {}, |
||||||
|
'textures': {}, |
||||||
|
|
||||||
|
'dynamic_positions': {}, |
||||||
|
'dynamic_colors': {}, |
||||||
|
|
||||||
|
'quad_positions': [], |
||||||
|
'quad_texcoords': [], |
||||||
|
'static_positions': [], |
||||||
|
'static_colors': [], |
||||||
|
'static_positions_f32': new Float32Array(0), |
||||||
|
'dynamic_positions_f32': new Float32Array(0), |
||||||
|
'static_colors_u8': new Uint8Array(0), |
||||||
|
'dynamic_colors_u8': new Uint8Array(0), |
||||||
|
'quad_positions_f32': new Float32Array(0), |
||||||
|
'quad_texcoords_f32': new Float32Array(0), |
||||||
|
'bgcolor': {'r': 1.0, 'g': 1.0, 'b': 1.0}, |
||||||
|
}; |
||||||
|
|
||||||
|
const url = new URL(window.location.href); |
||||||
|
const parts = url.pathname.split('/'); |
||||||
|
|
||||||
|
state.desk_id = parts.length > 0 ? parts[parts.length - 1] : 0; |
||||||
|
|
||||||
|
init_webgl(state, context); |
||||||
|
init_listeners(state, context); |
||||||
|
init_tools(state); |
||||||
|
|
||||||
|
ws_connect(state, context, true); |
||||||
|
|
||||||
|
schedule_draw(state, context); |
||||||
|
|
||||||
|
state.timers.offline_toast = setTimeout(() => ui_offline(), config.initial_offline_timeout); |
||||||
|
} |
||||||
@ -1,269 +0,0 @@ |
|||||||
// NEXT: fire events for brush changes
|
|
||||||
|
|
||||||
document.addEventListener('DOMContentLoaded', main); |
|
||||||
|
|
||||||
function draw(state, context) { |
|
||||||
state.timers.raf = false; |
|
||||||
|
|
||||||
const gl = context.gl; |
|
||||||
const width = window.innerWidth; |
|
||||||
const height = window.innerHeight; |
|
||||||
|
|
||||||
let locations; |
|
||||||
let buffers; |
|
||||||
|
|
||||||
gl.viewport(0, 0, context.canvas.width, context.canvas.height); |
|
||||||
gl.clearColor(context.bgcolor.r, context.bgcolor.g, context.bgcolor.b, 1); |
|
||||||
gl.clear(gl.COLOR_BUFFER_BIT); |
|
||||||
|
|
||||||
// Draw images
|
|
||||||
locations = context.locations['quad']; |
|
||||||
buffers = context.buffers['quad']; |
|
||||||
|
|
||||||
gl.useProgram(context.programs['quad']); |
|
||||||
|
|
||||||
gl.enableVertexAttribArray(locations['a_pos']); |
|
||||||
gl.enableVertexAttribArray(locations['a_texcoord']); |
|
||||||
|
|
||||||
gl.uniform2f(locations['u_res'], context.canvas.width, context.canvas.height); |
|
||||||
gl.uniform2f(locations['u_scale'], state.canvas.zoom, state.canvas.zoom); |
|
||||||
gl.uniform2f(locations['u_translation'], state.canvas.offset.x, state.canvas.offset.y); |
|
||||||
gl.uniform1i(locations['u_layer'], 0); |
|
||||||
|
|
||||||
gl.bindBuffer(gl.ARRAY_BUFFER, buffers['b_pos']); |
|
||||||
gl.vertexAttribPointer(locations['a_pos'], 2, gl.FLOAT, false, 0, 0); |
|
||||||
gl.bufferData(gl.ARRAY_BUFFER, context.quad_positions_f32, gl.STATIC_DRAW); |
|
||||||
|
|
||||||
gl.bindBuffer(gl.ARRAY_BUFFER, buffers['b_texcoord']); |
|
||||||
gl.vertexAttribPointer(locations['a_texcoord'], 2, gl.FLOAT, false, 0, 0); |
|
||||||
gl.bufferData(gl.ARRAY_BUFFER, context.quad_texcoords_f32, gl.STATIC_DRAW); |
|
||||||
|
|
||||||
let tex_index = 0; |
|
||||||
|
|
||||||
for (const key in context.textures) { |
|
||||||
gl.bindTexture(gl.TEXTURE_2D, context.textures[key]); |
|
||||||
gl.drawArrays(gl.TRIANGLES, tex_index * 6, 6); |
|
||||||
++tex_index; |
|
||||||
} |
|
||||||
|
|
||||||
// Draw strokes
|
|
||||||
locations = context.locations['stroke']; |
|
||||||
buffers = context.buffers['stroke']; |
|
||||||
|
|
||||||
gl.useProgram(context.programs['stroke']); |
|
||||||
|
|
||||||
gl.enableVertexAttribArray(locations['a_pos']); |
|
||||||
gl.enableVertexAttribArray(locations['a_color']); |
|
||||||
|
|
||||||
gl.uniform2f(locations['u_res'], context.canvas.width, context.canvas.height); |
|
||||||
gl.uniform2f(locations['u_scale'], state.canvas.zoom, state.canvas.zoom); |
|
||||||
gl.uniform2f(locations['u_translation'], state.canvas.offset.x, state.canvas.offset.y); |
|
||||||
gl.uniform1i(locations['u_layer'], 1); |
|
||||||
|
|
||||||
const total_pos_size = context.static_positions_f32.byteLength + context.dynamic_positions_f32.byteLength; |
|
||||||
const total_color_size = context.static_colors_u8.byteLength + context.dynamic_colors_u8.byteLength; |
|
||||||
const total_point_count = (context.static_positions.length + total_dynamic_positions(context)) / 2; |
|
||||||
|
|
||||||
gl.bindBuffer(gl.ARRAY_BUFFER, buffers['b_pos']); |
|
||||||
gl.vertexAttribPointer(locations['a_pos'], 2, gl.FLOAT, false, 0, 0); |
|
||||||
gl.bufferData(gl.ARRAY_BUFFER, total_pos_size, gl.DYNAMIC_DRAW); |
|
||||||
gl.bufferSubData(gl.ARRAY_BUFFER, 0, context.static_positions_f32); |
|
||||||
gl.bufferSubData(gl.ARRAY_BUFFER, context.static_positions_f32.byteLength, context.dynamic_positions_f32); |
|
||||||
|
|
||||||
gl.bindBuffer(gl.ARRAY_BUFFER, buffers['b_color']); |
|
||||||
gl.vertexAttribPointer(locations['a_color'], 3, gl.UNSIGNED_BYTE, true, 0, 0); |
|
||||||
gl.bufferData(gl.ARRAY_BUFFER, total_color_size, gl.DYNAMIC_DRAW); |
|
||||||
gl.bufferSubData(gl.ARRAY_BUFFER, 0, context.static_colors_u8); |
|
||||||
gl.bufferSubData(gl.ARRAY_BUFFER, context.static_colors_u8.byteLength, context.dynamic_colors_u8); |
|
||||||
|
|
||||||
gl.drawArrays(gl.TRIANGLES, 0, total_point_count); |
|
||||||
} |
|
||||||
|
|
||||||
const config = { |
|
||||||
ws_url: 'ws://192.168.100.2/ws/', |
|
||||||
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, |
|
||||||
min_zoom: 0.01, |
|
||||||
max_zoom: 100.0, |
|
||||||
|
|
||||||
default_color: 0x00, |
|
||||||
default_width: 8, |
|
||||||
}; |
|
||||||
|
|
||||||
const EVENT = Object.freeze({ |
|
||||||
PREDRAW: 10, |
|
||||||
SET_COLOR: 11, |
|
||||||
SET_WIDTH: 12, |
|
||||||
|
|
||||||
STROKE: 20, |
|
||||||
RULER: 21, /* gets re-written with EVENT.STROKE before sending to server */ |
|
||||||
UNDO: 30, |
|
||||||
REDO: 31, |
|
||||||
IMAGE: 40, |
|
||||||
IMAGE_MOVE: 41, |
|
||||||
ERASER: 50, |
|
||||||
}); |
|
||||||
|
|
||||||
const MESSAGE = Object.freeze({ |
|
||||||
INIT: 100, |
|
||||||
SYN: 101, |
|
||||||
ACK: 102, |
|
||||||
FULL: 103, |
|
||||||
FIRE: 104, |
|
||||||
JOIN: 105, |
|
||||||
}); |
|
||||||
|
|
||||||
function event_size(event) { |
|
||||||
let size = 1 + 3; // type + padding
|
|
||||||
|
|
||||||
switch (event.type) { |
|
||||||
case EVENT.PREDRAW: { |
|
||||||
size += 4 * 2; |
|
||||||
break; |
|
||||||
} |
|
||||||
|
|
||||||
case EVENT.SET_COLOR: { |
|
||||||
size += 4; |
|
||||||
break; |
|
||||||
} |
|
||||||
|
|
||||||
case EVENT.SET_WIDTH: { |
|
||||||
size += 2; |
|
||||||
break; |
|
||||||
} |
|
||||||
|
|
||||||
case EVENT.STROKE: { |
|
||||||
size += 4 + 2 + 2 + 4 + event.points.length * 4 * 2; // u32 stroke id + u16 (count) + u16 (width) + u32 (color + count * (f32, f32) points
|
|
||||||
break; |
|
||||||
} |
|
||||||
|
|
||||||
case EVENT.UNDO: |
|
||||||
case EVENT.REDO: { |
|
||||||
break; |
|
||||||
} |
|
||||||
|
|
||||||
case EVENT.IMAGE: |
|
||||||
case EVENT.IMAGE_MOVE: { |
|
||||||
size += 4 + 4 + 4; // file id + x + y
|
|
||||||
break; |
|
||||||
} |
|
||||||
|
|
||||||
case EVENT.ERASER: { |
|
||||||
size += 4; // stroke id
|
|
||||||
break; |
|
||||||
} |
|
||||||
|
|
||||||
default: { |
|
||||||
console.error('fuck'); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
return size; |
|
||||||
} |
|
||||||
|
|
||||||
function main() { |
|
||||||
const state = { |
|
||||||
'me': 333, |
|
||||||
|
|
||||||
'canvas': { |
|
||||||
'offset': { 'x': 0, 'y': 0 }, |
|
||||||
'zoom': 1.0, |
|
||||||
}, |
|
||||||
|
|
||||||
'cursor': { |
|
||||||
'x': 0, |
|
||||||
'y': 0, |
|
||||||
}, |
|
||||||
|
|
||||||
'sn': 0, |
|
||||||
'lsn': 0, |
|
||||||
'server_lsn': 0, |
|
||||||
|
|
||||||
'touch': { |
|
||||||
'moves': 0, |
|
||||||
'drawing': false, |
|
||||||
'moving': false, |
|
||||||
'waiting_for_second_finger': false, |
|
||||||
'first_finger_position': null, |
|
||||||
'second_finger_position': null, |
|
||||||
'buffered': [], |
|
||||||
'ids': [], |
|
||||||
}, |
|
||||||
|
|
||||||
'moving': false, |
|
||||||
'drawing': false, |
|
||||||
'spacedown': false, |
|
||||||
|
|
||||||
'current_strokes': {}, |
|
||||||
|
|
||||||
'fire_queue': [], |
|
||||||
'queue': [], |
|
||||||
'events': [], |
|
||||||
|
|
||||||
'tools': { |
|
||||||
'active': null, |
|
||||||
'active_element': null, |
|
||||||
}, |
|
||||||
|
|
||||||
'colors': { |
|
||||||
'active_element': null, |
|
||||||
}, |
|
||||||
|
|
||||||
'timers': { |
|
||||||
'ws_reconnect': null, |
|
||||||
'hide_preview': null, |
|
||||||
'raf': false, |
|
||||||
}, |
|
||||||
|
|
||||||
'players': {}, |
|
||||||
}; |
|
||||||
|
|
||||||
const context = { |
|
||||||
'canvas': null, |
|
||||||
'gl': null, |
|
||||||
'programs': {}, |
|
||||||
'buffers': {}, |
|
||||||
'locations': {}, |
|
||||||
'textures': {}, |
|
||||||
|
|
||||||
'dynamic_positions': {}, |
|
||||||
'dynamic_colors': {}, |
|
||||||
|
|
||||||
'quad_positions': [], |
|
||||||
'quad_texcoords': [], |
|
||||||
'static_positions': [], |
|
||||||
'static_colors': [], |
|
||||||
'static_positions_f32': new Float32Array(0), |
|
||||||
'dynamic_positions_f32': new Float32Array(0), |
|
||||||
'static_colors_u8': new Uint8Array(0), |
|
||||||
'dynamic_colors_u8': new Uint8Array(0), |
|
||||||
'quad_positions_f32': new Float32Array(0), |
|
||||||
'quad_texcoords_f32': new Float32Array(0), |
|
||||||
'bgcolor': {'r': 1.0, 'g': 1.0, 'b': 1.0}, |
|
||||||
}; |
|
||||||
|
|
||||||
const url = new URL(window.location.href); |
|
||||||
const parts = url.pathname.split('/'); |
|
||||||
|
|
||||||
state.desk_id = parts.length > 0 ? parts[parts.length - 1] : 0; |
|
||||||
|
|
||||||
init_webgl(state, context); |
|
||||||
init_listeners(state, context); |
|
||||||
init_tools(state); |
|
||||||
|
|
||||||
ws_connect(state, context, true); |
|
||||||
|
|
||||||
schedule_draw(state, context); |
|
||||||
} |
|
||||||
|
|
||||||
function schedule_draw(state, context) { |
|
||||||
if (!state.timers.raf) { |
|
||||||
window.requestAnimationFrame(() => draw(state, context)); |
|
||||||
state.timers.raf = true; |
|
||||||
} |
|
||||||
} |
|
||||||
@ -0,0 +1,83 @@ |
|||||||
|
function schedule_draw(state, context) { |
||||||
|
if (!state.timers.raf) { |
||||||
|
window.requestAnimationFrame(() => draw(state, context)); |
||||||
|
state.timers.raf = true; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
function draw(state, context) { |
||||||
|
state.timers.raf = false; |
||||||
|
|
||||||
|
const gl = context.gl; |
||||||
|
const width = window.innerWidth; |
||||||
|
const height = window.innerHeight; |
||||||
|
|
||||||
|
let locations; |
||||||
|
let buffers; |
||||||
|
|
||||||
|
gl.viewport(0, 0, context.canvas.width, context.canvas.height); |
||||||
|
gl.clearColor(context.bgcolor.r, context.bgcolor.g, context.bgcolor.b, 1); |
||||||
|
gl.clear(gl.COLOR_BUFFER_BIT); |
||||||
|
|
||||||
|
// Draw images
|
||||||
|
locations = context.locations['quad']; |
||||||
|
buffers = context.buffers['quad']; |
||||||
|
|
||||||
|
gl.useProgram(context.programs['quad']); |
||||||
|
|
||||||
|
gl.enableVertexAttribArray(locations['a_pos']); |
||||||
|
gl.enableVertexAttribArray(locations['a_texcoord']); |
||||||
|
|
||||||
|
gl.uniform2f(locations['u_res'], context.canvas.width, context.canvas.height); |
||||||
|
gl.uniform2f(locations['u_scale'], state.canvas.zoom, state.canvas.zoom); |
||||||
|
gl.uniform2f(locations['u_translation'], state.canvas.offset.x, state.canvas.offset.y); |
||||||
|
gl.uniform1i(locations['u_layer'], 0); |
||||||
|
|
||||||
|
gl.bindBuffer(gl.ARRAY_BUFFER, buffers['b_pos']); |
||||||
|
gl.vertexAttribPointer(locations['a_pos'], 2, gl.FLOAT, false, 0, 0); |
||||||
|
gl.bufferData(gl.ARRAY_BUFFER, context.quad_positions_f32, gl.STATIC_DRAW); |
||||||
|
|
||||||
|
gl.bindBuffer(gl.ARRAY_BUFFER, buffers['b_texcoord']); |
||||||
|
gl.vertexAttribPointer(locations['a_texcoord'], 2, gl.FLOAT, false, 0, 0); |
||||||
|
gl.bufferData(gl.ARRAY_BUFFER, context.quad_texcoords_f32, gl.STATIC_DRAW); |
||||||
|
|
||||||
|
let tex_index = 0; |
||||||
|
|
||||||
|
for (const key in context.textures) { |
||||||
|
gl.bindTexture(gl.TEXTURE_2D, context.textures[key]); |
||||||
|
gl.drawArrays(gl.TRIANGLES, tex_index * 6, 6); |
||||||
|
++tex_index; |
||||||
|
} |
||||||
|
|
||||||
|
// Draw strokes
|
||||||
|
locations = context.locations['stroke']; |
||||||
|
buffers = context.buffers['stroke']; |
||||||
|
|
||||||
|
gl.useProgram(context.programs['stroke']); |
||||||
|
|
||||||
|
gl.enableVertexAttribArray(locations['a_pos']); |
||||||
|
gl.enableVertexAttribArray(locations['a_color']); |
||||||
|
|
||||||
|
gl.uniform2f(locations['u_res'], context.canvas.width, context.canvas.height); |
||||||
|
gl.uniform2f(locations['u_scale'], state.canvas.zoom, state.canvas.zoom); |
||||||
|
gl.uniform2f(locations['u_translation'], state.canvas.offset.x, state.canvas.offset.y); |
||||||
|
gl.uniform1i(locations['u_layer'], 1); |
||||||
|
|
||||||
|
const total_pos_size = context.static_positions_f32.byteLength + context.dynamic_positions_f32.byteLength; |
||||||
|
const total_color_size = context.static_colors_u8.byteLength + context.dynamic_colors_u8.byteLength; |
||||||
|
const total_point_count = (context.static_positions.length + total_dynamic_positions(context)) / 2; |
||||||
|
|
||||||
|
gl.bindBuffer(gl.ARRAY_BUFFER, buffers['b_pos']); |
||||||
|
gl.vertexAttribPointer(locations['a_pos'], 2, gl.FLOAT, false, 0, 0); |
||||||
|
gl.bufferData(gl.ARRAY_BUFFER, total_pos_size, gl.DYNAMIC_DRAW); |
||||||
|
gl.bufferSubData(gl.ARRAY_BUFFER, 0, context.static_positions_f32); |
||||||
|
gl.bufferSubData(gl.ARRAY_BUFFER, context.static_positions_f32.byteLength, context.dynamic_positions_f32); |
||||||
|
|
||||||
|
gl.bindBuffer(gl.ARRAY_BUFFER, buffers['b_color']); |
||||||
|
gl.vertexAttribPointer(locations['a_color'], 3, gl.UNSIGNED_BYTE, true, 0, 0); |
||||||
|
gl.bufferData(gl.ARRAY_BUFFER, total_color_size, gl.DYNAMIC_DRAW); |
||||||
|
gl.bufferSubData(gl.ARRAY_BUFFER, 0, context.static_colors_u8); |
||||||
|
gl.bufferSubData(gl.ARRAY_BUFFER, context.static_colors_u8.byteLength, context.dynamic_colors_u8); |
||||||
|
|
||||||
|
gl.drawArrays(gl.TRIANGLES, 0, total_point_count); |
||||||
|
} |
||||||
Loading…
Reference in new issue