added image preview of project

This commit is contained in:
2023-07-01 01:06:28 +05:00
parent 1575a2ede2
commit c6a86f8084
6 changed files with 7895 additions and 33 deletions

View File

@ -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>

View File

@ -19,8 +19,8 @@
transition: background-color 0.3s;
}
body {
height: 100%;
overflow-y: hidden;
height: 100%;
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 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>
<div class="wall dropzone" id="wall"></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);

View File

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