Slide 1

Slide 1 text

Introducing the M5Unified Library Core, Core2, Tough, StickC/CPlus, CoreInk, Paper, Station, Atom, Stamp… One library for all devices

Slide 2

Slide 2 text

What is「M5Unified」? ・Library for the M5Stack series, compatible with Arduino and ESP-IDF environments ・Can be used with almost all models equipped with the ESP32 series. ・Same operation whether the display is LCD , EPD or OLED !! ・Same operation whether the speaker is I2S audio, analog connection, or buzzer !! M5Unified.h M5Unified.h M5Unified.h M5Unified.h M5Unified.h M5Unified.h M5Unified.h

Slide 3

Slide 3 text

What is「M5Unified」? ・Also compatible with ATOM,ATOMS3,STAMPC3,STAMPS3 ・Supports external display ! M5Unified.h M5Unified.h M5Unified.h M5Unified.h M5Unified.h M5Unified.h

Slide 4

Slide 4 text

・Supports multiple displays including the built-in display + external display ! What is「M5Unified」? M5Unified.h M5Unified.h M5Unified.h M5Unified.h M5Unified.h M5Unified.h M5Unified.h

Slide 5

Slide 5 text

・It can be used in the same way for both color and monochrome ! ・Since monochrome color reduction is performed automatically, you don't have to worry about differences with color LCDs! What if the screen is monochrome ?

Slide 6

Slide 6 text

・Of course, it also supports external speakers.  ・HAT SPK  ・HAT SPK2  ・ATOMIC SPK  ・Module RCA  ・Module Display ※ Speakers other than those listed above can also be used with a little configuration. What if the speakers are external?

Slide 7

Slide 7 text

What's more, it can run on a PC without using the actual devices! ・It can be run on a PC using the cross-platform library “SDL” ・SDL=Simple DirectMedia Layer ・Common source code supports Windows,macOS,Linux ・Display・Speaker・Button・Touch with mouse It works the same on any OS. How to use =>> M5GFX/examples/PlatformIO_SDL/README.md https://github.com/m5stack/M5GFX/blob/master/examples/PlatformIO_SDL/README.md

Slide 8

Slide 8 text

How to use M5Unified? ・Install both “M5Unified” and “M5GFX” from the Library Manager ※ It is already registered in the ArduinoIDE , PlatformIO , ESP Component Registry

Slide 9

Slide 9 text

How to use M5Unified? ・「#include 」is OK for any model ・Moreover, Model detection is done at runtime, even if you select the wrong target model in the board manager, it will usually work normally.  (e.g.You can also select M5StickC and write Core2 .) #include void setup() { M5.begin(); } void loop() { M5.update(); M5.Display.print( "Hello M5Stack!"); }

Slide 10

Slide 10 text

How to use an external display ? ・It will work if you add the 「#include」 for the external display to the beginning.  ※ Write it before 「#include <5Unified.h> 」 #include #include #include #include void setup() { M5.begin(); } void loop() { M5.update(); M5.Display.print( "Hello M5Stack!"); }

Slide 11

Slide 11 text

