dot progress indicator
Moderators: FourthWorld, heatherlaine, Klaus, kevinmiller
-
- VIP Livecode Opensource Backer
- Posts: 931
- Joined: Thu Nov 13, 2008 6:48 am
- Location: London, UK
dot progress indicator
Anyone know if there is any code lying around to implement something like this? The use I have in mind is that the dots would indicate progress as you swipe through multiple cards.
Thanks
Mark
Thanks
Mark
macOS 12.6.5 (Monterey), Xcode 14.2, LC 10.0.0, iOS 15.6.1
Targets: Mac, iOS
Targets: Mac, iOS
Re: dot progress indicator
You might gain a lot of insight from this thread.
I don't do anything with mobile, but, if I were trying to implement that functionality on a desktop os, I would ...
1. create the dots (however many you think you would need)
2. set the opaque of the dots to true
3. group the dots as a background so they show up on every card
4. code would be something like <psuedo / untested> -
5. test to see if it works
6. PROFIT !!
Hope that helps.
I don't do anything with mobile, but, if I were trying to implement that functionality on a desktop os, I would ...
1. create the dots (however many you think you would need)
2. set the opaque of the dots to true
3. group the dots as a background so they show up on every card
4. code would be something like <psuedo / untested> -
Code: Select all
# likely in the stack script or group script...
on openCard
put the number of this card into tmpCount
set the backgroundColor of graphic "dot" & tmpCount to "white" #or whatever color you want...
set the backgroundColor of graphic "dot" & (tmpCount -1) to ""
set the backgroundColor of graphic "dot" & (tmpCount +1) to "" # no matter which way you went, either of the other dots is now colorless
end openCard
6. PROFIT !!
Hope that helps.
-
- VIP Livecode Opensource Backer
- Posts: 9660
- Joined: Wed May 06, 2009 2:28 pm
- Location: New York, NY
Re: dot progress indicator
Hi.
Bogs has a method.
But this sort of indicator becomes unworkable if you have more than a handful of cards. The human eye will not "count" properly if too many, and too many might mean more than six. How many do you envision?
Craig
Bogs has a method.
But this sort of indicator becomes unworkable if you have more than a handful of cards. The human eye will not "count" properly if too many, and too many might mean more than six. How many do you envision?
Craig
-
- Livecode Opensource Backer
- Posts: 9385
- Joined: Fri Feb 19, 2010 10:17 am
- Location: Bulgaria
Re: dot progress indicator
swipe makes me think you are programming for handhelds?swipe through multiple cards
You do NOT need any code at all: just have your line of empty circles
witha different one coloured in on each card.
-
- VIP Livecode Opensource Backer
- Posts: 931
- Joined: Thu Nov 13, 2008 6:48 am
- Location: London, UK
Re: dot progress indicator
Thanks Craig, just 4. Actually, I just noticed that the iPhone home screen has this exact same indicator just above the nav bar.
macOS 12.6.5 (Monterey), Xcode 14.2, LC 10.0.0, iOS 15.6.1
Targets: Mac, iOS
Targets: Mac, iOS
-
- VIP Livecode Opensource Backer
- Posts: 931
- Joined: Thu Nov 13, 2008 6:48 am
- Location: London, UK
Re: dot progress indicator
Richmond, I tried that but I guess my real problem is I need a good way to create a line of circles. I tried in powerpoint (see attached) but it's really difficult to line up and also there are squishing and distortion effects that happen (ie. not perfectly circular) when you import or resize a bitmap image. Any suggestion on creating a line of circles based on vector graphics, with fill effects? My graphic skills are pretty pathetic. (The attached is itself just a marked up screen shot, so there are little discrepancies in image quality all over, but I thought maybe I can get the dots right. Also, I think the markup red text is pretty good. It was added in PPT as well, then the whole thing was imported as a graphic control).richmond62 wrote: ↑Wed May 12, 2021 8:27 amswipe makes me think you are programming for handhelds?swipe through multiple cards
You do NOT need any code at all: just have your line of empty circles
witha different one coloured in on each card.
https://postimg.cc/yDTyw3Fr
macOS 12.6.5 (Monterey), Xcode 14.2, LC 10.0.0, iOS 15.6.1
Targets: Mac, iOS
Targets: Mac, iOS
-
- VIP Livecode Opensource Backer
- Posts: 931
- Joined: Thu Nov 13, 2008 6:48 am
- Location: London, UK
Re: dot progress indicator
Bogs, that might be close to what I am trying to create. I guess just a clue on drawing a small circular vector I can fill is the only bit missing.bogs wrote: ↑Tue May 11, 2021 10:02 pmCode: Select all
# likely in the stack script or group script... on openCard put the number of this card into tmpCount set the backgroundColor of graphic "dot" & tmpCount to "white" #or whatever color you want... set the backgroundColor of graphic "dot" & (tmpCount -1) to "" set the backgroundColor of graphic "dot" & (tmpCount +1) to "" # no matter which way you went, either of the other dots is now colorless end openCard
Thanks for your suggestion. Very nice,
Mark
macOS 12.6.5 (Monterey), Xcode 14.2, LC 10.0.0, iOS 15.6.1
Targets: Mac, iOS
Targets: Mac, iOS
-
- Livecode Opensource Backer
- Posts: 9385
- Joined: Fri Feb 19, 2010 10:17 am
- Location: Bulgaria
Re: dot progress indicator
These are OVAL graphics . . .
-
- Attachments
-
- BLOBS.livecode.zip
- (841 Bytes) Downloaded 138 times
-
- Livecode Opensource Backer
- Posts: 9385
- Joined: Fri Feb 19, 2010 10:17 am
- Location: Bulgaria
Re: dot progress indicator
It shouldn't be.really difficult to line up
-
Re: dot progress indicator
Well, simple graphics are one thing that are extremely easy to do in Lcmarksmithhfx wrote: ↑Wed May 12, 2021 10:53 am...just a clue on drawing a small circular vector I can fill is the only bit missing.
To recreate the first picture you showed, of 5 circles in a square, I would -
1. go to the tool palette, and click on the graphic rectangle tool, then draw the square roughly.
2. open the property inspector, set the size of your square width / height, move it to its final resting place, set the locLock so it doesn't move anymore.
3. set the opaque to true, go to colors / patterns, click on backgroundColor (Fill) and use the eyedropper to get whatever color you want from any object on your screen (I used it to get the bgcolor from your post, for instance).
4. choose the graphic oval tool, and roughly draw a shape.
5. in the prop.insp. set the width / height to whatever size you want the circle to be. Most controls bottom out around 20 - 30 pixels in height, so I cut the difference and made these 25 / 25.
6. go to the basic properties and check opaque, go to colors / patterns, set the bgcolor and text / border to white.
7. in the versions of the IDE I use, there was a nice little gizmo called 'Replicate' which you could use to make copies of a control in any direction, number, spacing, etc, however, you don't have that tool in newer IDEs so just [ctrl + click + drag] the oval graphic to create a second. Other option is to copy the graphic either from the menu, or right click on it, or [ctrl + c] and paste it however many times you want.
8. select all the circles you now have, and group them. Make it a background. Click on edit group, select all the circles, go to the alignment tab and click the horizontal 3 dots, choose 'edge to edge' then top (or the other way heh), . with the circles lined up, deselect the first one, hold shift and press your arrow key to the right which gives you a space between circle 1 and 2, deselect 2, repeat, till they are all spaced the same. Stop editing the group and lock it's size and position.
9. open the messagebox, and type
Code: Select all
# assumes you named your group "dots" and square "bgSquare"
set the loc of group "dots" to the loc of graphic "bgSquare"
To use this with the code I posted above to get the un-doting effect, you can simply set the opaque to true or false for the dots. I also set the dots border width to 2 for this picture -
Now, this is all fine and well, as far as it goes, but if you want a more 3d-ish look, you can greatly expand on this using graphic effects -
...or even gradients. You can produce some really outstanding effects pretty simply.
I see Richmond got in a tad before me heh.
-
- VIP Livecode Opensource Backer
- Posts: 7235
- Joined: Sat Apr 08, 2006 8:31 pm
- Location: Minneapolis MN
- Contact:
Re: dot progress indicator
It's even easier than that. Once all the dots are created, place the last one at the right-most position where it should be in the group. Then select all the dots in order (left to right) and use the horizontal Distribute popup to choose "First to last". The dots will be evenly spaced between the first dot and the last one.8. select all the circles you now have, and group them. Make it a background. Click on edit group, select all the circles, go to the alignment tab and click the horizontal 3 dots, choose 'edge to edge' then top (or the other way heh), . with the circles lined up, deselect the first one, hold shift and press your arrow key to the right which gives you a space between circle 1 and 2, deselect 2, repeat, till they are all spaced the same. Stop editing the group and lock it's size and position.
Jacqueline Landman Gay | jacque at hyperactivesw dot com
HyperActive Software | http://www.hyperactivesw.com
HyperActive Software | http://www.hyperactivesw.com
Re: dot progress indicator
I would have mentioned that, but it never seems to work the way I would expect it to when I've used it.jacque wrote: ↑Wed May 12, 2021 4:25 pmIt's even easier than that. Once all the dots are created, place the last one at the right-most position where it should be in the group. Then select all the dots in order (left to right) and use the horizontal Distribute popup to choose "First to last". The dots will be evenly spaced between the first dot and the last one.
It *does* distribute them evenly for sure, they just *don't* always retain the positions the first and last were set too. On the other side of that, you could do it that way, with the group size unlocked, and then go back, lockLoc the group, and set the loc of the group to the loc of the rect !
-
- VIP Livecode Opensource Backer
- Posts: 931
- Joined: Thu Nov 13, 2008 6:48 am
- Location: London, UK
Re: dot progress indicator
Bogs, Richmond, Jacque,bogs wrote: ↑Wed May 12, 2021 10:54 pmI would have mentioned that, but it never seems to work the way I would expect it to when I've used it.jacque wrote: ↑Wed May 12, 2021 4:25 pmIt's even easier than that. Once all the dots are created, place the last one at the right-most position where it should be in the group. Then select all the dots in order (left to right) and use the horizontal Distribute popup to choose "First to last". The dots will be evenly spaced between the first dot and the last one.
It *does* distribute them evenly for sure, they just *don't* always retain the positions the first and last were set too. On the other side of that, you could do it that way, with the group size unlocked, and then go back, lockLoc the group, and set the loc of the group to the loc of the rect !
Thank you for the graphic lesson. I was trying to do all this in PPT when of course it is much easier in LC. Just dropping in to check msgs but will be back tomorrow to dive into this a bit more. Thanks so much -- you're all amazing.
Mark
macOS 12.6.5 (Monterey), Xcode 14.2, LC 10.0.0, iOS 15.6.1
Targets: Mac, iOS
Targets: Mac, iOS
-
- VIP Livecode Opensource Backer
- Posts: 9660
- Joined: Wed May 06, 2009 2:28 pm
- Location: New York, NY
Re: dot progress indicator
Bogs.
The tools in the "Align Controls" pane are really useful. I just wish that pane would stick when changing controls or cards. All the others do. This has been brought up before, and I am bringing it up again just to annoy the team, if they are reading this
Craig
I do this all the time, and the first and last always stick. On a Mac.It *does* distribute them evenly for sure, they just *don't* always retain the positions the first and last were set too
The tools in the "Align Controls" pane are really useful. I just wish that pane would stick when changing controls or cards. All the others do. This has been brought up before, and I am bringing it up again just to annoy the team, if they are reading this
Craig
Re: dot progress indicator
Craig, try it on 'nix and let me know how it is working out for you, I'm certainly not going to buy a Mac (Not going to pay for Win either, btw).
I also don't work in the newer IDEs (as if you didn't know), but in none of the ones I *DO* use (which has recently expanded to include 6.7.4 ) do the first and last object stick to their places.
If that works on what your using though, more power too you