Adding a new Component - ProgressBar

[Yash Patel]

So Android has a progress bar component that is not featured in App Inventor and I wanted to gauge interest in the component and talk about things I was thinking about for it (I have been playing around with the concept for a little bit). In case it's not clear what I'm talking about, I thinking of something like this http://huuah.com/images/progress2.png.

Anyway I think that a ProgressBar would be a pretty cool component to add. I think some properties it could have would be:

Width

Height

ProgressColor // Like the color of the bar

MaxProgress // So the max percentage can be a 100%, but maybe there are 200 things that need to get done, so 50/200 = 25%

and some methods in the blocks could be

IncreaseProgress(int progressToAdd) // So if the progress is 50/200 and we add 10, then the progress would be 60/200, or from 25% to 30%

DecreaseProgress(int progressToRemove)

Let me know what you all think for everything from the names to concept in general.

[Jos Flores]

Hi Yash,

thanks for the proposal. Is this supposed to be a modal window, as in,
will the app be inactive while the progress bar is working? But
something should be happening in the background or the progress
wouldn't make sense, right?
I think it would be much easier to understand if you explain why you'd
want a component like this. Also, if you place all this in a google
doc and allow for comments, it might be easier to give feedback. But
definitely talk about the problem/issue/scenario you are trying to
solve or create a solution for, it will make much easier to grasp what
you are proposing to do.

cheers,
José

cheers,
José

> --
> You received this message because you are subscribed to the Google Groups
> "App Inventor Open Source Development" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to app-inventor-open-so...@googlegroups.com.
> To post to this group, send email to
> app-inventor-o...@googlegroups.com.
> Visit this group at
> http://groups.google.com/group/app-inventor-open-source-dev.
> For more options, visit https://groups.google.com/d/optout.

[Yash Patel]

So I started a Google Doc here:

https://docs.google.com/document/d/1Nx3uL3KkmqT4fn5MHEdvT8-kagMkRMa-za29Fc2uQUE/edit?usp=sharing

To answer your question, it would not be something in a modal. It would a component that you can see on the actual screen.

-Yash

[Mark Sherman]

This feature would certainly be useful! Especially as non-modal, where the app can perform a process and update it periodically.

The most recent use I've seen was an Innovative App Challenge winner who leveraged an online API to do some heavy processing, where the app sits and waits, and can query the status of the job on the server. We tried building a progress bar with a canvas, and it mostly worked, but it took too long and was so complex they ended up scrapping it.

What they wanted a progress bar component to do is almost exactly as this describes.

[Taifun]

@Mark: currently you also can build a simple progress bar using 2 labels, see here https://puravidaapps.com/filebyfile.php

Taifun

[Gareth Haylings]

Hi Yash

I have added a few comments on your proposal document

@Mark - We tried building a progress bar with a canvas, and it mostly worked. but it took too long and was so complex they ended up scrapping it. 

I used do it this way myself as I could make it look really nice graphically but I agree the coding was over complex really

On my modified version of AI I have done a slight modification the slider component to give it a dual function so it can be used as both a slider for user input and a progress bar.

[Mark Sherman]

Yes, the slider was a good choice, too. The labels are clever, and a tiny bit simpler. Thank you!

The real reason the kids dropped it wasn't the bar feature, it was the API itself. Long story. Don't worry about it.

--
You received this message because you are subscribed to a topic in the Google Groups "App Inventor Open Source Development" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/app-inventor-open-source-dev/4TwDHyLejVs/unsubscribe.
To unsubscribe from this group and all its topics, send an email to app-inventor-open-so...@googlegroups.com.

[Yash Patel]

Wow yea, that's a great idea. I just tried doing it myself, and a slight modification on the slider gives pretty much everything I wanted for ProgressBar component. The two things that need to be done were to hide the thumb part and set the slider to be disabled. 

So I think to allow for a ProgressBar, we could be either add a property/method to the Slider component to allow it to function as either the Slider or ProgressBar, or to actually make a new component that simply extends the Slider. Either way, as mentioned, it would be very easy to allow for a ProgressBar feature. Which do you all think is better?

-Yash

[Gareth Haylings]

I prefer the idea of a multipurpose component myself. 

I know it is possible to remove the thumb icon from the slider when creating an app via ecilpse as I have managed to do this. Unfortunately I couldn't work out how to remove the thumb from the slider in the AI source code. If you manage to work out how to remove the thumb in the AI code I would be interest to know. 

How I disabled the slide is that I set a variable to detect when the slider was touched and only changed it position when the touch variable was set to true.

[SteveJG]

Be aware, there are several very workable "Progress Bar" implementations on AI2 using AI2 components....    https://groups.google.com/forum/#!searchin/mitappinventortest/Progress$20Bar/mitappinventortest/p4O0ibBNcdM/roQVN2ue6YUJ   

A fancy gadget would be nice, however, is one needed by a large number of users or requested by a large number of users?

Good luck with the project.

-- Steve

[Yash Patel]

Yea, I agree there is no need for a complete other component. However, I think the other workarounds are too complicated for something that can be fixed so easily.

If any of you have a second and could give me feedback on my pull request, that would be great:

https://github.com/mit-cml/appinventor-sources/pull/283

Basically, it takes the approach of adding a property to the Slider component to make it behave as a Progress Bar by simply removing the Thumb Slider.

[Gareth Haylings]

Hi

Very nice mod. Well done. This should definitely added to AI.

[Mark Sherman]

Looks good to me! (Yes, I tested it!) I also left a comment on github. This trick I think looks really great, and other than the modal power of the android progress bar, has everything an app inventor user needs.

Attached is the compiled test app everyone can play with, along with the source code. The source aia will of course only work in a local copy running this change.

-Mark

[Mark Friedman]

I would argue that if the notion of a Progress Bar is useful enough to App Inventor users then it does make sense to have it be a component in and of itself, even if it is implemented similarly to the Slider component.  A typical App Inventor user is not going to easily make the connection between a Slider and a Progress Bar (despite the weird fact that the documentation for the Slider mentions that it is a progress bar!).

-Mark

--

[M. Hossein Amerkashi]

+1 Mark

Also what good are the percentages (thumb position) if they are not true calculations?  Also a label can with background color could exactly do same as slider with no thumb.