Feature Request - Off - Auto - On Toggle

Dashboard
41

Simply made mention of my 'edge case' so that as they were developing the node.. they might expose a few properties that would allow brave souls to better implement it on very small displays. i suspect there are a fair number of node-red users deploying on rpi.. and then a fair number of those using the official rpi display with it's small size and limited resolution.

it's fine. developers of the node are free to ignore any suggestions I might have about useability on small displays. i'll stick with home grown ui-template versions where I have better control and stay out of the way of the professionals. :wink:

(Perhaps in the not so distant future RPiF will release a new official 8" display (same footprint as current 7" minus the huge bezels) that supports 1920x1080... and then all of this custom scaling becomes moot.)

42

To cover one edge case makes all other edge cases cry. And there is many of such. Always.
Brave souls fork the repo and do what is needed to cover their edge cases. :wink:

43

Both developers are subscribed to this thread already, and will see whatever you post, and take your comments into consideration, helping if they can.

Moving your post, was not to undermine your comments, but to keep this topic in one place, making it easier to understand the full context of your issue, and also other forum users who may have the same problem in the future.

44

meh! I can force Bart's multiswitch node to play nice with my 1/2 of default scaling and accept the odd text alignment as a consequence.
I'll stick those ccs overrides in the node that I use for doing all of my overrides... it's easy to manage... no worries.

45

how is it at 28px high ? (and of course the height and width can be different if you want/need)

46

Yeah, looked at the image of your solution .
I'd do couple of small changes.
Get rid of top bar and side bar. (navigation between tabs can be done with buttons and thet can be 1x1 with icon )
Change font to and font size.
As for now quite of space is freed, id go for bigger unit size.

I have 8'' tablet and All of that fits perfectly with 35x35 unit size
Of course there is not much "air" but I'm bad with the art also so it is what it is.

image
image484Ɨ676 135 KB

1 Like
47

32x32 was the point that it started looking better... But even at 24x24.. the new multiswitch node is very useable.

Honestly, the only dashboard node that I truly have issues with at 24x24 is the ui-led. which is funny, because it would seem as if that node would be the most flexible, especially if you don't use any glow/shadow effects.

All other dashboard nodes render fine. I might explore taking my whole project to 32x32... it's a bit of a 'refactoring' of sorts for the entire visual presentation, but might be worth it to eliminate struggling with two dashboard nodes that I like very much (the new ui-multi-switch node is quite good and of course the above mentioned ui-led.)

I do like the side nav menu... and just need to explore the ccs overrides to make that guy a bit narrower...

48

there is an option to just show icons of course... Is that narrow enough ?

49

I'm already doing that and it looks great at 24x24!
if I go to 32x32...I may work to get it just a bit narrower... as it will grow 25% wider...

It's a good exercise to become familiar with the basic CCS properties that dashboard uses... just to make small adjustements here and there..... the adjustments I made to the Group Name display (font sizes/padding) was great as that takes up a TON of unnecessary room..

50

Impressive amount of content. I imagine your 8" tablet is somewhat high resolution?

Hopefully the next RaspberryPI official touch display grows to at least 1280x720... though 1920x1080 would be fantastic.

Thank you for sharing the suggestions. I am giving thought to at least going 32x32 as that helps me maintain most of my content... with just a small number of objects migrating to another screen.

51

Would you mind posting these changes, also trying to squeeze a lot into a small space :wink:

52

Most simple adjustment is to not use group names. Use text widget. Space already gained. :slight_smile:

53

I have removed some but for others I like to have it, with collapse option, but would be nice to make it smaller.

54

Oh yes, if collapse needed than of course... different story

55

Absolutely,

It's in a UI-Template mode that I run right on Startup.

You only need to pay attention to the stuff in the dashboard.cardpanel .

The rest of it is just to use the multistate-swtich node.. and the Ui-Template Multstate Toggle stuff so that it plays nice on my dimunitive grid size

<style id="group-styles-override">

.nr-dashboard-cardpanel > p {
    max-height: 24px;
    min-height: 24px;
    margin-left: 8px;
    margin-top: 2px;
    margin-bottom: 2px;
    font-weight: 4500;
    font-size: larger;
}

.multistate-switch-container {
    height:18px;
}
.multistate-switch-wrapper{
    border-radius:15px;
    height:18px;
}
.multistate-switch-slider{
    border-radius:15px;     
}

.switchwrapper {
  margin: auto 0;
}
.toggle_radio{
    margin: auto;
    overflow: hidden;
    border-radius: 50px;
    position: relative;
    height: 19px;
    border: 1px solid var(--nr-dashboard-groupBorderColor);
    background: var(--nr-dashboard-widgetBgndColor);
}
.toggle_radio > * {
  float: left;
}
.toggle_radio input[type=radio]{
  display: none;
}
.toggle_4{
     width: 25%;
}
.toggle_3{
     width: 33%;
}
.toggle_2{
     width: 50%;
}
.toggle_radio label{
  display: block;
  height: 15px;
  margin: 0;
  line-height :15px;
  border-radius: 50px;
  cursor: pointer;
  z-index: 1;
  text-align: center;
}
.toggle_radio label >p {
    background:transparent !important;
}
.toggle_option_slider{
  height: 15px;
  position: absolute;
  top: 2px;
  border-radius: 50px;
  transition: all .3s ease;
  z-index:0;
  left:2px;
  opacity:0.5;
  background: var(--nr-dashboard-widgetColor);
}

</style>
1 Like
56

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.