What GUI library do you use?

Hi all,

I'm working on a GUI library for Arduino, is this something useful? So far I have the basics of input, layout and rendering but only one interactive control - a button. What controls are most useful in an arduino GUI? Are they mostly readonly, like a progress bar or are they often interactive like buttons? Of course a general purpose GUI library should have both but I am looking for feedback to know where to invest effort first if at all. So far automatic layout using a StackPanel control is the coolest feature. It supports proportional of fixed size, alignment, and minmax constraints, padding for the panels and margins for controls to follow soon.

Try the demo please maybe you have some ideas to share. GUI Alpha Demo 2 - Wokwi ESP32, STM32, Arduino Simulator

This uses Adafruit_GFX, so in theory should work with any display they support. But it uses an abstraction layer so it's possible to use a different graphics library. Only supports one display. Is there a need to support independent multiple displays in the sense that each will have independed user interface? Thanks for guidance!

The left screen is touch, the right is regular, use mouse or buttons to navigate and click...

I use the one that the most members can run my examples on.
It came free but this 2.x version is not so good or fast.

Which library is it?

The Arduino IDE is all that's needed for my examples.
My button is a jumper that I ground because almost anyone with an Arduino has a jumper. Get it? What MOST members can run!

It would be nice if the example had rounded buttons.

1 Like

This looks interesting, but would be cool to have buttons/areas with user defined pixmaps. While it's specifically for a Teensy-based RC transmitter, I made a similar GUI sub-library that uses pixmaps.

Here's a video of it in use

1 Like

Wow, awesome project!

Currently, if someone wanted to use this library today, they woud implement a class derived from BControl which handles mouse and focus and they will override draw() and provide their own visualization. So basically today I only have a simple button, but it's already usable if one wants to create their own controls. I was going to add bitmaps once I have checkboxes and sliders, but maybe it's more useful... Thanks for the example code and the video - an inspiring thing!

1 Like

Thanks for the tip! Easy to do with Adafruit_GFX library

1 Like

It would also be nice if the button have an inside color.
Or only when clicked/pressed.

1 Like

This is more intensive to draw, for that I need to optimize my drawing loop so it doesn't redraw the entire tree each time.. plan to do it this weekend.

I'm targeting lower end devices, but not sure if that's the right target group...

1 Like

I don't think it's useful for AVR Arduinos. Even a CLI tends to eat up too much memory, and we're already faced with a FAQ being "my sketch is very short, but still runs low on memory. I'm only using the GFX display and SPI libraries..."

1 Like

Buuuut they're REALLY little desktop PC's needing fake Winblows!

Yes I think the GFX library takes most of it, so UNO is not really usable, but MEGA and more powerful boards should be ok

I understand that all your projects are trivial and don't need a UI but a more advanced project may need one.

1 Like

That's because you think that my examples for beginners are projects for anyone but beginners.

And it's all what you have so much trouble with, you need to rely on a system to begin to achieve the same results on Slower and Fatter.

Go ahead, prop your ego.

There were a lot of nice “widgets”* with the library for the micro view .
Guess these might work with other devices using oled and 328 ?

  • gauges etc

Noted! Thank you, please post if you have an example of what one might look like, I was going to start with a progress bar to serve the same purpose, because it seems easier to implement :slight_smile:

Google micro view widgets .

There is also of course Nextion

1 Like

Got it!

image

Thanks! That's interesting.. I am not going that far as to build a visual editor like they have.. But I implemented a stack layout panel, that simplifies layout.. for example this is how to setup a layout as on the screenshot:

#include "Adafruit_GFX.h"
#include "Adafruit_ILI9341.h"
#include <Adafruit_FT6206.h>
#include <Focuspocus.h>

// difine a simple static view
namespace MyView {
  BButton buttonYes;
  BButton buttonNo;
  BView* confirmContent[] = { &buttonYes, &buttonNo }; 
  BStackPanel confirm(confirmContent);

  BButton buttonOk;
  BButton buttonCancel;
  BButton buttonNone;
  BView* rootContent[] = { &buttonOk, &buttonCancel, &confirm, &buttonNone };
  BStackPanel root(rootContent);

  void init() {
    root.orientation = BStackPanel::vertical;
    root.verticalAlignment = center;
    root.horizontalAlignment = right;
    root.spacing = 10;

    buttonOk.height = 30;
    buttonOk.width = 50;
    buttonOk.text = "OK";
    buttonOk.fontSize = 3;

    buttonCancel.text = "Cancel";

    confirm.spacing = 10;
    confirm.padding(10);

    buttonYes.text = "Yes";
    buttonNo.text = "No";

    buttonNone.text = "It's all auto positioned!"
    
  }
}

// touch and display drivers
Adafruit_FT6206 ctp = Adafruit_FT6206();
Adafruit_ILI9341 tft = Adafruit_ILI9341(TFT_CS, TFT_DC);

// use appropriate adafruit display driver
BGraphics _g(tft /* Adafruit_GFX */);

// stack of views to display
BView* _stack[] = { &MyView::root };

void setup() {
  // initialize view
  MyView::init();
  // initialize library
  setupFocuspocus(_g, _stack);
}

void loop() {
  // convert touch input to virtual mouse events
  if (ctp.touched()) {
    TS_Point pt = ctp.getPoint();
    pt.x = tft.width() - pt.x;
    pt.y = tft.height() - pt.y;
    if (pt.z == 0) {
      BMouse::update(false);
    }
    else {
      BMouse::update(pt.x, pt.y, true);
    }
  }
  else {
    BMouse::update(false);
  } 

  // a chance to layout and/or draw 
  focuspocus();
}

Implemented a scrollbar and a text label.. Wondering if a "GUI core" is something useful, meaning the users should make their own controls with the library, which solves the basics for them:

  • Architecture and class hierarchy
  • Measure, Layout and render passes
  • Input from virtual mouse/keyboard and event delegates
  • Focus management and navigation
  • Screen/view coordinate mapping and theming
  • Support for multiple independent displays

Basically all that's left is to create more controls.. Wondering if leaving the library as the "GUI core" on which to build is a viable strategy or whether the library needs to provide controls out of the box to be useful...