Skip to content

Commit

Permalink
Added section handling to DisplaySingle
Browse files Browse the repository at this point in the history 
The DisplaySingle component now is able to handle sections. Therefore i've added a new LcdColor names SECTIONS that should be used to visualize the sections. One could define sections with colors that will colorize the lcd display dependend of the current value.
  • Loading branch information
Gerrit Grunwald committed Dec 14, 2011
1 parent 36147fa commit 611e988
Show file tree
Hide file tree
Showing 4 changed files with 355 additions and 29 deletions.
5 changes: 5 additions & 0 deletions ChangeLog.txt
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,10 @@
Main Changes

v0.9.0
> General Changes
* Added section handling to DisplaySingle
* Added a demo html page to show the new feature

v0.8.9
> General Changes
* Added TrafficLight component and LightBulb component to the lib.
Expand Down
8 changes: 8 additions & 0 deletions demoExtras.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -94,6 +94,7 @@
<option value="LILA">Lila</option>
<option value="BLACKRED">BlackRed</option>
<option value="DARKGREEN">DarkGreen</option>
<option value="SECTIONS">Sections</option>
</select>
<select id="comboLedColor" onchange="setLedColor(this)">
<option selected="selected" value="">Led color</option>
Expand Down Expand Up @@ -827,6 +828,13 @@
multi1.setLcdColor(steelseries.LcdColor.DARKGREEN);
altimeter1.setLcdColor(steelseries.LcdColor.DARKGREEN);
break;
case "SECTIONS":
radial2.setLcdColor(steelseries.LcdColor.SECTIONS);
single1.setLcdColor(steelseries.LcdColor.SECTIONS);
single2.setLcdColor(steelseries.LcdColor.SECTIONS);
multi1.setLcdColor(steelseries.LcdColor.SECTIONS);
altimeter1.setLcdColor(steelseries.LcdColor.SECTIONS);
break;
}
}

Expand Down
145 changes: 145 additions & 0 deletions demoLcdSections.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,145 @@
<!DOCTYPE html>
<html manifest="demo.manifest"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>Canvas Steel</title>
</head>
<body onload="init()" style="background-color:#84a5ed">
<table>
<tbody><tr>
<td width="100%">
<select id="comboLcdColor" onchange="setLcdColor(this)">
<option selected="selected" value="">LCD color</option>
<option value="BEIGE">Beige</option>
<option value="BLUE">Blue</option>
<option value="ORANGE">Orange</option>
<option value="RED">Red</option>
<option value="YELLOW">Yellow</option>
<option value="WHITE">White</option>
<option value="GRAY">Gray</option>
<option value="BLACK">Black</option>
<option value="GREEN">Green</option>
<option value="BLUE2">Blue2</option>
<option value="BLUE_BLACK">BlueBlack</option>
<option value="BLUE_DARKBLUE">BlueDarkBlue</option>
<option value="BLUE_GRAY">BlueGray</option>
<option value="STANDARD">Standard</option>
<option value="STANDARD_GREEN">StandardGreen</option>
<option value="BLUE_BLUE">BlueBlue</option>
<option value="RED_DARKRED">RedDarkRed</option>
<option value="DARKBLUE">DarkBlue</option>
<option value="LILA">Lila</option>
<option value="BLACKRED">BlackRed</option>
<option value="DARKGREEN">DarkGreen</option>
<option value="SECTIONS">Sections</option>
</select>
</td>
</tr>
<tr>
<td width="100%">
<canvas id="canvasSingle1" width="120" height="50"></canvas>
</td>
</tr>
</tbody></table>


<script type="text/javascript">
var scroll = false;
var single1;

function init() {
// Initialzing gauge

var sections = [steelseries.Section(0, 70, 'rgba(255, 0, 0, 1.0)'),
steelseries.Section(70, 95, 'rgba(255, 255, 0, 1.0)'),
steelseries.Section(95, 100, 'rgba(0, 255, 0, 1.0)') ];

single1 = new steelseries.DisplaySingle('canvasSingle1', {
width: 120,
height: 50,
section: sections
});
single1.setLcdColor(steelseries.LcdColor.SECTIONS);
// Start the random update
setInterval(function(){ setRandomValue(single1, 100); }, 1500);
}

function setRandomValue(gauge, range) {
gauge.setValue(Math.random() * range);
}

function setLcdColor(sel) {
switch(sel.options[sel.selectedIndex].value) {
case "BEIGE":
single1.setLcdColor(steelseries.LcdColor.BEIGE);
break;
case "BLUE":
single1.setLcdColor(steelseries.LcdColor.BLUE);
break;
case "ORANGE":
single1.setLcdColor(steelseries.LcdColor.ORANGE);
break;
case "RED":
single1.setLcdColor(steelseries.LcdColor.RED);
break;
case "YELLOW":
single1.setLcdColor(steelseries.LcdColor.YELLOW);
break;
case "WHITE":
single1.setLcdColor(steelseries.LcdColor.WHITE);
break;
case "GRAY":
single1.setLcdColor(steelseries.LcdColor.GRAY);
break;
case "BLACK":
single1.setLcdColor(steelseries.LcdColor.BLACK);
break;
case "GREEN":
single1.setLcdColor(steelseries.LcdColor.GREEN);
break;
case "BLUE2":
single1.setLcdColor(steelseries.LcdColor.BLUE2);
break;
case "BLUE_BLACK":
single1.setLcdColor(steelseries.LcdColor.BLUE_BLACK);
break;
case "BLUE_DARKBLUE":
single1.setLcdColor(steelseries.LcdColor.BLUE_DARKBLUE);
break;
case "BLUE_GRAY":
single1.setLcdColor(steelseries.LcdColor.BLUE_GRAY);
break;
case "STANDARD":
single1.setLcdColor(steelseries.LcdColor.STANDARD);
break;
case "STANDARD_GREEN":
single1.setLcdColor(steelseries.LcdColor.STANDARD_GREEN);
break;
case "BLUE_BLUE":
single1.setLcdColor(steelseries.LcdColor.BLUE_BLUE);
break;
case "RED_DARKRED":
single1.setLcdColor(steelseries.LcdColor.RED_DARKRED);
break;
case "DARKBLUE":
single1.setLcdColor(steelseries.LcdColor.DARKBLUE);
break;
case "LILA":
single1.setLcdColor(steelseries.LcdColor.LILA);
break;
case "BLACKRED":
single1.setLcdColor(steelseries.LcdColor.BLACKRED);
break;
case "DARKGREEN":
single1.setLcdColor(steelseries.LcdColor.DARKGREEN);
break;
case "SECTIONS":
single1.setLcdColor(steelseries.LcdColor.SECTIONS);
break;
}
}

</script>
<script type="text/javascript" src="tween-min.js"></script>
<script type="text/javascript" src="steelseries.js"></script>
</body></html>
Loading

0 comments on commit 611e988

Please sign in to comment.