”2016-06-17”

This commit is contained in:
Martin Donnelly 2016-06-17 16:45:14 +01:00
parent 2ed7db58ef
commit 808a29d215
15 changed files with 348 additions and 34 deletions

View File

@ -208,6 +208,6 @@ color:#78909C;
svg text {
font-family:'Ubuntu Condensed',sans-serif;
font-size:12;
fill: #004c6d;
fill: #bad649;
text-align:right;
}

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);
};

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;
@ -105,13 +144,27 @@ var CC2650_TMP = function(p) {
var temp = this.frameID + '-t';
var amb = this.frameID + '-a';
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.ejs'}).render(settings);
var html = new EJS({url: './partials/cc2650_thermopile_dial.ejs'}).render(settings);
this.$id.append(html);
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'});
/*Var row = $('<div />', {class: 'mui-row'});
$('<div />',
{class: 'mui-col-xs-3 mui--text-accent mui--text-right', text: 'Temp:'}).appendTo(row);

View File

@ -271,6 +271,41 @@ 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;

View File

@ -17,7 +17,7 @@
</ul>
<div class="mui-tabs__pane mui--is-active" id="<%= data.baseID + '-t-pane' %>">
<svg width='300' height='150' viewbox='0 0' background="#212121" id="<%= data.baseID + 'temp-svg' %>">
<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 -->
@ -28,11 +28,11 @@
</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" stroke-linecap="round" style="filter:url(#dropshadow)"/>
<path id="<%= data.baseID + 'temp-arc' %>" fill="none" stroke="#00bfff" stroke-width="12" stroke-linecap="round" />
<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 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' style="filter:url(#dropshadow)">--ºc</text>
</g>
</svg>
@ -52,12 +52,12 @@
</svg>-->
</div>
<div class="mui-tabs__pane" id="<%= data.baseID + '-a-pane' %>">
<svg id="<%= data.baseID + 'ambient-svg' %>" width="300" height="150"
<!--<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-anchor="end">&#45;&#45;
</text>
<line x1="46" y1="136" x2="280" y2="136"
style="stroke:#004c6d;stroke-width:2;"></line>
@ -65,5 +65,28 @@
<polyline id="<%= data.baseID + 'ambient-line' %>" fill="none"
stroke="#2196F3" text-anchor="end" stroke-width="2"
points=""></polyline>
</svg>
</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>

View File

@ -208,6 +208,6 @@ color:#78909C;
svg text {
font-family:'Ubuntu Condensed',sans-serif;
font-size:12;
fill: #004c6d;
fill: #bad649;
text-align:right;
}

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

@ -99,13 +99,7 @@ var CC2650_BAR = function(p) {
var temp = this.frameID + '-t';
var pressure = this.frameID + '-p';
var settings = {data: {baseID: this.frameID}};
var html = new EJS({url: './partials/cc2650_barometer.ejs'}).render(settings);
this.$id.append(html);
/* var row = $('<div />', {class: 'mui-row'});
var row = $('<div />', {class: 'mui-row'});
$('<div />', { class: 'mui-col-xs-3 mui--text-accent mui--text-right', text: 'Temp:'}).appendTo(row);
@ -156,7 +150,7 @@ var CC2650_BAR = function(p) {
class: 'mui-tabs__pane',
id: (pressure + '-pane')
}).append(blankChart));
}*/
}
this.$result.temp = $('#' + temp);
this.$result.pressure = $('#' + pressure);

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;
@ -105,13 +144,27 @@ var CC2650_TMP = function(p) {
var temp = this.frameID + '-t';
var amb = this.frameID + '-a';
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.ejs'}).render(settings);
var html = new EJS({url: './partials/cc2650_thermopile_dial.ejs'}).render(settings);
this.$id.append(html);
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'});
/*Var row = $('<div />', {class: 'mui-row'});
$('<div />',
{class: 'mui-col-xs-3 mui--text-accent mui--text-right', text: 'Temp:'}).appendTo(row);

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,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>