Using Beta 4
One of my biggest complaints about ForeUI is with loops. All I ever want to do is to perform a loop – but despite there being a “loop” flow control option it does not exist. Instead, the ForeUI “loop multiple times” or “loop while condition…” flow control structures force a series of actions to occur on a timer. I don’t want a timer, I want a loop!
Here is an example where I might want to rotate between 3 images
Loop{
Display Image 1
Wait 500ms
Display Image 2
Wait 500ms
Display Image 3
Wait 500ms
}
So that, while running, a user only sees a rotation of Image 1, Image 2, Image 3, Image 1, Image 2, Image 3, etc…
I could hack this example together by making the loop “Interval” 1500ms. But this is a terrible way to NEED to setup a loop. For one thing, I may later add a forth image or some other action to my loop. Every time I add an action I would have to remember to adjust the loop time and recalculate. For another thing, sometimes it is unclear how long a loop may take to execute. Especially once you have 10-20 actions being performed, or use odd delay timings or different delay lengths for each image (220ms + 175ms + 350ms + 735ms + etc = ?)
As a result, many times I have to manually tweak my loop interval multiple times during development or simply cannot accomplish what I need to. Often I want a loop to do 1 then 2 then 3 then repeat only to find out that my interval timer is too short and after a few itterations I have 4 simultaneous loops working against each other causing a stutter or I must use a REALLY long loop intervale to ensure against concurrent loops but at the sacrifice of a long delay at the end of my loop before restarting.
I had hoped “interval = 0” would be a special value to work as I wanted but actually it just seems to cause true infinite simultaneous loops and crashes my browser. All I want / need is a loop that only repeats after the last item within the loop is completed. No delay or timer based loops.
P.S. Beta v4 is really buggy but as long as you know the tricks to work around the limitations it is otherwise functional.
-
Also, as an example, you may have an IF STATEMENT inside a loop and therefore can not know how long it will take a loop to complete because it may be variable based on user interaction...
-
Great work bro.https://www.treeservicemodesto.com/
3 answers
Hi Nicholas,
I think you misunderstood the meaning of “interval” for the loop in ForeUI. The interval doesn’t mean how long the content in the loop will last, instead it means the time to wait before entering the next cycle.
[Cycle 1]->wait interval->[Cycle 2]->wait interval->[Cycle 3]->……
So you really don’t need to calculate the timing, if you don’t need any additional wait between the cycles, you can set interval to 1 millisecond. You are right about that, in V4.0 the interval with zero value is very special, it is reserved for special purpose, in which case you should not put long task into the loop, or it will really block the web browser. We will put more details about it in the document for V4.0.
I made an example for you. It is quite similar with the example you mentioned. In stead of showing/hiding images, I change text of TextBox element. You will see its text keep rotating between 1, 2 and 3:
Please notice the interval is 1ms here, means (almost) no additional waiting between cycles.
You can download the example plot here: http://www.foreui.com/misc/tmp/loop_test.4ui
Thanks for the quick reply – but I’m sorry to say that your post is not accurate. In every Plot I have made the interval causes the loop to RESTART regardless of the status of the loop contents. If the loops worked as you have said, where the interval is actually the delay between iterations, then that would be very ideal. Unfortunately, for all of my attempts, the interval is a delay before another instance of the loop occurs (or restarts?).
I can not share my real plots as they contain private information, and are complex but I just created a simple example.
There are 3 elements: 2 check boxes, and 1 imagebox. I also have 2 images (img0, img1). I want the image box to show the image associated with a marked checkbox. If both are marked then the image will bounce between both images every second. If I set the interval to 1000ms the function works acceptably (although based on timing there could be a 1 second delay before the first selection is registered). However, if I set the interval to a low value as you suggest, such as 10ms, then only the first selected image is displayed and the loop repeats every 10 ms,……. despite having a 500ms delay built into my loop.
I will attempt to upload a screenshot.
-
I see I made a couple mistakes in my example. Clearly, after the first 500ms delay I would set the image source to img1 (not img0 since it was already img0). And I would probably want to add a second 500ms delay so that both images show up for the same amount of time. This was only an example i made in a few seconds but it suffered from the described issue and these typos do not affect that.
-
Have you downloaded the example in my answer? If you did, you will understand what I said is correct. In my example, the interval is only 1ms, and the text changes for every 500ms, it proves what I said.If you have Javascript programing knowledge, you can check the code generated by ForeUI, then you will confirm the interval is exactly the wait between two cycles.
-
It is true that you need to add a second 500ms delay after setting it to img1. Otherwise, when interval is very short, next cycle comes very soon and immediately set image source back to img0, then you may not have enough time to see img1 at all.In your example, you didn't add a second 500ms delay, instead you used a long interval (1000ms), so the next cycle will come 1 second later, thus you have enough time to see img1. It works around the mistake (lacking the second delay), but it is not the correct way to go.
-
Hello Vivi,I'm not sure if it is clear to you or not that my example, either fixed or as-is, still has a problem, and still is an example of the issue I am explaining. When I run the plot with a 10ms interval instead of 1000ms, the result is img0 being displayed every 10 ms. If you were to duplicate my behavior above you would see this because actually the image blinks when it is set to visible when already visible. The result is the image blinks every 10ms and it looks very bad. I understand that without the second delay the second image would be displayed only a short time, but regardless the the first image is having an issue. If you need, I will make a more complicated example and send it to you. You should, though, easily be able to duplicate this issue.
Hi Nicholas,
As I showed you in my previous example, if there is just loop and delay between steps, it works well.
You may not imagine that, it was the conditional branching in the loop caused the problem in your example. It is hard to explain it very clearly because it involves too many technical details. The summary is that, if we put conditional branch into the loop, the cycle in the loop will not wait until all steps get executed.
In your example, if you remove the conditional branching inside the loop, you will see it works well.
I prefer to take this as a known limitation. At the time being we don’t see a good way to fix this. However, there is workaround for this, which is to avoid putting the conditional checking inside the loop. I create an example that works as you expected, and you can download it here: http://www.foreui.com/misc/tmp/rotate_images.4ui
The idea is to avoid placing conditional branching in the loop, and introduce a proper way to stop the loop. I hope that’s helpful for you.
PS: I understand you don’t like timer, but that is all we have in Javascript world. Javascript is single-threaded, and you can not block the thread, or your web browser will lose response. ForeUI tries its best to hide the usage of timer and let users feel they are dealing with a multi-threading language, but still there will be some limitations exist.
-
So conditional branching and other logic does not affect the loop even when it is placed inside the loop? That is awful to hear. I am not familiar with javascript, years ago I worked with C and do not understand why it must be like this but I can at least understand that you are saying it is not implemented to work the way that makes logical sense and try to accept that. Although, it sounds like you are describing the current implementation AS multithreaded where as I would want single threaded? My problem is that when I run my plots I get multiple simultaneous loops running against each other, instead of a single loop.
I have downloaded your recent example but I don't think it will help me. I see what you have done - it requires nearly 3 times more setup than my example. Of course, it was only an example to show the problem in a simple way, but it was not necessarily a good example of what I am trying to do. My plot is more complex, and rather than only have 2 images and checkboxes my plot has more of each. I need to demonstrate a UI that is full of conditional choices and I don't think the work around you showed will be the same in a more complex situation.
For instance, you have moved much of the logic from the image to each checkbox and are monitoring for clicks. In my UI, the checkboxes can be clicked, or they can be set by other buttons or functions. I have multiple images, multiple check boxes, and multiple other ways to select or unselect the checkboxes, as well as other conditional elements other than checkboxes.
My workaround of using a very long interval works functionally, but the worst part is that it allows a delay from user interaction to the start of the loop. Such that if my interval is 3000ms then it can take up to 3 seconds before a user interaction gets processed if the timing happen to not work out. Can you think of any other workaround that might work for more complex scenarios? I am not able to see a way to move the conditional branching outside of my loop, when I need to evaluate the conditional branching “constantly” without a clear cause of event. If I consider using a global event as in your example whenever an item is clicked or changes state, it will cause multiple instances of that event to run simultaneously as an event could get triggered again before it completed. -
Nicholas, I was trying to demonstrate you the correct way to implement scenario like this. I know it will be much more complex when you apply it on a complex project. But no matter how many loops you have in your plot, my solution can work, as long as you do things right.
Since you mentioned that you are not familiar with Javascript, I am not surprise that you don't like my example. If you try to use HTML+Javascript to implement the example you mentioned without the help from ForeUI, you will understand that ForeUI already makes thing much, much easier.
I already try my best to help as soon as possible. If you asked me earlier, you may save some time and no need to rebuild everything. If you are asking for another workaround, sorry I don't have one for now.