How to use multiple displays ? ・Just perform the operation on M5.Displays(#). ・The number of displays can be obtained using the M5.getDisplayCount() . #include #include #include #include void setup() { M5.begin(); int c=M5.getDisplayCount(); for(int i=0;i

Slide 12

Slide 12 text

How to use a speaker ? ・For simple sounds, use the M5.Speaker.tone . Argument 1 sets the frequency. Argument 2 sets the playback time. ・It runs in the background as a separate task. ・The example on the right plays the three notes C, E, and G in order, (It creates a chord!) ・Up to eight sounds can be layered. #include void setup() { M5.begin(); M5.Speaker.tone(523.251, 2000); delay(500); M5.Speaker.tone(659.255, 2000); delay(500); M5.Speaker.tone(783.991, 2000); }

Slide 13

Slide 13 text

How to use external speakers? ・Just perform the configuration when executing the M5.begin function. #include void setup() { auto cfg = M5.config(); // Set the display you want to use to true. cfg.external_speaker.hat_spk = true; cfg.external_speaker.hat_spk2 = true; cfg.external_speaker.atomic_spk = true; cfg.external_speaker.module_rca = true; cfg.external_speaker.module_display=true; M5.begin(cfg); }

Slide 14

Slide 14 text

Tips for working on multiple devices . ・This is a library that can be used on any device, but… It requires some ingenuity when writing the code. For example… ・The drawing coordinates are calculated by yourself. ・Switch drawing layouts according to screen ratio. ・Switch button operation method according to the model. ・The drawing destination is switched depending on whether or not there is an external displays.

Slide 15

Slide 15 text

Tips for working on multiple devices . (e.g. How to draw a circle in the screen center?) ・If you write it like the code on the right... If the resolution is 320x240, it will be displayed in the center of the screen as intended. M5.Display.fillCircle( 160, // X Center 120, // Y Center 60, // radius TFT_GREEN // color );

Slide 16

Slide 16 text

Tips for working on multiple devices . (e.g. How to draw a circle in the screen center?) ・But if the resolution is different...  The position will shift. M5.Display.fillCircle( 160, // X Center 120, // Y Center 60, // radius TFT_GREEN // color );

Slide 17

Slide 17 text

Tips for working on multiple devices . (e.g. How to draw a circle in the screen center?) ・Just calculate the coordinates!  M5.Display.width()  M5.Display.height() Divide by 2 to get the center position. M5.Display.fillCircle( M5.Display.width() / 2, M5.Display.height() / 2, M5.Display.height() / 4, TFT_GREEN );

Slide 18

Slide 18 text

Tips for working on multiple devices . (e.g. How to change the layout by aspect ratio?) ・Split left and right to display different content. However, depending on the device, it may be divided into long, thin pieces. Want to divide it into as close to a square as possible, right? M5.Display.fillRect( 0, 0, M5.Display.width() / 2, M5.Display.height(), TFT_BLUE); M5.Display.fillRect( M5.Display.width() / 2, 0, M5.Display.width() / 2, M5.Display.height(), TFT_YELLOW);

Slide 19

Slide 19 text

Tips for working on multiple devices . (e.g. How to change the layout by aspect ratio?) ・Just compare the width and height and branch.  If it is horizontal, split it into left and right halves.  If it is vertical, split it into upper and lower halves. if (M5.Display.width() >= M5.Display.height()) { // split it into // left and right halves } else { // split it into // upper and lower halves }

Slide 20

Slide 20 text

Tips for working on multiple devices . (e.g. How to standardize operation methods?) ・For example, when creating a UI,  「Button A」= Move to left  「Button B」= Enter  「Button C」= Move to right   implement the above operation method... if (M5.BtnA.wasClicked()){ // Move to left } if (M5.BtnB.wasClicked()){ // Enter } if (M5.BtnC.wasClicked()){ // Move to right } A B C

Slide 21

Slide 21 text

Tips for working on multiple devices . (e.g. How to standardize operation methods?) ・CoreInk and Paper seem fine as is . ・But, StickC/CPlus does not have button C, so it is not possible to move right. Also, button A should be the confirmation operation. A B C A B C A B PWR EXT PWR if (M5.BtnA.wasClicked()){ // Move to left } if (M5.BtnB.wasClicked()){ // Enter } if (M5.BtnC.wasClicked()){ // Move to right }

Slide 22

Slide 22 text

・Create a branch using M5.getBoard() function ! ・Changed processing for StickC/CPlus .  PWR = Move to left / A = Enter / B = Move to right. A B C A B C A B PWR HAT PWR Tips for working on multiple devices . (e.g. How to standardize operation methods?) switch (M5.getBoard()) { case m5gfx::board_M5StickC: case m5gfx::board_M5StickCPlus: // For StickC/CPlus // PWR=Left,A=Enter,B=Right break; default: // For other models // A=Left,B=Enter,C=Right break; }

Slide 23

Slide 23 text

・e.g. If you use ModuleDisplay with M5Stack, When using M5.Display, it is drawn on the built-in LCD. ・Can I use ModuleDisplay if it is connected ? Tips for working on multiple devices . (e.g. How to prioritize external screens) #include #include void setup() { M5.begin(); M5.Display.print(”which?”); } M5.Display

Slide 24

Slide 24 text

・Just specify the screen you want to use first with the M5.setPrimaryDisplayType function! ※ If the screen is not found it has no effect. Tips for working on multiple devices . (e.g. How to prioritize external screens) #include #include void setup() { M5.begin(); M5.setPrimaryDisplayType({ m5gfx::board_M5ModuleDisplay}); M5.Display.print(”which?”); } M5.Display

Slide 25

Slide 25 text

Advantages and disadvantages of M5Unified Advantages: ・One code can easily support multiple models. ・Since the model can be identified at run time, there is no need to separate the execution binary for each model. ・M5Unified functions can be used in both Arduino and ESP-IDF environments. disadvantages: ・Not fully compatible with previous libraries. ・Support for model-specific functions is not yet complete. ( encoder , camera , RFID ) ・A signal may be sent from GPIO at startup to identify the model.

Slide 26

Slide 26 text

Please make use of M5Unified !!! Thank you for your attention !