Off-The-Shelf Hacker: Draw Analog Gauges with a Graphics Program
A while back I covered building on-screen analog gauges using a photo. We also looked at a quick and dirty hand-drawn version. How about generating the gauge face using a graphics program? That’s our topic today.
Bit-Mapped or Vector?
Two general types of editors are typically used for creating graphics.
Bit-map editors such as Gimp work with pixels. A dot might be one pixel. A line is a string of pixels. Circles, squares and filled spaces simply change the number of pixels drawn and their orientation to make the shape. Think of pixels as paint or ink.
The important thing to remember about bit-mapped images is that the pixels don’t have any kind of relationship with each other as far as location or lengths go. A line of pixels is only a line visually and as you draw it. Once you’re finished drawing the line, you can’t go back and edit that particular line. You can erase or change the color of the individual pixels in the line, but you can’t grab one end of the line and stretch it out to make it longer.
To stretch lines, change circle sizes or modify shapes, you’ll need a vector editor.
Vector editors like Scribus work with graphical elements: lines, circles, boxes, text and so on.
Want to make a line longer? Highlight the line, grab one end and move it to the new location. Presto, the line is longer. You can do the same thing with a circle. Select the circle, grab a reference point (on the circle) and move it to make the circle bigger or smaller. Release the mouse button and the circle assumes the new size.
I use a bit-mapped editor for photo touch up, rotating and resizing. It works well for adding a line of text to a .jpeg picture, then exporting the picture to another format, like .png. GIMP is my go-to bit-map editor for Off-The-Shelf Hacker graphics from my Galaxy 8 cell phone.
Vector Editors Are for Reusable Jobs
Vector is definitely the way to go for graphics that will have “elements” that you want to modify. Scribus works on most Linux systems, including the Raspberry Pi and is easily installed with apt-get.
|
1 |
pi% apt-get install scribus |
Start Scribus from the command line.
|
1 |
pi% scribus |
You will also need Processing, a C-like language for artists and non-techies, with particular attention to ease-of-use with graphical features. It’s integrated development environment (IDE) is identical to the Arduino IDE and shares many of the same structures and functions. Libraries supporting visual interfaces and interaction with the general purpose input output (GPIO) pins make Processing an ideal language for Raspberry Pi projects. Pretty much if you know the Arduino environment you can use Processing.
To draw the basic gauge circles you need a canvas on Scribus. Click File -> New to start a new drawing. The size of the drawing should match your Processing script graphical window size. In my case, I use 300 x 300 pixels (points) because that sized window fits well on my conference badge’s 3.5-inch color LCD display.
Scribus create new drawing screen.
Change the four margin values from the default of 40.0 to 0. Also, change the width and height to 300. Hit enter to create the new canvas.
Draw Circles
We’ll need a few concentric circles for our gauge.
Use Insert -> Insert Shape -> Default Shapes -> Circle, on the main drop-down menu, then click and drag the mouse pointer to generate a circle on the canvas. Right-click on the circle to bring up the Properties menu. Change the base-point icon from the upper-left corner to the center. This sets the reference point used for the shape. I like using the center of circles for reference.
Next, change the X-pos and Y-pos values to 150, which will center the circle on the canvas. Change the height and width to 300, to reflect the size of the circle. There should now be a perfect 300 point circle centered on the canvas.
Draw three more circles, this time with a width and height of 290, 200 and 10, respectively. You could just as easily create new circles by copying and pasting, then modding the size and location values. This is faster too because the origin of the copied circles is the same as the originals. Just change the size parameters.
Change the thickness and type of line using the Line drop down on the Properties menu. Thick and/or dashed lines work great for the outer bands of the gauge.
Create circles
Remember that the dial pointer will spin around the pivot point of the gauge, so it’s good to reference everything from the center point. Now it’s time to bend gauge values around the circles and start making the drawing look like a real gauge.
Text on Circular Paths
Use Insert -> Insert Text Frame to point and drag a box on the canvas. Double click inside the box and enter 10 through 100, in increments of 10, separated each by two spaces. Don’t worry if the text wraps to the next line inside the box.
Click the text box and while holding down the Shift key, click the 200 sized circle. Go up to the Item drop-down menu and select Attach Text To Path. The text should wrap around the circle. If the text is upside-down, use the flip-horizontal or flip-vertical (light blue icons) to put it in the right orientation.
Wrapping text around a circle
If the gauge numbers aren’t in the right spots, change the rotation value to swivel the numbers around the center. You may have to juggle the spacing between gauge values and rotation angle to get everything looking good.
But wait. What if I want to make the numbers bigger or use some kind of a killer font?
Just right-click on the text then select the Edit Text menu item to bring up the text editor window. Here you’ll mod all kinds of things like font, text size, text spacing, shadows and so on.
One crazy quirk of this editor is making the changes stick. Say you want to change the font size. Highlight the font you want to change. Then, go right up and highlight/change the size value. Hit return to set the values in the editor. Lastly, click the green check mark to update the text to the new size. The editor window will close and the text should immediately jump to the new size. If you don’t use that process for changes, you’ll pull your hair out wondering why it doesn’t ever seem to work right.
You can play with the text size, the spacing between values, flipping, rotation and font type to get the text looking just the way you like.
You can also add lines as tick marks, varying the lengths and rotation to put them around the dial face.
Once everything is finished, export the file as a .png and copy it over to use with your Processing script.
What’s Next
Scribus is a bit quirky. With practice, it makes a great vector graphics editor. I use it when I’m building “template” graphics. Once you have a basic gauge, it’s easy to copy and change graphical elements, their values or locations to build interesting variations on the theme. This certainly helps the workflow, as well.
