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

Rop

Just released 1.0.0 as I think it's pretty stable. Also I applied to have M5ez included in the Arduino library manager.

Rop

I just released version 1.1.0 of M5ez. It adds ez.textBox to display or edit longer word-wrapped texts. ez.msgBox now wraps and justifies, so you don't have to figure out how much fits on a line. And there's a dark theme added to the themes directory.

bobolink

@rop
Rop,
Great work. Professional appearance.
Can you offer any guidelines for preparing jpg images as a C array?
I’ve tried various on-line and command line converters but no image appears.
Thanks

Rop

@bobolink I haven't tried to convert any images myself, I have just taken the ones from Calin's code. I have been busy getting the new version out. I'll have a look at possibly creating a tool (or even an online tool) for this.

Rop

Just released: version 1.2.0 of M5ez.

It adds the ezProgressBar class to (you guessed it) show a progress bar while also offering all the word-wrapping niceties of ez.msgBox.
ez.update lets you specify an https URL to download a new binary from. And this wouldn't be M5ez if all of that wasn't extremely easy. the /tools directory of the repository has a shell script that people here might find handy even if they don't use M5ez. (But why on earth would you not use M5ez? :) )
The script, get_cert, takes an https URL as an argument. It will follow any redirects, output the resulting "effective URL", get the certificate chain, take the last cert from that, and make an include file that holds the root cert, ready to be used in your sketch. Below is an example.

your_prompt$ ./get_cert https://github.com/ropg/M5ez/blob/master/compiled_binaries/M5ez-demo.bin?raw=true
The effective download URL (after resolving forwards) is:
    https://raw.githubusercontent.com/ropg/M5ez/master/compiled_binaries/M5ez-demo.bin

The root certificate include file is saved as:
    raw_githubusercontent_com.h

and then that file would contain:

// This is the root certificate include file for raw.githubusercontent.com
// as obtained by the get_cert script on: Wed Aug 15 21:34:20 CEST 2018
//
//
// Certificate info:
//     issuer= /C=US/O=DigiCert Inc/OU=www.digicert.com/CN=DigiCert High Assurance EV Root CA
//     notAfter=Oct 22 12:00:00 2028 GMT
//

