DisplayMenu: A new library to quickly manage and interact with items on a screen.. share your thoughts!

1

Hi all, I wanted to share a library I have been working on.
it is used to easily implement complex screen menus with different selectable items. Let me share a demonstration:

https://photos.app.goo.gl/CdTQ5VrrD3jAA7cP8

*please let me know if the video link works…

In this example, we see there are only 2 items on the menu: 1 that lets us change the nb of dancers on the screen, and the other that writes “x dancers dancing!” on the screen. This is a simple demo to show that using my library you can create items that store values for your projects ex: motor speed, clock time, … and other items that will trigger an action, ex: lauch the motors, start running, … The items are called DisplayWidget in this library. you can create them and link them to values you want to control, or functions you want to call when the widget is clicked by the user. Here, I am only using 2 buttons. 1 is the down key, and the other is enter key, to select the items (widgets)

I wanted this library to let you manage complex menus, so it is easy to add more items to your screen. That is the code to run the simple demo shown above. It was created with a ESP32 and TFT_eSPI library for the screen, and another custom library (“tact”) for the buttons that let me navigate on the screen, but it can be used with any arduino or any screen, and a simple digital read to check the button states. Tell me what you think!!!

#include <Arduino.h>
#include "TFT_eSPI.h"
#include "DisplayMenu.h"
#include "DisplayWidget.h"

#include "tact.h"

#define NEXT_BUTTON_PIN 0
#define ENTER_BUTTON_PIN 36
#define DANCE_MENU_WIDGET_NB 2

// Global objects
tact nextButton = tact(NEXT_BUTTON_PIN);
tact enterButton = tact(ENTER_BUTTON_PIN);

DisplayMenu menu;

TFT_eSPI tft;

// screen menu widgets
int nbDancers = 1;

void startDancing() {
  tft.setCursor(0, 150);
  tft.setTextColor(TFT_WHITE, menu.getBackgroundColor());
  tft.print(nbDancers);
  tft.println(" dancers dancing!");
  delay(1000);
  tft.fillScreen(menu.getBackgroundColor());
}

DisplayWidget danceMenuWidgets[DANCE_MENU_WIDGET_NB] = {
  DisplayWidget(&nbDancers, 1, 20),   //will let the user set the value from 1 to 20
  DisplayWidget(startDancing)
};

// menu printing function
void printDancingPage() {
  menu.startPrint();
  tft.setTextColor(menu.getWidgetColor(), menu.getBackgroundColor());

  tft.setCursor(0, 50);
  tft.print("Dancers: ");
  tft.print(nbDancers);
  tft.println("  "); 

  menu.nextPrint();
  tft.setTextColor(menu.getWidgetColor(), menu.getBackgroundColor());

  tft.println("Dance!");
}

// main
void setup() {
  // initialize menu
  menu.setColors(TFT_WHITE, TFT_MAGENTA, TFT_RED, TFT_BLACK);
  menu.setDisplayedWidgets(danceMenuWidgets, DANCE_MENU_WIDGET_NB);

  // initialize screen
  tft.init();
  tft.setRotation(0);
  tft.fillScreen(menu.getBackgroundColor());
  tft.setTextWrap(true);  
  tft.setTextSize(3);

  printDancingPage();
}

void loop() {

  // check if buttons were pressed
  if (enterButton.poll() == DFLT_TACT_SHORT_PRESS_CODE) { 
    menu.activateTarget();
  }

  if (nextButton.poll() == DFLT_TACT_SHORT_PRESS_CODE) {
      menu.moveDown();
  }

  // reprint menu page if it needs to be updated
  if(menu.isChanged()) 
  {
    printDancingPage();
  }
}
1 Like