fuck FE

frontend/src/App.vue

@@ -1,55 +1,18 @@
 <template>
-  <HelloWorld msg="Yes"/>
+  <PlaceCanvas/>
 </template>
 
 <script>
-import HelloWorld from './components/HelloWorld.vue'
+import PlaceCanvas from './components/PlaceCanvas.vue'
 
 export default {
   name: 'App',
   components: {
-    HelloWorld
+    PlaceCanvas
   },
   mounted(){
-    var wsConnection = new WebSocket('ws://localhost:8080/get');
+  this.$components.PlaceCanvas.setup()
-    var canvas = document.getElementById("main_canvas");
+}
-    var ctx = canvas.getContext("2d");
-
-    var colorpalettte = [
-        "#FFFFFF",
-        "#E4E4E4",
-        "#888888",
-        "#222222",
-        "#FFA7D1",
-        "#E50000",
-        "#E59500",
-        "#A06A42",
-        "#E5D900",
-        "#94E044",
-        "#02BE01",
-        "#00D3DD",
-        "#0083C7",
-        "#0000EA",
-        "#CF6EE4",
-        "#820080"
-        ]
-    var background = new Image();
-    background.src = "http://localhost:8080/getAll";
-
-
-    wsConnection.onopen = (e) => {
-        ctx.drawImage(background,0,0);   
-        console.log(`wsConnection open`, e);
-    };
-    wsConnection.onerror = (e) => {
-        console.error(`wsConnection error `, e);
-    };
-    wsConnection.onmessage = (e) => {
-        let data = JSON.parse(e.data)
-        ctx.fillStyle = colorpalettte[parseInt(data["color"])];
-        ctx.fillRect(data["y"], data["x"], 1, 1);
-    };
-  }
 }
 </script>
 

frontend/src/components/PlaceCanvas.vue

@@ -3,7 +3,57 @@
 </template>
 
 <script>  
+function setup() {
+    var wsConnection = new WebSocket('ws://localhost:8080/get');
+    var canvas = document.getElementById("main_canvas");
+    var ctx = canvas.getContext("2d");
 
+    var colorpalettte = [
+        "#FFFFFF",
+        "#E4E4E4",
+        "#888888",
+        "#222222",
+        "#FFA7D1",
+        "#E50000",
+        "#E59500",
+        "#A06A42",
+        "#E5D900",
+        "#94E044",
+        "#02BE01",
+        "#00D3DD",
+        "#0083C7",
+        "#0000EA",
+        "#CF6EE4",
+        "#820080"
+        ]
+    var background = new Image();
+    background.src = "http://localhost:8080/getAll";
+
+
+    wsConnection.onopen = (e) => {
+        ctx.drawImage(background,0,0);   
+        console.log(`wsConnection open`, e);
+    };
+    wsConnection.onerror = (e) => {
+        console.error(`wsConnection error `, e);
+    };
+    wsConnection.onmessage = (e) => {
+        let data = JSON.parse(e.data)
+        ctx.fillStyle = colorpalettte[parseInt(data["color"])];
+        ctx.fillRect(data["y"], data["x"], 1, 1);
+    };
+  }
+
+
+export default {
+  name: 'mainCanvas',
+  methods: [
+    setup()
+  ],
+  mounted(){
+
+}
+}
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->

go/server.go

@@ -59,12 +59,12 @@ func get(w http.ResponseWriter, r *http.Request) {
 		log.Print("error while upgrading", err)
 		return
 	}
-
+	fmt.Println("incoming connection")
 	c.SetReadLimit(maxMessageSize)
 	c.SetPongHandler(func(string) error { c.SetReadDeadline(time.Now().Add(pongWait)); return nil })
 
 	defer c.Close()
