|
Yeah, I know how to do it, I'm just looking for some really slick examples of it. Except my google-fu is just not coming up with any decent examples, so I'm hoping there's an actual name for something like this that will help lead me to the motherlode of ideas.
cheers
Chris Maunder
|
|
|
|
|
google: html meter bar
https://css-tricks.com/css3-progress-bars/
https://css-tricks.com/html5-meter-element/
modified 2-Jul-21 21:01pm.
|
|
|
|
|
Questions pop up:
- What entity or unit does the variable represent?
- is it a numeric value?
- is it something continuous
- are there 'standards' for this type of data
Assuming it is continuous numeric, I would go for a distribution plot _/\_ background
- would make it easy interpretable by the color blind
- it can indicate asymmetric "quality" of the value
- it can have logarithmic scales, or other non linear scales (there might be more optima?)
|
|
|
|
|
- It doesn't matter
- Not necessarily
- Not necessarily
- Irrelevant.
The idea: You have a range of values. Could be dates, or integers, or real numbers, or sorted categories. Doesn't matter. You have an "optimal" range, and you have a pointer pointing to the current value.
It's a super simple concept and I've seen a ton of them (my car's coolant guage to name a random one) but I just don't know what to search for to find really nice examples.
cheers
Chris Maunder
|
|
|
|
|
<html>
<body>
<svg height="150" width="400">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop style="stop-color: #fb1b03;stop-opacity: 1" offset="0%"></stop>
<stop style="stop-color: #f0a208;stop-opacity: 1" offset="14.473684210526185%"></stop>
<stop style="stop-color: #debb0c;stop-opacity: 1" offset="25.328947368420934%"></stop>
<stop style="stop-color: #b0cc3d;stop-opacity: 1" offset="34.53947368421038%"></stop>
<stop style="stop-color: #4bea01;stop-opacity: 1" offset="49.67105263157884%"></stop>
<stop style="stop-color: #b0cc3d;stop-opacity: 1" offset="61.18421052631564%"></stop>
<stop style="stop-color: #debb0c;stop-opacity: 1" offset="68.7499999999999%"></stop>
<stop style="stop-color: #f0a208;stop-opacity: 1" offset="79.27631578947357%"></stop>
<stop style="stop-color: #f46c06;stop-opacity: 1" offset="88.157894736842%"></stop>
<stop style="stop-color: #fb1b03;stop-opacity: 1" offset="100%"></stop>
</linearGradient>
</defs>
<rect width="300" height="20" fill="url(#grad1)" />
</svg>
</body>
</html>
|
|
|
|
|
That's a bit simple, isn't it? Where's the 100MB .JS framework you have to load with each page? 
"I have no idea what I did, but I'm taking full credit for it." - ThisOldTony
"Common sense is so rare these days, it should be classified as a super power" - Random T-shirt
AntiTwitter: @DalekDave is now a follower!
|
|
|
|
|
I love me some SVG, shame not more used, I wanted to see what CSS equivalent might look like, so here:
background: linear-gradient(90deg, #fb1b03 0%,
#f0a208 14.4%,
#debb0c 25%,
#b0cc3d 34%,
#4bea01 49%,
#b0cc3d 61%,
#debb0c 68%,
#f0a208 79%,
#f46c06 88%,
#fb1b03 100%
);
|
|
|
|
|
I'm looking for an overly complicated set of examples I can use to maybe research some repos and maybe grab something of npm and then spend a painful weekend wrestling with it and hating the "documentation" (sarcasm added) and you go ahead and just paste the code in less time for me to curse your simplicity and efficiency.
Where is the fun in that, I ask?
cheers
Chris Maunder
|
|
|
|
|
|
Something like:
1_______2___________3_____________4______5
|_______|___________x_____________|______|
where
1 and 5 are the absolute limits?
2 and 4 are the custom limit to be considered for the range?
and 3 the current value?
Being green between 2 and 4,
orange between 1 and 2 or 4 and 5
and red if smaller than 1 or bigger than 5?
M.D.V. 
If something has a solution... Why do we have to worry about?. If it has no solution... For what reason do we have to worry about?
Help me to understand what I'm saying, and I'll explain it better to you
Rating helpful answers is nice, but saying thanks can be even nicer.
|
|
|
|
|
Have you looked at the display widgets used for the status of the core in a nuclear power plant?
|
|
|
|
|
Pretty much exactly what I'm looking for, but if you Google that you don't actually get any UI examples.
I feel like Sam and Dean in Supernatural when their luck was removed and nothing they did seemed to work anymore. My google-fu. Is all gone.
cheers
Chris Maunder
|
|
|
|
|
always remember: the best controls are only visible if you accidentally hover over them. otherwise, they must remain completely invisible.
|
|
|
|
|
only thing I would add is that 10% of the male population is color blind. Whenever you start saying red and green in a sentence start worrying that they won't even see it.
To err is human to really elephant it up you need a computer
|
|
|
|
|
Good catch. I work with a guy who is color blind, so this comes up every so often.
Software Zen: delete this;
|
|
|
|
|
And I'd also add that 65% of us don't read instructions. Excellent point, and I'll ensure there's colour and clear instructions.
cheers
Chris Maunder
|
|
|
|
|
Chris Maunder wrote: And I'd also add that 65% of us don't read instructions.
Only 65%?  
M.D.V.
If something has a solution... Why do we have to worry about?. If it has no solution... For what reason do we have to worry about?
Help me to understand what I'm saying, and I'll explain it better to you
Rating helpful answers is nice, but saying thanks can be even nicer.
|
|
|
|
|
Just a thought about a layout using standard HTML controls.
A div that contains the gradient - your algorithm to create the shading based upon input pars for the "break points" in color.
A slider control immediately under it with the numeric range so you can do your slide thing.
Nice part is that the controls already exist and the more complex one, the slider, is ready made and standard. CSS can have dynamic values, the --prefixed ones, which you can modify via your algorithm or just generate the gradient values directly for the a bars.
| Ravings en masse^ |
|---|
| "The difference between genius and stupidity is that genius has its limits." - Albert Einstein | | "If you are searching for perfection in others, then you seek disappointment. If you seek perfection in yourself, then you will find failure." - Balboos HaGadol Mar 2010 |
|
|
|
|
|
Chris Maunder wrote: I'm looking for a way to graphically represent an optimum range of values, along with the actual value of a variable. One idea I've seen is a simple bar with a gradient from red to orange, green, back to orange and then to red, with the optimal range being the green zone, and a simple triangle marker pointing to the value of the variable along the range.
Is that for life, or mana?
Bastard Programmer from Hell 
"If you just follow the bacon Eddy, wherever it leads you, then you won't have to think about politics." -- Some Bell.
|
|
|
|
|
I would say 9. What say you?
"The only place where Success comes before Work is in the dictionary." Vidal Sassoon, 1928 - 2012
|
|
|
|
|
"billion" has no zeros. Zero zeros.
|
|
|
|
|
I don't know, let me look at my bank account.
Nothing succeeds like a budgie without teeth.
|
|
|
|
|
It depends. The British billion is a million millions, so there are 12 zeroes. The American billion is a thousand millions, so there are 9 zeroes.
These days, the American billion is more commonly used than the British billion.
Freedom is the freedom to say that two plus two make four. If that is granted, all else follows.
-- 6079 Smith W.
|
|
|
|
|
Actually British use - officially - the short system like 50 years now... The long system mostly remained in continental Europe...
And I asked you 
"The only place where Success comes before Work is in the dictionary." Vidal Sassoon, 1928 - 2012
|
|
|
|
|
Yes, the British Government has used 1 billion == 1,000,000,000 since 1974.
It's been at least that long since I last read (or believed) any statistics released by the British Government.
Freedom is the freedom to say that two plus two make four. If that is granted, all else follows.
-- 6079 Smith W.
|
|
|
|
General 
News 
Suggestion 
Question 
Bug 
Answer 
Joke 
Praise 
Rant 
Admin 
Submit an article or tip
