Difference between revisions of "Hubitat® Dashboard"

From Hubitat Documentation
Jump to: navigation, search
(Installing Dashboard)
(Added installing dashboard images and dialogue. Overhauled the doc to match the style and layout of the other Hubitat Elevations docs)
Line 1: Line 1:
Hubitat<sup>®</sup> 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.
+
Hubitat<sup>®</sup> 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. Overall, Hubitat<sup>®</sup> Dashboard is a very powerful, fast grid-based tile solution. We hope you enjoy using your Dashboards. More tile templates are in development, so please provide your feedback in the Hubitat Community we will see what we can do to accommodate your needs.
  
==Installing Dashboard==
+
===Installing Hubitat® Dashboard===
Load the Hubitat<sup>®</sup> Dashboard App in the Hubitat Web Interface.[[File:Add Built-in App.png|none|thumb]]Scroll to "Hubitat<sup>®</sup> Dashboard" and click it to install.[[File:Dashboard Install.png|none|thumb]]
 
  
=== Dashboard App Menu ===
+
# From the Hubitat Web Interface select '''Apps'''[[File:Install Built-In App 2.0.png|none|thumb|600x600px]]
[[File:Create new dashboard.png|400x400px]]
+
# Choose the Hubitat<sup>®</sup> Dashboard from the list of Hubitat Elevation™ Built-In Apps[[File:Install Hubitat Dashboard.png|none|thumb|600x600px]]
  
*'''Send Mobile App Link to Phone''' option allows you to text a link to someone to access the Hubitat Dashboard Menu remotely.
+
===Configure Dashboard App Menu===
*'''Dashboard Menu'''  Once you have your first dashboard created, you will have a list of dashboards for quick access here.  You can switch between Local and Cloud links using the two tab buttons
+
 
 +
** '''Dashboard Menu''' - Once you have your first Dashboard created, you will have a list of Dashboards for quick access here. You can switch between Local and Cloud links using the two tab buttons.
 +
** '''Send Mobile App Link to Phone''' -  This option allows you to text a link to someone to access the Hubitat<sup>®</sup> Dashboard Menu remotely.[[File:Create new dashboard.png|none|thumb|600x600px]]
  
 
==='''Advanced Options'''===
 
==='''Advanced Options'''===
  
*'''Remove Hubitat Dashboard''' allows you to remove this app.
+
**'''Remove Hubitat Dashboard''' - Selecting this button will remove the Hubitat<sup>®</sup> Dashboard app app.
*'''Allow new Dashboards to be created from Dashboard Menu.'''     This option allows you to control if you want to allow new dashboards to be created or not from the dashboard menu.
+
**'''Allow new Dashboards to be created from Dashboard Menu -''' This option enables you to control if new Dashboards allowed to be created from the Dashboard menu.
 +
**'''Use Legacy Dashboards?''' - Allows you to go back to Dashboard 1.0 rendering. '''NOTE:''' ''If you add any new template tiles, this could cause legacy Dashboards to not render.''
  
*'''Use Legacy Dashboards?'''    This allows you to go back to Dashboard 1.0 rendering.  Keep in mind if you add any new template tiles this could cause the legacy dashboard not to render.
+
===Creating a Dashboard===
  
==Creating A Dashboard==
+
#Select ''Create a New Dashboard''
 +
#Give your Dashboard a name. This name will appear at the top of the Dashboard. Pick something descriptive such as the room your Dashboard is controlling, or its main purpose.
 +
#[[File:New Dashboard.png|600x600px]].
 +
#Under the '''Links''' section, you will find '''Local''' and '''Cloud''' links to your new Dashboard. These are standard Web URLs that you can bookmark to allow direct and easy access to your Dashboards.  '''Local LAN Link''' is accessible inside your home, while on the ''same network'' and it features instant updates. '''Cloud Links''' are remotely accessible URLs that you can use to access your Dashboard from the internet, when you are outside your local network.
 +
#Under '''Advanced,''' you can set some options that affect the access to your Dashboards.
 +
#*You can change how fast the Dashboard should refresh via cloud and local links.  
 +
#*You may set a Pin / Password to protect this Dashboard from loading.
 +
#*You can set a numerical (numbers only ) PIN for Hubitat<sup>®</sup> Safety Monitor and for Modes.
 +
