Image broadcast

client/client_recv.js

@@ -214,27 +214,23 @@ function handle_event(state, context, event, relax = false) {
         }
 
         case EVENT.IMAGE: {
-            need_draw = true;
-            console.error('todo');
-            // const url = config.image_url + event.image_id;
-            // const item = document.createElement('img');
-            
-            // item.classList.add('floating-image');
-            // item.style['z-index'] = state.events.length;
-            // item.setAttribute('data-image-id', event.image_id);
-            // item.setAttribute('src', url);
-            // item.style.transform = `translate(${event.x}px, ${event.y}px)`;
-
-            // elements.images.appendChild(item);
-            // state.images[event.image_id] = {
-            //     'x': event.x, 'y': event.y
-            // };
-            // const r = await fetch(config.image_url + event.image_id);
-            // const blob = await r.blob();
-            // const bitmap = await createImageBitmap(blob);
-            // event.bitmap = bitmap;
-            // const bbox = bitmap_bbox(event);
-            // state.ctx0.drawImage(bitmap, bbox.xmin, bbox.ymin);
+            try {
+                (async () => {
+                    const url = config.image_url + event.image_id;
+                    const r = await fetch(config.image_url + event.image_id);
+                    const blob = await r.blob();
+                    const bitmap = await createImageBitmap(blob);
+                    const p = {'x': event.x, 'y': event.y};
+
+                    add_image(context, bitmap, p);
+
+                    // God knows when this will actually complete (it loads the image from the server)
+                    // so do not set need_draw. Instead just schedule the draw ourselves when done
+                    schedule_draw(state, context);
+                })();
+            } catch (e) {
+                console.log('Could not load image bitmap:', e);
+            }
 
             break;
         }

client/client_send.js

@@ -245,6 +245,15 @@ function width_event(width) {
     };
 }
 
+function image_event(image_id, x, y) {
+    return {
+        'type': EVENT.IMAGE,
+        'image_id': image_id,
+        'x': x,
+        'y': y,
+    };
+}
+
 function stroke_event(state) {
     return { 
         'type': EVENT.STROKE,

client/default.css

@@ -283,6 +283,7 @@ input[type=range]::-moz-range-track {
     font-weight: bold;
     user-select: none;
     transition: transform .1s ease-in-out, opacity .1s;
+    pointer-events: none;
 }
 
 .offline-toast.hidden {

client/index.html

@@ -7,20 +7,20 @@
     <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=22">
+    <link rel="stylesheet" type="text/css" href="default.css?v=24">
 
-    <script type="text/javascript" src="aux.js?v=22"></script>
-    <script type="text/javascript" src="math.js?v=22"></script>
-    <script type="text/javascript" src="tools.js?v=22"></script>
-    <script type="text/javascript" src="webgl_geometry.js?v=22"></script>
-    <script type="text/javascript" src="webgl_shaders.js?v=22"></script>
-    <script type="text/javascript" src="webgl_listeners.js?v=22"></script>
-    <script type="text/javascript" src="webgl_draw.js?v=22"></script>
-    <script type="text/javascript" src="index.js?v=22"></script>
+    <script type="text/javascript" src="aux.js?v=24"></script>
+    <script type="text/javascript" src="math.js?v=24"></script>
+    <script type="text/javascript" src="tools.js?v=24"></script>
+    <script type="text/javascript" src="webgl_geometry.js?v=24"></script>
+    <script type="text/javascript" src="webgl_shaders.js?v=24"></script>
+    <script type="text/javascript" src="webgl_listeners.js?v=24"></script>
+    <script type="text/javascript" src="webgl_draw.js?v=24"></script>
+    <script type="text/javascript" src="index.js?v=24"></script>
 
-    <script type="text/javascript" src="client_send.js?v=22"></script>
-    <script type="text/javascript" src="client_recv.js?v=22"></script>
-    <script type="text/javascript" src="websocket.js?v=22"></script>
+    <script type="text/javascript" src="client_send.js?v=24"></script>
+    <script type="text/javascript" src="client_recv.js?v=24"></script>
+    <script type="text/javascript" src="websocket.js?v=24"></script>
 </head>
 <body>
     <div class="main">

client/webgl_listeners.js

@@ -363,20 +363,19 @@ async function on_drop(e, state, context) {
     canvasp.y -= bitmap.height / 2;
 
     add_image(context, bitmap, canvasp);
-    // storage.ctx0.drawImage(bitmap, x, y);
 
     const form_data = new FormData();
     form_data.append('file', file);
 
-    const resp = await fetch(`/api/image?deskId=333`, {
+    const resp = await fetch(`/api/image?deskId=${state.desk_id}`, {
         method: 'post',
         body: form_data,
     })
 
     if (resp.ok) {
-        // const image_id = await resp.text();
-        // const event = image_event(image_id, x, y);
-        // await queue_event(event);
+        const image_id = await resp.text();
+        const event = image_event(image_id, canvasp.x, canvasp.y);
+        await queue_event(state, event);
     }
 
     schedule_draw(state, context);

client/websocket.js

@@ -27,7 +27,9 @@ async function ws_connect(state, context, first_connect = false) {
                 return;
             }
         }
-    } catch (e) {}
+    } catch (e) {
+        console.log('Could not ping the server:', e);
+    }
 
     state.timers.offline_toast = setTimeout(() => ws_connect(state, context, first_connect), config.ws_reconnect_timeout);
 }