const char* root_cert = \
  "-----BEGIN CERTIFICATE-----\n" \
  "MIIEsTCCA5mgAwIBAgIQBOHnpNxc8vNtwCtCuF0VnzANBgkqhkiG9w0BAQsFADBs\n" \
  "MQswCQYDVQQGEwJVUzEVMBMGA1UEChMMRGlnaUNlcnQgSW5jMRkwFwYDVQQLExB3\n" \
  "d3cuZGlnaWNlcnQuY29tMSswKQYDVQQDEyJEaWdpQ2VydCBIaWdoIEFzc3VyYW5j\n" \
  "ZSBFViBSb290IENBMB4XDTEzMTAyMjEyMDAwMFoXDTI4MTAyMjEyMDAwMFowcDEL\n" \
  "MAkGA1UEBhMCVVMxFTATBgNVBAoTDERpZ2lDZXJ0IEluYzEZMBcGA1UECxMQd3d3\n" \
  "LmRpZ2ljZXJ0LmNvbTEvMC0GA1UEAxMmRGlnaUNlcnQgU0hBMiBIaWdoIEFzc3Vy\n" \
  "YW5jZSBTZXJ2ZXIgQ0EwggEiMA0GCSqGSIb3DQEBAQUAA4IBDwAwggEKAoIBAQC2\n" \
  "4C/CJAbIbQRf1+8KZAayfSImZRauQkCbztyfn3YHPsMwVYcZuU+UDlqUH1VWtMIC\n" \
  "Kq/QmO4LQNfE0DtyyBSe75CxEamu0si4QzrZCwvV1ZX1QK/IHe1NnF9Xt4ZQaJn1\n" \
  "itrSxwUfqJfJ3KSxgoQtxq2lnMcZgqaFD15EWCo3j/018QsIJzJa9buLnqS9UdAn\n" \
  "4t07QjOjBSjEuyjMmqwrIw14xnvmXnG3Sj4I+4G3FhahnSMSTeXXkgisdaScus0X\n" \
  "sh5ENWV/UyU50RwKmmMbGZJ0aAo3wsJSSMs5WqK24V3B3aAguCGikyZvFEohQcft\n" \
  "bZvySC/zA/WiaJJTL17jAgMBAAGjggFJMIIBRTASBgNVHRMBAf8ECDAGAQH/AgEA\n" \
  "MA4GA1UdDwEB/wQEAwIBhjAdBgNVHSUEFjAUBggrBgEFBQcDAQYIKwYBBQUHAwIw\n" \
  "NAYIKwYBBQUHAQEEKDAmMCQGCCsGAQUFBzABhhhodHRwOi8vb2NzcC5kaWdpY2Vy\n" \
  "dC5jb20wSwYDVR0fBEQwQjBAoD6gPIY6aHR0cDovL2NybDQuZGlnaWNlcnQuY29t\n" \
  "L0RpZ2lDZXJ0SGlnaEFzc3VyYW5jZUVWUm9vdENBLmNybDA9BgNVHSAENjA0MDIG\n" \
  "BFUdIAAwKjAoBggrBgEFBQcCARYcaHR0cHM6Ly93d3cuZGlnaWNlcnQuY29tL0NQ\n" \
  "UzAdBgNVHQ4EFgQUUWj/kK8CB3U8zNllZGKiErhZcjswHwYDVR0jBBgwFoAUsT7D\n" \
  "aQP4v0cB1JgmGggC72NkK8MwDQYJKoZIhvcNAQELBQADggEBABiKlYkD5m3fXPwd\n" \
  "aOpKj4PWUS+Na0QWnqxj9dJubISZi6qBcYRb7TROsLd5kinMLYBq8I4g4Xmk/gNH\n" \
  "E+r1hspZcX30BJZr01lYPf7TMSVcGDiEo+afgv2MW5gxTs14nhr9hctJqvIni5ly\n" \
  "/D6q1UEL2tU2ob8cbkdJf17ZSHwD2f2LSaCYJkJA69aSEaRkCldUxPUd1gJea6zu\n" \
  "xICaEnL6VpPX/78whQYwvwt/Tv9XBZ0k7YXDK/umdaisLRbvfXknsuvCnQsH6qqF\n" \
  "0wGjIChBWUMo0oHjqvbsezt3tkBigAVBRQHvFwY+3sAzm2fTYS5yh+Rp/BIAV0Ae\n" \
  "cPUeybQ=\n" \
  "-----END CERTIFICATE-----\n";

Does that make life super ez or what?

If you want, please check out the project github as well as the step-by-step description of how to use get_cert and ez.update. The OTA functionality is shown in the project demo app downloading via https from github and everything is documented rather nicely if I may say so myself. :)

Calin

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

@bobolink I haven't tried to convert any images myself, I have just taken the ones from Calin's code. I have been busy getting the new version out. I'll have a look at possibly creating a tool (or even an online tool) for this.

Open the file on HexWorkshop -> CTRL+A -> Edit -> Copy As -> C Source
Open the header file -> Paste :)

Rop

@bobolink There is now an include_file script (here) in the /tools directory of the M5ez repository. If you get it, make it executable with chmod a+x include_file and run it with a file as an argument, like:

your_prompt$ ./include_file settings.jpg 
Converting input file:
    settings.jpg
Creating include file:
    settings_jpg.h

That include file then contains:

#pragma once

//
// Include this file to use settings.jpg (1087 bytes) in your sketch.
//
// File created on Thu Aug 16 11:39:50 CEST 2018 
// Made by the include_file script that is part of
// "M5ez: the easiest way to program on M5Stack."
// https://github.com/ropg/M5ez
//

const char settings_jpg[] PROGMEM = {
    0xff, 0xd8, 0xff, 0xe0, 0x00, 0x10, 0x4a, 0x46, 0x49, 0x46, 0x00, 0x01, 0x01, 0x00,
    0x00, 0x60, 0x00, 0x60, 0x00, 0x00, 0xff, 0xe1, 0x00, 0x8c, 0x45, 0x78, 0x69, 0x66,
[...] snip [...]
    0x35, 0xf4, 0x0a, 0x6e, 0x75, 0x6b, 0x92, 0xab, 0xf6, 0x8b, 0x8d, 0x91, 0x79, 0x3e,
    0x50, 0x8e, 0x30, 0xbb, 0x49, 0x90, 0x03, 0xff, 0xd9
};

Once this file is included, you can then provide the settings_jpg as the first argument to ez.addItem if you are adding an item to an image menu.

