Hubitat™ Dashboard Documentation


#1

Hubitat™ Dashboard Documentation

Install the App from “Load New App” in the Apps Section of the Hub’s Web UI.
image


Go ahead and click on the link and install the Dashboard

image
Click Done and the App is now Installed.


Go ahead and click on the Hubitat™ Dashboard App that is now in your Apps List

Now let’s create a New Dashboard!
image

Click on “Create a New Dashboard”

Now let’s start by giving your dashboard a name. This name will appear at the top of the HTML dashboard. Pick something descriptive like what room you are going to use this dashboard or its main purpose.

Now we need to decide if we 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” or if you want to pick a few devices, go ahead and select “Choose Devices” and select which devices you want to pick.

Next we need to pick our default Layout. Go ahead and click “Next” or choose the “Layout Options” Button to configure the Dashboard Layout Options.

Hubitat™ Dashboard uses a Grid system to assign your devices to it. We have included a few default layout options, or you can 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.

Populate The Dashboard with Devices
image

If you just want all the devices you selected (or every device if you authorized all devices) you can select this option and the dashboard will do its best to pick a tile for your device and put 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.

Lock Down The Dashboard
image

If you want to make your dashboard read only, meaning, it can’t be changed in the web view, you can toggle this on. If you need to unlock your dashboard you can always come back in here and flip this later. While setting up a new dashboard, you will want to leave this “off”.

Background Options
image

Each dashboard has the option to specify a background color and a background image. Pick a background color from the drop down to your liking. The background image needs to be accessible to the client. We include a default “Hubitat” logo but you can change or remove this to your liking. These two options are also configurable in the Dashboard Interface, once we have set up the dashboard.

Go ahead and click “Done” and you will have your first dashboard installed.
image

Notice you now have a “Dashboards Menu” which is a link you can click on and this will open a new window / tab.
image

Bookmark this URL / Link as this is where you can access all your dashboards. Each dashboard has a Cloud and Local LAN Link. The Cloud Link allows your dashboard to be viewed from anywhere where 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, you will want to use this link.

Let’s go ahead and click on the “Bedroom” Local LAN Dashboard (or whatever you named it).

This is the default / empty dashboard. If you had chosen the option:
image

It would have been full of devices you authorized. Something like this:

Your devices will be represented here. You can customize each tile individually, more on that later. For now let’s assume you have a blank dashboard.

On the right hand side is the dynamic “Side Menu” that can change the Grid Layout Settings, Add, Edit or Remove Tiles.

Grid Size:
Your dashboard is broken up into a Grid. This grid is defined by Rows and Columns. The default is based on what you picked when creating your dashboard.
image

You can easily change the number of Rows and Columns by clicking the arrows next to each number. You will notice a real time preview of expanding or shrinking grid

You can also change the Background Color, Background Image and change the font size as well.
image

There is a little “i” in the bottom right corner of the side menu that has a popup with your layout and devices.

Don’t forget to click “Update Grid” to save your changes and see them on the dashboard.

Add A Tile:
image

This section allows you to add a tile anywhere in the grid. If you want a row at the bottom, or side, you can easily pick the Row and Column to add a tile. The defaults are going to always be the first available from Left to Right, Top to Bottom.

Also, each tile can “Span” Rows and Columns, allowing you to create larger tiles then the default 1x1 size. You can set the Span for the new tile now, or easily edit it later.

After you have picked your Tile Position and Tile Size optionss. The next area is to pick the “Tile Options”
image

You have two main choices here. First is a “device”. This list contains all 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.

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

If you chose any other device, you can then choose a “template” that would match the use case for that device.

However, there are also some special templates that don’t require a choice of a device. These are “image” and “link”. 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.
image

The rest of the templates are meant to match up with how you want to see the device in the tile. Some templates are single attribute focused. Like “battery” or “temperature”. These single attribute templates will just show that. 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 gives you buttons to dim up and down the dimmer.

Template Colors
image
The “Template Colors” button pops up a new area to pick colors for each Template and that template’s state(s).

Pick a template
image

Pick a State
image

Then pick a color for the Icon / Text Color and also for the tile background color for that state and click “Save Custom Color”
image

image

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.

Templates:

Acceleration
image

This is a single use tile that displays acceleration status of any device with the acceleration attribute.

Attribute
image
image
This is a custom tile that will display the text value of any attribute name. Just enter the name below the drop down.

Battery
image

This is a single use tile that displays the battery status of any device with the battery attribute.

Bulb
image

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.

Button
image

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.

Carbon-dioxide
image

