MagicMirror text animation demo.
Animating SVG with CSS.
Idea is build complete module, start animation once on startup and when the monitor turn on, but all other modules must be suspended till the animation end .
I will appreciate any thoughts about how to achieve this.
@Nymeia Try to add this on beginning of node_helper
const NodeHelper = require('node_helper');
@Santanachia I have never tried. MagicMirrorOS
@avsfanwilly15 in module: “newsfeed”, missing bracket } .
Please correct syntax errors at or above this line: /home/pi/MagicMirror/config/config.js:103
{
You should hide appid: and private calendar urls: from config.js when uploading to forum
@Amoniak you’re welcome.
Just delete the second appendChild in MMM-Dnevni_citat.js
var table = document.createElement('tr');
table.classList.add("xsmall", "normal");
var title = document.createElement('tr');
title.innerHTML = this.textDataRecived.title;
table.appendChild(title);
var textData = document.createElement('tr');
textData.innerHTML = this.textDataRecived.textData;
table.appendChild(textData);
table.appendChild(title); // delete this one
wrapper.appendChild(table);
I added twice,my mistake.
@Amoniak
This should fix the problem with loading text for current Date.
node_helper:
const NodeHelper = require("node_helper");
const cheerio = require("cheerio");
const request = require('request');
var self;
const ur = 'https://wol.jw.org/wol/dt/r19/lp-c';
module.exports = NodeHelper.create({
start: function () {
self = this;
self.browser
console.log("Starting node_helper for: " + this.name);
},
getData: function () {
var self = this;
var url = self.setURL();
request({
url: url,
method: 'GET'
}, (error, response, body) => {
if (!error) {
var result = JSON.parse(body);
var contentData = result.items[0].content;
var $ = cheerio.load(contentData);
//console.log("cheerio: ", $.html());
var header = $('html>body>header>h2').text();
var title = $('p').first().text();
var textData = $('p').first().next().text().replace(/(\r\n|\n|\r)/gm, "");
var recivedData = {
header,
title,
textData
};
//console.log(recivedData);
self.sendSocketNotification('TEXT_RESULT', recivedData);
}
if (error) {
console.log(error);
}
});
},
setURL: function () {
console.log("ur old: ", ur);
var utc = new Date().toJSON().slice(0, 10).replace(/-/g, '/');
var newURL = ur.concat("/").concat(utc);
return newURL
},
socketNotificationReceived: function (notification, payload) {
var self = this;
if (notification === 'GET_TEXT_DATA') {
self.getData();
}
},
});
node_helper. But need to find different approach.
const NodeHelper = require("node_helper");
const cheerio = require("cheerio");
const request = require('request');
var self;
module.exports = NodeHelper.create({
start: function () {
self = this;
console.log("Starting node_helper for: " + this.name);
},
getData: function () {
const url = 'https://wol.jw.org/hr/wol/h/r19/lp-c';
request({
url: url,
method: 'GET'
}, (error, response, body) => {
if (error) {
return console.error("ERROR: ",error)
}
if (!error && response.statusCode == 200) {
var $ = cheerio.load(body);
//console.log($.html());
const data = $('div[class="tabContent"]').first();//
let header = $(data).find('h2').text();
let title = $(data).find('p').first().text();
let textData = $(data).find('div.pGroup>p').text();
//console.log(header,title,text);
var recivedData = {
header,
title,
textData
}
//console.log('recivedData: ',recivedData);
self.sendSocketNotification('TEXT_RESULT', recivedData);
}
});
},
socketNotificationReceived: function (notification, payload) {
var self = this;
if (notification === 'GET_TEXT_DATA') {
//console.log(notification,payload);
self.getData();
}
},
});
MMM-Dnevni_citat.js. getDom need some styling.
Module.register("MMM-Dnevni_citat", {
defaults: {
updateInterval: 10 * 60 * 1000, // minute ,seconds ,milliseconds
//retryDelay: 5000 // not needed for now
},
start: function () {
Log.info("Starting module: " + this.name);
requiresVersion: "2.1.0";
this.loaded = false;
this.scheduleUpdate();
},
scheduleUpdate: function () {
setInterval(() => {
this.getData();
}, this.config.updateInterval);
this.getData();
},
getData: function () {
console.log(' GET_TEXT_DATA ', this.config)
this.sendSocketNotification('GET_TEXT_DATA', this.config);
},
socketNotificationReceived: function (notification, payload) {
if (notification === "TEXT_RESULT") {
this.textDataRecived = payload;
console.log(this.textDataRecived);
this.loaded = true;
}
this.updateDom();
},
getDom: function () {
var wrapper = document.createElement("div");
if (!this.loaded) {
wrapper.innerHTML = "LOADING";
return wrapper;
}
if (this.loaded) {
var header = document.createElement("header");
header.innerHTML = this.textDataRecived.header;
wrapper.appendChild(header);
var table = document.createElement('tr');
table.classList.add("xsmall", "normal");
var title = document.createElement('tr');
title.innerHTML = this.textDataRecived.title;
table.appendChild(title);
var textData = document.createElement('tr');
textData.innerHTML = this.textDataRecived.textData;
table.appendChild(textData);
table.appendChild(title);
wrapper.appendChild(table);
}
return wrapper;
},
});
config.js
{ module: "MMM-Dnevni_citat",
position: "middle_center"
},
It’s not displayed as DOM elements are not created.
But there is another problem with cheerio, is not loading any data for Saturday and Sunday. This is because of website. Need to find another approach.
Now create MMM-Dnevni_citat.js
Inside you need first to registar module
Module.register("MMM-Dnevni_citat", {
defaults: {
updateInterval: 10 x 60 x 1000, // minute ,seconds ,milliseconds
//retryDelay: 5000 // not needed for now
},
Then first function will be start function
start: function () {
Log.info("Starting module: " + this.name);
requiresVersion: "2.1.0";
this.loaded = false;
this.scheduleUpdate();
},
with first function we are calling second ( scheduleUpdate) , how often will fetch data.
scheduleUpdate: function () {
setInterval(() => {
this.getData();
}, this.config.updateInterval);
this.getData();
},
Then we are calling getData function. Sending socketNotification to node_helper.
getData: function () {
this.sendSocketNotification(''GET_TEXT_DATA'', this.config);
},
Whe node_helper send back, next function will check if data is received and update DOM
socketNotificationReceived: function (notification, payload) {
if (notification === "TEXT_RESULT") {
this.textDataRecived = payload;
this.loaded = true;
},this.updateDom();
Now only is left to create DOM
getDom: function () {
var wrapper = document.createElement("div");
if (!this.loaded) {
wrapper.innerHTML = "LOADING";
return wrapper;
}
if (this.loaded) {
// here to add elements and styling
return wrapper;
}
},
This should be your node_helper.
const NodeHelper = require("node_helper");
const cheerio = require("cheerio");
const request = require('request');
module.exports = NodeHelper.create({
start: function () {
self = this;
console.log("Starting node_helper for: " + this.name);
},
getData: function () {
const url = 'https://wol.jw.org/hr/wol/h/r19/lp-c';
request({
url: url,
method: 'GET'
}, (error, response, body) => {
if (error) {
return console.error(error)
};
var $ = cheerio.load(body);
//console.log($.html());
const data = $('div[class="tabContent"]').first();
let header = $(data).find('h2').text();
let title = $(data).find('p').first().text();
let text = $(data).find('div.pGroup>p').text();
//console.log(header,title,text);
var recivedData = {
header,
title,
text
}
console.log(recivedData);
self.sendSocketNotification('TEXT_RESULT', recivedData);
});
},
socketNotificationReceived: function (notification, payload) {
if (notification === 'GET_TEXT_DATA') {
self.getData();
}
},
});
This should work
cd ~/MagicMirror/modules/MMM-NewPIR
git pull
npm run update
sudo reboot
Try to do something with this code. It will retrieve data from current day. Modifying that node_helper is not great idea.
const url= 'https://wol.jw.org/hr/wol/h/r19/lp-c';
request({
url: url,
method: 'GET'
}, (error, response, body) => {
if (error) {
return console.error(error)
};
var $ = cheerio.load(body);
//console.log($.html());
const data = $('div[class="tabContent"]').first();
let header = $(data).find('h2').text();
let title = $(data).find('p').first().text();
let text = $(data).find('div.pGroup>p').text();
//console.log(header,title,text);
var recivedData={
header,
title,
text
};
//console.log(recivedData);
});
It gonna be harder than u think as your text is changing daily. Just follow the the pattern.
Every day this is changed( https://wol.jw.org/hr/wol/h/r19/lp-c).
new day new text.
Text is in :
div id=“dailyText”
but if you ignore reference in text as (Mat. 16:24, 25; Ivan 15:20) located in a class it’s gonna be more easier.
And with cheerio u can complete this.
I have local calendar and is working fine.
Copy file.ics in modules folder and add to config
url: "webcal://localhost:8080/modules/file.ics"
or
url: "webcal://0.0.0.0:8080/modules/file.ics"
Should be like this .
url: "webcal://0.0.0.0:8080/file.ics"
Thx. Even one my module have problem with that. For now I will keep it as false.
@Bugsounet With new version of MagicMirror I decides to try this module.
Running rpi4 with HC-SR501 sensor.
Can you please explain me how exactly ecoMode working. I have some problems with that enabled true. I’m still trying to figure out exactly problem but no luck. I’m using MMM-Globe by Eunanibus and its not reloading (not showing ) after monitor is turn on and sometime even monitor doesn’t wont to turn on. Should I just keep this option false? With ecoMode false at the moment everything is working fine.
Anyway, great work and thank you for your contribution.