Display the analog pin value or received string.
ard show [pin]
Horizontal bar for value of analog pin. Width of bar value is automatically scaled to CSS width of element. For scaling the value use Arduino map function. Add the label-constant class to show the value in constant position.
ard bar [pin] [range]
Knob that shows analog value. Based on JQuery Knob plugin by Anthony Terrien. You can add the data- attributes as described in plugin to change parameters of this element.
ard knob [pin] [range]
Set html object value attribute to received data.
ard value [pin]
The most basic UI element of Involt. Send the value (numeric or string) to target pin when button is pressed. It can be any HTML object (div etc.).
ard button [pin] [value]
Toggle pin between [value1] and [value2]. [value1] is also beginning state on startup (should be declared in void setup( ) ). By not defining the values it will become 0/1 switch.
ard toggle [pin] [value1-value2]
Toggle between two values with mobile-like switch. To start with active state add active class.
ard switch [pin] [inactive-active]
Increase pin value by [step]. [range] is limit of value. Works with decrease but both need to have same [startvalue]. You can add in void setup the [startvalue] (this is not required).
ard increase [pin] [startvalue] [range] [step]
Decrease pin value by [step]. [range] is limits of value. Works with increase but both need to have same [startvalue]. You can add in void setup the [startvalue] (this is not required).
ard decrease [pin] [startvalue] [range] [step]
JQuery based slider with noUiSlider plugin. The value is displayed inside a tooltip over object. Add the label-constant class to show the value in constant position. To access the JQuery object use .rangeslider>.slider selector, for more info read the plugin documentation. To send the values in real time, not only on release add the fluid class (may cause buffer overloads so step 1 is not recommended).
For plain HTML rangeslider use involt-input element.
ard rangeslider [pin] [startvalue] [range] [step]
Hover the element to send value. To combine hover with other Involt element you can simply use this as parent of target in html.
ard hover [pin] [onLeave-onHover]
Simple knob that sends value. This knob is also based on JQuery Knob plugin - you can add plugin data- attributes to this element and they will be transfred to generated object. To send the values in real time, not only on release add the fluid class (may cause buffer overloads so step 1 is not recommended).
ard knob-send [pin] [startvalue] [range] [step]
Simple call to action for triggering functions in device.
ard involt-cta [functionName]
HTML inputs & forms
Handle the HTML inputs. The data is sent on input change. Remember that parameters can be defined as classes and HTML attributes.
Supported inputs: text, range, number, checkbox, radio, select
ard involt-input [parameters]
<input type="number" class="ard involt-input P10">
<input type="checkbox" class="ard involt-input" pin="P9" value="0-255">
<input type="range" class="ard involt-input P10" min="0" max="100" step="10" value="50">
<input type="radio" name="demo" class="ard involt-input P14" value="0">
<input type="radio" name="demo" class="ard involt-input P14" value="1">
<select class="ard involt-input" pin="P13">
Use involt-submit inside HTML form to send form inputs values only on submitting by this button. The functionName is not required, the function itself is triggered after all values are passed to device. The type=""button" is required.
UI elements affected: involt-input, knob-send, rangeslider.
ard involt-submit [functionName]
<input type="text" class="ard involt-input S0"> //Changing will not send the value immediately.
<button type="button" class="ard involt-submit">Submit</button> //Click to send value</form>