How should I reference the capacitive buttons of the m5stack_core2?

[jorge-aqp-23]

Hi, I didnt't find a way in the book to reference the capacitive buttons of the m5stack_core2 using moddable. Maybe I overlooked the subject in the book. Could you help me?

[phoddie]

Good question. Our book doesn't try to cover all of the details of each ESP32 device. There are so many, it is tough to keep up!

The m5stack_core2 host supports many of the features of the device. For some reason, it doesn't include the capacitive touch buttons. The M5Stack Fire provides access to the push buttons. You write something like this:

button.a.onChanged = function() {
   trace(`button a state: ${button.a.read()}\n`);
}

The M5Button implementation can't be reused on m5stack_core2 because it is for GPIO buttons, not capacitive touch. It should be a pretty straightforward project to implement something that provides the M5Stack Fire API.

If you feel comfortable trying to do that, that would be great and it would make a great first PR for the Moddable SDK. If you aren't ready to do that, I'd be happy to try to put together an implementation. I have an M5Stack Core2 sitting on my desk at the moment. ;)

[jorge-aqp-23]

Thanks, for your answer. Actually, it would be great if you try to put together an implementation (I really don't have the skills to do it), and it would a nice feature covered.

Just to mention it, the Arduino library for the m5stack_core2 actually provide an implementation to reference the capacitive touch buttons.

[phoddie]

Thanks for the reference. I'll take a look.

The Stack-chan project uses M5Stack-Core2 with the Moddable SDK and supports the capacitive touch buttons. I took a quick look at how @meganetaaan did that. The buttons are sensed using the touch driver for the display. The Stack-chan implementation is at the application level using Piu. For general use, it will need to be lower in the stack. I should be able to do that in the M5Stack-Core2 host. With some luck it won't break Stack-chan.

[phoddie]

Here's a quick implementation for you to try. Unzip the archive and put the three files (manifest.json, setup-target.js, and M5StackCoreTouch.js) in $MODDABLE/build/devices/esp32/targets/m5stack_core2/. Then build as usual. That should let you use buttons in the same way as M5Stack Fire:

button.a.onChanged = function() {
   trace(`button a: ${this.read()}\n`);
}
button.b.onChanged = function() {
   trace(`button b: ${this.read()}\n`);
}
button.c.onChanged = function() {
   trace(`button c: ${this.read()}\n`);
}

Please give it a try and let me know how it goes.

[jorge-aqp-23]

It works! Could it be possible for you to comment some details about your implementation? Thank you!

Here I share a short video of the the bongo cat running on the m5stack_core2.

[phoddie]

@jorge-aqp-23 – thank you for the good news! It is always good to see Bongo Cat working on a new device. ;)

Could it be possible for you to comment some details about your implementation?

The "buttons" on M5Stack Core2 are part of the touch screen. They are just below the screen with y coordinates greater than 239. Detecting the buttons requires working with the touch screen driver. The patch creates a subclass of the touch screen driver, M5StackCoreTouch, which overrides the read function of the FT6206 touch driver. The M5StackCoreTouch read function calls the super class so that the FT6206 performs the touch screen read as usual.

The M5StackCoreTouch allows touch events on the screen to be processed normally. But, a touch that begins in the virtual touch area is diverted to the buttons. The M5Core2Button class implements the buttons. When a touch is detected on a virtual button, the M5Core2Button passes it to the corresponding button (a, b, or c) by calling write on the button. The button invokes onChanged when the value is written.