Pinewood Derby Race Track Timer

This content is now being hosted on GitHub: https://github.com/sweenig/pinewoodderbytimer/

Putting a Hidden Help Section on a Web Page

Continuing in a series of posts, here's how to add a hidden div to a web page (and make it visible on demand).

For the health check report, I had built a way to transform the output of the script into a usable report and added editable content so that the report could be further tweaked after rendering the page. Given that others would eventually be using the report, I needed to add a way to help non-coders when inserting content into the report so that it looked cogent and coherent. Thus the help section.

However, I couldn't put a help section on the final report, that wouldn't look good when the report was delivered to the customer. So, I had to create a way for the help section to be normally hidden, with a button or link to display the help section. Also, the button had to be hidden!

Let's start with the help section itself. Take a look at the XSLT itself. The help section is simply a DIV containing the help content, with some special CSS applied to hide it until needed. Look at line 22. Notice that the display style is set to none. This hides the DIV entirely and collapses the space around it. It's as if the DIV isn't even there.

Now for a button to show the div when needed. Look at line 15 and you'll see an image with an onclick function. The function is contained in the external JavaScript file (lines 23-29). The JavaScript simply toggles the display style from none to block and back. Really, it wouldn't be too much to just put that function right in the img tag itself, but since I already had the external JS file, it was just as easy this way.

Another look at line 15 will show that the img is contained within a div with id="helptoggler". That div has three lines of CSS that essentially make it invisible until the mouse hovers over it and also puts it in the top left corner of the page:

1. #helptoggler {position:absolute;left:0px;top:0px;}
2. #helptoggler > img {visibility:hidden;width:32px;height:auto;}
3. #helptoggler:hover > img {visibility:visible;}

This means that the image is in the top left corner of the page, is hidden until moused over, and when clicked shows the help section.

Since the JavaScript is built as a toggler, the same function can be called anywhere a link is desired to hide the help section. Clicking on the image in the top left corner hides the DIV, but notice that within the help section itself is a span with an onclick action calling the same JavaScript function (line 24).

Once again, if you want to play with the files themselves, just download, unzip, and open the XML file in IE.

Displaying Editable Content on a Web Page

In my previous post, I detailed how I went about transforming an XML document into a readable report, displaying data from the XML. If you downloaded and tried out the files, you should have noticed that the final report was more than I described.

Particularly, there were two things I glossed over:

1. There are several boxes on the page that have edit buttons and can be modified after the page is rendered.
2. There is a hidden div that shows the report author how to format additional content so that it shows up with the same style as the rest of the content on the page.

I'll cover #2 at a later time. Right now, I wanted to talk about how the editable content was built. Remember, the point of the project was to build a final report that could be delivered to the customer. A script was used to gather a bunch of data and output it to XML. An XSLT was used to transform that information into a more readable format. While the script was good at gathering much of the information needed, it didn't go into wordy detail about the recommended changes to be made. Thus a method of adding to the document was needed.  

Initially, I built a section of the XML that would allow the user to input all the information needed right into the XML. That way, the XML transformation and PDF generation would be the last step in generating the report. However, that wasn't too sexy and I still found myself needing a way to edit the content after it was rendered.

So, I came up with EditableContent. This comprised of a few components. Here is what part of the code looks like:

1. <h2>Summary Recommendations</h2>
2.     <div id="recsummary" class="editablecontent">
3.      <img src="health_check_files/edit-icon.png" onclick="editcontent('recsummary','recsummary_content')" />
4.      <div id="recsummary_content">
5.       <xsl:if test="reportinfo/recsummary!=''"><xsl:value-of select="reportinfo/recsummary" disable-output-escaping="yes"/></xsl:if>
6.       <xsl:if test="not(reportinfo/recsummary) or (reportinfo/recsummary='')">Provide a summary description of your recommendations<br /><span class="example">EXAMPLE</span>: The primary recommendations resulting from the data gathering, assessment, and analysis performed during this Health Check are to upgrade both hardware and software on the core NMS components of the infrastructure. In addition to hardware and software upgrades, a review of the alarm/event management process is recommended. Architecturally, the NMS deployment is in accordance with a “Best Practices” implementation for an organization of this size.</xsl:if>
7.      </div>
8.     </div>

First is the div containing the content. This div has a unique id and uses a CSS class of 'editablecontent'. This CSS class is what puts the red line around the editable content and also puts the edit button. Click here to see the CSS (pay attention to lines 63-85).

The main DIV has two children, the edit image and the content DIV. The edit button has some special CSS that make it only visible when the mouse moves over the parent DIV. The child DIV is the one containing the content.

Notice the image has a JavaScript function attached. The JavaScript is contained in a separate file (but could just have easily been included in the XSLT). The JavaScript simply switches from a static DIV to an editable textarea box and back again. Depending on which save button is pressed, the JavaScript will return to a DIV that looks like a draft or a final version.

Adding editable content to the XSLT all over the place made it easy to use the data from the XML but have a last minute override for any of the content (i.e. to fix a single misspelling without editing the XML manually).

To see it all in action, download the files, unzip, and open the XML file in IE.

XML and XSLT: Transforming Raw XML into Readable Reports

THIS CONTENT HAS BEEN MOVED TO GITHUB: https://github.com/sweenig/xml_and_xslt

Raspberry Pi Possible Projects

Whenever I get into a conversation with people about the RaspberryPi, the question always comes up, "What would I do with something like that?" This post answers that question. In addition to the two projects that I've already completed (PiTunes, DoPi), here are some project that I've run across that are pretty cool ideas:

• Make your own radio station - be careful with this one; once you're transmitting beyond a particular power level (which isn't really controllable in the Pi), you're required to have a license from the FCC (even if no one else is transmitting on the same frequency).
• Make an motion detector - this one is pretty cool since it uses Google's translate service to speak whatever text you want.
• Get the heck outta my office device - Ok, this one actually uses an arduino, but it would be pretty easy to make something like this using the RPi. 
• Make a simple webcam
• Make an Apple iBeacon - I may actually integrate this into DoPi at some point so you get a push notification on your phone as you drive up to your house, prompting you to open the garage door. Otherwise, it could be used for a variety of annoying reasons (including on a convention floor to drive people to your booth...). (Alternate method)
• Make an AirPlay receiver - an AirPlay receiver will receive a stream of music from an Apple iOS device (phone, tablet, or even iTunes on a PC/Mac) and output it to speakers. This can be handy if you ever wanted to add music to a room without major electronics.
• Make a camera
• Make a tablet
• Connect your analog phones to Google Voice

Oh, and if you wanted to do something with the RPi, but found the portability an issue, there are a couple of ways to make your own battery pack (way 1, way 2).