ws workshop

projects/ws-js-ws/ws-js-ws.md

@@ -3,15 +3,13 @@ categories:
     - Web
     - JS
     - WS
-cover: wsjsws.jpg
-cover_alt: idk yet what will the cover be
 date: 17/02/2023
 description: Websocket workshop for multiplayer drawing
 git: https://git.xpub.nl/kamo/drw
 slug: ws-js-ws
 title: ws js ws
 css: drw.css
-js: drw.js
+script: drw.js
 ---
 
 
@@ -19,6 +17,24 @@ js: drw.js
   <source src="flyer.mp4" type="video/mp4">
 </video>
 
+<div id="svg-container" class="destination">
+    <svg
+        class="hidden drawing"
+        xmlns="http://www.w3.org/2000/svg"
+        xmlns:xlink="http://www.w3.org/1999/xlink"
+        version="1.1"
+        id="svgElement"
+        x="0px"
+        y="0px"
+        width="200px"
+        height="200px"
+        viewBox="0 0 500 500"
+        enable-background="new 0 0 100 100"
+        preserveAspectRatio="none"
+        xml:space="preserve"></svg>
+</div>
+
+
 
 ### Contents
 
@@ -53,15 +69,15 @@ XPUB Studio, 4th floor etc
 <!-- Slides are actually on a destination client -->
 <!-- Put some controls to regulate size and movement maybe ? to play in real time -->
 
-DRW is a small app for multiplayer drawing in real time.
-To draw connect to --> [https://hub.xpub.nl/soupboat/drw](https://hub.xpub.nl/soupboat/drw)
+DRW is a small app for multiplayer drawing in real time.  
+To draw connect to →  [hub.xpub.nl/soupboat/drw/](https://hub.xpub.nl/soupboat/drw/)
 
 It works with multiple sources, but also multiple destinations.
 
 The same drawings can be displayed on different places! _(such as this page)_
 
-Open [https://hub.xpub.nl/soupboat/drw/destination](https://hub.xpub.nl/soupboat/drw/destination) and send some drawings.
-Try to navigate to [https://hub.xpub.nl/soupboat/drw/wander](https://hub.xpub.nl/soupboat/drw/wander) to see a different mode.
+Open [hub.xpub.nl/soupboat/drw/destination/](https://hub.xpub.nl/soupboat/drw/destination/) and send some drawings.  
+Try to navigate to [hub.xpub.nl/soupboat/drw/wander/](https://hub.xpub.nl/soupboat/drw/wander/) to see a different mode.
 
 ## How does it work
 
@@ -96,7 +112,7 @@ The server manages the flow of websocket messages, taking care to deliver the ri
 In this app, a message is a simple text string.  
 It looks like
 
-```
+```json
 {"type": "test", "data": "this is my test message"}
 ```
 
@@ -105,7 +121,7 @@ Here the message has two properties: `type` with value _test_, and `data` with v
 Using the [JSON](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/JSON) format, the message contents can be accessed easily. 
 
 
-```
+```js
 // Transform the string message into a Javascript object
 let message = JSON.parse({"type": "test", "data": "this is my test message"})
 
@@ -135,7 +151,7 @@ The DRW app is just the beginning! From here it can be extended with diverse sou
 
 Depending on participants' interest the workshop can continue in different directions:
 
-1. Same server, different destinations.
+1. Same server, different destinations.  
    To keep working with drawings and prototyping different ways of displaying them.  
    For example to work with other web pages or programming environment such as p5js, vvvv, etc.  
    But also physical hardware such as receipt printer or pen plotter.  

static/css/drw.css

@@ -0,0 +1,93 @@
+body {
+    font-size: 1.75rem;
+    font-family: serif;
+}
+
+nav, nav * {
+    font-size: 1rem !important;
+    background-color: #ff8d00;
+    color: white!important;
+}
+
+
+header.project--header {
+background-color: #ff8d00;
+
+}
+
+a {
+ color: #ff8d00;
+ font-family: sans-serif;
+}
+
+a:hover {
+text-decoration: underline;
+}
+
+a:after {
+content: '';
+}
+
+
+h2, h3 {
+    font-size: 2.5rem;
+}
+
+
+main.project--content {
+display: block;
+}
+
+main.project--content > * {
+display: block;
+margin-inline: auto;
+max-width: 80ch;
+}
+
+video, img {
+max-height: 80vh;
+max-width: 100%;
+object-fit: contain;
+}
+
+#svg-container {
+
+    position: fixed;
+    z-index: 200;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    max-width: 100%;
+    max-height: 100%;
+
+    pointer-events: none;
+
+}
+
+.drawing {
+position: absolute;
+top: 0;
+left: 0;
+pointer-events: all;
+}
+
+.drawing:hover {
+rotate: 1turn;
+transition: rotate 0.5s ease-out;
+}
+
+@keyframes grow {
+  0% {
+    scale: 0.1;
+  }
+  100% {
+    scale: 1;
+  }
+}
+
+.destination svg path {
+  /* This section calls the slideInFromLeft animation we defined above */
+  animation: 1s cubic-bezier(0.68, -0.6, 0.32, 1.6) 0s 1 grow;
+}
+

static/js/drw.js

@@ -0,0 +1,29 @@
+const socket = new WebSocket('wss://hub.xpub.nl/soupboat/drw/')
+const svgModel = document.querySelector('#svgElement')
+const container = document.querySelector('#svg-container')
+
+socket.onopen = (event) => {
+    socket.send(JSON.stringify({type: 'hello'}))
+    console.log("Connected as destination!")
+}
+
+socket.onmessage = (event) => {
+    let message;
+    try {
+        message = JSON.parse(event.data);
+    } catch (e) {}
+
+    if (message?.type == "drawings") {
+        let svg = svgModel.cloneNode();
+        svg.classList.remove("hidden");
+        let path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+        path.setAttribute("d", message.paths);
+        path.setAttribute("fill", "white");
+        path.setAttribute("stroke", "currentColor");
+        path.setAttribute("stroke-width", 16);
+        svg.appendChild(path);
+        svg.style.translate = `${Math.random()*100}vw ${Math.random()*100}vh`
+        svg.addEventListener('click', ()=>{svg.remove()})
+        container.appendChild(svg);
+    }
+};

templates/project.html

@@ -30,7 +30,6 @@
 		<!-- script -->
     
          
-    <script src="{{url_for('static', filename='js/mover.js')}}" defer ></script>   
         
         
     {% if script %}