Skip to content

Toggling On-Screen LEDs Using Arduino Button

Introduction

Arduino's are very common microcontroller boards used to study and design programmable electronics. It is often used with multiple peripherals such as buttons, sliders, sensors and motors.

Together with a TIMI acting as a small fancy display, Arduino boards become a lot more powerful and interesting to use in prototyping.

This project showcases a TIMI-96 module controlled by an Arduino Uno to turn multiple onscreen LEDs ON and OFF based on button press.

Requirements

To proceed with the project, the following are required.

Hardware

  • TIMI-96
  • Mates Programmer
  • USB Type A to microUSB cable (for the Mates Programmer)
  • USB Type A to Type B cable (for the Arduino, replace as necessary)
  • Connecting Wires
  • Arduino Uno
  • Breadboard
  • Tact Switch

Software

Graphics Design

Step 1: Open Mates Studio and create a Commander project for TIMI-96 with Reversed Landscape orientation

TIMI-96

Select Commander

Step 2: Browse the library for appropriate page designs. For this project, 8 x Flat Round Led page under Notifications category was used.

Browse Library

8 x Flat Round Led

Step 3: After finalizing the design, connect TIMI-96 to your computer

Connect TIMI-96

Step 4: Upload the project to the appropriate COM port

Select Port

Project Upload

Step 5: When prompted, click Proceed to continue with upload.

Date and Time Proceed

Note

It is recommended that the graphics design is finalized before moving to the next steps when working on a project

Programming the Arduino

Step 1: Install the MatesController library using Arduino’s Library Manager.

Library Manager

Step 2: Include MatesController.h to your project.

#include "MatesController.h"

Step 3: Create a MatesController instance named mates.

MatesController mates = MatesController(Serial);

This will initialize the MatesController instance to the default reset pin 4 using a LOW pulse.

Step 4: (Optional) Create a function for toggling the built-in LED of the Arduino board. This can be used for debugging or showing errors if the Serial monitor can’t be used.

int errLedStatus = LOW;
void ErrorLed_Toggle() {
  errLedStatus = ~errLedStatus;
  digitalWrite(LED_BUILTIN, errLedStatus);
}

Step 5: (Optional) At the beginning of the setup function, set the built-in LED pin to OUTPUT and set it to LOW.

pinMode(LED_BUILTIN, OUTPUT);
digitalWrite(LED_BUILTIN, errLedStatus);

Step 6: To start using the MatesController instance, use the begin function

mates.begin();

This will initialize the Serial UART at the default baudrate of 9600

Step 7: (Optional) The begin function can be enclosed in an if condition to handle initialization errors.

if (!mates.begin()) {
  // Display didn't send ready signal in time
  while (1) {
    ErrorLed_Toggle();
    delay(100);
  }
}

Step 8: Declare the pins used for the tact switch and the debounce delay

#define BUTTON_PIN      7
#define DEBOUNCE_DELAY  50

Step 9: Set the pin to input pullup mode

pinMode(BUTTON_PIN, INPUT_PULLUP);

Step 10: In the loop function, the values are updated and sent to TIMI as necessary.

void loop() {
  static uint8_t ledOff = 0;
  static uint8_t ledOn = 1;
  static int buttonState;             // the current reading from the input pin
  static int lastButtonState = LOW;   // the previous reading from the input pin
  unsigned long lastDebounceTime = 0; // the last time the output pin was toggled

  int reading = digitalRead(BUTTON_PIN);

  if (reading != lastButtonState) {
    lastDebounceTime = millis();
  }

  if ((millis() - lastDebounceTime) > DEBOUNCE_DELAY) {
    if (reading != buttonState) {
      buttonState = reading;
      if (buttonState == LOW) {
        mates.setWidgetValue(MATES_MEDIA_LED, ledOff, 0);
        mates.setWidgetValue(MATES_MEDIA_LED, ledOn, 1);
        ledOff = ledOn;
        ledOn++;
        ledOn %= 8;
      }
    }
  }
}

As shown, the code checks for a valid button press. If a press is detected, the next LED is turned ON and the previous LED is turned OFF.

Step 11: Lastly, ensure that the LED is initially turned ON at the end of the setup function.

mates.setWidgetValue(MATES_MEDIA_LED, 0, 1);

Running the Project

After designing the user interface for TIMI and writing code for the Arduino and programming them, it is time to connect the devices together. Follow the diagram below for the connection between TIMI and Arduino.

Arduino TIMI-96

Finally, supply power to the Arduino and observe the behavior of the project.

Downloadable Resources