fuck FE

frontend/src/App.vue

@@ -1,54 +1,17 @@
 <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,9 +22,11 @@ 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))
 
+
 hex_colors = [
     "#FFFFFF",
     "#E4E4E4",
@@ -44,30 +43,40 @@ hex_colors = [
     "#0083C7",
     "#0000EA",
     "#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]))
 
-async def sender(img):
+def closest_match(rgb, color_map):
-    while True: 
+    return min(
+        range(len(rgb_colors)), key=lambda i: eucleadian_distance(rgb, color_map[i])
+    )
+
+
+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:
+                    continue
                 message = pixel(
-                        x=rx,
+                    x=rx + start_x,
-                        y=ry,
+                    y=ry + start_y,
                     color=closest_match(img[rx][ry], rgb_colors),
                     timestamp=int(time.time()),
                     userid=1,
@@ -76,31 +85,46 @@ async def sender(img):
                 succ = await websocket.recv()
                 if succ != "0":
                     print(message, "was not set")
-        except:
+            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
 
-async def main():
+
-    img= Image.open('./python/images/3.jpg')
+def rescale(max_dimension, img):
-    img= img.resize((1000, 1000), Image.ANTIALIAS)
+    w, h = img.size
-    img = np.array(img)
+    maxi = max([w, h])
-    coros = [sender(img) for _ in range(100)]
+    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):
+
-    asyncio.get_event_loop().run_until_complete(main())
+def asyncMain(x, target):
+    asyncio.get_event_loop().run_until_complete(main(target))
+
 
 if __name__ == "__main__":
     # with Pool(12) as p:
     #    print(p.map(asyncMain, [() for _ in range(12)]))
-    asyncMain(0)
+    asyncMain(0, target="ws://localhost:8080")