#*It is also possible to disable access for this Dashboard from '''Cloud Links''' and/or from '''Local Links'''.
 +
#*Lastly, you can set this Dashboard to “'''Read Only'''”, which will not allow any changes from inside the Dashboard app itself.  [[File:Dashboard Advanced.png|none|thumb|600x600px]]
 +
#Next, decide if you want to authorize all devices to the Dashboard or just a select few devices. You can choose specific devices by disabling the '''''Use all your devices''''' switch. If you want to pick only a few devices, select '''''Choose Devices''''' and check the devices you want to see on your Dashboard. Limiting the devices in larger installs will speed up the loading of Dashboards.
 +
#Choose “Done” and your first Dashboard is now installed.
  
#Click on ''Create a New Dashboard''
+
===Accessing Dashboards===
#Give your dashboard a name. This name will appear at the top of the dashboard. Pick something descriptive such as the room this dashboard is controlling or its main purpose.
 
#:[[File:New Dashboard.png]]
 
#:In '''Links''' you have your local and cloud links to your new dashboard.  These are standard Web URLs that you can bookmark to directly access your dashboards.  Local LAN link is accessible inside your house while on the same network and features instant updates.  Cloud Links are remotely accessible URLs that you can use to access your dashboard from outside your network.
 
#:
 
#:Under '''Advanced''' you can set some options you can’t change in the actual dashboard.
 
#:[[File:Dashboard Advanced.png|none|thumb]]
 
#:* You can change how fast the dashboard should refresh via cloud and local links.  
 
#:* You can set a Pin / Password to protect this dashboard from loading.
 
#:* You can also set numerical (only numbers) PIN for HSM and Modes.
 
#:* You can also turn off access for this dashboard from the Cloud and/or Local links.
 
#:* Lastly, you can set this dashboard to “Read Only” which will not allow any changes from inside the dashboard app itself.
 
#Next, decide if you want to authorize all devices to the dashboard or just a select few devices. You can choose specific devices by toggling the ''Use all your devices'' switch to ''Off''. If you want to pick only a few devices, select ''Choose Devices'' and check the devices you want to see on your dashboard. Limiting the devices in larger installs will speed up the loading of dashboard.
 
#Click “Done” and your first dashboard is installed.
 
  
Overall, Hubitat<sup>®</sup> 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.
+
# Now that we have your first Dashboard set up, let’s head over to it. Choose the local link and open your new Dashboard in a new window.
 +
# You will now see the Getting Started dialog box, briefly explaining how Dashboard 2.0 functions.[[File:Getting Started Dashboard.png|none|thumb|678x678px]]
 +
# You have a couple options to get started.  You can '''Manually Add Tiles''' (or just close this dialog) and get started, or you can select '''Auto Fill Grid''' and all your devices will be automatically added to the Dashboard with a default tile template.
  
==Accessing Dashboards==
+
=== Dashboard Builder ===
  
'''Accessing Your Dashboard(s)'''
+
# You can also use the new Dashboard Builder by selecting the link '''Dashboard Builder''' in the menu bar as shown below. Dashboard Builder allows you to create a Dashboard based on the devices you have authorized and their specific “attributes”.  Select which ones you want to create, and you can then choose '''Build My Dashboard''' to create a quick and easy Dashboard that contains groups of each of these types of devices.
 +
# Both '''Auto Fill Grid''' described in the previous section, and '''Dashboard Builder''' will automatically optimize their default Grid Size for the browser you are currently using. It is best to use the browser and device you intend to normally use with Hubitat<sup>®</sup> Dashboards, so this automated process can build a Dashboard specifically for your device and choice of web browser. [[File:Dashboard Builder.png|none|thumb|600x600px]]
  
Now that we have your first dashboard set up, let’s head over to it. Click the local link and open your new dashboard in a new window.
+
==='''Add A Tile'''===
  
You will now see the Getting Started dialog box.
+
# Select the '''+''' icon in the top right to open the '''Add A Tile''' dialog. Here  you can set the number of '''Columns''' and '''Rows''' by either using the '''-/+''' buttons, or clicking anywhere on the grid.
[[File:Getting Started Dashboard.png|none|thumb]]
+
# You can also change the tile '''Width''' and '''Height''' to set how big the tile will be.
This will tell you a bit about how Dashboard 2.0 works.  You have a couple options to get started. You can Manually Add Tiles (or just close this dialog) and get started or you can select '''Auto Fill Grid''' and all your devices will be automatically added to the dashboard with a default tile template.
+
# Next, '''Pick a Device''', then '''Pick a Template''', and finally set the '''Options''' for that template.
 +
