create new tag
, view all tags

How to Create Image-less Gauges

2011-05-25 - 05:12:52 by PeterThoeny in Development
What is TWiki?
A leading open source enterprise wiki and web application platform used by 50,000 small businesses, many Fortune 500 companies, and millions of people.
MOVED TO... Learn more.
Do you have a need to show gauges in your TWiki or HTML pages? TWiki has a GaugePlugin to show images like or tambar1.gif or trendup.gif. Those are bitmap images generated on the fly based on some parameters.

Showing a page with hundreds of gauges (for example to show server status in a data center) can be slow. This is mainly attributed to the many connections the browser has to make, one for each image download. The latest GauglePlugin released a few days ago by TaitCyrus has alternatives to get around this problem:

  • 1. Show gauges using HTML table tags.
  • 2. Show gauges using images where image data is embedded inline in the image tag.

Additional alternatives (not implemented in the GaugePlugin):

  • 3. Show gauges using HTML div tags.
  • 4. Show gauges using parametrized includes.

The last one is TWiki specific. Let's look into these options.

1. Use HTML table tag:

We use HTML <table> tags with styles that define the dimensions and colors of the gauge.

HTML source code, as implemented in the GaugePlugin:

<table style='display: inline-block; width:60px; height:16px; border-collapse:collapse;
    vertical-align:top;' cellSpacing='0' cellPadding='0'>
    <td style='background-color:#00FF00;width:40.5px;height:11.2px;border:1px solid black;
    <td style='background-color:#CCFFCC;width:19.5px;border:1px solid black;padding:0px;'></td>
    <td colspan=2 valign=bottom style='height:2.8px;border:1px solid black;padding:0px;'>
      <table style='width:58px; height:2.8px;' cellSpacing='0' cellPadding='0'>
          <td style='background-color:#FF0000; width:15px;border:0;padding:0;'></td>
          <td style='background-color:#FFFF00; width:15px;border:0;padding:0;'></td>
          <td style='background-color:#00FF00; width:30px;border:0;padding:0;'></td>
Renders as:

2. Use HTML img tag with embedded image data:

We use an HTML <img> tag with image data embedded in the src="" parameter. This is possible with the relatively new data URI scheme, spec defined in RFC:2397. It is widely supported by modern browsers. However it does not work in IE7, which is still widely used.

HTML source code, as implemented in the GaugePlugin:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAAQBAMAAAC4vAEMAAAAGFBM
Renders as:

3. Use HTML div tag:

We use HTML <div> tags with some CSS to show a gauge. First we add some CSS to the HTML <head> section to define the dimensions and colors of the divs. In TWiki we can do that with the help of the %ADDTOHEAD{}% variable.

Define CSS, using ADDTOHEAD to add it to the HTML head section:

 text="<style type='text/css' media='all'>
.noImageGaugeOuter {
  margin: 3px 5px;
  border: solid 1px #c4baba;
.noImageGaugeInner {
  margin: 0;
Renders as:

(no output)

Now, lets define the gauge using <div> tags:

<div class="noImageGaugeOuter" style="width:100px">
  <div class="noImageGaugeInner" style="width:40px; background-color:#ef5252;"> </div>
  <div class="noImageGaugeInner" style="width:60px; background-color:#f8abab;"> </div>
Renders as:

4. Show gauges using parametrized includes:

How can we make it easier to add multiple gauges to a TWiki page? We can take advantage of parameterized includes in TWiki as described in IncludeTopicsAndWebPages. The idea is to create a named section that defines the gauge and to include that section passing along parameters.

First we create a section named noImageGauge:

TML (TWiki Markup Language):

%STARTSECTION{noImageGauge}%<div class="noImageGaugeOuter" style="width:%width%px">
  <div class="noImageGaugeInner" style="width:%value%px; background-color:#ef5252;"> </div>
  <div class="noImageGaugeInner" style="width:%CALC{$EVAL(%width%-%value%)}%px;
    background-color:#f8abab;"> </div>
Renders as:

(no output)

Now we can include this section many times. Example:

TML (TWiki Markup Language):

%INCLUDE{ "%TOPIC%" section="noImageGauge" width="100" value="50" }% 
%INCLUDE{ "%TOPIC%" section="noImageGauge" width="100" value="90" }% 
%INCLUDE{ "%TOPIC%" section="noImageGauge" width="100" value="10" }% 
<br class="twikiClear" />
%INCLUDE{ "%TOPIC%" section="noImageGauge" width="100" value="100" }% 
%INCLUDE{ "%TOPIC%" section="noImageGauge" width="100" value="40" }% 
%INCLUDE{ "%TOPIC%" section="noImageGauge" width="100" value="80" }% 
<br class="twikiClear" />
%INCLUDE{ "%TOPIC%" section="noImageGauge" width="100" value="20" }% 
%INCLUDE{ "%TOPIC%" section="noImageGauge" width="100" value="30" }% 
%INCLUDE{ "%TOPIC%" section="noImageGauge" width="100" value="60" }% 
<br class="twikiClear" />
Renders as:

As you can see there are many different ways to create image-less gauges that load fast in your browser.



Edit | Attach | Watch | Print version | History: r2 < r1 | Backlinks | Raw View | Raw edit | More topic actions
Topic revision: r2 - 2011-05-28 - PeterThoeny

Twitter Delicious Facebook Digg Google Bookmarks E-mail LinkedIn Reddit StumbleUpon    
  • Help
  • Learn about TWiki  
  • Download TWiki
This site is powered by the TWiki collaboration platform Powered by Perl Hosted by OICcam.com Ideas, requests, problems regarding TWiki? Send feedback. Ask community in the support forum.
Copyright © 1999-2018 by the contributing authors. All material on this collaboration platform is the property of the contributing authors.