MIT App Inventor and 100+ esp32, how could I do this?!

First Problem

Use scrolling arrangements to allow viewing of all components

Second Problem

Don't draw at all. make a transparent image of a square with rounded corners, and apply that to each canvas. If you want it filled with colour then do much the same.

Thank you for the first tips.

As you can see I have a .png that I'll use for the background of vertical arrangements, I tested it for the canvas background and it works ok... But... It is not best to draw directly on the canvas with a good approach and not put .png images? I ask from the resource used point of view...

I think that if I directly draw on canvas, it is somehow a vectorial approach. A vectorial approach is not better than... let's say... bitmap approach?! Another advantage of direct canvas drawing is that I can dynamically change the color, shapes... and so on. In the future, I want some shapes to "blink" and more. For me, seems to be easiest to do all this on direct drawing on canvas. Correct me please if I'm wrong.

Thank you, Dan

Have you ever played an RPG game in the last 10 years?

They do a great job of providing views of different data at varying scale levels.

Once you reach a certain volume level, you can't see everything all at once.

Here are some samples of a small sliding window over a larger data list ...

https://groups.google.com/g/mitappinventortest/c/WEat3QJXUX4/m/-r3mNVSIAwAJ

1 Like

Thank you for your reply, @ABG. It seems there's a misunderstanding regarding my issue with scrolling. Allow me to clarify:

Imagine I have an arrangement with a width of 3000px and a height of 2000px. In the AI2 online designer screen, there's no horizontal scrolling option available, making it impossible to reach the 3000px point. Even with 128 cells, as shown in the images above, I can't access the cells on the right that are hidden off-screen.

Example:
Scrool_test.aia (1.1 KB)

Additionally, I'm encountering difficulties implementing the best practice design for canvas drawing using the "DrawShape" component, as you suggested. This approach requires a level of expertise in working with lists and math, which I currently lack. Unfortunately, I haven't been able to find any documentation or examples demonstrating how to use "DrawShape" with lists and math to draw any shape with round corners. If you could provide some guidance or examples on this particular topic, it would be greatly appreciated.

