Circular Audio Progress bar

Visuals, audio, animation. Blended, not stirred. If LiveCode is part of your rich media production toolbox, this is the forum for you.

Moderators: Klaus, FourthWorld, heatherlaine, robinmiller, kevinmiller

dpalmersce@gmail.com
Posts: 25
Joined: Wed Aug 28, 2019 4:58 pm

Circular Audio Progress bar

Post by dpalmersce@gmail.com » Mon Sep 30, 2019 2:00 pm

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!

Klaus
Posts: 11427
Joined: Sat Apr 08, 2006 8:41 am
Location: Germany
Contact:

Re: Circular Audio Progress bar

Post by Klaus » Mon Sep 30, 2019 2:58 pm

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

dpalmersce@gmail.com
Posts: 25
Joined: Wed Aug 28, 2019 4:58 pm

Re: Circular Audio Progress bar

Post by dpalmersce@gmail.com » Mon Sep 30, 2019 8:59 pm

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!

[-hh]
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 2196
Joined: Thu Feb 28, 2013 11:52 pm
Location: Göttingen, DE

Re: Circular Audio Progress bar

Post by [-hh] » Tue Oct 01, 2019 8:19 am

(sorry, currently not available)
Last edited by [-hh] on Wed Dec 11, 2019 11:40 pm, edited 1 time in total.
shiftLock happens

bogs
Posts: 4097
Joined: Sat Feb 25, 2017 10:45 pm

Re: Circular Audio Progress bar

Post by bogs » Tue Oct 01, 2019 11:35 am

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.
Image

dunbarx
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 6347
Joined: Wed May 06, 2009 2:28 pm
Location: New York, NY

Re: Circular Audio Progress bar

Post by dunbarx » Tue Oct 01, 2019 2:38 pm

Bogs.

Is this "15 minutes of LC" something you put together?

Craig

dpalmersce@gmail.com
Posts: 25
Joined: Wed Aug 28, 2019 4:58 pm

Re: Circular Audio Progress bar

Post by dpalmersce@gmail.com » Tue Oct 01, 2019 3:52 pm

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

bogs
Posts: 4097
Joined: Sat Feb 25, 2017 10:45 pm

Re: Circular Audio Progress bar

Post by bogs » Tue Oct 01, 2019 4:28 pm

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 :shock: ).

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.
Image

Klaus
Posts: 11427
Joined: Sat Apr 08, 2006 8:41 am
Location: Germany
Contact:

Re: Circular Audio Progress bar

Post by Klaus » Tue Oct 01, 2019 4:52 pm

Here some very good resources to learn the very basics of LC:
http://www.hyperactivesw.com/revscriptc ... ences.html

[-hh]
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 2196
Joined: Thu Feb 28, 2013 11:52 pm
Location: Göttingen, DE

Re: Circular Audio Progress bar

Post by [-hh] » Tue Oct 01, 2019 7:19 pm

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.]
Last edited by [-hh] on Wed Oct 02, 2019 3:29 pm, edited 3 times in total.
shiftLock happens

richmond62
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 3934
Joined: Fri Feb 19, 2010 10:17 am
Location: Bulgaria

Re: Circular Audio Progress bar

Post by richmond62 » Wed Oct 02, 2019 10:18 am

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.
-
Counter.png
-

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.
Last edited by richmond62 on Wed Oct 02, 2019 10:48 am, edited 1 time in total.

bogs
Posts: 4097
Joined: Sat Feb 25, 2017 10:45 pm

Re: Circular Audio Progress bar

Post by bogs » Wed Oct 02, 2019 10:47 am

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.
Image

richmond62
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 3934
Joined: Fri Feb 19, 2010 10:17 am
Location: Bulgaria

Re: Circular Audio Progress bar

Post by richmond62 » Wed Oct 02, 2019 10:47 am

Oops: galloping infantility . . .
-
Counter2.png
Attachments
COUNTER.livecode.zip
Here's the stack.
(8.31 KiB) Downloaded 12 times
Last edited by richmond62 on Wed Oct 02, 2019 11:09 am, edited 1 time in total.

richmond62
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 3934
Joined: Fri Feb 19, 2010 10:17 am
Location: Bulgaria

Re: Circular Audio Progress bar

Post by richmond62 » Wed Oct 02, 2019 10:49 am

Yup:
-

Code: Select all

wait 3 ticks with messages
Vast improvement. 8)

richmond62
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 3934
Joined: Fri Feb 19, 2010 10:17 am
Location: Bulgaria

Re: Circular Audio Progress bar

Post by richmond62 » Wed Oct 02, 2019 11:12 am

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. :wink:

Post Reply

Return to “Rich Media”