Involt as JQuery plugin
This tutorial is continuation of JQuery section of getting started page. You should start from reading the JS & JQuery methods.
Below are practical examples of working with multiple elements:
Sending the value
The pin and element value can be defined once. This is something similar to Involt button element. The updateValue makes sure that test1 sends same value all the time. Only after clicking the test2 it will send different value.
test3 will force the test1 to send its value.
$(".test1").data("value", 123);
$(".test1").click(function() {
$(this).updateValue().sendValue();
});$(".test2").click(function() {
$(".test1").data("value", 255);
});$(".test3").click(function() {
$(".test1").sendValue();
});Without updateValue it will use current pin value. In this example only test2 and test3 manipulates the pin. In this case test1 has no value and pin assigned so it's completly dependent on other elements.
$(".test1").click(function() {
$(this).sendValue();
});$(".test2").click(function() {
$(".test1").pinDefine("P11");
involt.pin.P[11] = 100;
});$(".test3").click(function() {
$(".test1").pinDefine("P12");
involt.pin.P[12] = 0;
});Changing the attributes of Involt elements
For this example use Involt button (classes are: ard button P5 255 demo). Change the value of that button (other parameters can be changed this way). updateValue is not necessary because we want to change pin value when the button is pressed.
$(".demo").data("value", 100);
});Change pin of that button. After clicking changeValue and changePin, previously defined button will send to P6 value 100.
$(".demo").pinSwap("P6");
});Shorthand for switching pin of all Involt elements that shares same pin at once:
$(".P5").pinSwap("P6");
});Send multiple values to multiple pins at once
These examples do the same thing. To avoid long chains you should use plain javascript for better performance.
$(this).pinDefine("P9").updateValue(100).sendValue();
$(this).pinSwap("P10").updateValue(50).sendValue();
});$(".test2").click(function() {
involt.pin.P[9] = 100;
involt.pin.P[10] = 50;
involt.send("P9", involt.pin.P[9]);
involt.send("P10", involt.pin.P[10]);
});...or with multiple selectors:
$(".test4, .test5, .test6").sendValue();
});How to use received data?
These values are updated automatically. This simple example will change font size of your app. To respond when values are changed check triggering functions section.
$("*").css('font-size', involt.pin.A[0]);
});