I draw on the first two canvas square shapes with round corners but in an empirical manner, also in the rest of the cells, I use .png files to display square shapes with round corners. Also, in the U_S_test_1.aia from above (I didn't upload once more time, exists above), you can see my problem in AI2 designer with horizontal scroll.

Thank you, Dan

PS - The last time that I play a game... It was in '93, and was Wolfenstein on Windows 1 if I remember correctly, on a 386 with 8Mb RAM and 50Mb HDD. We play in 6 comps network, and we play almost continuously (day/night) for more than 3 months until all touch the end of the game (the part where Hitler died). That month almost ruined our lives. I'm a part of that species that is uncontrollable in front of a game. No more games.

To be more clear...

For me, adding so many columns in a screen, and you have to scroll horizonlly is not a good idea. instead, you can add more rows and scroll vertically, and in one row you have 4 or 5 cells (can not too much).

to make a round corner layout, you can use this extension:

and in case you need a list of more than 100 buttons in order, you can use this extension

1 Like

Thank you @Kevinkun , In the final app I don't have scrolls.

The app for the moment runs on a Doogee 11 inch/2.5K tablet, next week will run on an almost 13 inch/3K Lenovo tablet. In the future, I plan to use a 27-inch touchscreen 4K monitor with an Android desktop system. This app is not a usual app designed for phones or such things, it is an app for electronics services. It will be used on a dedicated hardware app.

Thank you, Dan

PS - I already saw your extension, it is on my list... :wink: but I prefer don't use extensions if it can be made with native AI2.

For example, @ABG does some magic with math, lists and so on... drawing some stars, is a huge source of inspiration... But... not even one corner... Have a round shape.

:sob:

Sample  run


canvas_buttons_rounded_corners.aia (6.2 KB)

A rounded cornered rectangle is basically a fat + sign with circles drawn at its corners.
The draw shape is tracing out a plus sign.

P.S. Mixing up the colors would make the rectangles stand out more.

1 Like

Thank you very much @ABG for this example, indeed is didactic. But... let's respect the KISS principle, let's simplify those things and don't complicate them more.

Here's an image with my blocks that draw (for the moment) two round corners square shapes. I can easily extrapolate to all 128 cells.

For the moment, the rest of the 126 cells have a .png as background. I can delete the 126 .png's and put 126 canvas in their place, add to initialize block, as I use any component/canvas... All are easy to extrapolate. But...

As ABG says, it is possible to use:

blocks

and it may be right. If it is right all can be simplified. By the way... I see on a thread that Kodular has something like draw polygons and if I remember correctly it can directly round the corners. But... It is not our case.

Now... I test this approach, which at this moment draws a simple square, without rounded corners. From what I remember from kindergarten time, the unused blocks can draw some arcs (I must search, on my best friend Google to be sure...).

Now... My question is how can I interlace the blocks that I hope can draw arcs in the free spaces from the left blocks? And the big problem is that the unused blocs will draw point by point. So... Must be adapted to the segment.

For me seems to be a best solution that I have in the above large blocks.

Thank you very much another time, Dan

PS - In fact, I need the equation behind this block...

blocks (1)

Seems that @TIMAI2 was right, drawing on canvas is a tricky business. I say that because in the final I need something like this...

That means at least 6 round corners square drawings on canvas. This is unsustainable. I let out blinking squares, and to give some advert I'll blink some balls or other simple things.

So... From my point of view... A .png as the background of all cells canvas is the future. Far less complicated... I have time to complicate other things in the future.

So... On the didactic plan... In this case... drawing on canvas = is a complicated path, use a .png.

Thank you all for the precious time and advice, Dan

PS - For TIMAI2 - I do the images before you write here your opinions, I do that only because was... The simplest way... :wink:

Connecting (more than) 100 ESP devices is possible with ESP-Now, a communication protocol from ESP. That is according to their own documentation: ESP-Now FAQ

What is the maximum number of devices that can be controlled by ESP-NOW?

This depends on the specific communication method:

  • If unicast packets are used, up to 20 devices can be paired and controlled at the same time.
  • If ESP-NOW encrypted mode is used, up to 6 devices can be paired and controlled at the same time.
  • If broadcast packets are used, theoretically there is no limitation in the number of devices that can be controlled. You only need to configure the correct broadcast address and take care of the interference issue when too many devices are paired.

Thank you for your reply, as you can see it says up to 20. I read this info some time ago. Things with more than 100 pcs. of esp32 are some personal interpretations. The maximum number practically confirmed that I discovered was about 60 pcs... if I'll correctly remember.

In fact, is very important what you broadcast not the number of broadcasters. Let's explain me...

Is not the same thing if you want to broadcast 100 SPI cameras with 40 Mbps or 100 CAN-bus with 1 Mbps or 100 strings with 100Kbps.

ESP-Now seems to be able to control a large number of devices... But... you have only 150 Mhz at your disposition " The Wi-Fi API provides support for the 802.11b/g/n protocol driver".

So... more than 100 pcs. of esp32 must be experimented and proved. We... the human species have a very weird sin... We like to hear each other talk... We make tons of affirmations. To give veridicity at this affirmations... We need to prove it, otherwise remains... simply rumors (to not say forbidden words...). The internet has plenty of... forbidden words, in fact, my beloved internet was transformed into... content without content.

Thank you, Dan

@Kaytlynn_O_Briant_St Let's see... "It's easy to write lyrics... when you have nothing to say..." Write with time ago a poet.

Please, if you have nothing to contribute, do not pollute here... If it is interesting for you, read it and I'm glad to see you... But don't pollute.

Thank you in advance, Dan

PS - Somebody can delete the last two non-sense posts?! This happens when some Tik-Tok ghosts are teleported into the real world...

A last example about the horizontal scroll problem that I have. To access the right cells that are hidden off-screen, I must modify the width of the already done cells from the middle right of the screen from 75px to 9px, to bring on the design useful part of screen the hidden cells to add canvas/background for canvas... and so on. After I finish that part, I must correct the width of the already minimized cells from 9px to 75px, to have a correct preview of my work.

I know that AI2 is specially made for phones/low-resolution tablets/Chromebooks. But the future arrived, this wonderful piece of software that is MIT App Inventor if it can be used on... Let's say scientific purposes... Where a lot of data is processed and must be displayed... It needed big screens. As the world tries to put a computer in our pockets, and that is a piece of wonderful news... The same world doesn't accompaniate this microcomputer with some microscope like... Vision (or... howk/eagle vision :rofl:).

If somebody from MIT is curious about the nightmare behind this work... I can count for them how many times the editor crashes, how many times the companion crashes/stuck, and so on...

One after the other, anyway... AI2 continues to be my... secret love :kissing_heart:

Just make them not visible

If somebody can/wants, it can make a tutorial about one way to manage this no horizontal scroll problem. Feel free to use any text or images if somebody thinks they have some utility. It took me a while to manage this no horizontal scroll in the designer part of AI2, as I'm a noob/inutile on AI2 (almost sure that like me exists... tons...)!

Before the nightmare ends on the designer.

Before the nightmare ends on the companion.

After the nightmare part 1 ends on companion.

All cells are in gray mode due to the fact that I want to say that are not used, when a cell is used, will have some border colors or fill colors, which I'll see in the future.

Thank you @TIMAI2. In the future, I'll try your suggestion, due to the fact that will be "nightmare part 2, nightmare part...n...: almost sure. :sob:

You could also place each "column" inside a vertical arrangement, then you just have to hide the arrangement to hide the whole column.

You should be building this with a responsive design, so that the display would be different depending on the screen size. I understand that your target display will be of a certain size, though, so perhaps this is simply a development issue.

Development would be much easier, in my view, if you used a dynamic components extension in order to generate your component display. Not sure I understand what your issue is with using extensions?

Don't create your own nightmares....

1 Like

I have a vertical arrangement, inside this, I have two horizontal arrangements, one for the header and one for the cells, in the left place of the vertical arrangements of the cells I have another vertical arrangement for a menu.

I can't use the invisibility of a column in that case because I need to restore that column that I'll hide on the first step and I don't see it when I want to make it visible again and I must fund it between almost 300 arrangements. The method to make the entire column smaller (9px, 9 px because is the biggest dimension with only one number, 10 for example has 2 numbers).

It made no sense to use responsive design when I made this app only for a dedicated resolution, a dedicated dimension of a screen. From my point of view, I don't understand that sense.

Seems that I'm doomed to find the only extension that I can't use for a specific purpose, I have had luck in the past with Antonio's BLE, it worked like a charm, but I have no culture/experience with what any extension does, it will take me two lives to test all extensions and unfortunately I have only a few percent from one life.

Anybody is more than welcome to recommend extensions that can do what I need because now you, all that have experience/culture on AI2 extensions, can see what I need and are almost sure you know something that can do that in the easy way that I need.

I have no issue with using extensions, to prove that... I invite anyone who can make an extension to contact me on prived with a price for an extension that daw squares on canvas. If I can afford the price, without any problem I'll buy it (I have no idea about prices for extensions!!!)

More... In the future, I will need more dedicated extensions!!! As the app will have a shape. For that reason, I put on Work for Hire this announce, nobody answers constructively, I was damned that I make publicity, that the children's are in danger... and so on... But nothing about the essence of what I write.

Thank you for your time, Dan

Back to our business... here in this thread with the big screen resolutions and apps for those resolutions...

@TIMAI2 post here... A dynamically generated layout with the help of various extensions.

I do some tests (now I have the final hardware/software machines... ).

I found some weird latencies on the TIMAI2 dynamic approach. I want to say that after some initial latency that TIMAI2 already specifies, seems that it has another latency when I touch the cells and the notifier recognizes the touched cell. Anyway on some tablets, the notifier is not shown!!!

From my intuition point of view, the dynamic approach will generate more and more latency problems (and possible more different problems) in the future. I don't know if this is the best approach for my app.

From a static approach point of view (that can be the future development of my apps), when I already generated all interfaces, all layouts, and all variables, the logic that will be developed behind this will be easier to follow/use, and so on. The possible latency that can be generated by the logic will be normal, and I think that will be without importance.

Anyway... The static approach... Still are a headache nightmare because AI2 is made for smartphones/low-res tablets. But... Once terminated the layout/interface/variables... The rest will be a piece of cake... For the genial part of humanity... For me, it will be the same...

BTW... For AI2 developers... Can you give a solution... In half-hour to those problems?! :rofl: :rofl: :rofl: :rofl: , I'm joking...