Offline
Very cool. Thanks for the excellent module, i’m integrating it into my mirror without much difficulty. The only problem I’ve run into thus far is with the example config which I had to modify slightly to get it working on my setup.
All I changed was the weather apikey but that didn’t work (blank screen, electron exits). I then changed the declaration of config from const to var and the example config works:
const config = {
to
var config = {
Otherwise, wow!
I have released the initial version of the MMM-YouTubeWebView MagicMirror module at https://gitlab.com/doctorfree/MMM-YouTubeWebView
This module allows embedding of YouTube videos, either singly or as a list of YouTube video IDs, or as a public YouTube playlist ID. The module uses the Electron webview tag rather than an iframe in an attempt to avert YouTube blocking the requested video for any of several reasons.
The webview tag is used to embed ‘guest’ content in the MagicMirror Electron app. The guest content is contained within the webview container. An embedded page within MagicMirror controls how the guest content is laid out and rendered.
Unlike an iframe, the webview runs in a separate process than MagicMirror. It doesn’t have the same permissions and all interactions between MagicMirror and embedded content will be asynchronous. This keeps MagicMirror safe from the embedded content.
Under the hood webview is implemented with Out-of-Process iframes (OOPIFs).
The webview tag is essentially a custom element using shadow DOM to wrap an
iframe element inside it. So the behavior of webview is very similar to a
cross-domain iframe. As such, it can be used to safely avoid cross-domain
policy restrictions that may prevent access to web content.
This module is based upon both the MMM-WebView module and the MMM-EmbedYoutube module with added functionality. There are some limitations to embedding with webview. These are detailed in the README. There may be a better way to do what I have done here. Possibly I should be using the Electron BrowserView instead. I would be open to suggestion. However, this release does accomplish what I set out to do - I can play my YouTube playlists and lists of YouTube videos without YouTube telling me the video is unavailable which is what I was seeing when using an iframe.
This is the initial release so I expect there will be significant changes in the near term. I’ve thoroughly tested it but expect issues will arise. The module is a work-in-progress and in active development.
Any feedback will be greatly appreciated.
@lavolp3 thanks! Although I continue to find CSS disagreeably confusing, adjusting the vertical position of module placement using CSS is the better solution. I’ve added:
.mmm-hue-lights .module-content {
margin-top: 150px;
}
to my custom.css and the modules no longer overlap.
I don’t think this module gets enough love. I use it to separate the overlap between placement of modules in my Magic Mirror. To me, this module is invaluable. My Hue lights were overlapping the Now Playing from Roon so I inserted a 150px space with the MMM-Space module and viola, no overlap.
Thanks to the author!
https://github.com/grabenhenrich/MMM-Space
Pretty cool. I was able to get something working fairly quickly but then it took me a while to modify the maybe Romanian phrases like “no snow” and “no rain” and others so there is still some language localization work to be done. Also, I am unable as yet to get my Google calendar ics to work. Is there any log anywhere to debug a “Loading” module? Anyway, nice work!
@Sean Thanks! I’ve created a sort of Coronavirus dashboard on my MagicMirror by utilizing the following modules:
Using these configuration entries:
{
module: "MMM-News",
position: "top_center",
config: {
apiKey : "xxxxxxxxxxxx",
type: "vertical",
touchable: false,
telegramBotOrderOpenDetail : true,
query : [
{
sources: "abc-news, bbc-news, cnn, google-news",
},
{
country: "us",
category: "health",
q : "coronavirus"
},
{
country: "uk",
category: "health",
q : "coronavirus"
}
],
}
},
{
module: "MMM-COVID-19",
header: "Coronavirus Daily Update",
position: "bottom_bar",
config: {
scanInterval: 1000 * 60 * 60 * 12,
rotateInterval: 1000 * 5,
detailProvince: true,
// pinned: ["Mainland China", null],
// pinned: ["Others", "Diamond Princess cruise ship"],
// pinned: ["US", "Santa Clara, CA"],
pinned: ["US"],
logProvinceCountry: false,
logOnce: true,
sortOrder: null,
}
},
{
module: "newsfeed",
position: "bottom_bar",
config: {
feeds: [
{
title: "Centers for Disease Control",
url: "https://tools.cdc.gov/api/v2/resources/media/403372.rss"
},
{
title: "Johns Hopkins Medicine",
url: "https://www.hopkinsmedicine.org/news/media/releases/?format=rss"
},
{
title: "World Health Organization",
url: "https://www.who.int/feeds/entity/csr/don/en/rss.xml"
},
],
showSourceTitle: true,
showPublishDate: true,
broadcastNewsFeeds: true,
broadcastNewsUpdates: true
}
},
{
module: 'MMM-iFrame',
position: 'fullscreen_below',
config: {
url: [
"https://gisanddata.maps.arcgis.com/apps/opsdashboard/index.html#/bda7594740fd40299423467b48e9ecf6",
"https://www.arcgis.com/apps/opsdashboard/index.html#/85320e2ea5424dfaaa75ae62e5c06e61",
"https://windy.app/coronavirus_map",
"https://experience.arcgis.com/experience/685d0ace521648f8a5beeeee1b9125cd",
],
updateInterval: 3 * 60 * 1000, // rotate URLs every 3 minutes
width: "1080", // width of iframe
height: "1920", // height of iframe
frameWidth: "1080"
}
},
{
module: 'MMM-pages',
config: {
modules:
[[ "MMM-News", "newsfeed", "MMM-COVID-19"], [ "MMM-iFrame"]],
fixed:
["alert", "updatenotification", "MMM-Remote-Control", "MMM-TelegramBot"],
rotationTime: 900000, // rotate page every 15 minutes = 15 * 60 * 1000
}
},
...@Mykle1 I added a few modules to Hello-Lucy following your easy instructions. Not sure if this is the best way to contact you with the info but just following through with the last step in your instructions which is to tell you the command and module name :)
Here is a diff of my sentences.json and yours:
80,81d79
< "HIDE IFRAME",
< "SHOW IFRAME",
86,87d83
< "HIDE LIGHTS",
< "SHOW LIGHTS",
92,93d87
< "HIDE NETWORK",
< "SHOW NETWORK",
108,109d101
< "HIDE SOLAR",
< "SHOW SOLAR",
116,117d107
< "HIDE STOCKS",
< "SHOW STOCKS",
And a diff of my checkCommands.json and yours:
7,21d6
< ["SHOW","IFRAME","","","true","MMM-iFrame",""],
< ["HIDE","IFRAME","","","false","MMM-iFrame",""],
<
< ["SHOW","LIGHTS","","","true","mmm-hue-lights",""],
< ["HIDE","LIGHTS","","","false","mmm-hue-lights",""],
<
< ["SHOW","NETWORK","","","true","MMM-NetworkScanner",""],
< ["HIDE","NETWORK","","","false","MMM-NetworkScanner",""],
<
< ["SHOW","SOLAR","","","true","MMM-Solar",""],
< ["HIDE","SOLAR","","","false","MMM-Solar",""],
<
< ["SHOW","STOCKS","","","true","MMM-stocks",""],
< ["HIDE","STOCKS","","","false","MMM-stocks",""],
<
124,125c109,110
< ["SHOW","STATS","","","true","MMM-SystemStats",""],
< ["HIDE","STATS","","","false","MMM-SystemStats",""],
---
> ["SHOW","STATS","","","true","MMM-PC-Stats",""],
> ["HIDE","STATS","","","false","MMM-PC-Stats",""],
145,148c130,133
< ["SHOW","WEATHER","","","true","currentweather",""],
< ["HIDE","WEATHER","","","false","currentweather",""],
< ["SHOW","WEATHER","","","true","weatherforecast",""],
< ["HIDE","WEATHER","","","false","weatherforecast",""]
---
> ["SHOW","WEATHER","","","true","MMM-BMW-DS",""],
> ["HIDE","WEATHER","","","false","MMM-BMW-DS",""],
> ["SHOW","WEATHER","","","true","MMM-NOAA3",""],
> ["HIDE","WEATHER","","","false","MMM-NOAA3",""]
As you can see, I added support for the following modules:
MMM-iFrame, mmm-hue-lights, MMM-NetworkScanner, MMM-Solar, and MMM-stocks
I also modified your existing support for the STATS and WEATHER commands, altering them to act upon different modules.
Thanks for the really cool module and easy instructions to extend!