M5ez, a complete interface builder system for the M5Stack as an Arduino library. Extremely easy to use.

CrazyHorse80

@Rop Hi! Could you consider some changes requests to M5ez?

I have some problem with Geo-IP timezone auto-select, it always timeouts and it's only executed once: could you, please, modify this function to retry if timeout occurs?
Could you make the actual header to be a "system" header (with title, WiFi and clock widgets) and add a "user" header so the user could put more widgets in it? I ask for this one 'cause I'm planning an app that will require to display few widgets and I have no pixels to show them all. (In case you're not planning to do that, I'll simply add my code to be displayed in the canvas space with a function of my own).
And now a more personal request: could you please make a dummy widget complete with all the code to associate a settings menu (with enable / disable widget setting) and the draw code. It'll be perfect if it will simply display a variable value and update every time the minute changes. I've tried to modify the clock widget but I didn't have success with that.

Thank you in advance!

Rop

I have some problem with Geo-IP timezone auto-select, it always timeouts and it's only executed once: could you, please, modify this function to retry if timeout occurs?

Do you also have problems if you lookup the timezone from code (like with MyTZ.setlocation("Europe/Amsterdam")? Retries (and periodic refreshes) of timezone data are planned.

Could you make the actual header to be a "system" header (with title, WiFi and clock widgets) and add a "user" header so the user could put more widgets in it? I ask for this one 'cause I'm planning an app that will require to display few widgets and I have no pixels to show them all. (In case you're not planning to do that, I'll simply add my code to be displayed in the canvas space with a function of my own).

You could remove the header widgets and create new ones if you want to use the existing space on the display. Or you can write your own code to create your own header on the canvas either in place of or below the existing header. I do not plan to include a second header line.

And now a more personal request: could you please make a dummy widget complete with all the code to associate a settings menu (with enable / disable widget setting) and the draw code. It'll be perfect if it will simply display a variable value and update every time the minute changes. I've tried to modify the clock widget but I didn't have success with that.

I'm not sure I could do something that would be more informative than the clock code from M5ez.cpp. Let's walk through:

If the clock is set to be displayed, ezClock::restart() calculates the width of the widget (clock uses a fixed-width font) and does:

ez.header.insert(RIGHTMOST, "clock", width, ez.clock.draw);

The draw routine that this points to simply clears the area and draws the text. Note that this gets x-position and width from the header code :

void ezClock::draw(uint16_t x, uint16_t w) {
	if (_starting) return;
	m5.lcd.fillRect(x, 0, w, ez.theme->header_height, ez.theme->header_bgcolor);
	ez.setFont(ez.theme->clock_font);
	m5.lcd.setTextColor(ez.theme->header_fgcolor);
	m5.lcd.setTextDatum(TL_DATUM);
	m5.lcd.drawString(tz.dateTime(_datetime), x + ez.theme->header_hmargin, ez.theme->header_tmargin + 2);
}

This redraw routine is automatically called by the header code every time the header is redrawn and additionally every minute — from ezClock::loop() — which simply says:

if (_on && ezt::minuteChanged()) ez.header.draw("clock");

The clock header item can be removed with

ez.header.remove("clock");`

Hope this helps, otherwise you'll have to tell me what is not working for you, or (better yet) show code that you are trying to make work.

CrazyHorse80

@rop 在 M5ez, a complete interface builder system for the M5Stack as an Arduino library. Extremely easy to use. 中说：

@crazyhorse80
Do you also have problems if you lookup the timezone from code (like with MyTZ.setlocation("Europe/Amsterdam")?

I tried to put this line MyTZ.setlocation("Europe/Rome") in my setup() function, but I get an error:

error: 'MyTZ' was not declared in this scope

I also tried to setup TZ in the clock menu at runtime but I can't find the / character on onscreen keyboard...

I'm not sure I could do something that would be more informative than the clock code from M5ez.cpp. Let's walk through:

[...]

Hope this helps, otherwise you'll have to tell me what is not working for you, or (better yet) show code that you are trying to make work.

I think I understood how the clock widget works, but I can't replicate it with my own widget code, here it is:
this is on a tab of its own named Widgets:

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//
//   B B A N D
//
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

class ezBBand {
  public:
    static void begin();
    static void restart();
    static void menu();
    static uint16_t loop();
    static void clear();
    static void draw(uint16_t x, uint16_t w);
  private:
    static void _writePrefs();
    static bool _on;
    static bool _starting;
};

  bool ezBBand::_on;
  bool ezBBand::_starting = true;

  void ezBBand::begin() {
    Preferences prefs;
    prefs.begin("M5ez", true);  // read-only
    _on = prefs.getBool("BBand_on", true);
    prefs.end();
    ez.settings.menuObj.addItem("BBand settings", ezBBand.menu);
    ez.addEvent(ezBBand.loop);
    ezBBand.restart();
  }
  
  void ezBBand::restart() {
    ez.header.remove("BBand");
    uint8_t length;
    if (_on) {
      length = 2;
      ez.setFont(ez.theme->clock_font);
      uint8_t width = length * m5.lcd.textWidth("F") + ez.theme->header_hmargin * 2;
      ez.header.insert(ez.header.position("title") + 2, "BBand", width, ezBBand.draw);
    }
  }
  
  void ezBBand::menu() {
    bool on_orig = _on;
    while(true) {
      ezMenu bbandmenu("BBand settings");
      bbandmenu.txtSmall();
      bbandmenu.buttons("up#Back#select##down#");
      bbandmenu.addItem("on|Display BBand\t" + (String)(_on ? "on" : "off"));
      if (_on) {
      }
      switch (bbandmenu.runOnce()) {
        case 1:
          _on = !_on;
          ezBBand.restart();
          break;
        case 0:
          if (_on != on_orig) {
            _writePrefs();
          }
          return;
      }
    }
  }
  
  uint16_t ezBBand::loop() {
    ezt::events();
    if (_starting && timeStatus() != timeNotSet) {
      _starting = false;
      ez.header.draw("BBand");
    } else {
      if (_on && ezt::minuteChanged()) ez.header.draw("BBand");
    }
    return 250;
  }
  
  void ezBBand::draw(uint16_t x, uint16_t w) {
    if (_starting) return;
    m5.lcd.fillRect(x, 0, w, ez.theme->header_height, ez.theme->header_bgcolor);
    ez.setFont(ez.theme->clock_font);
    m5.lcd.setTextColor(ez.theme->header_fgcolor);
    m5.lcd.setTextDatum(TL_DATUM);
    m5.lcd.drawString("Fx", x + ez.theme->header_hmargin, ez.theme->header_tmargin + 2);
  }
  
  void ezBBand::_writePrefs() {
    Preferences prefs;
    prefs.begin("M5ez");
    prefs.putBool("BBand_on", _on);
    prefs.end();
  }

It should display the string Fx between WiFi and clock widgets (I'll modify that to display a string from a variable if I get it to work).
In my main tab (M5remDisplay) I put this:
ezBBand BBand; as a global variable declaration and BBand.begin(); in my setup() function.

This is a list of errors I got:

M5remDisplay:16:1: error: 'ezBBand' does not name a type

 ezBBand BBand;

 ^

C:\Users\Utente\AppData\Local\Temp\arduino_modified_sketch_422641\M5remDisplay.ino: In function 'void setup()':

M5remDisplay:58:3: error: 'BBand' was not declared in this scope

   BBand.begin();

   ^

Z:\_PVControl\M5remDisplay\Widgets.ino: In static member function 'static void ezBBand::begin()':

Widgets:30:58: error: expected primary-expression before '.' token

     ez.settings.menuObj.addItem("BBand settings", ezBBand.menu);

                                                          ^

Widgets:31:24: error: expected primary-expression before '.' token

     ez.addEvent(ezBBand.loop);

                        ^

Widgets:32:12: error: expected unqualified-id before '.' token

     ezBBand.restart();

            ^

Z:\_PVControl\M5remDisplay\Widgets.ino: In static member function 'static void ezBBand::restart()':

Widgets:42:80: error: expected primary-expression before '.' token

       ez.header.insert(ez.header.position("title") + 2, "BBand", width, ezBBand.draw);

                                                                                ^

Z:\_PVControl\M5remDisplay\Widgets.ino: In static member function 'static void ezBBand::menu()':

Widgets:58:18: error: expected unqualified-id before '.' token

           ezBBand.restart();

                  ^

Thank you for helping me and having so much patience...

Rop

@crazyhorse80

I tried to put this line MyTZ.setlocation("Europe/Rome") in my setup() function, but I get an error:
error: 'MyTZ' was not declared in this scope

MyTZ has to be declared first. If you put Timezone MyTZ outside of any functions (in the "global scope") it should work.

More generally: using objects from my libraries works because they are declared in the ezTime.h and M5ez.h files and then implemented in the respective .cpp files. I would stay away from creating your own objects at this point. You don't need them: simple functions within your own sketch would work and are easier to understand. Simply put the header.add in your setup() (after ez.begin()), and point to a regular void function that takes two uint16_t parameters for drawing the widget.

(If you do want to use a class, you'll have to make it static, because otherwise you cannot point to the draw function. But really, just use a regular function.)

CrazyHorse80

@rop I thought MyTZ object was already declared in your library, my fault.
Thank you for your explanation about objects. I misunderstood your previous directions and I thought I must use them to the widget to work. It seems it was a lot easier to do than that! The widgets I need to display are really simple, just a small text or icon reflecting the state of some variable's value, so I think a regular function will work. I'll try one more time. ;)

BrianR

@rop, M5ez is awesome - thank you for the enormous amount of time you put into it!

I'm trying to use Blynk to receive events from another board. I have gotten events to show on the M5 in a simple standalone program, so I know it "works". Within M5ez, I believe I just need to call Blynk.run() with the ez.addEvent function, as Blynk.run needs to run often as possible - in most of my projects it's usually the only thing in the main loop, but I'm unsure of how/where to use the ez.addEvent function. There aren't any examples of ez.addEvent in the Demo or any of the other examples included with the library. Any help on syntax and where to put that statement?

Thanks again for your time!!!

Rop

@brianr It depends on the rest of your program, but normally you would place it in setup(). Then make sure the event function returns 1 to run as often as possible. What that means is that you cannot provide Blynk.run() directly but must make your own function that runs Blynk.run() and returns a uint16_t of value 1

This needs to be more convenient, I know. addEvent() needs another go-over, better documentation and examples, will put that on the list.

BrianR

Ah yes, success! I added ez.addEvent(run_Blynk); to the setup(), and then created a function down below, after the loop, that looks like the following. It's worth noting that I'm using the M5 as a "receiver" from a bridge, thus the blynk_write(V1) statement.

uint16_t run_Blynk() {
  Blynk.run();
  return 1;
}

BLYNK_WRITE(V1){
    eventData = param.asString();
}

That did the trick, Blynk connects and stays connected. Now trying to figure out how to display the dynamic data from Blynk on the canvas. If I figure this all out, I'll write a short demo in a new topic for others, as I haven't seen many examples of actual use of M5ez, other than the demo program, but most projects are more than just menus, they have to display something... Again, @rop, excellent work, and thanks again so much!

bobolink

I really like M5ez so I gave it its own core. Justified it by saying that’s real MVC architecture! Real Computer Science stuff.
/*

GLOBAL INFO
core 0 is the communications processor.
Uses the ESP-NOW protocol
on the 2.4 GHz radio
This process runs as a task created
on core 1
core 1 is the UI processor.
Maintains the M5Stack M5ez LCD menu
Runs Arduino setup() and loop()

*/
Use RTOS semaphores when accessing the global vars to/from the local versions.

macle

Hello,

Is there a chance to change font (or size) of ez.header ?

Regards, M

mawg

Looks great! Does it play well with PlatformIO ?

m5stack

Great Job

ajb2k3

@Rop is M5EZ supporting the Stick C?
I have had a query from the Facebook group.

Rop

@ajb2k3

No it does not: it only works on the 3-Button M5Stack devices.

ajb2k3

@rop Any intention of a stick version?

asalazaro

@brianr @rop Hey guys, thanks a lot for this very elegant solution, I´m using the ezMenu library in a program where I had installed Blynk working very well but everytime when I activated the ezMenu with mainmenu.run(); my Blynk app was very unstable, with the trick of ez.addEvent(run_Blynk) in the setup() function now is working very well, thanks for the help

hobo

Hi,
great project.
It is possible to use the face encoder for up, down and enter?
if yes, you have an example?
this will be great

hobo

This post is deleted!

GSAL

Hi,
It is great using the M5EZ!
But I want / need to give my Core a static IP address. Is there an easy way to alter the Wifi settings menu and add the option of adding static ip? Maybe In such a way it is stored in the preferences?

kr, G

kilam

Hi,
I wanted to know if there is a way to use faces keyboard in the menus (i.e. I have the calculator keyboard and instead of using the three buttons to go up and down and select, I want to use the keys on the face, for example for selecting first line I will type on the key '1' and so on).
and if it is possible, can you give me an example of code using it.
Thanks