Forum

(element in front of object): issue js button in front of scene

22 March 2018 05:33
I found the solution of the question below…got it!!! But now I need it to get behind my object. In the case below, behind the cube.
I dont get to load file browser (img) in front of background and behind the cube. My intent is to have the object in front of the image. Image loaded from file browser must be behind the object and in front of background.

One last time….(i think…) thank you!
24 March 2018 16:00
I've attached a fixed project
The image is loaded to the img-element which is placed behind the main canvas. In app.init I've added alpha: true and disabled "Render Sky" in blend file. Your code uses jquery, but it is not connected, I've added it. Also I've fixed your onchange callback.


The diff for better understanding:
diff -rupN '–exclude=assets' 001-03-21/001-03-21.css 001-03-21_fixed/001-03-21.css
— 001-03-21/001-03-21.css 2018-03-24 15:56:04.250182800 +0300
+++ 001-03-21_fixed/001-03-21.css 2018-03-24 14:46:05.787000000 +0300
@@ -7,17 +7,18 @@
}

body {
- background-color: #000;
+ background-color: rgb(255, 255, 255);
margin: 0;
overflow: hidden;
}

img{
- max-width:180px;
- position: relative;
- top:600px;
- left: 400px;
- z-index: -0;
+ position: absolute;
+ top:0px;
+ left: 0px;
+ width: 100%;
+ height: auto;
+ z-index: -1;
}
input[type=file]{
padding:10px;
diff -rupN '–exclude=assets' 001-03-21/001-03-21.html 001-03-21_fixed/001-03-21.html
— 001-03-21/001-03-21.html 2018-03-24 15:56:04.270671300 +0300
+++ 001-03-21_fixed/001-03-21.html 2018-03-24 14:35:29.774940000 +0300
@@ -10,15 +10,15 @@

<link rel="stylesheet" href="001-03-21.css" type="text/css">

-<script type="text/javascript" src="..\..\dist\b4w.js"></script>
-
+<script type="text/javascript" src="../../dist/b4w.js"></script>
+<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="001-03-21.js"></script>

</head>

<body>
<div id="main_canvas_container" ></div>
-<input type='file' onchange="readURL(this);" />
+<input id="open_btn" type='file'/>
<img id="blah" src="http://placehold.it/180" alt="your image" />
</body>

diff -rupN '–exclude=assets' 001-03-21/001-03-21.js 001-03-21_fixed/001-03-21.js
— 001-03-21/001-03-21.js 2018-03-24 15:56:04.295742200 +0300
+++ 001-03-21_fixed/001-03-21.js 2018-03-24 14:38:58.593047700 +0300
@@ -25,7 +25,8 @@ exports.init = function() {
callback: init_cb,
show_fps: DEBUG,
console_verbose: DEBUG,
- autoresize: true
+ autoresize: true,
+ alpha: true
});
}

