Question on making simple progress bar in fengari-lua. #60

Bat1963 · 2024-03-05T00:50:39Z

Bat1963
Mar 5, 2024

I am trying to make a progress bar as follows. I am only able to write very simple code and my test example is here:

<html><head><title>Progress Bar</title></head><body>
<div><button id="run">Run</button></div>
<progress value="0" max="100" id="progress" style="width:100px;"></progress>
<script src='fengari_web.js' type="text/javascript" async></script>
<script type="application/lua" async>

local js = require "js"
local window = js.global
local document = window.document

progbar=document:getElementById("progress")
submit=document:getElementById("run")
submit:addEventListener("click", function() jim() end)

function jim()
  for i=1,10^7 do
        if i%10^6==0 then
        prog=math.floor(i/10^7*100)
        progbar.value=tostring(prog)  --only updates at the end
        print(prog)  --prints out in real time
      end
  end
end
</script></body></html>

The problem is that the progress bar only updates when the calculation has finished while the printed output to the console appears in real time. I have tried using promises and timeouts, etc, but I can't sort it out, sorry. Any help much appreciated.

daurnimator · 2024-03-05T04:16:27Z

daurnimator
Mar 5, 2024
Maintainer

Yes that is how javascript/the web works.
Things only get re-rendered when you're not in the middle of a function/event handler.

I have tried using promises and timeouts, etc, but I can't sort it out, sorry. Any help much appreciated.

Share what you tried and maybe someone can help

0 replies

Bat1963 · 2024-03-05T14:32:34Z

Bat1963
Mar 5, 2024
Author

Hello Daurnimator. I read that the proper way to this would be with web workers but I am not competent enough to work out how to convert the js code to Lua/Fengari, if it's possible. The slow subroutine would go into a worker from which the main script could receive and display updates. Does anyone have any fengari code for web workers? I might post this in the Lua reddit group a bit later as I got some very helpful replies there in the past. Thank you.

0 replies

Bat1963 · 2024-03-06T01:47:45Z

Bat1963
Mar 6, 2024
Author

Hello again, I cracked it, I think, anyway, by splitting the long calculation up into 10 chunks and calling a setTimeout after each to update the progress bar. This is probably the ugliest way of doing it but it works and is only a bit slower than the first version. Still it probably will keep the user informed as to what is going on. I think it could be called a recursion ;-? ;-?

<html><head><title>Progress Bar</title></head><body>
<div><button id="run">Run</button></div>
<progress value="0" max="100" id="progress" style="width:100px;"></progress>
<script src='fengari_web.js' type="text/javascript" async></script>
<script type="application/lua">

local js = require "js"
local window = js.global
local document = window.document

submit=document:getElementById("run")
submit:addEventListener("click", function() jim(0) end)
progbar=document:getElementById("progress")

function jim(start)
print(start)
prog=start*10
progbar.value=tostring(prog)
n=start+1

for i=1,10^6 do
if i==10^6 then window:setTimeout(function() if n<=10 then jim(n) end end,0) end
end

end
</script></body></html>

0 replies

daurnimator · 2024-03-06T03:11:50Z

daurnimator
Mar 6, 2024
Maintainer

You may want to try a coroutine:

local function dom_yield()
    local co = coroutine.running()
    js.global:setTimeout(function() assert(coroutine.resume(co)) end)
    return coroutine.yield()
end

coroutine.wrap(function()
    for i=1,10^7 do
        if i%10^6==0 then
            local prog=math.floor(i/10^7*100)
            print(prog)  --prints out in real time
            dom_yield()
        end
    end
end)()

0 replies

Bat1963 · 2024-03-06T23:28:41Z

Bat1963
Mar 6, 2024
Author

Thank you very much for that. The co-routine way is quite a bit quicker. Very interesting and slots in to my main script very easily. Nice one, top one, sorted.

<html><head><title>Progress Bar</title></head><body>
<div><button id="run">Run</button></div>
<progress value="0" max="100" id="progress" style="width:100px;"></progress>
<script src='fengari_web.js' type="text/javascript" async></script>
<script type="application/lua" async>

local js = require "js"
local window = js.global
local document = window.document

submit=document:getElementById("run")
progbar=document:getElementById("progress")

local function dom_yield()
    local co = coroutine.running()
    window:setTimeout(function() assert(coroutine.resume(co)) end)
    return coroutine.yield()
end

submit:addEventListener("click",  function() coroutine.wrap(function()
    for i=1,10^7 do
        if i%10^6==0 then
            local prog=math.floor(i/10^7*100)
            progbar.value=tostring(prog)
            dom_yield()
        end
    end
end)()
end)

