Template Issue [BUG REPORT] : “Shade” v. “Shades” mismatch prevents user customization

[user2424]

Lobbying for a fix to this mistake / mismatch in basic Dashboard creation toolset which is preventing user modifications to Template “Shade” (made from the Template Color Editor) from appearing on the Dashboard. This occurs because the auto-generated Layout JSON shown in the Advanced tab references a “Shades” (instead of “Shade”) Template, which doesn’t use the color assignments made in the “Shade” Template Color Editor.

I reported this issue last year… but it may not have been assessed as a ‘bug’. I received suggestions that CSS could get around the issue, but I don’t have experience in that. Seems like asking for a fix is reasonable since use of the Template Color Editor is a pretty fundamental for building basic dashboards.

For previously provided details of the issue, including screenshots, see Dashboard Templates - where are they? Can they be modified? References in Layout window - #3 by user2424

Also see a recent issue mentioned by another user, which I believe is caused by the same problem: The Noob's (in)complete guide to CSS for Hubitat - #780 by user2424

Thanks for looking at this!

[Sebastien]

Tagging @moncho1138

[user2424]

Sure would appreciate it if somebody on staff could fix this bug. I understand that by learning CSS I could workaround this defect… but any user should be able to use the the basic Dashboard tools and have them work consistently. I can control the appearance of all my dashboard tiles — except those using the Shade template.

If I haven’t provided an adequate description of the problem, please point out any gaps. It seems like a straightforward solution is to resolve the references to “Shade” and “Shades” in the Templates code / tables.

Thanks

[staomeeltwo]

@support_team

Requesting assistance with this bug. @user2424 has reported this issue multiple times over a period years. I have the same exact problem. I've been unable to jury rig a solution.

[staomeeltwo]

