Difference between revisions of "Hubitat™ Dashboard v1"

From Hubitat Documentation
Jump to: navigation, search
(Moved content)
 
(Fix typos and reword some instructions. Modify Dashboard app install screenshot)
 
(11 intermediate revisions by the same user not shown)
Line 1: Line 1:
−
Hubitat™ Dashboard gives you remote access to monitor and control your devices from your phone, tablet or desktop. This is a highly customizable dashboard that lets your choose the devices and layout you want to see. You can even set up multiple dashboards if you want to provide custom dashboards for each member of your house. Here's how to set it up.
 
  
−
==Creating Your Dashboard==
+
Hubitat<sup>®</sup> Dashboard app is a powerful and fast, grid-based tile solution for local and remote access. You can quickly create highly customizable Dashboards to monitor and control your devices from a phone, tablet or desktop. Dashboards can be assigned to specific users, allowing a custom layout for a single or multiple individuals. A convenient QR code may be captured by mobile devices to grant access for the assigned Dashboards on a per user basis.
  
−
#Load the Hubitat™ Dashboard App in the Hubitat Web Interface.
+
===Installing Hubitat<sup>®</sup> Dashboard===
−
#Click on ''Create a New Dashboard''
 
−
#:[[File:DB1.png|link=https://docs.hubitat.com/File:DB1.png]]
 
−
#Give your dashboard a name. This name will appear at the top of the HTML dashboard. Pick something descriptive such as the room this dashboard is controlling or its main purpose.
 
−
#:[[File:DB2.png|link=https://docs.hubitat.com/File:DB2.png]]
 
−
#Next, decide if you want to authorize all devices to the dashboard or just a select few devices. You can choose to use all devices by toggling the ''Use all your devices'' switch to ''On''. If you want to pick only a few devices, select ''Choose Devices'' and check the devices you want to see on your dashboard.
 
−
#:[[File:DB3.png|link=https://docs.hubitat.com/File:DB3.png]]
 
−
#Now pick your layout. If you want to use the default layout, just click ''Next''.  Click the ''Layout Options'' button to configure grid to customize your dashboard layout.
 
  
−
::ADD SCREENSHOT
+
#From the Hubitat Web Interface select '''Apps'''[[File:Install Built-In App 2.0.png|none|thumb|600x600px|link=https://docs.hubitat.com/File:Install_Built-In_App_2.0.png]]
 +
#Choose the Hubitat<sup>®</sup> Dashboard from the list of Hubitat Elevation<sup>®</sup> Built-In Apps[[File:Install Hubitat Dashboard v2.png|none|thumb|600x600px]]
  
−
#Hubitat™ Dashboard uses a grid system for populating your devices in the dashboard. In the ''Layout Options'' section you can select one of the default grids or specify the exact number of Rows and Columns you want. Don’t worry; you can change all of this later, even in the actual dashboard interface.
+
===Create A New Dashboard===
−
#:[[File:DB4.png|link=https://docs.hubitat.com/File:DB4.png]]
 
−
#If you want all the devices you selected to be displayed on your dashboard, toggle on ''Auto Populate Dashboard.'' The dashboard automatically assign a tile for each device and place it on the dashboard. If you have more devices than grid spots, it will fill all the open spots and you can change them in the dashboard. Once your dashboard is created (or if you leave this toggle off), devices can be added/removed devices in the dashboard itself.
 
−
#:[[File:DB5.png|link=https://docs.hubitat.com/File:DB5.png]]
 
−
#Toggle the ''Read-Only Dashboard'' on if you do not want to allow the user to change the dashboard in the Dashboard interface. You will want to leave this ''off'' until you have set up the dashboard to your liking, then come back in here and toggle it off.
 
−
#:[[File:DB6.png|link=https://docs.hubitat.com/File:DB6.png]]
 
−
#Finally you need to select your ''Background Options.'' Use the dropdown menu to select one of the background colors. You can also select a background image by directing the dashboard to its web address. A default “Hubitat” logo is included, but you can change or remove this to your liking. These two options are also configurable in the Dashboard Interface, once the dashboard is set up.
 
−
#:[[File:DB7.png|link=https://docs.hubitat.com/File:DB7.png]]
 
−
#Click “Done” and your first dashboard is installed.
 
  
−
'''Import/Export Dashboard Layout'''
+
#Choose '''Create A New Dashboard'''[[File:Dashboard v4 Create New.png|none|thumb|600x600px]]
 +
#Select the devices you wish to use authorize for use in your Dashboard. To allow all devices to be used in a Dashboard, select the '''Toggle All On/Off''' option to allow any device on your hub to be authorized. Limiting the number of authorized devices will help speed up the loading of Dashboards.
 +
#*'''NOTE:''' You must select a device before you can use them in a Dashboard. If you do not choose devices to use in your Dashboard, you will receive the warning '''<span style="color: red;;">No Device Authorized</span>''' when you attempt to '''Add A Tile''' to your dashboard.[[File:Dashboard v4 choose devices.png|none|thumb|600x600px]]
 +
#Dashboard Direct Local and Cloud links may be copied and opened from the Dashboard child app settings. These URLs can be bookmarked to allow easy access to your Dashboards.  '''Local LAN Link''' is accessible inside your home, while on the ''same IP network'' as your hub. '''Cloud Links''' are remotely accessible URLs that allow secure access to your Dashboard from anywhere.
 +
#Once you create your Dashboards, they can be found listed in the Hubitat<sup>®</sup> Dashboard parent app settings[[File:Dashboard v4 parent app settings.png|none|thumb|735x735px]]
  
−
At the bottom of the layout options page you will see the option to ''Import/Export Layout''. Click on this tab and you will see the current layout “json” code and a box to paste in new “json” layout code and override your existing layout. Copying the current code, then creating a new dashboard and pasting the code in this box is a fast way to duplicate any dashboard.
+
====Advanced Options====
  
−
'''WARNING:''' pasting code into the Import text box could break your dashboard. Make sure you have a copy of your current layout (above) before pasting in a new layout.
+
*Change how fast the Dashboard should refresh via Cloud and Local links.
 +
