I’ve successfully created a lottery number generator app in Thunkable classic, imported from AI2 and I’m trying to re-create it in ThunkableX, however I’m having issues with building/using the list. The code blocks are attached for both:
As there’s no way of stepping through the program and discovering errors, I’ve used a trace label to check the status of various elements and they are presenting unexpected results. No method I’ve used thus far has worked. So any guidance/ideas would be most appreciated.
“picks” is a list
“pick” is the ball (random number) being picked
“num” is a variable for the number of balls to be drawn (Lotto 6, Euro 5 then 2)
“nums” is a variable for the max no of balls in the draw ( Lotto 59, Euro 49 then 12)
“draws” is a list of lists (to accommodate the Euro draw)
In my app, I actually use a random seed generated from Epoch time before every ball is drawn, to make the choice as random as possible. However, using a random seed in Thunkable X doesn’t seem to be available, which is a shame. Why? It’s because you can test “random numbers” with definite patterns, dependent on your seed choice, to make sure that everything works as expected.
I added a Log label to the project and an example of working with it to display logs.
I traced the program when I clicked the Play Lotto button. First, you had app num = 0 and I made it app num = 2. Right? Secondly, you are strangely working with the list in the Draw function.
Block "length of" <- list <-list app.pics
<-
always returns the number 2, because there are two elements in the list - a list and an empty value.
The DisplayLotto function (function Sort need to check too) also does not work correctly. As you will see, you need to correct the algorithm for getting lists of numbers and use Log to view what is in the variables.
Thanks for the response. I did think that I was using the wrong method to create a list properly and your email proved it. I adjusted my original blocks and it’s now working properly. I also hadn’t noticed that I hadn’t reverted back to my default “num” variable, as I’d tried a different method in the draw function using “picked” and ditched it because it was no different. However, when I was happy with the “picks” list, given that a “list of lists” block isn’t available (unless I’m mistaken) in ThunkableX yet, I split the Euro draw into two to reuse “picks”.
My only beef is that the screen (I’m using an iPad4 to test) flashes/jumps during the operation. I need to do some more work on the screen design and settings, especially since I want to hide the other option if only one draw is selected. In my Thunkable Classic version, it works a treat, since I’m working with arrangements and have control over them. I know that I can set the height and width of a row to zero to hide the contents but it’s getting them back to normal that I’ve had problems with (using my current screen setup). I was able to hide the numbers and image but the screen still showed some of the number borders as narrow lines.
Going back to basics in screen design with ThunkableX seems to be my best option. Any hints would be most appreciated. Here’s a link to my working copy - no screen manipulation attempted again yet! https://x.thunkable.com/projectPage/5be55a2912419a1271b64212
The screen twitches due to the redrawing of the Image component when setting the buttons to the state of enabled or disabled. This problem exists for a long time (a similar twitching problem occurs with icons in new tab navigators components). Therefore, instead of Image, you need to use any other component that can display images. In the example below I use Column. Check this.
Thanks a bunch for that tip, which I’ve implemented and I’ve also managed to hide the rows successfully. I had to use a blank image, as the logos were visible on the LH edge of the screen, even with both height and width set to zero. Have another look at my working copy: https://x.thunkable.com/projects/5be5c11926d7270edf3343f1
Unfortunately, I can’t see the blocks (due to an incomprehensible mistake when copying your project), but I like this version.
If you allow, I will tell you what else can be improved in it. When the Play button is pressed, the elements of the bottom row “EURO MILLIONS” are hidden and also see the offset markup vertically when hiding and displaying the row. Instead, you can cover all components in the row with a white Column on top with absolute positioning. This will speed up the hide/show operation and eliminate and display on the left side of the screen a vertical yellow bar before displaying the icon EURO MILLIONS.
Numbers in the rectangles appear sequentially, causing the markup to “jump”. This can be avoided if you make rectangles with numbers of absolute size (calculated on two numbers in them).
On the small iPhone5 screen, it turns out that when a two-digit number falls in all (or some) rectangles, the markup deteriorates a little and is compressed horizontally compared to the initial value, when the rectangles initially contain numbers of one digit.
The image of the ball is better to make transparent.
That’s great advice! I’ll ask you about this later in this message but first I want to say that I had the same issue as you when trying to copy my OWN PROJECT! I got this message:
I’ve started a topic in the Community about it and mentioned that you had a issue getting a copy of my project. Back to your reply…
On my iPad4, all the elements disappear but the screen does jump slightly. Since I’ve added ball images as a background to the numbers, I see the last ball image of the row that should be hidden. This is what happened before with the Lottery images and I had to switch to a blank image instead during the hide process. If your method was used, would I just need to hide the overlapping column?
So I have two questions regarding the maths for calculating absolute sizes.
How do I position the column “absolutely” for each row?
How do I calculate absolute sizes for the numbers in each row?
Will this “absolute positioning” work on whatever Apple device it’s loaded onto, since you’ve tried the project on an iPhone5 and I’ve got an iPad4?
On the iPhone, I can only watch tomorrow. Live is not working now. On the Android emulator, I got this picture. Part of the last ball is visible on the screen.
Try my way. Place a full white cover over the row (Column). If you need to show the elements, you can either make the color of the cover transparent, or set its height to 0. To hide the elements, make the background color of the cover white or change the height so that it covers the entire row (height = 100% if I’m not mistaken).
You asked for absolute sizes. Here you need to experiment, because in Thunkable X there is no block that returns the current dimensions of the components. If tomorrow I manage to open your new project, then I will try my version with a lid and absolute positioning to solve all the problems.
I knew that this happened after I added the ball images. Since there’s something wrong with the Thunkable site, I can’t modify the blocks. Your method will save some block steps.
However, I wanted to emulate the way Thunkable Classic works with horizontal arrangements. If you hide one, the other arrangements move up and don’t leave a gap. I know that it’s possible but I need to understand absolute positioning to make it work. You’ll see that if you check my older Classic version.
Once the issue’s dealt with by Thunkable, I’ll experiment with the settings. I’ve only got one version on the server.
If you have not found a way to hide the edge of the last yellow ball, then try setting the EuroRw.overflow = hidden property, which hides all elements that fall outside the parent container (EuroRw).
I tried my way of hiding items using the cover, but on Android it does not work.
Your application seems simple, but after some attempts I realized that it would take a lot of effort to make it beautifully working on Android.
That worked a treat on my iPad4 but I’ve still got issues with the display on Android. The balls are so small relative to the lottery icons on my Note3, J5 and Note10.1, whilst the numbers look OK. I’ve managed to get rid of the Euro ball/label edge when Play Lotto is pressed, by setting alignItems to stretch. To make the screen appearance look better, I also changed Screen1’s flex to zero and flexBasis to 75% in FlexBoxLayout.
So the only thing I’m stuck with is getting the balls to appear the same on Android as they do on Apple devices. Any ideas? If ThunkableX is cross-platform, why are the displays on different devices not the same, or is this a work in progress?
To make the blocks more efficient, I want to change the Draw1/2 blocks to a single function/procedure with list/num/nums variables (which I’ve successfully achieved in Thunkable Classic but don’t know how to access them within the procedure in ThunkableX. I’ve created a separate discussion here.
You’re right. To increase the size of the balls, you need to change the BackgroundPictureResizeMode from Center to Cover or Contain for each Column.
As for the parameters in the functions, I see that the developer helps you in another branch. It is really strange that you cannot create parameters in a function. I added a function block, created parameters in it and moved them inside the function block, and these parameters in the form of variables are immediately displayed in the variables tab on the blocks palette, from where they can be dragged into the block editor.
I had this idea - instead of Column + Label, you can use the Button with the background image to display balls and numbers. This greatly simplifies the markup and code. But then the whole row will need to be covered from above with a transparent Column so that it is impossible to press the buttons of the balls. We came to my option: if the cover is transparent, therow is visible, but you will not be able to press the buttons. If the cover is white, then this row disappears from the screen.
I love your suggestion about using buttons for the image and numbers! I’ll definitely have a go at that. As for the functions, that was resolved today. Creating a Function/Procedure with Parameters
