Circular Audio Progress bar

[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!

[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

[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!

[[-hh]]

(sorry, currently not available)

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

[dunbarx]

Bogs.

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

Craig

[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

[bogs]

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.

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.

[Klaus]

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

[[-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.]

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

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

[richmond62]

Oops: galloping infantility . . .
-

[richmond62]

Yup:
-

Code: Select all

wait 3 ticks with messages

Vast improvement.

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