SteelSeries Gauges - version 1.0

[n9mfk]

Hi Mark, I noted in the html you used
two times id="gaugeTable">
also i known html5 is a work in progress
is there any way to make that page pass wc3
keep up the great work
Beau

[GraemeT]

Beau,

This line, and lines like it

Code: Select all

<canvas id="canvas_temp" style="width:251; height:251" rel="imgtip[0]"></canvas>

will fail w3c validation because, apparently, the rel attribute isn't supported in html5 canvas as either a Global or Event attribute.

The code will still work, but w3c validation will generate the error "Attribute rel not allowed on element canvas at this point"

I just make sure there are no other errors and accept that it's not allowed.

Edit: You'll get an error for each gauge you display.

cheers.

[GraemeT]

Beau,

There is always the option of removing the rel="imgtip[x]" from each line it occurs in.
The trade-off is, no pop-up graphs.

Mark,
Is there another way to show the pop-up graphs without using rel ?

[mcrossley]

Hi Mark, I noted in the html you used
two times id="gaugeTable">
also i known html5 is a work in progress
is there any way to make that page pass wc3

The id is just used to apply a CSS style, I was lazy and when the table split I used a duplicate ID. What I should have done is use a classname instead. So yes this can be fixed.

Mark,
Is there another way to show the pop-up graphs without using rel ?

Not using the popup library I currently use. If you wrap each <canvas> in an <div> and apply the rel to the div will that pass w3c? (probably not, rel attribute only applies to <a> and <link>?)

I could rewrite the HTML and the popup library to use the canvas id instead, but I'd have to move away from using English reading names like "canvas_wind" to something like "canvas_2", though perhaps with a bit of regex tweaking it could be "canvas_2_wind". The point is it needs to be machine readable and order-able, which means looking for a numeric value.

[GraemeT]

As I see it, the use of rel and rev isn't completely ruled out, but doesn't have much html5 support, either.
I read on a w3c forum a few weeks ago something about it not yet being decided whether to support these 2 attributes and to what extent.

I wish they could make up their collective minds!

I've tried a number of ways to disguise use of the rel attribute, but nothing works for me. Whatever the configuration, it seems the rel has to be within canvas tags to do what you want it to do, and then it's not legal html5.

I did wonder if a javascript work-around was feasible, but my javascript is on the low end of minimal, so I'll leave that one to someone else and enjoy this little can of worms....



cheers for now.

[mcrossley]

You could fudge it in JS, by adding the rel attributes dynamically, then it would pass the static w3c test. I'm looking at changing the popup library to use the id instead - with partial success so far...

[mcrossley]

I now have a version that removes the duplicate table id's and removes all the 'rel's, and passes w3c.

Do you want me to release this as version 1.3.2? (with no functional changes?)

w3c validator on my (customised version): http://validator.w3.org/check?uri=http% ... ator%2F1.2

EDIT: v1.3.2 now posted, no functional changes from 1.3.1 so you only need to update if w3c validation is important to you.

[Mapantz]

Love the Steel Gauges work! Just got mine up and running.
Just wondered something though .. i've seen a few people's sites using the gauges, and they had a cloudbase gauges, are there other designs to use, or extra gauges to add?

Regards.

[FTBoomer]

Can't find the .json file when using peazip.

edit* Just tried it again and no realtimegaugesT.json file

*edit II: OK don't know what a .json file is but 1.3.2 is now working for me just fine. Not sure I understand the dual compass yet though.

*edit III: OK, red pointer is average, got it.

*edit IV: Could someone please post a 2-row version guages-ssT.htm for me.

[mcrossley]

The realtimegaugesT.txt is the json file - the internal structure has changed to the JSON data format, I decided against changing the file extension due to possible web server issues.

You can look at my gauges page to see an example of a two row format page - I leave as an exercise to change gauges-ssT.html to a similar format!

[FTBoomer]

The realtimegaugesT.txt is the json file - the internal structure has changed to the JSON data format, I decided against changing the file extension due to possible web server issues.

I did not change the file name from .txt to .json and everything seems to be working. Should I change the extension?

[mcrossley]

I did not change the file name from .txt to .json and everything seems to be working. Should I change the extension?

No, just leave it ".txt" that is what is required

[FTBoomer]

I did not change the file name from .txt to .json and everything seems to be working. Should I change the extension?

No, just leave it ".txt" that is what is required

OK, check your README file then it is incorrect

I you look at my page (link below) I'm trying to change the font colors of the radio buttons but I'm new to css. Where would I change the font color wiothin the css file?

I'm going to use fafdff unless you would recommend another bright contrast color

[mcrossley]

OK, check your README file then it is incorrect

Good catch, thanks, file updated.

I you look at my page (link below) I'm trying to change the font colors of the radio buttons but I'm new to css. Where would I change the font color wiothin the css file?

I'm going to use fafdff unless you would recommend another bright contrast color

You would have to add it into gauges-ss.css in the .gaugeTable section. The text colour is not specified, you would have to add it as "color: #fafdff;"

[gpercival]

Mark - thanks for the code. Results here: http://www.wheelocknet.net/cumulus/gauges.html?gb.

The lines calling the fillStyle, however, did not work for me. The text color did not change. I substituted ctx.fillStyle = "rgba(0,50,255,1)"; for "Latest" and ctx.fillStyle = "rgba(255,0,0,1)"; for the "Average."

The color labels, I think, add just a bit more clarity when reading the gauge.

Thanks for all your help and the availability of the SteelSeries Gauges.

George Wheelock

George,

I like your idea of colouring the "Latest" and "Average" titles however I can't follow your discussion. I have tried both yours and Marks suggestions and neither of them seem to work. Exactly where did you add the ctx.fillStyle statements?

Geoff
http://www.rhumbline.com.au/weather