”2016-06-20”

This commit is contained in:
Martin Donnelly 2016-06-20 16:45:04 +01:00
parent 808a29d215
commit b5070a8b71
22 changed files with 436 additions and 274 deletions

View File

@ -370,17 +370,17 @@ CC2650_ACCEL = function(p) {
row = $('<div />', {class: 'mui-row'}); row = $('<div />', {class: 'mui-row'});
$('<div />', { $('<div />', {
class: 'mui-col-xs-4 mui--text-dark mui--text-center', class: 'mui-col-xs-4 mui--text-light mui--text-center',
text: '--', text: '--',
id: this.frames[modeID] + '-x' id: this.frames[modeID] + '-x'
}).appendTo(row); }).appendTo(row);
$('<div />', { $('<div />', {
class: 'mui-col-xs-4 mui--text-dark mui--text-center', class: 'mui-col-xs-4 mui--text-light mui--text-center',
text: '--', text: '--',
id: this.frames[modeID] + '-y' id: this.frames[modeID] + '-y'
}).appendTo(row); }).appendTo(row);
$('<div />', { $('<div />', {
class: 'mui-col-xs-4 mui--text-dark mui--text-center', class: 'mui-col-xs-4 mui--text-light mui--text-center',
text: '--', text: '--',
id: this.frames[modeID] + '-z' id: this.frames[modeID] + '-z'
}).appendTo(row); }).appendTo(row);

View File

@ -5,7 +5,7 @@
* Time: 10:13 * Time: 10:13
* *
*/ */
/* global CAPABILITY, inheritsFrom, capabilityManager, device */ /* global CAPABILITY, inheritsFrom, capabilityManager, EJS */
/* global ble */ /* global ble */
/* jshint browser: true , devel: true*/ /* jshint browser: true , devel: true*/
@ -84,15 +84,22 @@ var CC2650_BAR = function(p) {
}; };
this.animateGraph = function() { this.animateGraph = function() {
this.simpleGraph(this.data.temp, 'temp'); /* This.simpleGraph(this.data.temp, 'temp');
this.simpleGraph(this.data.pressure, 'pressure'); this.simpleGraph(this.data.pressure, 'pressure');*/
var arcTemp = this.frameID + 'temp-arc';
var arcPressure = this.frameID + 'pressure-arc';
this.updateArc(this.data.temp, 'temp' , arcTemp, '°C', 50);
this.updateArc(this.data.pressure, 'pressure' , arcPressure, 'hPa');
}; };
this.insertFrame = function() { this.insertFrame = function() {
var self = this; var self = this;
var blankChart;
// Call the parent displayForm first... // Call the parent displayForm first...
this.superClass_.insertFrame.call(self); this.superClass_.insertFrame.call(self);
@ -100,12 +107,25 @@ var CC2650_BAR = function(p) {
var temp = this.frameID + '-t'; var temp = this.frameID + '-t';
var pressure = this.frameID + '-p'; var pressure = this.frameID + '-p';
var arcB = this.frameID + 'temp-arcB';
var arcTemp = this.frameID + 'temp-arc';
var pressureArcB = this.frameID + 'pressure-arcB';
var arcPressure = this.frameID + 'pressure-arc';
var settings = {data: {baseID: this.frameID}}; var settings = {data: {baseID: this.frameID}};
var html = new EJS({url: './partials/cc2650_barometer.ejs'}).render(settings); var html = new EJS({url: './partials/cc2650_barometer_dial.ejs'}).render(settings);
this.$id.append(html); this.$id.append(html);
/* var row = $('<div />', {class: 'mui-row'}); 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(pressureArcB).setAttribute('d', this.describeArc(150, 150, 100, 0, 240));
document.getElementById(arcPressure).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); $('<div />', { class: 'mui-col-xs-3 mui--text-accent mui--text-right', text: 'Temp:'}).appendTo(row);

View File

@ -5,7 +5,7 @@
* Time: 10:13 * Time: 10:13
* *
*/ */
/* global CAPABILITY, inheritsFrom, capabilityManager, device */ /* global CAPABILITY, inheritsFrom, capabilityManager, EJS */
/* global ble */ /* global ble */
/* jshint browser: true , devel: true*/ /* jshint browser: true , devel: true*/
@ -102,13 +102,20 @@ var CC2650_HUM = function(p) {
var temp = this.frameID + '-t'; var temp = this.frameID + '-t';
var humidity = this.frameID + '-h'; var humidity = this.frameID + '-h';
var settings = {data: {baseID: this.frameID}};
var html = new EJS({url: './partials/cc2650_humidity.ejs'}).render(settings);
this.$id.append(html);
/*
var row = $('<div />', {class: 'mui-row'}); var row = $('<div />', {class: 'mui-row'});
$('<div />', $('<div />',
{class: 'mui-col-xs-3 mui--text-accent mui--text-right', text: 'Temp:'}).appendTo(row); {class: 'mui-col-xs-3 mui--text-accent mui--text-right', text: 'Temp:'}).appendTo(row);
$('<div />', $('<div />',
{class: 'mui-col-xs-3 mui--text-dark', id: temp}).appendTo(row); {class: 'mui-col-xs-3 mui--text-light', id: temp}).appendTo(row);
$('<div />', $('<div />',
{ {
class: 'mui-col-xs-3 mui--text-accent mui--text-right', class: 'mui-col-xs-3 mui--text-accent mui--text-right',
@ -116,7 +123,7 @@ var CC2650_HUM = function(p) {
}).appendTo(row); }).appendTo(row);
$('<div />', $('<div />',
{class: 'mui-col-xs-3 mui--text-dark', id: humidity}).appendTo(row); {class: 'mui-col-xs-3 mui--text-light', id: humidity}).appendTo(row);
this.$id.append(row); this.$id.append(row);
@ -157,7 +164,7 @@ var CC2650_HUM = function(p) {
class: 'mui-tabs__pane', class: 'mui-tabs__pane',
id: (humidity + '-pane') id: (humidity + '-pane')
}).append(blankChart)); }).append(blankChart));
} }*/
this.$result.temp = $('#' + temp); this.$result.temp = $('#' + temp);
this.$result.humidity = $('#' + humidity); this.$result.humidity = $('#' + humidity);

View File

@ -95,7 +95,7 @@ var CC2650_LUX = function(p) {
row); row);
$('<div />', $('<div />',
{class: 'mui-col-xs-8 mui--text-dark', id: lux}).appendTo(row); {class: 'mui-col-xs-8 mui--text-light', id: lux}).appendTo(row);
this.$id.append(row); this.$id.append(row);

View File

@ -5,7 +5,7 @@
* Time: 10:13 * Time: 10:13
* *
*/ */
/* global CAPABILITY, inheritsFrom, capabilityManager */ /* global CAPABILITY, inheritsFrom, capabilityManager, EJS */
/* global ble */ /* global ble */
/* jshint browser: true , devel: true*/ /* jshint browser: true , devel: true*/
@ -91,50 +91,13 @@ var CC2650_TMP = function(p) {
// debugger; // debugger;
var arcTemp = this.frameID + 'temp-arc'; var arcTemp = this.frameID + 'temp-arc';
var arcAmbient = this.frameID + 'ambient-arc'; var arcAmbient = this.frameID + 'ambient-arc';
this.updateArc(this.data.temp, 'temp' , arcTemp); this.updateArc(this.data.temp, 'temp' , arcTemp, '°C', 50);
this.updateArc(this.data.ambient, 'ambient' , arcAmbient, '°C', 50);
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() { this.insertFrame = function() {
var liSetting;
var tabBody;
var blankChart;
var self = this; var self = this;
// Console.log('Overloading...'); // Console.log('Overloading...');
// Call the parent displayForm first... // Call the parent displayForm first...
@ -156,7 +119,6 @@ var CC2650_TMP = function(p) {
this.$id.append(html); this.$id.append(html);
debugger;
document.getElementById(arcB).setAttribute('d', this.describeArc(150, 150, 100, 0, 240)); 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(arcTemp).setAttribute('d', this.describeArc(150, 150, 100, 0, this.setArc(0)));
@ -170,7 +132,7 @@ debugger;
{class: 'mui-col-xs-3 mui--text-accent mui--text-right', text: 'Temp:'}).appendTo(row); {class: 'mui-col-xs-3 mui--text-accent mui--text-right', text: 'Temp:'}).appendTo(row);
$('<div />', $('<div />',
{class: 'mui-col-xs-3 mui--text-dark mui--text-left', id: temp}).appendTo(row); {class: 'mui-col-xs-3 mui--text-light mui--text-left', id: temp}).appendTo(row);
$('<div />', $('<div />',
{ {
class: 'mui-col-xs-3 mui--text-accent mui--text-right', class: 'mui-col-xs-3 mui--text-accent mui--text-right',
@ -178,7 +140,7 @@ debugger;
}).appendTo(row); }).appendTo(row);
$('<div />', $('<div />',
{class: 'mui-col-xs-3 mui--text-dark', id: amb}).appendTo(row); {class: 'mui-col-xs-3 mui--text-light', id: amb}).appendTo(row);
this.$id.append(row); this.$id.append(row);

View File

@ -271,20 +271,25 @@ CAPABILITY.prototype.setArc = function(percent) {
return (240 / 100) * percent; return (240 / 100) * percent;
}; };
CAPABILITY.prototype.updateArc = function(data, subID, elmID) { CAPABILITY.prototype.updateArc = function(data, subID, elmID, suffix, limiter) {
var ceilingLimit; var ceilingLimit;
var ceiling; var ceiling;
var _subID; var _subID;
var _data; var _data;
var _limiter = limiter || null;
var _suffix = suffix || '';
var label;
_data = data || this.data; _data = data || this.data;
_subID = subID || ''; _subID = subID || '';
label = '#' + this.frameID + _subID + '-label';
if (_data.length > 0) { if (_data.length > 0) {
if (_limiter === null) {
ceiling = _data.reduce(function(p, v) { ceiling = _data.reduce(function(p, v) {
return (Math.abs(p) > Math.abs(v) ? Math.abs(p) : Math.abs(v)); return (Math.abs(p) > Math.abs(v) ? Math.abs(p) : Math.abs(v));
}); });
@ -294,12 +299,16 @@ CAPABILITY.prototype.updateArc = function(data, subID, elmID) {
ceilingLimit = (Math.ceil((Math.round(ceiling) + 1) / 50) * 50); ceilingLimit = (Math.ceil((Math.round(ceiling) + 1) / 50) * 50);
} }
} else {
ceilingLimit = _limiter;
}
var latest = _data[_data.length - 1]; var latest = _data[_data.length - 1];
var scale = 100 / ceilingLimit; var scale = 100 / ceilingLimit;
var arcP = scale * latest; var arcP = scale * latest;
// Var xstep = (280 - 46) / 100;
document.getElementById(elmID).setAttribute('d', this.describeArc(150, 150, 100, 0, this.setArc(arcP))); document.getElementById(elmID).setAttribute('d', this.describeArc(150, 150, 100, 0, this.setArc(arcP)));
$(label).text(latest.toFixed(2) + _suffix);
} }

View File

@ -0,0 +1,68 @@
<%= 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 width='300' height='200' viewbox='0 0 300 220' background="#212121" id="<%= data.baseID + 'temp-svg' %>">
<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" />
<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' >--º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 + '-p-pane' %>">
<svg width='300' height='200' viewbox='0 0 300 220' background="#212121" id="<%= data.baseID + 'pressure-svg' %>">
<g transform="translate(-90,40) rotate(-120 180 90)" >
<path id="<%= data.baseID + 'pressure-arcB' %>" fill="none" stroke="rgb(61, 61, 61)" stroke-width="12" style=""/>
<path id="<%= data.baseID + 'pressure-arc' %>" fill="none" stroke="#00bfff" stroke-width="12" />
</g>
<g transform="translate(150,100)">
<text id="<%= data.baseID + 'pressure-label' %>" class='textLabel' x='0' y='100' fill='#bad649' font-size='50'>--</text>
</g>
</svg>
<!--<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">&#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 + 'pressure-line' %>" fill="none" stroke="#2196F3"
text-anchor="end" stroke-width="2"
points=""></polyline>
</svg>-->
</div>

View File

@ -0,0 +1,41 @@
<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">Humidity:</div>
<div class="mui-col-xs-3 mui--text-light" id="<%= data.baseID + '-h' %>">--</div>
</div>
<ul class="mui-tabs__bar mui-tabs__bar--justified">
<li class="tabOnWhite"><a data-mui-toggle="tab"
data-mui-controls="<%= data.baseID + '-t-pane' %>">Temperature</a>
</li>
<li class="tabOnWhite mui--is-active"><a data-mui-toggle="tab"
data-mui-controls="<%= data.baseID + '-h-pane' %>">Humidity</a>
</li>
</ul>
<div class="mui-tabs__pane" 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 mui--is-active" id="<%= data.baseID + '-h-pane' %>">
<svg id="<%= data.baseID + 'humidity-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 + 'humidity-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 + 'humidity-line' %>" fill="none" stroke="#2196F3"
text-anchor="end" stroke-width="2"
points=""></polyline>
</svg>
</div>

View File

@ -28,45 +28,16 @@
</filter> </filter>
<g transform="translate(-90,40) rotate(-120 180 90)" > <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-arcB' %>" fill="none" stroke="rgb(61, 61, 61)" stroke-width="12" />
<path id="<%= data.baseID + 'temp-arc' %>" fill="none" stroke="#00bfff" stroke-width="12" /> <path id="<%= data.baseID + 'temp-arc' %>" fill="none" stroke="#00bfff" stroke-width="12" />
</g> </g>
<g transform="translate(150,100)"> <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> <text id="<%= data.baseID + 'temp-label' %>" class='textLabel' x='0' y='100' fill='#bad649' font-size='50' >--ºc</text>
</g> </g>
</svg> </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>
<div class="mui-tabs__pane" id="<%= data.baseID + '-a-pane' %>"> <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' %>"> <svg width='300' height='200' viewbox='0 0 300 220' background="#212121" id="<%= data.baseID + 'ambient-svg' %>">
<filter id="dropshadow" height="130%"> <filter id="dropshadow" height="130%">
@ -80,11 +51,11 @@
<!-- stroke-linecap="round" --> <!-- stroke-linecap="round" -->
<g transform="translate(-90,40) rotate(-120 180 90)" > <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-arcB' %>" fill="none" stroke="rgb(61, 61, 61)" stroke-width="12" />
<path id="<%= data.baseID + 'ambient-arc' %>" fill="none" stroke="#00bfff" stroke-width="12" /> <path id="<%= data.baseID + 'ambient-arc' %>" fill="none" stroke="#00bfff" stroke-width="12" />
</g> </g>
<g transform="translate(150,100)"> <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> <text id="<%= data.baseID + 'ambient-label' %>" class='textLabel' x='0' y='100' fill='#bad649' font-size='50' >--ºc</text>
</g> </g>
</svg> </svg>

View File

@ -370,17 +370,17 @@ CC2650_ACCEL = function(p) {
row = $('<div />', {class: 'mui-row'}); row = $('<div />', {class: 'mui-row'});
$('<div />', { $('<div />', {
class: 'mui-col-xs-4 mui--text-dark mui--text-center', class: 'mui-col-xs-4 mui--text-light mui--text-center',
text: '--', text: '--',
id: this.frames[modeID] + '-x' id: this.frames[modeID] + '-x'
}).appendTo(row); }).appendTo(row);
$('<div />', { $('<div />', {
class: 'mui-col-xs-4 mui--text-dark mui--text-center', class: 'mui-col-xs-4 mui--text-light mui--text-center',
text: '--', text: '--',
id: this.frames[modeID] + '-y' id: this.frames[modeID] + '-y'
}).appendTo(row); }).appendTo(row);
$('<div />', { $('<div />', {
class: 'mui-col-xs-4 mui--text-dark mui--text-center', class: 'mui-col-xs-4 mui--text-light mui--text-center',
text: '--', text: '--',
id: this.frames[modeID] + '-z' id: this.frames[modeID] + '-z'
}).appendTo(row); }).appendTo(row);

View File

@ -5,7 +5,7 @@
* Time: 10:13 * Time: 10:13
* *
*/ */
/* global CAPABILITY, inheritsFrom, capabilityManager, device */ /* global CAPABILITY, inheritsFrom, capabilityManager, EJS */
/* global ble */ /* global ble */
/* jshint browser: true , devel: true*/ /* jshint browser: true , devel: true*/
@ -84,22 +84,48 @@ var CC2650_BAR = function(p) {
}; };
this.animateGraph = function() { this.animateGraph = function() {
this.simpleGraph(this.data.temp, 'temp'); /* This.simpleGraph(this.data.temp, 'temp');
this.simpleGraph(this.data.pressure, 'pressure'); this.simpleGraph(this.data.pressure, 'pressure');*/
var arcTemp = this.frameID + 'temp-arc';
var arcPressure = this.frameID + 'pressure-arc';
this.updateArc(this.data.temp, 'temp' , arcTemp, '°C', 50);
this.updateArc(this.data.pressure, 'pressure' , arcPressure, 'hPa');
}; };
this.insertFrame = function() { this.insertFrame = function() {
var self = this; var self = this;
var blankChart;
// Call the parent displayForm first... // Call the parent displayForm first...
this.superClass_.insertFrame.call(self); this.superClass_.insertFrame.call(self);
var temp = this.frameID + '-t'; var temp = this.frameID + '-t';
var pressure = this.frameID + '-p'; var pressure = this.frameID + '-p';
var row = $('<div />', {class: 'mui-row'});
var arcB = this.frameID + 'temp-arcB';
var arcTemp = this.frameID + 'temp-arc';
var pressureArcB = this.frameID + 'pressure-arcB';
var arcPressure = this.frameID + 'pressure-arc';
var settings = {data: {baseID: this.frameID}};
var html = new EJS({url: './partials/cc2650_barometer_dial.ejs'}).render(settings);
this.$id.append(html);
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(pressureArcB).setAttribute('d', this.describeArc(150, 150, 100, 0, 240));
document.getElementById(arcPressure).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); $('<div />', { class: 'mui-col-xs-3 mui--text-accent mui--text-right', text: 'Temp:'}).appendTo(row);
@ -150,7 +176,7 @@ var CC2650_BAR = function(p) {
class: 'mui-tabs__pane', class: 'mui-tabs__pane',
id: (pressure + '-pane') id: (pressure + '-pane')
}).append(blankChart)); }).append(blankChart));
} }*/
this.$result.temp = $('#' + temp); this.$result.temp = $('#' + temp);
this.$result.pressure = $('#' + pressure); this.$result.pressure = $('#' + pressure);

