In my boat I am going to use an old phone to show the depth under the hull, close to where I have my downrigger, so I can pull up if the water gets to shallow for the depth I’m fishing at. I also want to show the current speed and the time.
I have tried with card_mod but I couldn’t get it right. The font only changed the size of the icon for depth, not the number.
Here’s a picture of about what I want to achieve. This is very easy to make in the boating software SignalK, but not very customizable. I want to keep everything in Hass, and I want to remove the labels. The depth when I’m docked is 1 meter, and the speed is 0 knots, anything else would have scared me!
If you have custom:layout_card installed you could start with a i.e “Panel-View-Dashboard” with 1 card i.e Custom:Button_card, with a grid
( Or a “grid-layout-dashboard” )
Panel-view: (1 card)
In There you could create a horizontal-stack, with 2 vertical-stack inside ( 3 if you count right menu as part )
( Or as i mentioned a single Custom:button_card , more cumbersome)
Grid_layout_view:
slightly more “cumbersome” but as i feel , easier to get more precise
as you can set width of columns i.e 33%-67% (or 30-60-10 )
first column: a vertical stack ( fart og dato ) custom:button_card s ?
second column: ( dybde some-card ) custom:button_card ? third column, (right menu, also a vertical stack, with 3 button-cards)
EDIT: Now i get it,the “right menu” and top row is your phone
PS: Don’t see “Custom:button_card” as a “Button” You can have it show whatever you want
@boheme61 Thank you very much for answering! Yes, those bars are just the phone. Ideally I want it to be only numbers when it’s done, even removing the borders around the cards, if that’s possible.
The bottom one looks like a very good way of doing it, but I must be doing something wrong, because I’m just getting the icons for the sensors, not the value. Here’s a screenshot from my pc where I worked on it:
And you basically still use “Sections” which i don’t prefer, then you just added custom:button-cards, no config in those cards ( So obviously you haven’t looked in either the github or the specific Topics in here for Custom:button-card
I can’t even copy/paste your code(shows me nothing)
How did you create that Dashboard ?
@boheme61 Sorry, I tried to read the info on this page, custom:button-card documentation and get into the more advanced stuff, but it just confused me… Either I’m getting dumber as I grow older (60 now), or the beers I had yesterday are still in me. The code is taken from the RAW view in the dashboard, I just now removed the heading, which I don’t need. I’m guessing you are getting nothing because the sensors in my boat (and the time integration) aren’t on your system.
It’s Deep reading and hours( edit: Read Month !, before you get a grip of Custom:button-card … btw im 65, no excuse, just get glasses when the txt looks “faded”
I copied and cleaned something from one of my views, not sure it will fit yours
Try to copy/paste this and go on from there
PS: i see 1 draw-back on this way of doing it, It’s not “responsive”, meaning if your narrow down your viewport (i.e flip your phone to vertical) you have to scroll side-way to see the second Vertical stack
Partly do to the horizontal-stack, with 2 vertical-stacks, but also your PX-fixed card-size
( Don’t " Ride the Waves " as the View might “flicker” ( change from landscape to portrait view ) when your boat “tilts”
( btw, where do you have your boat ? )
I doubt, because it says View: Panel, so it’s not a grid-layout view, as i see it, RAW edited of a grid -layout view sometimes looks something like this
Weird, I thought I followed the instructions. Anyway, I have arrived at something close to what I want, the only thing I can’t get it to obey is alignment. I would like to do away with the borders too, but that’s not very important.
I must admit your code was too advanced for me, so I went from only parts of it… But I tried to put in algin-self and justify-self as well now, and that didn’t work, the view suddenly says “align-self”: middle - justify-self: center
Edit: I didn’t see your added text above, I have it in the furthest south you can get in Norway, in Mandal. I’m guessing that you are in Sweden, from the “SEK” in your code.
right, and you don’t know how custom:button-card works :), however it seems like it’s the vertical-stacks which spooking most, could try with custom:vertical-stack-in
I’ve actually not tried this “specific” setup, as what i copied was from an equal sized vertical-stack
So you might be better off using the grid-layout-view, as above i.e
Play around … with custom:button-card github in another tab
PS: You might make without using/adding the grid/grid-template-areas in the style of button-card , Just note this grid-template-areas is only inside the button-card,Nothing to do with the View-Grid/grid-areas ( But ofcause you need a basic understanding of Grids) … not that i think this "mess"is fine-tuned … it’s been awhile since i build the foundations to those views i copied from ( ofcause adapted to my various Devices )
Beside those examples above is without my UIX(card-mods on host&card) …Lots just to “fine-tune”
NOTE: there can be 2 places where i.e custom-fields is represented, 1 is in/under the styles(to style that “area”
The other is where you define what is in this field(of the button-card) there you pic/entity goes(it’s what it shows !)
So that/those (styles) should be under Styles, as i showed in 1 post: styles:>card, grid, custom_fileds , label etc
Thank you! That was so close to what I want that I’ll set it as a solution! I would prefer to remove the borders and the light grey backing, but I don’t know if that’s just an easy fix? I searched but couldn’t find an all white theme. I adjusted the height to fit the rather low and wide phone I’m going to use it on, so like this:
Ohh i think i have done that in my Theme, cause i dont want them in any Views, but sure UIX might fix it
Depending upon your card and view background color, you can set the border-color to same , or “none”
Maybe “none” will do in your case
border-color: ‘none’
Thou you will still see the Background-color
background-color: ‘none’ ( or same color as card-background, also for borders )
ha-card-background: ‘#ffffff’
card-background-color: ‘var(–ha-card-background)’
Not sure, as i’ve for ages used a theme to align all card-backgrounds/view-background and bordes to same color
As Dev’s have been fiddling around constantly, i’ve added a few and maybe forgot to remove the Redundant settings
If you only want it in that particular View, you need UIX to “define” this , or simply Load this Specifc Theme into that View ( and use your i.e default Theme in others )
First, you didn’t answer when I told you where my boat is and then asked if you are Swedish beause of the SEK in your code in the first message. Or maybe that’s confidential?
And I have probably reached my incompetence level… I have never tried to create a theme before. I created this in the config.yaml, from this page in the documentation:
Maybe the file should have another name or something?
But at least I found the way to remove the border, even if the bakcground color isn’t all white. But I can probably get around that by adjusting the width of the cards. The correct code to remove borders with card mod is:
( You seems to have followed the doc, thou i’ve never tried that )
I never tried Themes in configuration.yaml i have separate theme files in a theme-folder , using !include Home Assistant frontend - Home Assistant .
Did you restart HA after editing your configuration.yaml ?
If so, try to go to your Profile# Themes click to see if you see your Theme there, and apply it
Lastly Im Danish in heart and soul, but been living in Southern Sweden 38years
Well, then I was half right about Sweden. Oh, and if I take my boat and go 15 minutes around the island and then keep on going Denmark will be the next land I see!
Activating the theme for all of Hass did work, in the sense that it made everything greyer and the current dashboard in the left menu pink! So obviously it is doing something. I see now that with the standard theme activated and this theme only on the Sony phone page pink is the accent color when holding the mouse pointer over a tile in edit mode. But the background color stays the same. Anyway, I think I’ll just let the tiles go into each other. So again thanks a lot for the help! Skål med en bajer!
? , maybe Devs have used another “White” … just to piss of people
I’ve been in Norway a few times, Oslo, Hemsedal and Solhiesen , skiing and snowboarding ( and close a few times by boat, scubadiving at Väderöarna, and around Smögen )
PS: I have no idea how this will affect i.e “white” text, as you know there are “options” for dark/light modes which affect the parts of the default-theme(those as you haven’t defined in your personal Theme)
Best would be for you to find a custom:theme close to what you want, and make it your own(edit here and there)
I hate skiing, but that’s just me. I did some alpine skiing earlier, but I grew tred of it. Now I don’t like to go where I can’t see the sea!
I tried to add that to the theme, and even (after a bit of searching) ha-view-sections-column-gap: 8px but it doesn’t do anyting, probably because this is a custom grid. And I don’t use dark mode at all, I want everything as white as possible, with dark text. So that’s not a probolem.
Well, it wasn’t like “Yesterday” i was skiing last time , and my gear is most like now just “give away or throw away” , i doubt i ever will use it again
There is another " background-color-2: ‘#ffffff’ "
which is reasonable new, not sure where it’s used, but i’ve seen it in many Themes ( so i added it to my also )
But your right about the “margins/gap” i think …
I actually use another custom vertical-stack where you can apply UIX to all cards in the stack , i.e removing/set border radius to 0px, same with paddings and tinkering with margins
This is all custom:button-card ( beside the compas-card and moon_phase )
( It’s in 2 columns of a 3 column-grid, and 1st row, 80px high row )(head1 & head2 in above HomeStatus-grid)
Ideally I want it to be only numbers when it’s done, even removing the borders around the cards, if that’s possible.
