Guys, I could use some help moding a DTH tile page

Developer Programs Writing Device Types
1

Continuing the discussion from Improved UI for Aeon Minimote:

This was my post in a different group.
Does anyone have time to help a code-illiterate brother out?

Here’s a repost of the original thread:
This is the perfect DH to use as a manual Hub mode changer.

Once and a while my hub location mode doesn’t change properly, and I don’t want to re-trigger a routine that will change the mode, so this DH is perfect. I just assigned mode names to all the press/hold buttons I needed, and mapped button 1 press, button 1 hold, button 2 press, etc to “Location: Change location mode” in Webcore.
This way I can manually sync up the hub mode in case it failed to switch, specifically for which mode I want to set all in one clean and easy to access place.

All that said, I’d love to customize the DTH tile page a bit. I have VERY limited experience with modifying labels and colors, otherwise I don’t mess around much with the code.
How could I, or could someone maybe mod the code to make some stuff display a bit different?

What I want to do is make a main tile that shows the current mode rather than having to switch to the “more” hamburger tab in the app. Then make one single text tile, and put all the buttons in a 3x wide format.
Essentially to make it emulate the look of the Iris/Centralite keypad but just this button controller. Also on the main Devices list, lave it show the current hub mode.

Some pictures to illustrate concept.
What I’ve currently done:

IMG_3089.PNG1242×2208 209 KB

How I want it to look/function for this use case:

IMG_3091.JPG3024×4032 1.93 MB

Based on the IRIS/Centralite Keypad display layout/concept. The DTH is in post 1 of the linked thread.

IMG_3090.PNG1242×2208 184 KB
IMG_3088.PNG1242×2208 157 KB

Thanks!

2

Below is an interface from my LB-130 Device handler. It is very similar and has examples of most of what you are trying:

  1. If you know the icon name, you can change based on state (mode). You can also change color. You can also change the Icon after installation in the settings page on the application.

  2. Below is sort-of crunched up to get everything on a single display page. Changing height on the lower tiles will make them like you show, but the lower part of the page will not automatically appear.I would suggest getting rid of the instructions.

  3. The control icons can also have colors (as in my Circadian tile) and the text can change based on state. Color can / should change. Usually white for off and blue (SmartThings standard) for on.

    tiles(scale:2) {
    multiAttributeTile(name:“switch”, type: “lighting”, width: 6, height: 4, canChangeIcon: true){
    tileAttribute (“device.switch”, key: “PRIMARY_CONTROL”) {
    attributeState “on”, label:’${name}’, action:“switch.off”, icon:“st.switches.light.on”, backgroundColor:"#00a0dc",
    nextState:“waiting"
    attributeState “off”, label:’${name}’, action:“switch.on”, icon:“st.switches.light.off”, backgroundColor:”#ffffff",
    nextState:“waiting"
    attributeState “waiting”, label:’${name}’, action:“switch.on”, icon:“st.switches.light.on”, backgroundColor:”#15EE10",
    nextState:“on"
    attributeState “commsError”, label:‘Comms Error’, action:“switch.on”, icon:“st.switches.switch.off”, backgroundColor:”#e86d13",
    nextState:“on”
    }
    tileAttribute (“device.level”, key: “SLIDER_CONTROL”) {
    attributeState “level”, label: “Brightness: ${currentValue}”, action:“switch level.setLevel”
    }
    tileAttribute (“device.color”, key: “COLOR_CONTROL”) {
    attributeState “color”, action:“setColor”
    }
    }
    controlTile(“colorTempSliderControl”, “device.colorTemperature”, “slider”, width: 4, height: 1, inactiveLabel: false,
    range:"(2500…9000)") {
    state “colorTemperature”, action:“color temperature.setColorTemperature”
    }
    valueTile(“colorTemp”, “device.colorTemperature”, inactiveLabel: false, decoration: “flat”, height: 1, width: 2) {
    state “colorTemp”, label: ‘${currentValue}K’
    }
    standardTile(“bulbMode”, “bulbMode”, width: 2, height: 1, decoration: “flat”) {
    state “normal”, label:‘Normal Mode’, action:“setModeCircadian”, backgroundColor:"#ffffff", nextState: “circadian"
    state “circadian”, label:‘Circadian Mode’, action:“setModeNormal”, backgroundColor:”#00a0dc", nextState: “normal”
    }
    standardTile(“refresh”, “capability.refresh”, width: 2, height: 1, decoration: “flat”) {
    state (“default”, label:“Refresh”, action:“refresh.refresh”, backgroundColor:"#ffffff")
    }
    standardTile(“refreshStats”, “Refresh Statistics”, width: 2, height: 1, decoration: “flat”) {
    state (“refreshStats”, label:“Refresh Stats”, action:“setCurrentDate”, backgroundColor:"#ffffff")
    }
    valueTile(“power”, “device.power”, decoration: “flat”, height: 1, width: 2) {
    state “power”, label: ‘Current Power \n\r ${currentValue} W’
    }
    valueTile(“engrToday”, “device.engrToday”, decoration: “flat”, height: 1, width: 2) {
    state “engrToday”, label: ‘Todays Usage\n\r${currentValue} KWH’
    }
    valueTile(“monthTotal”, “device.monthTotalE”, decoration: “flat”, height: 1, width: 2) {
    state “monthTotalE”, label: ‘30 Day Total\n\r ${currentValue} KWH’
    }
    valueTile(“monthAverage”, “device.monthAvgE”, decoration: “flat”, height: 1, width: 2) {
    state “monthAvgE”, label: ‘30 Day Avg\n\r ${currentValue} KWH’
    }
    valueTile(“weekTotal”, “device.weekTotalE”, decoration: “flat”, height: 1, width: 2) {
    state “weekTotalE”, label: ‘7 Day Total\n\r ${currentValue} KWH’
    }
    valueTile(“weekAverage”, “device.weekAvgE”, decoration: “flat”, height: 1, width: 2) {
    state “weekAvgE”, label: ‘7 Day Avg\n\r ${currentValue} KWH’
    }
    main(“switch”)
    details(“switch”, “colorTempSliderControl”, “colorTemp”, “power”, “weekTotal”, “monthTotal”, “engrToday”, “weekAverage”, “monthAverage”, “bulbMode”, “refresh” ,“refreshStats”)
    }
    }

1 Like
3

Did you end up having any luck with this? Im curious as to how the dth would look like.

4

Take a look at the modeCurrent tile:

other UI info:

2 Likes