added image preview of project

index.js

@@ -199,6 +199,7 @@ app.post("/save_proj", (req,res) => {
     let cook = req.cookies;
     let proj = inp["proj"];
     let pname = inp["name"];
+    // console.log(inp["img"]);
     db.gv("users","uuid",`'${cook["uuid"]}'`, (udata)=>{ udata = udata[0]
         db.gv("projects","uid",udata["id"],(pdata)=>{
             let projin = null;
@@ -213,10 +214,11 @@ app.post("/save_proj", (req,res) => {
                 // console.log("proj not in");
                 // console.log(pname,udata["id"],proj);
                 console.log(`${udata["uuid"]} created project ${pname} from ${cook["sid"]}`);
-                db.nr("projects","`uid`,`name`,`body`",`'${udata["id"]}','${pname}','${proj}'`);
+                db.nr("projects","`uid`,`name`,`body`,`img`",`'${udata["id"]}','${pname}','${proj}','${inp["img"]}'`);
                 res.send({out:"good"});
             } else if (projin != null){
                 db.sv("projects","body",proj,"id",projin["id"],()=>{});
+                if(inp["img"] != "") db.sv("projects","img",inp["img"],"id",projin["id"],()=>{});
                 console.log(`${udata["uuid"]} saved project ${projin["name"]} from ${cook["sid"]}`);
                 // console.log("proj in");
                 res.send({out:"good"});

public/lib/inter.js

@@ -37,7 +37,7 @@ function create(clas,x,y,body,id){
                 obj.src = db_data["img"];
                 obj.title = `${db_data["name"]} \n ${db_data["description"]}`;
             }
-            obj.innerHTML = body;
+            // obj.innerHTML = body;
             // parent.append(obj);
             root.append(obj);
             set_pos(obj,x,y);
@@ -116,13 +116,20 @@ function load_proj(){
 
 function save(callback){
     // console.log(objs);
-    $.post( "/save_proj", {proj:JSON.stringify(objs),name:proj_name})
+    html2canvas(document.querySelector("body"),{height: 500, width:(window.innerWidth /1.65),x:(window.innerWidth / 5), y:250}).then(canvas => {
-    .done(function( res ) {
+        let scr = "";
+        console.log(canvas.toDataURL().length);
+        if (canvas.toDataURL().length < 80000) scr = canvas.toDataURL()
+        // console.log(scr);
+        $.post( "/save_proj", {proj:JSON.stringify(objs),name:proj_name,img:scr})
+        .done(function( res ) {
         if(res["out"] == "good"){
-            console.log("good");
+                // console.log(scr)
-            if(callback) callback(res);
+                console.log("good");
-        }
+                if(callback) callback(res);
-    })
+            }
+        })
+    });
 }
 
 function load_objs(callback){
@@ -235,8 +242,8 @@ interact('.createzone').dropzone({
 function drag_start() {
     let zones = document.getElementsByClassName("createzone");
     Object.entries(zones).forEach(([key, zone]) => {
-        let x = zone.getBoundingClientRect().left - 15;
+        let x = zone.getBoundingClientRect().left - scrollX - 15;
-        let y = zone.getBoundingClientRect().top - 30;
+        let y = zone.getBoundingClientRect().top - scrollY - 30;
         // console.log(x,y);
         create(`${zone.classList[0]} drag spawn`,x,y,`${zone.classList[0]}`,`none`);
     });

views/main.ejs

@@ -45,8 +45,8 @@
 <!-- <script src="/lib/interact.min.js"></script> -->
 
 <section class="main">
-    <div id="projs_div"></div>
     <button onclick="new_proj()">new project</button>
+    <div id="projs_div"></div>
 </section>
 
 <script>
@@ -58,7 +58,7 @@
         projs.forEach(proj => {
             // console.log(proj);
             let div = document.getElementById("projs_div");
-            div.innerHTML += `<button id='proj_${proj["name"]}' class='proj' onclick="goto('/proj/${proj["name"]}')">${proj["name"]}</button>`;
+            div.innerHTML += `<button id='proj_${proj["name"]}' class='proj' onclick="goto('/proj/${proj["name"]}')"><img height="200" width="300" src='${proj["img"]}' alt='${proj["name"]}'></img> <br>${proj["name"]}</button>`;
         });
     });
 </script>

views/project.ejs

@@ -19,8 +19,8 @@
         transition: background-color 0.3s;
     }
     body {
-    height: 100%;
+        height: 100%;
-    overflow-y: hidden;
+        overflow-y: visible;
     }
     .createzone {
         background-color: #bfe4ff;
@@ -104,6 +104,7 @@
 <%- include('./static/start.ejs',{name:proj_name,async: true}) %>
 <%- include('./header.ejs') %>
 <script src="/lib/interact.min.js"></script>
+<script src="/lib/html2canvas.js"></script>
 
 
 <div id="drags">
@@ -111,7 +112,7 @@
 </div>
 <section class="main">
     <div id="proj_top">
-    <button onclick="save()">save</button>  
+        <button id="proj_save_btn" onclick="save((res)=>{document.getElementById('proj_save_btn').innerHTML='saved';setTimeout((res)=>{document.getElementById('proj_save_btn').innerHTML='save'},3000)})">save</button>  
         <input id="proj_name"></input>
     </div>
 </section>
@@ -120,6 +121,22 @@
     <!-- <div class="dropzone"></div> -->
 
 <div class="inputs">
+    <div id="wall_input">
+        <div>
+            <div style="display: flex;width: 150px;justify-content: space-between;">
+                <label for="wall_height">height </label>
+                <div id="wall_height_value">0</div>
+            </div>
+            <input type="range" step="0.1" min="0.9" max="4" id="wall_height" value="2" oninput="wall_size_change('height')"> 
+        </div>
+        <div>
+            <div style="display: flex;width: 150px;justify-content: space-between;">
+                <label for="wall_width">width</label>
+                <div id="wall_width_value">0</div>
+            </div>
+            <input type="range" step="0.1" min="1.9" max="7" id="wall_width" value="4" oninput="wall_size_change('width')"> 
+        </div>
+    </div>
     <div class="czones">
         <!-- <div class="cube createzone"></div>
         <div class="buble createzone"></div>
@@ -135,27 +152,30 @@
     <div class="trash">trash bin</div>
 </div>
 
-
+<div class="wall dropzone" id="wall"></div>
-<div id="wall_input">
-    <div>
-        <div style="display: flex;width: 150px;justify-content: space-between;">
-            <label for="wall_height">height </label>
-            <div id="wall_height_value">0</div>
-        </div>
-        <input type="range" step="0.1" min="0.9" max="4" id="wall_height" value="2" oninput="wall_size_change('height')"> 
-    </div>
-    <div>
-        <div style="display: flex;width: 150px;justify-content: space-between;">
-            <label for="wall_width">width</label>
-            <div id="wall_width_value">0</div>
-        </div>
-        <input type="range" step="0.1" min="1.9" max="7" id="wall_width" value="4" oninput="wall_size_change('width')"> 
-    </div>
-</div>
-<div class="wall dropzone"></div>
 
 <script src="/lib/inter.js"></script>
 <script>
+    function scree(){
+
+
+        html2canvas(document.querySelector("body"),{height: 1000,y:100}).then(canvas => {
+            let scr = canvas.toDataURL();
+            let img = document.createElement("img");
+            img.src = scr;
+            document.body.append(img);
+            // return canvas;
+            // console.log(scr)
+        });
+
+
+
+        // html2canvas(document.querySelector("#drags")).then(canvas => {
+        //     document.body.appendChild(canvas)
+        // });
+
+
+    }
     load_objs((data)=>{
         data.forEach(value => {
             // console.log(value);

views/static/start.ejs

@@ -17,6 +17,9 @@
             margin: auto;
             padding-block: 20px;
         }
+        body{
+            background-color:aliceblue;
+        }
     </style>
 </head>
 <body>