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.

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

. 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'>
  <tr>
    <td style='background-color:#00FF00;width:40.5px;height:11.2px;border:1px solid black;
      padding:0px;'></td>
    <td style='background-color:#CCFFCC;width:19.5px;border:1px solid black;padding:0px;'></td>
  </tr><tr>
    <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'>
        <tr>
          <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>
        </tr>
      </table>
    </td>
  </tr>
</table>

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
VEX///8AAAD/AAD/zMz//wD//8wA/wDM/8ylkzwzAAAAAXRSTlMAQObYZgAAAClJREFUeJxjEMQLGISUwEDR
GBswHJUmS5q4MFdSUnGBgzQYSCQkjd9wAAWjUNpo//M2AAAAAElFTkSuQmCC" />

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:

%ADDTOHEAD{
 "noImageGauge"
 text="<style type='text/css' media='all'>
.noImageGaugeOuter {
  margin: 3px 5px;
  border: solid 1px #c4baba;
  height:16px;
  float:left;
}
.noImageGaugeInner {
  margin: 0;
  height:16px;
  float:left;
}
</style>"
}%

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>
</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>
</div>%ENDSECTION{noImageGauge}%
-->

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.

Comments

Topic revision: r2 - 2011-05-28 - PeterThoeny

Account
- Log In
- Register User

Edit
Attach

Ideas, requests, problems regarding TWiki? Send feedback. Ask community in the support forum.
Copyright © 1999-2026 by the contributing authors. All material on this collaboration platform is the property of the contributing authors.