New dials

This commit is contained in:
Martin Donnelly 2016-06-17 16:50:40 +01:00
parent 6368df81f9
commit 0d90e0b7f6
28 changed files with 1081 additions and 3963 deletions

View File

@ -1,8 +1,3 @@
body {
font-family: Ubuntu, "Helvetica Neue", Helvetica, arial, sans-serif;
}
#lightR, #projR { color: red !important; }
@ -17,7 +12,6 @@ body {
}
.h105 {
height: 100px;
}
@ -82,57 +76,6 @@ body {
/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
/* Styles */
.time, .date, .temp {
font-family: 'Ubuntu Condensed', sans-serif;
font-size: 33px;
/*color: #ff0000;*/
}
.time {
font-size: 50px;
line-height: 1;
}
.time span.hour:after {
content: "\a";
white-space: pre;
}
.temp {
font-size: 70px;
}
.temp::after {
content: "°";
}
.wd-we {
font-size: 75%;
}
.mo {
font-size: 85%;
}
.mo.mo-1, .mo.mo-10 {
font-size: 70%;
}
.mo.mo-2 {
font-size: 65%;
}
.mo.mo-8 {
font-size: 80%;
}
.mo.mo-9 {
font-size: 55%;
}
.mo.mo-11, .mo.mo-12 {
font-size: 60%;
}
}
@ -258,3 +201,13 @@ color:#78909C;
{
color:#2196F3;
}
/* svg classes */
svg text {
font-family:'Ubuntu Condensed',sans-serif;
font-size:12;
fill: #bad649;
text-align:right;
}

View File