bobolink

@rop Thank you. I’ll check it out.
I think this is HexWorkshop mentioned above. .EXE for Windows.

janseta

Avesom work @Rop .
Still waiting for NTC/RTC time issue... ;-)

Rop

@janseta I am loosely thinking about adding:

NTP time and also an inactivity power-off
A settings menu with
- link to the wifi menu
- NTP on/off, which server(s) and sync interval
  - clock display in header on/off
- display backlight brightness
- FACES keyboard support on/off
- Setting up the M5Stack peripherals (which GPIOs etc)

But everything I add adds code size. So there probably there will be a few more code blocks like the present #ifndef M5EZ_WITHOUT_WIFI to allow people to not compile what they do not need.

But before I get to this I need to figure out why the .setTimeout method does not seem to affect the https transfers for the firmware because they timeout way too often.

Everyone: please feel free to suggest new features or tell me what you think about the proposed ones above.

bobolink

@rop Finally got around to trying the image converter script--works great. Thanks again.
I have a windows 7 machine for HexWorkshop but ...

I need to center the image I'm using but I should be able to figure that out.

Also, new a version of your library showed up in the Arduino-IDE library check! Automagically.

Rop

@bobolink As to centering the images: I can put it anywhere, but have no easy way (that is without linking in a ton of code) to figure out how high or how wide a jpg is. I could provide an image offset in x and y, but that would probably make most sense if it was settable per image. You could always just center them in Photoshop / Gimp / etc...

BTMp

Hi @Rop

I wonder if you could help me.

I am really looking forward to using M5ez but unfortunately I'm having problems compiling the examples and I'm getting persistent errors relating to any instance of println

This is a snippet of the error messages

Arduino: 1.8.5 (Mac OS X), Board: "M5Stack-Core-ESP32, QIO, 80MHz, Minimal SPIFFS (Large APPS with OTA), 921600, Debug"

In file included from /Users//Documents/Arduino/libraries/M5ez/examples/M5ez-demo/M5ez-demo.ino:2:0:
/Users//Documents/Arduino/libraries/M5ez/src/M5ez.h:42:27: error: 'TFT_TRANSPARENT' was not declared in this scope
#define PRINT_DEFAULT_COL TFT_TRANSPARENT
^
/Users//Documents/Arduino/libraries/M5ez/src/M5ez.h:117:104: note: in expansion of macro 'PRINT_DEFAULT_COL'
void print(String text, int16_t x = -1, int16_t y = -1, const GFXfont* font = NULL, uint16_t color = PRINT_DEFAULT_COL);
^
/Users//Documents/Arduino/libraries/M5ez/src/M5ez.h:42:27: error: 'TFT_TRANSPARENT' was not declared in this scope
#define PRINT_DEFAULT_COL TFT_TRANSPARENT
^
/Users//Documents/Arduino/libraries/M5ez/src/M5ez.h:118:106: note: in expansion of macro 'PRINT_DEFAULT_COL'
void println(String text, int16_t x = -1, int16_t y = -1, const GFXfont* font = NULL, uint16_t color = PRINT_DEFAULT_COL);
^
/Users//Documents/Arduino/libraries/M5ez/examples/M5ez-demo/M5ez-demo.ino: In function 'void submenu_more()':
M5ez-demo:51: error: call to 'void M5ez::println(String, int16_t, int16_t, const GFXfont*, uint16_t)' uses the default argument for parameter 5, which is not yet defined
ez.println("");
^
M5ez-demo:52: error: call to 'void M5ez::println(String, int16_t, int16_t, const GFXfont*, uint16_t)' uses the default argument for parameter 5, which is not yet defined
ez.println("ezMenu menu("Main menu");");
^
M5ez-demo:53: error: call to 'void M5ez::println(String, int16_t, int16_t, const GFXfont*, uint16_t)' uses the default argument for parameter 5, which is not yet defined
ez.println("menu.addItem("Option 1");");
^
M5ez-demo:54: error: call to 'void M5ez::println(String, int16_t, int16_t, const GFXfont*, uint16_t)' uses the default argument for parameter 5, which is not yet defined
ez.println("menu.addItem("Option 2");");
^
M5ez-demo:55: error: call to 'void M5ez::println(String, int16_t, int16_t, const GFXfont*, uint16_t)' uses the default argument for parameter 5, which is not yet defined
ez.println("menu.addItem("Option 3");");
^
M5ez-demo:56: error: call to 'void M5ez::println(String, int16_t, int16_t, const GFXfont*, uint16_t)' uses the default argument for parameter 5, which is not yet defined
ez.println("while ( menu.run() ) {");
^
M5ez-demo:57: error: call to 'void M5ez::println(String, int16_t, int16_t, const GFXfont*, uint16_t)' uses the default argument for parameter 5, which is not yet defined
ez.println(" if (menu.pick == 1) {");
^

