Custom device template for Dashboard?

[photonclock]

Hubitat C8 2.4.1.177

I've been delving into trying to make a custom device driver for my Mini-Split Air Conditioner. The driver is no problem, but I'm not sure how to put it on a Dashboard.

The driver has:
A boolean switch (representing cool/heat)
A boolean switch (representing on/off)
Two variables climateTempMin, climateTempMax (decimals, representing min/max temp thresholds)
Functions for changing the climateTempMin/Max values, etc. Then I'd use buttons to increment/decrement those vars by 0.5 degrees (not unlike the Commands page in Device info)

I can figure the Device driver out on my own. No assistance needed there.

What am I stuck on is, how can I next make a custom template in Dashboard representing this new device, so I can assign it to a tile?

The simple template I'm imagining for this device would be like:

                  Cool/Heat
                   [switch]
                 Set Min Temp
[button] [climateTempMinValue TextField] [button]
                 Set Max Temp
[button] [climateTempMaxValue TextField] [button]
                    On/Off
                   [switch]

Is it possible? Then I'd make a new "Climate" dashboard, with one big tile on it (for now), and assign my device to it, and display all the above controls/labels in that single tile?

Can I somehow make a custom template for Dashboard, assign it to a virtual device whose type is my custom driver, and then add that device to a Dashboard with a template representing the device's switches and buttons (commands).

Thanks!

PS - if something like what I want to do already exists, I'd appreciate a link. And, I've found a couple threads with elaborate workarounds for making a custom template for a custom device by mapping individual tiles to each element of the device user interface, but that seems really kludgy...hopefully those aren't the only solutions?

[neonturbo]

There are some community remote control builder and tile builder devices which may work for what you want. Otherwise, you are limited to the normal templates like switch, dimmer, button, and all that.

You could probably use CSS to customize a button or other template. There is a huge thread on here about how to edit CSS and what CSS people have documented to work.

Why not add thermostat capability to your driver so you can just use the normal thermostat tile?

[photonclock]

@neonturbo

There are some community remote control builder and tile builder devices which may work for what you want.

Can you link me to whatever you think is most relevant? I've been reading up on some of the CSS tools, but those don't seem to give me the information I'm looking for. I'm too new to this to know what all is possible so I probably attack every problem by re-inventing the wheel. But having mostly figured out how to write drivers, I'm just trying to grasp how I then expose whatever commands/parameters are in the driver to a device template for the dashboard. The appearance of the dashboard tile is secondary at the moment. Per my post above, I just want to understand if it's possible for me to effectively make a custom tile that contains multiple controls, like a switch/slider, and several buttons, which can be interacted with. As an analogy, Hubitat's default "Color Bulb" template, when assigned to a Dashboard tile, shows a tile that when tapped on the icon functions as on/off, and tapped outside the icon brings up a separate UI with various controls (bulb color picker, brightness level, etc).

So question #1 is - does a Dashboard tile that facilitates control of multiple parameters always have to do it in a separate UI, or can a switch + a button be placed on a tile so the user can control either without opening a new UI? (that's probably a dumb question - that part is probably just the CSS implementation)

And then question #2 is - if I have a driver that has a switch and several actuators, how can I make a Dashboard template to access my custom configuration of switches and actuators?

@neonturbo

Why not add thermostat capability to your driver so you can just use the normal thermostat tile?

