Here you can find list of all HTML UI elements. Remember about writing involtSend() function for read-only elements and digitalWrite or analogWrite for data sending elements in Arduino sketch with corresponding pin.
The syntax parameters can be defined as CSS classes or HTML attributes. ( <button class="ard button P6 value-255"></button> is same as <button class="ard button" pin="P6" value="255"></button>)
For JQuery methods reference check the JQuery page
Display the analog pin value or received string.
ard show [pin]
Generates 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]
Generates 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]
Generates 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]
Create element that sends value on hover and mouse leave. 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 hardware interactions for 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 value 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>