# Select '''Add Tile''' 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 your Dashboard now has a tile. [[File:Add a Tile.png|none|thumb|676x676px]]
  
You can also use the new “Dashboard Builder” by clicking on it in the menu bar.
+
==='''Edit Tile'''===
[[File:Dashboard Builder.png|none|thumb]]
 
Dashboard Builder allows you to create a dashboard based on the devices you have authorized and their specific “attributes”.  Select which ones you want to create and you can then click “Build My Dashboard” to create a quick and easy dashboard that contains groups of each of these types of devices.
 
  
Both Auto Fill Grid and Dashboard Builder automatically optimize their default Grid Size for the browser you are currently using.  It is best to use the browser you intend on using so this process builds a dashboard specifically for your device.
+
# 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 selecting the '''-/+''' or by clicking the grid layout to move your tile to that position on the Dashboard.
 +
# You can quickly jump between editing of tiles by using the back and forward buttons in the menu bar to either side of '''Edit Tile ID:'''
 +
# You can change the '''Device''', the '''Template''' or any '''Options''' for the tile. [[File:Edit Tile.png|none|thumb|676x676px]]
 +
# Selecting '''History''' in the menu bar will open up a window with a list of activities for that device from the event table. [[File:Device History.png|none|thumb|679x679px]]
 +
# If you want to remove the tile, press the '''Delete Tile''' button.
  
=='''Add A Tile'''==
+
==='''Settings'''===
Clicking on the “+” icon in the top right opens the '''Add A Tile''' dialog.
 
[[File:Add a Tile.png|none|thumb]]
 
This allows you to set the column and row by either using the -/+ buttons or clicking anywhere on the grid.  
 
  
You can also change the tile width and/or tile height to set how big the tile will be.
+
# Selecting the gear icon in the top right opens up the '''Settings''' page for this Dashboard.
 +
# There are 4 distinct options: Grid, Options, Templates and 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 including a custom HTML value for the background of the grid.[[File:Options Grid.png|none|thumb|600x600px]]
 +
#* '''Options -''' Here you can change a variety of options for how your Dashboard will display (or will not display) information
 +
#*** '''Clock 12 Hour Mode (Turn off for 24 hour time)''' - Choose between 12 hour or 24 time display for any clock template or history
 +
#*** '''Date Format - S'''witch between '''MM/DD/YYYY''' and '''DD/MM/YYYY''' formats
 +
#*** '''Cloud and LAN''' '''Refresh Intervals - S'''et these to determine how fast the Dashboard will poll to show updates on screen.  '''''NOTE:''' LAN refresh is only if a Dashboard can’t connect via websocket.  When connected via websockets, updates should be immediate.''
 +
#*** '''Column Width and Row Height -''' Remove these to auto fit tiles to the grid, or change these to specific values to force the Dashboard to render these tiles as fixed sizes, forcing the Dashboard to scroll if 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 be 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 -''' Used to remove 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.
  
Then pick a device, a template and set the options for that template.  Finally click Add Tile and you will see the tile added to your Dashboard in the spot you selected.
+
[[File:Options.png|none|thumb|600x600px]]
 
+
==='''Templates'''===
You will notice the Grid should change to gray in that spot where the grid now has a tile.
 
 
 
=='''Edit Tile'''==
 
You can edit any tile by clicking the 3 dot menu in the top right of any tile.
 
[[File:Edit Tile.png|none|thumb]]
 
This will open up and allow you to move the tile around on the grid by clicking the -/+ or the grid layout and you will notice the tile will move to that spot.
 
  
You can quickly jump between tiles by using the back and forward buttons next to “Edit Tile: X”
+
* In this section you can change the Color, Background Color and Custom Icons for each state available for a template.[[File:Templates.png|none|thumb|600x600px]]
  
“History” will open up a list of activities for that device from the event table.
+
===Advanced===
[[File:Device History.png|none|thumb]]
 
