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:

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:

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.

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

Parameters

Value

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:

Range

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.

Step

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

Function

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.