July
27
Posted on 27-07-2009
Filed Under (Arduino) by Dan

I needed some web-based gauges for my ArduinOil project frontend and I wanted them to be driven from PHP if possible. I came across Flash Open Gauges (FOG) written by Charles Nichols, which looked really slick and gave plenty of options as to the style of gauge and the methods that you feed it data. I started playing around with the scripts to customize them for my purposes. As I was learning about the feature of dynamically feeding the gauges data via PHP, I started thinking about how easy it would be to make the gauges live. A little tinkering, and voila! This won’t be particularly helpful in any of the projects I have going on at the moment, but I thought it might help someone else, so here’s how you’d make it work:

  1. You will need and Arduino (duh!), Ethernet Sheild, and some type of analog input device (potentiometer, photoresistor, etc).
  2. Go get the FOG files here.
  3. Download the demo scripts and sketch files I’ve created here.
  4. Extract the FOG into a folder on your server (can be either Windows or Linux, but must have PHP installed).
  5. Extract the demo scripts into the same folder as the FOG code on your web server and change the configurable variables in arduino_fetch_data.php to reflect the IP of your Arduino.
  6. Change the sketch code to reflect the IP you’d like your Arduino to have, upload the sketch and connect something to analog pin 5.
  7. Open the index.html in a browser by navigating to your server’s address.
  8. Read the FOG documentation and hack the scripts to do what you want!

I recorded a quick demo this morning of the script in action which you can find below. Also, keep in mind that I just threw this together on a side trail to a larger project that I’m currently working on, so there may be some refining that should be done to the code. I just don’t want to spend the time on it now, but if you need this functionality, it might be worth your while to poke at the code and try to improve it. Have fun!

(18) Comments    Read More   

Comments

Ken on 18 August, 2009 at 5:48 am #

Thanks for the article. I was just looking at Open Gauges and my first attempts at custom code had failed. A few seconds looking at your code and the light dawned. You’ve a nice series of articles which I look forward to reading and it’s nice to chat to another Pachube user too.

Regards

Ken


mike on 5 November, 2009 at 6:40 pm #

Nice one. Thanks.


Marcos on 6 November, 2009 at 12:45 pm #

Man you are the best!!! Thank you very much for opening this project. This saved my life. Thank you.

Marcos,
From Brazil.


Dan on 6 November, 2009 at 1:12 pm #

Hey Marcos…thanks. I hope you get some good use out of the code and concept. I’d be really interested to know how you’re using it once you finish your project.


Marcos on 10 November, 2009 at 2:35 am #

Dan, you dont mind how long I´ve been searching for something that fits my knows to build my arduino project.
I work with PHP, flash etc…
I was trying to learn C++ or VB justo build one interface like yours.

When I sew that on Flash + PHP… Man that was incredible!!!!

I have asked an Ethernet Shied to try to do something like your example.

Instead of potenciometer I will use an pressure sensor and a LM35, but a need to display that just like you did.

If you want, my e-mail is apzeiro@gmail.com, then I could tell about the project.

Man you are the best!!! Sorry about my english.


Dan on 10 November, 2009 at 1:52 pm #

Marcos…that’s really awesome man! I’m glad you’re getting some practical use out of the code. I’d be REALLY interested in knowing more about your project, so I’ll shoot you an email in a bit. And I’d love if you could post a link to the finished project as well!


squartochi on 23 November, 2009 at 7:57 am #

Hi,

I am so glad I came across your site. I found you by doing a search on you-tube. Well I am starting a project that consists of two temperature sensors a PH probe and a couple digital outs for a aquarium controller. I just began the start up of a server to host the guages. I think I have followed your directions, but all I get is a blank black page. I have Ubuntu running with apache2, PHP5, and java6.

Thanks Again,
Scott


Dan on 23 November, 2009 at 9:37 am #

It’s hard to say exactly what’s going on, but assuming you didn’t change the source code, I would check permissions on all of the files/folders. Also, ensure you have the FOG source downloaded and extracted into a subfolder of your index.html called “flash”. Hope that helps!


squartochi on 23 November, 2009 at 12:56 pm #

Hi, Again I have made changes to the permissions and got a bit more working but the data is not making the bridge. If I go to index the meter shows up no data. If I go directly to the arduino_fetch_output.php I get this output #!/usr/bin/php -q &value=1023&range=1024 It looks like it,s reading the arduino. So I think I am close. Thanks again, Scott


squartochi on 23 November, 2009 at 10:28 pm #

Sorry for all the posts, but I was able to get it going on a windows box. This is great! Thanks again


Dan on 24 November, 2009 at 8:41 am #

No problem, I’m just glad you got it up and running! Good job!