{
"localization": "English",
"roundedCorners": 10,
"dateFormat": "MM/DD/YYYY",
"hideLabels": true,
"customColors": [
{
"template": "dimmer",
"bgColor": "rgba(255,115,15,0.88)",
"iconColor": "",
"state": "on",
"customIcon": ""
},
{
"template": "switches",
"bgColor": "rgba(255,115,15,0.88)",
"iconColor": "",
"state": "on",
"customIcon": ""
},
{
"template": "door",
"bgColor": "rgba(204,44,44,0.88)",
"iconColor": "",
"state": "open",
"customIcon": ""
},
{
"template": "door",
"bgColor": "rgb(63,63,63)",
"iconColor": "",
"state": "closed",
"customIcon": ""
},
{
"template": "motion",
"bgColor": "rgba(204,44,44,0.88)",
"iconColor": "",
"state": "active",
"customIcon": ""
},
{
"template": "outlet",
"bgColor": "rgba(204,44,44,0.88)",
"iconColor": "",
"state": "on",
"customIcon": ""
},
{
"template": "bulb",
"bgColor": "rgba(255,115,15,0.88)",
"iconColor": "rgb(0,0,0)",
"state": "on"
},
{
"template": "window",
"bgColor": "rgb(63,63,63)",
"iconColor": "",
"state": "closed",
"customIcon": ""
},
{
"template": "window",
"bgColor": "rgb(204,44,44)",
"iconColor": "",
"state": "open",
"customIcon": ""
},
{
"template": "bulb",
"bgColor": "rgba(130,115,105,0.88)",
"iconColor": "",
"state": "off",
"customIcon": ""
},
{
"template": "switches",
"bgColor": "rgba(130,115,105,0.88)",
"iconColor": "",
"state": "off",
"customIcon": ""
},
{
"template": "bulb-color",
"bgColor": "rgba(255,115,15,0.88)",
"iconColor": "",
"state": "on",
"customIcon": ""
},
{
"template": "bulb-color",
"bgColor": "rgba(130,115,105,0.88)",
"iconColor": "",
"state": "off",
"customIcon": ""
},
{
"template": "temperature",
"bgColor": "rgba(178,126,91,0.88)",
"iconColor": "",
"state": "default",
"customIcon": ""
},
{
"template": "dimmer",
"bgColor": "rgba(130,115,105,0.88)",
"iconColor": "",
"state": "off",
"customIcon": ""
},
{
"template": "dashboard",
"bgColor": "rgba(175,100,55,0.88)",
"iconColor": "",
"state": "default",
"customIcon": ""
},
{
"template": "shades",
"bgColor": "rgba(175,100,55,0.88)",
"iconColor": "",
"state": "open",
"customIcon": ""
},
{
"template": "shades",
"bgColor": "rgba(175,100,55,0.88)",
"iconColor": "",
"state": "off",
"customIcon": ""
},
{
"template": "buttons",
"bgColor": "rgba(178,126,91,0.88)",
"iconColor": "",
"state": "default",
"customIcon": ""
},
{
"template": "humidity",
"bgColor": "rgba(172,126,91,0.88)",
"iconColor": "",
"state": "default",
"customIcon": ""
},
{
"template": "shades",
"bgColor": "rgb(232,37,37)",
"iconColor": "",
"state": "on",
"customIcon": ""
},
{
"template": "shades",
"bgColor": "rgb(225,232,37)",
"iconColor": "",
"state": "off",
"customIcon": ""
},
{
"template": "shades",
"bgColor": "rgb(27,239,0)",
"iconColor": "",
"state": "opening",
"customIcon": ""
},
{
"template": "shades",
"bgColor": "rgb(7,0,239)",
"iconColor": "",
"state": "partially open",
"customIcon": ""
},
{
"template": "shades",
"bgColor": "rgb(234,70,0)",
"iconColor": "",
"state": "closed",
"customIcon": ""
},
{
"template": "shades",
"bgColor": "rgb(119,0,255)",
"iconColor": "",
"state": "open",
"customIcon": ""
},
{
"template": "shades",
"bgColor": "rgb(0,255,255)",
"iconColor": "",
"state": "closing",
"customIcon": ""
}
],
"colWidth": "",
"cloudRefresh": 5,
"hsmPin": "",
"hide3dot": false,
"clockMode": true,
"gridGap": 8,
"goBack": true,
"tiles": [
{
"rowSpan": 1,
"template": "bulb-color",
"col": 7,
"colSpan": 2,
"bgImage": "",
"id": 4,
"row": 4,
"device": "570",
"customIcon": "lightbulb_outline",
"templateExtra": ""
},
{
"rowSpan": 2,
"template": "switches",
"col": 3,
"colSpan": 2,
"bgImage": "Lamp",
"id": 16,
"row": 1,
"device": "506",
"customIcon": "bookmark",
"templateExtra": ""
},
{
"rowSpan": 1,
"template": "dashboard",
"col": 1,
"colSpan": 2,
"bgImage": "",
"id": 23,
"row": 1,
"device": "0",
"templateExtra": "270"
},
{
"rowSpan": 2,
"template": "bulb-color",
"col": 3,
"colSpan": 2,
"id": 26,
"row": 3,
"device": "766",
"customIcon": "he-arrow-down2"
},
{
"rowSpan": 2,
"template": "bulb-color",
"col": 5,
"colSpan": 2,
"id": 29,
"row": 1,
"device": "826",
"customIcon": "he-circle-left"
},
{
"rowSpan": 2,
"template": "bulb-color",
"col": 7,
"colSpan": 2,
"bgImage": "Right",
"id": 30,
"row": 1,
"device": "858",
"customIcon": "he-circle-right"
},
{
"rowSpan": 1,
"template": "dashboard",
"col": 1,
"colSpan": 2,
"bgImage": "http://~.~.~.~/local",
"id": 32,
"row": 2,
"device": "0",
"templateExtra": "362"
},
{
"rowSpan": 2,
"template": "shades",
"col": 3,
"colSpan": 4,
"id": 33,
"row": 5,
"device": "765"
},
{
"rowSpan": 2,
"template": "bulb-color",
"col": 5,
"colSpan": 2,
"bgImage": "Arrow",
"id": 35,
"row": 3,
"device": "767",
"customIcon": "he-arrow-down2"
},
{
"rowSpan": 1,
"template": "dashboard",
"col": 1,
"colSpan": 2,
"id": 39,
"row": 3,
"device": "0",
"templateExtra": "912"
},
{
"rowSpan": 2,
"template": "shades",
"col": 7,
"colSpan": 2,
"id": 42,
"row": 5,
"device": "763",
"templateExtra": null
},
{
"rowSpan": 1,
"template": "buttons",
"col": 1,
"colSpan": 2,
"id": 43,
"row": 4,
"device": "466",
"customIcon": "he-question1",
"templateExtra": "1"
},
{
"rowSpan": 1,
"template": "bulb-color",
"col": 7,
"colSpan": 2,
"id": 44,
"row": 3,
"device": "1325"
},
{
"rowSpan": 1,
"template": "temperature",
"col": 1,
"colSpan": 2,
"id": 45,
"row": 5,
"device": "115"
},
{
"rowSpan": 1,
"template": "humidity",
"col": 1,
"colSpan": 2,
"id": 46,
"row": 6,
"device": "115"
}
],
"modePin": "",
"bgColor": "#282828",
"lanRefresh": 2,
"modesPin": "",
"iconSize": "34",
"cols": 8,
"customCSS": ".dashboard div .header{position:fixed;bottom:-1em;right:1em;z-index:999;opacity:.2;zoom:.6;-moz-transform:scale(.6)}\n.wrapper{height:100%;margin-top:0;padding-top:1em}\n.dashBack,.dashName{display:none}\n.dashboard div .header>.flex-auto.justify-end,.dashboard div .header>.flex-auto.justify-end>.flex{display:inline-block}\n\n\n",
"rowHeight": "",
"hideEvents": false,
"noColors": true,
"tempScale": "F",
"readOnly": null,
"rows": 6,
"hideIconText": true,
"background": "http://~.~.~.~/local/livingroom.jpg",
"hideTextShadow": false,
"name": "Living Room",
"fontSize": 14
}

