Page 1 of 3
Circular Audio Progress bar
Posted: Mon Sep 30, 2019 2:00 pm
by dpalmersce@gmail.com
Hello everyone,
I am currently working on an audio playback controller. The customer is wanting what appeared to be a simple progress circle. But I am drawing a blank on how to even start this. It basically just fills the color of the stroke of the circle in sync with the audio playback time. Is there a widget or tutorial that can help me with this?
Thank you in advance for any help!
Re: Circular Audio Progress bar
Posted: Mon Sep 30, 2019 2:58 pm
by Klaus
Hi dpalmersce,
you can use an OVAL GRAPHIC and set its ARCANGLE (and maybe STARTANGLE) property.
Drag on onto your card, colorize it and drag the sliders for these values in the inspector to see what happens.
Best
Klaus
Re: Circular Audio Progress bar
Posted: Mon Sep 30, 2019 8:59 pm
by dpalmersce@gmail.com
I'm not sure I understand. I am still young to Livecode. Could you do a quick sample of this? Thank you for the reply and help!
Re: Circular Audio Progress bar
Posted: Tue Oct 01, 2019 8:19 am
by [-hh]
(sorry, currently not available)
Re: Circular Audio Progress bar
Posted: Tue Oct 01, 2019 11:35 am
by bogs
You probably couldn't do better than -hh's stack, but just to give you the 'quick sample' you asked about from Klaus's explanation, here is a way to create a
simple progress circle (YouTube).
Ultimately how the progress circle looks is only limited by your imagination, it could look like anything you can think of.
Re: Circular Audio Progress bar
Posted: Tue Oct 01, 2019 2:38 pm
by dunbarx
Bogs.
Is this "15 minutes of LC" something you put together?
Craig
Re: Circular Audio Progress bar
Posted: Tue Oct 01, 2019 3:52 pm
by dpalmersce@gmail.com
Thank you so much for this! One last question. How do you connect this to an audio timeframe? I am sorry for so many questions, I have just had brain freeze on this.
Thank you
Re: Circular Audio Progress bar
Posted: Tue Oct 01, 2019 4:28 pm
by bogs
dunbarx wrote: ↑Tue Oct 01, 2019 2:38 pm
Is this "15 minutes of LC" something you put together?
Yah, I mentioned it briefly in the 'basic tutorial thread' in
this post. I thought it might be better to separate it from people who subscribe to my other channel (I'm still not sure why people subscribe to the other one

).
Anyhoo, you can see each video individually listed
here.
dpalmersce@gmail.com wrote: ↑Tue Oct 01, 2019 3:52 pm
One last question. How do you connect this to an audio timeframe?
If your talking about -hh's widget, I have no clue. If your talking about my little simple thingie, you just set the startAngle to (whatever) instead of putting it in a repeat loop. The audio has a position scroller, set it to that scrollers position in a handler.
Re: Circular Audio Progress bar
Posted: Tue Oct 01, 2019 4:52 pm
by Klaus
Here some very good resources to learn the very basics of LC:
http://www.hyperactivesw.com/revscriptc ... ences.html
Re: Circular Audio Progress bar
Posted: Tue Oct 01, 2019 7:19 pm
by [-hh]
As you are afraid of widgets here a
self contained script (
creates the progress on the fly).
THIS IS FOR DESKTOP (Mac/win/nux and LC 6/7/8/9). For mobile(ios, android) use the corresponding mobile messages.
Usage:
Make a new player object and give it a unique name. Then set the script of it to the following. This shows a circular progress at the bottom right of the player that shows the audio time as percentage of the duration.
Code: Select all
#-- Shows a circular progress connected to
#-- a player object. [-hh fecit, Oct 2019]
local isStopped=true, pp
on showProgress d
put the currentTime of me into cT
displayProgress (360*cT/d)
if isStopped then exit showProgress
send "showProgress d" to me in 3 ticks
end showProgress
on displayProgress v
put max(0,min(360,v)) into v
set arcangle of grc pp to v
put format("%000.0f%%",v/3.6) into fld pp
end displayProgress
on playStarted
put false into isStopped
createProgress
showProgress the duration of me
end playStarted
on playPaused
put true into isStopped
createProgress
end playPaused
on playStopped
put true into isStopped
createProgress
end playStopped
on currentTimeChanged ct
displayProgress 360*ct/the duration of me
end currentTimeChanged
on mouseUp
createProgress
displayProgress 360*the currentTime of me/the duration of me
pass mouseUp
end mouseUp
on createProgress
lock screen; lock messages
put (the short name of me & "progress") into pp
if there is no grp pp then create grp pp
if there is no fld pp then
create fld pp in grp pp
set locktext of fld pp to true
set rect of fld pp to (0,0,48,24)
set showborder of fld pp to false
set textalign of fld pp to "right"
set forecolor of fld pp to "0,0,102" -- dark blue
set textsize of fld pp to 12
end if
put pp&"back" into pp1
if there is no grc pp1 then
create grc pp1 in grp pp
set style of grc pp1 to "oval"
set rect of grc pp1 to (0,0,54,54)
set forecolor of grc pp1 to "204,204,204" -- gray
set linesize of grc pp1 to 8
set opaque of grc pp1 to false
end if
if there is no grc pp then
clone grc pp1
set the name of it to pp
set startangle of grc pp to 90
set forecolor of grc pp to "51,51,51" -- dark gray
end if
set loc of fld pp to the the loc of grc pp1
set loc of grc pp to the the loc of grc pp1
set botleft of grp pp to the right of me,the bottom of me + 16
end createProgress
[Edit: Tested now to work in LC 6/7/8/9. Removed also a bug with mouseUp.]
Re: Circular Audio Progress bar
Posted: Wed Oct 02, 2019 10:18 am
by richmond62
Sorry, late to the party.
The reason I turned up was that all the above seem mind-blowingly
and needlessly complicated except for what
Klaus suggested.
-
-
Code: Select all
on mouseUp
set the startAngle of grc "CRUNCH" to 0
put 0 into DEG
repeat until DEG > 360
set the arcangle of grc "CRUNCH" to DEG
set the label of grc "MASK" to DEG
add 1 to DEG
wait 3 ticks
end repeat
end mouseUp
Stack deleted as have uploaded a newer version below.
Re: Circular Audio Progress bar
Posted: Wed Oct 02, 2019 10:47 am
by bogs
Couple observations for dpalmersce to make note of here -
* Richmond's solution and my solution are both forms of what Klaus was talking about.
* If you use Richmond's code directly, I'd suggest
either sticking a 'wait with messages' line into the end of the repeat, or, better yet, calling a custom handler that will do the loop for you "in time". Here are examples of both, applied to Richmond's demo code -
wait with messages...
Code: Select all
on mouseUp
set the startAngle of grc "CRUNCH" to 0
put 0 into DEG
repeat until DEG > 360
set the arcangle of grc "CRUNCH" to DEG
set the label of grc "MASK" to DEG
add 1 to DEG
wait 3 ticks with messages # to allow the engine to process other actions during this time period...
end repeat
end mouseUp
and custom version....
Code: Select all
on mouseUp
setAngle # custom handler name...
end mouseUp
on setAngle
set the startAngle of grc "CRUNCH" to 0
put 0 into DEG
if DEG >= 360 then exit setAngle
set the arcangle of grc "CRUNCH" to DEG
set the label of grc "MASK" to DEG
add 1 to DEG
send setAngle to me in 3 ticks
end setAngle
of the two examples, I prefer the second as it is non-blocking by default so other events can happen as they normally would, but really either works.
Re: Circular Audio Progress bar
Posted: Wed Oct 02, 2019 10:47 am
by richmond62
Oops: galloping infantility . . .
-
Re: Circular Audio Progress bar
Posted: Wed Oct 02, 2019 10:49 am
by richmond62
Yup:
-
Vast improvement.

Re: Circular Audio Progress bar
Posted: Wed Oct 02, 2019 11:12 am
by richmond62
With all due respects to Herr Hoch, I will always avoid a
widget if I possibly can
for the simple reason that in
LiveCode itself (rather than a widget) it is a lot easier to
tweak things the way one wants.
You'll take the LCB road and I'll take the LC road,
And I'll get my stack finished afore you.
Anreden, Herr Niedrig.