You can change the Device and/or template or change any Options for the tile.
 
  
If you want to remove the tile, click the “Delete Tile” button.
+
* '''Layout -''' This area 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:Advanced Layout.png|none|thumb|600x600px]]
 
 
=='''Settings'''==
 
Clicking the gear icon in the top right opens up the Settings page for this dashboard.
 
 
 
There are 4 distinct options: Grid, Options, Templates and Advanced
 
 
 
==='''Grid'''===
 
[[File:Options Grid.png|none|thumb]]
 
You can change the grid size (columns and rows), font size, icon size, grid gap and how rounded the corners are for all tiles
 
 
 
You can also paste in a URL for a background image or set a color including a custom HTML value for the background of the grid.
 
 
 
==='''Options'''===
 
[[File:Options.png|none|thumb]]
 
Here you can change a variety of options on how your dashboard will display (or not) information.
 
 
 
'''Clock 12 Hour mode''', turn off for 24 hour time display in any clock template or history
 
 
 
'''Date Format''', switch between MM/DD and DD/MM formats
 
 
 
'''Cloud and LAN''' refresh intervals, set these to determine how fast it polls.  NOTE: LAN refresh is only if dashboard can’t connect via websocket.  When connected via websocket, updates should be immediate.
 
 
 
'''Column Width and Row Height'''.  Remove these to auto fit tiles to grid, or change these to specific values to force the dashboard to render these tiles as fixed sizes and this will allow the dashboard to scroll if it overflows the browser window.
 
 
 
'''Allow Logo Click'''.  Disable this if you don’t want the option to return to the dashboard menu.
 
 
 
