UI Elements:

Read data

Show Bar Knob Value

Send data

Button Toggle Switch Increase Decrease Rangeslider Hover Knob-send Involt-cta

HTML inputs and forms

Involt-input Involt-submit

Reference

Before using the reference start from Getting started tutorial. For JQuery methods and Javascript reference check JQuery page.

Read data

Show

Display the analog pin value or received string.

ard show [pin]

<div class="ard show A0"></div>

Bar

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]

<div class="ard bar A0 range-0-1024"></div>

Knob

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]

<div class="ard knob A0 range-0-1024"></div>

Value

Set html object value attribute to received data.

ard value [pin]

<input type="text" class="ard value A0">

Send data

Button

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]

<button class="ard button P5 value-100"></button>

Toggle

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]

<button class="ard toggle P5 value-50-100"></button>

Switch

Toggle between two values with mobile-like switch. To start with active state add active class.

ard switch [pin] [inactive-active]

<div class="ard switch P5 value-0-255"></div>

Increase

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]

<button class="ard increase P5 value-100 range-0-255 step-10"></button>

Decrease

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]

<button class="ard decrease P5 value-100 range-0-255 step-10"></button>

Rangeslider

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 in this case).

For plain HTML rangeslider use involt-input element.

ard rangeslider [pin] [startvalue] [range] [step]

<div class="ard rangeslider P5 value-0 range-0-255 step-5"></div>;

Hover

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]

<div class="ard hover P5 value-0-255"></div>

Knob-send

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]

<div class="ard knob-send P5 value-100 range-0-255 step-1"></div>

Button-cta

Simple call to action for triggering functions in device.

ard button-cta [functionName]

<button class="ard button-cta fn-functionName"></button>

HTML inputs & forms

Involt-input

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="text" class="ard involt-input S0">

<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">
<option value="0">0</option>
<option value="100">100</option>
<option value="255">255</option>
</select>

Involt-submit

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]

<button type="button" class="ard involt-submit fn-functionName"></button>

Quick example:

<input type="text" class="ard involt-input S0"> //Send value when it's changed

<form>

<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>