Skip to content

Commit

Permalink
initial commit
Browse files Browse the repository at this point in the history
  • Loading branch information
@TTigges
TTigges committed Feb 8, 2018
1 parent 063bb2c commit 0eae4c5
Show file tree
Hide file tree
Showing 8 changed files with 921 additions and 1 deletion.
249 changes: 249 additions & 0 deletions MMM-Oiltank.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,249 @@
/* Magic Mirror
* Module: MMM-Oiltank
*
* By Torben Tigges
*
* TO DO:
* - Label (Datum aus der JSON)?
* - Vorhersage, wann Öl bestellt werden muss. config: prediction: true/false
* - Öltank-Icon f. Volumenanzeige
* - Max. anzeigen?
* - maxVolume: ,
* - Warnlinie sollte nur angezeigt werden, wenn sie im Scope ist!
* - Anzeigebreite für weniger als full-width
*
*/

Module.register("MMM-Oiltank",{
// Default module config.
defaults: {
file: "", // "modules/MMM-Oiltank/history.json" doesn't work unless "request" is changed to the "fs"-line in the node-helper
warnVolume: 0,
showDays: 30,
scope: 25 // above max and below min
},

getScripts: function() {
return [
this.file("highcharts/highcharts.js"),
this.file("highcharts/series-label.js"),
this.file("highcharts/exporting.js")
]
},

getStyles: function() {
return [
this.file('css/chart.css')
]
},

start: function() {
Log.info("Starting module: " + this.name);
if (this.config.file === "") {
this.config.file = "modules/MMM-Oiltank/history.json";
}
var payload = this.config.file;
this.sendSocketNotification("GetChart", payload);
// this.fuelName = fuelIds[this.config.fuelId];
// this.getChartLabel();
this.config.warnOn = 0;
if (this.config.warnVolume > 0) {
this.config.warnOn = 2;
}
},

socketNotificationReceived: function(notification, payload) {
if (notification === "ChartUpdate") {
this.getChart(payload);
Log.info("good to go");
}
},

getDom: function() {
newMainElement = document.createElement('div');
newMainElement.setAttribute('id', 'tankvolumen');

newVolumeDiv = document.createElement('div');
newVolumeDiv.setAttribute('id', 'volume');
if (this.volume) {
newVolumeDiv.innerHTML = this.volume.replace(".",",") + " L";
}

newChartDiv = document.createElement('div');
newChartDiv.setAttribute('id', 'volume-chart');
// siehe unten: Das Label geht zur Zeit nach 7 Tagen. Das macht hier wenig Sinn.
/*
newLabelDiv = document.createElement('div');
newLabelDiv.setAttribute('id', 'chart-label');
newLabelDiv.innerHTML = this.chartLabel;
*/

newMainElement.appendChild(newVolumeDiv);
newMainElement.appendChild(newChartDiv);
//newMainElement.appendChild(newLabelDiv);

return newMainElement;
},

getChart: function(history) {
// Log.info("running chart");
// Log.info(history.length);
if (history.length >= this.config.showDays) {
history = history.slice(-this.config.showDays);
}
// Log.info(history.length);
for(i = 0; i < history.length; i++) {
if (i === 0) {
list = history[i].Volumen;
}
else if (i === (history.length-1)) {
list = list + ", " + history[i].Volumen;
document.getElementById("volume").innerHTML = history[i].Volumen + " L"; //history[i].Volumen.replace(".",",") + " L"; // <= bei Kommawerten
this.volume = history[i].Volumen;
}
else {
list = list + ", " + history[i].Volumen;
}
}
var maxi = Math.max.apply(Math, JSON.parse("[" + list + "]"));
var highest = maxi.toString() + " L"; //maxi.toString().replace(".",",") + " L"; // <= bei Kommawerten
var mini = Math.min.apply(Math, JSON.parse("[" + list + "]"));
var lowest = mini.toString() + " L"; //mini.toString().replace(".",",") + " L"; // <= bei Kommawerten

Highcharts.chart('volume-chart', {
chart: {
height: 175, // Höhe des Chart in Pixel
margin: 0,
left: 0
},
plotOptions: {
series: {
marker: {
enabled: false
}
}
},
tooltip: {
pointFormat: "Value: {point.y:.2f}"
},
yAxis: {
min: mini - this.config.scope, // mini - 25, Tiefstwert, oben ermittelt.
max: maxi + this.config.scope, // maxi + 25, Höchstwert, oben ermittelt.
tickInterval: 25, // Schrittgröße
plotLines: [/*{ // HILFSLINIEN
value: this.Volumen, // Linie die den aktuellen Füllstand anzeigen sollte, macht keinen Sinn, weil es keine Schwankungen geben sollte. Bzw. macht nur kurz nach Befüllung Sinn.
dashStyle: 'solid',
width: 1,
color: {
linearGradient: [0, 0, 900, 0],
stops: [
[0, 'rgba(255, 255, 255, 0.1)'],
[1, 'rgba(255, 255, 255, 0.2)']
]
}
},*/{
value: Math.max.apply(Math, JSON.parse("[" + list + "]")), // gepunktete Linie zur Kennzeichnung des Höchstwert
dashStyle: 'dot',
width: 1,
color: {
linearGradient: [0, 0, 900, 0],
stops: [ // fade in, Linie fängt dunkler an und wird dann heller
[0, 'rgba(255, 255, 255, 0.2)'],
[1, 'rgba(255, 255, 255, 0.3)']
]
},
label: {
text: highest, // Höchstwert als Referenzwert auf der Linken Seite, oben ermittelt.
x: 11,
y: -7
}
}, {
value: Math.min.apply(Math, JSON.parse("[" + list + "]")), // gepunktete Linie zur Kennzeichnung des Tiefstwert
dashStyle: 'dot',
width: 1,
color: {
linearGradient: [0, 0, 900, 0],
stops: [ // fade in, Linie fängt dunkler an und wird dann heller
[0, 'rgba(255, 255, 255, 0.2)'],
[1, 'rgba(255, 255, 255, 0.3)']
]
},
label: {
text: lowest, // Tiefstwert als Referenzwert auf der Linken Seite, oben ermittelt.
x: 11,
y: 13

}
}, {
value: 2480, // Warnlinie "TANK FAST ALLE" solle aus Config kommen. "this.config.alarm"? Wird nur angezeigt, wenn der Chart das räumlich zulässt, also zwischen yAxis min/max
dashStyle: 'solid',
width: this.config.warnOn,
color: {
linearGradient: [0, 0, 900, 0],
stops: [
[0, 'rgba(200, 0, 0, 0.2)'],
[1, 'rgba(200, 0, 0, 0.6)']
]
}
}]
}, // eigentliches CHART
series: [{
data: JSON.parse("[" + list + "]"),
step: 'center',
lineWidth: 2,
color: {
linearGradient: [0, 0, 900, 0], // 0,0,900,900 wäre 45° nach oben rechts
stops: [ // fade in, Linie fängt dunkler an und wird dann heller
[0, 'rgba(255, 255, 255, 0.4)'],
[1, 'rgba(255, 255, 255, 1)']
]
}
}]
});
}
/* // Das Label geht zur Zeit nach 7 Tagen. Das macht hier wenig Sinn.
getChartLabel: function() {
var date = new Date();
var today = date.getDay();
var hour = date.getHours();
var yesterday;
var lastday;
if (today == 0) {
yesterday = 6;
}
else {
yesterday = today - 1;
}
var days = new Array("Sonntag", "Montag", "Dienstag", "Mittwoch",
"Donnerstag", "Freitag", "Samstag");
if (hour >= 0 && hour < 12) {
lastday = yesterday;
}
if (hour >= 12 && hour <= 23) {
lastday = today;
}
if (lastday == 0) {
this.chartLabel= "<span class=\"day7\">"+days[1]+"</span><span class=\"day6\">"+days[2]+"</span><span class=\"day5\">"+days[3]+"</span><span class=\"day4\">"+days[4]+"</span><span class=\"day3\">"+days[5]+"</span><span class=\"day2\">"+days[6]+"</span><span class=\"day1\">"+days[0]+"</span>";
}
if (lastday == 1) {
this.chartLabel= "<span class=\"day7\">"+days[2]+"</span><span class=\"day6\">"+days[3]+"</span><span class=\"day5\">"+days[4]+"</span><span class=\"day4\">"+days[5]+"</span><span class=\"day3\">"+days[6]+"</span><span class=\"day2\">"+days[0]+"</span><span class=\"day1\">"+days[1]+"</span>";
}
if (lastday == 2) {
this.chartLabel= "<span class=\"day7\">"+days[3]+"</span><span class=\"day6\">"+days[4]+"</span><span class=\"day5\">"+days[5]+"</span><span class=\"day4\">"+days[6]+"</span><span class=\"day3\">"+days[0]+"</span><span class=\"day2\">"+days[1]+"</span><span class=\"day1\">"+days[2]+"</span>";
}
if (lastday == 3) {
this.chartLabel= "<span class=\"day7\">"+days[4]+"</span><span class=\"day6\">"+days[5]+"</span><span class=\"day5\">"+days[6]+"</span><span class=\"day4\">"+days[0]+"</span><span class=\"day3\">"+days[1]+"</span><span class=\"day2\">"+days[2]+"</span><span class=\"day1\">"+days[3]+"</span>";
}
if (lastday == 4) {
this.chartLabel= "<span class=\"day7\">"+days[5]+"</span><span class=\"day6\">"+days[6]+"</span><span class=\"day5\">"+days[0]+"</span><span class=\"day4\">"+days[1]+"</span><span class=\"day3\">"+days[2]+"</span><span class=\"day2\">"+days[3]+"</span><span class=\"day1\">"+days[4]+"</span>";
}
if (lastday == 5) {
this.chartLabel= "<span class=\"day7\">"+days[6]+"</span><span class=\"day6\">"+days[0]+"</span><span class=\"day5\">"+days[1]+"</span><span class=\"day4\">"+days[2]+"</span><span class=\"day3\">"+days[3]+"</span><span class=\"day2\">"+days[4]+"</span><span class=\"day1\">"+days[5]+"</span>";
}
if (lastday == 6) {
this.chartLabel= "<span class=\"day7\">"+days[0]+"</span><span class=\"day6\">"+days[1]+"</span><span class=\"day5\">"+days[2]+"</span><span class=\"day4\">"+days[3]+"</span><span class=\"day3\">"+days[4]+"</span><span class=\"day2\">"+days[5]+"</span><span class=\"day1\">"+days[6]+"</span>";
}
}
*/

});
64 changes: 63 additions & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
@@ -1 +1,63 @@
# MMM-Oiltank
# MMM-Oiltank
This an extension for the [MagicMirror](https://github.com/MichMich/MagicMirror). It is a product of [this thread](https://forum.magicmirror.builders/topic/6486/show-integer-logs-from-python-script-as-diagram-in-mm/). It is intended to be used with a JSON that is updated daily to report on the tank volume.
## Installation
Navigate into your MagicMirror's `modules` folder and execute `git clone https://github.com/TTigges/MMM-FullsizeCover`.
## Dependencies
This module reads a JSON with the tank volume.
````javascript
[{"Date":"2018-02-04","Volumen":2500},{"Date":"2018-02-04","Volumen":2490}]
````
The module catches the value of the key "Volumen". (To Do: Key can be set in the config.)
## Using the module
Add the module to the modules array in the `config/config.js` file:
````javascript
modules: [
{
module: 'MMM-Oiltank',
config: {
file: "http://192.168.0.123/yourfile.json" // only works with http: at the moment, doesn't work with localhost
}
}

]
````
## Configuration options

The following properties can be configured:

| Option | Description
| ---------------------------- | -----------
| `file` | **Example:** `http://192.168.0.123/yourfile.json` <br><br> **Note:** At the moment this only works with http request. For local files, use the commented lines 37 - 39 in the node_helper.js
| `warnVolume` | Shows a red line indicating the set amount of liters as integer. <br><br> **Example:** `500` – will show the line at 500 liters<br> **Default value:** `0` – the line will not be visible when set to 0.
| `showDays` | Defines the timeframe for the chart. <br><br> **Default:** `30` <br><br> **Note:** When the list has less results, it will only show these.
| `scope` | Defines the scale of the volume steps (together with the size of the steps themselves) and how much below and above the min and max volume is shown. <br><br> **Default:** `25`

## Developer Notes
This module is still work in progress.
## To Do
- Label, for example: Dates from the JSON
- `prediction: true/false` – showing a prediction of when the volume hits the warning line
- oil tank icon for the volume
- show the max. tank capacity?
- The warning line should only show when it's within the scope
- check different width for the chart
- detect local files, request vs. fs

The MIT License (MIT)
=====================

Copyright © 2018 TTigges

Permission is hereby granted, free of charge, to any person
obtaining a copy of this software and associated documentation
files (the “Software”), to deal in the Software without
restriction, including without limitation the rights to use,
copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the
Software is furnished to do so, subject to the following
conditions:

The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.

**The software is provided “as is”, without warranty of any kind, express or implied, including but not limited to the warranties of merchantability, fitness for a particular purpose and noninfringement. In no event shall the authors or copyright holders be liable for any claim, damages or other liability, whether in an action of contract, tort or otherwise, arising from, out of or in connection with the software or the use or other dealings in the software.**
Loading

0 comments on commit 0eae4c5

Please sign in to comment.