dot progress indicator

[marksmithhfx]

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

dots-indicator_still_2x.gif (16.25 KiB) Viewed 5108 times

[bogs]

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

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

5. test to see if it works
6. PROFIT !!

Hope that helps.

[dunbarx]

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

[richmond62]

swipe through multiple cards

swipe makes me think you are programming for handhelds?

You do NOT need any code at all: just have your line of empty circles
witha different one coloured in on each card.

[marksmithhfx]

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

Thanks Craig, just 4. Actually, I just noticed that the iPhone home screen has this exact same indicator just above the nav bar.

[marksmithhfx]

swipe through multiple cards

swipe makes me think you are programming for handhelds?

You do NOT need any code at all: just have your line of empty circles
witha different one coloured in on each card.

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

https://postimg.cc/yDTyw3Fr

[marksmithhfx]

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

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.

Thanks for your suggestion. Very nice,

Mark

[richmond62]

SShot 2021-05-12 at 13.27.59.png (9.59 KiB) Viewed 5004 times

-
These are OVAL graphics . . .
-

[richmond62]

really difficult to line up

It shouldn't be.
-

[bogs]

...just a clue on drawing a small circular vector I can fill is the only bit missing.

Well, simple graphics are one thing that are extremely easy to do in Lc

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" 

Here is what I got -


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.

[jacque]

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.

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.

[bogs]

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.

I would have mentioned that, but it never seems to work the way I would expect it to when I've used it.

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 !

[marksmithhfx]

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.

I would have mentioned that, but it never seems to work the way I would expect it to when I've used it.

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 !

Bogs, Richmond, Jacque,

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

[dunbarx]

Bogs.

It *does* distribute them evenly for sure, they just *don't* always retain the positions the first and last were set too

I do this all the time, and the first and last always stick. On a Mac.

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

[bogs]

I do this all the time, and the first and last always stick. On a Mac.

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