Place custom HTML on the display and manipulate it

The HTML widget creates an element in the display with your custom HTML. The first input of the widget can then control one of the classes within this HTML structure. The other inputs of the widget control the X, Y, and Opacity of the overall element.

The element can be positioned anywhere on the stage by dragging it around.


1 Enter HTML & CSS

Open the “more” section of the widget, and enter your HTML and CSS.


2 Set the class to be manipulated

In the “more” section, set the property to be manipulated, the class to be affected, and optionally set the overall class of the entire element.

  1. Input element property – this determines what the first input of the widget will affect.
  2. Input element class – this is the name of the class of the element which will have its property manipulated. For bgcolor, the input must be in the standard CSS format – e.g. #ff0000. You can do this with the Data widget.
  3. HTML wrapper class – this sets the class of the entire element, which allows another widget to affect this element.

3 Connect

Connect an widget to the first input to change the input element class as set above. Connect other widgets to the X, Y, and/or the Opacity inputs to affect those properties of the whole HTML element.

NETLabTK - Tangible IoT