</script></body></html>

0 replies

Bat1963 · 2024-03-08T23:34:18Z

Bat1963
Mar 8, 2024
Author

My main project has two slow steps so I am now trying to get two progress bars running, one for each, but I am struggling. They both run at the same time even though I use different progress bar id's, different dom_yield functions and call the coroutines co1, co2, etc. Any clues much appreciated, thank you.

0 replies

Bat1963 · 2024-03-10T22:49:57Z

Bat1963
Mar 10, 2024
Author

I cracked it to some extent with the following code, but there is a 10 second delay between the completion of the first progress bar and the starting of the next.

<html><head><title>Progress Bar</title></head><body>
<div><button id="run">Run</button></div>
<progress value="0" max="10" id="progress1" style="width:100px;"></progress>
<progress value="0" max="10" id="progress2" style="width:100px;"></progress>
<script src='fengari_web.js' type="text/javascript" async></script>
<script type="application/lua" async>

local js = require "js"
local window = js.global
local document = window.document

submit=document:getElementById("run")
progbar1=document:getElementById("progress1")
progbar2=document:getElementById("progress2")
prog1,prog2=0,0

local function dom_yield()
    local co = coroutine.running()
    window:setTimeout(function() coroutine.resume(co) end)
    return coroutine.yield()
end

submit:addEventListener("click",  function()
coroutine.wrap(function()
    for i=1,10^7 do
        if i%10^6==0 then
            prog1=prog1+1
            print(prog1)  --prints out in real time
            progbar1.value=tostring(prog1)
            dom_yield()
        end
    end
jim()
end)()
end)

function jim()
coroutine.wrap(function()
    for i=1,10^7 do
        if i%10^6==0 then
                    prog2=prog2+1
                    print(prog2)  --prints out in real time
                    progbar2.value=tostring(prog2)
                    dom_yield()
        end
    end
end)()
end

</script></body></html>

If instead I want to have one progress bar that monitors both steps, then there is no delay if I write the code as follows:

<html><head><title>Progress Bar</title></head><body>
<div><button id="run">Run</button></div>
<progress value="0" max="20" id="progress" style="width:100px;"></progress>
<script src='fengari_web.js' type="text/javascript" async></script>
<script type="application/lua" async>

local js = require "js"
local window = js.global
local document = window.document

submit=document:getElementById("run")
progbar=document:getElementById("progress")
prog=0

local function dom_yield()
    local co = coroutine.running()
    window:setTimeout(function() progbar.value=tostring(prog) coroutine.resume(co) end)
    return coroutine.yield()
end

submit:addEventListener("click",  function()
coroutine.wrap(function()
    for i=1,10^7 do
        if i%10^6==0 then
            prog=prog+1
            print(prog)  --prints out in real time
            dom_yield()
        end
    end

end)()
coroutine.wrap(function() jim()   end)()
end)

function jim()
--print(start)
for i=1,10^7 do
if i%10^6==0 then
            prog=prog+1
            print(prog)  --prints out in real time
            dom_yield()
end
end
end
</script></body></html>

That is probably the best solution, but just curious why the 10 second delay arises. I was getting a similar delay at the start with my second example until I put the "progbar.value=tostring(prog)" into dom_yield.

No worries anyway, but very much appreciated if you can have a look at this.

0 replies

Bat1963 · 2024-03-12T01:38:58Z

Bat1963
Mar 12, 2024
Author

It's working quite well in my main app now, so happy to close.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Question on making simple progress bar in fengari-lua. #60

{{title}}

Replies: 8 comments

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

Select a reply

Question on making simple progress bar in fengari-lua. #60

Bat1963 Mar 5, 2024

Replies: 8 comments

daurnimator Mar 5, 2024 Maintainer

Bat1963 Mar 5, 2024 Author

Bat1963 Mar 6, 2024 Author

daurnimator Mar 6, 2024 Maintainer

Bat1963 Mar 6, 2024 Author

Bat1963 Mar 8, 2024 Author

Bat1963 Mar 10, 2024 Author

Bat1963 Mar 12, 2024 Author

Bat1963
Mar 5, 2024

daurnimator
Mar 5, 2024
Maintainer

Bat1963
Mar 5, 2024
Author

Bat1963
Mar 6, 2024
Author

daurnimator
Mar 6, 2024
Maintainer

Bat1963
Mar 6, 2024
Author

Bat1963
Mar 8, 2024
Author

Bat1963
Mar 10, 2024
Author

Bat1963
Mar 12, 2024
Author