From 2ad34965100f121e8f6129c2346ca54a29d493e8 Mon Sep 17 00:00:00 2001 From: km0 Date: Fri, 24 Feb 2023 01:11:37 +0100 Subject: [PATCH] ws workshop --- projects/ws-js-ws/.ws-js-ws.md.swp | Bin 16384 -> 24576 bytes projects/ws-js-ws/ws-js-ws.md | 36 +++++++---- static/css/.drw.css.swp | Bin 0 -> 12288 bytes static/css/drw.css | 93 +++++++++++++++++++++++++++++ static/js/drw.js | 29 +++++++++ templates/project.html | 1 - 6 files changed, 148 insertions(+), 11 deletions(-) create mode 100644 static/css/.drw.css.swp diff --git a/projects/ws-js-ws/.ws-js-ws.md.swp b/projects/ws-js-ws/.ws-js-ws.md.swp index e2f27cbc7a777c2394170dec2a3d19447874d6d3..0b8531d12a140441ebf3328bf84ca77ef685a6f2 100644 GIT binary patch delta 3081 zcmbu>eQX=$0mt#jahjxU(ljMin^uJfH&N^~u^mt#$>MZvDU2ds)Mn$QE7Y;Ci5ut6 zy*tNAJI~=|SxbS@T1AY4v?8E?w9q081VUo#5Fik*rLdJ3ZABX|Ql|~HGC*3l?{jf& zhvXl`MIYb!dAsMHyZgoC*2k<-GiCwU;5uLacezf81IYK;)1K5K3sKuMJ z83*IYU^ecp65==5f$dc+?)e-n!#vdBOr;S2h6NLi__RWZPjDM1?(!XS2B1EhZ0V*bcci7GjFs&Pe1CL`#zuOD%x|N^@op;- zj%XoI!qhCy9ML?zJppTEpxEYI#VRYIMeOxzz9COWH+0QY7)R5?{c)|WKO7kvFpZ=h z4S94eC4>C62OY(>BQY(t+87OaRBZ>fDAo>Yv4KH5UMyubbgO$b9@B?HodRLY;a z*l(Bvf%dMhu7FeP5&82=>GYYYH5U+63t1dK5)WGzO=Hohrpu@qPQ~Bl6!XKH-L0o|)Xn-4KI9*LxonT^5;wTQ{F>J$9EWuxxn3~+> z2;nS~J&ogd5h|n%giwcX38ZJS9sRfpUHFn5I)%eHgom(6h1Iu&(Z@K2&A0`1I6?5d z0|Pp4#0~f{R4{d*6)W&QA#@TuF@c4sM-?jZF8T8^Uc&RZ6BGDVn2&|1S6>LCJ8(PF zxC~zrFlX>4p2FiejJ-&~f{9DefhII!0qRg*w&&QQ+LCmN3vqq!e9tdjWm~P>1It&s z%C}mEo;%rigWE0T#_V`&gNh}$uXvpC6<&Gu0;YMGzO$Lywj{Z>N{wk%vci^Doajp6In5}#|F?<1YI zlar=lVMYB`A|A87&9Zs=Dyh*64e505eq@R_WXf4cE6a9nFpbqcmfY{cteuHWX`e34 zje{vQsv#>;%7 zudmN=a#u26oquN1Hsr?>drKbn;{VuB-A*8Wz$;xzKBz!kTM~%BCj_5I0tUVz;Kq@` z5Vm3-YH*f-`!D{EzafHt)ZiP`})+z&Bjr*Eo)6a1=+XT7}rh!FG%wi7s@) bi)JiDJu0hmuJVs6W=xaU-9Pjf(BA(8Swm%@ delta 921 zcmYk)Ur19?9Ki9j`9J?`{edV$@3sPG&dopN^3SxeLL?P3>nWM;rc<}OcCRflR18wm zpf$?>A-!2q+I=mEpn3^{f*`}^lu9BfA1dfODd@oG@VobS&OPUz^Ba0<7#cFz+FUJl zCnR@av7niSs9e}+-^hL}T6_jkace{(`guXfJi&OD`mP1u%UGKxV~Gsc&s z4aByZcj}$yNmF#O=7yA*xrLWG@htlxDP<2nGYK(?5j4Vq9Av?OZ&^aD;|o6H73ML4 zTeyi)jNmA0F`g;J7>?j~h7iB7hE+VrT`XWOgWb*&%-{^Fu#zssA|7H2lNd%9j^h}r zP>B>Q@lT70ARD`}oF>G3jNvNGh^7j09hcCLT;!y3S|)-l{74bvJ2a@+ht*^uKH@Tl z5kL=`aT0Z?K{eKsI3>(t8g}Gi53;eAD8vUW;~nncwx4be4iv=W1U`TnOyDfcFky|0 zdySWPf%}N!8phFtMpVOt0_;cp!YxMq=jl;{K4r^Dian{9k|W-rPY%Zp=iB~;>v`6A zCfz5inm_2({7NvM-uvIPU1FA`%JEJK$dWJYjrfBdYGG`^eviqyOt8jQ>dW={`~yb4 zq2ZB1e^Y2QRJ1D>P+zOm)fITK1KaV5(wRmpY_P(jpLZ>$>$#P+MqT#I82$jA CLBbaR diff --git a/projects/ws-js-ws/ws-js-ws.md b/projects/ws-js-ws/ws-js-ws.md index f187e1a..0e04764 100644 --- a/projects/ws-js-ws/ws-js-ws.md +++ b/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 +
+ +
+ + ### Contents @@ -53,15 +69,15 @@ XPUB Studio, 4th floor etc -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. diff --git a/static/css/.drw.css.swp b/static/css/.drw.css.swp new file mode 100644 index 0000000000000000000000000000000000000000..64cd5d338ae09cf458059c7d8a9548cb9dc95b0f GIT binary patch literal 12288 zcmeI2&5ImG7>8?vf+4P-SJ5|FV$3q#)3Zy~aR!2mUnHv-F!5mAXmxk>bh*=AO;`2I z><0CuM)4n5uU!9tYQv2Tnt|5MFdw>TuQ}CrSOeC;^%y8j)aQ;IraSLA zcRdm9Tx-A@um-FFYrqw-~w0$%b*4B0*Amsa1;1rma(6}H{dhyDfk4u4=#gE@EW)XQm_hEz!D&E54aKB z01ki|@Y~Id{Q$lNUxSaphu{i$2W)~ND1ZSzI1g69W8ft4Km*K!P{8|rO(qtk`!W=#(noWZJT4-$vk(mh zg(8xv2#Nb@AZWhH+)!vE(<&3vgC1qv#B`CdGRG1kjo1QNmdmz0?pS#>?Q zCf1{zCqh@b)}c(!Q!VRibA|r_3lw%jli*r7sxVzv-^D7X$kQ&;%K1>Hy-tig^EybT zWNJk2h=E9r?hq>OvOY@ekk@5KWmTK0$wJ)Ms$Uqf6RnPe?1^>6dqQQjg?Fgh*!&JK_W? zH5|J()}Z_su;)%Bk>0qg%l2e9T}0a(#9cPPu}}??Nw3y0HKpwZ7?AM1CsSnA$70Z1 z7}aH=)LEaecgXLnV67Y^Q#Z?1l|z*pHiJ&md>!<^4af1S&KFUH+8ix6u-<}uA{R-Q z#W?TrVi^u&$^x-KhmIZVGTz}44nVz<5hLS-B2fAGDJozyFHz$!I|ZO;1nxph0+ * { +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; +} + diff --git a/static/js/drw.js b/static/js/drw.js index e69de29..e98be51 100644 --- a/static/js/drw.js +++ b/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); + } +}; diff --git a/templates/project.html b/templates/project.html index 9323379..48f9161 100644 --- a/templates/project.html +++ b/templates/project.html @@ -30,7 +30,6 @@ - {% if script %}