Generate Hass and Hass.io specific iconset

.gitignore

@@ -1,6 +1,5 @@
 build
 build-translations/*
-hassio/build-es5/*
 node_modules/*
 npm-debug.log
 .DS_Store

gulp/tasks/gen-icons.js

@@ -7,36 +7,100 @@ const ICON_PACKAGE_PATH = path.resolve(__dirname, '../../node_modules/@mdi/svg/'
 const META_PATH = path.resolve(ICON_PACKAGE_PATH, 'meta.json');
 const ICON_PATH = path.resolve(ICON_PACKAGE_PATH, 'svg');
 const OUTPUT_DIR = path.resolve(__dirname, '../../build');
-const OUTPUT_PATH = path.resolve(OUTPUT_DIR, 'mdi.html');
+const MDI_OUTPUT_PATH = path.resolve(OUTPUT_DIR, 'mdi.html');
+const HASS_OUTPUT_PATH = path.resolve(OUTPUT_DIR, 'hass-icons.html');
 
-function iconPath(name) {
-  return path.resolve(ICON_PATH, `${name}.svg`);
-}
+const BUILT_IN_PANEL_ICONS = [
+  'settings', // Config
+  'home-assistant', // Hass.io
+  'poll-box', // History panel
+  'format-list-bulleted-type', // Logbook
+  'mailbox', // Mailbox
+  'account-location', // Map
+  'cart', // Shopping List
+];
 
+// Given an icon name, load the SVG file
 function loadIcon(name) {
-  return fs.readFileSync(iconPath(name), 'utf-8');
+  const iconPath = path.resolve(ICON_PATH, `${name}.svg`);
+  try {
+    return fs.readFileSync(iconPath, 'utf-8');
+  } catch (err) {
+    return null;
+  }
 }
 
+// Given an SVG file, convert it to an iron-iconset-svg definition
 function transformXMLtoPolymer(name, xml) {
   const start = xml.indexOf('><path') + 1;
   const end = xml.length - start - 6;
   const path = xml.substr(start, end);
   return `<g id="${name}">${path}</g>`;
 }
 
-function generateIconset(name, iconDefs) {
-  return `
-<ha-iconset-svg name="${name}" size="24"><svg><defs>
-${iconDefs}
-</defs></svg></ha-iconset-svg>
-  `;
+// Given an iconset name and icon names, generate a polymer iconset
+function generateIconset(name, iconNames) {
+  const iconDefs = iconNames.map(name => {
+    const iconDef = loadIcon(name);
+    if (!iconDef) {
+      throw new Error(`Unknown icon referenced: ${name}`);
+    }
+    return transformXMLtoPolymer(name, iconDef)
+  }).join('');
+  return `<ha-iconset-svg name="${name}" size="24"><svg><defs>${iconDefs}</defs></svg></ha-iconset-svg>`;
 }
 
-async function genIcons(es6) {
+// Generate the full MDI iconset
+function genMDIIcons() {
   const meta = JSON.parse(fs.readFileSync(path.resolve(ICON_PACKAGE_PATH, META_PATH), 'UTF-8'));
-  const iconDefs = meta.map(iconInfo => transformXMLtoPolymer(iconInfo.name, loadIcon(iconInfo.name))).join('');
+  const iconNames = meta.map(iconInfo => iconInfo.name);
   fs.existsSync(OUTPUT_DIR) || fs.mkdirSync(OUTPUT_DIR);
-  fs.writeFileSync(OUTPUT_PATH, generateIconset('mdi', iconDefs));
+  fs.writeFileSync(MDI_OUTPUT_PATH, generateIconset('mdi', iconNames));
+}
+
+// Helper function to map recursively over files in a folder and it's subfolders
+function mapFiles(startPath, filter, mapFunc) {
+  const files = fs.readdirSync(startPath);
+  for (let i = 0; i < files.length; i++) {
+    const filename = path.join(startPath, files[i]);
+    const stat = fs.lstatSync(filename);
+    if (stat.isDirectory()) {
+      mapFiles(filename, filter, mapFunc);
+    } else if (filename.indexOf(filter) >= 0) {
+      mapFunc(filename);
+    }
+  }
+}
+
+// Find all icons used by the project.
+function findIcons(path, iconsetName) {
+  const iconRegex = new RegExp(`${iconsetName}:[\\w-]+`, 'g');
+  const icons = new Set();
+  function processFile(filename) {
+    const content = fs.readFileSync(filename);
+    let match;
+    // eslint-disable-next-line
+    while (match = iconRegex.exec(content)) {
+      // strip off "hass:" and add to set
+      icons.add(match[0].substr(iconsetName.length + 1));
+    }
+  }
+  mapFiles(path, '.js', processFile);
+  return Array.from(icons);
 }
 
-gulp.task('gen-icons', () => genIcons());
+function genHassIcons() {
+  const iconNames = findIcons('./src', 'hass').concat(BUILT_IN_PANEL_ICONS);
+  fs.existsSync(OUTPUT_DIR) || fs.mkdirSync(OUTPUT_DIR);
+  fs.writeFileSync(HASS_OUTPUT_PATH, generateIconset('hass', iconNames));
+}
+
+gulp.task('gen-icons-mdi', () => genMDIIcons());
+gulp.task('gen-icons-hass', () => genHassIcons());
+gulp.task('gen-icons-hassio', () => genHassIcons());
+gulp.task('gen-icons', ['gen-icons-hass', 'gen-icons-mdi'], () => {});
+
+module.exports = {
+  findIcons,
+  generateIconset,
+};

gulp/tasks/gen-index-html.js

@@ -18,8 +18,8 @@ function generateIndex(es6) {
   const toReplace = [
     // Needs to look like a color during CSS minifiaction
     ['{{ theme_color }}', '#THEME'],
-    ['/frontend_latest/mdi.js',
-      `/frontend_latest/mdi-${md5(path.resolve(config.output, 'mdi.js'))}.js`],
+    ['/frontend_latest/hass-icons.js',
+      `/frontend_latest/hass-icons-${md5(path.resolve(config.output, 'hass-icons.js'))}.js`],
   ];
 
   if (!es6) {

hassio/.gitignore

@@ -0,0 +1,2 @@
+build-es5/*
+hassio-icons.html

hassio/index.html

@@ -30,6 +30,5 @@
     }
     </script>
     <script src="./app.js"></script>
-    <script src="/frontend_latest/mdi.js"></script>
   </body>
 </html>

hassio/script/build_hassio

@@ -9,5 +9,6 @@ cd "$(dirname "$0")/.."
 OUTPUT_DIR_ES5=build-es5
 
 rm -rf $OUTPUT_DIR_ES5
+node script/gen-icons.js
 NODE_ENV=production ../node_modules/.bin/webpack -p
 node script/gen-index-html.js

hassio/script/develop

@@ -9,4 +9,5 @@ OUTPUT_DIR_ES5=build-es5
 rm -rf $OUTPUT_DIR_ES5
 mkdir $OUTPUT_DIR_ES5
 node script/gen-index-html.js
+node script/gen-icons.js
 ../node_modules/.bin/webpack --watch --progress

hassio/script/gen-icons.js

@@ -0,0 +1,13 @@
+#!/usr/bin/env node
+const fs = require('fs');
+const {
+  findIcons,
+  generateIconset,
+} = require('../../gulp/tasks/gen-icons.js');
+
+function genHassIcons() {
+  const iconNames = findIcons('./src', 'hassio');
+  fs.writeFileSync('./hassio-icons.html', generateIconset('hassio', iconNames));
+}
+
+genHassIcons();

hassio/src/addon-store/hassio-addon-repository.js

@@ -51,7 +51,7 @@ class HassioAddonRepository extends NavigateMixin(PolymerElement) {
   }
 
   computeIcon(addon) {
-    return addon.installed && addon.installed !== addon.version ? 'mdi:arrow-up-bold-circle' : 'mdi:puzzle';
+    return addon.installed && addon.installed !== addon.version ? 'hassio:arrow-up-bold-circle' : 'hassio:puzzle';
   }
 
   computeIconTitle(addon) {

hassio/src/addon-store/hassio-repositories-editor.js

@@ -35,7 +35,7 @@ class HassioRepositoriesEditor extends PolymerElement {
       <template id="list" is="dom-repeat" items="[[repoList]]" as="repo" sort="sortRepos">
         <paper-card>
           <div class="card-content">
-            <hassio-card-content title="[[repo.name]]" description="[[repo.url]]" icon="mdi:github-circle"></hassio-card-content>
+            <hassio-card-content title="[[repo.name]]" description="[[repo.url]]" icon="hassio:github-circle"></hassio-card-content>
           </div>
           <div class="card-actions">
             <ha-call-api-button hass="[[hass]]" path="hassio/supervisor/options" data="[[computeRemoveRepoData(repoList, repo.url)]]" class="warning">Remove</ha-call-api-button>
@@ -44,7 +44,7 @@ class HassioRepositoriesEditor extends PolymerElement {
       </template>
       <paper-card>
         <div class="card-content add">
-          <iron-icon icon="mdi:github-circle"></iron-icon>
+          <iron-icon icon="hassio:github-circle"></iron-icon>
           <paper-input label="Add new repository by URL" value="{{repoUrl}}"></paper-input>
         </div>
         <div class="card-actions">

hassio/src/addon-view/hassio-addon-info.js

@@ -66,7 +66,7 @@ class HassioAddonInfo extends EventsMixin(PolymerElement) {
     <template is="dom-if" if="[[computeUpdateAvailable(addon)]]">
       <paper-card heading="Update available! 🎉">
         <div class="card-content">
-          <hassio-card-content title="[[addon.name]] [[addon.last_version]] is available" description="You are currently running version [[addon.version]]" icon="mdi:arrow-up-bold-circle" icon-class="update"></hassio-card-content>
+          <hassio-card-content title="[[addon.name]] [[addon.last_version]] is available" description="You are currently running version [[addon.version]]" icon="hassio:arrow-up-bold-circle" icon-class="update"></hassio-card-content>
         </div>
         <div class="card-actions">
           <ha-call-api-button hass="[[hass]]" path="hassio/addons/[[addonSlug]]/update">Update</ha-call-api-button>
@@ -84,10 +84,10 @@ class HassioAddonInfo extends EventsMixin(PolymerElement) {
             <template is="dom-if" if="[[addon.version]]">
               [[addon.version]]
               <template is="dom-if" if="[[isRunning]]">
-                <iron-icon title="Add-on is running" class="running" icon="mdi:circle"></iron-icon>
+                <iron-icon title="Add-on is running" class="running" icon="hassio:circle"></iron-icon>
               </template>
               <template is="dom-if" if="[[!isRunning]]">
-                <iron-icon title="Add-on is stopped" class="stopped" icon="mdi:circle"></iron-icon>
+                <iron-icon title="Add-on is stopped" class="stopped" icon="hassio:circle"></iron-icon>
               </template>
             </template>
             <template is="dom-if" if="[[!addon.version]]">

hassio/src/addon-view/hassio-addon-view.js

@@ -40,7 +40,7 @@ class HassioAddonView extends PolymerElement {
       <app-header fixed="" slot="header">
         <app-toolbar>
           <ha-menu-button narrow="[[narrow]]" show-menu="[[showMenu]]"></ha-menu-button>
-          <paper-icon-button icon="mdi:arrow-left" on-click="backTapped"></paper-icon-button>
+          <paper-icon-button icon="hassio:arrow-left" on-click="backTapped"></paper-icon-button>
           <div main-title="">Hass.io: add-on details</div>
         </app-toolbar>
       </app-header>

hassio/src/components/hassio-card-content.js

@@ -64,7 +64,7 @@ class HassioCardContent extends PolymerElement {
       datetime: String,
       icon: {
         type: String,
-        value: 'mdi:help-circle'
+        value: 'hass:help-circle'
       },
       iconTitle: String,
       iconClass: String,

hassio/src/dashboard/hassio-addons.js

@@ -46,7 +46,7 @@ class HassioAddons extends NavigateMixin(PolymerElement) {
   }
 
   computeIcon(addon) {
-    return addon.installed !== addon.version ? 'mdi:arrow-up-bold-circle' : 'mdi:puzzle';
+    return addon.installed !== addon.version ? 'hassio:arrow-up-bold-circle' : 'hassio:puzzle';
   }
 
   computeIconTitle(addon) {

hassio/src/dashboard/hassio-hass-update.js

@@ -27,7 +27,7 @@ class HassioHassUpdate extends PolymerElement {
           <div class="title">Update available! 🎉</div>
           <paper-card>
             <div class="card-content">
-              <hassio-card-content title="Home Assistant [[hassInfo.last_version]] is available" description="You are currently running version [[hassInfo.version]]" icon="mdi:home-assistant" icon-class="hassupdate"></hassio-card-content>
+              <hassio-card-content title="Home Assistant [[hassInfo.last_version]] is available" description="You are currently running version [[hassInfo.version]]" icon="hassio:home-assistant" icon-class="hassupdate"></hassio-card-content>
               <template is="dom-if" if="[[error]]">
                 <div class="error">Error: [[error]]</div>
               </template>

hassio/src/hassio-app.js

@@ -2,6 +2,7 @@ import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
 import './hassio-main.js';
+import './resources/hassio-icons.js';
 
 class HassioApp extends PolymerElement {
   static get template() {

hassio/src/hassio-markdown-dialog.js

@@ -52,7 +52,7 @@ class HassioMarkdownDialog extends PolymerElement {
     </style>
     <paper-dialog id="dialog" with-backdrop="">
       <app-toolbar>
-        <paper-icon-button icon="mdi:close" dialog-dismiss=""></paper-icon-button>
+        <paper-icon-button icon="hassio:close" dialog-dismiss=""></paper-icon-button>
         <div main-title="">[[title]]</div>
       </app-toolbar>
       <paper-dialog-scrollable>

hassio/src/hassio-pages-with-tabs.js

@@ -37,7 +37,7 @@ class HassioPagesWithTabs extends NavigateMixin(PolymerElement) {
           <ha-menu-button narrow="[[narrow]]" show-menu="[[showMenu]]"></ha-menu-button>
           <div main-title="">Hass.io</div>
           <template is="dom-if" if="[[showRefreshButton(page)]]">
-            <paper-icon-button icon="mdi:refresh" on-click="refreshClicked"></paper-icon-button>
+            <paper-icon-button icon="hassio:refresh" on-click="refreshClicked"></paper-icon-button>
           </template>
         </app-toolbar>
         <paper-tabs scrollable="" selected="[[page]]" attr-for-selected="page-name" on-iron-activate="handlePageSelected">

hassio/src/resources/hassio-icons.js

@@ -0,0 +1,6 @@
+import iconSetContent from '../../hassio-icons.html';
+
+const documentContainer = document.createElement('template');
+documentContainer.setAttribute('style', 'display: none;');
+documentContainer.innerHTML = iconSetContent;
+document.head.appendChild(documentContainer.content);

hassio/src/snapshots/hassio-snapshot.js

@@ -58,7 +58,7 @@ class HassioSnapshot extends PolymerElement {
     </style>
     <paper-dialog id="dialog" with-backdrop="" on-iron-overlay-closed="_dialogClosed">
       <app-toolbar>
-        <paper-icon-button icon="mdi:close" dialog-dismiss=""></paper-icon-button>
+        <paper-icon-button icon="hassio:close" dialog-dismiss=""></paper-icon-button>
         <div main-title="">[[_computeName(snapshot)]]</div>
       </app-toolbar>
       <div class="details">
@@ -95,9 +95,9 @@ class HassioSnapshot extends PolymerElement {
         <p class="error">Error: [[error]]</p>
       </template>
       <div class="buttons">
-        <paper-icon-button icon="mdi:delete" on-click="_deleteClicked" class="warning" title="Delete snapshot"></paper-icon-button>
+        <paper-icon-button icon="hassio:delete" on-click="_deleteClicked" class="warning" title="Delete snapshot"></paper-icon-button>
         <a href="[[_computeDownloadUrl(snapshotSlug)]]" download="[[_computeDownloadName(snapshot)]]">
-          <paper-icon-button icon="mdi:download" class="download" title="Download snapshot"></paper-icon-button>
+          <paper-icon-button icon="hassio:download" class="download" title="Download snapshot"></paper-icon-button>
         </a>
         <paper-button on-click="_partialRestoreClicked">Restore selected</paper-button>
         <template is="dom-if" if="[[_isFullSnapshot(snapshot.type)]]">

hassio/src/snapshots/hassio-snapshots.js

@@ -233,7 +233,7 @@ class HassioSnapshots extends EventsMixin(PolymerElement) {
   }
 
   _computeIcon(type) {
-    return type === 'full' ? 'mdi:package-variant-closed' : 'mdi:package-variant';
+    return type === 'full' ? 'hassio:package-variant-closed' : 'hassio:package-variant';
   }
 
   _snapshotClicked(ev) {

hassio/webpack.config.js

@@ -53,7 +53,17 @@ module.exports = {
             ],
           },
         },
+      },
+      {
+        test: /\.(html)$/,
+        use: {
+          loader: 'html-loader',
+          options: {
+            exportAsEs6Default: true,
+          }
+        }
       }
+
     ]
   },
   plugins,

index.html

@@ -99,7 +99,7 @@
     <!--EXTRA_SCRIPTS-->
     <script src='/frontend_latest/core.js'></script>
     <script src='/frontend_latest/app.js'></script>
-    <script src='/frontend_latest/mdi.js' async></script>
+    <script src='/frontend_latest/hass-icons.js' async></script>
     {% for extra_url in extra_urls -%}
       <link rel='import' href='{{ extra_url }}' async>
     {% endfor -%}

src/cards/ha-media_player-card.js

@@ -169,15 +169,15 @@ class HaMediaPlayerCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
     <paper-progress max="[[stateObj.attributes.media_duration]]" value="[[playbackPosition]]" hidden\$="[[computeHideProgress(playerObj)]]" class="progress"></paper-progress>
 
     <div class="controls layout horizontal justified">
-      <paper-icon-button icon="mdi:power" on-click="handleTogglePower" invisible\$="[[computeHidePowerButton(playerObj)]]" class="self-center secondary"></paper-icon-button>
+      <paper-icon-button icon="hass:power" on-click="handleTogglePower" invisible\$="[[computeHidePowerButton(playerObj)]]" class="self-center secondary"></paper-icon-button>
 
       <div>
-        <paper-icon-button icon="mdi:skip-previous" invisible\$="[[!playerObj.supportsPreviousTrack]]" disabled="[[playerObj.isOff]]" on-click="handlePrevious"></paper-icon-button>
+        <paper-icon-button icon="hass:skip-previous" invisible\$="[[!playerObj.supportsPreviousTrack]]" disabled="[[playerObj.isOff]]" on-click="handlePrevious"></paper-icon-button>
         <paper-icon-button class="primary" icon="[[computePlaybackControlIcon(playerObj)]]" invisible\$="[[!computePlaybackControlIcon(playerObj)]]" disabled="[[playerObj.isOff]]" on-click="handlePlaybackControl"></paper-icon-button>
-        <paper-icon-button icon="mdi:skip-next" invisible\$="[[!playerObj.supportsNextTrack]]" disabled="[[playerObj.isOff]]" on-click="handleNext"></paper-icon-button>
+        <paper-icon-button icon="hass:skip-next" invisible\$="[[!playerObj.supportsNextTrack]]" disabled="[[playerObj.isOff]]" on-click="handleNext"></paper-icon-button>
       </div>
 
-      <paper-icon-button icon="mdi:dots-vertical" on-click="handleOpenMoreInfo" class="self-center secondary"></paper-icon-button>
+      <paper-icon-button icon="hass:dots-vertical" on-click="handleOpenMoreInfo" class="self-center secondary"></paper-icon-button>
 
     </div>
 `;
@@ -272,9 +272,9 @@ class HaMediaPlayerCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
 
   computePlaybackControlIcon(playerObj) {
     if (playerObj.isPlaying) {
-      return playerObj.supportsPause ? 'mdi:pause' : 'mdi:stop';
+      return playerObj.supportsPause ? 'hass:pause' : 'hass:stop';
     } else if (playerObj.isPaused || playerObj.isOff || playerObj.isIdle) {
-      return playerObj.supportsPlay ? 'mdi:play' : null;
+      return playerObj.supportsPlay ? 'hass:play' : null;
     }
     return '';
   }

src/cards/ha-plant-card.js

@@ -92,11 +92,11 @@ class HaPlantCard extends EventsMixin(PolymerElement) {
   constructor() {
     super();
     this.sensors = {
-      moisture: 'mdi:water',
-      temperature: 'mdi:thermometer',
-      brightness: 'mdi:white-balance-sunny',
-      conductivity: 'mdi:emoticon-poop',
-      battery: 'mdi:battery'
+      moisture: 'hass:water',
+      temperature: 'hass:thermometer',
+      brightness: 'hass:white-balance-sunny',
+      conductivity: 'hass:emoticon-poop',
+      battery: 'hass:battery'
     };
   }