|
|
@ -16,35 +16,35 @@
|
|
|
|
* under the License.
|
|
|
|
* under the License.
|
|
|
|
*/
|
|
|
|
*/
|
|
|
|
|
|
|
|
|
|
|
|
var palette = new Rickshaw.Color.Palette({scheme: "classic9"});
|
|
|
|
var palette = new Rickshaw.Color.Palette({scheme: 'classic9'});
|
|
|
|
|
|
|
|
|
|
|
|
function drawGraph_connectedcup(from, to) {
|
|
|
|
function drawGraph_connectedcup(from, to) {
|
|
|
|
$("#y_axis-temperature").html("");
|
|
|
|
$('#y_axis-temperature').html('');
|
|
|
|
$("#smoother-temperature").html("");
|
|
|
|
$('#smoother-temperature').html('');
|
|
|
|
$("#legend-temperature").html("");
|
|
|
|
$('#legend-temperature').html('');
|
|
|
|
$("#chart-temperature").html("");
|
|
|
|
$('#chart-temperature').html('');
|
|
|
|
$("#x_axis-temperature").html("");
|
|
|
|
$('#x_axis-temperature').html('');
|
|
|
|
$("#slider-temperature").html("");
|
|
|
|
$('#slider-temperature').html('');
|
|
|
|
|
|
|
|
|
|
|
|
$("#y_axis-coffeelevel").html("");
|
|
|
|
$('#y_axis-coffeelevel').html('');
|
|
|
|
$("#smoother-coffeelevel").html("");
|
|
|
|
$('#smoother-coffeelevel').html('');
|
|
|
|
$("#legend-coffeelevel").html("");
|
|
|
|
$('#legend-coffeelevel').html('');
|
|
|
|
$("#chart-coffeelevel").html("");
|
|
|
|
$('#chart-coffeelevel').html('');
|
|
|
|
$("#x_axis-coffeelevel").html("");
|
|
|
|
$('#x_axis-coffeelevel').html('');
|
|
|
|
$("#slider-coffeelevel").html("");
|
|
|
|
$('#slider-coffeelevel').html('');
|
|
|
|
|
|
|
|
|
|
|
|
var devices = $("#connectedcup-details").data("devices");
|
|
|
|
var devices = $('#connectedcup-details').data('devices');
|
|
|
|
var tzOffset = new Date().getTimezoneOffset() * 60;
|
|
|
|
var tzOffset = new Date().getTimezoneOffset() * 60;
|
|
|
|
|
|
|
|
|
|
|
|
var chartWrapperElmId = "#connectedcup-div-chart";
|
|
|
|
var chartWrapperElmId = '#connectedcup-div-chart';
|
|
|
|
var graphWidth = $(chartWrapperElmId).width() - 50;
|
|
|
|
var graphWidth = $(chartWrapperElmId).width() - 50;
|
|
|
|
var temperatureGraphConfig = {
|
|
|
|
var temperatureGraphConfig = {
|
|
|
|
element: document.getElementById("chart-temperature"),
|
|
|
|
element: document.getElementById('chart-temperature'),
|
|
|
|
width: graphWidth,
|
|
|
|
width: graphWidth,
|
|
|
|
height: 400,
|
|
|
|
height: 400,
|
|
|
|
strokeWidth: 2,
|
|
|
|
strokeWidth: 2,
|
|
|
|
renderer: 'line',
|
|
|
|
renderer: 'line',
|
|
|
|
interpolation: "linear",
|
|
|
|
interpolation: 'linear',
|
|
|
|
unstack: true,
|
|
|
|
unstack: true,
|
|
|
|
stack: false,
|
|
|
|
stack: false,
|
|
|
|
xScale: d3.time.scale(),
|
|
|
|
xScale: d3.time.scale(),
|
|
|
@ -53,12 +53,12 @@ function drawGraph_connectedcup(from, to) {
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
var coffeelevelGraphConfig = {
|
|
|
|
var coffeelevelGraphConfig = {
|
|
|
|
element: document.getElementById("chart-coffeelevel"),
|
|
|
|
element: document.getElementById('chart-coffeelevel'),
|
|
|
|
width: graphWidth,
|
|
|
|
width: graphWidth,
|
|
|
|
height: 400,
|
|
|
|
height: 400,
|
|
|
|
strokeWidth: 2,
|
|
|
|
strokeWidth: 2,
|
|
|
|
renderer: 'line',
|
|
|
|
renderer: 'line',
|
|
|
|
interpolation: "linear",
|
|
|
|
interpolation: 'linear',
|
|
|
|
unstack: true,
|
|
|
|
unstack: true,
|
|
|
|
stack: false,
|
|
|
|
stack: false,
|
|
|
|
xScale: d3.time.scale(),
|
|
|
|
xScale: d3.time.scale(),
|
|
|
@ -79,34 +79,34 @@ function drawGraph_connectedcup(from, to) {
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
coffeelevelGraphConfig['series'].push(
|
|
|
|
coffeelevelGraphConfig['series'].push(
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
'color': palette.color(),
|
|
|
|
|
|
|
|
'data': [{
|
|
|
|
|
|
|
|
x: parseInt(new Date().getTime() / 1000),
|
|
|
|
|
|
|
|
y: 0
|
|
|
|
|
|
|
|
}],
|
|
|
|
|
|
|
|
'name': devices[i].name
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
|
|
|
temperatureGraphConfig['series'].push(
|
|
|
|
{
|
|
|
|
{
|
|
|
|
'color': palette.color(),
|
|
|
|
'color': palette.color(),
|
|
|
|
'data': [{
|
|
|
|
'data': [{
|
|
|
|
x: parseInt(new Date().getTime() / 1000),
|
|
|
|
x: parseInt(new Date().getTime() / 1000),
|
|
|
|
y: 0
|
|
|
|
y: 0
|
|
|
|
}],
|
|
|
|
}],
|
|
|
|
'name': devices[i].name
|
|
|
|
'name': $('#connectedcup-details').data('devicename')
|
|
|
|
});
|
|
|
|
});
|
|
|
|
}
|
|
|
|
coffeelevelGraphConfig['series'].push(
|
|
|
|
} else {
|
|
|
|
|
|
|
|
temperatureGraphConfig['series'].push(
|
|
|
|
|
|
|
|
{
|
|
|
|
{
|
|
|
|
'color': palette.color(),
|
|
|
|
'color': palette.color(),
|
|
|
|
'data': [{
|
|
|
|
'data': [{
|
|
|
|
x: parseInt(new Date().getTime() / 1000),
|
|
|
|
x: parseInt(new Date().getTime() / 1000),
|
|
|
|
y: 0
|
|
|
|
y: 0
|
|
|
|
}],
|
|
|
|
}],
|
|
|
|
'name': $("#connectedcup-details").data("devicename")
|
|
|
|
'name': $('#connectedcup-details').data('devicename')
|
|
|
|
});
|
|
|
|
});
|
|
|
|
coffeelevelGraphConfig['series'].push(
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
'color': palette.color(),
|
|
|
|
|
|
|
|
'data': [{
|
|
|
|
|
|
|
|
x: parseInt(new Date().getTime() / 1000),
|
|
|
|
|
|
|
|
y: 0
|
|
|
|
|
|
|
|
}],
|
|
|
|
|
|
|
|
'name': $("#connectedcup-details").data("devicename")
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
var temperatureGraph = new Rickshaw.Graph(temperatureGraphConfig);
|
|
|
|
var temperatureGraph = new Rickshaw.Graph(temperatureGraphConfig);
|
|
|
@ -130,7 +130,7 @@ function drawGraph_connectedcup(from, to) {
|
|
|
|
var yAxisTemperature = new Rickshaw.Graph.Axis.Y({
|
|
|
|
var yAxisTemperature = new Rickshaw.Graph.Axis.Y({
|
|
|
|
graph: temperatureGraph,
|
|
|
|
graph: temperatureGraph,
|
|
|
|
orientation: 'left',
|
|
|
|
orientation: 'left',
|
|
|
|
element: document.getElementById("y_axis-temperature"),
|
|
|
|
element: document.getElementById('y_axis-temperature'),
|
|
|
|
width: 40,
|
|
|
|
width: 40,
|
|
|
|
height: 410
|
|
|
|
height: 410
|
|
|
|
});
|
|
|
|
});
|
|
|
@ -140,7 +140,7 @@ function drawGraph_connectedcup(from, to) {
|
|
|
|
var yAxisCoffeelevel = new Rickshaw.Graph.Axis.Y({
|
|
|
|
var yAxisCoffeelevel = new Rickshaw.Graph.Axis.Y({
|
|
|
|
graph: coffeelevelGraph,
|
|
|
|
graph: coffeelevelGraph,
|
|
|
|
orientation: 'left',
|
|
|
|
orientation: 'left',
|
|
|
|
element: document.getElementById("y_axis-coffeelevel"),
|
|
|
|
element: document.getElementById('y_axis-coffeelevel'),
|
|
|
|
width: 40,
|
|
|
|
width: 40,
|
|
|
|
height: 410
|
|
|
|
height: 410
|
|
|
|
});
|
|
|
|
});
|
|
|
@ -149,7 +149,7 @@ function drawGraph_connectedcup(from, to) {
|
|
|
|
|
|
|
|
|
|
|
|
var slider = new Rickshaw.Graph.RangeSlider.Preview({
|
|
|
|
var slider = new Rickshaw.Graph.RangeSlider.Preview({
|
|
|
|
graph: temperatureGraph,
|
|
|
|
graph: temperatureGraph,
|
|
|
|
element: document.getElementById("slider-temperature")
|
|
|
|
element: document.getElementById('slider-temperature')
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
var legend = new Rickshaw.Graph.Legend({
|
|
|
|
var legend = new Rickshaw.Graph.Legend({
|
|
|
@ -159,7 +159,7 @@ function drawGraph_connectedcup(from, to) {
|
|
|
|
|
|
|
|
|
|
|
|
var sliderCoffee = new Rickshaw.Graph.RangeSlider.Preview({
|
|
|
|
var sliderCoffee = new Rickshaw.Graph.RangeSlider.Preview({
|
|
|
|
graph: coffeelevelGraph,
|
|
|
|
graph: coffeelevelGraph,
|
|
|
|
element: document.getElementById("slider-coffeelevel")
|
|
|
|
element: document.getElementById('slider-coffeelevel')
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
var legendCoffee = new Rickshaw.Graph.Legend({
|
|
|
|
var legendCoffee = new Rickshaw.Graph.Legend({
|
|
|
@ -174,7 +174,7 @@ function drawGraph_connectedcup(from, to) {
|
|
|
|
moment((x + tzOffset) * 1000).format('Do MMM YYYY h:mm:ss a') + '</span>';
|
|
|
|
moment((x + tzOffset) * 1000).format('Do MMM YYYY h:mm:ss a') + '</span>';
|
|
|
|
var swatch = '<span class="detail_swatch" style="background-color: ' +
|
|
|
|
var swatch = '<span class="detail_swatch" style="background-color: ' +
|
|
|
|
series.color + '"></span>';
|
|
|
|
series.color + '"></span>';
|
|
|
|
return swatch + series.name + ": " + parseInt(y) + '<br>' + date;
|
|
|
|
return swatch + series.name + ': ' + parseInt(y) + '<br>' + date;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
@ -182,10 +182,10 @@ function drawGraph_connectedcup(from, to) {
|
|
|
|
graph: coffeelevelGraph,
|
|
|
|
graph: coffeelevelGraph,
|
|
|
|
formatter: function (series, x, y) {
|
|
|
|
formatter: function (series, x, y) {
|
|
|
|
var date = '<span class="date">' +
|
|
|
|
var date = '<span class="date">' +
|
|
|
|
moment((x + tzOffset) * 1000).format('Do MMM YYYY h:mm:ss a') + '</span>';
|
|
|
|
moment((x + tzOffset) * 1000).format('Do MMM YYYY h:mm:ss a') + '</span>';
|
|
|
|
var swatch = '<span class="detail_swatch" style="background-color: ' +
|
|
|
|
var swatch = '<span class="detail_swatch" style="background-color: ' +
|
|
|
|
series.color + '"></span>';
|
|
|
|
series.color + '"></span>';
|
|
|
|
return swatch + series.name + ": " + parseInt(y) + '<br>' + date;
|
|
|
|
return swatch + series.name + ': ' + parseInt(y) + '<br>' + date;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
@ -224,7 +224,7 @@ function drawGraph_connectedcup(from, to) {
|
|
|
|
if (devices) {
|
|
|
|
if (devices) {
|
|
|
|
getData();
|
|
|
|
getData();
|
|
|
|
} else {
|
|
|
|
} else {
|
|
|
|
var backendApiUrl = $("#connectedcup-div-chart").data("backend-api-url") + "/sensors/temperature" + "?from=" + from + "&to=" + to;
|
|
|
|
var backendApiUrl = $('#connectedcup-div-chart').data('backend-api-url') + '/sensors/temperature' + '?from=' + from + '&to=' + to;
|
|
|
|
var successCallback = function (data) {
|
|
|
|
var successCallback = function (data) {
|
|
|
|
if (data) {
|
|
|
|
if (data) {
|
|
|
|
drawTemperatureLineGraph(JSON.parse(data));
|
|
|
|
drawTemperatureLineGraph(JSON.parse(data));
|
|
|
@ -234,8 +234,8 @@ function drawGraph_connectedcup(from, to) {
|
|
|
|
console.log(message);
|
|
|
|
console.log(message);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
var coffeeLevelApiUrl = $("#connectedcup-div-chart").data("backend-api-url") + "/sensors/coffeelevel"
|
|
|
|
var coffeeLevelApiUrl = $('#connectedcup-div-chart').data('backend-api-url') + '/sensors/coffeelevel'
|
|
|
|
+ "?from=" + from + "&to=" + to;
|
|
|
|
+ '?from=' + from + '&to=' + to;
|
|
|
|
var successCallbackCoffeeLevel = function (data) {
|
|
|
|
var successCallbackCoffeeLevel = function (data) {
|
|
|
|
if (data) {
|
|
|
|
if (data) {
|
|
|
|
drawCoffeeLevelLineGraph(JSON.parse(data));
|
|
|
|
drawCoffeeLevelLineGraph(JSON.parse(data));
|
|
|
@ -250,9 +250,9 @@ function drawGraph_connectedcup(from, to) {
|
|
|
|
if (deviceIndex >= devices.length) {
|
|
|
|
if (deviceIndex >= devices.length) {
|
|
|
|
return;
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
var backendApiUrl = $("#connectedcup-div-chart").data("backend-api-url") + devices[deviceIndex].deviceIdentifier
|
|
|
|
var backendApiUrl = $('#connectedcup-div-chart').data('backend-api-url') + devices[deviceIndex].deviceIdentifier
|
|
|
|
+ "/sensors/temperature"
|
|
|
|
+ '/sensors/temperature'
|
|
|
|
+ "?from=" + from + "&to=" + to;
|
|
|
|
+ '?from=' + from + '&to=' + to;
|
|
|
|
var successCallback = function (data) {
|
|
|
|
var successCallback = function (data) {
|
|
|
|
if (data) {
|
|
|
|
if (data) {
|
|
|
|
drawTemperatureLineGraph(JSON.parse(data));
|
|
|
|
drawTemperatureLineGraph(JSON.parse(data));
|
|
|
@ -265,8 +265,8 @@ function drawGraph_connectedcup(from, to) {
|
|
|
|
deviceIndex++;
|
|
|
|
deviceIndex++;
|
|
|
|
getData();
|
|
|
|
getData();
|
|
|
|
});
|
|
|
|
});
|
|
|
|
var coffeeLevelApiUrl = $("#connectedcup-div-chart").data("backend-api-url") + devices[deviceIndex].deviceIdentifier
|
|
|
|
var coffeeLevelApiUrl = $('#connectedcup-div-chart').data('backend-api-url') + devices[deviceIndex].deviceIdentifier
|
|
|
|
+ "/sensors/coffeelevel" + "?from=" + from + "&to=" + to;
|
|
|
|
+ '/sensors/coffeelevel' + '?from=' + from + '&to=' + to;
|
|
|
|
|
|
|
|
|
|
|
|
var successCallbackCoffeeLevel = function (data) {
|
|
|
|
var successCallbackCoffeeLevel = function (data) {
|
|
|
|
if (data) {
|
|
|
|
if (data) {
|
|
|
@ -305,10 +305,10 @@ function drawGraph_connectedcup(from, to) {
|
|
|
|
var chartData = [];
|
|
|
|
var chartData = [];
|
|
|
|
for (var i = 0; i < data.length; i++) {
|
|
|
|
for (var i = 0; i < data.length; i++) {
|
|
|
|
chartData.push(
|
|
|
|
chartData.push(
|
|
|
|
{
|
|
|
|
{
|
|
|
|
x: parseInt(data[i].values.time) - tzOffset,
|
|
|
|
x: parseInt(data[i].values.time) - tzOffset,
|
|
|
|
y: parseInt(data[i].values.coffeelevel)
|
|
|
|
y: parseInt(data[i].values.coffeelevel)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
);
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|