Touch Button Widget for Paper S3

Schwibach

Hello,

I am new to M5Stack in general and just ordered my first Paper S3.
My use case is this:
I want to create a meeting room display that can call an API (Get Request) and then display the JSON data (simple object with some strings) as labels. Those will be things like is the room free, occupied, when is the next meeting...

If the room is currently free, I want three touch buttons that allow to book the room for 15, 30 or 45 minutes. That will send an http post to a different endpoint.

UIFlow 2 does not seem to have a widget or any other way to add a touch button as a visual element. I could create a rectangle and them some text.
But if I start to change code in the python area on the right, those things will not translate to the visuals on the left.

I'm curious how you are supposed to create buttons in UIFlow2.

Also, I'm struggling with the graphic interface with the blocks of code.
Is there any tutorial that will walk me through creating a simple project on the Paper S3? The 2-3 minute Youtube videos only give a very superficial overview. I would need more guidance.

And my last question: How do I find out, what widgets exist and what the expected parameters are? That would help me a lot.

If somebody reads this and feels sympathy and would take some time to get me on track to build the first project.

spongefile

@Schwibach I have the same question. I created a rectangle, and then I thought there would be an obvious way to say "when rectangle touched", but there isn't. I think you need to find the location of the rectangle and then determine "when a touch happens within this area". Which is a whole lot of math for what would seem to be such an obvious component.

robski

you prob need to read touch coordinates and if they are in range x1-x2 and y1-y2 (button area) function can be executed

Schwibach

Thank you guys!
Are there any templates or an app that I could look at?

If I were the company making this product, I would release a few different apps that showcase these features and how they think you would implement them.

I couldn't find any documentation, about the widgets etc. that exist for the PaperS3. Is there no such thing as proper documentation for the different blocks and how they are supposed to be used?

I agree that with what I have on hand, trying to use a rectangle with the coordinates would be the way to go. Unfortunately, it's not obvious to me how to go about this. Even with the few things I managed to do, I retro-engineered from another app.

felmue

Hello @Schwibach

while using UI designer to draw a rectangle works fine, getting the rectangle's parameters (e.g. x, y, ...) is not implemented (at least I couldn't find any get functions for rectangles).

That said, I created a Micropython example which uses a Button class to draw the buttons, labels and check for touch. You can find it here. It's not using the UI designer nor is it using blocks but it should give you an idea hopefully.

Thanks
Felix