sending inital image as png

frontend/src/App.vue

@@ -33,33 +33,19 @@ export default {
         "#CF6EE4",
         "#820080"
         ]
-    async function load() {
-        let url = 'http://localhost:8080/getAll';
-        let obj = null;
-        
-        try {
-            obj = await (await fetch(url)).json();
-        } catch(e) {
-            console.log('error');
-        }
-        return obj
-    }
+    var background = new Image();
+    background.src = "http://localhost:8080/getAll";
+
 
-   
-    for(const pixel in load() ){
-      ctx.fillStyle = colorpalettte[parseInt(pixel["color"])];
-        ctx.fillRect(pixel["y"], pixel["x"], 1, 1);
-    }
     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);
     };

go/server.go

@@ -4,6 +4,9 @@ import (
 	"encoding/json"
 	"flag"
 	"fmt"
+	go_image "image"
+	"image/color"
+	"image/png"
 	"io/ioutil"
 	"log"
 	"net/http"
@@ -40,6 +43,15 @@ const (
 
 var img = GetImage(1000, 1000)
 var tmpImage = GetImage(img.Width, img.Height)
+var diff = GetImage(img.Width, img.Height)
+
+func calcDiff() {
+	ticker := time.NewTicker(1 * time.Second)
+	for range ticker.C {
+		diff = tmpImage.GetDiff(&img)
+		copy(tmpImage.Pixels, img.Pixels)
+	}
+}
 
 func get(w http.ResponseWriter, r *http.Request) {
 	c, err := upgrader.Upgrade(w, r, nil)
@@ -54,9 +66,11 @@ func get(w http.ResponseWriter, r *http.Request) {
 	defer c.Close()
 	ticker := time.NewTicker(1 * time.Second)
 	for range ticker.C {
-		diff := tmpImage.GetDiff(&img)
+
 		for i := 0; i < int(diff.Width*diff.Height); i++ {
+
 			pix := diff.Pixels[i]
+
 			if pix.Pixel.UserID != 0 {
 				x := i / int(diff.Width)
 				y := i % int(diff.Height)
@@ -85,8 +99,19 @@ func enableCors(w *http.ResponseWriter) {
 }
 func getAll(w http.ResponseWriter, r *http.Request) {
 	enableCors(&w)
-	w.Header().Set("Content-Type", "application/json")
-	json.NewEncoder(w).Encode(img)
+	w.Header().Set("Content-Type", "image/png")
+	colors := [16]color.Color{color.RGBA{255, 255, 255, 0xff}, color.RGBA{228, 228, 228, 0xff}, color.RGBA{136, 136, 136, 0xff}, color.RGBA{34, 34, 34, 0xff}, color.RGBA{255, 167, 209, 0xff}, color.RGBA{229, 0, 0, 0xff}, color.RGBA{229, 149, 0, 0xff}, color.RGBA{160, 106, 66, 0xff}, color.RGBA{229, 217, 0, 0xff}, color.RGBA{148, 224, 68, 0xff}, color.RGBA{2, 190, 1, 0xff}, color.RGBA{0, 211, 221, 0xff}, color.RGBA{0, 131, 199, 0xff}, color.RGBA{0, 0, 234, 0xff}, color.RGBA{207, 110, 228, 0xff}, color.RGBA{130, 0, 128, 0xff}}
+	upLeft := go_image.Point{0, 0}
+	lowRight := go_image.Point{int(img.Width), int(img.Height)}
+
+	png_img := go_image.NewRGBA(go_image.Rectangle{upLeft, lowRight})
+
+	for x := uint32(0); x < img.Width; x++ {
+		for y := uint32(0); y < img.Height; y++ {
+			png_img.Set(int(y), int(x), colors[img.Pixels[x*img.Width+y].Pixel.Color])
+		}
+	}
+	png.Encode(w, png_img)
 }
 
 func sendPing(ticker *time.Ticker, c *websocket.Conn, mutex *sync.Mutex) {
@@ -178,7 +203,7 @@ func main() {
 
 	loadState(&img, cachePath)
 	go saveState(&img, cachePath, 10)
-
+	go calcDiff()
 	http.HandleFunc("/get", get)
 	http.HandleFunc("/getAll", getAll)
 	http.HandleFunc("/set", set)

go/util.go

@@ -28,6 +28,7 @@ type image struct {
 	Width  uint32           `json:"Width"`
 	Height uint32           `json:"Height"`
 	Pixels []pixelContainer `json:"Pixels"`
+	Mutex  sync.Mutex
 }
 
 func GetImage(w uint32, h uint32) image {
@@ -35,7 +36,7 @@ func GetImage(w uint32, h uint32) image {
 	for i := 0; i < int(w*h); i++ {
 		Pixels[i] = pixelContainer{Pixel: pixel{Color: 0, Timestamp: 0, UserID: 0}, mutex: sync.Mutex{}}
 	}
-	return image{Width: w, Height: h, Pixels: Pixels}
+	return image{Width: w, Height: h, Pixels: Pixels, Mutex: sync.Mutex{}}
 }
 
 func (p *pixelContainer) setColor(color uint8, timestamp int64, userid uint64) {

python/clients.py

@@ -59,7 +59,7 @@ 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):
-    async with websockets.connect("ws://localhost:8080/set", timeout=600) as websocket:
+    async with websockets.connect("ws://localhost:8080/set", timeout=60) as websocket:
     
         while True:
             rx = random.randint(0, 999)
@@ -89,7 +89,7 @@ async def client():
             await websocket.send("1")
 
 async def main():
-    img= Image.open('./python/images/2.jpg')
+    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)]