Offline
For posterity, I modified the if statement as follows, to remove the row items that have a 0 for wattage:
if (channels[i].children[n].textContent != 0) {
element.innterHTML = channels[i].children[n].textContent;
row.appendChild(element);
table.appendChild(row);
}
else {
table.removeChild(row);
}
I am trying to begin the next iteration of my module.
I have the real-time energy usage, and monthly power usage being displayed in a list in the top left and right corners of my mirror.
I am hoping to do something similar to the following:
Since this monthly energy usage module is in the top right of my mirror, how would I extract a value or variable from that module and then display it into the center of the mirror.
So basically, I have a long list of power usages being displayed on my mirror, but I would like to display a sentence or two about that data on another part of my mirror - extracting a value from the module and displaying it in the center of the mirror. Can this be done using the same .js code in the module, and just modifying the .css?
I am trying to begin the next iteration of my module.
I have the real-time energy usage, and monthly power usage being displayed in a list in the top left and right corners of my mirror.
I am hoping to do something similar to the following:
Since this monthly energy usage module is in the top right of my mirror, how would I extract a value or variable from that module and then display it into the center of the mirror.
So basically, I have a long list of power usages being displayed on my mirror, but I would like to display a sentence or two about that data on another part of my mirror - extracting a value from the module and displaying it in the center of the mirror. Can this be done using the same .js code in the module, and just modifying the .css?
@cowboysdude @strawberry-3-141
I’m having trouble getting my icon to load. My getDom looks like the following:
getDom: function() {
var wrapper = document.createElement("div");
if (!this.loaded) {
wrapper.innerHTML = this.translate("Loading...");
wrapper.className = "dimmed light small";
return wrapper;
}
wrapper.className = "datafeed";
var myLogo = document.createElement("span");
var myIcon = document.createElement("img");
myLogo.classList.add("myLogo");
myIcon.src = this.file("my_logo.png");
myLogo.appendChild(myIcon);
wrapper.appendChild(myLogo);
wrapper.innerHTML = "Today, your sum is " + this.sum ;
return wrapper;
},
@cowboysdude Thanks for the example!
Is there a specific styling that needs to be used for the images? For example, I would need the image to have the typical white/greyish hue to it.
Does anyone know of the best documentation for adding an image/graphic into a mirror module?
For my example here, Mirror Datafeed and Sum Module, I am summing over the values in a column in a .csv and then outputting it.
I would like to show an image based on what that value is. As a crude example, if the sum is greater than 50, output a frown. If it is less than 50, show a smiling face. What’s the best documentation for putting in graphics that will work on the mirror?
@morozgrafix I think I can work around this by changing the SQL query (that generates my .csv) to include just one column. Then I can implement it as a new module, placed above the current one.
@morozgrafix Everything is working very well so far!
I am updating my “Sum” daily, but I would like to be able to show the previous day’s sum. Could I store the value of the sum at 11:59pm, each evening, and then display that value in addition to the current day’s sum?
Additionally, how could I modify the line of code:
this.sum = lines.reduce((a, b) => a + b, 0);
to allow for me to sum across multiple columns? So, if my .csv has 3 columns, I’d like the sum total of them.
@morozgrafix This looks awesome! I will try to work with this over the next couple days and will let you know if I have any other questions! Thanks!
@morozgrafix Thanks for your outline. It is very, very helpful and appreciated. So I tried to take what you suggested to turn it into my code, and put it onto GitHub.
I created a GitHub repository that contains my .css, .csv, and datafeed.js. My areas of confusion (which you’ll probably see in the code) are around how I called in the remoteFile in my getDom. I am not sure if I did that correctly. https://github.com/brennn1/Magic-Mirror-Datafeed-Module
My .csv is coming in the format which you’ll see on the Github - so each data point is separated by a new line. So I changed where you had the line.split(",") to line.split("\n").
Do you see anything obvious that will cause me problems? I will go ahead and see what errors I get when I load it onto my mirror.
@morozgrafix I am referring back to your jsfiddle example: jsfiddle example, and you created an object called csvData which you refer to in var data = ...
I was wondering how I would create a similar object, except with the file that I have in my directory. I couldn’t seem to find an HTML DOM function that would allow me to load the .csv file. I looked at the examples for the Compliments module, and they were in json. So, I saw that I might be able to use Papa Parse to convert the .csv to json and then follow the similar route as the Compliments.
My d3 approach loads the data from my csv onto my mirror, but the .css doesn’t seem to help it. It doesn’t appear in a table, and is very large (displaying in the upper left part of the mirror) even when I specified it to load in the middle.
For some context, my .csv data table contains two columns of time-series data for which I want to sum together. And then I just want to output a sentence like, “Your sum is XXX.”
Thanks again for the clarifications. I’m slowly wrapping my head around the interaction of the HTML and Javascript, and I think I get confused when I see code split into HTML and Javascript, when the modules are written with it all together in the HTML DOM format.
@morozgrafix That’s fine with me! Thanks!