View File

@ -5,7 +5,7 @@
* Time: 10:13 * Time: 10:13
* *
*/ */
/* global CAPABILITY, inheritsFrom, capabilityManager, device */ /* global CAPABILITY, inheritsFrom, capabilityManager, EJS */
/* global ble */ /* global ble */
/* jshint browser: true , devel: true*/ /* jshint browser: true , devel: true*/
@ -102,13 +102,20 @@ var CC2650_HUM = function(p) {
var temp = this.frameID + '-t'; var temp = this.frameID + '-t';
var humidity = this.frameID + '-h'; var humidity = this.frameID + '-h';
var settings = {data: {baseID: this.frameID}};
var html = new EJS({url: './partials/cc2650_humidity.ejs'}).render(settings);
this.$id.append(html);
/*
var row = $('<div />', {class: 'mui-row'}); var row = $('<div />', {class: 'mui-row'});
$('<div />', $('<div />',
{class: 'mui-col-xs-3 mui--text-accent mui--text-right', text: 'Temp:'}).appendTo(row); {class: 'mui-col-xs-3 mui--text-accent mui--text-right', text: 'Temp:'}).appendTo(row);
$('<div />', $('<div />',
{class: 'mui-col-xs-3 mui--text-dark', id: temp}).appendTo(row); {class: 'mui-col-xs-3 mui--text-light', id: temp}).appendTo(row);
$('<div />', $('<div />',
{ {
class: 'mui-col-xs-3 mui--text-accent mui--text-right', class: 'mui-col-xs-3 mui--text-accent mui--text-right',
@ -116,7 +123,7 @@ var CC2650_HUM = function(p) {
}).appendTo(row); }).appendTo(row);
$('<div />', $('<div />',
{class: 'mui-col-xs-3 mui--text-dark', id: humidity}).appendTo(row); {class: 'mui-col-xs-3 mui--text-light', id: humidity}).appendTo(row);
this.$id.append(row); this.$id.append(row);
@ -157,7 +164,7 @@ var CC2650_HUM = function(p) {
class: 'mui-tabs__pane', class: 'mui-tabs__pane',
id: (humidity + '-pane') id: (humidity + '-pane')
}).append(blankChart)); }).append(blankChart));
} }*/
this.$result.temp = $('#' + temp); this.$result.temp = $('#' + temp);
this.$result.humidity = $('#' + humidity); this.$result.humidity = $('#' + humidity);

View File

@ -95,7 +95,7 @@ var CC2650_LUX = function(p) {
row); row);
$('<div />', $('<div />',
{class: 'mui-col-xs-8 mui--text-dark', id: lux}).appendTo(row); {class: 'mui-col-xs-8 mui--text-light', id: lux}).appendTo(row);
this.$id.append(row); this.$id.append(row);