Close your eyes and imagine for a moment that I'm a Golden Retriever sitting at the wheel of your car as we race down the highway. You ask me why I keep turning the windshield wipers on whenever I change lanes. I look at you and wag my tail. You scream at me to for God's sake please keep my eyes on the road. I start barking.
(you see where I'm going with this?)
[I have no idea what I'm doing]

But seriously, if you could link me to whatever "remote control builder and tile builder devices" you're thinking of, I'd sincerely appreciate it.

[photonclock]

Just to note - I had found this:

[RELEASE] Tile Builder - Build Beautiful Dashboards

Tile Builder is a novel way of presenting data on a Hubitat® Dashboard. Rather than each tile being a single unique device, Tile Builder allows data from multiple devices to be presented on the same tile in a variety of formats. Tile Builder has five child apps for creating different kinds of tiles. 1) Attribute Monitor tiles contain any number of devices for a single attribute. In the following case it's temperature. The table can be sorted by the device name or the attribute value (text or n…

And it's very interesting...but it seems to be oriented towards data display, not interaction...so it seems like not the right approach.

And I found the Simple CSS Editor tool...also not what I'm looking for...

Trying to learn...so much information...

[neonturbo]

[RELEASE] Remote Builder – A New Way to Control Devices - 7 Remotes Available

Remote Builder allows you to create rich virtual remotes for controlling devices around the house. In the initial release there are 3 unique remotes as shown below. Remotes are the virtual equivalent of a physical button remote you might have around the house. Just like most physical remotes, these virtual remotes do not display the state of a device. They are intended to be used in proximity with the device being controlled, so the state is directly observed by the user. [image] Remote Build…

[RELEASE] SmartGrid - Create grids of controls that you can access from anywhere

Although this is a module of Remote Builder I thought it worth creating a separate thread vs announcing it deep within a 6 month old thread where it may go unnoticed by many. In the vein of "A picture says 1000 words" here is an example of what you can create with SmartGrid. [image] Rather than list out all of the things that it can do I think this summarizes it pretty well. [image] Version 4.X.X adds a Custom Sort order, Separator Rows, Customs Rows and Advanced Variables. [image] You …

[chrisbvt]

I agree with photonclock, this driver should act like a thermostat, but you don't actually need to use the capability in your driver, but you could add it, which might make sense since your driver is actually a thermostat.

I have found that dashboard tile templates are only looking for the the capability attributes to display, and the command methods to call, so you don't actually have to implement the full capability in the driver, just supply the attributes and command methods for the tile to use.

See the capabilities page for the thermostat capability attributes and methods used. You will need to rewrite your driver to use actual attributes and methods for the thermostat capability to use the tile.

This is what you would need to add to your driver, and implement the methods to do the sendEvent() to set the attribute states. Call setThermostatAttributes() in the installed() or updated() method, using the values you want to see displayed in the tiles for the drop down menus.

attribute "thermostatMode", "ENUM"
attribute "thermostatOperatingState", "ENUM"
attribute "thermostatFanMode", "ENUM"
attribute "supportedThermostatFanModes", "JSON_OBJECT"
attribute "supportedThermostatModes", "JSON_OBJECT"
attribute "heatingSetpoint", "ENUM"        
attribute "coolingSetpoint", "ENUM"
attribute "temperature", "NUMBER" 

// intialize thermostat attributes for the sake of the thermostat tile controls
def setThermostatAttributes() {
    sendEvent(name: "thermostatOperatingState", value: "off")
    sendEvent(name: "supportedThermostatFanModes", value: '["low","medium","high","auto","disable"]')
    sendEvent(name: "supportedThermostatModes", value: '["heat","cool","idle"]')
    sendEvent(name: "thermostatFanMode", value: "auto")
    sendEvent(name: "thermostatMode", value: "idle")
}

command "setThermostatOperatingState", [[name:"operatingState",type:"ENUM", description:"Set Operating State", constraints:["venting","idle","heating"]]]
command "setCoolingSetpoint", ["NUMBER"]
command "setHeatingSetpoint", ["NUMBER"]
command "setTemperature", ["NUMBER"]
command "setThermostatFanMode", [[name:"thermostatFanMode",type:"ENUM", description:"Set Vent Fan Mode", constraints:["auto","low","medium","high","disabled"]]]
command "setThermostatMode", [[name:"thermostatMode",type:"ENUM", description:"Set Thermostat Mode", constraints:["heat","cool","idle"]]]

def setThermostatMode(mode) {
}
def setThermostatFanMode(mode) {
}
def setThermotatOperatingState(opState) {
}
def setHeatingSetpoint(temp) {
}
def setCoolingSetpoint(temp) {
}

For a switch tile, you just need to have the attribute that is titled "switch" for the switch, as well as an on() and off() method for the tile to call.

For buttons, use the pushableButton capability to make as many buttons as you want, and add a push(buttonNumber) method. Each button on the dashboard can be resolved to the number sent to the push(#) method.

On/Off can be a switch, and cool/heat is now thermostatMode enum, not a switch.

Hopefully all that makes sense.

Edit: I see in this post I suggested you need to use the defined capabilities, but I think I was trying to explain a bit how the thermostat capability is useful here. As explained in my next reply, you can use any values outside of the defined capability values, to make the tile display whatever you want to (staying to type), and make your own custom menu controls that might have nothing to do with a thermostat.

[sburke781]

Perhaps if you could mock-up an image of the tile you are wanting to setup, that might make it easier to target any suggestions....

[photonclock]

I kinda did exactly that if you look at my first post above.

@photonclock

                  Cool/Heat
                   [switch]
                 Set Min Temp
[button] [climateTempMinValue TextField] [button]
                 Set Max Temp
[button] [climateTempMaxValue TextField] [button]
                    On/Off
                   [switch]

[photonclock]

Ok. You gave me some ideas here. Yes, it makes sense. I just have to do it to fully grasp it. Thank you!

[chrisbvt]

I wrote a greenhouse controller this spring to run my greenhouse, with vent fans to cool it during the day, and a heater for nights, so I just happened to have recently done what you are asking about using a thermostat tile for dashboard controls.

If you don't have a fan mode for your device, you can use that menu on the tile for other things, as whatever you set in the "supportedThermostatFanModes" tile attribute are the options that you will see in tile pop-up menu, and that displayed value is also the value the tile will send to the driver when it uses the driver command that will call your "setThermostatFanMode(value)" method. It works the same way with the thermostatMode menu, the tile will show, and send, any value in the menu that is set in the supportedThermostatModes attribute, beyond what is defined in the actual Thermostat device capability.

[photonclock]

Ok, I pretty much figured it out, along with the original clue that @neonturbo dropped about "adding thermostat capability to my driver". Thank you @chrisbvt !

I also struggled and found my way through the painfully unintuitive inverse logic of the "relative to device?" feature, for making comparisons between the thermostat device "cooling points" and my temp sensor. Quite odd how that feature works...but...I gotta admit, it does work. I also figured out how to sync the thermostat device's temperature to the temperature being reported by the sensor, so it's all in the tile. Then after doing all that, I read somewhere that there's also a built-in Hubitat app for managing all this stuff...? Guess I'll have to look at that...

But is there a way to figure out how all the attributes of a device are mapped to css, and then override the css? For example, the 'thermostat' device tile in Dashboard shows the coolingSetPoint when in Cool mode, and the heatingSetPoint when in Heat mode, but I would like it to show both of those set points with the up/down arrows at the same time, pretty much just like my [text ui layout] example in my first post on this thread. I can figure out CSS, I know enough to be dangerous, but I've still not grasped how people are figuring out how to do custom CSS to map any/all device attributes to their own custom layout.

[photonclock]

I installed Remote Builder and played with it. Haven't sprung the $12 to see the 'pro' templates, but it seems like it's worth grabbing no matter what, certainly the SmartGrid looks very very useful for consolidating information, etc.

But...is there any tool available that's a full fledged DESIGN tool for Hubitat Dashboards, ie:
Pick any one or more devices
Pick any device atttributes from those devices
Map those device attributes to UI elements (label, textfield, switch/slider, button/arrow, etc), add labels, pick some colors, and create a totally customized tile comprised of user selected device attributes which are interactive?

The Remote Builder kinda does it, but it's shoehorned into a "remote control" paradigm in terms of the UI, and the SmartGrid (if I understand it correctly, not having used it yet) seems to be intended for read-only information consolidation/layout.