MMM-Assistant
MMM-Assistant copied to clipboard
Consider removing the materialdesign CDN image dependencies
There is no good reason to keep the module having to download the material design icons, every time they are needed. It also prevent the module to display properly if:
- You have firewalled / adblocker not allowing the cdn site
- You do not have an internet connection
Here is the line that does the loading:
loadCSS: function() {
var css = [{
id: 'materialDesignIcons',
href: 'https://cdn.materialdesignicons.com/2.0.46/css/materialdesignicons.min.css',
}]
So to accomplish this we need to download the images and keep them in ./images/
(?).
The icons in question are specified here (and possible in other places).
getDom : function() {
var wrapper = document.createElement("div")
wrapper.className = "ASSTNT"
var iconDom = document.createElement("div")
iconDom.className = "mdi status " + this.status + " "
switch(this.status) {
case 'INITIALIZED':
iconDom.className += "mdi-microphone-outline"
break
case 'HOTWORD_STARTED':
iconDom.className += "mdi-microphone"
break
case 'HOTWORD_DETECTED':
iconDom.className += "mdi-microphone"
break
case 'ASSISTANT_STARTED':
iconDom.className += "mdi-google-assistant"
break
case 'ASSISTANT_SPEAKING':
iconDom.className += "mdi-google-assistant"
break
case 'COMMAND_STARTED':
iconDom.className += "mdi-apple-keyboard-command"
break
case 'COMMAND_LISTENED':
iconDom.className += "mdi-apple-keyboard-command"
break
case 'SPEAK_STARTED':
iconDom.className += "mdi-message-processing"
break
case 'SPEAK_ENDED':
iconDom.className += "mdi-microphone"
break
}
Two things that need to be done:
- Download and keep a local copy of the (expanded) but edited css file.
- Download the icons themselves.
Some content from file is:
/* MaterialDesignIcons.com */
@font-face {
font-family: "Material Design Icons";
src: url("../fonts/materialdesignicons-webfont.eot?v=2.0.46");
src: url("../fonts/materialdesignicons-webfont.eot?#iefix&v=2.0.46") format("embedded-opentype"),
url("../fonts/materialdesignicons-webfont.woff2?v=2.0.46") format("woff2"),
url("../fonts/materialdesignicons-webfont.woff?v=2.0.46") format("woff"),
url("../fonts/materialdesignicons-webfont.ttf?v=2.0.46") format("truetype"),
url("../fonts/materialdesignicons-webfont.svg?v=2.0.46#materialdesigniconsregular") format("svg");
font-weight: normal;
font-style: normal;
}
.mdi:before,
.mdi-set {
display: inline-block;
font: normal normal normal 24px/1 "Material Design Icons";
font-size: inherit;
text-rendering: auto;
line-height: inherit;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.mdi-access-point:before {
content: "\F002";
}
...
.mdi-microphone:before {
content: "\F36C";
}
.mdi-microphone-off:before {
content: "\F36D";
}
.mdi-microphone-outline:before {
content: "\F36E";
}