Examples for beginners in JS

beginners
1

Hi there

can someone provide me some little examples how to add more than one slider/button in javascript? I’m really new to js.

I try to create an overlay with 2 sliders like in the example and one button for 0/1 functionality.

Thanks :slight_smile:

2

@Kilrathy ,Welcome to the forum!
You can can try to change the “max” and “min” values for the range slider to 0 and 1 ,to make it work in 0/1 mode
and you can find how to add a second slider if you search for " html5 range slider"
i have tried adding two slider , you can see it the second video here
–>OpenHybrid expirements
but unfortunately i didnt make a back up for that code

3

They’ve got great tutorials on html, javascript and css here: http://www.w3schools.com/html/default.asp
I think I can provide you with an example when I get home tonight.

UPDATE:
Here comes the example: It assumes you have three I/O points for your object led1, led2 and switch. I left out the style part and I didn’t test it or anything. It’s only supposed to provide a short overview.

<body>
    <!-- Create first slider -->
    <input id="slider1" type="range" value="0" min="0"
    max="255" style="width:250px">
	
	<!-- Create second slider -->
	<input id="slider2" type="range" value="0" min="0"
    max="255" style="width:250px">
	
	<!-- Create a simple button. For more advanced designs you could use inline svg or other images
	      The onclick handler can be added to any element. If the element is clicked the specified
	      toggle() function is executed. toggle() is defined in the <script> part
	-->
	<button onclick="toggle()" type="button">Toggle</button>
<script>
    var obj = new HybridObject();
    var slider1 = document.getElementById('slider1');
	var slider2 = document.getElementById('slider2');
    var touchState = false;
	var led1Value = 0;
	var led1PrevValue = 0;
	var led2Value = 0;
	var led2PrevValue = 0;
	var switchValue = undefined;
 
    document.addEventListener("touchstart",function(e){
        touchState = true;
    }, false);
    document.addEventListener("touchend",function(e){
        touchState = false;
    }, false);
 
    // Parse incoming messages
    obj.object.on("object", function (msg) {
        var data = JSON.parse(msg)
        if (obj.read("led1", data) != undefined) {
            slider1.value = obj.read("led1", data) * 255;
        } else if (obj.read("led2", data) != undefined) {
            slider2.value = obj.read("led2", data) * 255;
        } else if (obj.read("switch", data) != undefined && switchValue != obj.read("led2", data)) {
            switchValue = obj.read("switch", data);
        }
    });
 
    setInterval(function () {
		led1Value = slider1.value;
		//Request the current value of led1 from the server
		//if noone touches the screen
        if (!touchState) {
            obj.readRequest("led1");
        } else {
			//if the value of the slider has changed
			//write it to the server
            if (led1PrevValue != led1Value)
                obj.write("led1", led1Value / 255);
 
            led1PrevValue = led1Value;
        }
    }, 50);
	
	setInterval(function () {
        led2Value = slider2.value;
        if (!touchState) {
            obj.readRequest("led2");
        } else {
            if (led2PrevValue != led2Value)
                obj.write("led2", led2Value / 255);
 
            led2PrevValue = led2Value;
        }
    }, 50);
	
	setInterval(function () {
        if (!touchState) {
            obj.readRequest("switch");
        }
    }, 50);
	
	function toggle(){
		if (switchValue != undefined){
			//if switchValue is 1, write 0 to the server
			if (switchValue){
				obj.write("switch", 0);
			//Otherwise write 1 to the server
			} else {
				obj.write("switch", 1);
			}
		}
	}
	
</script>
</body>
4

Hi

Thanks a lot Carsten for you example! This will definitely help me.