Forum

html checkbox status

22 November 2017 22:50
Hi!
My problem:
I would like to turn on/off a LED lamp depending on the checkbox status.

HTML Code:
<body>
  <div id="main_canvas_container"></div>

<!--SLIDER - OPACITY-->
  <div class="header">
  <center>
	<span>L.E.D. OPACITY</span><label id="demo"></label><br>
	<input type="range" id="myRange" style="width:180px" min="20" value="100"><p></p>
  </center>

<!--LIGHT-SWITCH & COLOR PICKER-->
  <div class="footer">
	<div class="glow"><span>LIGHT</span><input class="toggle" type="checkbox" id="light"></div>
	<div class="color"><span>COLOR</span><input type="color" id="color_input" value="#FF0000"></div>
	<div style="clear: both;"></div>
  </div>

	<script>
	   var slider = document.getElementById("myRange");
	   var output = document.getElementById("demo");
	   output.innerHTML = slider.value/100;

	   slider.oninput = function() {
  	   	output.innerHTML = this.value/100;
	   }
	</script>
	
  </div>
</body>

JS Code:
    // place your code here
    var lens = m_scenes.get_object_by_name("lens");
    var nodes = new Array("lens_mat", "RGB");

//OPACITY SLIDER
    var slider = document.getElementById("myRange");
    var output = document.getElementById("demo");
    output.innerHTML = slider.value/100;

	slider.oninput = function() {
   	   output.innerHTML = this.value/100;
	   m_mat.set_nodemat_value(lens, ["lens_mat", "Value"], output.innerHTML)
	}
//COLOR PICKER - HEX to RGB
    $('#color_input').change(function(){
        var rgb = hexToRgb($(this).val());
        $('#demo').text(rgb.r+', '+rgb.g+', '+rgb.b);
        m_objects.set_nodemat_rgb(lens, nodes, rgb.r, rgb.g, rgb.b);
    });

    m_objects.set_nodemat_rgb(lens, ["lens_mat", 'RGB'], 0.8, 0, 0);

//GLOW ON/OFF WITH CHECKBOX (does not work)
function main_canvas_click(e) {
    if (e.preventDefault)
        e.preventDefault();

    var x = e.clientX;
    var y = e.clientY;
    var glow = document.getElementById('light').checked;
    if (glow == false) {
	m_mat.set_nodemat_value(lens, ["lens_mat", "Value"], 0.0);
    }
    else
	m_mat.set_nodemat_value(lens, ["lens_mat", "Value"], 1.0);
}

}


function hexToRgb(hex) {
    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
    return result ? {
        r: parseInt(result[1], 16)/255,
        g: parseInt(result[2], 16)/255,
        b: parseInt(result[3], 16)/255
    } : null;
}

Material Node:

Light ON (image):

but…
If you click the LIGHT checkbox, (ON status), GLOW will not be displayed. No console error. The transparency and color picker works. Can you help? Thanks
http://blender.hu Hungary Blender Community Site
24 November 2017 18:50
Sorry! I solved!
http://blender.hu Hungary Blender Community Site
27 November 2017 14:47
Alexander (Blend4Web Team)
twitter
 
Please register or log in to leave a reply.