Arduino Web-based Live Gauges

Posted on
Arduino Web-based Live Gauges

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!

Comments ( 18 )

  1. ReplyKen
    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
  2. Replymike
    Nice one. Thanks.
  3. ReplyMarcos
    Man you are the best!!! Thank you very much for opening this project. This saved my life. Thank you. Marcos, From Brazil.
  4. ReplyDan
    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.
  5. ReplyMarcos
    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, then I could tell about the project. Man you are the best!!! Sorry about my english.
  6. ReplyDan
    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!
  7. Replysquartochi
    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
  8. ReplyDan
    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!
  9. Replysquartochi
    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
  10. Replysquartochi
    Sorry for all the posts, but I was able to get it going on a windows box. This is great! Thanks again
    • ReplyDan
      No problem, I'm just glad you got it up and running! Good job!
  11. Replysquartochi
    Is it possible to use multiple gauges on one page?
  12. ReplyMagicbuss
    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
  13. ReplyMarcos
    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("", 80); // Arduino IP } 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 ( // 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 // ( // // Written By: Dan Wagoner - // 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); } }
    • ReplyDan
      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
  14. ReplySteven Tisseyre
    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 :)
  15. ReplyDan
    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.
  16. ReplySteven Tisseyre
    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.