update

Author: Theo-Jaunet

assets/js/AllPalettes.js

@@ -14,12 +14,15 @@ let palSources = [
     "week05_empty",
     "week05_full",
     "week05_star",
-    "week05_type"
+    "week05_type",
     // "week26_circle",
     // "sudoku_time",
     // "sudoku_level",
     // "sudoku_hint",
     // "sudoku_mistake",
+    "palette_week47_attributes",
+    "palette_week47_duration",
+    "palette_week47_smell"
 
 ]
 
@@ -52,7 +55,7 @@ function cleanSlate() {
     document.getElementById("MarksPaletteList").innerHTML = ''
 
     d3.select("#composition").selectAll("*").remove()
-    d3.select("#fakePreviewSvg").selectAll("*").remove()
+    // d3.select("#fakePreviewSvg").selectAll("*").remove()
 
 }
 

assets/js/imageHandler.js

@@ -2,7 +2,7 @@ let reducedDim = [0, 0]
 let tfileName = ""
 
 function loadImg(src) {
-
+    console.log(src);
     let im = new Image();
     im.crossOrigin = "Anonymous";
 
@@ -35,6 +35,8 @@ function loadImg(src) {
         // fillSvg(sampleData)
         // addAPalette()
 
+        resetView(can, im)
+
     };
 
     im.src = src

assets/js/main.js

@@ -160,6 +160,7 @@ async function loadEx2() {
 
         loadImg(sampleImageList[i])
 
+
     }
 }
 
@@ -1175,7 +1176,7 @@ async function loadStateFromJson(source) {
     } else {
         throw new Error("source must be a File or a URL string");
     }
