Feature Request: Card Side by Side

[mcfly2283]

Description

The Card with its Sensor-Tiles are very high at all. It would be great if there is an Option to place the Map and Tiles Side by Side. Especially with a Wallpanel, the palcement could be very Hard.

Solution

Optional Side by Side-View MAP-TILES

Alternatives

No response

Context

No response

[PiotrMachowski]

Something like this?

[PiotrMachowski]

It's possible to do it using card-mod:

...
style: |
  ha-card {
    display: flex !important;
    align-items: stretch;
    flex-wrap: wrap;
    justify-content: space-evenly;
  }
  .map-wrapper {
    flex-grow: 3;
    width: 600px;
  }
  .controls-wrapper {
    flex-grow: 1;
    width: 300px;
  }

[mcfly2283]

Yeah, thats it! Thank you, I'll give it a try

[PiotrMachowski]

There is only a slight problem...

[mcfly2283]

Very Cool, now it fits the the whole Screen, overlaid with some Quick-Buttons Im only using predefined-zones as preselect, so that "glitch" is not a Problem.

Thank you for your continuous Work!

[PiotrMachowski]

That looks great! How are these buttons made?

[mcfly2283]

This is a 1-Panel made with custom:layout-card in Grid-Mode. The Buttons are just simple buttons and thanks to the 1-Panel-Grid you can place it wehre you want inside the (static) grid, even onto other Cards. With that you can do cool Graphic-Overlays when the post man arrives ;) :

[PiotrMachowski]

Neat idea 👍 by the way, you can add additional tiles and icons with your own sensors/service calls ;)

[tempmaseg]

I have installed card_mod and added below to the bottom of the card, but it doesn't split.

card-mod:
  style: |
    ha-card {
      display: flex !important;
      align-items: stretch;
      flex-wrap: wrap;
      justify-content: space-evenly;
    }
    #map-wrapper {
      flex-grow: 3;
      width: 600px;
    }
    .controls-wrapper {
      flex-grow: 1;
      width: 300px;
    }

[mcfly2283]

You have to use the right Dashboard-View. Try to use the 1-Panel or the other new "Sidebar", dont know how its realy called in english

[tempmaseg]

Thanks @mcfly2283 !

@PiotrMachowski , if it is not to complicated it would be great to be able do decide if the tiles should be above the map or vice versa.

[Denow]

@mcfly2283 The current configuration stretches the card horizontally, is it possible to also stretch vertically so that the card fills the whole page?

[PiotrMachowski]

@Denow height of the card is adjusted to match map proportions. You can change them by adding crop (with big left and right values in your case) to your settings:

...
map_source:
  camera: camera.vacuum
  crop:
    top: 10
    bottom: 10
    left: 100
    right: 110

[mcfly2283]

Unfortunately that was a short Story. Since the last Update of card-mod, the View does not work anymore. Maybe the Syntax has changed or something like that.

I can`t fix it for myself.

[shred86]

Definitely would love to see this feature as I'm also trying to use this card on a wall mounted tablet.

[idogrf]

This would be a great feature for an already great card :)

[PiotrMachowski]

@mcfly2283 have you managed to figure it out using card mod?

[mcfly2283]

No, after the last update of card-mod the syntax above won‘t work for me and i don’t have the knowledge to get this working again.

[kimme1024]

Thanks @mcfly2283 !

@PiotrMachowski , if it is not to complicated it would be great to be able do decide if the tiles should be above the map or vice versa.

That would indeed be a good option to have! Really waiting for that as well! Also, as I mentioned in #247, when using panel mode, the crop function doesn't work.

[PiotrMachowski]

@kimme1024 I'm pretty sure that it works. Are you sure you have provided big enough values to notice change?

[kimme1024]

@kimme1024 I'm pretty sure that it works. Are you sure you have provided big enough values to notice change?

Aha! I was assuming that the cropping was relative to the picture itself but it's relative to the dashboard it's displayed on... I increased the crop values and now it works!

Thanks!

[PiotrMachowski]

@kimme1024 hmmmm, that seems to be a little bug 😉

[kimme1024]

@kimme1024 hmmmm, that seems to be a little bug 😉

It would indeed make more sense if your crop was correct for any way of displaying it.

When using tile top and bottom are 100 When using panel top and bottom are 320 and 310 to be displayed correctly on my wall tablet, however then it doesn't display correctly on any other screen than the tablet...

[ddmmcz]

Very Cool, now it fits the the whole Screen, overlaid with some Quick-Buttons Im only using predefined-zones as preselect, so that "glitch" is not a Problem.

Thank you for your continuous Work!

Hi @mcfly2283 , please would you show the custom button position configuration. I don't understand how you got them over you. Thank you.

[mcfly2283]

Very Cool, now it fits the the whole Screen, overlaid with some Quick-Buttons Im only using predefined-zones as preselect, so that "glitch" is not a Problem. Thank you for your continuous Work!

Hi @mcfly2283 , please would you show the custom button position configuration. I don't understand how you got them over you. Thank you.

Hi, sure, here is my Dashboard-Config. The Config for the newer Version of custom:layout-card is mostly different due to some major changes in the recent past. Im using an old Version, no. "16" and don`t have time to migrate this...

https://pastebin.com/GyvbPYx5

[ddmmcz]

Hi, sure, here is my Dashboard-Config. The Config for the newer Version of custom:layout-card is mostly different due to some major changes in the recent past. Im using an old Version, no. "16" and don`t have time to migrate this...

https://pastebin.com/GyvbPYx5

Thank you very much!

[Ender3Pro]

Very Cool, now it fits the the whole Screen, overlaid with some Quick-Buttons Im only using predefined-zones as preselect, so that "glitch" is not a Problem. Thank you for your continuous Work!

Hi @mcfly2283 , please would you show the custom button position configuration. I don't understand how you got them over you. Thank you.

Hi, sure, here is my Dashboard-Config. The Config for the newer Version of custom:layout-card is mostly different due to some major changes in the recent past. Im using an old Version, no. "16" and don`t have time to migrate this...

https://pastebin.com/GyvbPYx5

Hi @mcfly2283 is possible to show one of the "script.cleanup"?

Thanks a lot

[ddmmcz]

Hi @mcfly2283 is possible to show one of the "script.cleanup"?

Thanks a lot

Hi, my control scripts:

empty_dust_bin:
 alias: Vycisteni zasovniku vysavace
 sequence:
 - data:
     command: app_goto_target
     params: [28471,30389]
   service: vacuum.send_command
   entity_id: vacuum.roborock_vacuum_a10

obyvak_stul:
 alias: Vysavac ke stolku
 sequence:
 - data:
     command: app_goto_target
     params: [23198,26294]
   service: vacuum.send_command
   entity_id: vacuum.roborock_vacuum_a10

[mcfly2283]

(Thanks ddmmcz)

Has anybody fixed the card-mod Side-by-Side View?. I've tried many things, but it still won't work.

card-mod:
  style: |
    ha-card {
      display: flex !important;
      align-items: stretch;
      flex-wrap: wrap;
      justify-content: space-evenly;
    }
    #map-wrapper {
      flex-grow: 3;
      width: 600px;
    }
    .controls-wrapper {
      flex-grow: 1;
      width: 300px;
    }

[ddmmcz]

Has anybody fixed the card-mod Side-by-Side View?. I've tried many things, but it still won't work.

I have it like this -> https://pastebin.com/CYpaE3f3