@ -1,9 +1,14 @@
@import "app/libs/mui/src/sass/mui/colors";
$mui-body-bg-color: mui-color('grey', '100');
$mui-body-bg-color: /*#003F5a*/ mui-color('grey', '800');
$mui-base-font-color: rgba(#FFF, 0.87) !default;
$mui-base-font-family: Ubuntu, "Helvetica Neue", Helvetica, Arial, Verdana, Tahoma !default;
$mui-panel-bg-color : /*#004c6d*/ mui-color('grey', '900');
//$mui-accent-color: #bad649;
$mui-accent-color: #004c6d;
$mui-accent-color: #00aeef;
$mui-btn-accent-font-color: #004c6d;
//$mui-accent-color-dark: mui-color('green', 'A100');
$mui-accent-color-dark: #004c6d;

File diff suppressed because one or more lines are too long

View File

@ -92,6 +92,7 @@
<!-- build:vendor -->
<script type="text/javascript" src="libs/jquery/dist/jquery.js"></script>
<script type="text/javascript" src="libs/mui/packages/cdn/js/mui.js"></script>
<script type="text/javascript" src="libs/ejs/ejs.js"></script>
<script type="text/javascript"
src="libs/bluebird/js/browser/bluebird.js"></script>
<!-- endbuild -->
@ -118,6 +119,10 @@
src="js/device/CC2650/cc2650_humidity.js"></script>
<!-- endbuild -->
<script type="text/javascript"
src="js/device/fmc/TSL.js"></script>
<!-- build:js -->
<script type="text/javascript" src="js/index.js"></script>
<!-- endbuild -->

View File

@ -109,7 +109,7 @@ CC2650_ACCEL = function(p) {
this.data.mag.y = this.storeData(calcData.mag.y, this.data.mag.y);
this.data.mag.z = this.storeData(calcData.mag.z, this.data.mag.z);
// Console.log(JSON.stringify(this.data));
// console.log(JSON.stringify(this.data));
// Console.log(this.state);
};
@ -298,9 +298,9 @@ CC2650_ACCEL = function(p) {
var svg = this.generateBlankGraphBase(_subID,{width: '700',height: 150});
svg = this.graphAddLine(svg, xlineID, 'rgba(255,0,0,0.5)');
svg = this.graphAddLine(svg, ylineID, 'rgba(0,255,0,0.5)');
svg = this.graphAddLine(svg, zlineID, 'rgba(0,0,255,0.5)');
svg = this.graphAddLine(svg, xlineID, 'rgba(255,0,99,1)');
svg = this.graphAddLine(svg, ylineID, 'rgba(46,255,0,1)');
svg = this.graphAddLine(svg, zlineID, 'rgba(0,191,255,1)');
return svg;

View File

@ -87,10 +87,49 @@ var CC2650_TMP = function(p) {
};
this.animateGraph = function() {
this.simpleGraph(this.data.temp, 'temp');
this.simpleGraph(this.data.ambient, 'ambient');
// This.simpleGraph(this.data.temp, 'temp');
// debugger;
var arcTemp = this.frameID + 'temp-arc';
var arcAmbient = this.frameID + 'ambient-arc';
this.updateArc(this.data.temp, 'temp' , arcTemp);
this.updateArc(this.data.ambient, 'ambient' , arcAmbient);
//This.simpleGraph(this.data.ambient, 'ambient');
};
this.updateArc = function(data, subID, elmID) {
var ceilingLimit;
var _subID;
var _data;
var label;
_data = data || this.data;
_subID = subID || '';
if (_data.length > 0) {
ceilingLimit = 50;
var latest = _data[_data.length - 1];
var scale = 100 / ceilingLimit;
var arcP = scale * latest;
// Var xstep = (280 - 46) / 100;
label = this.frameID + subID + '-label';
document.getElementById(elmID).setAttribute('d', this.describeArc(150, 150, 100, 0, this.setArc(arcP)));
// document.getElementById(label).innerText(latest.toFixed(2) + 'ºc');
}
};
this.insertFrame = function() {
var liSetting;
@ -104,7 +143,28 @@ var CC2650_TMP = function(p) {
var temp = this.frameID + '-t';
var amb = this.frameID + '-a';
var row = $('<div />', {class: 'mui-row'});
var arcB = this.frameID + 'temp-arcB';
var arcTemp = this.frameID + 'temp-arc';
var ambientArcB = this.frameID + 'ambient-arcB';
var arcAmbient = this.frameID + 'ambient-arc';
var settings = {data: {baseID: this.frameID}};
var html = new EJS({url: './partials/cc2650_thermopile_dial.ejs'}).render(settings);
this.$id.append(html);
debugger;
document.getElementById(arcB).setAttribute('d', this.describeArc(150, 150, 100, 0, 240));
document.getElementById(arcTemp).setAttribute('d', this.describeArc(150, 150, 100, 0, this.setArc(0)));
document.getElementById(ambientArcB).setAttribute('d', this.describeArc(150, 150, 100, 0, 240));
document.getElementById(arcAmbient).setAttribute('d', this.describeArc(150, 150, 100, 0, this.setArc(0)));
/*Var row = $('<div />', {class: 'mui-row'});
$('<div />',
{class: 'mui-col-xs-3 mui--text-accent mui--text-right', text: 'Temp:'}).appendTo(row);
@ -152,7 +212,7 @@ var CC2650_TMP = function(p) {
this.$id.append($('<div>',{class: 'mui-tabs__pane',id: (amb + '-pane')}).append(blankChart));
}
*/
this.$result.temp = $('#' + temp);

440
app/js/device/fmc/TSL.js Normal file
View File

@ -0,0 +1,440 @@
/**
*
* User: Martin Donnelly
* Date: 2016-05-20
* Time: 10:13
*
*/
/* global CAPABILITY, inheritsFrom, capabilityManager, EJS, ejs */
/* global ble */
/* jshint browser: true , devel: true*/
var TSL = function(p) {
'use strict';
this.name = 'TSL';
this.deviceID = p.deviceID || null;
this.target = p.target || null;
// F000BB00-0451-4000-B000-A01D48F70D07
this.capabilityID = 'F000BB00-0451-4000-B000-A01D48F70D07';
this.serviceDef = {
service: 'F000BB00-0451-4000-B000-A01D48F70D07',
enable: 'F000BB01-0451-4000-B000-A01D48F70D07',
control: 'F000BB02-0451-4000-B000-A01D48F70D07',
period: 'F000BB03-0451-4000-B000-A01D48F70D07',
location: 'F000BB04-0451-4000-B000-A01D48F70D07',
historySize: 'F000BB05-0451-4000-B000-A01D48F70D07',
history: 'F000BB06-0451-4000-B000-A01D48F70D07',
historyAck: 'F000BB07-0451-4000-B000-A01D48F70D07',
temp: 'F000BB08-0451-4000-B000-A01D48F70D07',
tempMaximum: 'F000BB09-0451-4000-B000-A01D48F70D07',
tempMinimum: 'F000BB0A-0451-4000-B000-A01D48F70D07',
preValue: 'F000BB0B-0451-4000-B000-A01D48F70D07',
presMaximum: 'F000BB0C-0451-4000-B000-A01D48F70D07',
presMinimum: 'F000BB0D-0451-4000-B000-A01D48F70D07',
humidityValue: 'F000BB0E-0451-4000-B000-A01D48F70D07',
humidityMax: 'F000BB0F-0451-4000-B000-A01D48F70D07',
humidityMin: 'F000BB10-0451-4000-B000-A01D48F70D07',
accelerationMax: 'F000BB11-0451-4000-B000-A01D48F70D07',
velocityMax: 'F000BB12-0451-4000-B000-A01D48F70D07',
loggerId: 'F000BB13-0451-4000-B000-A01D48F70D07',
shockBandwidth: 'F000BB14-0451-4000-B000-A01D48F70D07',
shockThreshold: 'F000BB15-0451-4000-B000-A01D48F70D07',
config: 'F0002902-0451-4000-B000-A01D48F70D07'
};
this.$result = {temp: null, tempMax: null, tempMin: null};
this.data = [];
this.setFrame();
this.read = {};
this.html = {};
this.history = null;
this.historyloops = 0;
this.arrayToHex = function(a) {
return a.map(function(i) {
return ('00' + i.toString(16)).slice(-2) + ',';
});
};
this.convertToPercent = function(raw) {
return ((raw[1] << 8) + (raw[0])) / 100;
};
this.convertToPressure = function(raw) {
return ((raw[1] << 8) + (raw[0])) ;
};
this.convertToHumidity = function(raw) {
return ((raw[1] << 8) + (raw[0])) ;
};
/*
This.$result.temp = $('#' + tslTemp);
this.$result.tempMax = $('#' + tslTempMax);
this.$result.tempMin = $('#' + tslTempMin);
*/
this.onReadVelState = function(d) {
var raw = new Uint8Array(d);
var output = [], signedOutput = new Int16Array(9);
// Var humidity = this.convertToPercent(raw);
console.log('Vel State:', raw);
// This.$result.h.text(humidity.toFixed(2) + '%');
/* output.push(((raw[1] << 8) + (raw[0])));
output.push(((raw[3] << 8) + (raw[2])));
output.push(((raw[5] << 8) + (raw[4])));
output.push(((raw[7] << 8) + (raw[6])));
output.push(((raw[9] << 8) + (raw[8])));
output.push(((raw[11] << 8) + (raw[10])));
output.push(((raw[13] << 8) + (raw[12])));
output.push(((raw[15] << 8) + (raw[14])));
output.push(((raw[17] << 8) + (raw[16])));
for (var t = 0;t < output.length;t++) {
signedOutput[t] = (output[t] * 1.0) / (32768/ 2);
}
console.log(output);
console.log(signedOutput);*/
};
this.onReadAccelState = function(d) {
var raw = new Uint8Array(d);
var output = [], signedOutput = new Int16Array(9);
// Var humidity = this.convertToPercent(raw);
console.log('Accel State:', raw);
// This.$result.h.text(humidity.toFixed(2) + '%');
output.push(((raw[1] << 8) + (raw[0])));
output.push(((raw[3] << 8) + (raw[2])));
output.push(((raw[5] << 8) + (raw[4])));
output.push(((raw[7] << 8) + (raw[6])));
output.push(((raw[9] << 8) + (raw[8])));
output.push(((raw[11] << 8) + (raw[10])));
output.push(((raw[13] << 8) + (raw[12])));
output.push(((raw[15] << 8) + (raw[14])));
output.push(((raw[17] << 8) + (raw[16])));
for (var t = 0;t < output.length;t++) {
signedOutput[t] = (output[t] * 1.0) / (32768/ 2);
}
console.log(output);
console.log(signedOutput);
};
this.onReadHumidityState = function(d) {
var raw = new Uint8Array(d);
var humidity = this.convertToPercent(raw);
console.log('Humidity State:', humidity);
this.$result.h.text(humidity.toFixed(2) + '%');
};
this.onReadHumidityMaxState = function(d) {
var raw = new Uint8Array(d);
var humidity = this.convertToPercent(raw);
console.log('Humidity Max State:', humidity);
this.$result.hMax.text(humidity.toFixed(2) + '%');
};
this.onReadHumidityMinState = function(d) {
var raw = new Uint8Array(d);
var humidity = this.convertToPercent(raw);
console.log('Humidity Min State:', humidity);
this.$result.hMin.text(humidity.toFixed(2) + '%');
};
this.onReadPressureState = function(d) {
var raw = new Uint8Array(d);
var pressure = this.convertToPressure(raw);
console.log('Pressure State:', pressure);
this.$result.p.text(pressure + 'Pa');
};
this.onReadPressureMaxState = function(d) {
var raw = new Uint8Array(d);
var pressure = this.convertToPressure(raw);
console.log('Pressure Max State:', pressure);
this.$result.pMax.text(pressure + 'Pa');
};
this.onReadPressureMinState = function(d) {
var raw = new Uint8Array(d);
var pressure = this.convertToPressure(raw);
console.log('Pressure Min State:', pressure);
this.$result.pMin.text(pressure + 'Pa');
};
this.onReadTempState = function(d) {
var raw = new Uint8Array(d);
var temp = this.convertToPercent(raw);
console.log('Temp State:', temp);
this.$result.temp.text(temp.toFixed(2) + '°C');
};
this.onReadTempMax = function(d) {
var raw = new Uint8Array(d);
var temp = this.convertToPercent(raw);
console.log('Temp Max:', temp);
this.$result.tempMax.text(temp.toFixed(2) + '°C');
};
this.onReadTempMin = function(d) {
var raw = new Uint8Array(d);
var temp = this.convertToPercent(raw);
console.log('Temp Min:', temp);
this.$result.tempMin.text(temp.toFixed(2) + '°C');
};
this.onHistoryAck = function(d) {
var raw = new Uint8Array(d);
var raw16 = new Uint16Array(d);
console.log('History Ack:', raw, raw16);
//this.$result.temp.text(temp.toFixed(2) + '°C');
};
this.onReadHistory = function(d) {
var raw = new Uint8Array(d);
console.log('History:', raw);
//this.$result.temp.text(temp.toFixed(2) + '°C');
this.historyloops++;
this.historyAck();
};
this.onHistorySize = function(d) {
var raw = new Uint8Array(d);
var raw16 = new Uint16Array(d);
console.log('History Size:', raw, raw16);
//this.$result.temp.text(temp.toFixed(2) + '°C');
this.history = new Uint8Array(raw16[0]);
this.readHistory();
};
this.historySize = function() {
console.log('historySize');
ble.read(this.deviceID,
this.serviceDef.service,
this.serviceDef.historySize,
this.onHistorySize.bind(this),
this.onError);
};
this.historyAck = function() {
console.log('historyAck');
ble.read(this.deviceID,
this.serviceDef.service,
this.serviceDef.historyAck,
this.onHistoryAck.bind(this),
this.onError);
};
this.readHistory = function() {
console.log('readHistory');
ble.read(this.deviceID,
this.serviceDef.service,
this.serviceDef.history,
this.onReadHistory.bind(this),
this.onError);
};
this.readAccelState = function() {
console.log('readHumidityState');
ble.read(this.deviceID,
this.serviceDef.service,
this.serviceDef.accelerationMax,
this.onReadAccelState.bind(this),
this.onError);
};
this.readVelState = function() {
console.log('readHumidityState');
ble.read(this.deviceID,
this.serviceDef.service,
this.serviceDef.velocityMax,
this.onReadVelState.bind(this),
this.onError);
};
this.readHumidityState = function() {
console.log('readHumidityState');
ble.read(this.deviceID,
this.serviceDef.service,
this.serviceDef.humidityValue,
this.onReadHumidityState.bind(this),
this.onError);
};
this.readHumidityMaxState = function() {
console.log('readHumidityState');
ble.read(this.deviceID,
this.serviceDef.service,
this.serviceDef.humidityMax,
this.onReadHumidityMaxState.bind(this),
this.onError);
};
this.readHumidityMinState = function() {
console.log('readHumidityState');
ble.read(this.deviceID,
this.serviceDef.service,
this.serviceDef.humidityMin,
this.onReadHumidityMinState.bind(this),
this.onError);
};
this.readPressureState = function() {
console.log('readPressureState');
ble.read(this.deviceID,
this.serviceDef.service,
this.serviceDef.preValue,
this.onReadPressureState.bind(this),
this.onError);
};
this.readPressureMaxState = function() {
console.log('readPressureMaxState');
ble.read(this.deviceID,
this.serviceDef.service,
this.serviceDef.presMaximum,
this.onReadPressureMaxState.bind(this),
this.onError);
};
this.readPressureMinState = function() {
console.log('readPressureMinState');
ble.read(this.deviceID,
this.serviceDef.service,
this.serviceDef.presMinimum,
this.onReadPressureMinState.bind(this),
this.onError);
};
this.readTempState = function() {
console.log('readTempState');
ble.read(this.deviceID,
this.serviceDef.service,
this.serviceDef.temp,
this.onReadTempState.bind(this),
this.onError);
};
this.readTempMax = function() {
console.log('readTempMax');
ble.read(this.deviceID,
this.serviceDef.service,
this.serviceDef.tempMaximum,
this.onReadTempMax.bind(this),
this.onError);
};
this.readTempMin = function() {
console.log('readTempMax');
ble.read(this.deviceID,
this.serviceDef.service,
this.serviceDef.tempMinimum,
this.onReadTempMin.bind(this),
this.onError);
};
this.readServices = function() {
this.readTempState();
this.readTempMax();
this.readTempMin();
this.readPressureState();
this.readPressureMaxState();
this.readPressureMinState();
this.readHumidityState();
this.readHumidityMaxState();
this.readHumidityMinState();
this.readAccelState();
this.readVelState();
this.historySize();
// this.readHistory();
// setTimeout(this.readServices.bind(this),20000);
};
this.startService = function() {
if (this.deviceID !== null) {
console.log('Starting TSL Service on ', this.deviceID);
console.log(this.serviceDef);
this.insertFrame();
this.readServices();
}
};
this.onTslData = function(data) {
var raw = new Uint16Array(data);
console.log(raw);
};
this.animateGraph = function() {
return -1;
};
this.insertFrame = function() {
var self = this;
// Call the parent displayForm first...
this.superClass_.insertFrame.call(self);
var tslTemp = this.frameID + '-t';
var tslP = this.frameID + '-p';
var tslH = this.frameID + '-h';
var settings = {data: {baseID: this.frameID}};
var html = new EJS({url: './partials/tsl.ejs'}).render(settings);
this.$id.append(html);
this.$result.temp = $('#' + tslTemp);
this.$result.tempMax = $('#' + tslTemp + 'max');
this.$result.tempMin = $('#' + tslTemp + 'min');
this.$result.p = $('#' + tslP);
this.$result.pMax = $('#' + tslP + 'max');
this.$result.pMin = $('#' + tslP + 'min');
this.$result.h = $('#' + tslH);
this.$result.hMax = $('#' + tslH + 'max');
this.$result.hMin = $('#' + tslH + 'min');
};
};
inheritsFrom(TSL, CAPABILITY);
capabilityManager.register({id: 'F000BB00-0451-4000-B000-A01D48F70D07', module: TSL});

View File

@ -242,6 +242,70 @@ CAPABILITY.prototype.animateGraph = function() {
};
CAPABILITY.prototype.polarToCartesian = function(centerX, centerY, radius, angleInDegrees) {
var angleInRadians = (angleInDegrees - 90) * Math.PI / 180.0;
return {
x: centerX + (radius * Math.cos(angleInRadians)),
y: centerY + (radius * Math.sin(angleInRadians))
};
};
CAPABILITY.prototype.describeArc = function(x, y, radius, startAngle, endAngle) {
var start = this.polarToCartesian(x, y, radius, endAngle);
var end = this.polarToCartesian(x, y, radius, startAngle);
var arcSweep = endAngle - startAngle <= 180 ? '0' : '1';
var d = [
'M', start.x, start.y,
'A', radius, radius, 0, arcSweep, 0, end.x, end.y
].join(' ');
return d;
};
CAPABILITY.prototype.setArc = function(percent) {
return (240 / 100) * percent;
};
CAPABILITY.prototype.updateArc = function(data, subID, elmID) {
var ceilingLimit;
var ceiling;
var _subID;
var _data;
_data = data || this.data;
_subID = subID || '';
if (_data.length > 0) {
ceiling = _data.reduce(function(p, v) {
return (Math.abs(p) > Math.abs(v) ? Math.abs(p) : Math.abs(v));
});
ceilingLimit = (Math.ceil((Math.round(ceiling) + 1) / 10) * 10);
if (ceilingLimit > 1000) {
ceilingLimit = (Math.ceil((Math.round(ceiling) + 1) / 50) * 50);
}
var latest = _data[_data.length-1];
var scale = 100 / ceilingLimit;
var arcP = scale * latest;
// Var xstep = (280 - 46) / 100;
document.getElementById(elmID).setAttribute('d', this.describeArc(150, 150, 100, 0, this.setArc(arcP)));
}
};
CAPABILITY.prototype.simpleGraph = function(data, subID) {
var ceilingLimit;
@ -272,8 +336,8 @@ CAPABILITY.prototype.simpleGraph = function(data, subID) {
var calcArray = [];
/*
var ceilingLimit = Math.floor(ceiling / 10) * 10;
/*
Var ceilingLimit = Math.floor(ceiling / 10) * 10;
if (ceilingLimit < ceiling) {
ceilingLimit = Math.floor((ceiling + (ceiling * 0.25)) / 10) * 10;
}

View File

@ -0,0 +1,61 @@
/**
*
* User: Martin Donnelly
* Date: 2016-05-20
* Time: 10:13
*
*/
/* global CAPABILITY, inheritsFrom, capabilityManager */
/* global ble */
/* jshint browser: true , devel: true*/
var DEVICEINFO = function() {
this.name = 'Device Information';
this.capabilityID = '180A';
this.serviceDef = {
service: '180A', manufacturer_name_string: '2A29', model_number_string: '2A24'
};
this.onBatteryLevelChange = function(data) {
console.log(data);
var a = new Uint8Array(data);
this.state = a[0];
console.log('onBatteryLevelChange', this.state);
};
this.readBatteryState = function() {
console.log('readBatteryState');
ble.read(this.deviceID,
this.serviceDef.service,
this.serviceDef.level,
this.onReadBatteryLevel.bind(this),
this.onError);
};
this.onReadBatteryLevel = function(data) {
console.log(data);
var a = new Uint8Array(data);
this.state = a[0];
console.log('onReadBatteryLevel', this.state);
};
this.startService = function() {
'use strict';
if (this.deviceID !== null) {
console.log('Starting Battery Service on ', this.deviceID);
console.log(this.serviceDef);
this.insertFrame();
ble.startNotification(this.deviceID,
this.serviceDef.service,
this.serviceDef.level,
this.onBatteryLevelChange.bind(this),
this.onError);
}
};
};
inheritsFrom(BATTERY, CAPABILITY);
capabilityManager.register({id: '180F', module: BATTERY});

View File

@ -0,0 +1,42 @@
<%= data.baseID + 'pressure-line' %>
<div class="mui-row">
<div class="mui-col-xs-3 mui--text-accent mui--text-right">Temp:</div>
<div class="mui-col-xs-3 mui--text-light" id="<%= data.baseID + '-t' %>">--</div>
<div class="mui-col-xs-3 mui--text-accent mui--text-right">Pressure:</div>
<div class="mui-col-xs-3 mui--text-light" id="<%= data.baseID + '-p' %>">--</div>
</div>
<ul class="mui-tabs__bar mui-tabs__bar--justified">
<li class="mui--is-active tabOnWhite"><a data-mui-toggle="tab"
data-mui-controls="<%= data.baseID + '-t-pane' %>">Temperature</a>
</li>
<li class="tabOnWhite"><a data-mui-toggle="tab"
data-mui-controls="<%= data.baseID + '-p-pane' %>">Pressure</a>
</li>
</ul>
<div class="mui-tabs__pane mui--is-active" id="<%= data.baseID + '-t-pane' %>">
<svg id="<%= data.baseID + 'temp-svg' %>" width="300" height="150" fill="blue">
<line x1="46" y1="12" x2="280" y2="12"
style="stroke:#004c6d;stroke-width:2;"></line>
<text id="<%= data.baseID + 'temp-txt1' %>" x="36" y="15" text-anchor="end">--</text>
<line x1="46" y1="136" x2="280" y2="136"
style="stroke:#004c6d;stroke-width:2;"></line>
<text id="undefined" x="36" y="139" text-anchor="end">0</text>
<polyline id="<%= data.baseID + 'temp-line' %>" fill="none" stroke="#2196F3"
text-anchor="end" stroke-width="2"
points=""></polyline>
</svg>
</div>
<div class="mui-tabs__pane" id="<%= data.baseID + '-p-pane' %>">
<svg id="<%= data.baseID + 'pressure-svg' %>" width="300" height="150" fill="blue">
<line x1="46" y1="12" x2="280" y2="12"
style="stroke:#004c6d;stroke-width:2;"></line>
<text id="<%= data.baseID + 'pressure-txt1' %>" x="36" y="15" text-anchor="end">--</text>
<line x1="46" y1="136" x2="280" y2="136"
style="stroke:#004c6d;stroke-width:2;"></line>
<text id="undefined" x="36" y="139" text-anchor="end">0</text>
<polyline id="<%= data.baseID + 'pressure-line' %>" fill="none" stroke="#2196F3"
text-anchor="end" stroke-width="2"
points=""></polyline>
</svg>
</div>

View File

@ -0,0 +1,48 @@
<div class="mui-row">
<div class="mui-col-xs-3 mui--text-accent mui--text-right">Temp:</div>
<div class="mui-col-xs-3 mui--text-light mui--text-left"
id="<%= data.baseID + '-t' %>">--
</div>
<div class="mui-col-xs-3 mui--text-accent mui--text-right">Ambient:</div>
<div class="mui-col-xs-3 mui--text-light" id="<%= data.baseID + '-a' %>">--
</div>
</div>
<ul class="mui-tabs__bar mui-tabs__bar--justified">
<li class="tabOnWhite mui--is-active"><a data-mui-toggle="tab"
data-mui-controls="<%= data.baseID + '-t-pane' %>">Temperature</a>
</li>
<li class="tabOnWhite"><a data-mui-toggle="tab"
data-mui-controls="<%= data.baseID + '-a-pane' %>">Ambient</a>
</li>
</ul>
<div class="mui-tabs__pane mui--is-active" id="<%= data.baseID + '-t-pane' %>">
<svg id="<%= data.baseID + 'temp-svg' %>" width="300" height="150"
fill="blue">
<line x1="46" y1="12" x2="280" y2="12"
style="stroke:#004c6d;stroke-width:2;"></line>
<text id="<%= data.baseID + 'temp-txt1' %>" x="36" y="15"
text-anchor="end">--
</text>
<line x1="46" y1="136" x2="280" y2="136"
style="stroke:#004c6d;stroke-width:2;"></line>
<text id="undefined" x="36" y="139" text-anchor="end">0</text>
<polyline id="<%= data.baseID + 'temp-line' %>" fill="none" stroke="#2196F3"
text-anchor="end" stroke-width="2" points=""></polyline>
</svg>
</div>
<div class="mui-tabs__pane" id="<%= data.baseID + '-a-pane' %>">
<svg id="<%= data.baseID + 'ambient-svg' %>" width="300" height="150"
fill="blue">
<line x1="46" y1="12" x2="280" y2="12"
style="stroke:#004c6d;stroke-width:2;"></line>
<text id="<%= data.baseID + 'ambient-txt1' %>" x="36" y="15"
text-anchor="end">--
</text>
<line x1="46" y1="136" x2="280" y2="136"
style="stroke:#004c6d;stroke-width:2;"></line>
<text id="undefined" x="36" y="139" text-anchor="end">0</text>
<polyline id="<%= data.baseID + 'ambient-line' %>" fill="none"
stroke="#2196F3" text-anchor="end" stroke-width="2"
points=""></polyline>
</svg>
</div>

View File

@ -0,0 +1,92 @@
<div class="mui-row">
<div class="mui-col-xs-3 mui--text-accent mui--text-right">Temp:</div>
<div class="mui-col-xs-3 mui--text-light mui--text-left"
id="<%= data.baseID + '-t' %>">--
</div>
<div class="mui-col-xs-3 mui--text-accent mui--text-right">Ambient:</div>
<div class="mui-col-xs-3 mui--text-light" id="<%= data.baseID + '-a' %>">--
</div>
</div>
<ul class="mui-tabs__bar mui-tabs__bar--justified">
<li class="tabOnWhite mui--is-active"><a data-mui-toggle="tab"
data-mui-controls="<%= data.baseID + '-t-pane' %>">Temperature</a>
</li>
<li class="tabOnWhite"><a data-mui-toggle="tab"
data-mui-controls="<%= data.baseID + '-a-pane' %>">Ambient</a>
</li>
</ul>
<div class="mui-tabs__pane mui--is-active" id="<%= data.baseID + '-t-pane' %>">
<svg width='300' height='200' viewbox='0 0 300 220' background="#212121" id="<%= data.baseID + 'temp-svg' %>">
<filter id="dropshadow" height="130%">
<feGaussianBlur in="SourceAlpha" stdDeviation="3"/> <!-- stdDeviation is how much to blur -->
<feOffset dx="2" dy="2" result="offsetblur"/> <!-- how much to offset -->
<feMerge>
<feMergeNode/> <!-- this contains the offset blurred image -->
<feMergeNode in="SourceGraphic"/> <!-- this contains the element that the filter is applied to -->
</feMerge>
</filter>
<g transform="translate(-90,40) rotate(-120 180 90)" >
<path id="<%= data.baseID + 'temp-arcB' %>" fill="none" stroke="rgb(61, 61, 61)" stroke-width="12" style="filter:url(#dropshadow)"/>
<path id="<%= data.baseID + 'temp-arc' %>" fill="none" stroke="#00bfff" stroke-width="12" />
</g>
<g transform="translate(150,100)">
<text id="<%= data.baseID + 'temp-label' %>" class='textLabel' x='0' y='100' fill='#bad649' font-size='50' style="filter:url(#dropshadow)">--ºc</text>
</g>
</svg>
<!--<svg id="<%= data.baseID + 'temp-svg' %>" width="300" height="150"
fill="blue">
<line x1="46" y1="12" x2="280" y2="12"
style="stroke:#004c6d;stroke-width:2;"></line>
<text id="<%= data.baseID + 'temp-txt1' %>" x="36" y="15"
text-anchor="end">&#45;&#45;
</text>
<line x1="46" y1="136" x2="280" y2="136"
style="stroke:#004c6d;stroke-width:2;"></line>
<text id="undefined" x="36" y="139" text-anchor="end">0</text>
<polyline id="<%= data.baseID + 'temp-line' %>" fill="none" stroke="#2196F3"
text-anchor="end" stroke-width="2" points=""></polyline>
</svg>-->
</div>
<div class="mui-tabs__pane" id="<%= data.baseID + '-a-pane' %>">
<!--<svg id="<%= data.baseID + 'ambient-svg' %>" width="300" height="150"
fill="blue">
<line x1="46" y1="12" x2="280" y2="12"
style="stroke:#004c6d;stroke-width:2;"></line>
<text id="<%= data.baseID + 'ambient-txt1' %>" x="36" y="15"
text-anchor="end">&#45;&#45;
</text>
<line x1="46" y1="136" x2="280" y2="136"
style="stroke:#004c6d;stroke-width:2;"></line>
<text id="undefined" x="36" y="139" text-anchor="end">0</text>
<polyline id="<%= data.baseID + 'ambient-line' %>" fill="none"
stroke="#2196F3" text-anchor="end" stroke-width="2"
points=""></polyline>
</svg>-->
<svg width='300' height='200' viewbox='0 0 300 220' background="#212121" id="<%= data.baseID + 'ambient-svg' %>">
<filter id="dropshadow" height="130%">
<feGaussianBlur in="SourceAlpha" stdDeviation="3"/> <!-- stdDeviation is how much to blur -->
<feOffset dx="2" dy="2" result="offsetblur"/> <!-- how much to offset -->
<feMerge>
<feMergeNode/> <!-- this contains the offset blurred image -->
<feMergeNode in="SourceGraphic"/> <!-- this contains the element that the filter is applied to -->
</feMerge>
</filter>
<!-- stroke-linecap="round" -->
<g transform="translate(-90,40) rotate(-120 180 90)" >
<path id="<%= data.baseID + 'ambient-arcB' %>" fill="none" stroke="rgb(61, 61, 61)" stroke-width="12" style="filter:url(#dropshadow)"/>
<path id="<%= data.baseID + 'ambient-arc' %>" fill="none" stroke="#00bfff" stroke-width="12" />
</g>
<g transform="translate(150,100)">
<text id="<%= data.baseID + 'ambient-label' %>" class='textLabel' x='0' y='100' fill='#bad649' font-size='50' style="filter:url(#dropshadow)">--ºc</text>
</g>
</svg>
</div>

45
app/partials/tsl.ejs Normal file
View File

@ -0,0 +1,45 @@
<div class="mui-row">
<div class="mui-col-xs-3 mui--text-accent mui--text-right">Temp:</div>
<div class="mui-col-xs-9 mui--text-light" id="<%= data.baseID + '-t' %>">--
</div>
</div>
<div class="mui-row">
<div class="mui-col-xs-3 mui--text-accent mui--text-right">TMax:</div>
<div class="mui-col-xs-3 mui--text-light"
id="<%= data.baseID + '-tmax' %>">--
</div>
<div class="mui-col-xs-3 mui--text-accent mui--text-right">TMin:</div>
<div class="mui-col-xs-3 mui--text-light"
id="<%= data.baseID + '-tmin' %>">--
</div>
</div>
<div class="mui-row">
<div class="mui-col-xs-3 mui--text-accent mui--text-right">Pressure:</div>
<div class="mui-col-xs-9 mui--text-light" id="<%= data.baseID + '-p' %>">--
</div>
</div>
<div class="mui-row">
<div class="mui-col-xs-3 mui--text-accent mui--text-right">PMax:</div>
<div class="mui-col-xs-3 mui--text-light"
id="<%= data.baseID + '-pmax' %>">--
</div>
<div class="mui-col-xs-3 mui--text-accent mui--text-right">PMin:</div>
<div class="mui-col-xs-3 mui--text-light"
id="<%= data.baseID + '-pmin' %>">--
</div>
<div class="mui-row">
<div class="mui-col-xs-3 mui--text-accent mui--text-right">Humidity:</div>
<div class="mui-col-xs-9 mui--text-light" id="<%= data.baseID + '-h' %>">--
</div>
</div>
<div class="mui-row">
<div class="mui-col-xs-3 mui--text-accent mui--text-right">HMax:</div>
<div class="mui-col-xs-3 mui--text-light"
id="<%= data.baseID + '-hmax' %>">--
</div>
<div class="mui-col-xs-3 mui--text-accent mui--text-right">HMin:</div>
<div class="mui-col-xs-3 mui--text-light"
id="<%= data.baseID + '-hmin' %>">--
</div>
</div>

View File

@ -1,2 +1,3 @@
Ubuntu:300,400,500,700
Ubuntu+Condensed

View File

@ -79,6 +79,14 @@ gulp.task('mui', function() {
.pipe(gulp.dest('www/css'));
});
gulp.task('customMUI', function() {
return gulp.src(['app/css/custom.scss'])
.pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
//.pipe(cssnano())
.pipe(rename('mui.custom.css'))
.pipe(gulp.dest('app/css'));
});
gulp.task('styles', function() {
return gulp.src(['app/css/app.css','app/css/progress.css'])
.pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
@ -149,3 +157,13 @@ gulp.task('watch',function() {
gulp.watch('app/**/*',['copy']);
});
gulp.task('MUIWatcher', function() {
'use strict';
gulp.start('customMUI','watchMUI');
});
gulp.task('watchMUI',function() {
gulp.watch('app/css/custom.scss',['customMUI']);
});

16
localserver.js Normal file
View File

@ -0,0 +1,16 @@
var express = require('express');
var path = require('path');
var app = express();
app.use(express.static(path.join(__dirname, 'www')));
/*
App.get('/', function (req, res) {
res.send('Hello World!');
});
*/
app.listen(3000, function() {
console.log('Example app listening on port 3000!');
});

View File

@ -34,5 +34,8 @@
"gulp-watch": "^4.3.6",
"jshint": "^2.9.2",
"scss": "^0.2.4"
},
"dependencies": {
"express": "^4.13.4"
}
}

View File

@ -1,8 +1,3 @@
body {
font-family: Ubuntu, "Helvetica Neue", Helvetica, arial, sans-serif;
}
#lightR, #projR { color: red !important; }
@ -17,7 +12,6 @@ body {
}
.h105 {
height: 100px;
}
@ -82,57 +76,6 @@ body {
/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
/* Styles */
.time, .date, .temp {
font-family: 'Ubuntu Condensed', sans-serif;
font-size: 33px;
/*color: #ff0000;*/
}
.time {
font-size: 50px;
line-height: 1;
}
.time span.hour:after {
content: "\a";
white-space: pre;
}
.temp {
font-size: 70px;
}
.temp::after {
content: "°";
}
.wd-we {
font-size: 75%;
}
.mo {
font-size: 85%;
}
.mo.mo-1, .mo.mo-10 {
font-size: 70%;
}
.mo.mo-2 {
font-size: 65%;
}
.mo.mo-8 {
font-size: 80%;
}
.mo.mo-9 {
font-size: 55%;
}
.mo.mo-11, .mo.mo-12 {
font-size: 60%;
}
}
@ -258,3 +201,13 @@ color:#78909C;
{
color:#2196F3;
}
/* svg classes */
svg text {
font-family:'Ubuntu Condensed',sans-serif;
font-size:12;
fill: #bad649;
text-align:right;
}

View File

@ -1,9 +1,14 @@
@import "app/libs/mui/src/sass/mui/colors";
$mui-body-bg-color: mui-color('grey', '100');
$mui-body-bg-color: /*#003F5a*/ mui-color('grey', '800');
$mui-base-font-color: rgba(#FFF, 0.87) !default;
$mui-base-font-family: Ubuntu, "Helvetica Neue", Helvetica, Arial, Verdana, Tahoma !default;
$mui-panel-bg-color : /*#004c6d*/ mui-color('grey', '900');
//$mui-accent-color: #bad649;
$mui-accent-color: #004c6d;
$mui-accent-color: #00aeef;
$mui-btn-accent-font-color: #004c6d;
//$mui-accent-color-dark: mui-color('green', 'A100');
$mui-accent-color-dark: #004c6d;

File diff suppressed because one or more lines are too long

View File

@ -92,6 +92,7 @@
<!-- build:vendor -->
<script type="text/javascript" src="libs/jquery/dist/jquery.js"></script>
<script type="text/javascript" src="libs/mui/packages/cdn/js/mui.js"></script>
<script type="text/javascript" src="libs/ejs/ejs.js"></script>
<script type="text/javascript"
src="libs/bluebird/js/browser/bluebird.js"></script>
<!-- endbuild -->
@ -118,6 +119,10 @@
src="js/device/CC2650/cc2650_humidity.js"></script>
<!-- endbuild -->
<script type="text/javascript"
src="js/device/fmc/TSL.js"></script>
<!-- build:js -->
<script type="text/javascript" src="js/index.js"></script>
<!-- endbuild -->

View File

@ -109,7 +109,7 @@ CC2650_ACCEL = function(p) {
this.data.mag.y = this.storeData(calcData.mag.y, this.data.mag.y);
this.data.mag.z = this.storeData(calcData.mag.z, this.data.mag.z);
// Console.log(JSON.stringify(this.data));
// console.log(JSON.stringify(this.data));
// Console.log(this.state);
};
@ -298,9 +298,9 @@ CC2650_ACCEL = function(p) {
var svg = this.generateBlankGraphBase(_subID,{width: '700',height: 150});
svg = this.graphAddLine(svg, xlineID, 'rgba(255,0,0,0.5)');
svg = this.graphAddLine(svg, ylineID, 'rgba(0,255,0,0.5)');
svg = this.graphAddLine(svg, zlineID, 'rgba(0,0,255,0.5)');
svg = this.graphAddLine(svg, xlineID, 'rgba(255,0,99,1)');
svg = this.graphAddLine(svg, ylineID, 'rgba(46,255,0,1)');
svg = this.graphAddLine(svg, zlineID, 'rgba(0,191,255,1)');
return svg;
@ -338,7 +338,7 @@ CC2650_ACCEL = function(p) {
elm.append($('<div />', { class: 'mui-col-xs-8 mui--text-title mui-ellipsis-2', text: title}));
elm.append($('<div />', {class: 'mui-col-xs-4 mui--text-right'}).append(button));
// elm.append($('<div />', {class: 'mui-col-xs-4 mui--text-right'}).append(button));
frame.append(elm);

View File

@ -87,10 +87,49 @@ var CC2650_TMP = function(p) {
};
this.animateGraph = function() {
this.simpleGraph(this.data.temp, 'temp');
this.simpleGraph(this.data.ambient, 'ambient');
// This.simpleGraph(this.data.temp, 'temp');
// debugger;
var arcTemp = this.frameID + 'temp-arc';
var arcAmbient = this.frameID + 'ambient-arc';
this.updateArc(this.data.temp, 'temp' , arcTemp);
this.updateArc(this.data.ambient, 'ambient' , arcAmbient);
//This.simpleGraph(this.data.ambient, 'ambient');
};
this.updateArc = function(data, subID, elmID) {
var ceilingLimit;
var _subID;
var _data;
var label;
_data = data || this.data;
_subID = subID || '';
if (_data.length > 0) {
ceilingLimit = 50;
var latest = _data[_data.length - 1];
var scale = 100 / ceilingLimit;
var arcP = scale * latest;
// Var xstep = (280 - 46) / 100;
label = this.frameID + subID + '-label';
document.getElementById(elmID).setAttribute('d', this.describeArc(150, 150, 100, 0, this.setArc(arcP)));
// document.getElementById(label).innerText(latest.toFixed(2) + 'ºc');
}
};
this.insertFrame = function() {
var liSetting;
@ -104,7 +143,28 @@ var CC2650_TMP = function(p) {
var temp = this.frameID + '-t';
var amb = this.frameID + '-a';
var row = $('<div />', {class: 'mui-row'});
var arcB = this.frameID + 'temp-arcB';
var arcTemp = this.frameID + 'temp-arc';
var ambientArcB = this.frameID + 'ambient-arcB';
var arcAmbient = this.frameID + 'ambient-arc';
var settings = {data: {baseID: this.frameID}};
var html = new EJS({url: './partials/cc2650_thermopile_dial.ejs'}).render(settings);
this.$id.append(html);
debugger;
document.getElementById(arcB).setAttribute('d', this.describeArc(150, 150, 100, 0, 240));
document.getElementById(arcTemp).setAttribute('d', this.describeArc(150, 150, 100, 0, this.setArc(0)));
document.getElementById(ambientArcB).setAttribute('d', this.describeArc(150, 150, 100, 0, 240));
document.getElementById(arcAmbient).setAttribute('d', this.describeArc(150, 150, 100, 0, this.setArc(0)));
/*Var row = $('<div />', {class: 'mui-row'});
$('<div />',
{class: 'mui-col-xs-3 mui--text-accent mui--text-right', text: 'Temp:'}).appendTo(row);
@ -152,7 +212,7 @@ var CC2650_TMP = function(p) {
this.$id.append($('<div>',{class: 'mui-tabs__pane',id: (amb + '-pane')}).append(blankChart));
}
*/
this.$result.temp = $('#' + temp);

View File

@ -242,6 +242,70 @@ CAPABILITY.prototype.animateGraph = function() {
};
CAPABILITY.prototype.polarToCartesian = function(centerX, centerY, radius, angleInDegrees) {
var angleInRadians = (angleInDegrees - 90) * Math.PI / 180.0;
return {
x: centerX + (radius * Math.cos(angleInRadians)),
y: centerY + (radius * Math.sin(angleInRadians))
};
};
CAPABILITY.prototype.describeArc = function(x, y, radius, startAngle, endAngle) {
var start = this.polarToCartesian(x, y, radius, endAngle);
var end = this.polarToCartesian(x, y, radius, startAngle);
var arcSweep = endAngle - startAngle <= 180 ? '0' : '1';
var d = [
'M', start.x, start.y,
'A', radius, radius, 0, arcSweep, 0, end.x, end.y
].join(' ');
return d;
};
CAPABILITY.prototype.setArc = function(percent) {
return (240 / 100) * percent;
};
CAPABILITY.prototype.updateArc = function(data, subID, elmID) {
var ceilingLimit;
var ceiling;
var _subID;
var _data;
_data = data || this.data;
_subID = subID || '';
if (_data.length > 0) {
ceiling = _data.reduce(function(p, v) {
return (Math.abs(p) > Math.abs(v) ? Math.abs(p) : Math.abs(v));
});
ceilingLimit = (Math.ceil((Math.round(ceiling) + 1) / 10) * 10);
if (ceilingLimit > 1000) {
ceilingLimit = (Math.ceil((Math.round(ceiling) + 1) / 50) * 50);
}
var latest = _data[_data.length-1];
var scale = 100 / ceilingLimit;
var arcP = scale * latest;
// Var xstep = (280 - 46) / 100;
document.getElementById(elmID).setAttribute('d', this.describeArc(150, 150, 100, 0, this.setArc(arcP)));
}
};
CAPABILITY.prototype.simpleGraph = function(data, subID) {
var ceilingLimit;
@ -272,8 +336,8 @@ CAPABILITY.prototype.simpleGraph = function(data, subID) {
var calcArray = [];
/*
var ceilingLimit = Math.floor(ceiling / 10) * 10;
/*
Var ceilingLimit = Math.floor(ceiling / 10) * 10;
if (ceilingLimit < ceiling) {
ceilingLimit = Math.floor((ceiling + (ceiling * 0.25)) / 10) * 10;
}