squartochi on 28 November, 2009 at 11:11 am #

Is it possible to use multiple gauges on one page?


Magicbuss on 14 December, 2009 at 4:49 pm #

I am having trouble. I can see the value of Pin five when I go staight to my Arduino’s IP address and port 80. However, the Flash Gauge doesn’t work. Needle pegged at zero. I noticed in your sample video, there are data values for the red, yellow green zones on the meter, in my site there is just 0.0


Marcos on 16 December, 2009 at 12:40 pm #

Dan, mu ethernetshield has arrived. I tryed to folow your tutorial but it didn´t work.

However I folowed another example and worked fine.

Is there any kind of test that could I do?

Here is the code that worked:
Upload to arduino and browse the indicated IP (you can change to fit better your network)

// you can change this line if you want to serve, for example, XML or some other content type
#define HTTP_HEADER “HTTP/1.0 200 OKrnServer: arduinornContent-Type: text/htmlrnrn”

void setup(){
setupEthernet(“010.000.000.011″, 80); // Arduino IP 10.0.0.11
}

void loop(){

//put your code here

// then check for requests, and if so, serve the webpage
if (ethernetRequest()){
writeHeader();
writePage(“Seja bem vindo ao Arduino!”);
writePage(“Valores analogicos que estou lendo:”);
for (int i = 0; i < 6; i++)
{
writePage("”);
writePage(analogRead(i));
}
servePage();
}
}

Here is your example. See if do I have to make some change, please. The IP I need to use is 10.0.0.11 (255.0.0.0):

// Arduino_live_gauge
// =======================================================================================
// This sketch takes puts the information on A5 out through the ethernet connection when
// there is a connection on port 23. There is a corresponding script that connects, then
// displays the information in a gauge via PHP and Open Flash Gauges
// (http://www.digitaldarknet.net/flash/).
//
// Written By: Dan Wagoner – http://www.nerdybynature.com
// Date: 07/26/2009

#include
#include
#include

//LED de teste
int LED = 7;

// define ethernet properties

byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };
//byte ip[] = { 192, 168, 1, 10 };
byte ip[] = { 10, 0, 0, 11 }; //ip que eu escolhi
byte gateway[] = { 10, 0, 0, 138}; //gateway
//byte subnet[] = { 255, 255, 255, 0};
byte subnet[] = { 255, 0, 0, 0}; //mascara da minha rede
Server server = Server(23); // listen on port 23
//Server server = Server(80); // listen on port 80

void setup()
{
pinMode( 5, INPUT );
pinMode( LED, OUTPUT); //pino do LED
Serial.begin(9600);
Ethernet.begin(mac, ip, gateway, subnet);
server.begin();
delay(1000);
}

void loop(){

//pisca o led pra testar se o código está ok
digitalWrite (LED, HIGH);
delay(1000);
digitalWrite (LED, LOW);
delay(1000);

Client client = server.available();
if (client){
client.print(analogRead(5));
Serial.println(analogRead(5));
delay(200);
client.stop();
Ethernet.begin(mac, ip, gateway, subnet);
}
}


Dan on 17 December, 2009 at 3:30 pm #

Marcos,

I noticed you changed the port that the Arduino server is listening on. If you would rather have it listen on port 23 instead of 80, you will need to make a change to the PHP code so it looks for the arduino on the correct port. Hopefully that helps!

Dan


Steven Tisseyre on 12 September, 2011 at 3:00 pm #

Hi,

Been looking at your Arduino flash gauge examples and it has inspired me to create a temperature varient of your code. How does the flash update live time as my gauge doesn’t update :-(

I know this is an old post, but hopefully you are able to guide me a little :)


Dan on 12 September, 2011 at 8:51 pm #

The “arduino_fetch_data.php” file does the heavy lifting of pulling the information from the arduino and passes the information to the flash script. It’s been a while since I’ve looked at the source, but if you’re still having trouble, send me the symptoms and I would be happy to help.


Steven Tisseyre on 13 September, 2011 at 8:05 am #

Many thanks Dan, appriciate any input. Do you have an email address we can perhaps chat on or messenger ?

Basically it reads the value from the Arduino, but unless I call the php manually and hit F5, the value is not updated on the flash object. Where it appears on your demo the flash object is constantly updated.

Thanks again.


Post a Comment
Name:
Email:
Website:
Comments:

*

Prove you are human by reading this resistor:
0Ω+/- 5%

0
0
1
2
3
4
5
6
7
8
9

0
0
1
2
3
4
5
6
7
8
9

0
0
1
2
3
4
5
6
7
8
9

5
5
10
20

Match the sliders on the left to each color band on the resistor.

Click Here for a new resistor image.

If you'd like to learn more, read about resistor color codes here.