This is a single use tile that displays the reported carbon dioxide (CO2) levels in parts per million (ppm)

Carbon-monoxide
image

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.

Clock-date
image

This is a special tile that displays your local browser time with seconds along with the current date.

Clock
image

This is a special tile that displays your local browser time with seconds.

Contact
image

This is a single use tile that displays the contact attribute of a device. Green means open, gray means closed.

Dashboard
image

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.

Dimmer
image

This is similar to the Bulb tile. Click to turn on/off the Dimmer and the arrow icons to change the level.

Door
image

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.

Door-control
image

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.

Energy
image

This is a single use tile that displays the energy attribute reported from the device.

Garage
image

This is a single use tile that displays the contact attribute closed is gray and pointing down, and open is green and pointing up.

Garage-control
image

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.

Humidity
image

This is a single use tile that displays the humidity attribute as a percentage.

Illuminance
image

This is a single use tile that displays the light level in lux from the device.

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

Link
image

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.

Lock
image

This is a multipurpose tile that shows the lock state and battery. Clicking on the lock will lock (green) or unlock (gray) the lock.

Mode
image

This is a special tile that will allow you to view the current mode and select a new mode for your hub / location.

Momentary
image

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.

Motion
image

This is a multipurpose tile showing motion detected (green eye) or not (gray) and the values of the temperature sensor and battery level.

Multi
image

This is a multipurpose tile showing contact sensor open (green) or closed (gray) and the values of the temperature sensor and battery level.

Music-player
image

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.

Outlet
image

This is a single use tile that turns on (green) or off (gray) the device via the switch attribute.

Presence
image

This is a multipurpose tile that shows the presence (green) or not (gray) of a device and the battery level.

Relay
image

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.

Shades
image

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.

Smoke
image

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.

Switch
image

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.

Temperature
image

This is a single use tile that shows the current temperature reported by the device assigned to it.

Water
image

This is a multipurpose tile that shows a water sensor wet (green) or dry (gray) and the reported battery level and temperature

Window
image

This is a single use tile that shows the open or closed state of a window.

Add First Tile
Go ahead and pick one of your devices and a matching template and click “Add Tile”

You should now see your new tile at its specific row and column location in the grid.

Notice how the Add A Tile section has now moved the Column count up, allowing you to add another tile next to the last one.

Before we add more tiles, let’s look at how to Edit the tile we just added.
image

The “3 dot” menu button in the top right of each tile will open up the side panel and allow you to edit that tile. Go ahead and click that.

Notice that the menu has changed to allow you to update the Row, Column and Spans, along with picking a different device and/or template. You can then update the tile or click the “Delete Tile” button to remove that tile from the layout.

Let’s go ahead and move this tile to the bottom row. Click the up button next the row number until it is at the last row. Don’t worry, even though it allows you to click past the maximum number of rows, it won’t allow you to place a tile off the page. After you have set the row to its max, click “Update Tile”

You have now placed a tile in the bottom left corner. You can place tiles anywhere you want. You can even overlap tiles, so use wisely.

Now lets edit that tile one more time, and move it up a row and set the size for both rows and columns to be two.
image

This will result in a 2x2 tile like this:

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.

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.

Advanced Options


Heading back over to the Dashboard Child app. At the bottom of this you will have an option for Advanced Options.
image
You can adjust the Refresh Rate for the dashboard for cloud and local links.

You can also set the Clock templates to display time and date in 24 hour and EU Date formats.

Layout Import / Export
After you are done adding and editing your tiles, let’s switch back to the Dashboard “Child” app and go back in to the Layout Section.

You’ll notice a new option at the bottom called “Import / Export Layout” go ahead and click on that.

The “Import / Export” Layout section allows you to copy your current layout “json” code or paste in new “json” layout code and override your existing layout. 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.

Once you have pasted in a different layout, tab out of the box and you will see this:
image

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

When importing someone else’s layout, exercise caution and realize you will need to update each tile with your own devices.

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 accomodate your needs.

Helpful Hints:

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


Show Off Your Dashboards!
Hub Update 1.0.5.707
Mobile app question
Looking for advice before move to Hubitat
What is the best way to know what Hubitat can and can't do
Remote Door Unlock
iOS, Android and other client Apps
Konnected Alarm Panel wired alarm system integration
#2

Nice… things are looking good with Hubitat.


#3

:clap: :clap: :clap:


#4

Just updated and had a quick play.
Really liking this. Can now see and control my devices remotely.
Great job.


#5

