An insanely customizable way to interact with Home Assistant in the menubar
To use a prebuilt version...
Applications
folder. To build it yourself...
yarn install
yarn dist
dist
folderTo open the Preferences window, click the Home Assistant Icon in your menubar, and then go to Preferences
.
Server URL
http://homeassistant
/
or a port to the end of the URL.Server Port
443
443
.Long Lived Access Token
The refresh interval is how often the menubar will automatically refresh with new data. If set to never, the menubar will never automatically refresh, but a refresh can still be triggered from a Menu Item.
In the preferences window, you can export your configuration as a .bar
file. You can also import .bar
configuration files from the preferences window. If you want a shortcut to import configuration files, you can hold Shift while clicking Preferences
in the menubar or you can just double click on a .bar
file.
The icon downloader allows you to easily download icons from materialdesignicons.com
. I would recommend searching for icons on their website, then downloading them with the downloader. You can open the Icon Downloader
by clicking Icon Downloader
in the preferences window. All downloaded icons are stored in the Icons Folder
.
In the preferences window, under Config
is where you will put the JSON which creates your custom menubar.
items
{[MenuItem
]}: Your list of menu itemstitle
{String
} : The text that will show up next to the Home Assistant icon in the MenuBar. Limited to 34 charachters.icon
{String
}: Name of the icon you wish to use{
"items": [
{
"type": "label",
"label": "So much customization!"
}
],
"title": "Hello World!",
"
}
The title shows to the right of the icon in the menu bar. The title can be set by adding the title
key to the main JSON. The title should be a string and templating is supported (scroll down for more info on templating).
{
"items": [],
"title": "Hello!"
}
There are 4 types of Menu Items
label
type
: label
label
{String
}: The label for this Menu Itemicon
{String
}: The icon name for this itemreload
{Boolean
}: Whether or not the Menu Bar should be reloaded on clickaction
{MenuAction
}: The action to run when clickedcheckedTemplate
{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
. When clicked the check will toggle IN THE UI ONLY. I would recommend making the action some sort of toggle, and having reload
set to true
.hiddenTemplate
{String
}: Whether or not this label should be hidden. The string is a Home Assistant template which should resolve to on
, true
,off
, or false
. action
and reload
is not true, the item will be greyed out.{
"type": "label",
"label": "No Action"
},
{
"type": "label",
"label": "Reload",
"reload": true
},
{
"type": "label",
"label": "Checked + Reload",
"reload": true,
"checkedTemplate": "true"
},
{
"type": "label",
"label": "Action",
"action": {
"domain": "light",
"service": "toggle",
"serviceData": {
"entity_id": "light.my_light"
}
}
}
dropdown
Creates a dropdown menu
type
: dropdown
label
{String
}: The label for this dropdownitems
{[MenuItem
]}: A list of Menu Items to be displayedicon
{String
} : The icon name for this item{
"type": "dropdown",
"label": "Dropdown",
"items": [
{
"type": "label",
"label": "Item 1"
},
{
"type": "label",
"label": "Item 2"
},
{
"type": "label",
"label": "Item 3"
}
]
}
separator
type
: separator
{
"type": "normal",
"label": "Item 1"
},
{
"type": "separator"
},
{
"type": "normal",
"label": "Item 2"
}
open_hass
Looks like a label but opens Home Assistant in your browser when clicked.
type
: open_hass
label
{String
}: The label for this itemicon
templatable {String
}: The icon name for this itemA MenuAction
is how you can interact with Home Assistant.
domain
{String
}: The domain to be calledservice
{String
}: The service of the domainserviceeData
{{Service Data
}}: The data that will be given when the service is called{
"domain" : "light",
"service": "toggle",
"serviceData": {
"entity_id": "light.my_light"
}
}
To add an icon to your Menu Bar follow these steps
Open Icons Folder
MenuItem
add the icon
field and enter the name of the file including the file extension32x32
@2x
to the end of your file name to make it a "High Resolution Image" (Read below for more information)To make your image look better in the Menubar you can make it "High Resolution" which increases the DPI. Here are the following options:
@1x
@1.25x
@1.33x
@1.4x
@1.5x
@1.8x
@2x
@2.5x
@3x
@4x
@5x
Just add one of these to the end of your file.
icon.png
-> icon@2x.png
It is recommended that your icons are made a template. To make your icon a template
Template
to the end of the name of your file. icon.png
-> iconTemplate.png
icon@2x.png
-> iconTemplate@2x.png
The customization is not over! You can also use Home Assistant Templates in certain fields!
label
icon
title
To make a field a template just add Template
to the end of the field name and put your template in the value.
{
"label": "State of my light"
}
Turns into...
{
"labelTemplate": "{{ states('light.my_light') }}"
}