Shades background, image, and icons stay exactly the same on every dashboard no matter what change to the custom properties either through manually manipulating the JSON or using the template to make changes. Note: I randomly selected shade backgrounds to ensure I wasn't missing transitions. I don't know enough to know how to band aide over the problem.

[user2424]

Thank you for pushing to get this corrected. There have to be more than 2 creative dashboard users in the community that have encountered this and ultimately gave up on their design.

[staomeeltwo]

Messaged the support_team directly. No response yet. I'm going to get a response eventually.

[staomeeltwo]

@support_team

Requesting assistance with resolving this dashboard bug.

[cj_rezz]

I was just logging on to report this exact same issue! Been working on my dashboard and cannot get the shade tiles to match the rest of my dashboard. They are slightly whiter despite setting the template colors or adjusting the templates in JSON.

This has got to be a simple fix on hubitat's end no?

[mluck]

@support_team, was just about to open a new thread on the problem with shades on dashboards, when I discovered this pre-existing thread. I can recreate this problem. It creates mayhem for our dashboards.

Can some kind Hubitat person take a look please?

[staomeeltwo]

We are still waiting for the hubitat support team to acknowledge the bug. They have been radio silent.

[mluck]

I’m so accustomed to the Hubitat team being wildly responsive that the silence here makes me wonder if it’s intentional. Anyone with better instincts than me want to speculate why?

[moncho1138]

Trying to replicate the error, the changes I do on template for Shade do reflect on the tile.

Can you specify a step by step of what's being done with what's expected and actually showing?

[user2424]

I thank you in advance for working this issue!
Just to clarify / restate:
…occurs because the auto-generated Layout JSON shown in the Advanced tab references a “Shades” (instead of “Shade”) Template, which doesn’t use the color assignments made in the “Shade” Template Color Editor.

I think the details were exposed by each User above. Fundamentally, the JSON tile definition refers to a “Shades” Template… which doesn’t exist in the listing of available Templates. The available Templates include “Shade” (no ‘s’). So, modifying the details for the “Shade” Template (e.g. the color for a particular state) can be accomplished,,, but has no effect on the rendered Tile because the Tile definition is looking for the non-existent “Shades” Template.

If the situation is still not clear for you, let me know and I’ll try to expand on my explanation.

[moncho1138]

That's the problem I'm facing, after changing color for the Shade template on the editor I do see the changes for different states on the rendered tile on my test dashboard.

The code injects the style to the tile, depending on the state, you can see that happening by inspecting the tile HTML and changing states.

[user2424]

Hope these screenshots help:

Here you see the Template “Shade”. “closed” state is to appear as bright green color.

The bright green is NOT displayed.

Advanced tab details show that auto-created JSON refers to “shades” template, not “shade”. I hadn’t noticed before, but “closed” state color does seem to reflect the desired bright green color — but that isn’t what was rendered (previous screenshot).

Scrolling down in Advanced tab again shows the selection of “shades” template.

What does that tell you? Must be that the underlying tables for “shade” and “shades” are different?

[user2424]

Hoping the previous provided you with clarity on the bug, and its impact to realizing dashboards that include ‘shades’. Please confirm, or ask for more specifics if needed. Would love to see this issue fixed.
Thanks!

[user2424]

@moncho1138
So, please let me know whether you now understand the issue that I (and others) are having. As you appear to be a staff member, I was hoping that your interest would lead to a fix for the template bug.
Thanks

[mluck]

@moncho1138 Ramon, following up on this bug report. Any status you can share? Many of us have been able to reproduce it, but we haven't heard anything official from HE staff on the issue. Would greatly appreciate your input.

[staomeeltwo]

@support_team Requesting an update. Bug has continued to be a problem for years with no resolution.