HTML UI & CSS syntax

This page is about everything related to the app and its HTML side and settings. Involt converts CSS classes into specified user interface element, function and its parameters. The ard class defines the Involt object.

Element structure

The most basic explanation of syntax looks like this:

ard [element] [pin] [parameters]

As a class within HTML element, it looks like this:

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

Example of 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.

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

The list of elements and what parameters they need check reference page.

Involt pins

Keeping the Pin-to-Pin relation is most intuitive and highly recommended to maintain readability of your code (A0 analog pin as A0 pin in app). However, pins are not only the direct representation of device pins. Treat the Involt pins as a container of values that by sending or receiving are accessible from both sides.

Probably, at some point you will notice that some things requires to send (or read) data not related to any hardware pin but from i2c/SPI sensor, some calculations or read additional data from multiplexer. In this case just include them as unused pin from pin array. For example: Arduino UNO has 6 analog read pins. If you use multiplexer (or just want to send other values) the additional values can be sent as pins A6-A(n).

The pin consist of pin type and index. The types are:

P - Send numeric value

S - Send string, S0 is not the same as P0 and is send to different array in Arduino sketch.

A - Data received from device (string and numeric)

Pins are stored in involt.pin.A, involt.pin.P, involt.pin.S arrays.

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

Parameters

The parameters determine how elements behave, you don't have to add them in specific order nor add them at all, if you use their default values.

Value

It defines the value that element is going to send on specific action. It also defines the beginning value of dynamic elements: like knob and rangeslider (default is 0). It can be numeric value or string (with S pin).

value-[value]

Some elements requires two values:

value-[value1]-[value2]

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

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

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.

range-[minimum]-[maximum]

The min and max parameters are supported.

Step

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

step-[value]

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.

fn-[name]

App settings

How to change the project name and description?

On desktop, open package.json. On mobile, edit the config.xml

How to remove the loader?

  1. Open settings.js
  2. Change the loaderOnLaunch to false
  3. Set default connection settings below. After that Involt will connect to selected device on launch.
  4. Enjoy not selecting the device each time when app is launched.
  5. Remember that loader is recommended when sending the project to others.

How to change the desktop window dimensions?

Open package.json and change width or height. To run app on fullscreen uncomment the fullscreen parameter.

Read-only elements update rate.

The update rate affects smoothness of updating HTML read elements. Default value is compromise between smoothness and cpu usage. Lower value will update objects almost in real time but will affect CPU usage (important especially on mobile). To change this open settings.js and change updateRate. This will not affect the connection bitrate.

Debug mode

Debug mode prints to console additional informations about what is happening in Involt and connection settings. To turn on debug mode open settings.js and change debugMode to true.