-	ticker := time.NewTicker(1 * time.Second)
+	ticker := time.NewTicker(200 * time.Millisecond)
 	for range ticker.C {
 
 		for i := 0; i < int(diff.Width*diff.Height); i++ {

python/clients.py

@@ -2,20 +2,17 @@
 
 import asyncio
 from dataclasses import dataclass
-import datetime
+import os
+from socket import timeout
 from PIL import Image
 import json
 from multiprocessing import Pool
 import random
 import time
-import matplotlib
 from matplotlib import pyplot as plt
 import numpy as np
 
 import websockets
-import cv2
-import matplotlib.image as mpimg
-
 
 @dataclass
 class pixel:
@@ -25,82 +22,109 @@ class pixel:
     timestamp: int
     userid: int
 
+
 def hex_to_rgb(h):
-    return tuple(int(h[i:i+2], 16) for i in (0, 2, 4))
+    return tuple(int(h[i : i + 2], 16) for i in (0, 2, 4))
+
 
 hex_colors = [
-        "#FFFFFF",
+    "#FFFFFF",
-        "#E4E4E4",
+    "#E4E4E4",
-        "#888888",
+    "#888888",
-        "#222222",
+    "#222222",
-        "#FFA7D1",
+    "#FFA7D1",
-        "#E50000",
+    "#E50000",
-        "#E59500",
+    "#E59500",
-        "#A06A42",
+    "#A06A42",
-        "#E5D900",
+    "#E5D900",
-        "#94E044",
+    "#94E044",
-        "#02BE01",
+    "#02BE01",
-        "#00D3DD",
+    "#00D3DD",
-        "#0083C7",
+    "#0083C7",
-        "#0000EA",
+    "#0000EA",
-        "#CF6EE4",
+    "#CF6EE4",
-        "#820080"
+    "#820080",
-        ]
+]
 rgb_colors = [hex_to_rgb(h[1:]) for h in hex_colors]
 
+
 def eucleadian_distance(rgb1, rgb2):
     if len(rgb1) != len(rgb2):
         raise ValueError
-    sum_part = np.sum([(rgb1[i]-rgb2[i])**2 for i in range(len(rgb1))])
+    sum_part = np.sum([(i-j) ** 2 for i, j in zip(rgb1, rgb2)])
     # return np.sqrt(sum_part) # technically correct, but we only care about rank not exact distance and sqrt is expensive
     return sum_part
 
+
 def closest_match(rgb, color_map):
-    return min(range(len(rgb_colors)), key=lambda i: eucleadian_distance(rgb, color_map[i]))
+    return min(
+        range(len(rgb_colors)), key=lambda i: eucleadian_distance(rgb, color_map[i])
+    )
 
-async def sender(img):
+
-    while True: 
+async def sender(target, img):
+    start_x = random.randint(0, 900)
+    start_y = random.randint(0, 900)
+    max_w, max_h, _ = img.shape
+    
+    async for websocket in websockets.connect(target + "/set"):
         try:
-            async with websockets.connect("ws://localhost:8080/set", timeout=60) as websocket:
+            for _ in range(int(max_h*max_w*1.3)):
-                while True:
+                rx = random.randint(0, max_w - 1)
-                    rx = random.randint(0, 999)
+                ry = random.randint(0, max_h - 1)
-                    ry = random.randint(0, 999)
+                if rx + start_x >= 1000 or ry + start_y >= 1000:
-                    message = pixel(
+                    continue
-                        x=rx,
+                message = pixel(
-                        y=ry,
+                    x=rx + start_x,
-                        color= closest_match(img[rx][ry], rgb_colors),
+                    y=ry + start_y,
-                        timestamp=int(time.time()),
+                    color=closest_match(img[rx][ry], rgb_colors),
-                        userid=1,
+                    timestamp=int(time.time()),
-                    )
+                    userid=1,
-                    await websocket.send(json.dumps(message.__dict__))
+                )
-                    succ = await websocket.recv()
+                await websocket.send(json.dumps(message.__dict__))
-                    if succ != "0":
+                succ = await websocket.recv()
-                        print(message, "was not set")
+                if succ != "0":
-        except:
+                    print(message, "was not set")
+            return
+        except websockets.ConnectionClosed:
             print("reconnecting")
-            
 
-async def client():
+
+async def client(target):
     image = np.zeros(shape=[1000, 1000, 3], dtype=np.uint8)
-    async with websockets.connect("ws://localhost:8080/get") as websocket:
+    async for websocket in websockets.connect(target + "/get"):
-        i= 0
+        try:
-        while True:
-            i+=1
             x = pixel(**json.loads(await websocket.recv()))
             image[x.x][x.y] = rgb_colors[x.color]
             await websocket.send("1")
+        except websockets.ConnectionClosed:
+            continue
+
+
+def rescale(max_dimension, img):
+    w, h = img.size
+    maxi = max([w, h])
+    scale = max_dimension / maxi
+    return img.resize((int(scale * w), int(scale * h)), Image.ANTIALIAS)
+
+
+async def main(target):
+    images_folder_path = "./images"
+    while True:
+        image_paths = os.listdir(images_folder_path)
+        images = [
+            np.array(rescale(random.randint(100, 400), Image.open(f"{images_folder_path}/{image_path}")))
+            for image_path in image_paths
+        ]
+        coros = [sender(target, images[i % len(images)]) for i in range(len(images))]
+        _ = await asyncio.gather(*coros)
+
+
+def asyncMain(x, target):
+    asyncio.get_event_loop().run_until_complete(main(target))
 
-async def main():
-    img= Image.open('./python/images/3.jpg')
-    img= img.resize((1000, 1000), Image.ANTIALIAS)
-    img = np.array(img)
-    coros = [sender(img) for _ in range(100)]
-    _ = await asyncio.gather(*coros)
-    
-def asyncMain(x):
-    asyncio.get_event_loop().run_until_complete(main())
 
 if __name__ == "__main__":
-    #with Pool(12) as p:
+    # with Pool(12) as p:
     #    print(p.map(asyncMain, [() for _ in range(12)]))
-    asyncMain(0)
+    asyncMain(0, target="ws://localhost:8080")