huepi
Version:
hue (Philips Wireless Lighting) Api interface for JavaScript
72 lines (57 loc) • 2.56 kB
HTML
<html>
<head>
<title>HUE Gamut</title>
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
<meta name="viewport" content="width=device-width" />
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="../huepi.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript" >
$(document).ready(function() {
HueCanvas = document.getElementById("HUECanvas");
HueContext = document.getElementById("HUECanvas").getContext("2d");
$("#HUECanvas").bind("mousedown", function(event) {
Px = event.offsetX / HueCanvas.width;
Py = 1 - (event.offsetY / HueCanvas.height);
HueGamutRedraw();
});
Px = 0.0;
Py = 0.0;
HueGamutRedraw();
});
function HueGamutRedraw() {
// For the hue bulb the corners of the triangle are:
var PRed = {x: 0.6750, y: 0.3220};
var PGreen = {x: 0.4091, y: 0.5180};
var PBlue = {x: 0.1670, y: 0.0400};
var Corrected = huepi.HelperGamutXYforModel(Px, Py, "LCT001");
var Cx = Corrected.x;
var Cy = Corrected.y;
HueContext.fillStyle = '#ffffff';
HueContext.fillRect(0, 0, HueCanvas.width, HueCanvas.height);
// Draw Gamut
HueContext.fillStyle = '#CC0';
HueContext.strokeStyle = '#777';
HueContext.lineWidth = 2;
HueContext.beginPath();
HueContext.moveTo(PRed.x * HueCanvas.width, HueCanvas.height - PRed.y * HueCanvas.height);
HueContext.lineTo(PGreen.x * HueCanvas.width, HueCanvas.height - PGreen.y * HueCanvas.height);
HueContext.lineTo(PBlue.x * HueCanvas.width, HueCanvas.height - PBlue.y * HueCanvas.height);
HueContext.lineTo(PRed.x * HueCanvas.width, HueCanvas.height - PRed.y * HueCanvas.height);
HueContext.stroke();
HueContext.closePath();
// Draw C P
HueContext.strokeStyle = '#F84';
HueContext.lineWidth = 2;
HueContext.beginPath();
HueContext.moveTo(Px * HueCanvas.width - 1, HueCanvas.height - Py * HueCanvas.height - 1);
HueContext.lineTo(Cx * HueCanvas.width + 1, HueCanvas.height - Cy * HueCanvas.height + 1);
HueContext.stroke();
HueContext.closePath();
}
</script>
<canvas id="HUECanvas" width=512 height=512 style="border:3px solid #112233" >It seems your device doesn't support the required HTML5 Canvas</canvas>
</body>
</html>