Mithat Konar (the wiki)

User Tools

Site Tools

You are here: Mithat Konar (the wiki) » Processing stuff » How to make a thermometer
processing:thermometer_example

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision		Previous revision
Last revisionBoth sides next revision
processing:thermometer_example [2013/08/04 01:57] – [Adding a graphic meter] mithatprocessing:thermometer_example [2013/08/04 03:32] – [Updating the data] mithat
Line 1: Line 1:
-====== Thermometer example ======+====== How to make a thermometer ======
  
 {{:processing:processing_thermometer.png}} {{:processing:processing_thermometer.png}}
Line 10: Line 10:
   * How to invoke an action periodically.   * How to invoke an action periodically.
  
-You'll not find much description below. I may add some later, but my intent here is just to do a structured code dump. +You won't find much description below. I may add some later, but my intent here is just to do a structured code dump. 
- +
 <WRAP center round info 60%> <WRAP center round info 60%>
-The code here was written for Processing 1.5. It is currently undergoing revision to make it work in Processing 2.+Because applet support has been removed in Processing 2 and Processing.js doesn't allow downloading arbitrary files, linking to live examples that work in the browser from this page is not possible.
 </WRAP> </WRAP>
  
-<WRAP center round important 60%> +===== Getting files from the Internet ===== 
-Because [[http://wiki.processing.org/w/Export_Info_and_Tips|applets have been removed]] in Processing 2 and because Processing.js doesn't allow downloading arbitrary files with its [[http://processingjs.org/reference/loadStrings_/|loadStrings implementation]], linking to live examples that work in the browser from this page is not possible. +{{:processing:processing_get_internet_page.png?nolink&480|}}
-</WRAP>+
  
-===== Getting files from the Internet ===== 
 The built-in function ''loadStrings'' will load local files or URLs. The built-in function ''loadStrings'' will load local files or URLs.
  
Line 97: Line 95:
  
 ===== Scraping XML for data ===== ===== Scraping XML for data =====
 +{{:processing:processing_get_xml_page.png?nolink&480|}}
  
-Grabbing selected data from an XML source is easy with the ''XML'' class. In this example, we load an RSS feed (which is XML) and parse it for some data.+Grabbing selected data from an XML source is easy with Processing's ''XML'' class. In this example, we load an RSS feed (which is XML) and extract some data from it.
  
 <file java get_xml_page.pde> <file java get_xml_page.pde>
Line 163: Line 162:
  
 ===== A digital thermometer ===== ===== A digital thermometer =====
 +
 +{{:processing:processing_thermometer_digital.png?nolink|}}
  
 Fonts are graphics in Processing. To get the following to work, you'll need to create the *.vlw file using the //Tools > Create Font...// menu item. Fonts are graphics in Processing. To get the following to work, you'll need to create the *.vlw file using the //Tools > Create Font...// menu item.
Line 302: Line 303:
 ===== Adding a graphic meter ===== ===== Adding a graphic meter =====
  
-Representing quantities graphically. Note also the use of Javadoc/Doxygen documentation comments for the functions.+{{:processing:processing_thermometer_meter.png?nolink|}} 
 + 
 +Representing quantities graphically. Note also the use of Javadoc-style documentation comments for the functions.
  
 <file java thermometer_meter.pde> <file java thermometer_meter.pde>
Line 343: Line 346:
          
     background(#296783);     background(#296783);
-    drawDigitalTemp(condition.getInt(ATTRIBUTE_CONDITION_TEMPERATURE), +     
-        units.getString(ATTRIBUTE_UNIT_TEMPERATURE), width/2, height/2); +    int temperature = condition.getInt(ATTRIBUTE_CONDITION_TEMPERATURE); 
-    drawMeter(70, -40, 120, 10, height-2*BORDER, width-10-BORDER, BORDER);+    drawDigitalTemp(temperature, units.getString(ATTRIBUTE_UNIT_TEMPERATURE), 
 +                    width/2, height/2); 
 +    drawMeter(temperature, -40, 120, 10, height-2*BORDER, width-10-BORDER, BORDER);
   }   }
   catch (Exception e) {   catch (Exception e) {
Line 362: Line 367:
  
 /** /**
- * Render the temperature numerically at a given canvas location.+ * Render a temperature numerically at a given canvas location.
  *  *
  * @param temperature the temperature to be drawn (int)  * @param temperature the temperature to be drawn (int)
Line 382: Line 387:
  
 /** /**
- * Render the temperature graphically.+ * Render a value on a vertical meter.
  *  *
  * @param val      the value to be drawn (float)  * @param val      the value to be drawn (float)
Line 398: Line 403:
   // calculate height of indicator in pixels   // calculate height of indicator in pixels
   float barHeight=map(val, minimum, maximum, 0, h);   float barHeight=map(val, minimum, maximum, 0, h);
-  println("barHeight = " + barHeight);+
   // draw the indicator   // draw the indicator
   strokeWeight(1);   strokeWeight(1);
Line 404: Line 409:
   fill(#e00000);   fill(#e00000);
   rect(x, y+(h-barHeight), w, barHeight);   rect(x, y+(h-barHeight), w, barHeight);
 +
   // draw the frame   // draw the frame
   noFill();   noFill();
Line 410: Line 416:
 } }
 </file> </file>
 +
 ===== Updating the data ===== ===== Updating the data =====
-Don't sleep. Poll instead.+Don't sleep. Poll instead. The following updates the temperature display every minute.
  
 <file java thermometer_update.pde> <file java thermometer_update.pde>
Line 418: Line 425:
  * as well as numerically; updates periodically.  * as well as numerically; updates periodically.
  *   * 
- * Copyright (C) 2012 Mithat Konar+ * Copyright (C) 2012-2013 Mithat Konar
  */  */
  
-// Change the following to get the desired location and scale. +// Constants: 
-// See http://developer.yahoo.com/weather/+// change the URL to get the desired location and units 
 +// (see http://developer.yahoo.com/weather/).
 final String URL = "http://weather.yahooapis.com/forecastrss?w=12781882&u=f"; final String URL = "http://weather.yahooapis.com/forecastrss?w=12781882&u=f";
  
-// These should only need changing if Yahoo! changes the RSS feed structure. +// path in XML data to current conditions: 
-final String CHILD_CONDITION="channel/item/yweather:condition";+final String ELEMENT_CONDITION="channel/item/yweather:condition"; 
 + 
 +// attribute name in element above for current temperature:
 final String ATTRIBUTE_CONDITION_TEMPERATURE = "temp"; final String ATTRIBUTE_CONDITION_TEMPERATURE = "temp";
-final String CHILD_UNITS = "channel/yweather:units";+ 
 +// path in XML data to element that holds units of measurement: 
 +final String ELEMENT_UNITS = "channel/yweather:units"; 
 + 
 +// attribute name in element above that holds units for temperature:
 final String ATTRIBUTE_UNIT_TEMPERATURE = "temperature"; final String ATTRIBUTE_UNIT_TEMPERATURE = "temperature";
  
 +// misc.
 final int BORDER=10; final int BORDER=10;
  
-int oldMinute;+// Global variables: 
 +int oldMinute;  // used to keep track of time last update was made.
  
 +// Functions:
 void setup() { void setup() {
   size(200, 100);   size(200, 100);
   smooth();    smooth(); 
 +  background(#296783); 
   oldMinute = minute();   oldMinute = minute();
-  background(#296783); 
   updateTemp();   updateTemp();
 } }
  
 void draw() { void draw() {
-  // updateTemp every minute.+  // updateTemp every minute
   int currentMinute = minute();   int currentMinute = minute();
-  if (oldMinute != currentMinute) +  if (oldMinute != currentMinute) {
-  {+
     updateTemp();     updateTemp();
     oldMinute = currentMinute;     oldMinute = currentMinute;
Line 453: Line 469:
 } }
  
 +/**
 + * Update the display of the current temperature.
 + *
 + * @return void
 + */
 void updateTemp() { void updateTemp() {
   try {   try {
-    println("updateTemp() called at "+ hour()+":"+minute()+":"+second()); +    XML weather = loadXML(URL);  // instantiate an XML object from URL 
-    background(#ffff00); +    XML condition = weather.getChild(ELEMENT_CONDITION);  // pull current cond. 
-    XMLElement weather = new XMLElement(this, URL); +    XML units = weather.getChild(ELEMENT_UNITS);  // pull units data 
-    XMLElement condition = weather.getChild(CHILD_CONDITION); +
-    XMLElement units = weather.getChild(CHILD_UNITS);+
     background(#296783);     background(#296783);
-    drawDigitalTemp(condition.getInt(ATTRIBUTE_CONDITION_TEMPERATURE),  +    int temperature = condition.getInt(ATTRIBUTE_CONDITION_TEMPERATURE); 
-        units.getString(ATTRIBUTE_UNIT_TEMPERATURE), width/2, height/2); +    drawDigitalTemp(temperature, units.getString(ATTRIBUTE_UNIT_TEMPERATURE), 
-    drawMeter(70, -40, 120, 10, height-2*BORDER, width-10-BORDER, BORDER);+                    width/2, height/2); 
 +    drawMeter(temperature, -40, 120, 10, height-2*BORDER, width-10-BORDER, BORDER); 
 + 
 +    // uncomment println below for debugging.  
 +    // println("updateTemp() called at " + hour() + ":" + minute() + ":" + second() +  
 +    //         ". " + condition.getInt(ATTRIBUTE_CONDITION_TEMPERATURE) + " degrees.");
   }   }
   catch (Exception e) {   catch (Exception e) {
     println("Problem loading " + URL);     println("Problem loading " + URL);
     println(e);     println(e);
-    +
     // Turn the canvas red with a big 'X' in it to indicate error.     // Turn the canvas red with a big 'X' in it to indicate error.
     background(#ff0000);     background(#ff0000);
Line 477: Line 502:
 } }
  
-void drawDigitalTemp(int temperature, String units, int x, int y) +/** 
-/* + * Render the temperature numerically at a given canvas location. 
- * Print the temperature and units to the canvas centered around (x,y).+ * 
 + * @param temperature the temperature to be drawn (int) 
 + * @param units       the units of measure used for temperatre (String) 
 + * @param x           the horizontal location of the display (int) 
 + * @param y           the vertical location of the display (int) 
 + * 
 + * @return void
  */  */
 +void drawDigitalTemp(int temperature, String units, int x, int y)
 { {
   PFont font;   PFont font;
   font = loadFont("Monospaced.bold-48.vlw");    font = loadFont("Monospaced.bold-48.vlw"); 
-  fill(#ffffff); 
   textFont(font, 48);   textFont(font, 48);
   textAlign(CENTER, CENTER);   textAlign(CENTER, CENTER);
 +  fill(#ffffff);
   text(temperature + "\u00b0" + units, x, y);   text(temperature + "\u00b0" + units, x, y);
 } }
  
-void drawMeter(float val, float minimum, float maximum, int w, int h, int x, int y) +/** 
-/*  + * Render a value on a vertical meter. 
- * Represent a value in a vertical meter. Parameters: + * 
- *   val: the value to be represented + * @param val      the value to be drawn (float) 
- *   minimum: val's value that corresponds to no deflection. + * @param minimum  val's value that corresponds to no deflection (float) 
- *   minimum: val's value that corresponds to maximum deflection. + * @param minimum  val's value that corresponds to maximum deflection (float) 
- *   w: the width of the meter + * @param w        the width of the meter (int) 
- *   h: the height of the meter + * @param h        the height of the meter (int) 
- *   x, y: the location of the meter+ * @param x        the horizontal location of the meter (int) 
 + * @param y        the vertical location of the meter (int) 
 + * 
 + * @return void
  */  */
 +void drawMeter(float val, float minimum, float maximum, int w, int h, int x, int y)
 { {
   // calculate height of indicator in pixels   // calculate height of indicator in pixels
processing/thermometer_example.txt · Last modified: 2013/08/04 03:55 by mithat
Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki