webstuff

XSLT color-map generator

This stylesheet generates color-maps. The only input it needs, is a step value:

<color-map-generator step="3"/>

step controls the number of colors that will be displayed. It can only take one of 4 values: 1, 3, 5 or 15 (see dtd). Colors consist of 3 channels (red, green and blue). Channel values range from #00 (darkest) to #FF (lightest). Eg. #FF9900 is #FF red, #99 green and #00 blue. Note that, throughout this stylesheet, the 'shorthand' notation is used: 3 digits instead of 6 (Eg. #F90 instead of #FF9900). That gives 16^3 = 4096 possible combinations. A higher step value results in less combinations, like in the following table:

step color values num-steps num-colors
10123456789ABCDEF164096
30 3 6 9 C F 6 216
50 5 A F 4 64
150 F 2 8
<xsl:variable name="num-steps" select="15 div $step + 1"/>
<xsl:variable name="num-colors" select="$num-steps * $num-steps * $num-steps"/>

demo

features

colors in a table

Calculates the colors and displays them in a table, by setting the cell's background color. On every cell, the shorthand hex value is presented in a tooltip (with the 'title' attribute). 

<xsl:variable name="rgb">
  <xsl:call-template name="rgb-value">
    <xsl:with-param name="index" select="$index"/>
  </xsl:call-template>
</xsl:variable>
<td style="width: {floor(100 div $columns)}%; background: {$rgb};" title="{$rgb}"/>

radio buttons

Four xml-files are provided, one for every step value. The hyperlinks between them are presented with 'real' radio-buttons:

The example above is in JavaScript, but the color-map-generator's radio-buttons are pure XSLT:

<xsl:variable name="btn-state">
  <xsl:choose>
    <xsl:when test="$s = $step">on</xsl:when>
    <xsl:otherwise>off</xsl:otherwise>
  </xsl:choose>
</xsl:variable>
<img src="radio-btn-{$btn-state}.gif" width="12" height="12" alt="" title=""/>

files