Circular Audio Progress bar
Moderators: FourthWorld, heatherlaine, Klaus, kevinmiller, robinmiller
-
- Posts: 25
- Joined: Wed Aug 28, 2019 4:58 pm
Circular Audio Progress bar
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!
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
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
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
-
- Posts: 25
- Joined: Wed Aug 28, 2019 4:58 pm
Re: Circular Audio Progress bar
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!
-
- VIP Livecode Opensource Backer
- Posts: 2262
- Joined: Thu Feb 28, 2013 11:52 pm
- Location: Göttingen, DE
Re: Circular Audio Progress bar
(sorry, currently not available)
Last edited by [-hh] on Wed Dec 11, 2019 11:40 pm, edited 1 time in total.
shiftLock happens
Re: Circular Audio Progress bar
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.
Ultimately how the progress circle looks is only limited by your imagination, it could look like anything you can think of.
-
- VIP Livecode Opensource Backer
- Posts: 9648
- Joined: Wed May 06, 2009 2:28 pm
- Location: New York, NY
Re: Circular Audio Progress bar
Bogs.
Is this "15 minutes of LC" something you put together?
Craig
Is this "15 minutes of LC" something you put together?
Craig
-
- Posts: 25
- Joined: Wed Aug 28, 2019 4:58 pm
Re: Circular Audio Progress bar
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
Thank you
Re: Circular Audio Progress bar
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.
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.dpalmersce@gmail.com wrote: ↑Tue Oct 01, 2019 3:52 pmOne last question. How do you connect this to an audio timeframe?
Re: Circular Audio Progress bar
Here some very good resources to learn the very basics of LC:
http://www.hyperactivesw.com/revscriptc ... ences.html
http://www.hyperactivesw.com/revscriptc ... ences.html
-
- VIP Livecode Opensource Backer
- Posts: 2262
- Joined: Thu Feb 28, 2013 11:52 pm
- Location: Göttingen, DE
Re: Circular Audio Progress bar
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.
[Edit: Tested now to work in LC 6/7/8/9. Removed also a bug with mouseUp.]
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
Last edited by [-hh] on Wed Oct 02, 2019 3:29 pm, edited 3 times in total.
shiftLock happens
-
- Livecode Opensource Backer
- Posts: 9359
- Joined: Fri Feb 19, 2010 10:17 am
- Location: Bulgaria
Re: Circular Audio Progress bar
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.
- -
Stack deleted as have uploaded a newer version below.
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
Last edited by richmond62 on Wed Oct 02, 2019 10:48 am, edited 1 time in total.
Re: Circular Audio Progress bar
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...
and custom version....
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.
* 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
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
-
- Livecode Opensource Backer
- Posts: 9359
- Joined: Fri Feb 19, 2010 10:17 am
- Location: Bulgaria
Re: Circular Audio Progress bar
Oops: galloping infantility . . .
-
-
- Attachments
-
- COUNTER.livecode.zip
- Here's the stack.
- (8.31 KiB) Downloaded 324 times
Last edited by richmond62 on Wed Oct 02, 2019 11:09 am, edited 1 time in total.
-
- Livecode Opensource Backer
- Posts: 9359
- Joined: Fri Feb 19, 2010 10:17 am
- Location: Bulgaria
Re: Circular Audio Progress bar
Yup:
-
Vast improvement.
-
Code: Select all
wait 3 ticks with messages
-
- Livecode Opensource Backer
- Posts: 9359
- Joined: Fri Feb 19, 2010 10:17 am
- Location: Bulgaria
Re: Circular Audio Progress bar
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.
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.