User Tools

Site Tools


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
processing:thermometer_example [2013/08/04 01:07] – [A digital thermometer] mithatprocessing:thermometer_example [2013/08/04 03:55] (current) – [How to make a thermometer] 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'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.5It is currently undergoing revision to make it work in Processing 2.+Because applet support has been removed in [[http://processing.org/|Processing 2]] and [[http://processingjs.org/|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'''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) +/*
-/* valthe value to be drawn + * Render a value on a vertical meter. 
- * minimumval's value that corresponds to no deflection. + * 
- * minimumval's value that corresponds to maximum deflection. + * @param val      the value to be drawn (float) 
- * wthe width of the meter + @param minimum  val's value that corresponds to no deflection (float) 
- * hthe height of the meter + @param minimum  val's value that corresponds to maximum deflection (float) 
- * xythe location of the meter+ @param        the width of the meter (int) 
 + @param        the height of the meter (int) 
 + @param        the horizontal location of the meter (int) 
 + * @param        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           the horizontal location of the display (int) 
 + * @param           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: + * 
-   valthe value to be represented + * @param val      the value to be drawn (float) 
-   minimumval's value that corresponds to no deflection. + @param minimum  val's value that corresponds to no deflection (float) 
-   minimumval's value that corresponds to maximum deflection. + @param minimum  val's value that corresponds to maximum deflection (float) 
-   wthe width of the meter + @param        the width of the meter (int) 
-   hthe height of the meter + @param        the height of the meter (int) 
-   xythe location of the meter+ @param        the horizontal location of the meter (int) 
 + * @param        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.1375578447.txt.gz · Last modified: 2013/08/04 01:07 by mithat

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki