Adding hardware interactions to HTML layout

Whether you have an existing HTML prototype or not, plugging your layout interactions to device is almost unnoticeable. The only thing to do is describing with CSS classes what to send where on certain event associated with particular UI element.

Element structure

Before detailed explanation let's look again at the basic syntax:

ard [element] [pin] [parameters]

<div class="ard [element] [pin] [parameters]"></div>

The ard class defines Involt element. It's required along with element type and pin. The complete list of UI elements is on Reference page. The previous chapter explained basic button without additional parameters, good example of more complex element is rangeslider:

<div class="ard rangeslider P9 value-0 range-0-255 step-1"></div>

The parameters can be defined as attributes. It's useful when using inputs.

Pin P9 can be defined as class pin-P9, attribute pin="P9" or as class directly after [element] P9.

<div class="ard rangeslider" pin="P9" value="0" min="0" max="255" step="1"></div>

In previous cases all parameters are same as default so you don't have to define them.

<div class="ard rangeslider P9"></div>



Value to send or beginning value of dynamic elements like knob and rangeslider (beginning value is 0 by default). It can be numeric or string (with S pin).


Some elements requires two values:


When string is longer than one word use HTML value attribute:

<button class="ard button S0" value="send something">Click me</button>


Range - used to define minimum and maximum range of element. For read only default range is 0-1024 and for sending it's 0-255.


The min and max parameters are supported.


The increment or decrement step of dynamic elements. Default is 1.



Send additional function name to device when element event occurs so the device can react to certain events in app. The function can be triggered immediately in Arduino sketch. Check the functions page.