*You can require that a PIN must entered before the specific Dashboard will load.
 +
*You can require that a PIN must be entered before a Hubitat<sup>®</sup> Safety Monitor command, such as Arm or Disarm can be sent.
 +
*You may restrict Modes from being changed in the specific Dashboard until a PIN is entered.
 +
*Access for a specific Dashboard via '''Cloud Links''' and '''Local Links''' can be disabled.
 +
*You may set read only access, thus preventing any changes to a specific Dashboard while this option is enabled.
 +
*Access to '''Dashboard Direct Local and Cloud''' links of a specific Dashboard can be revoked, requiring that a new link be copied.
 +
**'''NOTE:''' If you press '''Reset Access Token''' in a Dashboard child app settings page, the Local and Cloud '''Dashboard Direct Links''' for that particular Dashboard will be invalid and you will need to repair your bookmarks with new '''Dashboard Direct Links'''. The '''Dashboard Direct Links''' of other Dashboards, '''Dashboard Menu''' links, and '''Per User Dashboard''' links will not be affected.[[File:Dashboard v4 child app settings v2.png|none|thumb|1349x1349px]]
  
−
:[[File:DB68.png|link=https://docs.hubitat.com/File:DB68.png]]
+
===Dashboard Menu and Links===
  
−
Once you have pasted in a different layout, tab out of the box and you will see this:
+
#If you need to copy links to the Local and Cloud Dashboard Menus, or links to individual Dashboards, you will find them conveniently located under '''Dashboard Menu and Links'''.[[File:Dashboard v4 Menu and Links.png|none|thumb|600x600px]]
 +
#Right-click, or tap and hold to copy the links. Alternatively, you can open the links and copy them from a browser address bar.[[File:Dashboard v4 Menu and Links setup.png|none|thumb|730x730px]]
  
−
:[[File:DB69.png|link=https://docs.hubitat.com/File:DB69.png]]
+
====Dashboards Menu====
  
−
This means your new layout is now imported. If not, restore your old layout or you might have to start a new dashboard and paste your backup into this.
+
#You can bookmark the Dashboards Menu links for easy access to all of your Dashboards. The example below shows Local Dashboards indicated by the house icon.[[File:Dashboard v4 Local Dashboard Menu v2.png|none|thumb|659x659px]]
 +
#The Cloud Dashboards Menu is indicated by a cloud icon and does not include the capability to add new dashboards.[[File:Dashboard v4 Cloud Dashboard Menu.png|none|thumb|659x659px]]
  
−
You can share this layout “json” in the community or with others if you have designed a cool layout. Only your device IDs are stored in the layout, along with any images, links or dashboard IDs. It is pretty safe to share this, but if you want to edit the text, change each device Id to 1.
+
===Localization Options===
  
−
When importing someone else’s layout, exercise caution and realize you will need to update each tile with your own devices.
+
#Select '''Localization Options''' to choose the primary language for the '''Getting Started''' dialogue and the '''Dashboard Editor'''. You can build Dashboards using different languages by selecting the '''Localization Options''' for creating new Dashboards. Once set, the language specified will be the default for new Dashboards. If you need to change the Dashboard Editor Localization language later, it can be set on a per Dashboard basis. See the '''Dashboard Editor Settings''' section for more information.[[File:Dashboard v4 Localization Options.png|none|thumb|600x600px]][[File:Dashboard v4 Localization setup.png|none|thumb|600x600px]]
  
−
Overall, Hubitat™ Dashboard is a very powerful, fast grid-based tile solution. We hope you enjoy using your dashboards. More tile templates are in the works and please provide your feedback in the community thread for dashboard tiles and we can see what we can do to accommodate your needs.
+
===Per User Dashboards===
  
−
==Loading and Editing Your Dashboard==
+
#You can restrict access for a particular Dashboard to specific users. A convenient QR code may be captured by mobile devices to grant access for the assigned Local and Cloud Dashboards on a per-user basis.[[File:Dashboard v4 Per User Dashboards.png|none|thumb|600x600px]]
 +
#Select '''New''' to add a New User.[[File:Dashboard v4 New user - per User Dashboard.png|none|thumb|600x600px]]
 +
#Type a name for the user and press the '''Add New User''' button.[[File:Dashboard v4 Add Name - per User Dashboard.png|none|thumb|600x600px]]
 +
#Select '''Add Dashboard to User'''.[[File:Dashboard v4 Add Dashboard to User.png|none|thumb|600x600px]]
 +
#From the drop-down menu, choose the Dashboard you want the User to be able to access. '''NOTE:''' Each User and Dashboard combination assigned will have a unique access token in the URL. If you need a user to have access to multiple Dashboards, you will need to share the '''Dashboard Menu Links''' with them.[[File:Dashboard v4 Pick Dashboard for User.png|none|thumb|600x600px]]
 +
#Using a mobile device, you can capture the QR code for Dashboard Local and Cloud links, or you can copy the URL from the link above each QR code.[[File:Dashboard v4 Local and Cloud QR.png|none|thumb|600x600px]]
  
−
'''Loading Your Dashboard(s)'''
+
===Dashboard Advanced Options===
  
−
#In your Dashboard App, you will now see a link to the “Dashboards Menu”. Click on this and a new window/tab will open in your browser. Bookmark this URL / Link for quick access all your dashboards. Each dashboard has a Cloud and Local LAN Link. The Cloud Link allows your dashboard to be viewed from anywhere with internet access. The Local LAN link allows your dashboard to only be accessed on your home network. The Local LAN Dashboard will be faster to load and update. When you are on your local / home network, use this link.
+
*'''Allow new Dashboards to be created from Dashboard Menu when local? -''' This option enables you to control if new Dashboards are allowed to be created from the Dashboard Menu when accessed from a local connection.
−
#:[[File:DB8.png|link=https://docs.hubitat.com/File:DB8.png]]
+
*'''Remove Hubitat<sup>®</sup> Dashboard''' - Selecting this button will remove the Hubitat<sup>®</sup> Dashboard parent app and all of the associated Dashboards child apps.
 +
*'''Reset Access Token''' in the Dashboard parent app settings will generate new a new token for the  Local and Cloud '''Dashboard Menu''' links. Existing '''Dashboard Menu''' links will be invalid and you will need to repair your bookmarks with new '''Dashboard Menu''' links. The '''Dashboard Direct Links''' and '''Per User Dashboard''' links will not be affected.[[File:Dashboard v4 Advanced Parent Options.png|none|thumb|591x591px]]
  
−
'''Customizing Your dashboard'''
+
===Getting Started===
  
−
#Click on the Local LAN Dashboard link for the dashboard your created. If you had chosen the ''populate dashboard'' option at setup the grid would be full of devices you authorized. Otherwise you will see the default empty dashboard.
+
#Once Dashboards have been created, choose the local link to open the Dashboard in a new browser window or tab.
−
#Tap the three dots in the upper right hand corner to open the dynamic “Side Menu”. Here you can change the Grid Layout Settings, Add, Edit or Remove Tiles.
+
#You will first see the '''Getting Started''' dialogue window with helpful instructions to assist you in building a Dashboard.[[File:Dashboard v4 Builder dialogue.png|none|thumb|600x600px]]
−
#:[[File:DB10.png|link=https://docs.hubitat.com/File:DB10.png]]
+
#You can press the '''Auto Fill Grid 6 x 1''' button and devices will be automatically added to the Dashboard with a default tile template. '''Auto Fill Grid 6 x 1''' will automatically optimize the default Grid Size and build a Dashboard specifically for your device and the web browser it was initiated from. It is recommended to use a browser on the device you intend to normally use with Hubitat<sup>®</sup> Dashboards. Alternatively, you may simply select the '''Manually Add Tiles''' button, or press the '''X''' at the top right to close the Dashboard Builder and start adding tiles without assistance.
  
−
'''Change the Grid Size'''
+
====Dashboard Builder====
  
−
#Your dashboard is broken up into a Grid. This grid is defined by Rows and Columns. This was set when you created your dashboard but can be changed here in the dashboard. Tap the arrows next to each number to adjust the number of rows/columns. You will notice a real-time preview of expanding or shrinking grid.
+
#Selecting the '''Dashboard Builder''' in the header bar as shown below allows creating a Dashboard based on the devices you have authorized and their specific ''attributes''.  Select which device type attributes you want added and press the '''Build My Dashboard''' button to create a quick and easy Dashboard with device type groups that match the selected attributes.
−
#:[[File:DB12.png|link=https://docs.hubitat.com/File:DB12.png]]
+
#'''Dashboard Builder''' will automatically optimize the default Grid Size and build a Dashboard specifically for your device and the web browser it was initiated from. It is recommended to use a browser on the device you intend to normally use with Hubitat<sup>®</sup> Dashboards.[[File:Dashboard v4 Dashboard Builder content.png|none|thumb|600x600px]]
−
#You can change the Background Color, Background Image and change the font size as well. The little “I” icon in the bottom right corner of the side menu has a popup with the code for your layout and devices.
 
−
#:[[File:DB13.png|link=https://docs.hubitat.com/File:DB13.png]]
 
−
#:[[File:DB14.png|link=https://docs.hubitat.com/File:DB14.png]]
 
−
#Tap ''Update Grid'' to save your changes and see them on the dashboard.
 
  
−
'''Add A Tile'''
+
===Add A Tile===
  
−
#Below the Grid Size Section is the Add Tile section. This will not appear if the grid is already full. You may need to add a row/column or delete a tile to make space.
+
#Select the '''+''' icon in the top right to open the '''Add A Tile''' dialog. [[File:Dashboard v 4 Editor - Add A Tile.png|none|thumb|493x493px]]
−
#You can add a tile anywhere in the grid. Use the arrow keys to adjust the row/column you want the tile place. It will default to the first available space from Left to Right, Top to Bottom.
+
#You can change the tile '''Width''' and '''Height''' to set how big the tile will be.
−
#Each tile can also “Span” Rows and Columns, allowing you to create larger tiles then the default 1x1 size. Set this using the arrows.
+
#'''Pick a Device''', then '''Pick a Template''', and finally set the '''Options''' for that template.[[File:Dashboard v4 Add A Tile.png|none|thumb|600x600px]]
−
#:[[File:DB15.png|link=https://docs.hubitat.com/File:DB15.png]]
+
#Press the '''Add Tile''' button and you will see the tile added to your Dashboard in the spot you selected. The Grid will change to gray in that spot where the Dashboard now has a tile.[[File:Dashboard v4 Add Tile button.png|none|thumb|387x387px]]
−
#Next you will select the Tile Options for this new tile. Use the dropdown to select the device you want repressed. This dropdown list contains all of your authorized devices with initialized attributes. If a new device doesn’t show up here,
 
  
−
remember to update the device in the device view so that a state/attribute is set.
+
===Edit Tile===
  
−
#:[[File:DB16.png|link=https://docs.hubitat.com/File:DB16.png]]
+
#You can edit any tile by clicking the 3 dot menu in the top right of any tile. This will open an editing window and allow you to move the tile around on the grid by pressing the arrow buttons or by selecting the position in the grid layout where you want this tile to move on the Dashboard.[[File:Dashboard v4 Edit A Tile 3 dot.png|none|thumb|587x587px]]
−
#Next you select the template for the device most template match up with a specific device. However, some templates are single attribute focused. Like “battery” or “temperature”. These single attribute templates will just show that attribute of a device (if for example you just want to see the temperature reading of your motion sensor). Other templates are multi attribute capable and can show you more information or give you multiple options for control. For example, the “dimmer” template will give you the option to turn on/off the dimmer but also includes a slider to adjust the dim level.
+
#You can quickly jump between editing of tiles by using the back and forward buttons in the header bar to either side of '''Edit Tile ID:'''
−
#:*'''NOTE 1:'''There are two special “devices” called “Dashboards” and “Modes”. The “Dashboard” device allows you to pick any other dashboard you have configured and it will create a “dashboard” tile that when clicked, will take you to that dashboard. The “Modes” device allows you to create a tile that has the ability to display and select any mode for your location / hub. Both these special “devices” must also be used in conjunction with their corresponding “template” called “dashboard” and “mode”.
+
#You may change the '''Device''', '''Template''' or any '''Options''' for the tile.[[File:Dashboard v4 Edit a Tile.png|none|thumb|576x576px]]
−
#:*'''NOTE 2''' The “image” and “link” templates do not require a device. Both of these will ignore the device selection, instead will show another input box that will allow you to paste in a link or a link to any image and that will be displayed in the tile.
+
#Selecting '''History''' in the header bar will open up a window with a list of activities for that device from the event table. Selecting the '''Tile''' link in the header bar will return you to the '''Tile Editor'''.[[File:Dashboard v4 Tile History.png|none|thumb|577x577px]]
−
#:[[File:DB17.png|link=https://docs.hubitat.com/File:DB17.png]]
+
#If you want to remove the tile from Dashboard, press the '''Delete Tile''' button.[[File:Dashboard v4 Remove Tile.png|none|thumb|376x376px]]
  
−
'''Edit a Tile'''
+
===Refresh Dashboard===
  
−
Once your tile is added you can edit the location, device type, template and colors.
+
#Press the green checkmark to refresh your Dashboard. '''NOTE:''' If you do not have any tiles added to your Dashboard, selecting the refresh checkmark will reopen the '''Getting Started''' dialogue.[[File:Dashboard v 4 Editor - Refresh.png|none|thumb|493x493px]]
  
−
#Open the tile editor by tapping the three dots in the upper righthand corner of the tile.
+
===Dashboard Editor Settings===
−
#You can edit the position, size and type just as your did when you added the tile.
 
  
−
'''Adjust the Template Colors'''
+
#Selecting the gear icon in the top right opens up the '''Editor''' '''Settings''' for this Dashboard.[[File:Dashboard v 4 Editor - Settings.png|none|thumb|493x493px]]
 +
#Available links in the header bar include:
 +
#*'''Grid'''
 +
#*'''Options'''
 +
#*'''Templates'''
 +
#*'''Advanced'''
  
−
#Tap ''template colors'' button near the top of the side menu.
+
====Grid====
−
#:[[File:DB18.png|link=https://docs.hubitat.com/File:DB18.png]]
+
You can change the grid size (columns and rows), font size, icon size, grid gap, as well as how rounded the corners are for all tiles. You may also paste in a URL for a background image, or set a color using a custom HTML value for the background of the grid.
−
#In the pop-up window, select the template you would like to edit.
+
[[File:Dashboard v4 Editor Settings.png|none|thumb|600x600px]]
−
#:[[File:DB20.png|link=https://docs.hubitat.com/File:DB20.png]]
 
−
#Select the state of the device you would like to edit. Each device state can have a different color palette for quick visual reference.
 
−
#:[[File:DB21.png|link=https://docs.hubitat.com/File:DB21.png]]
 
−
#The icon color and background color of each template can be edited. Tap on the color you want to change, then use the color wheel and slider to select the color. When you have select the icon and background colors, tap ''Save Custom Color''
 
−
#:[[File:DB22.png|link=https://docs.hubitat.com/File:DB22.png]]
 
−
#Repeat for any other templates and states you want to change. These settings are saved in your layout.
 
−
#:*'''NOTE:''' If you use the populate all devices in the Layout Section of the Child Dashboard App, you will remove your custom colors. This option can be used to reset your custom colors.
 
  
−
As you can see, this grid layout is very flexible and allows precise placement of your tiles without the need to add spacers, and will not change regardless of the resolution of your device. This is a departure from other dashboard solutions out there, as they flow the tiles based on landscape or portrait modes.
+
====Options====
 +
You can change the options for how your Dashboard will display or hide information.
  
−
You can create specific layouts for specific screens, devices, etc. In fact. You can even share your layouts with others or use that layout to create other dashboards based on that layout. Even restore your dashboards if something were to go wrong.
+
*'''Localization''' - You can modify the language of the '''Dashboard Editor''' and '''Getting Started''' dialogue for this specific Dashboard. To set the default language for new Dashboards, see the '''Localization Options''' section above.
 +
*'''Clock 12 Hour Mode (turn off for 24 hour time)''' - Choose between 12 hour or 24 hour time display for any clock template or history.
 +
*'''Date Format -''' Switch between '''Month/Day/Year''' or '''Day/Month/Year''' formats.
 +
*'''Cloud and LAN''' '''Refresh Intervals -''' Set these to determine how fast the Dashboard will poll to show updates on screen.
 +
**'''NOTE:''' LAN Refresh interval adjustment is only needed when a Dashboard can’t connect via websocket.  Under normal circumstances, connections over websocket should update instantly.
 +
*'''Column Width and Row Height -''' Removing these values will auto fit tiles to the grid. Setting specific values will result in the Dashboard rendering tiles at fixed sizes, thus forcing the Dashboard to scroll when it overflows the browser window.
 +
*'''Allow Logo Click -''' Disable this if you don’t want to use this option as a means to return to the Dashboard menu.
 +
*'''Hide 3 dots -''' This will hide all the 3 dot menu at the top-right of each tile. You will need to re-enable the 3 dot menu if you want to edit tiles.
 +
**'''NOTE:''' This does not make the tiles read only, and the option can still be set from inside the Dashboard App settings in the Hubitat Web Interface.
 +
*'''Hide Tile Template Names -''' This allows you to remove the names that are at the top of most templates.
 +
*'''Hide Icon Helper Text -''' Hides the text under each icon that indicates the attribute value.
 +
*'''Hide Device History -''' Removes the option to view device history in the tile details area.
 +
*'''Do Not Use Default Tile Colors -''' Turning this on will disable the default colors for templates.[[File:Dashboard v4 Editor Options.png|none|thumb|600x600px]]
 +
***
  
−
==Advanced Options==
+
====Templates Color Editor====
−
In the Dashboard app there are a handful of options for advanced users to fine-tune their dashboards.
+
In this section you can change the Color, Background Color and Custom Icons for each state available for a template.
 +
[[File:Dashboard v4 Template color editor.png|none|thumb|600x600px]]
  
−
'''Refresh Rate''' Here you can specify the refresh rate (in seconds) for your LAN and cloud-connected dashboards. LAN connections are faster so it recommend you set that faster than your cloud-based dashboard links.
+
====Advanced====
  
−
'''Clock AM/FM''' Toggle this ''on'' for your dashboard to display time in AM/FM format (default). Toggle this ''off'' to display in 24-hour format.
+
*'''Layout -''' This allows you to copy and paste in layouts, or make direct edits to your options, layout, and custom colors.  Quickly share custom colors or layouts using the code from this window.[[File:Dashboard v4 Editor Advanced Layout.png|none|thumb|576x576px]]
  
−
'''Security''' This allows you to create a PIN that will be required for anyone attempting to load the dashboard. Simply enter the PIN of your choice in the blank field. Next, toggle whether you want this PIN to be required for the LAN dashboard and/or the cloud dashboard. When you are finished, click ''done''.
+
*'''Devices -''' This allows you to see a list of authorized devices, current states and the history (if enabled) for each device.  This is helpful to troubleshoot whether a device is reporting proper states.[[File:Dashboard v4 Editor Advanced Device List.png|none|thumb|577x577px]]
  
−
'''Helpful Hints:'''
+
*'''CSS''' - This is an advanced option which provides the ability to modify the Cascading Style Sheets of a Dashboard.
  
−
*Hubitat™ Dashboard has a built in refresh rate of 2 seconds for local lan dashboards and 5 seconds for cloud based links. You can adjust this in the Advanced Section of the Dashboard Child App.
+
:
−
 
 
−
*The tile sends the command, but doesn’t assume it is changed until after we get a message back that the device state has changed. This can cause a small delay and a loading icon for your cursor and a slight fade out and back in of the tile when command is confirmed.
 
−
 
 
−
=='''Device Templates:'''==
 
−
 
 
−
'''Acceleration'''
 
−
 
 
−
This is a single use tile that displays acceleration status of any device with the acceleration attribute.
 
−
 
 
−
:[[File:DB24.png|link=https://docs.hubitat.com/File:DB24.png]]
 
−
 
 
−
'''Attribute'''
 
−
 
 
−
This is a custom tile that will display the text value of any attribute name. Just enter the name below the drop down.
 
−
 
 
−
:[[File:DB25.png|link=https://docs.hubitat.com/File:DB25.png]]
 
−
:[[File:DB26.png|link=https://docs.hubitat.com/File:DB26.png]]
 
−
 
 
−
'''Battery'''
 
−
 
 
−
This is a single use tile that displays the battery status of any device with the battery attribute.
 
−
 
 
−
:[[File:DB27.png|link=https://docs.hubitat.com/File:DB27.png]]
 
−
 
 
−
'''Bulb'''
 
−
 
 
−
This is a multi use tile that displays the current state of the switch and level of a bulb. You can move the slider to change the level.
 
−
 
 
−
:[[File:DB28.png|link=https://docs.hubitat.com/File:DB28.png]]
 
−
 
 
−
'''Button'''
 
−
 
 
−
This is a single use tile that uses a device that has one or more pushable Buttons. Once you choose the button template, you will then be able to enter the number of the button to send the pushed command.
 
−
 
 
−
:[[File:DB29.png|link=https://docs.hubitat.com/File:DB29.png]]
 
−
 
 
−
'''Carbon-dioxide'''
 
−
 
 
−
This is a single use tile that displays the reported carbon dioxide (CO2) levels in parts per million (ppm)
 
−
 
 
−
:[[File:DB30.png|link=https://docs.hubitat.com/File:DB30.png]]
 
−
 
 
−
'''Carbon-monoxide'''
 
−
 
 
−
This is a single use tile that displays if Carbon Monoxide is detected or not. The green cloudy icon indicates the presence of Carbon monoxide as reported by the device.
 
−
 
 
−
:[[File:DB31.png|link=https://docs.hubitat.com/File:DB31.png]]
 
−
 
 
−
'''Clock-date'''
 
−
 
 
−
This is a special tile that displays your local browser time with seconds along with the current date.
 
−
 
 
−
:[[File:DB32.png|link=https://docs.hubitat.com/File:DB32.png]]
 
−
 
 
−
'''Clock'''
 
−
 
 
−
This is a special tile that displays your local browser time with seconds.
 
−
 
 
−
:[[File:DB33.png|link=https://docs.hubitat.com/File:DB33.png]]
 
−
 
 
−
'''Contact'''
 
−
 
 
−
This is a single use tile that displays the contact attribute of a device. Green means open, gray means closed.
 
−
 
 
−
:[[File:DB34.png|link=https://docs.hubitat.com/File:DB34.png]]
 
−
 
 
−
'''Dashboard'''
 
−
 
 
−
This is a special tile that allows you to create a “link” to another dashboard on your current dashboard. This tile is smart enough to know if it is cloud or local based link based on what dashboard link is currently in use.
 
−
 
 
−
:[[File:DB35.png|link=https://docs.hubitat.com/File:DB35.png]]
 
−
 
 
−
'''Dimmer'''
 
−
 
 
−
This is similar to the Bulb tile. Click to turn on/off the Dimmer and the arrow icons to change the level.
 
−
 
 
−
:[[File:DB36.png|link=https://docs.hubitat.com/File:DB36.png]]
 
−
 
 
−
'''Door'''
 
−
 
 
−
This is similar to the Contact tile and indicates if a door is open (green) or closed (gray) to be used with the contact attribute of a device.
 
−
 
 
−
:[[File:DB37.png|link=https://docs.hubitat.com/File:DB37.png]]
 
−
 
 
−
'''Door-control'''
 
−
 
 
−
This is similar to the Contact tile and indicates if a door is open (green) or closed (gray) to be used with the contact attribute of a device. Taping the tile will send the open or closed command after a confirmation dialog box.
 
−
 
 
−
:[[File:DB37.png|link=https://docs.hubitat.com/File:DB37.png]]
 
−
 
 
−
'''Energy'''
 
−
 
 
−
This is a single use tile that displays the energy attribute reported from the device.
 
−
 
 
−
:[[File:DB38.png|link=https://docs.hubitat.com/File:DB38.png]]
 
−
 
 
−
'''Garage'''
 
−
 
 
−
This is a single use tile that displays the contact attribute closed is gray and pointing down, and open is green and pointing up.
 
−
 
 
−
:[[File:DB39.png|link=https://docs.hubitat.com/File:DB39.png]]
 
−
 
 
−
'''Garage-control'''
 
−
 
 
−
This is a single use tile that displays the contact attribute closed is gray and pointing down, and open is green and pointing up.Taping the tile will send the open or closed command after a confirmation dialog box.
 
−
 
 
−
:[[File:DB39.png|link=https://docs.hubitat.com/File:DB39.png]]
 
−
 
 
−
'''Humidity'''
 
−
 
 
−
This is a single use tile that displays the humidity attribute as a percentage.
 
−
 
 
−
:[[File:DB40.png|link=https://docs.hubitat.com/File:DB40.png]]
 
−
 
 
−
'''Illuminance'''
 
−
 
 
−
This is a single use tile that displays the light level in lux from the device.
 
−
 
 
−
:[[File:DB41.png|link=https://docs.hubitat.com/File:DB41.png]]
 
−
 
 
−
'''Image'''
 
−
 
 
−
This is a special tile that allows you to insert a link to any image. This will be refreshed every 5 minutes. Once you choose the image template, a box will display allowing you to add the link.
 
−
 
 
−
:[[File:DB42.jpg|link=https://docs.hubitat.com/File:DB42.jpg]]
 
−
 
 
−
'''Link'''
 
−
 
 
−
This is a special tile that allows you to create a clickable link to any website that will open up in a new tab. Currently, you can not rename the link. This will be added in a later version.
 
−
 
 
−
:[[File:DB43.png|link=https://docs.hubitat.com/File:DB43.png]]
 
−
 
 
−
'''Lock'''
 
−
 
 
−
This is a multipurpose tile that shows the lock state and battery. Clicking on the lock will lock (green) or unlock (gray) the lock.
 
−
 
 
−
:[[File:DB44.png|link=https://docs.hubitat.com/File:DB44.png]]
 
−
 
 
−
'''Mode'''
 
−
 
 
−
This is a special tile that will allow you to view the current mode and select a new mode for your hub / location.
 
−
 
 
−
:[[File:DB45.png|link=https://docs.hubitat.com/File:DB45.png]]
 
−
 
 
−
'''Momentary'''
 
−
 
 
−
This is a single purpose tile that takes a device with the push attribute but will only send “on” (green) and it will return back to gray after the push command has been sent.
 
−
 
 
−
:[[File:DB46.jpg|link=https://docs.hubitat.com/File:DB46.jpg]]
 
−
 
 
−
'''Motion'''
 
−
 
 
−
This is a multipurpose tile showing motion detected (green eye) or not (gray) and the values of the temperature sensor and battery level.
 
−
 
 
−
:[[File:DB47.png|link=https://docs.hubitat.com/File:DB47.png]]
 
−
 
 
−
'''Multi'''
 
−
 
 
−
This is a multipurpose tile showing contact sensor open (green) or closed (gray) and the values of the temperature sensor and battery level.
 
−
 
 
−
:[[File:DB48.png|link=https://docs.hubitat.com/File:DB48.png]]
 
−
 
 
−
'''Music-player'''
 
−
 
 
−
This is a multipurpose tile allowing for control of the music player commands, play, pause, previous, next, mute and set volume. It also displays the current track information.
 
−
 
 
−
:[[File:DB49.png|link=https://docs.hubitat.com/File:DB49.png]]
 
−
 
 
−
'''Outlet'''
 
−
 
 
−
This is a single use tile that turns on (green) or off (gray) the device via the switch attribute.
 
−
 
 
−
:[[File:DB50.png|link=https://docs.hubitat.com/File:DB50.png]]
 
−
 
 
−
'''Presence'''
 
−
 
 
−
This is a multipurpose tile that shows the presence (green) or not (gray) of a device and the battery level.
 
−
 
 
−
:[[File:DB51.png|link=https://docs.hubitat.com/File:DB51.png]]
 
−
 
 
−
'''Relay'''
 
−
 
 
−
This is a single use tile that shows the current state of a relay device. On is (green) and off is (gray). Taping the tile will send on/off.
 
−
 
 
−
:[[File:DB52.png|link=https://docs.hubitat.com/File:DB52.png]]
 
−
 
 
−
'''Shades'''
 
−
 
 
−
This is a single use tile that shows the current state of a shade device. Open is (green) and closed (gray). Taping the tile will send on/off.
 
−
 
 
−
:[[File:DB53.png|link=https://docs.hubitat.com/File:DB53.png]]
 
−
 
 
−
'''Smoke'''
 
−
 
 
−
This is a single use tile that shows if Smoke is detected by the device. The gray heart means everything is good, and the green “!” means smoke is detected.
 
−
 
 
−
:[[File:DB54.png|link=https://docs.hubitat.com/File:DB54.png]]
 
−
 
 
−
'''Switch'''
 
−
 
 
−
This is a single use tile that shows the current state of a switch, on (green) off (gray) and you can click the tile anywhere to turn the switch on/off.
 
−
 
 
−
:[[File:DB55.png|link=https://docs.hubitat.com/File:DB55.png]]
 
−
 
 
−
'''Temperature'''
 
−
 
 
−
This is a single use tile that shows the current temperature reported by the device assigned to it.
 
−
 
 
−
:[[File:DB56.png|link=https://docs.hubitat.com/File:DB56.png]]
 
−
 
 
−
'''Water'''
 
−
 
 
−
This is a multipurpose tile that shows a water sensor wet (green) or dry (gray) and the reported battery level and temperature
 
−
 
 
−
:[[File:DB57.png|link=https://docs.hubitat.com/File:DB57.png]]
 
−
 
 
−
'''Window'''
 
−
 
 
−
This is a single use tile that shows the open or closed state of a window.
 
−
 
 
−
:[[File:DB58.png|link=https://docs.hubitat.com/File:DB58.png]]
 

Latest revision as of 23:07, 10 November 2020

Hubitat® Dashboard app is a powerful and fast, grid-based tile solution for local and remote access. You can quickly create highly customizable Dashboards to monitor and control your devices from a phone, tablet or desktop. Dashboards can be assigned to specific users, allowing a custom layout for a single or multiple individuals. A convenient QR code may be captured by mobile devices to grant access for the assigned Dashboards on a per user basis.

Installing Hubitat® Dashboard

  1. From the Hubitat Web Interface select Apps
    Install Built-In App 2.0.png
  2. Choose the Hubitat® Dashboard from the list of Hubitat Elevation® Built-In Apps
    Install Hubitat Dashboard v2.png

Create A New Dashboard

  1. Choose Create A New Dashboard
    Dashboard v4 Create New.png
  2. Select the devices you wish to use authorize for use in your Dashboard. To allow all devices to be used in a Dashboard, select the Toggle All On/Off option to allow any device on your hub to be authorized. Limiting the number of authorized devices will help speed up the loading of Dashboards.
    • NOTE: You must select a device before you can use them in a Dashboard. If you do not choose devices to use in your Dashboard, you will receive the warning No Device Authorized when you attempt to Add A Tile to your dashboard.
      Dashboard v4 choose devices.png
  3. Dashboard Direct Local and Cloud links may be copied and opened from the Dashboard child app settings. These URLs can be bookmarked to allow easy access to your Dashboards.  Local LAN Link is accessible inside your home, while on the same IP network as your hub. Cloud Links are remotely accessible URLs that allow secure access to your Dashboard from anywhere.
  4. Once you create your Dashboards, they can be found listed in the Hubitat® Dashboard parent app settings
    Dashboard v4 parent app settings.png

Advanced Options

  • Change how fast the Dashboard should refresh via Cloud and Local links.
  • You can require that a PIN must entered before the specific Dashboard will load.
  • You can require that a PIN must be entered before a Hubitat® Safety Monitor command, such as Arm or Disarm can be sent.
  • You may restrict Modes from being changed in the specific Dashboard until a PIN is entered.
  • Access for a specific Dashboard via Cloud Links and Local Links can be disabled.
  • You may set read only access, thus preventing any changes to a specific Dashboard while this option is enabled.
  • Access to Dashboard Direct Local and Cloud links of a specific Dashboard can be revoked, requiring that a new link be copied.
    • NOTE: If you press Reset Access Token in a Dashboard child app settings page, the Local and Cloud Dashboard Direct Links for that particular Dashboard will be invalid and you will need to repair your bookmarks with new Dashboard Direct Links. The Dashboard Direct Links of other Dashboards, Dashboard Menu links, and Per User Dashboard links will not be affected.
      Dashboard v4 child app settings v2.png

Dashboard Menu and Links

  1. If you need to copy links to the Local and Cloud Dashboard Menus, or links to individual Dashboards, you will find them conveniently located under Dashboard Menu and Links.
    Dashboard v4 Menu and Links.png
  2. Right-click, or tap and hold to copy the links. Alternatively, you can open the links and copy them from a browser address bar.
    Dashboard v4 Menu and Links setup.png

Dashboards Menu

  1. You can bookmark the Dashboards Menu links for easy access to all of your Dashboards. The example below shows Local Dashboards indicated by the house icon.
    Dashboard v4 Local Dashboard Menu v2.png
  2. The Cloud Dashboards Menu is indicated by a cloud icon and does not include the capability to add new dashboards.
    Dashboard v4 Cloud Dashboard Menu.png

Localization Options

  1. Select Localization Options to choose the primary language for the Getting Started dialogue and the Dashboard Editor. You can build Dashboards using different languages by selecting the Localization Options for creating new Dashboards. Once set, the language specified will be the default for new Dashboards. If you need to change the Dashboard Editor Localization language later, it can be set on a per Dashboard basis. See the Dashboard Editor Settings section for more information.
    Dashboard v4 Localization Options.png
    Dashboard v4 Localization setup.png

Per User Dashboards

  1. You can restrict access for a particular Dashboard to specific users. A convenient QR code may be captured by mobile devices to grant access for the assigned Local and Cloud Dashboards on a per-user basis.
    Dashboard v4 Per User Dashboards.png
  2. Select New to add a New User.
    Dashboard v4 New user - per User Dashboard.png
  3. Type a name for the user and press the Add New User button.
    Dashboard v4 Add Name - per User Dashboard.png
  4. Select Add Dashboard to User.
    Dashboard v4 Add Dashboard to User.png
  5. From the drop-down menu, choose the Dashboard you want the User to be able to access. NOTE: Each User and Dashboard combination assigned will have a unique access token in the URL. If you need a user to have access to multiple Dashboards, you will need to share the Dashboard Menu Links with them.
    Dashboard v4 Pick Dashboard for User.png
  6. Using a mobile device, you can capture the QR code for Dashboard Local and Cloud links, or you can copy the URL from the link above each QR code.
    Dashboard v4 Local and Cloud QR.png

Dashboard Advanced Options

  • Allow new Dashboards to be created from Dashboard Menu when local? - This option enables you to control if new Dashboards are allowed to be created from the Dashboard Menu when accessed from a local connection.
  • Remove Hubitat® Dashboard - Selecting this button will remove the Hubitat® Dashboard parent app and all of the associated Dashboards child apps.
  • Reset Access Token in the Dashboard parent app settings will generate new a new token for the Local and Cloud Dashboard Menu links. Existing Dashboard Menu links will be invalid and you will need to repair your bookmarks with new Dashboard Menu links. The Dashboard Direct Links and Per User Dashboard links will not be affected.
    Dashboard v4 Advanced Parent Options.png

Getting Started

  1. Once Dashboards have been created, choose the local link to open the Dashboard in a new browser window or tab.
  2. You will first see the Getting Started dialogue window with helpful instructions to assist you in building a Dashboard.
    Dashboard v4 Builder dialogue.png
  3. You can press the Auto Fill Grid 6 x 1 button and devices will be automatically added to the Dashboard with a default tile template. Auto Fill Grid 6 x 1 will automatically optimize the default Grid Size and build a Dashboard specifically for your device and the web browser it was initiated from. It is recommended to use a browser on the device you intend to normally use with Hubitat® Dashboards. Alternatively, you may simply select the Manually Add Tiles button, or press the X at the top right to close the Dashboard Builder and start adding tiles without assistance.

Dashboard Builder

  1. Selecting the Dashboard Builder in the header bar as shown below allows creating a Dashboard based on the devices you have authorized and their specific attributes.  Select which device type attributes you want added and press the Build My Dashboard button to create a quick and easy Dashboard with device type groups that match the selected attributes.
  2. Dashboard Builder will automatically optimize the default Grid Size and build a Dashboard specifically for your device and the web browser it was initiated from. It is recommended to use a browser on the device you intend to normally use with Hubitat® Dashboards.
    Dashboard v4 Dashboard Builder content.png

Add A Tile

  1. Select the + icon in the top right to open the Add A Tile dialog.
    Dashboard v 4 Editor - Add A Tile.png
  2. You can change the tile Width and Height to set how big the tile will be.
  3. Pick a Device, then Pick a Template, and finally set the Options for that template.
    Dashboard v4 Add A Tile.png
  4. Press the Add Tile button and you will see the tile added to your Dashboard in the spot you selected. The Grid will change to gray in that spot where the Dashboard now has a tile.
    Dashboard v4 Add Tile button.png

Edit Tile

  1. You can edit any tile by clicking the 3 dot menu in the top right of any tile. This will open an editing window and allow you to move the tile around on the grid by pressing the arrow buttons or by selecting the position in the grid layout where you want this tile to move on the Dashboard.
    Dashboard v4 Edit A Tile 3 dot.png
  2. You can quickly jump between editing of tiles by using the back and forward buttons in the header bar to either side of Edit Tile ID:
  3. You may change the Device, Template or any Options for the tile.
    Dashboard v4 Edit a Tile.png
  4. Selecting History in the header bar will open up a window with a list of activities for that device from the event table. Selecting the Tile link in the header bar will return you to the Tile Editor.
    Dashboard v4 Tile History.png
  5. If you want to remove the tile from Dashboard, press the Delete Tile button.
    Dashboard v4 Remove Tile.png

Refresh Dashboard

  1. Press the green checkmark to refresh your Dashboard. NOTE: If you do not have any tiles added to your Dashboard, selecting the refresh checkmark will reopen the Getting Started dialogue.
    Dashboard v 4 Editor - Refresh.png

Dashboard Editor Settings

  1. Selecting the gear icon in the top right opens up the Editor Settings for this Dashboard.
    Dashboard v 4 Editor - Settings.png
  2. Available links in the header bar include:
    • Grid
    • Options
    • Templates
    • Advanced

Grid

You can change the grid size (columns and rows), font size, icon size, grid gap, as well as how rounded the corners are for all tiles. You may also paste in a URL for a background image, or set a color using a custom HTML value for the background of the grid.

Dashboard v4 Editor Settings.png

Options

You can change the options for how your Dashboard will display or hide information.

  • Localization - You can modify the language of the Dashboard Editor and Getting Started dialogue for this specific Dashboard. To set the default language for new Dashboards, see the Localization Options section above.
  • Clock 12 Hour Mode (turn off for 24 hour time) - Choose between 12 hour or 24 hour time display for any clock template or history.
  • Date Format - Switch between Month/Day/Year or Day/Month/Year formats.
  • Cloud and LAN Refresh Intervals - Set these to determine how fast the Dashboard will poll to show updates on screen.
    • NOTE: LAN Refresh interval adjustment is only needed when a Dashboard can’t connect via websocket.  Under normal circumstances, connections over websocket should update instantly.
  • Column Width and Row Height - Removing these values will auto fit tiles to the grid. Setting specific values will result in the Dashboard rendering tiles at fixed sizes, thus forcing the Dashboard to scroll when it overflows the browser window.
  • Allow Logo Click - Disable this if you don’t want to use this option as a means to return to the Dashboard menu.
  • Hide 3 dots - This will hide all the 3 dot menu at the top-right of each tile. You will need to re-enable the 3 dot menu if you want to edit tiles.
    • NOTE: This does not make the tiles read only, and the option can still be set from inside the Dashboard App settings in the Hubitat Web Interface.
  • Hide Tile Template Names - This allows you to remove the names that are at the top of most templates.
  • Hide Icon Helper Text - Hides the text under each icon that indicates the attribute value.
  • Hide Device History - Removes the option to view device history in the tile details area.
  • Do Not Use Default Tile Colors - Turning this on will disable the default colors for templates.
    Dashboard v4 Editor Options.png

Templates Color Editor

In this section you can change the Color, Background Color and Custom Icons for each state available for a template.

Dashboard v4 Template color editor.png

Advanced

  • Layout - This allows you to copy and paste in layouts, or make direct edits to your options, layout, and custom colors.  Quickly share custom colors or layouts using the code from this window.
    Dashboard v4 Editor Advanced Layout.png
  • Devices - This allows you to see a list of authorized devices, current states and the history (if enabled) for each device.  This is helpful to troubleshoot whether a device is reporting proper states.
    Dashboard v4 Editor Advanced Device List.png
  • CSS - This is an advanced option which provides the ability to modify the Cascading Style Sheets of a Dashboard.
Retrieved from "https://docs.hubitat.com/index.php?title=Hubitat™_Dashboard_v1&oldid=3301"