TFT Display

A TFT Display shows several readings together on one screen, laid out like a real 3.5" to 7" TFT panel: temperature, humidity, pump state and more, side by side.

Try it

Turn the temperature knob and switch the pump on the NuttyFi board. The board writes three Telemetry Points and the TFT Display shows them together on one screen. Try the Screen Size and Layout settings, including a layout that does not fit.

How to add and set up

1. Open the dashboard in edit modeOpen the device and turn on editing.
2. Add a TFT DisplayPress + on the right edge of the canvas and pick TFT Display. Drag it into place.
3. Open its settingsClick the gear icon on the widget.
4. Add the Display SegmentsUnder 8x8 Grid Placement, link the first segment to a Telemetry Point and set its Blocks, Rows and Cols. Press Add Display Segment for each further reading. The counter shows how many of the 64 blocks are still free.
5. Pick the screen and coloursChoose a Screen Size, a colour for each segment and a Widget Color. Save, then press DONE.

Settings

What it shows

Segments are placed left to right, top to bottom, each in the first free space where it fits. Each one shows the latest value written to its Telemetry Point:

Small segments show only the value, so nothing gets cut off. The bar along the top shows the screen resolution, the time and the Wi-Fi symbol.

Send data from your device

Write each reading to its segment’s Telemetry Point with SME.publish(), the same way as for a Value widget. Numbers and text both work. The examples use TP0, TP1 and TP2, like the simulation.

SME.publish(TP0, temperature);   // double, e.g. 24.6
SME.publish(TP1, humidity);      // integer, e.g. 58
SME.publish(TP2, "Pump ON");     // string

unsigned long lastSend = 0;
bool pumpOn = false;

void loop()
{
  SME.run();

  if (millis() - lastSend >= 2000) {   // every 2 seconds
    lastSend = millis();
    SME.publish(TP0, readTemperature());   // your sensor code
    SME.publish(TP1, readHumidity());
    SME.publish(TP2, pumpOn ? "Pump ON" : "Pump OFF");
  }
}

#define DASHBOARD_ID     "PROJ-XXXXXXXX"
#define DEVICE_TOKEN     "SME-XXXX-XXXX-XXXX"
#define FIRMWARE_VERSION "1.0.0"
#define WIFI_SSID        "your_wifi"
#define WIFI_PASS        "your_pass"

#include <SMEIoT.h>

#define PUMP_PIN 5

unsigned long lastSend = 0;
bool pumpOn = false;

float readTemperature() { return 24.6; }   // your sensor code
int   readHumidity()    { return 58; }     // your sensor code

void setup()
{
  Serial.begin(115200);
  pinMode(PUMP_PIN, OUTPUT);
  SME.begin(DASHBOARD_ID, DEVICE_TOKEN, FIRMWARE_VERSION,
            WIFI_SSID, WIFI_PASS);
}

void loop()
{
  SME.run();                    // keeps the link alive

  if (millis() - lastSend >= 2000) {   // every 2 seconds
    lastSend = millis();
    pumpOn = digitalRead(PUMP_PIN);
    SME.publish(TP0, readTemperature());               // double
    SME.publish(TP1, readHumidity());                  // integer
    SME.publish(TP2, pumpOn ? "Pump ON" : "Pump OFF"); // string
  }
}

These are snippets. Your sketch also needs #include <SMEIoT.h>, SME.begin(...) in setup() and SME.run() in loop(). The full sketch tab shows a complete example; see the SDK quick start for more.

Related widgets