View File

@ -5,7 +5,7 @@
* Time: 10:13 * Time: 10:13
* *
*/ */
/* global CAPABILITY, inheritsFrom, capabilityManager */ /* global CAPABILITY, inheritsFrom, capabilityManager, EJS */
/* global ble */ /* global ble */
/* jshint browser: true , devel: true*/ /* jshint browser: true , devel: true*/
@ -91,50 +91,13 @@ var CC2650_TMP = function(p) {
// debugger; // debugger;
var arcTemp = this.frameID + 'temp-arc'; var arcTemp = this.frameID + 'temp-arc';
var arcAmbient = this.frameID + 'ambient-arc'; var arcAmbient = this.frameID + 'ambient-arc';
this.updateArc(this.data.temp, 'temp' , arcTemp); this.updateArc(this.data.temp, 'temp' , arcTemp, '°C', 50);
this.updateArc(this.data.ambient, 'ambient' , arcAmbient, '°C', 50);
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() { this.insertFrame = function() {
var liSetting;
var tabBody;
var blankChart;
var self = this; var self = this;
// Console.log('Overloading...'); // Console.log('Overloading...');
// Call the parent displayForm first... // Call the parent displayForm first...
@ -156,7 +119,6 @@ var CC2650_TMP = function(p) {
this.$id.append(html); this.$id.append(html);
debugger;
document.getElementById(arcB).setAttribute('d', this.describeArc(150, 150, 100, 0, 240)); 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(arcTemp).setAttribute('d', this.describeArc(150, 150, 100, 0, this.setArc(0)));
@ -170,7 +132,7 @@ debugger;
{class: 'mui-col-xs-3 mui--text-accent mui--text-right', text: 'Temp:'}).appendTo(row); {class: 'mui-col-xs-3 mui--text-accent mui--text-right', text: 'Temp:'}).appendTo(row);
$('<div />', $('<div />',
{class: 'mui-col-xs-3 mui--text-dark mui--text-left', id: temp}).appendTo(row); {class: 'mui-col-xs-3 mui--text-light mui--text-left', id: temp}).appendTo(row);
$('<div />', $('<div />',
{ {
class: 'mui-col-xs-3 mui--text-accent mui--text-right', class: 'mui-col-xs-3 mui--text-accent mui--text-right',
@ -178,7 +140,7 @@ debugger;
}).appendTo(row); }).appendTo(row);
$('<div />', $('<div />',
{class: 'mui-col-xs-3 mui--text-dark', id: amb}).appendTo(row); {class: 'mui-col-xs-3 mui--text-light', id: amb}).appendTo(row);
this.$id.append(row); this.$id.append(row);

View File

@ -271,20 +271,25 @@ CAPABILITY.prototype.setArc = function(percent) {
return (240 / 100) * percent; return (240 / 100) * percent;
}; };
CAPABILITY.prototype.updateArc = function(data, subID, elmID) { CAPABILITY.prototype.updateArc = function(data, subID, elmID, suffix, limiter) {
var ceilingLimit; var ceilingLimit;
var ceiling; var ceiling;
var _subID; var _subID;
var _data; var _data;
var _limiter = limiter || null;
var _suffix = suffix || '';
var label;
_data = data || this.data; _data = data || this.data;
_subID = subID || ''; _subID = subID || '';
label = '#' + this.frameID + _subID + '-label';
if (_data.length > 0) { if (_data.length > 0) {
if (_limiter === null) {
ceiling = _data.reduce(function(p, v) { ceiling = _data.reduce(function(p, v) {
return (Math.abs(p) > Math.abs(v) ? Math.abs(p) : Math.abs(v)); return (Math.abs(p) > Math.abs(v) ? Math.abs(p) : Math.abs(v));
}); });
@ -294,12 +299,16 @@ CAPABILITY.prototype.updateArc = function(data, subID, elmID) {
ceilingLimit = (Math.ceil((Math.round(ceiling) + 1) / 50) * 50); ceilingLimit = (Math.ceil((Math.round(ceiling) + 1) / 50) * 50);
} }
} else {
ceilingLimit = _limiter;
}
var latest = _data[_data.length - 1]; var latest = _data[_data.length - 1];
var scale = 100 / ceilingLimit; var scale = 100 / ceilingLimit;
var arcP = scale * latest; var arcP = scale * latest;
// Var xstep = (280 - 46) / 100;
document.getElementById(elmID).setAttribute('d', this.describeArc(150, 150, 100, 0, this.setArc(arcP))); document.getElementById(elmID).setAttribute('d', this.describeArc(150, 150, 100, 0, this.setArc(arcP)));
$(label).text(latest.toFixed(2) + _suffix);
} }

View File

@ -0,0 +1,68 @@
<%= 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 width='300' height='200' viewbox='0 0 300 220' background="#212121" id="<%= data.baseID + 'temp-svg' %>">
<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" />
<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' >--º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 + '-p-pane' %>">
<svg width='300' height='200' viewbox='0 0 300 220' background="#212121" id="<%= data.baseID + 'pressure-svg' %>">
<g transform="translate(-90,40) rotate(-120 180 90)" >
<path id="<%= data.baseID + 'pressure-arcB' %>" fill="none" stroke="rgb(61, 61, 61)" stroke-width="12" style=""/>
<path id="<%= data.baseID + 'pressure-arc' %>" fill="none" stroke="#00bfff" stroke-width="12" />
</g>
<g transform="translate(150,100)">
<text id="<%= data.baseID + 'pressure-label' %>" class='textLabel' x='0' y='100' fill='#bad649' font-size='50'>--</text>
</g>
</svg>
<!--<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">&#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 + 'pressure-line' %>" fill="none" stroke="#2196F3"
text-anchor="end" stroke-width="2"
points=""></polyline>
</svg>-->
</div>

View File

@ -0,0 +1,41 @@
<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">Humidity:</div>
<div class="mui-col-xs-3 mui--text-light" id="<%= data.baseID + '-h' %>">--</div>
</div>
<ul class="mui-tabs__bar mui-tabs__bar--justified">
<li class="tabOnWhite"><a data-mui-toggle="tab"
data-mui-controls="<%= data.baseID + '-t-pane' %>">Temperature</a>
</li>
<li class="tabOnWhite mui--is-active"><a data-mui-toggle="tab"
data-mui-controls="<%= data.baseID + '-h-pane' %>">Humidity</a>
</li>
</ul>
<div class="mui-tabs__pane" 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 mui--is-active" id="<%= data.baseID + '-h-pane' %>">
<svg id="<%= data.baseID + 'humidity-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 + 'humidity-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 + 'humidity-line' %>" fill="none" stroke="#2196F3"
text-anchor="end" stroke-width="2"
points=""></polyline>
</svg>
</div>

View File

@ -28,45 +28,16 @@
</filter> </filter>
<g transform="translate(-90,40) rotate(-120 180 90)" > <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-arcB' %>" fill="none" stroke="rgb(61, 61, 61)" stroke-width="12" />
<path id="<%= data.baseID + 'temp-arc' %>" fill="none" stroke="#00bfff" stroke-width="12" /> <path id="<%= data.baseID + 'temp-arc' %>" fill="none" stroke="#00bfff" stroke-width="12" />
</g> </g>
<g transform="translate(150,100)"> <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> <text id="<%= data.baseID + 'temp-label' %>" class='textLabel' x='0' y='100' fill='#bad649' font-size='50' >--ºc</text>
</g> </g>
</svg> </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>
<div class="mui-tabs__pane" id="<%= data.baseID + '-a-pane' %>"> <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' %>"> <svg width='300' height='200' viewbox='0 0 300 220' background="#212121" id="<%= data.baseID + 'ambient-svg' %>">
<filter id="dropshadow" height="130%"> <filter id="dropshadow" height="130%">
@ -80,11 +51,11 @@
<!-- stroke-linecap="round" --> <!-- stroke-linecap="round" -->
<g transform="translate(-90,40) rotate(-120 180 90)" > <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-arcB' %>" fill="none" stroke="rgb(61, 61, 61)" stroke-width="12" />
<path id="<%= data.baseID + 'ambient-arc' %>" fill="none" stroke="#00bfff" stroke-width="12" /> <path id="<%= data.baseID + 'ambient-arc' %>" fill="none" stroke="#00bfff" stroke-width="12" />
</g> </g>
<g transform="translate(150,100)"> <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> <text id="<%= data.baseID + 'ambient-label' %>" class='textLabel' x='0' y='100' fill='#bad649' font-size='50' >--ºc</text>
</g> </g>
</svg> </svg>