Percentage bars - discussion - Age of Mythology Heaven Forums

Hop to:

Bottom

Topic Subject: Percentage bars - discussion

« Previous Page 1 2 Next Page »

Lupus
Sage

posted 18 June 2009 08:44 PM EDT (US)

Complete!

Hello,

I went through my AoM archive on my computer and found an old progress bar pdf-file which I started to renew.

First my idea was to offer 4 different colours to choose from, blue, red, green and yellow. However, it took too much time so the progress bar is only available in green and red.

http://i259.photobucket.com/albums/hh295/LupusRutilus/Progress_bars/x00.jpg

bar colour - replace the x with r (red) or g (green).

percentage - replace 00 with any number from 01 - 100.

0% is sumply 00 without x

Here are some samples of the bars:

---

In the same thread I would like to have a general progress bar discussion.

Which values should be available?
- Being able to use any percent in a showcase, like 62%, is extremely important.

- You only need steps by 1% near the end (and beginning).

- Percentage can never be that precise anyway, so steps by 5% is enough.

- The numbers aren't needed, I just need a meter for the visual effects.
You will still get a good overview.

How important is the colour?
- Colour doesn't matter as long as it's a normal one.

- Being able to choose colour would make the bars fit into the showcase theme better.

- I want it red in the beginning, yellow in the middle and green when the bar is almost full.

狼

[This message has been edited by Lupus (edited 07-01-2009 @ 12:03 PM).]

Author

Replies:

Joshonator
Mortal

posted 18 June 2009 08:48 PM EDT (US) 1 / 29

It all depends on how professional you want it to be

<O><O><O><O><O><O><O><O>All my downloads here<O><O><O><O><O><O><O><O>

http://joshonator12.deviantart.com/

Progress Bars

Cirruis
Banned

posted 18 June 2009 08:59 PM EDT (US) 2 / 29

HEY LUPUS!

Peter Fallon
Mortal
(id: Xzyiothe)

posted 18 June 2009 09:08 PM EDT (US) 3 / 29

I agree with Josh, if you're making your own bars specifically for the community to use you should do it right. Whereas when you make one just for your scenario increments of 5% or 10% would be fine, if that's what would fill your specific need.

☭ Long live the Turk ☭
"Xzy is the worst parts of kman and legion combined, only with proper spelling so you know he's smart enough to act otherwise if he wasn't such an idiot." - theferret
"Xzy is like all of the terrible Guardian contributors rolled into one person. Proof that you can genetically engineer a humanoid abomination." - Fiindil

Lupus
Sage

posted 18 June 2009 10:36 PM EDT (US) 4 / 29

Okey, I take that as a "create all values". :P

Still I need to know what you think about them. Would you like to see a series or should I try another design?

Any of the colours that looks bad?

狼

Peter Fallon
Mortal
(id: Xzyiothe)

posted 18 June 2009 10:48 PM EDT (US) 5 / 29

I like the colours and the background. I'm not saying I'd use them. I'd probably make my own.

Lupus
Sage

posted 18 June 2009 11:31 PM EDT (US) 6 / 29

Well, that is probably what people do nowadays.

狼

Joshonator
Mortal

posted 18 June 2009 11:33 PM EDT (US) 7 / 29

I think SoV made 10 bars for his half blood map. Seems like a sensible idea if your going to theme the set on one map.

<O><O><O><O><O><O><O><O>All my downloads here<O><O><O><O><O><O><O><O>

http://joshonator12.deviantart.com/

Progress Bars

Yeebaagooon
EXCO Emeritus

posted 19 June 2009 04:14 AM EDT (US) 8 / 29

I used the hue effect in my R2 bars so each one was a different colour. You should just do whatever you feel comfortable with. Like so:

(Refresh and look at this bar)

Funny this should come up when I'm making some more

