Display text - control X, Y, Opacity

The Text widget displays text on the screen. It accepts text from another widget like the Data widget. Inputs are also available to control the X position, Y position, and opacity of the text. You can drag the text anywhere on the screen, and until an input value changes the location, the text will stay there.


1 Connect

Connect a text source widget to the first input of the widget – for example the Data widget. Anything coming from this input widget will be displayed in the text area created by the widget.

You can also optionally connect input widgets to:

  1. X – The input value sets the horizontal position of the image, with zero at the left of the screen.
  2. Y – The input value sets the vertical position of the image, with zero at the top of the screen.
  3. Opacity – The input value sets the opacity of the image, with 0 being completely transparent, and 100 being fully opaque.

2 Set the text style

In the more section at the bottom of the widget, you can set how the text will be displayed.

Text Box

  • Append new text – normally, any new text received from the input will replace the existing text. If this box is checked, new text will be appended at the end of the current text.
  • width – this sets the width of the text box
  • class – this sets the CSS class for the text box, and makes it possible for other widgets or your own CSS to modify the text


  • size – sets the font size – be sure to us px or em after the number
  • color – accepts any CSS color, in either hex format (e.g. #ff0000 for red), or named CSS colors (e.g. gray, blue).
  • bold/italic – check these to set their characteristics
  • font – use the pulldown to set the text to your desired font
NETLabTK - Tangible IoT