huepi
Version:
hue (Philips Wireless Lighting) Api interface for JavaScript
337 lines (305 loc) • 14.6 kB
HTML
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<title>Hue Immediate</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' />
<meta name='mobile-web-app-capable' content='yes' />
<meta name='mobile-web-app-title' content='Hue Immediate' />
<meta name='apple-mobile-web-app-title' content='Hue Immediate' />
<meta name='apple-mobile-web-app-capable' content='yes' />
<meta name='apple-mobile-web-app-status-bar-style' content='black' />
<script src='http://code.jquery.com/jquery-1.11.2.min.js' type='text/javascript' ></script>
<script src='http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js' type='text/javascript' ></script>
<link rel='stylesheet' href='http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css'/>
<script src='../huepi.js' type='text/javascript'></script>
<script src='cordova.js' type='text/javascript' onload="javascript:window.isCordovaApp = true;"></script>
<style type='text/css'>
html, body, .page, .ui-mobile, .ui-mobile-viewport, .ui-page {
width: 100%;
height: 100%;
background:#000000;
border: 0px;
color: #ffffff;
text-shadow: 0px 0px;
}
.container {
float: left;
display: table;
width: 50%;
height: 50%;
margin-top: 0px;
text-align: center;
}
@media screen and (orientation:portrait) {
.container {
width: 100%;
height: 50%;
margin-top: 00px;
}
}
@media screen and (orientation:landscape) {
.container {
width: 50%;
height: 100%;
margin-top: -00px;
}
}
.content {
display: table-cell;
text-align: center;
vertical-align: middle;
}
.items {
}
.ui-slider-track {
margin-left: 15px;
max-width: 320px;
}
#feetupbutton,
#relaxbutton, #energizebutton, #concentratebutton, #readingbutton,
#onbutton, #offbutton {
min-width: 96px;
max-width: 128px;
}
.footer {
position: fixed;
left: 0px;
bottom: 0px;
height: auto;
width: 100%;
text-align: center;
background: #f6f6f6;
color: #000000;
}
</style>
</head>
<body>
<script type='text/javascript' >
var MyHue = new huepi();
var HeartbeatInterval;
var HueImage = new Image();
HueImage.src = 'images/HUE.png';
if (window.isCordovaApp) {
document.addEventListener("deviceready", onStartup, false);
document.addEventListener("pause", onPause, false);
document.addEventListener("resume", onResume, false);
} else
$(document).ready(onStartup);
HueImage.onload = function() {
window.onresize();
};
window.onresize = function() {
Redraw();
}
function Redraw() {
var HueCanvas = document.getElementById('HUECanvas');
var HueContext = document.getElementById('HUECanvas').getContext('2d');
// Canvas size should be set by script not css, otherwise getting HueImagePixel doesn't match canvas sizes
if ($(window).width() > $(window).height()) {
HUECanvas.width = 0.45 * $(window).width(); // Landscape
} else {
HUECanvas.width = 0.45 * $(window).height(); // Portrait
}
HueCanvas.height = HueCanvas.width;
HueContext.drawImage(HueImage, 0, 0, HueCanvas.width, HueCanvas.height); // ReDraw
};
function onStartup() {
$("#HUECanvas").click(function(event) {
var x = event.pageX - event.currentTarget.offsetLeft;
var y = event.pageY - event.currentTarget.offsetTop;
var HueContext = document.getElementById('HUECanvas').getContext('2d');
var HueImagedata = HueContext.getImageData(x, y, 1, 1); // one Pixel at Cursor
var HueImagePixel = HueImagedata.data; // data[] RGB of Pixel
MyHue.GroupSetRGB(0, HueImagePixel[0]/255, HueImagePixel[1]/255, HueImagePixel[2]/255);
});
$('#brightnessslider').on('slidestop', function(event, ui) {
var Brightness = parseInt($(this).val());
MyHue.GroupSetBrightness(0, Brightness);
});
LightSwitchOnEvent = document.createEvent("Event");
LightSwitchOnEvent.initEvent("LightSwitchOn", true, true);
document.addEventListener("LightSwitchOn", onLightSwitchOn, false);
LightSwitchOffEvent = document.createEvent("Event");
LightSwitchOffEvent.initEvent("LightSwitchOff", true, true);
document.addEventListener("LightSwitchOff", onLightSwitchOff, false);
onResume();
}
function onResume() {
window.onresize();
ConnectToHueBridge();
HeartbeatInterval = setInterval(StatusHeartbeat, 2500);
}
function onPause() {
window.clearInterval(HeartbeatInterval);
$('#HUEInfoBar').show(500);
}
function StatusHeartbeat() {
MyHue.BridgeGetData().then(function UpdateUI() {
$('#HUEBridgeName').text('Bridge Name: ' +MyHue.BridgeName);
$('#HUEStatus').text('Connected');
$('#HUEInfoBar').slideUp(1500);
$('#brightnessslider').val(MyHue.Lights[2].state.bri); // Get brightness of 2nd light for now...
$('#brightnessslider').slider('refresh');
DemoBehaviour();
}, function BridgeGetDataFailed() {
$('#HUEStatus').text('StatusHeartbeat BridgeGet Failed');
setTimeout(function() {
onPause();
onResume();
}, 100);
});
}
// Check Cached Bridge IP
// Discover Bridge via Portal
// Check if UserName is Whitelisted (via HEUPI.BridgeGetData)
// if Not->Try to Create User
function ConnectToHueBridge() {
if (!localStorage.MyHueBridgeIP) { // No Cached BridgeIP?
$('#HUEStatus').text('Trying to Discover HUE Bridge via HUE Portal');
MyHue.PortalDiscoverLocalBridges().then(function BridgesDiscovered() {
$('#HUEBridgeIP').text('Bridge IP: ' + MyHue.BridgeIP);
MyHue.BridgeGetConfig().then(function BridgeConfigReceived() {
$('#HUEBridgeName').text('Bridge Name: ' +MyHue.BridgeName);
MyHue.BridgeGetData().then(function BridgeDataReceived() {
localStorage.MyHueBridgeIP = MyHue.BridgeIP; // Cache BridgeIP
$('#HUEStatus').text('Connected');
}, function UnableToRetreiveBridgeData() {
$('#HUEStatus').text('Please press connect button on the hue Bridge');
MyHue.BridgeCreateUser().then(function BridegeUserCreated() {
localStorage.MyHueBridgeIP = MyHue.BridgeIP; // Cache BridgeIP
$('#HUEStatus').text('Connected');
return;
}, function UnableToCreateUseronBridge() {
$('#HUEStatus').text('.Please press connect button on the hue Bridge.');
return;
});
});
}, function UnableToRetreiveBridgeConfig() {
$('#HUEStatus').text('Unable to Retreive Bridge Configuration');
return;
});
}, function UnableToDiscoverLocalBridgesViaPortal() {
$('#HUEStatus').text('Unable to find Local Bridge via Portal');
return;
});
} else {
$('#HUEStatus').text('Using Cached Bridge IP');
MyHue.BridgeIP = localStorage.MyHueBridgeIP;
$('#HUEBridgeIP').text('Cached Bridge IP: ' + MyHue.BridgeIP);
MyHue.BridgeGetConfig().then(function CachedBridgeConfigReceived() {
$('#HUEBridgeName').text('Bridge Name: ' +MyHue.BridgeName);
MyHue.BridgeGetData().then(function CachedBridgeDataReceived() {
$('#HUEStatus').text('Connected');
}, function UnableToRetreiveCachedBridgeData() {
delete localStorage.MyHueBridgeIP; // not Whitelisted anymore
$('#HUEStatus').text('Unable to Retreive Cached Bridge Data');
return;
});
}, function UnableToRetreiveCachedBridgeConfig() {
delete localStorage.MyHueBridgeIP; // not found anymore
$('#HUEStatus').text('Unable to Retreive Cached Bridge Configuration');
});
}
}
function onLightSwitchOn(Event) {
MyHue.GroupOn(0);
MyHue.GroupSetCT(0, 467);
MyHue.GroupSetBrightness(0, 144);
}
function onLightSwitchOff(Event) {
MyHue.GroupOff(0);
}
function DemoBehaviour() {
var PrevHueLights = MyHue.Lights; // Store Previous State of Lights
// Triggers on Reachable which actually means Powered On/Off in my case ;-)
LightNr = 1;
while (MyHue.Lights[LightNr]) {
if ((MyHue.Lights[LightNr].state.reachable) !== (PrevHueLights[LightNr].state.reachable)) {
LightSwitchOnEvent.LightNr = LightNr;
if (MyHue.Lights[LightNr].state.reachable)
document.dispatchEvent(LightSwitchOnEvent);
else
document.dispatchEvent(LightSwitchOffEvent);
}
LightNr++;
}
// Convert 6 to RGB, XY, HueAngSatBri and set on 7
var RGB;
var xy;
var HueAngSatBri;
if (MyHue.Lights[6].state.colormode === 'hs') {
RGB = huepi.HelperHueAngSatBritoRGB(/*huepi.HelperHuetoHueAng*/(MyHue.Lights[6].state.hue*360/65535), MyHue.Lights[6].state.sat/255, MyHue.Lights[6].state.bri/255);
} else if (MyHue.Lights[6].state.colormode === 'xy') {
RGB = huepi.HelperXYtoRGBforModel(MyHue.Lights[6].state.xy[0], MyHue.Lights[6].state.xy[1], MyHue.Lights[6].state.bri/255, MyHue.Lights[6].modelid);
} else if (MyHue.Lights[6].state.colormode === 'ct') {
RGB = huepi.HelperColortemperaturetoRGB(Math.round(1000000.0 / MyHue.Lights[6].state.ct));
}
console.log('\n');
console.log('ColorMode ' + MyHue.Lights[6].state.colormode);
console.log('hue ' + MyHue.Lights[6].state.hue);
console.log('hueAng ' + MyHue.Lights[6].state.hue * 360 / 65355);
console.log('sat ' + MyHue.Lights[6].state.sat);
console.log('xy ' + MyHue.Lights[6].state.xy);
console.log('ct ' + MyHue.Lights[6].state.ct);
console.log('ColorTemp ' + Math.round(1000000 / MyHue.Lights[6].state.ct));
xy = huepi.HelperRGBtoXY(RGB.Red, RGB.Green, RGB.Blue);
HueAngSatBri = huepi.HelperRGBtoHueAngSatBri(RGB.Red, RGB.Green, RGB.Blue);
HueAngSatBri.Bri = MyHue.Lights[6].state.bri / 255;
console.log(RGB);
console.log(xy);
console.log(HueAngSatBri);
//MyHue.LightSetXY(7, xy.x, xy.y);
MyHue.LightSetHueAngSatBri(7, HueAngSatBri.Ang, HueAngSatBri.Sat, HueAngSatBri.Bri);
MyHue.LightSetBrightness(7, MyHue.Lights[6].state.bri);
}
</script>
<div class='page'>
<div class='container' id='HueDirect'>
<div class='content'>
<div class='items'>
<canvas id='HUECanvas' width=32 height=32 >It seems your device doesn't support the required HTML5 Canvas</canvas>
</div>
</div><!-- /group -->
</div><!-- /container -->
<div class='container' id='HueButtons'>
<div class='content'>
<div class='items' align='center'>
<a href='#' data-role='button' data-icon='' data-inline='true' data-mini='true' id='feetupbutton' onclick='JavaScript:MyHue.GroupSetHSB(0, 7000, 207, 207);'>Feet Up</a>
<a href='#' data-role='button' data-icon='' data-inline='true' data-mini='true' id='feetupbutton' onclick='JavaScript:MyHue.GroupSetColortemperature(0, 2500);MyHue.GroupSetBrightness(0, 144)'>Gold</a>
<div min-width='128'>
<input style='display:none' data-mini='false' type='range' name='brightnessslider' id='brightnessslider' min='0' max='255' value='140' />
</div>
<div>
<a href='#' id='relaxbutton' data-role='button' data-icon='' data-inline='true' data-mini='true' onclick='JavaScript:MyHue.GroupSetCT(0, 467);
MyHue.GroupSetBrightness(0, 144)'>Relax</a>
<a href='#' id='energizebutton' data-role='button' data-icon='' data-inline='true' data-mini='true' onclick='JavaScript:MyHue.GroupSetCT(0, 156);
MyHue.GroupSetBrightness(0, 203)'>Energize</a>
<a href='#' id='concentratebutton' data-role='button' data-icon='' data-inline='true' data-mini='true' onclick='JavaScript:MyHue.GroupSetCT(0, 231);
MyHue.GroupSetBrightness(0, 219)'>Concentrate</a>
<a href='#' id='readingbutton' data-role='button' data-icon='' data-inline='true' data-mini='true' onclick='JavaScript:MyHue.GroupSetCT(0, 343);
MyHue.GroupSetBrightness(0, 240)'>Reading</a>
</div>
</div>
</div><!-- /group -->
</div><!-- /container -->
<div class='footer'>
<div data-role='controlgroup' data-type='horizontal' data-inline='true' data-mini='true' >
<a href='#' id='onbutton' data-role='button' data-icon='' data-inline='false' class='ui-btn ui-btn-d' data-mini='true' onclick='JavaScript:MyHue.GroupOn(0)'>All On</a>
<a href='#' id='offbutton' data-role='button' data-icon='' data-inline='false' class='ui-btn ui-btn-b' data-mini='true' onclick='JavaScript:MyHue.GroupOff(0)'>All Off</a>
</div>
<div id='HUEInfoBar'>
<div id='HUEBridgeIP'>
Bridge IP: . . .
</div>
<div id='HUEBridgeName'>
Bridge Name: . . .
</div>
<div id='HUEStatus'>
Status . . . .
</div>
</div>
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>