I'm sorry, I don't see it... This I want to be somehow interactive... let's say background or... in fact as AI2 works (AI2 was the real inspiration for this application). I will try to draw some parts of the screen to be more concrete.
Thank you, Dan
You can load an image as a background in an Arrangement, and load the Arrangement with sub Arrangements full of other components.
By means of Generic (Any) blocks you can reuse components and relabel them.
Component blocks can be kept in global lists to correspond with their Arrangement locations.
Give each puzzle piece a different Z index, then you can align them to "fit together"
An example of something I did a while ago:
A quick sketch to more or less what I want. This is somewhat the simplest idea, almost sure that over time will be more complicated.
All puzzle pieces are esp32 with different functions (colors). Blue will give variable voltage, green - variable temperature, orange on/off out... and so on. Until now I know about 20 functions but in the future will be more than that.
Normally all puzzle pieces are the same measures. When I touch eg: the blue one must appear (animated if I can) the big puzzle piece where I can modify, save, and organize the info from that puzzle piece.
The red marks represent the power supply for esp32 puzzle pieces. It will be a wireless power supply and will be somehow more complicated... It will have some references, some independent GND's, and so on.
The big blue square, it is for exemplifies a slider that modifies a voltage between some pre-established limits (I forgot to correct the actual voltage to 12.5V as is in the small blue puzzle piece).
Please forgive me, art is not my strong point.
Thank you, Dan
PS - @TIMAI2 good starting point for inspiration. Mathematics... oh no... not again. Can be arithmetic... only?!
This looks like something that could be drawn on a Canvas, given value functions to turn rows and columns into px and py values at run time based on Canvas.Width and .Height.
The splash would be drawn after everything else, if a square was poked.
A fat line can be used to "erase" rectangles prior to redrawing text or fake sliders on it.
If you would rather go to a multi-component approach, here is an example of component arrays:
Thank you very much for your opinions and examples. They are always welcomed. What I'm trying to do is to see how I can give some nice design to the functionalities. I'm almost sure that I can create a simple interface based on arrangements (horizontal/vertical).
For the moment, I'm relying on intuition regarding what I want. I believe that AI2 can somehow assist with some minor design tasks.
Unfortunately a like I want app doesn't exist and I don't have from where I can inspired.
Thank you, Dan
From what I see, and read about AI2, it seems that my purposes can be achieved with some vertical/horizontal arrangements, vertical/ horizontal arrangement background images to give some "puzzle pieces" shapes (I don't know if accept .png, I say .png due to transparent background), some plays with the visibilities of that arrangements, some canvas and canvas visibilities to activate/deactivate some connection graphics, on arrangements, I can place some text boxes/labels or sliders.
The parameters that came over wifi from 100+ of esp32I can be displayed in the text boxes/labels, and the parameters that I need to send over wifi I can send from labels/text boxes/sliders that already I have.
I'm on the right path?! What do you think?
Thank you, Dan
Sounds good to me.
Well... I do a small test. On my tablet screen fits about 128 cels!!! And I think that can be ergonomics enough for eyes.
U_S_test.aia (4.4 KB)
I have some questions, I think that I did something wrong.
Where the arrow is... I don't have the red square with round corners!!! Do I do something wrong?! Is it a possible bug of AI2?!
On AI2 I have it...
Another question, why I don't have around the text box a round corner rectangle with a white background that I have on AI2?!
What do I do wrong?!
Thank you, Dan
PS - Seems that the cells are small enough that I can't play with the util space to draw something like a puzzle piece (I'm happy about that), I must be happy with somehow elegant round corners (Apple inspired...). Sometimes less may be more... So, fewer complications with design!!!
Please forgot the red square, I was lost in space and forgot a block that I'll test it... my mistake...
I have two problems, at this time. The first and biggest problem is the design possibility of AI2. As you can see in the above images the entire design I have on the tablet doesn't fit on the AI2 design screen. That was and will be a nightmare because as I built the app, it came more and more ideas and I had to update all 128 cells. I do not know how to fit the entire design into the development screen.
Second problem...
U_S_test_1.aia (16.6 KB)
I draw a round corner square shape in two noob variants, of course, these are not ideal variants.
The ideal variant probably is DrawShape with some Lists and some more or less complicated math. But I'm not a genius in this. But...
I see here, in this community some genius, @ABG for example... That if can, if it wants, if it has some time... Almost sure that will help! Of course, there exists more genius here!
Thank you, Dan
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
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.
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
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... 
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.
