Channels ▼

Al Williams

Dr. Dobb's Bloggers

Early Adopter

September 25, 2012

You often see movies or books where a character has the wonderful power of predicting the future. I think most of us who work at building the future would agree that sometimes the power of predicting isn't all it is cracked up to be.

I'd be willing to bet that most of us have stories about some idea we had, but couldn't get traction on it, only to find that someone else made it successful later. That's frustrating. The other frustration is being an early adopter and being scorned for it. I remember years ago being chastised for designing a system (which went on to be very successful) around TCP I/P, Ethernet, Windows clients, and a SQL database running on UNIX. At the time, all of those were bold choices. They all proved to be good choices later. The system also had a Banyan Vines server, but you can't have a perfect record, now can you?

Another problem with being an early adopter is you sometimes get stuck in time, so to speak. What I mean is that you tend to stick with what works for you even though the technology advances. It is especially bad for people like consultants who deal with lots of things and can't afford to just be an expert in one or two specific things.

As a concrete example, consider HTML (yes, this is going to be an embedded systems topic; hang on). According to the Wayback Machine my personal website went up sometime in 1997 (although it doesn't show any embarrassingly dated content until 1998). If you are used to writing device drivers and PIC assembly language, HTML is not big deal, right?

The problem is, HTML has changed. Of course, the HTML I wrote 25 years ago still works, but it looks dated and anything fancy is probably not too efficient by today's standards. The reason this interests me is that I have quite a few embedded projects that dump data over the Internet. That's one reason I picked up a few Beagle Boards — they are an inexpensive way to field embedded Linux devices with network connections (and yes, so is the Raspberry PI, there's no need to remind me).

The problem is, unlike 25 years ago, managers, customers, investors, and even my Mom are pretty Internet savvy. If you show them a page like in Figure 1 (below), they are going to — at best — yawn. Today's websites look stylish and fancy and have animations and rounded corners, and… frankly stuff most of us hardware types don’t care much about.

It isn't just that we don’t care about it. It also takes up space to do things like that, right? Granted, the Beagle Board is pretty "big" for an embedded system, but even it has limits. Besides, I do have smaller boards that generate HTML for output. How can I make it fancy in a way I can tolerate both from a patience point of view and a resource utilization point of view?

Another thing about the future is it tends to reinvent the past. Microcomputers reinvented old mainframe techniques like microcode and virtual memory. Web developers are rediscovering old chestnuts like model-view-controller. Early HTML merged together content and presentation. Modern HTML uses CSS (Cascading Style Sheets). I've looked at them before and wasn't very impressed. Sure, I get the value of putting my styles in a separate place from my document, but it isn't any less work for me to develop. It just saves me time, potentially, down the road.

That's true unless you leverage some existing CSS frameworks. The one that prompted me to write about this topic is, oddly enough, from the people who created Twitter. It is called Bootstrap.

Look at the figure below and compare it to the first figure. Big difference. Yet, not much change to the HTML. The software generating this, by the way, is running on a Beagle Bone that has lighttpd running as a web server. The code (available online) reads an LM34 temperature sensor through the onboard A/D and writes out a web page with the results.

The actual data acquisition is trivial:

// Get raw sensor value -- keep analog channel open                                                                      
int getanalog(void)
        char num[16];
        if (!analog) analog=fopen(analogfn,"r");
        if (!analog) return -1;
        rewind(analog);   // since file might be open, have to rewind                                                    
        return atoi(num);

The trick is writing the web page (the writeweb function in the online source files). The code uses a few tricks to convert integers to strings without using printf (again, trying to be efficient in case I want to use this on a smaller machine). But the HTML is very simple in either case.

The trick is that Bootstrap provides classes that format HTML elements like tables and headers with just a minimal amount of effort on your part. It also divides the page into 12 columns across the page. You can easily align rows and columns of information without having to worry about tables or how different browsers work.

You are probably thinking: "How is this efficient? Now my server has to store and serve some huge CSS library." If I were hosting the files on the server, you'd be absolutely right. However, another modern trend is to use CDN (Content Delivery Networks) to serve popular libraries from well-connected servers.

Here’s the HTML header and footer that the program writes into the output file (wrapped in a C character array, of course):

char *head="<!DOCTYPE html><html lang='en'><head><title>Temperature Sensor</title>"
  "<link href='//' rel='stylesheet'>"
  "</head><body><div class='row-fluid'><h1>Temperature Reading</h1></div>";
char *foot="<div class='row-fluid'><div class='span12 pagination-centered'><a class='btn' href='/'>Home</a></div></div>"
  "<script src='//'></script"
  "<script src='//'></script>"

The key is that the Bootstrap files come from NetDNA and the JQuery scripts come from Google's CDN. They take up no space at all on the server and all the processing is done in the user's web browser!

I'm not going to give you a tutorial on Bootstrap — this is where I talk about embedded topics, after all. But if you can handle C pointers, you should have no difficulty reading thisto learn more. (Hint: Follow the top navigation bar from left to right.) Many of the styling improvements are automatic. Some require you to add a class statement to your HTML elements. For example, if you look at the original footer code, you'll see the HTML:

<a href=….>Home</a>

In the new version, that same link is:

<a class='btn' href=….>Home</a>

If you look at the bottom of each of the above figures, you'll see the difference from that one simple addition is quite dramatic.

Not every embedded system needs HTML, of course. But if you do need it, you might as well make it look good!

Related Reading

More Insights

Currently we allow the following HTML tags in comments:

Single tags

These tags can be used alone and don't need an ending tag.

<br> Defines a single line break

<hr> Defines a horizontal line

Matching tags

These require an ending tag - e.g. <i>italic text</i>

<a> Defines an anchor

<b> Defines bold text

<big> Defines big text

<blockquote> Defines a long quotation

<caption> Defines a table caption

<cite> Defines a citation

<code> Defines computer code text

<em> Defines emphasized text

<fieldset> Defines a border around elements in a form

<h1> This is heading 1

<h2> This is heading 2

<h3> This is heading 3

<h4> This is heading 4

<h5> This is heading 5

<h6> This is heading 6

<i> Defines italic text

<p> Defines a paragraph

<pre> Defines preformatted text

<q> Defines a short quotation

<samp> Defines sample computer code text

<small> Defines small text

<span> Defines a section in a document

<s> Defines strikethrough text

<strike> Defines strikethrough text

<strong> Defines strong text

<sub> Defines subscripted text

<sup> Defines superscripted text

<u> Defines underlined text

Dr. Dobb's encourages readers to engage in spirited, healthy debate, including taking us to task. However, Dr. Dobb's moderates all comments posted to our site, and reserves the right to modify or remove any content that it determines to be derogatory, offensive, inflammatory, vulgar, irrelevant/off-topic, racist or obvious marketing or spam. Dr. Dobb's further reserves the right to disable the profile of any commenter participating in said activities.

Disqus Tips To upload an avatar photo, first complete your Disqus profile. | View the list of supported HTML tags you can use to style comments. | Please read our commenting policy.