Q: Tiles type panels

[Kazzy]

I have a play with the Dashboard and it fine for a basic design i have ended up with but i'd like to
get a little bit more elegant.

Used the Switch node to do this.

but i'd like to try make it look like this if its possible..

Not to fussed about the - + bit.. just more doing the tile effect.

probably lots of clever CCS no doubt.

Any pointers if its even possible.

ta

I've tried doing it as a Button in separate groups .. but i get no control on how they are layed out on the canvas..

If i show the group name it then get ugly again.. so these seem to sit to the right of the main group.

[hotNipi]

So something like this can be done with button and a little of CSS

[{"id":"fbdc8e1c.ca83b","type":"ui_button","z":"9038de34.04db3","name":"","group":"110f893b.a0f1d7","order":0,"width":"2","height":"2","passthru":false,"label":"button","tooltip":"","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"","x":590,"y":260,"wires":[[]]},{"id":"1c2c3778.2270e9","type":"inject","z":"9038de34.04db3","name":"","props":[{"p":"ui_control","v":"{\"icon\":\"fa-4x fa-home\"}","vt":"json"},{"p":"topic","vt":"str"},{"p":"payload"}],"repeat":"","crontab":"","once":true,"onceDelay":"0.1","topic":"","payload":"1","payloadType":"str","x":270,"y":260,"wires":[["fbdc8e1c.ca83b","40b55faf.c2915","e73ebe1e.fe05d"]]},{"id":"13d9bcd2.5331a3","type":"ui_template","z":"9038de34.04db3","group":"110f893b.a0f1d7","name":"","order":1,"width":0,"height":0,"format":"<style>\n\n    #Dashboard_STYLED_cards > md-card > button {\n        padding-top: 10px !important;\n        position: relative;\n        text-align: center;\n        line-height: 24px;\n        display: flex;\n        align-items: center;\n        flex-direction: column;\n    }\n   \n\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","x":580,"y":220,"wires":[[]]},{"id":"40b55faf.c2915","type":"ui_button","z":"9038de34.04db3","name":"","group":"110f893b.a0f1d7","order":0,"width":"2","height":"2","passthru":false,"label":"button","tooltip":"","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"","x":590,"y":300,"wires":[[]]},{"id":"25ff69f5.486456","type":"ui_button","z":"9038de34.04db3","name":"","group":"110f893b.a0f1d7","order":0,"width":"2","height":"2","passthru":false,"label":"{{msg.topic}}","tooltip":"","color":"","bgcolor":" {{background}}","icon":"","payload":"","payloadType":"str","topic":"","x":610,"y":340,"wires":[[]]},{"id":"4e5905d5.f93fbc","type":"ui_button","z":"9038de34.04db3","name":"","group":"855d3e6d.56036","order":0,"width":"3","height":"1","passthru":false,"label":"button","tooltip":"","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"","x":470,"y":480,"wires":[[]]},{"id":"e9d6dd00.d865e","type":"inject","z":"9038de34.04db3","name":"","props":[{"p":"ui_control","v":"{\"icon\":\"fa-2x fa-home\"}","vt":"json"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","x":270,"y":480,"wires":[["4e5905d5.f93fbc","d9ed33e8.564e8"]]},{"id":"d9ed33e8.564e8","type":"ui_button","z":"9038de34.04db3","name":"","group":"855d3e6d.56036","order":0,"width":"3","height":"1","passthru":false,"label":"button","tooltip":"","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"","x":470,"y":520,"wires":[[]]},{"id":"e73ebe1e.fe05d","type":"change","z":"9038de34.04db3","name":"","rules":[{"t":"set","p":"background","pt":"msg","to":"#808080","tot":"str"},{"t":"set","p":"topic","pt":"msg","to":"HOME","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":440,"y":340,"wires":[["25ff69f5.486456"]]},{"id":"110f893b.a0f1d7","type":"ui_group","z":"","name":"STYLED","tab":"7179c13.0628d4","order":13,"disp":true,"width":"6","collapse":false},{"id":"855d3e6d.56036","type":"ui_group","z":"","name":"DEFAULT","tab":"7179c13.0628d4","order":2,"disp":true,"width":"6","collapse":false},{"id":"7179c13.0628d4","type":"ui_tab","name":"Dashboard","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

[Kazzy]

thats really cool hotNipi, thanks for taking the time to mock up what i was thinking

so just need some little functions or something around them to behave like an on/off state/action.
i'm sure i can figure that out..

[Kazzy]

Just to be curious.

how did you know what CCS to use.

#Dashboard_STYLED_cards > md-card > button

and

you are passing the ICON to the button via UI_CONTROL and passing the ICON data

is there a list of these fieldnames for UI_CONTROL.. is it the same for say the other ui nodes?

ta

[hotNipi]

@Kazzy

how did you know what CCS to use.

I once took a time to learn the structure of dashboard. And to keep my knowledge base up to date, I take a little challenges like this with pleasure

As you wanted your buttons to represent the state of something, you probably need to have oportunity to change the icon or icon styles dynamically. That's the reason i did it that way. You can change color of icon as the state independently of the text and background color.
Feel free to ask how to do it if needed..

To surround the button with functions - before the button should be function which is triggered by some state change event, that function should be able to figure out what to send to button according to incoming state.
After the button (depends on what your buttons do) but I'd recommend another function which has 2 outputs. One to send out for processing, and the other to send back to button. That other should make the button disabled.
Then after processing, you expect some feedback and that feedback is again same event which makes your button to represent correct state. (and button enabled)
Ask for example if my explanation feels too complicated..

Widget configuration via msg.ui_control

[Kazzy]

Im Back

I've started to get the Button Toggle working.. it took a little think as the Button only returns
one response when click.. so got that working now as a toggle on/off (looks very nice!)

How can i style the TEXTbox node so it looks similar.. so eg.. Background colour and text centred, but no icons required.. just want to use it a separator. currently it just White text is the default.

try to just do CSS #System_Main_cards > md-card > nr-dashboard-text
didnt do anything .. but was expected as i was just going in blind :lol:

If i inspect the TEXTBox area i see

so try to see what do you look for to tweek at?

here what my button flow now looks like.. I have Philip Hue Bulbs.

so repeated that for each bulb.

[hotNipi]

Wait for a little I'll get a computer

About #System_Main_cards
I guess that you have at least a slight understanding about the rules from where this wording of element selector originates. (There is a tab called System where is a group called Main)
(Stating that out just to be sure we are about on same level of situation)
Any rule created that way only affects inside that selector. Even for classes.

But, the structure is not common for all elements. So for text widget (nr-dashboard-text) it takes a little brutal force to have some effect.
So in my case for background color:

 #Dashboard_STYLED_cards > md-card.nr-dashboard-text{
           background-color: #097479 !important 
    }

For text alignment to center you can adjust it from widget configuration and it works. But if something different needed ...

[Kazzy]

@hotNipi

#Dashboard_STYLED_cards > md-card.nr-dashboard-text{

Many thanks.. yeah i was able to figure out the #Dashboard_STYLED_cards was referring
to how the dashboard was layed out.. it did take a little time before i was OHhhhhh i see..

So i was pretty close .

i was doing #System_Main_cards > md-card > nr-dashboard-text {

so why md-card.nr-dashboard-text instead of md-card.nr > dashboard-text{

Maybe this was a CLASS.. where Button it was broken down to a TYPE.

as this is a global change to the current tab view.. it make it tricky added normal text info
so i might have to rethink what i was trying to do

All great learning information though.. i can see i'll spend ages just moving panels around .

[hotNipi]

@Kazzy

so why md-card.nr-dashboard-text instead of md-card.nr > dashboard-text

Read it from here. That is quite of thing to know.

CSS Combinators

And may be a little more from here

https://www.w3schools.com/cssref/css_selectors.asp

In addition for:
#System_Main_cards > md-card.nr-dashboard-text

There is 2 paragraphs inside that element. one has class .value, which applies the bold rule. So You can play with them also.

[Kazzy]

quick one mate.

in your example, you had two examples.. one as 2x2 button.. and then another 4x1 so it was a ICON and then Text.

I saw you did that as two seperate groups, so you applied the style to just one group.

Is there anyway to do that but with the same group?

IE can you target the style to a per button only rather than it be for all buttons?

ta.

[hotNipi]

That's a bit tricky but doable. You should find something common or uncommon in that element cascade.
And then you can do selector which affects based that commonness.

For example those buttons are inside md-card with size 2x2 units.
In html it is written to ui-card-size attribute

So taking this as common, the CSS will be:

#Dashboard_STYLED_cards > md-card[ui-card-size="2x2"] > button{
        padding-top: 10px !important;
        position: relative;
        text-align: center;
        line-height: 24px;
        display: flex;
        align-items: center;
        flex-direction: column;
    }

Only thing what can be unique at the button is its aria-label and that is true only if all your buttons have different labels and you don't override the label with msg.something. Buttons don't have any id so not much to look at that level.

And also the nth-child selector may work

Useful :nth-child Recipes | CSS-Tricks

[Kazzy]

wow that really cool.. and so simple once you know how... and thanks for the Nth Child link i can think that could be useful in some ways later .. i'll have to have a play.

here your handy work in action.. i can tweak colours/layouts later.. just want to get the basics feel of it all first.

[hotNipi]

Seems like I have deserved a little sauna and couple of beers. Chers