Circular load bar

[Parker Henderson]

Can someone post a demo or some code of a circular load bar that looks something like this

[Parker Henderson]

[Parker Henderson]

Thanks

[sankarshan dudhate]

Hi Perk,
You can make a circular load bar using a canvas and drawing circles over it. Use canvas.SetPaintStyle("Line"), create a circle, create an arc with your desired circumference.

regards,
Sankarshan

[Parker Henderson]

How would I go about drawing an arc?

[Steve Garman]

Back in April 2014, Schnee Wittchen posted a demo using image.DrawArc to draw arcs based on the settings of three seekbars.

https://groups.google.com/forum/m/#!topic/androidscript/G6fWFkVFYK4

[Parker Henderson]

So, is there an Spk of just an arc, do I need to just try to figure it out based on his code. I'm confused.

[Parker Henderson]

Im trying to make a load bar like the one in the image. The sample seems more like an oval type thing. If there's a better way of doing this please, please show me some code. It would really, really help.

[Parker Henderson]

[Steve Garman]

If nobody else jumps in, I will try to put a demo together tomorrow evening (UK time) but I should have been asleep about 4 hours ago.

As a matter of interest, there is a bug in the spk. If you start it in portrait mode, it will probably look like a circle.

[Parker Henderson]

Thank you so much. You don't know how much this means to me. I look forward to working with Droidscript.

[Chris Hopkin]

Hi Guys

You might also want to consider using an existing HTML control in a WebView for your progress bar.

Searching for 'javascript radial progress bar' comes up with a few options, such as http://kimmobrunfeldt.github.io/progressbar.js/

The attached spk is an example using progressbar.js, which is very configurable, so you could make it look and behave exactly how you want.

Thanks

Chris

[Parker Henderson]

This looks awesome! Would there be a way to hide the scroll bar so it's a fixed image?

[Chris Hopkin]

Hi Parker

If you see a scrollbar it is most likely because the WebView isn't big enough to fit the progressbar. The example simply fits the progress bar to the width of the WebView. Try making the WebView bigger vertically, or you can set the progressbar to a fixed size in the HTML page.

Thanks

Chris

[Parker Henderson]

I made the webveiw bigger but the scroll bar also got bigger... is there a way to make the progress bar so it acts almost like a button on itself?

[Parker Henderson]

I'm trying to make a game where there are lot lots of load bars showing the upgrade progress of each item.

[Parker Henderson]

Can someone help?

[Steve Garman]

Obviously I don't know what your update processes do.
This is just a copy of Chris's demo with two buttons pretending to be your updates.

[Parker Henderson]

I've gone through the code, and I think it might be my PHONE that's messing it up. Its not updating correctly. I'll try it on my tablet, which runs Androidscript way better.

[Steve Garman]

Parker,
It shows a scrollbar on my phone too. There is no way to suppress it at the moment but plans for the next version of DroidScript include the option "scrollFade" which should get rid of it.

[Steve Garman]

If you are trying it on a tablet, please note that my demo may not allow enough space for it to run in landscape orientation.

[Chris Hopkin]

Hi Guys

If you are seeing a vertical scrollbar, try adding this bit of css to the <style></style> section in Progress.html:

#container {
    height: 100%;
}
#container > svg {
    height: 100%;
}

It should make sure the circle will fit the height of the WebView in both portrait and landscape, so shouldn't show the scrollbar.

Chris

[Parker Henderson]

Is there any possible way to do this in an droidscript, or do I need to find another idea? If you do make an update that will make it possible, when will it be?

[Steve Garman]

It can be done in this version, almost certainly.

I am not going to keep writing demo scripts from scratch in this thread.

If you would like to post the script you are having trouble with, I will be happy to take a look at the easiest way to do it for you.

[Steve Garman]

In case it's any help, I've attached another version of the demo where 2 buttons pretend to be your processes.

These should not show scrollbars and they should work in landscape or portrait mode.