Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Added section handling to DisplaySingle

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...
commit 611e9885a61e29c1e63bc00ebc3270729c24de21 1 parent 36147fa
@HanSolo authored
View
5 ChangeLog.txt
@@ -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.
View
8 demoExtras.html
@@ -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>
@@ -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;
}
}
View
145 demoLcdSections.html
@@ -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>
View
226 steelseries.js
@@ -2,7 +2,7 @@
* Name : steelseries.js
* Author : Gerrit Grunwald, Mark Crossley
* Last modified : 14.12.2011
- * Revision : 0.8.9
+ * Revision : 0.9.0
*/
var steelseries = function() {
@@ -5130,7 +5130,6 @@ var steelseries = function() {
var autoScroll = (undefined === parameters.autoScroll ? false : parameters.autoScroll);
var section = (undefined === parameters.section ? null : parameters.section);
-// var oldValue;
var scrolling = false;
var scrollX = 0;
var scrollTimer;
@@ -5158,14 +5157,16 @@ var steelseries = function() {
// ************** Buffer creation ********************
// Buffer for the lcd
var lcdBuffer;
+ var sectionBuffer = [];
+ var sectionForegroundColor = [];
// ************** Image creation ********************
- var drawLcdText = function(value) {
+ var drawLcdText = function(value, color) {
mainCtx.save();
mainCtx.textAlign = 'right';
mainCtx.textBaseline = 'middle';
- mainCtx.strokeStyle = lcdColor.textColor;
- mainCtx.fillStyle = lcdColor.textColor;
+ mainCtx.strokeStyle = color;
+ mainCtx.fillStyle = color;
if (lcdColor === steelseries.LcdColor.STANDARD || lcdColor === steelseries.LcdColor.STANDARD_GREEN) {
mainCtx.shadowColor = 'gray';
mainCtx.shadowOffsetX = imageHeight * 0.05;
@@ -5226,6 +5227,79 @@ var steelseries = function() {
mainCtx.restore();
};
+ var createLcdSectionImage = function(width, height, color, lcdColor) {
+ var lcdSectionBuffer = createBuffer(width, height);
+ var lcdCtx = lcdSectionBuffer.getContext('2d');
+
+ lcdCtx.save();
+ var xB = 0;
+ var yB = 0;
+ var wB = width;
+ var hB = height;
+ var rB = Math.min(width, height) * 0.095;
+
+ var lcdBackground = lcdCtx.createLinearGradient(0, yB, 0, yB + hB);
+ lcdBackground.addColorStop(0, 'rgb(76, 76, 76)');
+ lcdBackground.addColorStop(0.08, 'rgb(102, 102, 102)');
+ lcdBackground.addColorStop(0.92, 'rgb(102, 102, 102)');
+ lcdBackground.addColorStop(1, 'rgb(230, 230, 230)');
+ lcdCtx.fillStyle = lcdBackground;
+
+ roundedRectangle(lcdCtx, xB, yB, wB, hB, rB);
+
+ lcdCtx.fill();
+ lcdCtx.restore();
+
+ lcdCtx.save();
+
+ var rgb = getColorValues(color);
+ var hsb = rgbToHsb(rgb[0], rgb[1], rgb[2]);
+
+ var rgbStart = getColorValues(lcdColor.gradientStartColor);
+ var hsbStart = rgbToHsb(rgbStart[0], rgbStart[1], rgbStart[2]);
+ var rgbFraction1 = getColorValues(lcdColor.gradientFraction1Color);
+ var hsbFraction1 = rgbToHsb(rgbFraction1[0], rgbFraction1[1], rgbFraction1[2]);
+ var rgbFraction2 = getColorValues(lcdColor.gradientFraction2Color);
+ var hsbFraction2 = rgbToHsb(rgbFraction2[0], rgbFraction2[1], rgbFraction2[2]);
+ var rgbFraction3 = getColorValues(lcdColor.gradientFraction3Color);
+ var hsbFraction3 = rgbToHsb(rgbFraction3[0], rgbFraction3[1], rgbFraction3[2]);
+ var rgbStop = getColorValues(lcdColor.gradientStopColor);
+ var hsbStop = rgbToHsb(rgbStop[0], rgbStop[1], rgbStop[2]);
+
+ var startColor = hsbToRgb(hsb[0], hsb[1], hsbStart[2] - 0.31);
+ var fraction1Color = hsbToRgb(hsb[0], hsb[1], hsbFraction1[2] - 0.31);
+ var fraction2Color = hsbToRgb(hsb[0], hsb[1], hsbFraction2[2] - 0.31);
+ var fraction3Color = hsbToRgb(hsb[0], hsb[1], hsbFraction3[2] - 0.31);
+ var stopColor = hsbToRgb(hsb[0], hsb[1], hsbStop[2] - 0.31);
+
+ var xF = 1;
+ var yF = 1;
+ var wF = width - 2;
+ var hF = height - 2;
+ var rF = rB - 1;
+ var lcdForeground = lcdCtx.createLinearGradient(0, yF, 0, yF + hF);
+ lcdForeground.addColorStop(0, 'rgb(' + startColor[0] + ', ' + startColor[1] + ', ' + startColor[2] + ')');
+ lcdForeground.addColorStop(0.03, 'rgb(' + fraction1Color[0] + ',' + fraction1Color[1] + ',' + fraction1Color[2] + ')');
+ lcdForeground.addColorStop(0.49, 'rgb(' + fraction2Color[0] + ',' + fraction2Color[1] + ',' + fraction2Color[2] + ')');
+ lcdForeground.addColorStop(0.5, 'rgb(' + fraction3Color[0] + ',' + fraction3Color[1] + ',' + fraction3Color[2] + ')');
+ lcdForeground.addColorStop(1, 'rgb(' + stopColor[0] + ',' + stopColor[1] + ',' + stopColor[2] + ')');
+ lcdCtx.fillStyle = lcdForeground;
+
+ roundedRectangle(lcdCtx, xF, yF, wF, hF, rF);
+
+ lcdCtx.fill();
+ lcdCtx.restore();
+
+ return lcdSectionBuffer;
+ };
+
+ var createSectionForegroundColor = function(sectionColor) {
+ var rgbSection = getColorValues(sectionColor);
+ var hsbSection = rgbToHsb(rgbSection[0], rgbSection[1], rgbSection[2]);
+ var sectionForegroundRgb = hsbToRgb(hsbSection[0], 0.57, 0.83);
+ return 'rgb(' + sectionForegroundRgb[0] + ', ' + sectionForegroundRgb[1] + ', ' + sectionForegroundRgb[2] + ')';
+ }
+
var animate = function() {
if (scrolling) {
if (scrollX > imageWidth) {
@@ -5245,6 +5319,14 @@ var steelseries = function() {
// Create lcd background if selected in background buffer (backgroundBuffer)
lcdBuffer = createLcdBackgroundImage(width, height, lcdColor);
+
+ if (null !== section && 0 < section.length) {
+ for (var sectionIndex = 0 ; sectionIndex < section.length ; sectionIndex++) {
+ sectionBuffer[sectionIndex] = createLcdSectionImage(width, height, section[sectionIndex].color, lcdColor);
+ sectionForegroundColor[sectionIndex] = createSectionForegroundColor(section[sectionIndex].color);
+ }
+ }
+
};
// ************** Public methods ********************
@@ -5302,15 +5384,27 @@ var steelseries = function() {
if (!initialized) {
init();
}
-
- //mainCtx.save();
+
mainCtx.clearRect(0, 0, mainCtx.canvas.width, mainCtx.canvas.height);
-
- // Draw lcd background
- mainCtx.drawImage(lcdBuffer, 0, 0);
-
+
+ var lcdBackgroundBuffer = lcdBuffer;
+ var lcdTextColor = lcdColor.textColor;
+ // Draw sections
+ if (null !== section && 0 < section.length) {
+ for (var sectionIndex = 0 ; sectionIndex < section.length ; sectionIndex++) {
+ if (value >= section[sectionIndex].start && value <= section[sectionIndex].stop) {
+ lcdBackgroundBuffer = sectionBuffer[sectionIndex];
+ lcdTextColor = sectionForegroundColor[sectionIndex];
+ break;
+ }
+ }
+ }
+
+ // Draw lcd background
+ mainCtx.drawImage(lcdBackgroundBuffer, 0, 0);
+
// Draw lcd text
- drawLcdText(value);
+ drawLcdText(value, lcdTextColor);
};
// Visualize the component
@@ -13461,17 +13555,6 @@ var steelseries = function() {
ctx.fill();
});
colorData = lookupBuffer.getContext('2d').getImageData(0, 0, 2, 2).data;
-
- /*
- for (var i = 0; i < data.length; i += 4) {
- var red = data[i]; // red
- var green = data[i + 1]; // green
- var blue = data[i + 2]; // blue
- //var alpha = data[i + 3]; // alpha
- console.log(red + ", " + green + ", " + blue);
- }
- */
-
return [colorData[0], colorData[1], colorData[2], colorData[3]];
}
@@ -13558,21 +13641,93 @@ var steelseries = function() {
return [Math.floor(red * 255), Math.floor(green * 255), Math.floor(blue * 255)];
}
- function hsb2Hsl(hue, saturation, brightness) {
+ function hsbToHsl(hue, saturation, brightness) {
var lightness = (brightness - saturation) / 2;
lightness = (lightness > 1 ? 1 : (lightness < 0 ? 0 : lightness));
return [hue, saturation, lightness];
}
- function hsl2Hsb(hue, saturation, lightness) {
+ function hslToHsb(hue, saturation, lightness) {
var brightness = (lightness * 2) + saturation;
return [hue, saturation, brightness];
}
- function hsb2Rgb(hue, saturation, brightness) {
- var tmp = hsb2Hsl(hue, saturation, brightness);
- return hsl2Rgb(tmp[0], tmp[1], tmp[2]);
- }
+ function hsbToRgb(hue, saturation, brightness){
+ var r, g, b;
+
+ var i = Math.floor(hue * 6);
+ var f = hue * 6 - i;
+ var p = brightness * (1 - saturation);
+ var q = brightness * (1 - f * saturation);
+ var t = brightness * (1 - (1 - f) * saturation);
+
+ switch(i % 6){
+ case 0:
+ r = brightness;
+ g = t
+ b = p;
+ break;
+ case 1:
+ r = q
+ g = brightness;
+ b = p;
+ break;
+ case 2:
+ r = p;
+ g = brightness;
+ b = t;
+ break;
+ case 3:
+ r = p;
+ g = q;
+ b = brightness;
+ break;
+ case 4:
+ r = t;
+ g = p;
+ b = brightness;
+ break;
+ case 5:
+ r = brightness;
+ g = p;
+ b = q;
+ break;
+ }
+
+ return [Math.floor(r * 255), Math.floor(g * 255), Math.floor(b * 255)];
+ }
+
+ function rgbToHsb(r, g, b){
+ r = r/255;
+ g = g/255;
+ b = b/255;
+ var max = Math.max(r, g, b);
+ var min = Math.min(r, g, b);
+ var hue;
+ var saturation;
+ var brightness = max;
+
+ var delta = max - min;
+ saturation = max == 0 ? 0 : delta / max;
+
+ if(max == min) {
+ hue = 0; // achromatic
+ } else {
+ switch(max){
+ case r:
+ hue = (g - b) / delta + (g < b ? 6 : 0);
+ break;
+ case g:
+ hue = (b - r) / delta + 2;
+ break;
+ case b:
+ hue = (r - g) / delta + 4;
+ break;
+ }
+ hue /= 6;
+ }
+ return [hue, saturation, brightness];
+ }
function darker(color, fraction) {
var red = Math.floor(color.getRed() * (1 - fraction));
@@ -13613,6 +13768,19 @@ var steelseries = function() {
return wrap((angle2 - angle1), -180, 180);
}
+ function getColorValues(color) {
+ var colorData;
+ var lookupBuffer = drawToBuffer(1, 1, function(ctx) {
+ ctx.fillStyle = color;
+ ctx.beginPath();
+ ctx.rect(0, 0, 1, 1);
+ ctx.fill();
+ });
+ colorData = lookupBuffer.getContext('2d').getImageData(0, 0, 2, 2).data;
+
+ return new Array(colorData[0], colorData[1], colorData[2]);
+ };
+
//**************************************** C O N S T A N T S ***************************************************
var backgroundColorDef;
(function() {
Please sign in to comment.
Something went wrong with that request. Please try again.