<<<<AND SO ON WITH THE OTHER PRINTLN CALLS >>>>>>

Looks like I'm missing something from my environment but any ideas?

Many thanks

Rop

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

'TFT_TRANSPARENT' was not declared in this scope

That is the problem here. Strange...

With me that #define comes with the M5Stack library, as part of the display driver, in the file .../Arduino/libraries/m5stack/src/utility/In_eSPI.h on line 373. I have version 0.2.2 of that library.

BTMp

So....that file wasn't actually there on my system.
A lesson in keeping up to date for me there.
All compiles now.
Really nice piece of work, especially like the OTA update functionality.
Thanks for the help.

janseta

@rop
Hi Rop,
I see you worked hard with the clock in ezTime library...
I wonder what will be the next step...

Will you merge M5ez with ezTime?
Will they be independent works?
Will M5ez call the functions of ezTime?

¯_('-')_/¯

Rop

@janseta If you have ezTime and turn on the clock (it'll be a #define), M5ez will use ezTime to show an on-screen clock. And naturally if you include it in your own sketch you can use the features of it in your own code as well. Soon...

Rop

Hi everyone,

I just released version 1.3.1 of M5ez: it can now use images from program flash, SD-card and SPIFFS in image menus.The documentation says how, and there's an example that shows it in action.

r_255

Hi Rop,

I finaly found some time and as non programmer i did manage to use your code and make it talk mqtt just copy and pasted some code from you and the pubsub lib and it does work.

Below the code i used to control my domoticz setup thru mqtt :

I had to make some adjustment to PubSubClient.h and made some values higher like socket timeout, max packet size and degraded version.
So i guess it isnt that hard after all. To make sure you understand that i am a compete noob and dont even know what language i have been copy and pasting.

Next try will be to use the ezProgressBar and let that drive the dimmer based on pb.value. But that will be a real challenge for me as copy and paste coder.

adjustment to PubSubClient.h:

#define MQTT_SOCKET_TIMEOUT 60
#define MQTT_MAX_PACKET_SIZE 1024
#define MQTT_VERSION_3_1 3

Now the code below runs fine sofar ( 15 mins or so )



#include <M5Stack.h>
#include <M5ez.h>
#include <WiFi.h>
#include <PubSubClient.h>


const char* ssid = "xxxxxx";
const char* password = "xxxxxxxxxxx";
const char* mqttServer = "xxxxxxxxxxxxxx";
const int mqttPort = 1883;
const char* mqttUser = "xxxxxxxxxxxxxxxxt";
const char* mqttPassword = "xxxxxxxxxxxxxx";

WiFiClient esp32Client;
PubSubClient client(esp32Client);
long lastMsg = 0;
char msg[50];
int value = 0;

void setup() {
Serial.begin(115200);
WiFi.begin(ssid, password);
 
while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.println("Connecting to WiFi..");
}
 
Serial.println("Connected to the WiFi network");
client.setServer(mqttServer, mqttPort);
 
  while (!client.connected()) {
    Serial.println("Connecting to MQTT...");
 
    if (client.connect("esp32Client", mqttUser, mqttPassword )) {
 
      Serial.println("connected");
 
    } else {
 
      Serial.print("failed with state ");
      Serial.print(client.state());
      delay(2000);
 
    }
  }
  m5.begin(); 
}

void loop() {
  ezMenu myMenu("Main menu");
  myMenu.addItem("lamp bank aan", mainmenu_one); 
  myMenu.addItem("lampbank uit", mainmenu_two);
  myMenu.addItem("dimmer keukenlamp", mainmenu_three);
  myMenu.run();     
}

void mainmenu_one() {
  client.publish("domoticz/in", "{\"command\": \"switchlight\", \"idx\": 136, \"switchcmd\": \"On\", \"level\": 100}");
  Serial.println("mqtt send");
}

