Making a speedometer?? (Beginner)

PHP programming forum. Ask questions or help people concerning PHP code. Don't understand a function? Need help implementing a class? Don't understand a class? Here is where to ask. Remember to do your homework!

Moderator: General Moderators

Post Reply
strberg
Forum Newbie
Posts: 2
Joined: Fri Aug 10, 2012 10:25 am

Making a speedometer?? (Beginner)

Post 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.
User avatar
califdon
Jack of Zircons
Posts: 4484
Joined: Thu Nov 09, 2006 8:30 pm
Location: California, USA

Re: Making a speedometer?? (Beginner)

Post 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/
strberg
Forum Newbie
Posts: 2
Joined: Fri Aug 10, 2012 10:25 am

Re: Making a speedometer?? (Beginner)

Post 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?
User avatar
califdon
Jack of Zircons
Posts: 4484
Joined: Thu Nov 09, 2006 8:30 pm
Location: California, USA

Re: Making a speedometer?? (Beginner)

Post 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.
Live24x7
Forum Contributor
Posts: 194
Joined: Sat Nov 19, 2011 9:32 am

Re: Making a speedometer?? (Beginner)

Post 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 :idea:
User avatar
califdon
Jack of Zircons
Posts: 4484
Joined: Thu Nov 09, 2006 8:30 pm
Location: California, USA

Re: Making a speedometer?? (Beginner)

Post 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/
Live24x7
Forum Contributor
Posts: 194
Joined: Sat Nov 19, 2011 9:32 am

Re: Making a speedometer?? (Beginner)

Post 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.
User avatar
califdon
Jack of Zircons
Posts: 4484
Joined: Thu Nov 09, 2006 8:30 pm
Location: California, USA

Re: Making a speedometer?? (Beginner)

Post 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.
Last edited by califdon on Sat Aug 11, 2012 1:03 pm, edited 2 times in total.
Reason: Added an afterthought.
User avatar
califdon
Jack of Zircons
Posts: 4484
Joined: Thu Nov 09, 2006 8:30 pm
Location: California, USA

Re: Making a speedometer?? (Beginner)

Post 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.
Post Reply