v2.1.0

.github/workflows/main.yml

@@ -1,4 +1,4 @@
-name: Build/release
+name: Build App
 
 on: push
 

README.md

@@ -4,11 +4,12 @@
 An **insanely** customizable way to interact with Home Assistant in the menubar
 <img src="https://i.imgur.com/HAag5aG.png" width=800>
 
+# [Example Configuration](example/README.md)
+
 # Table Of Contents
 
 - [Installation](#installation)
 - [App Configuration](#app-configuration)
-- [Example Configuration](example/README.md)
 - [Importing & Exporting](#importing-&-exporting)
 - [Menubar Configuration](#menubar-configuration)
   - [Title](#title)
@@ -61,8 +62,9 @@ In the preferences window, you can export your configuration as a `.bar` file. Y
 
 In the preferences window, under `Config` is where you will put the JSON which creates your custom menubar.
 
-* `items` {[`MenuItem`]}: Your list of menu items
-* `title` {`String`}: The text that will show up next to the Home Assistant icon in the MenuBar. **Limited to 34 charachters.**
+* **required** `items` {[`MenuItem`]}: Your list of menu items
+* **templatable** `title` {`String`} : The text that will show up next to the Home Assistant icon in the MenuBar. **Limited to 34 charachters.**
+* **templatable** `icon` {`String`}: Name of the icon you wish to use
 
 #### Example
 ```json
@@ -104,8 +106,8 @@ There are 4 types of Menu Items
 ### Type: `label`
 
 * **required** `type`: `label`
-* `label` {`String`}: The label for this Menu Item
-* `icon` {`String`}: The icon name for this item
+* **templatable** `label` {`String`}: The label for this Menu Item
+* **templatable** `icon` {`String`}: The icon name for this item
 * `reload` {`Boolean`}: Whether or not the Menu Bar should be reloaded on click
 * `action` {`MenuAction`}: The action to run when clicked
 * `checkedTemplate` {`String`}: Whether or not this label should be checked. The string is a Home Assistant template which should resolve to `on`, `true`,`off`, or `false`.
@@ -152,9 +154,9 @@ There are 4 types of Menu Items
 Creates a dropdown menu
 
 * **required** `type`: `dropdown`
-* **required** `label` {`String`}: The label for this dropdown
+* **required** **templatable**`label` {`String`}: The label for this dropdown
 * **required** `items` {[`MenuItem`]}: A list of Menu Items to be displayed
-* `icon` {`String`}: The icon name for this item
+* **templatable** `icon` {`String`} : The icon name for this item
 
 #### Example
 <img src="https://imgur.com/L3r9WOO.png" width=400>
@@ -206,8 +208,8 @@ Creates a dropdown menu
 Looks like a label but opens Home Assistant in your browser when clicked.
 
 * **required** `type`: `open_hass`
-* **required** `label` {`String`}: The label for this item
-* `icon` {`String`}: The icon name for this item
+* **required** **templatable** `label` {`String`}: The label for this item
+* `icon` **templatable** {`String`}: The icon name for this item
 
 ## MenuAction
 
@@ -241,6 +243,7 @@ To add an icon to your Menu Bar follow these steps
 
 * Make the size of your image `32x32`
 * Add `@2x` to the end of your file name to make it a "High Resolution Image" (Read below for more information)
+* Get icons from [here](https://materialdesignicons.com/). Export them as PNG at 36x66 then use @2x magnification
 
 ### High Resolution Image
 
@@ -297,3 +300,10 @@ To make a field a template just add `Template` to the end of the field name and
   "labelTemplate": "{{ states('light.my_light') }}"
 }
 ```
+Turns into...
+
+```json
+{
+  "labelTemplate": "{{ states('light.my_light') }}"
+}
+```

example/README.md

@@ -1,11 +1,12 @@
 # Example Configurations
 
-This folder contains a example configuration that will demonstrate different parts of `ha-menu`.
+This folder contains a example configuration that will demonstrate the different parts of `ha-menu`.
 
 ## Usage
 
-1. Open `ha-menu` prefrences
-2. Enter Home Assistant information
-3. Click `Open Icons Folder`
-4. Copy all images from the `icons` folder here
-5. Paste `example.json` into preferences
+1. Download `config.bar` from this folder
+2. Open `ha-menu` preferences
+3. Click `Import` on the top
+4. Find the downloaded `config.bar` file on your computer and click `Open`
+5. Change the connection settings
+6. Click `Save + Reload`

index.js

@@ -79,14 +79,17 @@ const buildTray = async () => {
   const { config } = settings.getAll()
   const hassStatus = await hass.status()
 
+  // define icon
+  const trayIcon = config.icon || config.iconTemplate ? PATHS.ICON_PATH_GENERATOR(config.icon || (await hass.render(config.iconTemplate))) : PATHS.MENUBAR_ICONS.DEFAULT
+
   // create the tray if one doesnt exist
-  if (!tray) tray = new Tray(PATHS.MENUBAR_ICONS.TRANSPARENT)
+  if (!tray) tray = new Tray(trayIcon)
 
   // open tray on click on windows
   isWindows && tray.on('click', () => tray.popUpContextMenu())
 
   // set the tray icon to be transparent to indicate reload
-  tray.setImage(PATHS.MENUBAR_ICONS.TRANSPARENT)
+  if (!config.icon && !config.iconTemplate) tray.setImage(PATHS.MENUBAR_ICONS.TRANSPARENT)
 
   // initialize the menuTemplate and trayTitle
   let menuTemplate = []
@@ -103,7 +106,7 @@ const buildTray = async () => {
     menuTemplate.push({
       label: 'Unable To Connect',
       enabled: false,
-      icon: PATHS.ICONS.WARNING_ICON
+      icon: PATHS.MENUBAR_ICONS.WARNING_ICON
     }, {
       label: 'Retry',
       click: () => { buildTray() }
@@ -120,7 +123,7 @@ const buildTray = async () => {
     // build the tray items
     menuTemplate = await itemBuilder(config.items, () => { buildTray() })
     // set the tray image
-    tray.setImage(PATHS.MENUBAR_ICONS.DEFAULT)
+    tray.setImage(trayIcon)
   }
 
   // add constant items
@@ -251,7 +254,7 @@ ipcMain.on('exportConfig', (_, __) => {
 })
 
 // on load from file...
-ipcMain.on('loadFromFile', (_, __) => {
+ipcMain.on('importConfig', (_, __) => {
   openLoadConfigDialog()
 })
 

modules/data.js

@@ -2,8 +2,11 @@ const path = require('path')
 const fs = require('fs')
 const electron = require('electron')
 
+const isWindows = process.platform === 'win32'
 const userDataPath = (electron.app || electron.remote.app).getPath('userData')
+
 const settingsPath = path.join(userDataPath, 'settings.json')
+const iconPath = path.join(__dirname, '..', 'assets')
 
 const DEFAULT_SETTINGS = {
   url: '',
@@ -72,12 +75,10 @@ class SpecialDictionary {
 module.exports = {
   PATHS: {
     MENUBAR_ICONS: {
-      DEFAULT: path.join(__dirname, '../assets/iconTemplate@3x.png'),
-      TRANSPARENT: path.join(__dirname, '../assets/transparentIconTemplate@3x.png'),
-      ERROR: path.join(__dirname, '../assets/redIcon@3x.png')
-    },
-    ICONS: {
-      WARNING_ICON: path.join(__dirname, '../assets/alertTemplate@2x.png')
+      DEFAULT: path.join(iconPath, isWindows ? 'windows' : 'macos', isWindows ? 'icon@3x.png' : 'iconTemplate@3x.png'),
+      TRANSPARENT: path.join(iconPath, isWindows ? 'windows' : 'macos', isWindows ? 'transparentIcon@3x.png' : 'transparentIconTemplate@3x.png'),
+      WARNING_ICON: path.join(iconPath, isWindows ? 'windows' : 'macos', isWindows ? 'alert@2x.png' : 'alertTemplate@2x.png'),
+      ERROR: path.join(iconPath, 'redIcon@3x.png')
     },
     ICONS_FOLDER: path.join(userDataPath, 'icons'),
     PAGES: {
@@ -94,7 +95,7 @@ module.exports.PATHS.ICON_PATH_GENERATOR = (name) => {
   // check if the icon exists... if it does return the path
   if (fs.existsSync(iconPath)) return iconPath
   // otherwise return the warning icon because the path wasn't found
-  else return module.exports.PATHS.ICONS.WARNING_ICON
+  else return module.exports.PATHS.MENUBAR_ICONS.WARNING_ICON
 }
 
 // check if the icons folder doesnt exists

package.json

@@ -1,7 +1,7 @@
 {
   "name": "ha-menu",
   "description": "Customizable way to interact with Home Assistant through the menu bar on macOS.",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "author": {
     "name": "Addison Ireland"
   },

views/js/main.js

@@ -76,7 +76,7 @@ elements.buttons.saveConfig.addEventListener('click', (e) => {
 
 elements.buttons.loadFile.addEventListener('click', (e) => {
   e.preventDefault()
-  ipcRenderer.send('loadFromFile', {})
+  ipcRenderer.send('importConfig', {})
   location.reload()
 })