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:07] – [A digital thermometer] 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 116: Line 115:
 final String ELEMENT_CONDITION="channel/item/yweather:condition"; final String ELEMENT_CONDITION="channel/item/yweather:condition";
  
-// attribute name in element above for current temperature+// attribute name in element above for current temperature:
 final String ATTRIBUTE_CONDITION_TEMPERATURE = "temp"; final String ATTRIBUTE_CONDITION_TEMPERATURE = "temp";
  
Line 122: Line 121:
 final String ELEMENT_UNITS = "channel/yweather:units"; final String ELEMENT_UNITS = "channel/yweather:units";
  
-// attribute name in element above that holds units for temperature+// attribute name in element above that holds units for temperature:
 final String ATTRIBUTE_UNIT_TEMPERATURE = "temperature"; final String ATTRIBUTE_UNIT_TEMPERATURE = "temperature";
  
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 227: Line 228:
 } }
 </file> </file>
- 
--------------------------------- 
  
 Abstracting the drawing with a function: Abstracting the drawing with a function:
Line 237: Line 236:
  * on the canvas. This version uses a function to abstract the drawing.  * on the canvas. This version uses a function to abstract the drawing.
  *  *
- * 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 CANVAS_BORDER=10; final int CANVAS_BORDER=10;
  
 +// Functions:
 void setup() { void setup() {
   size(250, 140);   size(250, 140);
Line 257: Line 265:
  
   try {   try {
-    XMLElement weather = new XMLElement(this, URL); +    XML weather = loadXML(URL);  // instantiate an XML object from URL 
-    XMLElement condition = weather.getChild(CHILD_CONDITION); +    XML condition = weather.getChild(ELEMENT_CONDITION);  // pull current cond. 
-    XMLElement units = weather.getChild(CHILD_UNITS);+    XML units = weather.getChild(ELEMENT_UNITS);  // pull units data 
     background(#296783);     background(#296783);
     drawDigitalTemp(condition.getInt(ATTRIBUTE_CONDITION_TEMPERATURE),      drawDigitalTemp(condition.getInt(ATTRIBUTE_CONDITION_TEMPERATURE), 
Line 278: Line 287:
 } }
  
 +/**
 + * Render the temperature numerically at a given canvas location.
 + */
 void drawDigitalTemp(int temperature, String units, int x, int y) void drawDigitalTemp(int temperature, String units, int x, int y)
 { {
Line 291: Line 303:
 ===== Adding a graphic meter ===== ===== Adding a graphic meter =====
  
-Representing quantities graphically.+{{: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 298: Line 312:
  * as well as numerically.  * as well as numerically.
  *  *
- * 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;
  
 +// Functions:
 void setup() { void setup() {
   size(200, 100);   size(200, 100);
Line 318: Line 341:
  
   try {   try {
-    XMLElement weather = new XMLElement(this, URL); +    XML weather = loadXML(URL);  // instantiate an XML object from URL 
-    XMLElement condition = weather.getChild(CHILD_CONDITION); +    XML condition = weather.getChild(ELEMENT_CONDITION);  // pull current cond. 
-    XMLElement units = weather.getChild(CHILD_UNITS);+    XML units = weather.getChild(ELEMENT_UNITS);  // pull units data 
 +    
     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 340: Line 366:
 } }
  
 +/**
 + * Render a temperature numerically at a given canvas location.
 + *
 + * @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) 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) +/** 
-/* val: the value to be drawn + * Render a value on a vertical meter. 
- * minimum: val's value that corresponds to no deflection. + * 
- * minimum: val's value that corresponds to maximum deflection. + * @param val      the value to be drawn (float) 
- * w: the width of the meter + * @param minimum  val's value that corresponds to no deflection (float) 
- * h: the height of the meter + * @param minimum  val's value that corresponds to maximum deflection (float) 
- * x, y: the location of the meter+ * @param w        the width of the meter (int) 
 + * @param h        the height of the meter (int) 
 + * @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
   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 367: 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 373: 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 381: 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 416: 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 440: 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