Creating PNG Files

The data from the weather service is returned in JSON format, which is pretty convenient if you are parsing this information by JavaScript but somewhat less convenient for a graphics application.

With the use of jq, I easily extracted the values I needed, but that still left the problem of how to display the data. The only data the picture frame displays now is photographs. Although I could probably overlay information to the screen a number of different ways, I chose to create an image from the data with the use of a familiar technology: Apache FOP, a print formatter that can be used in document processing to convert XML data into a PDF file by XSL-FO (extensible stylesheet language – formatting objects). Also, you can use XSL-FO to convert the data into other output formats, including rich text (RTF) or PostScript (PS), but it is just as easy to create a TIFF or a PNG from the same stylesheet.

Because FOP makes it possible to create PNG output files, all of my data on the picture frame will be simple graphic files, simplifying my processing. Apache FOP is open source, so I just downloaded the latest version [11]. With a working Java environment, I could create PNG files.

Raspbian comes preinstalled with OpenJDK, the version of which depends on which Raspbian image you use. My problems appeared the first time I tried to run Java; I kept receiving an error about initialization:

Error occurred during initialization of VM

Server VM is only supported on ARMv7+ VFP

This error turned out to occur because OpenJDK 11 is compiled for a processor chip in the newer Raspberry Pis. Although the processor is backward compatible for older code, the older chip cannot run the OpenJDK 11 compiled for the new processor. The solution to this problem was to remove the current version of the JDK and install OpenJDK 8:

sudo apt-get purge openjdk*
sudo apt autoremove
sudo apt-get install -y galternatives openjdk-8-jdk

Formatting Objects Template

The Apache FOP print formatter XSL-FO combines quite a few technologies from the extensible stylesheet language and XPath. The main difference between Apache FOP and other markup languages such as HTML is separation between the data and the formatting instructions. HTML does not always separate the data to be formatted from the formatting instructions, which makes it difficult to have multiple views of a single source of data.

The XSL-FO template describes in detail how exactly the data should be formatted. The description has the physical output size, margins, and orientation of text. Other supported types of formatting are not dissimilar to those in a normal word processor, which allows you to change fonts, text size, justification, and colors of text or background. Also, you can create lists, import graphics, create watermarks, and make tables of all types.

Listing 1 shows the template necessary to create a small 7cm square document with 2cm margins, in the middle of which appears Hello World.

01 <?xml version="1.0" encoding="UTF-8"?>
02 <xsl:stylesheet version="1.1" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
03     xmlns:fo="http://www.w3.org/1999/XSL/Format" exclude-result-prefixes="fo">
04 <xsl:template match="weather">
05     <fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format">
06       <fo:layout-master-set>
07         <fo:simple-page-master master-name="pnglayout" page-height="7cm"
08                 page-width="7cm" margin-top="2cm" margin-bottom="2cm"
09                 margin-left="2cm" margin-right="2cm" >
10           <fo:region-body />
11         </fo:simple-page-master>
12       </fo:layout-master-set>
13       <fo:page-sequence master-reference="pnglayout">
14         <fo:flow flow-name="xsl-region-body">
15           <fo:block>Hello World</fo:block>
16         </fo:flow>
17       </fo:page-sequence>
18      </fo:root>
19 </xsl:template>
20 </xsl:stylesheet>

Because of the general complexity of XSL-FO, it would take quite a few pages to describe a simple template properly. A number of books fully describe creating such templates if you are interested in learning more about this technology. You can see my favorite tutorial on the topic online [12].

Source Code

To make REST API calls, parse the resulting JSON output, and coordinate the processes, you could use any of a number of languages. The script or program will power a picture frame that displays new photos every few minutes, so you don't need sub-second response times. With this in mind, I created a Bash script to control and process both the image and weather data.

I enjoy writing Bash scripts, and I am also interested in how others solve various scripting problems; however, I suspect I am in the minority on this subject. Therefore, I will show a few small excerpts of the various scripts, and the rest of the scripts are available as a download [13]. The scripts must handle four tasks:

• Update photos on the Raspberry Pi
• Select and display a picture
• Download the weather forecast
• Generate an image from forecast

These tasks are interesting enough to take a deeper look.