MMM-Assistant icon indicating copy to clipboard operation
MMM-Assistant copied to clipboard

Consider removing the materialdesign CDN image dependencies

Open E3V3A opened this issue 6 years ago • 1 comments

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
}

E3V3A avatar Mar 28 '18 13:03 E3V3A

Two things that need to be done:

  1. Download and keep a local copy of the (expanded) but edited css file.
  2. 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";
}

E3V3A avatar Apr 11 '18 02:04 E3V3A