'''Hide 3 dots'''.  This will hide all 3 dot options in tiles.  You will need to re-enable these if you want to edit tiles (NOTE: This is not read only, that can be set 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.'''  This will hide the text under each icon that indicates the attribute value.
 
 
 
'''Hide Device History.''' This will remove 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.
 
 
 
==='''Templates'''===
 
[[File:Templates.png|none|thumb]]
 
In this area you can change the Color, Background Color and Custom Icons for each state available for a template.
 
  
===Advanced - Layout===
+
===Advanced===
[[File:Advanced Layout.png|none|thumb]]
 
This area 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 this area.
 
  
===Advanced - Devices===
+
* '''Devices -''' This area allows you to see a list of authorized devices, the current states and history (if enabled) for each device.  This is helpful to troubleshoot if a device is reporting proper states.[[File:Advanced Devices.png|none|thumb|600x600px]]
[[File:Advanced Devices.png|none|thumb]]
 
This area allows you to see a list of authorized devices, the current states and history (if enabled) for each device.  This is helpful to troubleshoot if a device is reporting proper states.
 

Revision as of 05:32, 9 May 2019

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. Overall, Hubitat® Dashboard is a very powerful, fast grid-based tile solution. We hope you enjoy using your Dashboards. More tile templates are in development, so please provide your feedback in the Hubitat Community we will see what we can do to accommodate your needs.

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.png

Configure Dashboard App Menu

    • Dashboard Menu - Once you have your first Dashboard created, you will have a list of Dashboards for quick access here. You can switch between Local and Cloud links using the two tab buttons.
    • Send Mobile App Link to Phone - This option allows you to text a link to someone to access the Hubitat® Dashboard Menu remotely.
      Create new dashboard.png

Advanced Options

    • Remove Hubitat Dashboard - Selecting this button will remove the Hubitat® Dashboard app app.
    • Allow new Dashboards to be created from Dashboard Menu - This option enables you to control if new Dashboards allowed to be created from the Dashboard menu.
    • Use Legacy Dashboards? - Allows you to go back to Dashboard 1.0 rendering. NOTE: If you add any new template tiles, this could cause legacy Dashboards to not render.

Creating a Dashboard

  1. Select Create a New Dashboard
  2. Give your Dashboard a name. This name will appear at the top of the Dashboard. Pick something descriptive such as the room your Dashboard is controlling, or its main purpose.
  3. New Dashboard.png.
  4. Under the Links section, you will find Local and Cloud links to your new Dashboard. These are standard Web URLs that you can bookmark to allow direct and easy access to your Dashboards.  Local LAN Link is accessible inside your home, while on the same network and it features instant updates. Cloud Links are remotely accessible URLs that you can use to access your Dashboard from the internet, when you are outside your local network.
  5. Under Advanced, you can set some options that affect the access to your Dashboards.
    • You can change how fast the Dashboard should refresh via cloud and local links.  
    • You may set a Pin / Password to protect this Dashboard from loading.
    • You can set a numerical (numbers only ) PIN for Hubitat® Safety Monitor and for Modes.
    • It is also possible to disable access for this Dashboard from Cloud Links and/or from Local Links.
    • Lastly, you can set this Dashboard to “Read Only”, which will not allow any changes from inside the Dashboard app itself.
      Dashboard Advanced.png
  6. Next, decide if you want to authorize all devices to the Dashboard or just a select few devices. You can choose specific devices by disabling the Use all your devices switch. If you want to pick only a few devices, select Choose Devices and check the devices you want to see on your Dashboard. Limiting the devices in larger installs will speed up the loading of Dashboards.
  7. Choose “Done” and your first Dashboard is now installed.

Accessing Dashboards

  1. Now that we have your first Dashboard set up, let’s head over to it. Choose the local link and open your new Dashboard in a new window.
  2. You will now see the Getting Started dialog box, briefly explaining how Dashboard 2.0 functions.
    Getting Started Dashboard.png
  3. You have a couple options to get started. You can Manually Add Tiles (or just close this dialog) and get started, or you can select Auto Fill Grid and all your devices will be automatically added to the Dashboard with a default tile template.

Dashboard Builder

  1. You can also use the new Dashboard Builder by selecting the link Dashboard Builder in the menu bar as shown below. Dashboard Builder allows you to create a Dashboard based on the devices you have authorized and their specific “attributes”.  Select which ones you want to create, and you can then choose Build My Dashboard to create a quick and easy Dashboard that contains groups of each of these types of devices.
  2. Both Auto Fill Grid described in the previous section, and Dashboard Builder will automatically optimize their default Grid Size for the browser you are currently using. It is best to use the browser and device you intend to normally use with Hubitat® Dashboards, so this automated process can build a Dashboard specifically for your device and choice of web browser.
    Dashboard Builder.png

Add A Tile

  1. Select the + icon in the top right to open the Add A Tile dialog. Here you can set the number of Columns and Rows by either using the -/+ buttons, or clicking anywhere on the grid.
  2. You can also change the tile Width and Height to set how big the tile will be.
  3. Next, Pick a Device, then Pick a Template, and finally set the Options for that template.
  4. Select Add Tile 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 your Dashboard now has a tile.
    Add a Tile.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 selecting the -/+ or by clicking the grid layout to move your tile to that position on the Dashboard.
  2. You can quickly jump between editing of tiles by using the back and forward buttons in the menu bar to either side of Edit Tile ID:
  3. You can change the Device, the Template or any Options for the tile.
    Edit Tile.png
  4. Selecting History in the menu bar will open up a window with a list of activities for that device from the event table.
    Device History.png
  5. If you want to remove the tile, press the Delete Tile button.

Settings

  1. Selecting the gear icon in the top right opens up the Settings page for this Dashboard.
  2. There are 4 distinct options: Grid, Options, Templates and 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 including a custom HTML value for the background of the grid.
      Options Grid.png
    • Options - Here you can change a variety of options for how your Dashboard will display (or will not display) information
        • Clock 12 Hour Mode (Turn off for 24 hour time) - Choose between 12 hour or 24 time display for any clock template or history
        • Date Format - Switch between MM/DD/YYYY and DD/MM/YYYY formats
        • Cloud and LAN Refresh Intervals - Set these to determine how fast the Dashboard will poll to show updates on screen.  NOTE: LAN refresh is only if a Dashboard can’t connect via websocket.  When connected via websockets, updates should be immediate.
        • Column Width and Row Height - Remove these to auto fit tiles to the grid, or change these to specific values to force the Dashboard to render these tiles as fixed sizes, forcing the Dashboard to scroll if 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 be 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 - Used to remove 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.
Options.png

Templates

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

Advanced

  • Layout - This area 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.
    Advanced Layout.png

Advanced

  • Devices - This area allows you to see a list of authorized devices, the current states and history (if enabled) for each device.  This is helpful to troubleshoot if a device is reporting proper states.
    Advanced Devices.png