Hopes dashed! _

I have long since help that programming particularly procedural & Oops languages are prim candidates for a graphic environment. So imagine my excitement on discovering Google’s Blockly. And MIT’s App Inventor/App Builder/Kodular. With hope high hopes, a bit start and stop. I started with App inventor. Only to find it changed to App Builder. Leaving it for a while when I come back. I can no longer compile earlier compiled projects. After some quite frustrating trials, I finally get a bit of a snarky email saying: Hi

We announced in August 2019 that AppyBuilder will merge into kodular. Please use kodular.io

Thanks

So I start with Kodular, hoping this is the last change. Kodular does seem better than App Inventor. But the biggest pain stays. The need to only be able to position UI components in predefined grids Horizontal/Vertical blocks. When every other form designing system I have used, allow any UI component to be positioned anywhere on the screen. My app needs more than 50 buttons in a very complex grid. I have finally achieved the layout I wish but it has required several nested tables, Horizontal, & Vertical grids. Surly there is a better way? I have not tried this yet, but, it seems to me that, if I where to give a screen background graphic of my buttons, overlay it with 50 transparent sprites, I could use the .Touch Down & Touch Up events to simulate all the button events. Indeed I could do it with a single huge sprite an use the x,z to define the button touched. I would have to work a lot harder than seems reasonable. Is there a better way?

Thank you for taking time to give guidence.
Regards Julian Griffin

have you tried working with Canvas?

While it does seem that you would benefit from Absolute positioning, it is prone to breakage due to differing screen sizes if you’re not careful. App Inventor was working on this feature, but it hasn’t been released as of yet.

Currently the only way to achieve absolute positioning is with sprites on a Canvas. If you need properties specific to Buttons, I’m afraid you must build the complex grid yourself, or use dynamic components to build the UI programmatically.

2 Likes

Why do you need 50 buttons? Can you explain what is your app for? There’s alternatives to that, and even if you have to place 50 buttons, the way components are arranged in Kodular allows for that to be done perfectly. You just don’t have experience doing it.

3 Likes

Yes 50 buttons does seem a lot, but, the app I seek is to support a new system to teach the skill of reading. As you will know there 26 letters in the English alphabet. But there are more then 40 sound/phonemes in British English. The app needs one button per phoneme to demonstrate each grapheme & phoneme. And a few other support functions. The size of the table is approximately 12 wide, 8 high. But the positioning of some buttons needs to be placed: ½ ⅓ ⅔ ¼ ¾ off grid of a standard button size, both width &/or height.

Having said all this. There appears to be a bug in the Viewer. It’s a bit complex, but bare with me. In a horizontal arraignment with two nested vertical arraignments, If then two buttons are placed in one of the vertical arraignments. The buttons are on top of one another, then if the alignment of the other vertical arraignment is set to vertically centered. In the Viewer the single button is placed halfway down, as measured against the height of the two buttons in the other vertical arraignment. Which is what I wanted. However, when compiled and installed on an android device, the single button is placed at the top of its vertical arraignment. If this is the wrong place to raise this issue, I am sorry, but it seemed a bit complex to also explain the environment in which this occurred. I will copy it to a better space, if asked to do so. All I would ask is where?
Thank you all, for your quick and helpful responses.
My kindest regards Julian.

Just for the sake of interest, attached is the The Phonic Alphabet (TPA) Table.
IPA is not used, as it would confuse a diffident reader.
TPA is used to mark up any English text, with the cues, clues, and prompts for the reader to know how each letter of the orthography is pronounced. A second attachment is a screenshot showing the vertical buttons: or, p,q,r. I cannot tell if the same thing happens with centred horizontal arraignments as I do not know how to scrollable a screen horizontally. Vertical scrolling only needs to drag the screen up/down but horizontal scrolling up/down does nothing.
regards Julian.

Screenshot (12) cropped 640×360 BMP.bmp (675.1 KB) Screenshot (12) cropped BMP.bmp (5.9 MB)

1 Like

Yes, sounds interesting to build. I like challenges like this.
Can you show a diagram of how would be the ideal layout you want to achieve once finished? I mean what you want the user to see in the app.

4 Likes

you could use a canvas … see this very old example " Know your US States using Image Mapping" from Scott here https://groups.google.com/g/app-inventor-developers-library/c/lUf2bHcmyf0/m/nDi-YVkPCgAJ
and rather than using 50 sprites you could follow the advice from Bob in that thread

How about have map where the states are different colours and test the background color of pixel

Taifun