void mainmenu_two() {
  client.publish("domoticz/in", "{\"command\": \"switchlight\", \"idx\": 136, \"switchcmd\": \"Off\", \"level\": 0}");
  Serial.println("mqtt off send");
  }

void mainmenu_three() {
  ezMenu subMenu("Submenu");
  subMenu.addItem("Keuken off", submenu_off);
  subMenu.addItem("Dim 10%", submenu_one);
  subMenu.addItem("Dim 20% ", submenu_two);
  subMenu.addItem("Dim 30%", submenu_three);
  subMenu.addItem("Dim 40%", submenu_four);
  subMenu.addItem("Dim 50%", submenu_five);
  subMenu.addItem("Dim 60%", submenu_six);
  subMenu.addItem("Dim 70%", submenu_seven);
  subMenu.addItem("Dim 80%", submenu_eight);
  subMenu.addItem("Dim 90%", submenu_nine);
  subMenu.addItem("Dim 100%", submenu_ten);
  subMenu.addItem("Back | Back to main menu");
  subMenu.upOnFirst("last|up");
  subMenu.downOnLast("first|down");
  subMenu.run();
  client.loop();
}

void submenu_one() {
  client.publish("domoticz/in", "{\"command\": \"switchlight\", \"idx\": 143, \"switchcmd\": \"Set Level\", \"level\": 10}");
  Serial.println("mqtt send");
}

void submenu_two() {
  client.publish("domoticz/in", "{\"command\": \"switchlight\", \"idx\": 143, \"switchcmd\": \"Set Level\", \"level\": 20}");
  Serial.println("mqtt send");
}

void submenu_three() {
  client.publish("domoticz/in", "{\"command\": \"switchlight\", \"idx\": 143, \"switchcmd\": \"Set Level\", \"level\": 30}");
  Serial.println("mqtt send");
}

void submenu_four() {
  client.publish("domoticz/in", "{\"command\": \"switchlight\", \"idx\": 143, \"switchcmd\": \"Set Level\", \"level\": 40}");
  Serial.println("mqtt send");
}

void submenu_five() {
  client.publish("domoticz/in", "{\"command\": \"switchlight\", \"idx\": 143, \"switchcmd\": \"Set Level\", \"level\": 50}");
  Serial.println("mqtt send");
}
void submenu_six() {
  client.publish("domoticz/in", "{\"command\": \"switchlight\", \"idx\": 143, \"switchcmd\": \"Set Level\", \"level\": 60}");
  Serial.println("mqtt send");
}

void submenu_seven() {
  client.publish("domoticz/in", "{\"command\": \"switchlight\", \"idx\": 143, \"switchcmd\": \"Set Level\", \"level\": 70}");
  Serial.println("mqtt send");
}

void submenu_eight() {
  client.publish("domoticz/in", "{\"command\": \"switchlight\", \"idx\": 143, \"switchcmd\": \"Set Level\", \"level\": 80}");
  Serial.println("mqtt send");
}

void submenu_nine() {
  client.publish("domoticz/in", "{\"command\": \"switchlight\", \"idx\": 143, \"switchcmd\": \"Set Level\", \"level\": 90}");
  Serial.println("mqtt send");
}

void submenu_ten() {
  client.publish("domoticz/in", "{\"command\": \"switchlight\", \"idx\": 143, \"switchcmd\": \"Set Level\", \"level\": 100}");
  Serial.println("mqtt send");
}

void submenu_off() {
  client.publish("domoticz/in", "{\"command\": \"switchlight\", \"idx\": 143, \"switchcmd\": \"Off\", \"level\": 0}");
  Serial.println("mqtt send");
}```

bobolink

@rop
I’m completing my first project using M5ez/M5stack. A remote control.
I would like to indicate two things on a menu, the current state of the remote equipment and the next state (that will become the current state when the “select” button is pressed and a ESP-Now message is sent/acknowledged).
The next state is your select item black cursor line with reverse text but people might think that is the current state of the remote equipment—if they forget to press “select”. I could automatically send the message after dwelling on a selection after a few seconds like a tv remote. But I’d like to make them explicitly press “select” with this remote equipment.
I now indicate current state by putting it as the first item on the menu and using bold text but a green check mark ✅ or dot ⚫️ would be more assertive. Unless I’m overlooking a better method.
Thanks again for M5ez.
@bobolink