-
+    console.log(json);
     const pending = [];
 
     const state = JSON.parse(json, (key, value) => {
@@ -1244,7 +1245,7 @@ async function loadStateFromJson(source) {
 function initState(state) {
     cleanSlate()
 
-    console.log(state);
+
     megaPalettes = state.megaPalettes
     megaGlyph = state.megaGlyph
     dataBinding = state.dataBinding
@@ -1292,6 +1293,7 @@ function initState(state) {
     document.getElementById("layout-" + layout).click()
 
     updateDotsAndSvgs()
+    tdrawRefactor()
 
 
 }
@@ -1303,6 +1305,7 @@ async function preloadBgImg() {
         "assets/tempData/sources/Stefanie_DearData_05+back.jpg"
     ]
     for (let i = 0; i < preloadList.length; i++) {
+
         preload[preloadList[i]] = await getImage(preloadUrl[i])
 
     }

assets/js/serverStuff.js

@@ -3,7 +3,7 @@ const serverBaseUrl = "https://randou.liris.cnrs.fr/vizapi/descript-sketches/"
 let username = ""
 let password = ""
 let credentials = ""
-let useServer = false
+let useServer = true
 let imgList
 
 async function getPaletteList() {
@@ -12,13 +12,14 @@ async function getPaletteList() {
 
 
     for (const [key, value] of Object.entries(palettes)) {
-
+        console.log(value.name);
         let t = await loadStateFromJson(serverBaseUrl + "palettes/" + value.name)
 
-        console.log(t);
 
         if (!t.preloadName) {
-            t.originImg = await getImage(t.originImg)
+            // console.log(t.originImg);
+            // if (!t.originImg.includes("Giorgia_DearData_47_Back"))
+                t.originImg = await getImage(t.originImg)
         } else {
             if (t.preloadName !== "") {
                 t.originImg = preload[t.preloadName];
@@ -69,14 +70,15 @@ async function uploadPalette(palette, name) {
             if (tfileName !== "") {
 
                 if (!imgList.map(d => d.name).includes(tfileName)) {
-
-                    pushImage(palette.originImg, tfileName)
+                    await pushImage(palette.originImg, tfileName)
 
                 }
-                tt.originImg = serverBaseUrl + "images/" + tfileName + ".png"
+                tt.originImg = serverBaseUrl + "images/" + tfileName
             }
         } else {
-            tt.originImg = serverBaseUrl + "images/" + name + ".png"
+            console.log(tt.originImg);
+            // await pushImage(palette.originImg, name)
+            tt.originImg = currImg.src
         }
     }
 
@@ -99,8 +101,56 @@ async function uploadPalette(palette, name) {
     })
 }
 
+async function pushImage(img, name) {
+    if (credentials === "") {
+        await login();
+    }
+    img.crossOrigin = "anonymous";
+
+
+
+    const MAX_SIZE = 1024;
+
+    let width = img.naturalWidth;
+    let height = img.naturalHeight;
+
+    if (width > MAX_SIZE || height > MAX_SIZE) {
+        const scale = Math.min(
+            MAX_SIZE / width,
+            MAX_SIZE / height
+        );
+
+        width = Math.round(width * scale);
+        height = Math.round(height * scale);
+    }
+
+    const canvas = document.createElement("canvas");
+    canvas.width = width;
+    canvas.height = height;
+
+    const ctx = canvas.getContext("2d");
+    ctx.drawImage(img, 0, 0, width, height);
+
+
+    const blob = await new Promise(resolve =>
+        canvas.toBlob(resolve, "image/png")
+    );
+
+    const data = new FormData();
+    data.append("file", blob, name + ".png");
+
+    await fetch(serverBaseUrl + "images", {
+        method: "POST",
+        headers: {
+            "Authorization": `Basic ${credentials}`,
+        },
+        body: data
+    });
+}
+
 
-function pushImage(img, name) {
+/*
+async function pushImage(img, name) {
 
     if (credentials === "") {
         login()
@@ -111,26 +161,20 @@ function pushImage(img, name) {
 
     const blob = new Blob([img], {type: 'image/png'})
 
-    /*
-        data.append('file', {
-            uri: img.src,
-            name: name + "png",
-            type: 'image/png',
-        })
-    */
-
 
     data.append(
         "file",
         blob,
         name + ".png"
     );
 
-    fetch(serverBaseUrl + "images", {
+    await fetch(serverBaseUrl + "images", {
         method: 'POST',
         headers: {
             "Authorization": `Basic ${credentials}`,
         },
         body: data
     })
-}
+
+
+}*/

assets/js/zoomAndPanCanvas.js

@@ -46,7 +46,7 @@ function enableZoomPan(canvas, image) {
     canvas.addEventListener("wheel", (e) => {
         e.preventDefault();
 
-        const factor = e.deltaY < 0 ? 1.1 : 1 / 1.1;
+        const factor = e.deltaY < 0 ? 1.03 : 1 / 1.03;
 
         const rect = canvas.getBoundingClientRect();
 
@@ -77,17 +77,22 @@ function enableZoomPan(canvas, image) {
 
     window.addEventListener("mousemove", (e) => {
         if (!isDragging) return;
-        sampling = false
-        const dx = e.clientX - lastX;
-        const dy = e.clientY - lastY;
+        sampling = false;
+
+        const rect = canvas.getBoundingClientRect();
+        const scaleX = canvas.width / rect.width;
+        const scaleY = canvas.height / rect.height;
+
+        const dx = (e.clientX - lastX) * scaleX;
+        const dy = (e.clientY - lastY) * scaleY;
 
         x0 -= dx / zoom;
         y0 -= dy / zoom;
 
         lastX = e.clientX;
         lastY = e.clientY;
 
-        redraw(canvas,image);
+        redraw(canvas, image);
     });
 
     window.addEventListener("mouseup", () => {

assets/tempData/palettes/palette_week47_attributes.json

@@ -51,11 +51,11 @@
 <div style="display: flex;border-bottom: 2px solid #333;width: 100vw;height: 39px;background-color: #424242">
     <h3 style="display: inline;font-weight: 700;margin-left:10px;color: #eeeeee;line-height: 29px">Descript</h3>
     <div style="display: flex;font-weight: 700;margin-left:140px;color: #eeeeee">
-        <div>
+<!--        <div>
             <input type="checkbox" id="server"  style="display: inline-block" name="server" value="server" checked  onchange="switchUseServer(this.checked)">
             <p style="margin-right: 9px;line-height: 17px;width: 80px;display: inline-block">Use server</p>
 
-        </div>
+        </div>-->
         <p style="margin-right: 9px;line-height: 17px;width: 80px">Load an Example...</p>
         <select id="stateSelector" style="color: #424242"></select>
         <!--        <img onclick="loadState()" src="assets/images/buttons/right.png" style="filter:invert(1);width: 25px;height: 26px;cursor: pointer">-->
@@ -248,7 +248,7 @@ <h3 style="width: 100%;text-align: center"> Loading...</h3>
                 <div style="display: flex;width: 90%;margin-left:5px;justify-content: space-evenly; ">
                     <div style="display: flex">
                         <p style="margin-bottom: 0;;margin-right: 5px;margin-top: 3px;font-weight: 550">Size: </p>
-                        <input type="range" min="1" max="10" style="width: 120px;margin-bottom: 0" value="1"
+                        <input type="range" min="1" max="30" style="width: 120px;margin-bottom: 0" value="1"
                                id="strokewidth">
 
                     </div>