Wow, this is a nice MM!
I have created a bathroom MM (https://forum.magicmirror.builders/topic/18406/bathroom-mirror/2?_=1705489145468) but something like this for the hallway or kitchen would be awesome. Thanks for the ideas!
Regards,
Stephan
Wow, this is a nice MM!
I have created a bathroom MM (https://forum.magicmirror.builders/topic/18406/bathroom-mirror/2?_=1705489145468) but something like this for the hallway or kitchen would be awesome. Thanks for the ideas!
Regards,
Stephan
@sdetweil I found it!
In custom.css I place the following section:
iframe{
border:0 ;
/*transform: scale(0.5) ; */
/*margin-bottom: 200px;*/
}
(source: https://github.com/AgP42/MMM-iFrame-Ping/blob/master/MMM-iFrame-Ping.css)
Thanks for your support!
<iframe src="https://server.vdplas.net:8999/material/?player=dc:a6:32:18:b6:fd&layout=desktop&action=expandNowPlaying/true&css=msk--np-only&js=msk--np-only&single=true&theme=Black" width="675" height="250" scrolling="no"></iframe>
iframe[Attributes Style] {
width: 675px;
height: 250px;
}
user agent stylesheet
iframe {
overflow-clip-margin: content-box !important;
overflow: clip !important;
border-width: 2px;
border-style: inset;
border-color: initial;
border-image: initial;
}
Here indeed I see a border. Still no clue where it comes from.
@sdetweil said in Remove I frame border:
@stephanvdplas if the border is INSIDE the frame, then u cannot change it. that is the point of frame. inline embedded frame of original content
There is certainly no border in the content. At least not what I see when using differen devices with this same URL
Also the border appears directly, whereas the content is loaded in 5 seconds
@stephanvdplas said in Remove I frame border:
@barnosch said in Remove I frame border:
should ne something like this in your
/css/custom.css file.MMM-iFrame { //exact name of the module border: none; //or border: 0px; }
I tried your suggestion, but still a border is shown. Is there any other option?
MMM-Iframe:
{
module: 'MMM-iFrame',
header: 'Speelt nu',
position: 'bottom_left', // This can be any of the regions.
config: {
// See 'Configuration options' for more information.
// url: ["http://server.vdplas.net:9000/material/?player=dc:a6:32:18:b6:fd&layout=desktop&action=expandNowPlaying/true&css=msk--np-only&js=msk--np-only&single=true&theme=Black"], // as many URLs you want or you can just ["ENTER IN URL"] if single URL.
url: ["http://server.vdplas.net:9000/material/?player=dc:a6:32:18:b6:fd&layout=desktop&action=expandNowPlaying/true&css=msk--np-only&js=msk--np-only&single=true&theme=Black"], // as many URLs you want or you can just ["ENTER IN URL"] if single URL.
updateInterval: 500 * 60 * 1000, // rotate URLs every 30 seconds
width: "700", // width of iframe
height: "260", // height of iframe
frameWidth: "100" // width of embedded iframe, height is beeing calculated by aspect ratio of iframe
}
},
@barnosch said in Remove I frame border:
should ne something like this in your
/css/custom.css file.MMM-iFrame { //exact name of the module border: none; //or border: 0px; }
I tried your suggestion, but still a border is shown. Is there any other option?
@sdetweil said in newsfeed ignoreOlderThan different per feed?:
@stephanvdplas please open an issue on the mm GitHub page
Done!
In the “newsfeed” module, one can set ignoreOldItems: true and ignoreOlderThan: 46060*1000 for 4 hours. But I’d like to have different ignoreOlderThan times per feed.
Suggestion: a parameter per feed ignoreOlderThanOverride that overrides the ignoreOlderThan “global parameter”.
/* MagicMirror² Config Sample
* By Michael Teeuw https://michaelteeuw.nl
* MIT Licensed.
*/
let config = {
address: "0.0.0.0",
port: 8080,
basePath: "/",
useHttps: false, // Support HTTPS or not, default "false" will use HTTP
httpsPrivateKey: "", // HTTPS private key path, only require when useHttps is true
httpsCertificate: "", // HTTPS Certificate path, only require when useHttps is true
language: "nl",
locale: "nl-NL",
logLevel: ["INFO", "LOG", "WARN", "ERROR"], // Add "DEBUG" for even more logging
timeFormat: 24,
units: "metric",
modules: [
{
module: "alert",
},
{
module: 'MMM-Remote-Control',
config: {
apiKey: '01***d4',
customCommand: {
monitorOnCommand: "sudo /usr/bin/vcgencmd display_power 1",
monitorOffCommand: "sudo /usr/bin/vcgencmd display_power 0"
},
showModuleApiMenu: false,
}
},
{
module: "newsfeed",
position: "bottom_bar",
config: {
feeds: [
{
title: "Nu.nl Algemeen",
url: "https://www.nu.nl/rss/Algemeen"
},
{
title: "RTV Oost",
url: "http://rss.rtvoost.nl/"
},
{
title: "Stentor Zwolle",
url: "https://www.destentor.nl/zwolle/rss.xml"
},
{
title: "Stadshagen Nieuws",
url: "https://www.stadshagennieuws.nl/feed"
},
{
title: "Christelijk Nieuws",
url: "https://christelijknieuws.nl/feed/"
},
],
showSourceTitle: true,
showPublishDate: true,
showDescription: true,
wrapDescription: false,
ignoreOldItems: true,
ignoreOlderThan: 4 * 60 * 60 * 1000,
broadcastNewsFeeds: true,
broadcastNewsUpdates: true,
hideLoading: true,
updateInterval: 20000,
animationSpeed: 1000,
}
},
{
module: "weather",
position: "top_right",
config: {
weatherProvider: "openweathermap",
type: "current",
location: "Zwolle",
locationID: "2743476", //ID from http://bulk.openweathermap.org/sample/city.list.json.gz; unzip the gz file and find your city
apiKey: "06***d7",
showPrecipitationAmount: true,
appendLocationNameToHeader: false,
roundTemp: true,
windUnits: "beaufort",
}
},
{
module: "weather",
position: "top_right",
header: "komende uren",
config: {
weatherProvider: "openweathermap",
type: "hourly",
weatherEndpoint: "/onecall",
lat: 52.5125,
lon: 6.09444,
apiKey: "06***d7",
maxEntries: 16,
showPrecipitationAmount: true,
colored: true,
appendLocationNameToHeader: false,
roundTemp: true,
}
},
{
module: "weather",
position: "top_right",
header: "komende dagen",
config: {
weatherProvider: "openweathermap",
type: "daily",
location: "Zwolle",
locationID: "2743476", //ID from http://bulk.openweathermap.org/sample/city.list.json.gz; unzip the gz file and find your city
apiKey: "06***d7",
maxNumberOfDays : 11,
showPrecipitationAmount: true,
colored: false,
appendLocationNameToHeader: false,
roundTemp: true,
}
},
{
module: "clock",
position: "top_left",
config: {
clockBold: false,
displayType: "digital",
showSunTimes: false,
lat: 52.5125,
long: 6.09444,
}
},
{
module: "calendar",
header: "Agenda",
position: "top_left",
config: {
fetchInterval: 60 * 60 * 1000,
maximumEntries: 18,
displaySymbol: true,
coloredSymbol: true,
calendars: [
{
maximumNumberOfDays: 31,
symbol: "calendar-check",
url: "https://calendar.google.com/calendar/ical/vdplas.net_***%40group.calendar.google.com/public/basic.ics",
color: "white",
},
{
maximumNumberOfDays: 31,
symbol: "toggle-off",
url: "https://calendar.google.com/calendar/ical/nl.dutch%23holiday%40group.v.calendar.google.com/public/basic.ics",
color: "green",
},
{
maximumNumberOfDays: 3,
symbol: "cake-candles",
url: "https://calendar.google.com/calendar/ical/***%40group.calendar.google.com/public/basic.ics",
color: "#5e0817",
},
]
}
},
{
module: 'MMM-JsonTable',
position: 'bottom_right',
header: 'Aanwezig',
config: {
url: 'https://server.vdplas.net:8083/thuis.json', // Required
arrayName: 'items', // Optional
tryFormatDate: true,
}
},
{
module: 'MMM-iFrame',
header: 'Speelt nu',
position: 'bottom_left', // This can be any of the regions.
config: {
// See 'Configuration options' for more information.
url: ["https://server.vdplas.net:8999/material/?player=dc:a6:32:18:b6:fd&layout=desktop&action=expandNowPlaying/true&css=msk--np-only&js=msk--np-only&single=true&theme=Black"], // as many URLs you want or you can just ["ENTER IN URL"] if single URL.
updateInterval: 500 * 60 * 1000, // rotate URLs every 30 seconds
width: "400", // width of iframe
height: "800", // height of iframe
frameWidth: "200" // width of embedded iframe, height is beeing calculated by aspect ratio of iframe
}
},
{
module: 'nstreinen',
position: 'bottom_right',
header: 'Treinen naar Deventer',
config: {
apiKey:'35***17',
fromStation: 'ZL',
toStation: 'DV',
maxEntries: 4
}
},
{
module: 'MMM-RSS-FEED',
position: 'top_center',
config: {
url: 'https://feed.dagelijkswoord.nl/rss2'
}
},
]
};
/*************** DO NOT EDIT THE LINE BELOW ***************/
if (typeof module !== "undefined") {module.exports = config;}
@zdenek said in Bathroom mirror:
@stephanvdplas said in Bathroom mirror:
Amazing. Just few questions:
- cau u please post the JSON, how you did it?
- how you make it on/off by switch?
- and the most important - do u have some pics/videos of the “wood” part? (mountinng, cabling…)
thanks
I will post the JSON in the next post together with screendumps.
The switching is done via MMM-remote setting modules on/off. The button triggers a scene in Domoticz which sets the modules on (and automatically off after 45 minutes) or off via commands like http://192.168.x.y:8080/remote?action=SHOW&module=module_5_weather and http://192.168.x.y:8080/remote?action=HIDE&module=module_5_weather.
I have no pics of vids of the creation and as such cannot show you how the monitor is hung up. All I know is that a painted-black wooden panel is set behind the mirror (with dual side mirror tape), where the screen fits in perfectly and something is clamping the screen to the glass.
The pi and the power wall outlets are in the cabinet above the mirror, so only 2 cables (power ande hdmi) are drawn from the screen to that cabinet.