M5Stack Dial - ESP32-S3 Smart Rotary Knob

Hardware
65

Ok, so I’ve completely refactored the code, there are breaking changes, so you’ll need to change a lot of stuff

You’ll need to change the external components reference to:

external_components:
  - source: github://dgaust/esphome@gc9a01
    components: [ gc9a01, ft3267 ]
    refresh: 0s

It’s now defined simply as

touchscreen:
  platform: ft3267

And you can show some logging if you want with

touchscreen:
  platform: ft3267
  on_touch:
    then:
      - logger.log:
          format: Touch %d at (%d, %d)
          args: [touch.id, touch.x, touch.y]
      - display.page.show_next: my_lcd

The benefit of this is you can now define binary sensors (buttons!) if you want to do actions. I’ve simply divided the screen up into four quarters below

binary_sensor:
  - platform: touchscreen
    name: Top Left Touch Quadrant
    x_min: 0
    x_max: 119
    y_min: 0
    y_max: 119
  - platform: touchscreen
    name: Top Right Touch Quadrant
    x_min: 120
    x_max: 240
    y_min: 0
    y_max: 119
  - platform: touchscreen
    name: Bottom Left Touch Quadrant
    x_min: 0
    x_max: 119
    y_min: 120
    y_max: 240
  - platform: touchscreen
    name: Bottom Right Touch Quadrant
    x_min: 120
    x_max: 240
    y_min: 120
    y_max: 240

As per the usual docs for the touchscreen, you can limit the buttons to a particular page by defining a page_id: within the binary sensor configuration.

4 Likes
66

It seems like the RFID sensor is not working when you hold an RFID card against it, unlike with the other RFID sensor that works. What could be the reason for this?

67

Awesome work @dgaust. Very much appreciated. This opens up a whole realm of possibilities.

M5 Smartknob
M5 Smartknob756×823 142 KB

  pages:
    - id: page1
      lambda: |-
        float screenheight = it.get_height();
        float screenwidth = it.get_width();
        float halfscreenheight = screenheight / 2;
        float halfscreenwidth = screenwidth /2;
        it.filled_rectangle(0, 0, halfscreenwidth, halfscreenheight, my_light_orange);
        it.filled_rectangle(halfscreenwidth, halfscreenheight, 155, 155, my_blue);
        it.filled_rectangle(0, halfscreenheight, halfscreenwidth, 155, my_green);      
        it.filled_rectangle(halfscreenwidth, 0, 155, halfscreenheight, my_red);      
        it.filled_rectangle(halfscreenwidth, halfscreenheight, - 155, - 155, my_green);      
        it.line(0, halfscreenheight, screenwidth, halfscreenheight);
        it.line(halfscreenwidth, 0, halfscreenwidth, screenheight);
        it.image(halfscreenwidth - 50, halfscreenheight - 90, fan_80, ImageAlign::TOP_CENTER);
        it.image(halfscreenwidth + 50, halfscreenheight + 10, cyclone_icon_80, ImageAlign::TOP_CENTER);
        it.image(halfscreenwidth + 50, halfscreenheight - 90, volume_notmute_80, ImageAlign::TOP_CENTER);
        it.image(halfscreenwidth - 50, halfscreenheight + 10, volumeknob, ImageAlign::TOP_CENTER);
4 Likes
68

Sorry but I have no idea Jarne. As I showed earlier, the tag reader is working fine on my unit although someone else said they were having issues where they needed to swipe the card numerous times to get it to work.

69

I just borrowed off what others did with their touchscreen drivers. And at the end of it all, I actually found a component already built (ft5x06) that would have worked by just changing the i2c address…

Still, it’s all tidied up now and should work ok for what is required - still working on why gestures aren’t being reported properly though.

2 Likes
71

Going from this post , there might be an additional setting you can enable for the display to disable eight_bit_color. Supposed to increase draw speed at the expense of memory.

I’ve updated the screen component over on my github to incorporate the changes, and it speeds up the screen signficantly. It will automatically default to 16 bit colour, so no need to change the configuration at all.

Now the screen is much faster, and we can define touch buttons, I’ve revised my main menu screen and playing around with using the round display for setting values.

1000007662
10000076621920×2560 612 KB

1000007661
10000076611920×2560 596 KB

1000007660
10000076601920×2560 589 KB

3 Likes
72

Yeah, that’s the good stuff…liking the way things go in this topic

73

This is how it looks controlling a light. The physical button will always take you back to the home page.

4 Likes
74

Hello, I looked at your version 2, it’s nice! Could you share or put this in your GitHub so that it can be downloaded? This would be great, thanks in advance!

- id: background
  file: images/m4dial/background.png
  type: RGBA
- id: switch_animated
  file: images/m4dial/switch.gif
75

Just grab something you like/is suitable from online with a free use/personal use license. I just googled dark grey background and grabbed that looked semi decent to play around with.

The animated gif isn’t used anywhere at the moment anyway so you could remove, I was testing something but it didn’t work, so isn’t used at the moment.

1 Like
76

I downloaded and adapted your v2 to my HA, great job, congratulations!

I’m trying out all the various features and found the icons a little small, I’m thinking of using a 4-quadrant approach similar to Atomic release.

77

Yep, there are plenty of options available for the display. I’m just playing around with it myself, I don’t think I’ll actually need 7 options on the menu page, but just wanted to see what it looked like.

1 Like
78

Nice work @atomic10! Do you by chance have a github that you’re keeping upto date with your esphome yaml file and images?

79

Thanks Beccsjb. I am only building off the work from dgaust.

Have chucked a copy of my test code on Github for you. Be aware that it is just my tinker code, so some things may not work as intended, extra code that’s not needed, etc.
No images to upload - all icons used are MDI icons.

3 Likes
80

I can’t wait until there is a blueprint to streamline the Dial’s use for the uninitiated, this is great work! Thank you!

1 Like
81

Guessing you have seen this: GitHub - Gitshaoxiang/M5Dial-Gui-Demo
Might be possible to steal (borrow) with pride…?

1 Like
82

@atomic10 did you get the Port A i2c bus to work? It works for me if I disable the display in the esphome YAML but not when it is enabled. I suspect this is due to the loop() taking a long time on the gc9a01. Has found a working approach?

83

I had no success with getting the external port working with either an am2320 temperature probe or a sx1509 port expander.
It would see the address of both devices when scanning the bus, but would not receive data from them and I am pretty sure you are right - there is too much blocking code being used for the display to get the timing right for the second bus.

84

I’m using a SHTC3 temperature/humidity sensor and that is exactly what I see too - the device is discovered by the scan but then it won’t communicate.

85

Yeah, the display blocks a lot, even with nothing being drawn it blocks. Ive not really looked into the component as to why, or how it could be improved just yet.

That said, im using an ld2410 presence sensor via the external port connection with no issues. But not i2c.