Will there be a Power tile? I use those on my dashboards more than energy. Seeing live wattage lets me know when things are on or off. Or is that what the Energy tile is showing?


#6

What attribute in your driver reports power? The energy one reports the energy attribute value.

Which brings up an interesting feature request for a custom single attribute tile. You would just enter the raw text of any attribute and it would display value.


#7

I don’t know. That’s the thing that’s holding me back on all my outlets. They report power but not energy. So now I’m wondering if I’m confused on which is which. In ST, all my devices listed both, watts was power, real time reading of usage, and energy was cumulative kw/hr. I still haven’t gotten energy readings to work on my Iris smart plugs, with the included driver or the couple I’ve imported over from ST.

I do like the single attribute tile, that’d be sweet!


#8

First - Thank you and the Hubitat Team for this excellent new release! Great work!

Second - Would this ‘custom single attribute tile’ allow the use of Custom Attributes within custom device drivers? If so, that would be fantastic! And why limit it to a single attribute? Maybe make two new tiles… a single, and a multi. Allow users to specify the device/attribute combo for each field on a Multi? Just an idea… :slight_smile:

Third - I see the Window Shade Tile allows one to click it to open/close the shade. However, the Garage Door Tile does not seem to allow user interaction. I would really like to be able to use the Hubitat Dashboard to remotely control my Garage Doors without having to add another tile.

Thanks!
Dan


#9

The garage door tile could be updated to send on/off assuming the garage device has a switch capability? Personally, I don’t like having a tile that can accidentally open my garage door. Thus the view only contact version. You could do a switch template for the garage door device or button depending on how you have it set up.

Thanks for the feedback!


#10

I completely understand the concern over making it too easy to accidentally open/close a garage door. However, I feel that should be up to the user to decide. Maybe have two templates - one that is read-only, and another that properly implements the open() and close() commands per the ‘Door Control’ and ‘Garage Door Control’ capabilities taxonomy? You could default the ‘Auto Assigned Template’ to the read-only flavor, so users would have to specifically switch it over to the version with open() / close() capabilities.

Thoughts?

name: Garage Door Control
status: live
attributes:
  door:
    type: ENUM
    values:
    - closed
    - closing
    - open
    - opening
    - unknown
commands:
  close:
    arguments: [
      ]
  open:
    arguments: [
      ]
name: Door Control
status: live
attributes:
  door:
    type: ENUM
    values:
    - closed
    - closing
    - open
    - opening
    - unknown
commands:
  close:
    arguments: [
      ]
  open:
    arguments: [
      ]

#11

One more question… The documentation in the first post mentions that the “Momentary” tile calls the ‘on()’ command. Per the traditional Momentary Capability, I believe it is supposed to call the ‘push()’ command. Thoughts?

name: Momentary
status: live
attributes: {
  }
commands:
  push:
    arguments: [
      ]

#12

Awesome work guys, dashboards are such an important piece of the puzzle, massive potential here.

Feature Request: “Nice to have” … When editing an existing tile, a cancel button would be good, or maybe re-click the edit button (triple dot in the top right of the tile) to exit without saving changes?


#13

The button template follows the momentary attribute… This is really a long story… Momentary follows the pattern of momentary switch which only sends on instead of on/off.

We went back and forth on this… Some users of other dashboard solutions are used to using “Momentary Switch” as a feature…


#14

@martybird thanks for the feedback. You can close the side panel by clicking the “Close Panel” at the top right… Clicking any other tile will also cancel and switch to that tile to edit.

I’m sure this will lead to the warn if I am making changes to a tile but didn’t update feature request too. :slight_smile:


#15

We’ll look into the option to have two tile templates for garage door / control. Thanks for the feedback!


#16

Another option is to have a button that display a confirmation dialog box? Would be good for garage doors and locks to add a second step as confirmation.


#17

Good suggestion… Will add it to the list.


#18

OK, so duh on me :blush: that is effectively what i’d been looking for. Fwiw, just didn’t occur to me that the text up top of the side panel was it, instinctively I was looking for a button down at the bottom.

Like i said, just ‘nice to have’ priority UX element, I expect there are probably bigger fish to fry :slight_smile:


#19

Loving it.

Any planes for a thermostat template? A tile to show the temperature (and maybe humidity) and allow adjusting it.


#20

Perhaps it’s just me but I find the tile positioning/span boxes adjustments a bit inconsistent.
The row and column both have up down arrows reflecting increment/decrement whereas it might be more intuitive if the column had left right.
The span positioning does show it left/right up/down but the movement left right is adjacent to the row adjustment rather than the column one which seems counter intuitive.