Page 1 of 1
Making a speedometer?? (Beginner)
Posted: Fri Aug 10, 2012 10:37 am
by strberg
Hello!
Allright so i want make a gauge. But i don't know how.
I want a speedometer look, and that the arrow moves according to the database values. I've been googleing alot about this but i haven't found anything that explains how i should do.
An Example:
The question is, Do you watch the olympics?
Two answers, Yes and No.
The database saves these and when you press View results(<-this i know), the speedometers arrow should point at, lets say 60%. Then you know that 60% watches the olympics and 40% doesn't. (it is a half circle)
I appreciete any help!
If you haven't notice i'm new to PHP so use your easy words.
Re: Making a speedometer?? (Beginner)
Posted: Fri Aug 10, 2012 9:33 pm
by califdon
PHP won't be of much help to you, other than to interact with the database to get the numeric data you need. Display of all kinds is done with HTML, CSS and Javascript. You might be able to do this with HTML5 drawing capabilities, but I have never tried.
Here are a few references:
https://geeksretreat.wordpress.com/2012 ... 5s-canvas/
http://stackoverflow.com/questions/5083 ... ple-needed
https://github.com/vjt/canvas-speedometer
http://teknonics.wordpress.com/2012/04/14/179/
Re: Making a speedometer?? (Beginner)
Posted: Sat Aug 11, 2012 5:29 am
by strberg
Okey! HTML and CSS was I already ready to use, i forgot to say that. Lets say you can use any way you want just use as much PHP as possible.
Is it possible to do this with HTML, CSS, PHP and javascript? And how?
Re: Making a speedometer?? (Beginner)
Posted: Sat Aug 11, 2012 11:02 am
by califdon
It's not a matter of choice, PHP runs in the web server and has no capability to affect how anything is displayed in the browser. HTML and CSS and Javascript run in the browser and control everything that is displayed. That's why I gave you those links--they explain how you can do it. One of them does exactly what you said you want to do. PHP only sends the HTML, CSS and Javascript to the browser after preprocessing it. They do entirely different things.
Re: Making a speedometer?? (Beginner)
Posted: Sat Aug 11, 2012 12:40 pm
by Live24x7
Wow !
Never knew something like HTML5 canvas API existed ? - But the outcome is really awesome. (Talking about this speedometer
demo.
For the moment does not work in IE. Time to look into this

Re: Making a speedometer?? (Beginner)
Posted: Sat Aug 11, 2012 12:42 pm
by califdon
IE8 and before do not support most of HTML5. IE9 is supposed to, but I haven't tested it. IE is pretty much the last browser to support HTML5.
Here are charts showing which browsers support what:
http://speckyboy.com/2012/03/25/getting ... atibility/
Re: Making a speedometer?? (Beginner)
Posted: Sat Aug 11, 2012 12:55 pm
by Live24x7
i was going through the speedometer source code - ands its all js - wheres the role of html5 - i mean do not see any <canvas> tag in its source.
Re: Making a speedometer?? (Beginner)
Posted: Sat Aug 11, 2012 1:01 pm
by califdon
Live24x7 wrote:i was going through the speedometer source code - ands its all js - wheres the role of html5 - i mean do not see any <canvas> tag in its source.
I didn't look at that particular one. I'm sure you can do it either with js or html5's canvas. Google for
html5 canvas speedometer.
Well, of course, you need js if you want to have it interactive, like that demo, rather than just display, based on some value.
Re: Making a speedometer?? (Beginner)
Posted: Sat Aug 11, 2012 1:09 pm
by califdon
Actually, the demo you mentioned DOES use html5 canvas. If you view the source for that demo, notice that in the <head> of the page it references several js files. Click on the speedometer.js to see the full code that actually does all the work. It's a pretty long script.