- Initial Setup
Welcome to Home Assistant Command Center! You’re just a few steps away from supercharging your home with an awesome wall tablet experience.
If you have not installed HACC yet, please refer to the Installation Guide first!
Or, if you don’t even have a wall tablet yet, check out our FAQ page where you can find a list of supported devices - some for under $100 USD!
After installing and starting up your HACC instance for the first time, you’ll be presented with the system setup page.
You’ll need to fill out your Home Assistant Base URL and generate yourself a Long-Lived Access Token.
Base URL: This is your Home Assistant URL. It can be a publicly accessible URL, or a private URL as long as HACC (your tablet device) can reach it over the local network at that IP address or DNS name.
Long-Lived Access Token: Generate this via the following instructions:
- Navigate to Home Assistant > Your User Account (very bottom link in the sidebar, your username)
- Scroll to the very bottom and find the Long-Lived Access Tokens section
- Click Create Token
- Give it a descriptive name, like HA Command Center. (The name can be whatever you’d like.)
- Copy and paste the token value into HACC.
(Optional) Override Asset Base URL: If you use a private or non-standard network setup, in some cases, HACC may not be able to load images or other public assets from your Home Assistant instance. Set this value to a base URL that HACC can reach (such as your public hostname / URL for Home Assistant) if images aren’t loading correctly.
After pressing Save Settings, you can now proceed to create some pages and tiles!
Pages are a way to group related tiles, and are exactly what the name implies – different web pages that you can navigate between.
When you first load HACC, or you upgrade HACC from a previous version that did not support pages, HACC automatically generates a “Default” first page for you.
Each page has the following settings:
|Page ID||The ID of the page. Must be unique. This is used as the navigation URL for the page, for example, if your page ID is “scenes”, the URL for the page will be
|Page Name||A friendly name for the page. Only visible in the admin area.|
|Set as Default Page||Only one page can be set as the default. Whichever page is set as the default, when the dashboard is opened with no page ID (with just the URL
|Navigation Auto Return||If greater than 0, specifies the number of seconds after which this page will automatically navigate back to the default page (homepage). Set to 0 to disable auto return.|
A new tile type called the Navigation Tile has been added.
This tile has 3 modes of operation:
- Home: When pressed, the dashboard will navigate to the defualt / home page.
- Navigate: When pressed, the dashboard will navigate to the specified page (see below).
- Refresh: Whe pressed, the current page will reload. (If applicable, the Navigation Auto Return timer is also reset.)
If the navigation mode is set to navigate, you can specify the page to navigate to using the Target Page setting.
Each page specifies its layout, which is the dimensions of the screen (assuming HACC is running full-screen), as well as tile size and spacing settings.
With the introduction of pages, each page can have totally different layout and tile settings, so you can use one HACC instance for multiple different tablet devices!
Not sure what resolution your device is?
No problem. Add a Navigation tile, and set the type to debug. When you click the tile on your tablet, it will pop up some debugging information about the tablet that you can take a picture or screenshot of, to help you set your layout options correctly.
|Device Width (px)||Specify the width of your device’s screen, in pixels. This can be smaller than your device if you want to have padding on either side (the HACC dashboard interface is rendered horizontally centered).|
|Device Height (px)||Specify the height of your device’s screen, in pixels. If this value is set too high, you might have a vertical scrollbar.|
|Base Tile Size (px)||Specify the size of a 1x1 tile. A good value is 100. Use a number that is divisible by 2.|
|Tile Spacing (px)||Specify the spacing, in pixels, between each tile and around the outer edge of the dashboard. A good number is 6. Use a number that is divisible by 2.|
Getting the correct settings can be tricky, and will likely take some trial and error. You can try using Device Mode in Chrome DevTools to simulate your tablet’s screen size as well.
Take the following example:
If my device is 536x854 (or can scale to that resolution), I can fit 8 rows and 5 columns of tiles because:
- 5 × (100 + 6) + 6 = 536
- 8 × (100 + 6) + 6 = 854
(In the example above, replace 100 with your tile size and 6 with your tile spacing.)
Another example - if my device has a resolution of 728x1134, then I can choose slightly larger tile sizes.
- 5 × (134 + 6) + 6 = 706
- 8 × (134 + 6) + 6 = 1126
With this example, the dashboard width doesn’t match the device exactly. Don’t worry, HACC will auto-center the dashboard UI for you.
In the end, just play around with the values until you find something that works for you and your tablet device!
Set your Layout Settings First!
If you change your Layout Settings after you have already positioned some tiles, it is possible your tiles might go past the edge of the screen, and the drag and drop feature that automatically slides tiles around may not function correctly.
Once you have your device width, height, and tile sizes all set correctly, you can use the right-hand side of the screen to drag and drop your tiles where you want them to be on your dashboard.
Don't forget to press "Save Layout" when you're finished!
If you have a bunch of new tiles (and they are all stacked on top of each other in the first position), or this is the first time you’re laying out this page, you can press the “Reset Layout” button which will cause the tile layout engine to automatically (and somewhat randomly) place each tile where it thinks it fits best.
Layout Reset Warning
Pressing the "Reset Layout" button will move ALL of your tiles, even ones that you placed by hand. If you don't want to lose your existing layout, don't use "Reset Layout" (or just don't press "Save Layout" to save your changes).
Now that you’ve configured your first page, and you have your layout all set up, it’s time to add some tiles!
On the “Pages” screen, click the “Manage n Tiles” button to open the tile list for that page.
Click “Add Tile” to add your first tile.
Select the tile type you want to add. The entities which are supported by that tile are listed on each card.
The Date Tile is a good first tile to add! It displays the current date and time.
Here is a brief listing of all of the types of tiles we support.
|Tile Name||Supported Entities||Description|
|State||All Types||Displays an entity’s current state text. Contains options for overriding on/off text and rounding decimal values.|
||Displays a formatted weather tile. Recommended minimum size is 2x2. (Note: The
||Toggles the switch on and off by calling the respective
||Turns lights on and off. (A future update will allow for brightness and limited color control.)|
||Displays the person’s entity picture and their current location / state value.|
||Displays a camera feed.|
||Activates a scene.|
||Displays the media image preview, and optionally, overlays the device name and media title.|
||Displays upcoming events. Only supports Google Calendar at this time.|
|Navigation||Allows navigation between pages, and refreshing of the current page. Also contains a debug mode for help with device settings and compatibility.|
|Blank||A spacer tile. Does not render anything, but can push other tiles down (or over) since the layout engine does not allow for arbitrary vertical space between tiles.|
|Label||A tile that renders plain text. Useful for “title tiles”. Use the custom CSS property box to change the font, color, size, or other attributes of the text.|
|Date||Displays the current date and time. Date and time formatting can be customized / localized, and a timezone can be selected.|