Offline
@veldje I have solved this by including a “birthday” calendar from google and giving at an own symbol.
For that I have created an own calendar within google, transferred all birthdays to that (didn’t take long) and included that calendar into the config.
@OneAsianTortoise I wouldn’t do much about it as well. As @sdetweil said, they are only warnings. Your mirror will run with these warnings.
What I think is unproblematic is running:
npm audit fix
These are automatic fixes on the vulnerabilities that are obvious for the system.
I haven’t heard of anyone breaking their software doing this.
I can’t PR to your new repo, so here’s the code from MMM-BluetoothDevices.js:
/*jshint esversion: 6 */
//'use strict';
Module.register('MMM-BluetoothDevices', {
// Default module config.
defaults: {
name: 'raspberrypi',
mode: 'le',
hci: 'hci0',
interfaceName: 'org.bluez.Adapter1',
services: [
{ type: 'CurrentTimeService' },
],
devices: [],
layout: {
title: {
position: 'bottom',
key: 'name',
},
data: {
position: 'bottom',
fields: [
{ key: 'mode', text: 'mode' },
],
},
},
hideAfter: 10 * 60,
},
getStyles() {
return ['MMM-BluetoothDevices.css'];
},
// Override dom generator.
getDom() {
const wrapper = document.createElement('div');
wrapper.classList.add('toothbrushes');
if (this.loading) {
wrapper.innerHTML = 'Loading...';
wrapper.className = 'light small';
return wrapper;
}
const table = document.createElement('table');
const row = document.createElement('tr');
for (const deviceKey in this.devices) {
const deviceType = this.devices[deviceKey].device.type;
if (deviceType === 'OralBToothbrush') {
row.appendChild(this.renderToothbrush(deviceKey));
} else {
throw new Error(`Unknown device type: ${deviceType}`);
}
}
table.appendChild(row);
wrapper.appendChild(table);
return wrapper;
},
renderToothbrush(deviceKey) {
const device = this.devices[deviceKey];
const deviceTd = document.createElement('td');
deviceTd.classList.add('toothbrush');
deviceTd.style.textAlign = "center";
const deviceCircle = document.createElement('div');
deviceCircle.classList.add('toothbrush-circle-container');
deviceCircle.classList.add(`toothbrush-circle-${device.data.state}`);
const deviceCircleText = document.createElement('div');
deviceCircleText.classList.add('toothbrush-circle-text');
const deviceCircleSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
deviceCircleSvg.classList.add('toothbrush-circle-ring');
const deviceCircleSvgCircle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
deviceCircleSvgCircle.classList.add('toothbrush-circle');
deviceCircleSvgCircle.setAttribute('stroke-width', 15);
deviceCircleSvgCircle.setAttribute('fill', 'transparent');
deviceCircleSvgCircle.setAttribute('r', 52);
deviceCircleSvgCircle.setAttribute('cx', 60);
deviceCircleSvgCircle.setAttribute('cy', 60);
deviceCircleSvg.append(deviceCircleSvgCircle);
deviceCircle.append(deviceCircleSvg);
deviceCircle.append(deviceCircleText);
//const time = device.data.time > 120 ? 120 : device.data.time;
const time = device.data.time;
// initial start
this.updateCircle(deviceCircleSvgCircle, deviceCircleText, time);
if (device.data.state === 'running') {
deviceTd.style.display = 'block';
deviceCircleText.classList.add('bright');
deviceCircleSvgCircle.setAttribute('stroke', '#0080fe');
this.counters[deviceKey] = {
time,
interval: setInterval(() => {
this.counters[deviceKey].time += 1;
this.updateCircle(
deviceCircleSvgCircle,
deviceCircleText,
this.counters[deviceKey].time
);
}, 1000),
};
} else {
deviceCircleText.classList.remove("bright");
deviceCircleSvgCircle.setAttribute('stroke', '#aaa');
setInterval(() => {
deviceTd.style.display = "none";
}, this.config.hideAfter * 1000);
}
const deviceLabel = document.createElement('div');
deviceLabel.classList.add('title');
deviceLabel.classList.add('small');
deviceLabel.innerText = device.device[this.config.layout.title.key];
const dataContainer = document.createElement('div');
dataContainer.classList.add('small');
dataContainer.classList.add('light');
for (const key in this.config.layout.data.fields) {
const data = this.config.layout.data.fields[key];
const field = document.createElement('div');
field.innerText = `${data.key}: ${device.data[data.key]}`;
dataContainer.appendChild(field);
}
if (this.config.layout.title.position === 'top') {
deviceTd.appendChild(deviceLabel);
}
if (this.config.layout.data.position === 'top') {
deviceTd.appendChild(dataContainer);
}
deviceTd.appendChild(deviceCircle);
if (this.config.layout.title.position === 'bottom') {
deviceTd.appendChild(deviceLabel);
}
if (this.config.layout.data.position === 'bottom') {
deviceTd.appendChild(dataContainer);
}
return deviceTd;
},
updateCircle(deviceCircleSvgCircle, deviceCircleText, time) {
var secs = time % 60;
deviceCircleText.innerText = Math.floor(time / 60) + ":" + (secs < 10 ? "0" + secs : secs);
const radius = parseInt(deviceCircleSvgCircle.getAttribute('r'));
const circumference = radius * 2 * Math.PI;
if (time > 120) { time = 120; }
const percent = (100 / 120) * time;
const offset = circumference - percent / 100 * circumference;
deviceCircleSvgCircle.style.strokeDasharray = `${circumference} ${circumference}`;
deviceCircleSvgCircle.style.strokeDashoffset = offset;
},
start() {
Log.info(`Starting module: ${this.name}`);
this.devices = {};
this.counters = {};
this.loading = true;
this.sendSocketNotification('FETCH_TOOTHBRUSHES', this.config);
},
socketNotificationReceived(notification, payload) {
if (notification === 'FETCH_TOOTHBRUSHES_RESULTS') {
Log.info('MMM-Toothbrush: Got toothbrush results');
this.devices = payload;
for (const counterKey in this.counters) {
const counter = this.counters[counterKey];
clearInterval(counter.interval);
}
if (this.loading) {
this.loading = false;
this.updateDom(1000);
} else {
this.updateDom(0);
}
}
},
});
it’s also in the develop branch of my module
@simphi yeah you can include these items in custom.css and play with them
.dimmed {
color: #ccc;
}
.normal {
color: #eee;
}
.bright {
color: #fff;
}
Color: #fff is white. You could also write it as #ffffff.
#eee or #eeeeee is a very light grey.
@boybay7 said in Changing the colour of all text on screen:
Also I’m still confused with how to update the magicmirror, I think you need to use git stash? I don’t know
You only need git stash when you have made changes to the source code that you want to keep while updating. So don’t worry about that for now.
The usual update procedure is
git pull
npm install
inside the MagicMirror folder.
As a newbie you might want to check out @sdetweil 's scripts. Lots of automation in there.
https://github.com/sdetweil/MagicMirror_scripts
@BKeyport There is very likely an npm module for that.
Like this one:
https://www.npmjs.com/package/find-process
@hansolo MMM-forecast-io has sunset and sunrise time integrated and both take data from the same source.
So yes, it’s possible. The data is there. But I’m out. I’m unfortunately currently sitting on other projects.
@boybay7 said in Changing the colour of all text on screen:
Also I couldn’t remove the fade off the weather forecast for some reason?
For that you need to have a look at the module docs
https://docs.magicmirror.builders/modules/weather.html#weather-forecast-options
The weather module is a “stock module”, the docs for all stock modules are placed in the official MagicMirror docs. Any 3rd party modules have their own docs on the respective github site.
At the above link you find the fade: option. Set that to false in your config.js
Or set the fadepoint to a higher value: fadePoint: 0.5
This seems to be a good solution as well.
https://www.npmjs.com/package/ps-node
@code999 it’s in the MMM-forecast-io.js file.
You can either try to comment out (//) or delete line 397
forecastBar.appendChild(bar);
(only the bar)
or line 402
forecastBarWrapper.appendChild(forecastBar);
(with temps)
But why are you trying to delete it? It really doesn’t make sense to me and will look kind of ugly I guess.
@george Sorry George but that’s not the appropriate way to do it.
Doing that you will mess things up as soon as you want to update the module.
Every css-thing you want to change, you transfer to custom.css and make your changes there.
custom.css always overwrites entries in the module css files, so it takes precedence.
Also I think the calendar module is meant here and not MMM-MyCalendar.
@Sceetch congrats to the vaccination :-).
Also, move into the modules/default/calendar folder, look into the calendar.css for any time entries. You will find:
.calendar .time {
padding-left: 30px;
text-align: right;
vertical-align: top;
}
Now edit custom.css and add
.calendar .time {
}
Every entry you make here adds to the above from calendar.css.
Try to play with this, e.g. by putting in font-wight: bold
@CreepinJesus said in Help with updateDom():
I think (may be wrong) the config is read only inside the module,
that’s not true. The config values can be manipulated.
@Fozi The odd thing is that I didn’t even get the module installed properly. However, just tried again and it seems to work now. Maybe because of MM v 2.10.0. I don’t know…
For anyone interested:
I have played around with this module quite intensively, implemented the chartjs library and did a few other tweaks and it looks like this now on my mirror.
Most important changes:
Anyone interested can try out my fork
https://github.com/lavolp3/MMM-forecast-io
If you install it, don’t forget to do a npm install in the module folder after cloning the module. The Readme has not yet been brought up to date.
@Lordy
if you mean free RAM, try this out in your custom.css
.MMM-SystemStats tr {
display: none;
}
.MMM-SystemStats tr:nth-child(3n+0) {
display: table-row;
}
For free disk space it would be
.MMM-SystemStats tr {
display: none;
}
.MMM-SystemStats tr:nth-child(5n+0) {
display: table-row;
}
No guarantees!! I haven’t tried it!!
@Lordy try tr:nth-child(6n+1)
You have 5 children in the table element, which are the 5 table rows.
nth-child counts every “nth” children from 0.
So if you have nth-children(3n+0) it takes the 3rd 6th 9th. Only the 3rd is there so voila.
nth-children(6n+1) SHOULD count the 1st, 7th, 13th children, of these only the 1st is available. So, hopefully again, voila.
getDom: function() {
var self = this;
var wrapper = document.createElement('table');
var sysData = {
cpuTemp: {
text: 'CPU_TEMP',
icon: 'fa-thermometer',
},
sysLoad: {
text: 'SYS_LOAD',
icon: 'fa-tachometer',
},
freeMem: {
text: 'RAM_FREE',
icon: 'fa-microchip',
},
upTime: {
text: 'UPTIME',
icon: 'fa-clock-o',
},
freeSpace: {
text: 'DISK_FREE',
icon: 'fa-hdd-o',
},
};
For all you dutch and german people out there, I have created a module that is inspired by the app Buienalarm. It is based on the modules MMM-rainfc and MMM-rain-forecast. Thanks to @cirdan and @spoturdeal for their groundwork.
I have created this since I wanted the rain forecast to be more prominent on the mirror.
This module implements chart.js for a nicer graph and
[card:lavolp3/MMM-Buienalarm]
Any ideas or corrections welcome and appreciated!
Initial release
This is a Magic Mirror module for the kids!!
Show them what to wear outside!
It uses broadcasted weather data to show a boy wearing suitable clothes for going outside.
[card:lavolp3/MMM-WeatherBoy]
(image upload seems still broken, please check github page for screenshots)
Funny idea @Frühstück.
Have only found it just know from the new comments.
Do you know my module MMM-WeatherBoy?
Maybe both of these can profit from each other.
Will have a closer look at yours soon!
@MajorC Then you can just wait.
I guess I’ll push the climacell change to the master branch later since there are already some modules out there that use Buienradar.