~~______________________________________~~ Yeebaagooon ~~______________________________________~~
~~____________________~~ AoMH Seraph ~~____________________~~
"You can't trust yeebaagooon to lead a rebelion, He would send everyone to steal mirrors so he could bask in his own brilliance." - Out Reach
"Yeebaagooon had never seen a more handsome man in all his life. He couldn't control himself, He needed to act. Gripping the mirror in his strong arms he kissed the figure before him..." - Out Reach
AoMH: Unfinished Scenarios|Singleplayer: Codename Ripto|Multiplayer: Minigames Z|CSC 7
Ex Seraphs Dictator, Spore Heaven Seraph

[This message has been edited by Yeebaagooon (edited 06-19-2009 @ 04:14 AM).]

Nick The Hun
Mortal
(id: Nick_The_Hunn)

posted 19 June 2009 04:20 AM EDT (US) 9 / 29

i actually like those Lupus' bars.

New Project: 'Anatolia'

JDmino
Mortal

posted 19 June 2009 04:27 AM EDT (US) 10 / 29

So do I, they are simple, yet effective.

The lord of all living beings, holder of the Il�vatar
~My Heavens~
AoMH
SpH
DoFH
Also, I am here.

Joshonator
Mortal

posted 19 June 2009 06:54 AM EDT (US) 11 / 29

Funny this should come up when I'm making some more

Aha i knew you would try to make a better set than me eventually

<O><O><O><O><O><O><O><O>All my downloads here<O><O><O><O><O><O><O><O>

http://joshonator12.deviantart.com/

Progress Bars

Lupus
Sage

posted 19 June 2009 10:01 AM EDT (US) 12 / 29

Thank you! I think I'll stick to red and green and make a whole series of values.

First I believed my time would be wasted if nobody used them, but after reading your posts I realised that it doesn't matter as long as I use them myself.

Still I'll upload them for the community too, in case someone will find them usefull.

狼

nottud
Demigod

posted 19 June 2009 12:08 PM EDT (US) 13 / 29

I think we should somehow figure out a way pahaps via colours or staking images somehow to make them adjust length depending what the user wants rather than making a new pic for every %. Pahaps make it somehow dynamic!

The boy with the mad imagination
Prepare for the ultimate duel!
Learn to use all my triggers and what you can do with them. Visit here.
Find out and download the transform trigger here.
Play some minigames I have created outside AOM including some 3D games here.

HealyWorks
Mortal

posted 19 June 2009 12:11 PM EDT (US) 14 / 29

These look pretty nice, are they available?

Coming Soon...
Something Intresting...

Mythic_Freak
Mortal

posted 19 June 2009 01:57 PM EDT (US) 15 / 29

PHP FTW... 5 lines of code and you're set.

If we knew what it was we were doing, it would not be called research, would it? - Einstein, A.
Master XS - AoM Code Reference - Trigger Loader - Trigger Requests - Chess

Wow, I never thought that I would actually know something before nottud did... it's actually not all that satisfying ~ Steak

Alex
(VIP) Reverie World Studios
(id: pEpsIdUDe_123)

posted 19 June 2009 03:21 PM EDT (US) 16 / 29

Nice, Lupus.

I added my own bit to make it more customizable.

Not php, but html should work fine and works with the forum. I'm not sure if you'd be able to put the percent numbers on the progress bars (unless you forgo the side borders and make the repeated graphic the background image).

33.33%

57%

93%

etc.

I'm not going to post the whole code as it will break the table, so edit this post to see how it's done. And for your progress, edit:

<img src="http://elpea.net/hg/upload/upload/1245436433pmid.png" width="3X" height="16">

Where 3X = 3(your progress)
ie: Progress = 15%; 3X = 45

Forgoing side borders and using percentage figures:

18%

Inazuma
Mortal

posted 19 June 2009 03:28 PM EDT (US) 17 / 29

Wow Alex I'm impressed. Great idea!

DeviantArt | Me | Liquid Fire

~ I dream of a day when a chicken can cross the road without someone questioning its motives ~

Lupus
Sage

