Waves are height controlled and fft wave is larger
This commit is contained in:
parent
edd17c1dbe
commit
22724e22dc
@ -115,7 +115,7 @@ CC2650_ACCEL = function(p) {
|
||||
|
||||
this.startService = function() {
|
||||
|
||||
this.maxLength = 255;
|
||||
this.maxLength = 500;
|
||||
if (this.deviceID !== null) {
|
||||
|
||||
console.log('Starting CC2650 Accelerometer Service on ', this.deviceID);
|
||||
@ -170,6 +170,10 @@ CC2650_ACCEL = function(p) {
|
||||
var text1ID;
|
||||
var lineID;
|
||||
var max;
|
||||
var yscale = 125;
|
||||
var height = 125;
|
||||
|
||||
var yOffset = 71;
|
||||
|
||||
var reducer = function(p, v) {
|
||||
return (Math.abs(p) > Math.abs(v) ? Math.abs(p) : Math.abs(v));
|
||||
@ -179,6 +183,13 @@ CC2650_ACCEL = function(p) {
|
||||
var parts = ['x', 'y', 'z'];
|
||||
var _newData = {x: [],y: [],z: []};
|
||||
|
||||
if (subID === 'gyro') {
|
||||
height = 300;
|
||||
yscale = 300;
|
||||
}
|
||||
|
||||
|
||||
|
||||
_data = data || this.data;
|
||||
|
||||
_subID = subID || '';
|
||||
@ -214,20 +225,26 @@ CC2650_ACCEL = function(p) {
|
||||
}
|
||||
|
||||
if (ceiling > 500) {
|
||||
max = (ceiling > max) ? (Math.ceil((Math.round(ceiling) + 1) / 50) * 50) : max;
|
||||
} else {
|
||||
max = (ceiling > max) ? (Math.ceil((Math.round(ceiling) + 1) / 10) * 10) : max;
|
||||
}
|
||||
max = (ceiling > max) ? (Math.ceil((Math.round(ceiling) + 1) / 50) * 50) : max;
|
||||
} else {
|
||||
max = (ceiling > max) ? (Math.ceil((Math.round(ceiling) + 1) / 10) * 10) : max;
|
||||
}
|
||||
ceiling = max;
|
||||
|
||||
floor = ceiling * -1;
|
||||
ceilingLimit = ceiling;
|
||||
console.log('ceiling:',ceiling);
|
||||
|
||||
scalePos = (124 / 2) / ceiling;
|
||||
|
||||
|
||||
scalePos = (yscale / 2) / ceiling;
|
||||
|
||||
xstep = (680 - 46) / this.maxLength;
|
||||
|
||||
yOffset = ((height - (14 + 12)) / 2) + 12;
|
||||
|
||||
|
||||
|
||||
//Var xstep = 2.34;
|
||||
|
||||
for (lineMode = 0; lineMode < parts.length; lineMode++) {
|
||||
@ -240,7 +257,7 @@ CC2650_ACCEL = function(p) {
|
||||
lineID = this.frameID + _subID + '-' + lm + '-line';
|
||||
for (var x = 0; x < _newData[lm].length; x++) {
|
||||
|
||||
calcArray.push((startX + (x * xstep)).toFixed(2) + ',' + (71 - ((_newData[lm][x]) * scalePos)).toFixed(
|
||||
calcArray.push((startX + (x * xstep)).toFixed(2) + ',' + (yOffset - ((_newData[lm][x]) * scalePos)).toFixed(
|
||||
2));
|
||||
|
||||
}
|
||||
@ -279,6 +296,10 @@ CC2650_ACCEL = function(p) {
|
||||
var text1ID;
|
||||
var lineID;
|
||||
var max;
|
||||
var yscale = 125;
|
||||
var height = 125;
|
||||
|
||||
var yOffset = 71;
|
||||
|
||||
var reducer = function(p, v) {
|
||||
return (Math.abs(p) > Math.abs(v) ? Math.abs(p) : Math.abs(v));
|
||||
@ -295,6 +316,12 @@ CC2650_ACCEL = function(p) {
|
||||
text1ID = [this.frameID, _subID, '-txt1'].join('');
|
||||
text2ID = [this.frameID, _subID, '-txt2'].join('');
|
||||
|
||||
if (mode === 'gyro') {
|
||||
height = 300;
|
||||
yscale = 300;
|
||||
}
|
||||
|
||||
|
||||
if (_data.x.length > 0) {
|
||||
|
||||
max = 2;
|
||||
@ -319,10 +346,11 @@ CC2650_ACCEL = function(p) {
|
||||
floor = ceiling * -1;
|
||||
ceilingLimit = ceiling;
|
||||
|
||||
scalePos = (124 / 2) / ceiling;
|
||||
scalePos = (yscale / 2) / ceiling;
|
||||
|
||||
xstep = (680 - 46) / this.maxLength;
|
||||
|
||||
yOffset = ((height - (14 + 12)) / 2) + 12;
|
||||
//Var xstep = 2.34;
|
||||
|
||||
for (lineMode = 0; lineMode < parts.length; lineMode++) {
|
||||
@ -382,6 +410,8 @@ CC2650_ACCEL = function(p) {
|
||||
var _height = settings.height || 150;
|
||||
var _fill = settings.fill || 'blue';
|
||||
|
||||
var viewbox = [0,0,_width, _height].join(' ');
|
||||
|
||||
var svg = document.createElementNS(xmlns, 'svg');
|
||||
|
||||
svg.setAttribute('id', svgID);
|
||||
@ -393,26 +423,27 @@ CC2650_ACCEL = function(p) {
|
||||
|
||||
svg.setAttributeNS('http://www.w3.org/2000/xmlns/', 'xmlns:xlink', 'http://www.w3.org/1999/xlink');
|
||||
|
||||
svg.setAttributeNS(xmlns, 'viewBox', '0 0 700 150');
|
||||
svg.setAttributeNS(xmlns, 'viewBox', viewbox);
|
||||
// Svg.setAttributeNS(xmlns, 'style', 'width:700px;height:150px;');
|
||||
|
||||
|
||||
svg = this.graphAddXAxis(svg, {y: 12, x2: 680, colour: '#004c6d', id: text1ID});
|
||||
svg = this.graphAddXAxis(svg, {y: 136, x2: 680, colour: '#004c6d', id: text2ID});
|
||||
svg = this.graphAddXAxis(svg, {y: 71, x2: 680, colour: '#004c6d', text: '0'});
|
||||
svg = this.graphAddXAxis(svg, {y: _height - 14, x2: 680, colour: '#004c6d', id: text2ID});
|
||||
svg = this.graphAddXAxis(svg, {y: ((_height - (14 + 12)) / 2) + 12, x2: 680, colour: '#004c6d', text: '0'});
|
||||
|
||||
return svg;
|
||||
|
||||
};
|
||||
|
||||
this.generateBlankGraph = function(subID) {
|
||||
this.generateBlankGraph = function(subID, height) {
|
||||
|
||||
var _height = height || 150;
|
||||
var _subID = subID || '';
|
||||
var xlineID = this.frameID + _subID + '-x-line';
|
||||
var ylineID = this.frameID + _subID + '-y-line';
|
||||
var zlineID = this.frameID + _subID + '-z-line';
|
||||
|
||||
var svg = this.generateBlankGraphBase(_subID,{width: '700',height: 150});
|
||||
var svg = this.generateBlankGraphBase(_subID,{width: '700',height: height});
|
||||
|
||||
svg = this.graphAddLine(svg, xlineID, 'rgba(255,0,99,1)');
|
||||
svg = this.graphAddLine(svg, ylineID, 'rgba(46,255,0,1)');
|
||||
@ -422,6 +453,8 @@ CC2650_ACCEL = function(p) {
|
||||
|
||||
};
|
||||
|
||||
|
||||
|
||||
this.startCalibrate = function() {
|
||||
console.log('Start calibrate');
|
||||
|
||||
@ -437,8 +470,10 @@ CC2650_ACCEL = function(p) {
|
||||
var frame;
|
||||
var title;
|
||||
var modeID = mode + 'ID';
|
||||
var height = 150;
|
||||
this.frames[modeID] = this.frameID + '-' + mode;
|
||||
|
||||
|
||||
var titles = {
|
||||
gyro: 'Gyroscope', accel: 'Accelerometer', mag: 'Magnetometer'
|
||||
};
|
||||
@ -451,7 +486,12 @@ CC2650_ACCEL = function(p) {
|
||||
class: 'mui-panel', id: this.frames[modeID]
|
||||
});
|
||||
|
||||
if (mode === 'gyro') {
|
||||
height = 300;
|
||||
}
|
||||
|
||||
if (mode === 'mag') {
|
||||
|
||||
elm = $('<div />', {class: 'mui-row'});
|
||||
button = $('<button />', {
|
||||
class: 'mui-btn mui-btn--raised',
|
||||
@ -517,7 +557,7 @@ CC2650_ACCEL = function(p) {
|
||||
|
||||
row = $('<div />', {class: 'mui-row'});
|
||||
|
||||
_graph = this.generateBlankGraph(mode);
|
||||
_graph = this.generateBlankGraph(mode, height);
|
||||
row.append($('<div>', {class: 'mui-col-sm-12'}).append(_graph));
|
||||
|
||||
this.$id[modeID].append(row);
|
||||
|
@ -1,46 +1,23 @@
|
||||
<%= data.baseID + 'pressure-line' %>
|
||||
<div class="mui-row">
|
||||
<div class="mui-col-md-6 mui--text-accent mui--text-center">TEMPERATURE</div>
|
||||
<div class="mui-col-md-6 mui--text-accent mui--text-center">PRESSURE</div>
|
||||
</div>
|
||||
|
||||
<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' %>">
|
||||
<div class="mui-col-md-6 mui--text-center" 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 transform="translate(150,30)">
|
||||
<text text-anchor="middle" id="<%= data.baseID + 'temp-label' %>" class='textLabel' x='0' y='100' fill='#bad649' font-size='50' >--</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">--</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' %>">
|
||||
<div class="mui-col-md-6 mui--text-center" id="<%= data.baseID + '-p-pane' %>">
|
||||
|
||||
<svg width='300' height='200' viewbox='0 0 300 220' background="#212121" id="<%= data.baseID + 'pressure-svg' %>">
|
||||
|
||||
@ -48,21 +25,12 @@
|
||||
<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 transform="translate(150,30)">
|
||||
<text text-anchor="middle" id="<%= data.baseID + 'pressure-label' %>" class='textLabel' x='0' y='100' fill='#bad649' font-size='40'>--</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">--</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>
|
||||
</div>
|
||||
|
||||
|
||||
|
@ -1,67 +1,34 @@
|
||||
<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 class="mui-col-md-6 mui--text-accent mui--text-center">TEMPERATURE</div>
|
||||
<div class="mui-col-md-6 mui--text-accent mui--text-center">HUMIDITY</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 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>
|
||||
<div class="mui-row">
|
||||
<div class="mui-col-md-6 mui--text-center" 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,30)">
|
||||
<text text-anchor="middle" id="<%= data.baseID + 'temp-label' %>" class='textLabel' x='0' y='100' fill='#bad649' font-size='50' >--</text>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="mui-col-md-6 mui--text-center" id="<%= data.baseID + '-h-pane' %>">
|
||||
|
||||
<svg width='300' height='200' viewbox='0 0 300 220' background="#212121" id="<%= data.baseID + 'humidity-svg' %>">
|
||||
|
||||
<g transform="translate(-90,40) rotate(-120 180 90)" >
|
||||
<path id="<%= data.baseID + 'humidity-arcB' %>" fill="none" stroke="rgb(61, 61, 61)" stroke-width="12" />
|
||||
<path id="<%= data.baseID + 'humidity-arc' %>" fill="none" stroke="#00bfff" stroke-width="12" />
|
||||
</g>
|
||||
<g transform="translate(150,30)">
|
||||
<text text-anchor="middle" id="<%= data.baseID + 'humidity-label' %>" class='textLabel' x='0' y='100' fill='#bad649' font-size='40' >--</text>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
</div>
|
||||
|
||||
<!--
|
||||
<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 width='300' height='200' viewbox='0 0 300 220' background="#212121" id="<%= data.baseID + 'humidity-svg' %>">
|
||||
|
||||
<g transform="translate(-90,40) rotate(-120 180 90)" >
|
||||
<path id="<%= data.baseID + 'humidity-arcB' %>" fill="none" stroke="rgb(61, 61, 61)" stroke-width="12" />
|
||||
<path id="<%= data.baseID + 'humidity-arc' %>" fill="none" stroke="#00bfff" stroke-width="12" />
|
||||
</g>
|
||||
<g transform="translate(150,100)">
|
||||
<text id="<%= data.baseID + 'humidity-label' %>" class='textLabel' x='0' y='100' fill='#bad649' font-size='50' >--ºc</text>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
|
||||
<!--<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>
|
||||
|
@ -1,63 +1,37 @@
|
||||
<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 class="mui-col-md-6 mui--text-accent mui--text-center">TEMPERATURE</div>
|
||||
<div class="mui-col-md-6 mui--text-accent mui--text-center">AMBIENT</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' %>">
|
||||
<div class="mui-row">
|
||||
<div class="mui-col-md-6 mui--text-center" 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>
|
||||
<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>
|
||||
|
||||
</div>
|
||||
<div class="mui-tabs__pane" id="<%= data.baseID + '-a-pane' %>">
|
||||
|
||||
<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" />
|
||||
<path id="<%= data.baseID + 'ambient-arc' %>" fill="none" stroke="#00bfff" stroke-width="12" />
|
||||
<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 + 'ambient-label' %>" class='textLabel' x='0' y='100' fill='#bad649' font-size='50' >--ºc</text>
|
||||
<g transform="translate(150,30)">
|
||||
<text text-anchor="middle" id="<%= data.baseID + 'temp-label' %>" class='textLabel' x='0' y='100' fill='#bad649' font-size='50' >--ºc</text>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
</div>
|
||||
<div class="mui-col-md-6 mui--text-center" id="<%= data.baseID + '-a-pane' %>">
|
||||
|
||||
<svg width='300' height='200' viewbox='0 0 300 220' background="#212121" id="<%= data.baseID + 'ambient-svg' %>">
|
||||
<!-- 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" />
|
||||
<path id="<%= data.baseID + 'ambient-arc' %>" fill="none" stroke="#00bfff" stroke-width="12" />
|
||||
</g>
|
||||
<g transform="translate(150,30)">
|
||||
<text text-anchor="middle" id="<%= data.baseID + 'ambient-label' %>" class='textLabel' x='0' y='100' fill='#bad649' font-size='50' >--ºc</text>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -1,2 +1,213 @@
|
||||
#lightR,#projR{color:red!important}#lightG,#projG{color:green!important}#lightB,#projB{color:blue!important}#lightW,#projW{background-color:#abc}.heatingBG,.lightBG,.projectorBG{float:right}.h105{height:100px}.item_content,.mdHeading{overflow:hidden}.item_content{height:100px;min-height:100px}.item_content a.title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#fff}.item_content div.body,.item_content div.site,.item_content div.tags{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#313131}.date,.temp,.time{font-family:Ubuntu Condensed,sans-serif;font-size:80px;color:#bad649}.time span.hour:after{content:":"}.date{font-size:35px;line-height:1}.temp:after{content:"°c"}.item_content div.tags{color:blue}.noConnection{color:#f4961a}#caltext{color:#fff}.spinner{margin:25px auto 0;width:70px;text-align:center}.spinner>div{width:18px;height:18px;background-color:#f4961a;border-radius:100%;display:inline-block;animation:a 1.4s infinite ease-in-out both}.spinner .bounce1{animation-delay:-.32s}.spinner .bounce2{animation-delay:-.16s}@keyframes a{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}.md-display{opacity:1}.lostConnection,.md-display{transition:opacity .3s,visibility .3s}.lostConnection{opacity:.5}.mui-ellipsis-2{display:-webkit-box;overflow:hidden;text-overflow:ellipsis;word-wrap:break-word;white-space:normal!important;-webkit-line-clamp:1;-webkit-box-orient:vertical}.pulser{display:block;margin-top:10%;border-radius:100px;width:30px;height:30px;border:10px solid #c5f4eb;animation:b .75s ease-in infinite}@keyframes b{0%{transform:scale(0)}85%{opacity:1}to{transform:scale(1);-webkit-filter:blur(5px);filter:blur(5px);opacity:0}}header{position:fixed;top:0;z-index:1;right:0;transition:left .2s;width:100%}.mui-tabs__bar>li.tabOnWhite>a{color:#78909c}.mui-tabs__bar>li.mui--is-active.tabOnWhite>a{color:#2196f3}svg text{font-family:Ubuntu Condensed,sans-serif;font-size:12;fill:#bad649;text-align:right}
|
||||
.progress{position:relative;height:4px;display:block;width:100%;background-color:#acece6;border-radius:2px;background-clip:padding-box;overflow:hidden}.progress .determinate{position:absolute;background-color:inherit;top:0;bottom:0;transition:width .3s linear}.progress .determinate,.progress .indeterminate{background-color:#26a69a}.progress .indeterminate:before{animation:a 2.1s cubic-bezier(.65,.815,.735,.395) infinite}.progress .indeterminate:after,.progress .indeterminate:before{content:'';position:absolute;background-color:inherit;top:0;left:0;bottom:0;will-change:left,right}.progress .indeterminate:after{animation:b 2.1s cubic-bezier(.165,.84,.44,1) infinite;animation-delay:1.15s}@keyframes a{0%{left:-35%;right:100%}60%{left:100%;right:-90%}to{left:100%;right:-90%}}@keyframes b{0%{left:-200%;right:100%}60%{left:107%;right:-8%}to{left:107%;right:-8%}}
|
||||
|
||||
#lightR, #projR { color: red !important; }
|
||||
|
||||
#lightG, #projG { color: green !important; }
|
||||
|
||||
#lightB, #projB { color: blue !important; }
|
||||
|
||||
#lightW, #projW { background-color: #aabbcc; }
|
||||
|
||||
.lightBG, .heatingBG, .projectorBG {
|
||||
float: right;
|
||||
}
|
||||
|
||||
|
||||
.h105 {
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.mdHeading {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
.item_content {
|
||||
height: 100px;
|
||||
/* border: 1px solid grey;*/
|
||||
min-height: 100px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.item_content a.title {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.item_content div.body, .item_content div.site, .item_content div.tags {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
color: #313131;
|
||||
}
|
||||
|
||||
.time, .date, .temp {
|
||||
font-family: 'Ubuntu Condensed', sans-serif;
|
||||
font-size: 80px;
|
||||
color: #bad649;
|
||||
}
|
||||
|
||||
.time span.hour:after {
|
||||
content: ":";
|
||||
}
|
||||
|
||||
.date {
|
||||
font-size: 35px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.temp::after {
|
||||
content: "°c";
|
||||
}
|
||||
|
||||
.item_content div.tags {
|
||||
color: blue;
|
||||
}
|
||||
|
||||
.noConnection {
|
||||
color: rgb(244, 150, 26);
|
||||
}
|
||||
|
||||
#caltext {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Smartphones (portrait and landscape) ----------- */
|
||||
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
|
||||
/* Styles */
|
||||
|
||||
}
|
||||
|
||||
/* Smartphones (landscape) ----------- */
|
||||
@media only screen and (min-width: 321px) {
|
||||
/* Styles */
|
||||
}
|
||||
|
||||
/* Smartphones (portrait) ----------- */
|
||||
@media only screen and (max-width: 320px) {
|
||||
/* Styles */
|
||||
}
|
||||
|
||||
.spinner {
|
||||
margin: 25px auto 0;
|
||||
width: 70px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.spinner > div {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
background-color: rgb(244, 150, 26);
|
||||
border-radius: 100%;
|
||||
display: inline-block;
|
||||
-webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
|
||||
animation: sk-bouncedelay 1.4s infinite ease-in-out both;
|
||||
}
|
||||
|
||||
.spinner .bounce1 {
|
||||
-webkit-animation-delay: -0.32s;
|
||||
animation-delay: -0.32s;
|
||||
}
|
||||
|
||||
.spinner .bounce2 {
|
||||
-webkit-animation-delay: -0.16s;
|
||||
animation-delay: -0.16s;
|
||||
}
|
||||
|
||||
@-webkit-keyframes sk-bouncedelay {
|
||||
0%, 80%, 100% { -webkit-transform: scale(0) }
|
||||
40% { -webkit-transform: scale(1.0) }
|
||||
}
|
||||
|
||||
@keyframes sk-bouncedelay {
|
||||
0%, 80%, 100% {
|
||||
-webkit-transform: scale(0);
|
||||
transform: scale(0);
|
||||
}
|
||||
40% {
|
||||
-webkit-transform: scale(1.0);
|
||||
transform: scale(1.0);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.md-display {
|
||||
opacity: 1;
|
||||
transition: opacity 0.3s, visibility 0.3s;
|
||||
|
||||
}
|
||||
|
||||
.lostConnection {
|
||||
opacity: 0.5;
|
||||
transition: opacity 0.3s, visibility 0.3s;
|
||||
}
|
||||
|
||||
|
||||
.mui-ellipsis-2 {
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
word-wrap: break-word;
|
||||
white-space: normal!important;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
.pulser {
|
||||
display: block;
|
||||
margin-top:10%;
|
||||
border-radius: 100px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border: 10px solid #C5F4EB;
|
||||
-webkit-animation: pulse 0.75s ease-in infinite;
|
||||
-moz-animation: pulse 0.75s ease-in infinite;
|
||||
animation: pulse 0.75s ease-in infinite;
|
||||
}
|
||||
@-webkit-keyframes pulse {
|
||||
0% { -webkit-transform: scale(0); }
|
||||
85% { opacity: 1; }
|
||||
100% { -webkit-transform: scale(1); -webkit-filter: blur(5px); opacity: 0; }
|
||||
}
|
||||
@-moz-keyframes pulse {
|
||||
0% { -moz-transform: scale(0); }
|
||||
85% { opacity: 1; }
|
||||
100% { -moz-transform: scale(1); -moz-filter: blur(5px); opacity: 0; }
|
||||
}
|
||||
@keyframes pulse {
|
||||
0% { transform: scale(0); }
|
||||
85% { opacity: 1; }
|
||||
100% { transform: scale(1); filter: blur(5px); opacity: 0; }
|
||||
}
|
||||
|
||||
|
||||
header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
right:0;
|
||||
transition: left .2s;
|
||||
width:100%;
|
||||
}
|
||||
|
||||
.mui-tabs__bar > li.tabOnWhite > a
|
||||
|
||||
{
|
||||
color:#78909C;
|
||||
}
|
||||
|
||||
.mui-tabs__bar > li.mui--is-active.tabOnWhite > a
|
||||
{
|
||||
color:#2196F3;
|
||||
}
|
||||
|
||||
|
||||
/* svg classes */
|
||||
|
||||
svg text {
|
||||
font-family:'Ubuntu Condensed',sans-serif;
|
||||
font-size:12;
|
||||
fill: #bad649;
|
||||
text-align:right;
|
||||
}
|
||||
|
@ -1,3 +1,10 @@
|
||||
@font-face {
|
||||
font-family: 'Material Icons';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url(Material_Icons-normal-400.woff) format('woff');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Ubuntu';
|
||||
font-style: normal;
|
||||
|
@ -1 +1,134 @@
|
||||
<!DOCTYPE html><html><head><meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *"><meta name="format-detection" content="telephone=no"><meta name="msapplication-tap-highlight" content="no"><meta name="viewport" content="user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1,width=device-width"><link rel="stylesheet" href="fonts/fonts.css"><link rel="stylesheet" href="css/custom.css"><link rel="stylesheet" href="css/app.css"><title>Sensor Toy</title></head><body class="mui--no-user-select"><header id="header"><div class="mui-appbar"><ul id="app-tabs" class="mui-tabs__bar mui--z1 mui--appbar-height"><li class="mui--is-active"><a data-mui-toggle="tab" data-mui-controls="pane-default-1">Devices</a></li></ul></div></header><div class="mui--appbar-height"></div><div id="tab-panes" class="" style="height:100%"><div class="mui-tabs__pane mui--is-active" id="pane-default-1"><div id="app" class="mui-container"><div><div class="mui-row mui--appbar-height mui--appbar-line-height"><div class="mui-col-xs-6 mui--text-subhead"><span class="">Devices</span></div><div class="mui-col-xs-6 mui--text-right"><button class="mui-btn mui-btn--small mui-btn--primary" id="scan">Scan</button> <button class="mui-btn mui-btn--small mui-btn--danger" id="stop" style="display: none">Stop</button></div></div><div style="margin: 0.5rem 0 1rem 0"><div class="progress" id="ripple" style="display: none"><div class="indeterminate"></div></div></div><div id="scanResults"></div></div></div></div></div><script type="text/javascript" src="cordova.js"></script><script src="libs/vendor.js"></script><script src="js/standards.js"></script><script src="js/cc2650.js"></script><script type="text/javascript" src="js/device/fmc/TSL.js"></script><script src="js/app.js"></script></body></html>
|
||||
<!DOCTYPE html><!--
|
||||
Licensed to the Apache Software Foundation (ASF) under one
|
||||
or more contributor license agreements. See the NOTICE file
|
||||
distributed with this work for additional information
|
||||
regarding copyright ownership. The ASF licenses this file
|
||||
to you under the Apache License, Version 2.0 (the
|
||||
"License"); you may not use this file except in compliance
|
||||
with the License. You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing,
|
||||
software distributed under the License is distributed on an
|
||||
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
KIND, either express or implied. See the License for the
|
||||
specific language governing permissions and limitations
|
||||
under the License.
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<!--
|
||||
Customize this policy to fit your own app's needs. For more guidance, see:
|
||||
https://github.com/apache/cordova-plugin-whitelist/blob/master/README.md#content-security-policy
|
||||
Some notes:
|
||||
* gap: is required only on iOS (when using UIWebView) and is needed for JS->native communication
|
||||
* https://ssl.gstatic.com is required only on Android and is needed for TalkBack to function properly
|
||||
* Disables use of inline scripts in order to mitigate risk of XSS vulnerabilities. To change this:
|
||||
* Enable inline JS: add 'unsafe-inline' to default-src
|
||||
-->
|
||||
<meta http-equiv="Content-Security-Policy"
|
||||
content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
|
||||
<meta name="format-detection" content="telephone=no">
|
||||
<meta name="msapplication-tap-highlight" content="no">
|
||||
<meta name="viewport"
|
||||
content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
|
||||
<!-- build:fonts -->
|
||||
<link rel="stylesheet" href="fonts/fonts.css">
|
||||
<!-- endbuild -->
|
||||
|
||||
<!-- build:mui -->
|
||||
<link href="css/mui.custom.css" rel="stylesheet" type="text/css"/>
|
||||
<!-- endbuild -->
|
||||
<!-- build:css -->
|
||||
<link href="css/app.css" rel="stylesheet" type="text/css"/>
|
||||
<link href="css/ripple.css" rel="stylesheet" type="text/css"/>
|
||||
<link href="css/progress.css" rel="stylesheet" type="text/css"/>
|
||||
<!-- endbuild -->
|
||||
<title>Sensor Toy</title>
|
||||
</head>
|
||||
<body class="mui--no-user-select">
|
||||
<header id="header">
|
||||
<div class="mui-appbar">
|
||||
<ul id='app-tabs' class="mui-tabs__bar mui--z1 mui--appbar-height">
|
||||
<li class="mui--is-active"><a data-mui-toggle="tab"
|
||||
data-mui-controls="pane-default-1">Devices</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</header>
|
||||
<div class="mui--appbar-height"></div>
|
||||
<div id="tab-panes" class='' style="height:100%;">
|
||||
<div class="mui-tabs__pane mui--is-active" id="pane-default-1">
|
||||
<div id='app' class="mui-container">
|
||||
<div>
|
||||
<div class="mui-row mui--appbar-height mui--appbar-line-height">
|
||||
<div class="mui-col-xs-6 mui--text-subhead">
|
||||
<span class="">Devices</span>
|
||||
</div>
|
||||
<div class="mui-col-xs-6 mui--text-right">
|
||||
<button class="mui-btn mui-btn--small mui-btn--primary"
|
||||
id="scan">Scan
|
||||
</button>
|
||||
<button class="mui-btn mui-btn--small mui-btn--danger" id="stop"
|
||||
style="display: none;">Stop
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin: 0.5rem 0 1rem 0;">
|
||||
<div class="progress" id='ripple' style="display: none;">
|
||||
<div class="indeterminate"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="scanResults"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript" src="cordova.js"></script>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<script type="text/javascript" src="libs/jsfft/complex_array.js"></script>
|
||||
<script type="text/javascript" src="libs/jsfft/fft.js"></script>
|
||||
|
||||
<!-- endbuild -->
|
||||
|
||||
<!-- build:standards -->
|
||||
<script type="text/javascript"
|
||||
src="js/standards/bluetooth_company_identifiers.js"></script>
|
||||
<script type="text/javascript" src="js/standards/capability.js"></script>
|
||||
<script type="text/javascript" src="js/standards/battery.js"></script>
|
||||
<script type="text/javascript" src="js/standards/button.js"></script>
|
||||
<script type="text/javascript" src="js/mandecoder.js"></script>
|
||||
<!-- endbuild -->
|
||||
|
||||
<!-- build:cc2650 -->
|
||||
<script type="text/javascript"
|
||||
src="js/device/CC2650/cc2650_accelerometer.js"></script>
|
||||
<script type="text/javascript"
|
||||
src="js/device/CC2650/cc2650_barometer.js"></script>
|
||||
<script type="text/javascript"
|
||||
src="js/device/CC2650/cc2650_luxometer.js"></script>
|
||||
<script type="text/javascript"
|
||||
src="js/device/CC2650/cc2650_thermopile.js"></script>
|
||||
<script type="text/javascript"
|
||||
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 -->
|
||||
</body>
|
||||
</html>
|
||||
|
Loading…
Reference in New Issue
Block a user