I used adobe illustrator (helps that I’m a graphic designer).
I think some people use online floorplan tools like smartdraw: https://cloud.smartdraw.com/
I’m a graphic designer. I drew the furniture elements myself using adobe illustrator (with separate versions with the lights on and off) and used picture elements code to determine which versions are displayed.
May be I have not tried enough - but so far I chose a way “different backgrounds with different aspect-ratio”.
Assume we are talking about a floorplan.
Assume the image itself is rectangular 2:1 (wide).
Create a PNG file: an image in the center, transparent left & right margins, and select dimensions dependingly of your screen (let it be a desktop).
Assume you now have 3.5:1 image with transparent margins - and this image perfectly fits your desktop.
Then check same on your another screen (let it be a tablet).
Then create another PNG for this screen.
Now you have two PNG images, for both of them you will probably have to re-define positions & scales of elements.
So you have 2 sets for 2 clients (i.e. two different cards):
PNG file
positions & scales.
Now you need to display card_1 on a client_1, card_2 on a client_2.
Possible ways:
Place both cards into state-switch card a required card will be disaplyed dependingly on a viewport (go to a corr. thread for details, not using this card).
Create a different user for client_2, place both cards on different views, hide these views for a corresponding user (i.e. user_1 will see view_1 with card_1, user_2 will see view_2 with card_2).
I’ve managed to achieve a fairly good approach with the grid layout_card.
I use a grid of 3 columns, of which the center column is relative to the viewport height.
grid-template-columns: 1fr calc(79vh) 1fr
grid-template-rows: auto
place-content: center center
grid-template-areas: |
"left main right"
For me, a width of 79% relative to the height of the viewport resulted in the picture-elements card being scaled to the right size.
The card itself is sent to the ‘main’ or center column:
view_layout:
grid-area: main
Now I have a flexible layout for all portrait screen orientations.
When using the CSS mediaquery the same can be done for landscape screen orientations.
I’m having difficulties applying the lessons in this tutorial to a custom:canvas-gauge-card. It seems that it’s height can only be given in pixels and this is fixed: it doesn’t scale with the dashboard. I’ve produced a much simplified version of my tide gauge to demonstrate the problem. On the PC it looks like this:
I’ve experimented with the picture elements layout rules given earlier (changing the aspect ratio of the grid I’m using to demonstrate the issues) and it makes no difference the the gauge. I then went on to attempt to use mediaquery to set the vertical scale according to the screen height, but I must be getting the usage wrong because nothing I’ve tried makes any difference. Can anyone offer any suggestions on how to make the gauge fit the card independent of screen size?
The test code is:
The questuon: I have buttons to hide/show elements on my floorplan. The button changes a helper but whern I make the element conditional on that helper it doesn’t change as expected (race condition?). I’ve hacked around it using cardmod - is there a better way?
The example image below has hidden cameras, motion sensors and people for privacy/security but temperature sensors enabled.
Add the image as and type: image put in in the config before the stat-label elements (or use z-index to position them above it) - Here is an example where I’m using a conditional image under a light element.
What conditional element do you mean, show a code with a conditional element with a failed attempt to use card-mod.
Anyway, check possible solutions (and a related glitch as well) for styling a conditional element in picture-elements: go to huge card-mod thread → 1st post → link at the bottom → styles for picture-elements.
Do you have a “width” properly scaled on different viewports?
It works with card mod- it doesn’t work if I used the picure-element conditional (at least not consistently), but only for boolean helpers, using conditional for things like switches work fine.