@@ -77,9 +78,10 @@ function load_cb(data_id, success) {

m_app.enable_camera_controls();

- // place your code here
-function readURL(input) {
- if (input.files && input.files[0]) {
+ var open_btn = document.getElementById("open_btn");
+ open_btn.onchange = function(input) {
+ var btn = input.target;
+ if (btn.files && btn.files[0]) {
var reader = new FileReader();

reader.onload = function (e) {
@@ -87,7 +89,7 @@ function readURL(input) {
.attr('src', e.target.result);
};

- reader.readAsDataURL(input.files[0]);
+ reader.readAsDataURL(btn.files[0]);
}
}
}
Binary files 001-03-21/blender/001-03-21.blend and 001-03-21_fixed/blender/001-03-21.blend differ
Binary files 001-03-21/blender/001-03-21.blend1 and 001-03-21_fixed/blender/001-03-21.blend1 differ
Alexander (Blend4Web Team)
twitter
25 March 2018 01:11
i have worked the whole day trying to get this right. You are helping me so much. I will never quit from this.
I know you probably worked a lot on it and I feel embarrassed and sorry…
What you did, is exactly what I wanted. But is there anyway I could resize to make it smaller ? It takes the whole background regardless of the size of the image….
My other alternative….i did my homework and I think a simpler solution was given by your colleague Mr Ivan Lyubovnikov (cool name..)
…the thread started on April 28, last year where this German guy asked exactly what I need right now in the post #16693. His username, is mo-systeme.

I would rather add a plane and I place behind the object. Then the viewer will change texture of the plane clicking the button:
The solution is here but i worked really hard and could not get it right..

https://www.blend4web.com/en/forums/topic/2561/?page=2 (you have to scroll down)


 <!DOCTYPE html>

<html>
<head>
<style type="text/css">
#canvas_cont {
position: absolute;
width: 100%;
height: 100%;
top: 200;
left: 0;
}
</style>

<script src="b4w.min.js"></script>

<script>
//Display texture on the 3d model from loading imgae file
"use strict";

b4w.register("TextureUpload", function(exports, require) {

var m_tex = require("textures");
var m_data = require("data");
var m_app = require("app");
var m_main = require("main");
var m_sfx = require("sfx");
var m_scenes = require("scenes");
var m_cfg = require("config");
var m_version = require("version");

var DEBUG = (m_version.type() === "DEBUG");


exports.init = function() {
m_app.init({
canvas_container_id: "canvas_cont",
callback: init_cb,
show_fps: true,
physics_enabled: false,
background_color: [1, 1, 1, 1],
alpha: true,
autoresize: true,
assets_dds_available: !DEBUG,
assets_min50_available: !DEBUG,
console_verbose: true
});
}

function init_cb(canvas_elem, success) {

if (!success) {
console.log("b4w init failure");
return;
}
load();
}

function load() {
m_data.load("TextureUpload.json", load_cb);
}

function load_cb(data_id) {
m_app.enable_camera_controls();
load_data();
}


function load_data() {
var cube = m_scenes.get_object_by_name("Cube");
var ctx_image = m_tex.get_canvas_ctx(cube, "Canvas_TextureNEW");
var changeImageBtn = document.getElementById('changeImageBtn');
var fileInput = document.getElementById('fileInput');


//Display the default texture image on the 3D model
var img = new Image();
img.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAYAAAA71pVKAAACIklEQVQokS2SWW/aYBBFr2NjSEJRoqo/pFUSwuYNm0CUNP3/Uit1SdWgsAgMNjb+Th/M82iO7pw7iho5gSASzM73RPach2aJJwhdCAXTizdiwcQtiQSBsyZyDQoFgSCxS/o64KtgIIhduBXMXOjpSCToCQIL+trS1xuKzyBxd3jWLyYtCO2CkZURujmRA3FzTmjtSJqG0DYMtOL5ogYo1IFpAzzBUAWBA+POH4Y6ElrgC8ZuPU/OMwJnw0ArAos6duIYfDuD1EAG7GB6tWAk8NuvsARyA5saENqGnkBTwcyBewFlhdkAmWGgOYngRjnkwHYOuakTNA2RQLFgbB3w2j8hP0IJbGDW2dAXBNcLWFEDlvUJobWjpwpN9M6DXZvst3d8bqzxO1u6yni5NNyeADfK8duv+KolzlxQYGf4Snm5qrhT3Wty6n0ieNCRJ8Gj4NGq405tQ9yYo6QBsQNftOfbpxLPeSe+XDNuFdxriddI8ZtLvMaGob0maWfcqeBWFeqfio8/rDB/gS2wS2vrORjAVJBtALaUa/Cvc7ouyLcK/MaKgap6sQQooIKsXJBXsCtXVBVAikmh23rHOwcFqhhozvNHOPwrwKQUxQ+yfA385li+1cAMqL7DFkZWxkhHFJ2tmDjQFSSdBV2lDJswdKHnQnAGQ+2ZtOBG8NSGUAe+uqDgZPfRgYlTEFkVkQVD1S8ZyRAqJdKeQCXTFnja4CvlPzEgSFZRaHh+AAAAAElFTkSuQmCC";
img.onload = function() {
ctx_image.drawImage(img, 0, 0, ctx_image.canvas.width, ctx_image.canvas.height);
m_tex.update_canvas_ctx(cube, "Canvas_TextureNEW");
}


//Display an other texture image on the 3D model by clicking "Change image" Button
changeImageBtn.addEventListener('click', function() {
var img = new Image();
img.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAYAAAA71pVKAAACHElEQVQokT2TTW8TZxRGz/s19limMQHULPIXygqhINGiqmojiLpIQV1Ezaqof7oLJBIaEurYODLOuDNzuhhgdaUrPdLRee6lD7hJxaZgH3e0YE+0D9hTezPCFjSMhllGSqUpyCYV24AmbJhoxG1GMzZMbQOumWqFm4hWOGeqjKUpQ9Axnudol6PbiOboRbqvo+ib8Z59wVUawm/H+Cncky58Y8PE8xx9jD7LvSdsnKeZfcF/wR+DPkUPo7ZMvpJiQSN2Ofost55w5ilXrtgfiELtcbn2OTe+4tqeXR2hBemJbjNuI56w8ZQrf+dvz+KuVvgR/ItLj2j9Lc59X30WWCF9GOSYo/M0c8W+Z3HXJux4m6eaKz/EPZdhz3dhpjG6Tmgo0lPbMPUi3bf/Iq9iCBZc5AfDvmCXsI/f2kaULA1FQ601fhjf8zpOXVSDB0doSt6ChqARN4SBtJpKk3GddnzPrn+Gtx6hB1FfoN8l/Rn9BX2R1j4a6R9s/Ic7XlVIG7BNtZcJn+fOp+iTsZ4y96Do92HuQdBDNj7MepyXw4UVxDzUcc5dX/POI/SH+MljFj5BD2n9KeuvaenjpC/T0ot8xxVIz8we7AKuUuV1Tn6shupkYsvMVRnq2YLLkL2ts8aZrCMuEjbsa4Xm7DbhZV1rnGgaHuU/dmwLGpJdwJ4kN59vtvtiMQ8U6xBsycpdu4AdaBgquim4KNn/AUiWzb7MLipNAAAAAElFTkSuQmCC";
img.onload = function() {
ctx_image.drawImage(img, 0, 0, ctx_image.canvas.width, ctx_image.canvas.height);
m_tex.update_canvas_ctx(cube, "Canvas_TextureNEW");
}
});


//Display the uploaded texture image on the 3D model by selecting it thru "File upload" Button
fileInput.addEventListener('change', function() {
var file = fileInput.files[0];

var img = new Image();
img.onload = function() {
ctx_image.drawImage(img, 0, 0, ctx_image.canvas.width, ctx_image.canvas.height);
m_tex.update_canvas_ctx(cube, "Canvas_TextureNEW");
}
img.src = URL.createObjectURL(file);
});


}

});




b4w.require("TextureUpload").init();
</script>

</head>

<body>

<button id="changeImageBtn">Change image</button>
<br>
or
<br>
<input type='file' id="fileInput" />

<div id="canvas_cont"></div>


</body>

</html>


Could you be kind enough to set this up for me on this project I am sending attached? (sorry….and thank you)
26 March 2018 01:54
Never mind, Alexander! Brilliant work!!! thank you so much for everything! All I had to do was to play around with the CSS properties and voila…. everything is great! I will have to change the background color somehow and if you could tell me where I could go in the code and replace “choose file” with “Select image” would be great. I used the cube example, but obviously im going to add all those files to make it work in the main project, in other words I will have to add those files to the one already put together(this is my next step).

So no need to do anything with the "plane idea". I liked the idea, but once I modified the sizing of the image in the code you sent me, it all became clear to me. Im really happy.
I hope anyone that reads this, realizes this is a great reusable piece of code, done by our always helpful friend Alexander. I owe him a lot! We all do!

You will be named in my the “thanks section” in the website. I know I will be back for more help until im done.
A big THANK YOU one more time!
27 March 2018 05:35
Didn’t take long, did it?
In the last phase of the project, im trying to get the screen shot module to work, but with the setup below it doesn’t im not sure why;

So ….Alex….what if I want for the code to select certain objects in the scene, instead of getting a full screenshot?
In .js - module
var m_scrn = require("screenshooter");


Code below
document.getElementById("btnScreenshot").addEventListener("click", takeScreenshot);
function takeScreenshot() {
m_scrn.shot("image/png",1);
}


In HTML
<div style="position:absolute; left:-3px; bottom:90px; width:135px; z-index:4;">
<div id="btnScreenshot" class="Button" style="position:absolute; width:30px; height:30px; right:59px; background-color:#F00" align="center"> <img src="screenshot.png" style="position:relative; top:2px; width:24px; height:24px; z-index:3;"> </div>
<h id="text-menu" style="top:34px;">take a<br> screenshot!</h>
</div>


The button didnt work.

Thank you
27 March 2018 14:33
Why it's not working for you? I've just pasted your code and all works. I've modified a bit style of the button and added an icon. The project.

Yes, the screenshoter is ignoring the loaded picture, because it exists outside of the engine. The Ivan's Lyubovnikov example loads an image to the texture and all happens inside the engine, thus screenshoter will include the loaded image.

Have you seen this tutorial?
You can reproduce the Ivans approach in your case by placing a plane in front of the camera and by parenting it to this camera. The rest steps relate to use of replace_image function.
Alexander (Blend4Web Team)
twitter
27 March 2018 16:44
"Yes, the screenshoter is ignoring the loaded picture, because it exists outside of the engine. The Ivan's Lyubovnikov example loads an image to the texture and all happens inside the engine, thus screenshoter will include the loaded image."
Oh no, i dont want the picture to be taken by the screenshooter. I wd like to select certain 3d elements (whichever the ones the viewer choose)so only the ones that are select by the viewer from the scene will be shown as .png(or jpeg).

Also, i wanted to know what can i do if i want to change back the color of the background (the background of the scene, not the square where the picture will be loaded.

Thank you
27 March 2018 16:59
I wd like to select certain 3d elements (whichever the ones the viewer choose)so only the ones that are select by the viewer from the scene will be shown as .png(or jpeg).
There is no such functionality, but it is possible to calculate a rectangle for shooting a specific object and it requires linear algebra skills.
Also, i wanted to know what can i do if i want to change back the color of the background (the background of the scene, not the square where the picture will be loaded.
Currently, as you can see, background is fully transparent. What do you mean? Do you want to mix background image with your custom color? Or this custom color should appear only on the screenshot?
Alexander (Blend4Web Team)
twitter
27 March 2018 19:44
Yes, i wanted the square where the picture will be loaded to be black as the background. All black, so when an image is loaded, is contrasts well. Just so you know, as detailed in the messages above, i changed CSS properties so the image loads 4:3 ratio, almost a square. I brought down the size, so when i did that, the background appeared. Very light color. It wd be awesome if it was all black. This is what I have accomplished…
ongoing.JPG
It should be a simple thing to do, if I simply go to Photoshop and save a black square(.png or Jpg) in the proportions I want and add to the project so when it loads, that is the background of choose file..i just need to know where do i enter in the code…(i will research how to do that, but meanwhile you might save me)..
So currently this is the CSS i have..
*:active {
-webkit-tap-highlight-color: rgba(0,0,0,0);
-moz-tap-highlight-color: rgba(0,0,0,0);
tap-highlight-color: rgba(0,0,0,0);
}

body {
background-color: rgb(12, 12, 12);
margin: 0;
overflow: hidden;
}

img{
position: absolute;
top:110px;
left: 650px;
width: 525px;
height: 700px;
z-index: -1;
background-image: url("paper.gif");
}
input[type=file]{
font-family: "Impact", Impact, Charcoal, sans-serif;
padding:10px;
background:#575d4d;
position: relative;
top:110px;
left: 650px;
}

#main_canvas_container {
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 0;
}

And this is the HTML…
<!DOCTYPE html>
<html>

<head>

<title>001-03-21</title>

<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">

<link rel="stylesheet" href="001-03-21.css" type="text/css">

<script type="text/javascript" src="../../dist/b4w.js"></script>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="001-03-21.js"></script>

</head>

<body>
  <div id="main_canvas_container" ></div>
<input id="open_btn" type='file'/>
<img id="blah" src="https://place-hold.it/525x700/#0000/#d9d9&text=Image" alt="your image" />

<div style="position:absolute; left:600px; bottom:90px; width:135px; z-index:4;">
    <div id="btnScreenshot" class="Button" style="position:absolute; width:600px; height:85px; right:30px;" align="center"> <img src="assets/screenshot.png" style="position:relative; top:2px; width:75px; height:75px; z-index:3;"> </div>
    <h id="text-menu" style="top:34px;"></h>
</div>
</body>

</html>

Also…what would be the alternative that i have if i wanted all 3d objects copied/or transferred somehow to a new blank page? What i intend to do is find a way to give to the viewer a way to isolate the outcome(the 3d objects) in a form (maybe a pre ready online .js form) so they can be comented. I want to pick your brain about this…the screenshooter helps, but i still not sure if I will use it.
Thank you.
02 April 2018 11:52
Found the solution here

As far as I can understand, you should change src of img tag to "data:image/gif;base64,R0lGODlhAQABAAAAACwAAAAAAQABAAA=". This is encoded gif-image which is empty (maybe fully transparent, I don't know exactly, but it works)
Alexander (Blend4Web Team)
twitter
 
Please register or log in to leave a reply.