added object creation

This commit is contained in:
2023-06-30 21:27:47 +05:00
parent c81c42df77
commit 1575a2ede2
5 changed files with 223 additions and 81 deletions

View File

@ -13,13 +13,14 @@
<h1>hello admin</h1>
<div class="nobj">
<div class="img_preview">
<input type="file" onchange="previewFile()" value=""><br>
<input type="file" onchange="previewFile()" value="" maxlength="1"><br>
<img src="" height="100" alt="Image preview...">
</div>
<textarea name="" id="nobj_description" cols="30" rows="5" placeholder="object description"></textarea>
<div class="nobj_options">
<input type="text" id="nobj_name" placeholder="object name">
<button >create object</button>
<button onclick="create_obj()">create object</button>
<div id="obj_resp"></div>
</div>
</div>
</section>
@ -40,26 +41,50 @@
}
}
async function img(){
var preview = document.querySelector('img').src;
console.log(preview);
fetch(preview)
.then(res => res.blob())
.then(blob => {
let dataUrl = blobToDataUrl(blob);
console.log(blob)
console.log(dataUrl)
})
}
function blobToDataUrl(blob) {
let reader = new FileReader()
reader.readAsDataURL(blob)
reader.onload = function(){
dataUrl = reader.result
console.log(dataUrl) //DataURL
return dataUrl;
}
// async function toblob(callback){
// var preview = document.querySelector('img').src;
// // console.log(preview);
// fetch(preview)
// .then(res => res.blob())
// .then(blob => {
// // let dataUrl = blobToDataUrl(blob);
// console.log(blob)
// callback(blob);
// // console.log(dataUrl)
// })
// }
function create_obj(){
let name = document.getElementById("nobj_name").value;
let description = document.getElementById("nobj_description").value;
var img = document.querySelector('img').src;
new_obj(name,img,0,0,description,(res)=>{
if(res["out"] == "bad" && res["err"] == "name"){
document.getElementById("obj_resp").innerHTML = "object already exist";
}
else if(res["out"] == "good"){
document.getElementById("obj_resp").innerHTML = "object created";
}
});
}
// load_obj("asd",(data)=>{
// console.log(data);
// // let dataUrl = blobToDataUrl(data["img"]);
// // console.log(data["img"]["data"].getBlob());
// console.
// // document.querySelector('img').src = data["img"];
// })
// function blobToDataUrl(blob) {
// let reader = new FileReader()
// reader.readAsDataURL(blob)
// reader.onload = function(){
// dataUrl = reader.result
// // console.log(dataUrl) //DataURL
// return dataUrl;
// }
// }
</script>
<!-- <iframe src="/reg" frameborder="0"></iframe> -->
<%- include('./reg.ejs') %>

View File

@ -42,6 +42,7 @@
height: 50px;
width: 50px;
transition: background-color 0.3s;
text-align: center;
/* z-index: -1; */
}
.czones{
@ -118,11 +119,9 @@
<!-- <div class="dropzone"></div> -->
<div class="inputs">
<div class="czones">
<div class="cube createzone"></div>
<div class="buble createzone"></div>
<!-- <div class="cube createzone"></div>
<div class="buble createzone"></div>
<div class="buble createzone"></div>
<div class="buble createzone"></div>
@ -131,24 +130,43 @@
<div class="buble createzone"></div>
<div class="buble createzone"></div>
<div class="buble createzone"></div>
<div class="buble createzone"></div> -->
</div>
<div class="trash"></div>
<div class="trash">trash bin</div>
</div>
<div id="wall_input">
<div>
<label for="wall_y">height</label> <br>
<input type="range" step="0.1" min="0" max="4" id="wall_y" oninput="wall_size_change('y')"> <br>
<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>
<label for="wall_x">width</label> <br>
<input type="range" step="0.1" min="2" max="7" id="wall_x" oninput="wall_size_change('x')"> <br>
<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>
load_objs((data)=>{
data.forEach(value => {
// console.log(value);
let czones = document.getElementsByClassName("czones")[0];
let czone = document.createElement('img');
czone.classList.add(value["name"]);
czone.classList.add("createzone");
czones.append(czone)
});
})
</script>
<script>
let proj_name = "<%= proj_name %>";
// console.log(proj_name);