@@ -4,93 +4,23 @@ var React = require('react');
var TabbedArea = require('react-bootstrap').TabbedArea;
var TabPane = require('react-bootstrap').TabPane;
var Panel = require('react-bootstrap').Panel;
var ButtonToolbar = require('react-bootstrap').ButtonToolbar;

var BigButtonSet = require('./bigButtonSet');
var IftttTable = require('./iftttTable');
var MailTable = require('./mailTable');
var BigButton = require('./bigButton');

var remote = window.require('remote');
var Blink1Api = remote.require('./src/server/blink1ServerApi');

//var Blink1Api = require('../../api/blink1DeviceApi');
//var Blink1Api = window.require('remote').require('./src/server/blink1ServerApi');
//var remote = window.require('remote');
//var Blink1Api = remote.require('../../server/blink1ServerApi');

var Blink1TabViews = React.createClass({

getInitialState: function() {
return {
buttonsSys: [
{ name: "Color Cycle", type: "sys" },
{ name: "Mood Light", type: "sys" },
{ name: "Strobe Light", type: "sys" },
{ name: "White", type: "sys" },
{ name: "Off", type: "sys" }
],
buttonsUser: [
{ name: "Available", type: "color", color: "#00FF00" },
{ name: "Busy", type: "color", color: "#ffFF00" },
{ name: "Away", type: "color", color: "#ff0000" },
{ name: "Some Long Name", type: "color", color: "#336699" }
]
};
},

addBigButton: function() { // FIXME: this is hacky
this.state.buttonsUser.push( {name: "BigButton", type: "color", color: this.state.blink1Color});
this.setState( {buttonsUser: this.state.buttonsUser });
},
setBlink1Color: function(color) {
console.log("setBlink1Color:", color);
Blink1Api.fadeToColor( 100, color );
},

playBigButton: function(buttontype, buttonindex) {
console.log("playBigButton:", buttontype, buttonindex);
if( buttontype === 'sys' ) {
var butt = this.state.buttonsSys[buttonindex];
console.log("system button parsing goes here");
if( butt.name === "White" ) {
this.setBlink1Color( "#FFFFFF" );
}
else if( butt.name === "Off" ) {
this.setBlink1Color( "#000000" );
}
}
else if( buttontype === 'color' ) {
this.setBlink1Color( this.state.buttonsUser[buttonindex].color );
}
},


render: function() {
console.log("blink1TabViews.render");

var createBigButton = function(button, index) {
return (
<BigButton key={index} name={button.name} type={button.type} color={button.color}
onClick={this.playBigButton.bind(null, button.type, index)} />
);
};

return (
<div>
<TabbedArea>
<TabPane eventKey={1} tab={<i className="fa fa-long-arrow-right"> Start</i>}>
<Panel style={{height: 200}}>
<div style={{padding: 10}}>
<ButtonToolbar>
{this.state.buttonsSys.map(createBigButton, this)}
</ButtonToolbar>
</div>
<div style={{padding: 10}}>
<ButtonToolbar>
{this.state.buttonsUser.map(createBigButton, this)}
<BigButton key="add" name="add" type="add" onClick={this.addBigButton} />
</ButtonToolbar>
</div>
<BigButtonSet />
</Panel>
</TabPane>
<TabPane eventKey={2} tab={<i className="fa fa-plug"> IFTTT </i>}>
@@ -9,7 +9,8 @@ var DropdownButton = require('react-bootstrap').DropdownButton;

var Pattern = require('./pattern');

var PatternsApi = require('../../api/patternsApi');
var remote = window.require('remote');
var PatternsApi = remote.require('./src/api/patternsApi');


var PatternList = React.createClass({
@@ -48,10 +49,10 @@ var PatternList = React.createClass({
this.setState( {patterns: PatternsApi.getAllPatterns()} ); // tell React to reload this component?
console.log(JSON.stringify(this.state.patterns)); // dump all patterns
},
playStopPattern: function(pattid) {
playStopPattern: function(pattid) { // FIXME: should have 'play' and 'stop'
var p = PatternsApi.getPatternById( pattid );
p.playing = !p.playing;
PatternsApi.savePattern( p );
//PatternsApi.savePattern( p );
console.log("playStopPattern: ", pattid, p.playing);
if( p.playing ) {
PatternsApi.playPattern(pattid, this.updatePatternState);
@@ -2,50 +2,44 @@

var React = require('react');

//var Blink1Api = require('../../api/blink1DeviceApi');
var remote = window.require('remote');
var Blink1Api = remote.require('./src/server/blink1ServerApi');

//var colorparse = require('parse-color');

var mystyle = {
width: 150,
height: 120,
display: "block",
display: "block",
marginLeft: "auto",
marginRight: "auto"
};

var VirtualBlink1 = React.createClass({
getInitialState: function() {
return {
blink1Color: '#ff00ff'
color: '#ff00ff'
};
},
// FIXME: this is kind of a big hack, use Flux!
fetchBlink1Color: function() {
fetchBlink1Color: function(color) {
//console.log("fetchBlink1Color", color); //, Blink1Api.getCurrentColor() );
this.setState( {
blink1Color: Blink1Api.getCurrentColor()
color: color // Blink1Api.getCurrentColor()
});
//console.log("fetchBlink1Color", Blink1Api.getCurrentColor() );
setTimeout( this.fetchBlink1Color, 50 );
},

componentDidMount: function() {
this.fetchBlink1Color();
Blink1Api.addChangeListener( this.fetchBlink1Color );
},

render: function() {
//console.log("virtualBlink1.render:", this.props.blink1Color);
mystyle.background = this.state.blink1Color;
mystyle.background = this.state.color;
//var colr = colorparse( this.props.blink1Color );
//var c = colr.rgba;
var img0style = { width: 240, height: 192,
//background: this.props.blink1Color
backgroundImage: [
//'radial-gradient( rgba(' + c[0] + ',' + c[1] + ',' + c[2] + ',0.5} 0%, rgba(255,255,255,0.1) 65%)',
"url(images/device-light-mask.png)",
"radial-gradient(" + this.state.blink1Color + " 0%, rgba(255,255,255,0.1) 55%" + ")",
"radial-gradient(" + this.state.color + " 0%, rgba(255,255,255,0.1) 55%" + ")",
"url(images/device-light-bg-top.png)",
"url(images/device-light-bg.png)"
]
@@ -54,9 +48,9 @@ var VirtualBlink1 = React.createClass({
// <img style={img2style} src="images/device-light-bg.png" />
// <img style={img3style} src="images/device-light-mask.png" />

var img1style = { width: 240, height: 192 };
var img2style = { width: 240, height: 192, position: "relative", top: 0 };
var img3style = { width: 240, height: 192, position: "relative", top: 0 };
// var img1style = { width: 240, height: 192 };
// var img2style = { width: 240, height: 192, position: "relative", top: 0 };
// var img3style = { width: 240, height: 192, position: "relative", top: 0 };
return (
<div style={img0style}>
</div>
@@ -1,6 +1,6 @@
<!DOCTYPE html>
<html lang="en">
<head>
<head>
<title>blink1control</title>
<link rel="stylesheet" href="css/bundle.css">
</head>
@@ -9,7 +9,7 @@
<script src="scripts/bundle.js"></script>
<!-- build:remove -->
<!-- Connect to server process -->
<script>require('electron-connect').client.create()</script>
<!-- <script>require('electron-connect').client.create()</script> -->
<!-- end:build -->
</body>
</html>
</html>
@@ -5,7 +5,8 @@ var Blink1 = require('node-blink1');

var colorparse = require('parse-color');


// globals because we are a singleton
var listeners = [];
var blink1serials = []; // no, use hash? Blink1.devices();

var blink1 = null;
@@ -21,123 +22,138 @@ var _clone = function(item) {

var Blink1ServerApi = {

startDeviceListener: function() {
startDeviceListener: function() {
console.log("blink1serials:", typeof blink1serials);
// initial population of any already-plugged in devices
var serials = Blink1.devices();
serials.map( function(s) {
Blink1ServerApi._addDevice(s);
});

console.log('Blink1ServerApi.startDeviceListener');
// -- USB detection api
// https://github.com/MadLittleMods/node-usb-detection
usbDetect.on('add', function(device) {
console.log('add', JSON.stringify(device), device);
var vid = device.vendorId;
var pid = device.productId;
var serialnumber = device.serialNumber;
if( vid === blink1Vid && pid === blink1Pid ) {
//console.log('Blink1ServerApi.deviceListener, added', vid, pid, serialnumber);
Blink1ServerApi._addDevice( serialnumber );
}
});
usbDetect.on('remove', function(device) {
//console.log('remove', device);
var vid = device.vendorId;
var pid = device.productId;
var serialnumber = device.serialNumber;
if( vid === blink1Vid && pid === blink1Pid ) {
Blink1ServerApi._removeDevice( serialnumber );
}
});
},

closeAll: function() {
// initial population of any already-plugged in devices
var serials = Blink1.devices();
serials.map( function(s) {
Blink1ServerApi._addDevice(s);
});

console.log('Blink1ServerApi.startDeviceListener');
// -- USB detection api
// https://github.com/MadLittleMods/node-usb-detection
usbDetect.on('add', function(device) {
console.log('add', JSON.stringify(device), device);
var vid = device.vendorId;
var pid = device.productId;
var serialnumber = device.serialNumber;
if( vid === blink1Vid && pid === blink1Pid ) {
//console.log('Blink1ServerApi.deviceListener, added', vid, pid, serialnumber);
Blink1ServerApi._addDevice( serialnumber );
}
});
usbDetect.on('remove', function(device) {
//console.log('remove', device);
var vid = device.vendorId;
var pid = device.productId;
var serialnumber = device.serialNumber;
if( vid === blink1Vid && pid === blink1Pid ) {
Blink1ServerApi._removeDevice( serialnumber );
}
});
},

closeAll: function() {
console.log("Blink1ServerApi closeAll");
if( blink1 ) { blink1.off(); }
blink1serials.map( Blink1ServerApi._removeDevice );
usbDetect.stopMonitoring();
},

_addDevice: function(serialnumber) {
console.log("Blink1ServerApi._addDevice", JSON.stringify(blink1serials));
if( blink1serials.indexOf(serialnumber) === -1 ) {
console.log("new serial, lighting it up");
setTimeout(function() {
Blink1ServerApi._testDevice(); // FIXME: remove
}, 500);
usbDetect.stopMonitoring();
},

_addDevice: function(serialnumber) {
console.log("Blink1ServerApi._addDevice", JSON.stringify(blink1serials));
if( blink1serials.indexOf(serialnumber) === -1 ) {
console.log("new serial, lighting it up");
setTimeout(function() {
Blink1ServerApi._testDevice(); // FIXME: remove
}, 500);
blink1serials.push(serialnumber);
}
},
_removeDevice: function(serialnumber) {
console.log("Blink1ServerApi._removeDevice", JSON.stringify(blink1serials));
}
},
_removeDevice: function(serialnumber) {
console.log("Blink1ServerApi._removeDevice", JSON.stringify(blink1serials));
var i = blink1serials.indexOf(serialnumber);
if( i > -1 ) { // FIXME: this seems hacky
delete blink1serials[i];
}
if( blink1 ) {
console.log("closing blink1");
blink1.close();
blink1 = null;
}
},
_testDevice: function() {
console.log("opening blink1 to test...");
blink1 = new Blink1();
blink1.fadeToRGB(100, 72, 72, 22 );
},

getAllSerials: function() {
//blink1serials = Blink1.devices();
return _clone(blink1serials);
},

isConnected: function() {
return (blink1serials.length > 0);
},

serialNumber: function() {
if( this.isConnected() ) {
return blink1serials[0];
}
return '';
},
serialNumberForDisplay: function() {
if( this.isConnected() ) {
return blink1serials[0];
}
return '-';
},

iftttKey: function() { // FIXME:
return "ABCD1234CAFE0000";
},

_fadeToRGB: function( millis, r, g, b ) {
if( blink1 ) {
blink1.fadeToRGB( millis, r, g, b );
}
else {
//bconsole.log("Blink1ServerApi._fadeToRGB: no blink1");
}
},

fadeToColor: function( millis, color ) {
//console.log("Blink1ServerApi.fadeToColor:", typeof color, (color instanceof String), JSON.stringify(color) ); //, " : ", color);
//if( color instanceof String ) { // NOOOO, this is not always true, literals vs objects
if( typeof color === 'string' ) {
color = colorparse( color ); // FIXME: must be better way
}
currentColor = color.hex;
console.log("Blink1ServerApi.fadeToColor: currentColor:", currentColor, "ms:", millis );

Blink1ServerApi._fadeToRGB( millis, color.rgb[0], color.rgb[1], color.rgb[2]);
},

getCurrentColor: function() {
return currentColor;
}
if( blink1 ) {
console.log("closing blink1");
blink1.close();
blink1 = null;
}
},
_testDevice: function() {
console.log("opening blink1 to test...");
blink1 = new Blink1();
blink1.fadeToRGB(100, 72, 72, 22 );
},

getAllSerials: function() {
//blink1serials = Blink1.devices();
return _clone(blink1serials);
},

isConnected: function() {
return (blink1serials.length > 0);
},

serialNumber: function() {
if( this.isConnected() ) {
return blink1serials[0];
}
return '';
},
serialNumberForDisplay: function() {
if( this.isConnected() ) {
return blink1serials[0];
}
return '-';
},
iftttKey: function() { // FIXME:
return "ABCD1234CAFE0000";
},

_fadeToRGB: function( millis, r, g, b ) {
if( blink1 ) {
blink1.fadeToRGB( millis, r, g, b );
}
else {
//bconsole.log("Blink1ServerApi._fadeToRGB: no blink1");
}
},

fadeToColor: function( millis, color ) {
//console.log("Blink1ServerApi.fadeToColor:", typeof color, (color instanceof String), JSON.stringify(color) ); //, " : ", color);
//if( color instanceof String ) { // NOOOO, this is not always true, literals vs objects
if( typeof color === 'string' ) {
color = colorparse( color ); // FIXME: must be better way
}
//console.log("Blink1ServerApi.fadeToColor: currentColor:", currentColor, "ms:", millis );

this._fadeToRGB( millis, color.rgb[0], color.rgb[1], color.rgb[2]);
currentColor = color.hex;
this.notifyChange();
},
addChangeListener: function(callback) {
listeners.push(callback);
console.log("Blink1Api: current listeners", listeners );
//return id;
},
removeChangeListener: function(callback) {
// haha
return callback;
},
notifyChange: function() {
//console.log('notify change');
listeners.map( function(cb) {
cb( currentColor );
});
},

getCurrentColor: function() {
return currentColor;
}


};