posted 20 June 2009 12:07 PM EDT (US) 18 / 29

Thanks Alex! Looks great. This might be extremely useful since I easily can create different colours and backgrounds.

Now I noticed that the end bits are a bit too sharp, but that can be fixed.

One thing though... The 100% bar is actually 314 px and not very easy to divide with 3. The resting 14 pixels make every 7th percent 4px instead of just 3px.
With other words, I'll resize the background so it holds precisely 300px

The formula should also take the corners in account as the corners create 3,3% themselves (5 x 2 px).

3X - 10 = bar length

狼

Yeebaagooon
EXCO Emeritus

posted 20 June 2009 12:34 PM EDT (US) 19 / 29

I was toying with the idea of using tables and borders myself, but I couldn't get the to look as good as Alex's

. You could try putting a completely transparent image in the [ img ] tag in the < td > itself that would make the text central.

[This message has been edited by Yeebaagooon (edited 06-20-2009 @ 12:37 PM).]

Alex
(VIP) Reverie World Studios
(id: pEpsIdUDe_123)

posted 20 June 2009 01:45 PM EDT (US) 20 / 29

One thing though... The 100% bar is actually 314 px and not very easy to divide with 3. The resting 14 pixels make every 7th percent 4px instead of just 3px.
With other words, I'll resize the background so it holds precisely 300px

The formula should also take the corners in account as the corners create 3,3% themselves (5 x 2 px).

3X - 10 = bar length

You can of course change it however you'd like, but where are you getting the 314 from? The background image is 326 and the 100% bar + sides is 310. And yeah, I didn't factor the sides into the percentage, but just subtracting ten would work. The full bar + sides ends up being centered with the margins so I'm not sure what you want to get by resizing it, unless you don't want margins? Or are you not getting the margins? I haven't looked at this on any other computers.

100% + sides

0% + sides

You could try putting a completely transparent image in the [ img ] tag in the < td > itself that would make the text central.

You could try it, I'm not sure I understand what you're saying. Since there's three components to the bar, you can't put it all in the background and you can't have another td over the bar. I tried putting each component into a separate td but it left spaces between them and resized the middle.

[This message has been edited by Alex (edited 06-20-2009 @ 01:52 PM).]

Lupus
Sage

posted 21 June 2009 10:43 AM EDT (US) 21 / 29

Compare these two and you see that the red bar doesn't fully cover the background as much as the yellow does.

How do you change the location of the red bar inside the table?

EDIT

Why does this happen:
[Protocol '"http' for image URL not supported.]
when I try to stretch out an image? (It is png as yours)

狼

[This message has been edited by Lupus (edited 06-21-2009 @ 12:06 PM).]

Alex
(VIP) Reverie World Studios
(id: pEpsIdUDe_123)

posted 21 June 2009 03:01 PM EDT (US) 22 / 29

How do you change the location of the red bar inside the table?

Do you want to change it or just have it cover more? There's not much room to really change its location, unless you wanted it pressed up against the sides. And if you want smaller margins, you could either crop off some width in the background image or add width to the sides if you go in to make them less sharp.

EDIT

Why does this happen:
[Protocol '"http' for image URL not supported.]
when I try to stretch out an image? (It is png as yours)

Because working with HTML on HG's software is an absolute nightmare. It likes to convert a lot of html so you might want to copy and paste your code before going into preview it, just in case it gets converted or screwed up.

Lupus
Sage

posted 21 June 2009 03:21 PM EDT (US) 23 / 29

Yes, I want to move the starting corner 2px to the left so it covers the whole background. It doesn't seem to be any values in the html code to change that.

Quoted from Alex:
Because working with HTML on HG's software is an absolute nightmare. It likes to convert a lot of html so you might want to copy and paste your code before going into preview it, just in case it gets converted or screwed up.

But I copied your code and replaced the images with my own from photobucket. The one I stretched out didn't work, so I figured there must be something with photobucket that doesn't support that.