Sizing and caching

[Alfiegerner]

Hi - migrating from the old version and really impressed with new functionality. I've been able to move a bunch of custom code into config so very chuffed. The new class_toggle works great too.

I have 2 things left I'd like to solve. First, sizing / placement isn't quite right for me, here's the new version:

and the old for comparison:

Any suggestions on how to make it expand to fit the panel? Config looks like this:

title: '429'
views:
  - badges: []
    cards:
      - config:
          image: /local/floorplan/examples/simple/429.svg?v=spare_bedroom2v6
          image_mobile: >-
            /local/floorplan/examples/simple/429_transformed_veon.svg?v=spare_bedroom2v7
          stylesheet: /local/floorplan/examples/simple/429.css
		  <!--- detailed config here -->
        type: 'custom:floorplan-card'
    icon: 'mdi:floor-plan'
    id: system
    panel: true
    full-height: true
    path: default_view

Second query is that my (large) SVG file is loaded every time, which can take a long long time on dodgy mobile. Any chance you could expose a useCache property to avoid the cachebuster?

Thanks very much.

[pkozul]

Hi @Alfiegerner

Great to hear you're moving along with the new version.

Have you tried v1.0.20? It's not yet released to HACS, but you can get it here and simply copy it over the one you've already installed:

https://raw.githubusercontent.com/ExperienceLovelace/ha-floorplan/master/dist/floorplan.js

This new version improves the full_height display, so let us know yow you go.

Regarding the cache buster, we will add a config item that will allow you to enable/disable cache.

Cheers.

[Alfiegerner]

Thanks @pkozul , much appreciated.

Still the same issue with 1.0.20.

It looks like the following element is causing a space at the top:
<h1 class="card-header"><!----><!----></h1>

• at least if I take the padding off that the top aligns

I'll try and have a poke about a bit later.

Thanks,

Alex

[pkozul]

@Alfiegerner

You will need to use full_height instead of full-height (dash needs to be underscore).

Also, this setting needs to be moved down into the card config, which I have shown below.

title: '429'
views:
  - badges: []
    cards:
      - config:
          image: /local/floorplan/examples/ring/ring.svg
          stylesheet: /local/floorplan/examples/ring/ring.css
        type: 'custom:floorplan-card'
        full_height: true
    icon: 'mdi:floor-plan'
    id: system
    panel: true
    path: default_view

Can you try with the above?

[Alfiegerner]

Thanks @pkozul much better:

Still some padding to the sides - which I can make go away by removing min-height:0px from #floorplan. At the this point the vagaries of CSS start seeming mystical to me :)

[pkozul]

@Alfiegerner

Can you paste the contents of your CSS file?

/local/floorplan/examples/simple/429.css

[Alfiegerner]

@pkozul - Lots of crud in here:

/* SVG shapes */

.hidden {
  display:none;
  opacity: 0;
}

.visible {
  display:block;
  opacity: 1;
}
.media-playing {
  display:block;
  opacity: 1;
}
.media-paused {
  display:block;
  opacity: 1;
}
.media-off {
  display:none;
  opacity: 0;
}
.media-idle {
  display:none;
  opacity: 0;
}
.media-unavailable {
}


svg, svg * {
  vector-effect: non-scaling-stroke !important;
  pointer-events: all !important;
}

/* Hover over */

.entity:hover {
  stroke: #03A9F4 !important;
  stroke-width: 1px !important;
  stroke-opacity: 1 !important;
}

/* Bootstrap succsss */

.success-text {
  fill: #3c763d !important;
}

.success-background, .success-text-background {
  fill: #dff0d8 !important;
  fill-opacity: 1 !important;
  stroke: #d6e9c6 !important;
  stroke-width: 1px !important;
}

/* Bootstrap info */

.info-text {
  fill: #31708f !important;
}

.info-background, .info-text-background {
  fill: #d9edf7 !important;
  fill-opacity: 1 !important;
  stroke: #bce8f1 !important;
  stroke-width: 1px !important;
}

/* Bootstrap warning */

.warning-text {
  fill: #8a6d3b !important;
}

.warning-background, .warning-text-background  {
  fill: #fcf8e3 !important;
  fill-opacity: 1 !important;
  stroke: #faebcc !important;
  stroke-width: 1px !important;
}

/* Bootstrap danger */

.danger-text {
  fill: #a94442 !important;
}

.danger-background, .danger-text-background {
  fill: #f2dede !important;
  fill-opacity: 1 !important;
  stroke: #ebccd1 !important;
  stroke-width: 1px !important;
}

/* Last motion entity */

.last-motion {
  stroke: #808080 !important;
  stroke-width: 1px !important;
  stroke-opacity: 1 !important;
}

/* Alarm Panel */

.alarm-disarmed {
  fill: #3c763d !important;
}

.alarm-armed {
  fill: #8a6d3b !important;
}

/* Camera */

.camera-idle {
/*  fill: #B9CEF7 !important; */
  fill: #6FAECE !important;
}

/* Light */

.light-off {
  fill: #C3B7F4 !important;
}

.light-on {
  fill: #F8D2B9 !important;
}

.light_dining_bright {
  -webkit-filter: url(#light_dining_bright);
  filter: url(#light_dining_bright);
}
/* Doorbell */

.doorbell-off {
  fill: #C3B7F4 !important;
}

.doorbell-on {
  fill: #F8D2B9 !important;
}

/* Temperature sensor */

.temp-very-low-background {
  fill: #d9edf7 !important;
  fill-opacity: 1 !important;
}

.temp-below-average-background {
  fill: #dcefe8 !important;
  fill-opacity: 1 !important;
}

.temp-average-background {
  fill: #dff0d8 !important;
  fill-opacity: 1 !important;
}

.temp-very-high-background {
  fill: #f2dede !important;
  fill-opacity: 1 !important;
}

/* Media player */

.squeezebox-off {
  fill: #8AA8A7 !important;
}

.squeezebox-on {
  fill: #2baaa6 !important;
}
#upper_entity_layer.upper-layer-hidden {
  opacity: 0;
  display: none;
}

#upper_entity_layer.upper-layer-visible {
  opacity: 1;
  display: inherit;
}

#lower_entity_layer.upper-layer-hidden {
  opacity: 1;
  display: inherit:
}

#lower_entity_layer.upper-layer-visible {
  opacity: 0;
  display: none;
}

#light\.wardrobe\.on.wardrobe_on {
  opacity: 1 !important;
  display: inherit:
}

#light\.wardrobe\.on.parents_bedroom_ceiling_on {
  opacity: 0 !important;
  display: none;
}

#light\.wardrobe\.on.parents_bedroom_ceiling_wardrobe_on {
  opacity: 0!important;
  display: none;
}

#light\.parents_bedroom_ceiling\.on.wardrobe_on {
  opacity: 0!important;
  display: none;
}

#light\.parents_bedroom_ceiling\.on.parents_bedroom_ceiling_on {
  opacity: 1 !important;
  display: inherit;
}

#light\.parents_bedroom_ceiling\.on.parents_bedroom_ceiling_wardrobe_on {
  opacity: 0 !important;
  display: none:
}


#light\.parents_bedroom_ceiling\.wardrobe\.on.wardrobe_on {
  opacity: 0!important;
  display: none;
}

#light\.parents_bedroom_ceiling\.wardrobe\.on.parents_bedroom_ceiling_on {
  opacity: 0 !important;
  display: none;
}


#light\.parents_bedroom_ceiling\.wardrobe\.on.parents_bedroom_ceiling_wardrobe_on {
  opacity: 1 !important;
  display: inherit:
}



#light\.parents_bedroom_ceiling.\on

.blue_glow {
background-image:url("/local/floorplan/examples/simple/blue_dot.png");
}

@charset "UTF-8";
/**
 *     @author İsa Eken <[email protected]>
 *     @website https://isaeken.com.tr
 *     @github https://github.com/isaeken
 *     @name jquery.waves
 */
.waves-test {
  position: relative;
  display: inline-block;
  width: 150px;
  height: 150px;
  border: 1px solid black;
  user-select: none;
  cursor: pointer;
}

.waves-effect {
  position: relative;
  overflow: hidden;
}
.waves-effect .ie-waves-effect {
  position: absolute;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background-color: #000000;
  opacity: 0.15;
}

[pkozul]

@Alfiegerner

Hmmm... I'm not sure where the padding comes from in your floorplan.

In the meantime, can you try this version (1.0.20beta1)? Minor improvement to how full_height works.

https://raw.githubusercontent.com/ExperienceLovelace/ha-floorplan/master/dist/floorplan.js

To make sure you're running that version, can you add log_level: info to your floorplan config:

      - config:
          image: /local/floorplan/examples/ring/ring.svg
          stylesheet: /local/floorplan/examples/ring/ring.css
          log_level: info
        type: 'custom:floorplan-card'
        full_height: true

You should see the version info displayed at the bottom of your floorplan image:

INFO INIT Floorplan for Home Assistant (ha-floorplan) v1.0.20beta1

[Alfiegerner]

Thanks @pkozul , latest version results attached:

On inspecting I think the svg element is being rendered full width, just <g> layer is not (based on what get's highlighted in chrome tools). Attaching svg:

429_transformed_mobile.zip

I have found that adding the following to my .css makes it expand fully:

#floorplan-container{
  display: block !important
}

This works fine for me and I'm happy to continue using that . Cheers!

[pkozul]

Hi @Alfiegerner

You can now control the cache in several ways (using cache: true or cache: false):

• Main floorplan SVG file and CSS file

title: Light
config:
  image:
    location: /local/floorplan/examples/light/light.svg
    cache: true
  stylesheet:
    location: /local/floorplan/examples/light/light.css
    cache: true

• Loading images in your rules (floorplan.image_set)

    rules:
      - entity: light.garage
        state_action:
          action: call-service
          service: floorplan.image_set
          service_data:
            image: /local/floorplan/examples/home/light_${entity.state}.svg
            cache: true

Available in the latest version (v1.0.20): https://raw.githubusercontent.com/ExperienceLovelace/ha-floorplan/master/dist/floorplan.js

Let us know how you go.

[pkozul]

Hi @Alfiegerner

Thanks for trying it out. Looks like I missed applying the cache option to image_mobile. This has been fixed in the new version (1.0.21beta1) here:

https://raw.githubusercontent.com/ExperienceLovelace/ha-floorplan/master/dist/floorplan.js

Soon we can get it into HACS.

Let us know how this one goes.

[pkozul]

@Alfiegerner

Yes, clearing the cache is always a pain. I found that ticking this option helps (in Chrome Developer Tools, on the Network tab):

After ticking that option, I then hit Control + F5 to force a reload, and then I can see the new version of Floorplan loaded. After that, I untick the option to return it back to the default.

[exetico]

🥳
https://github.com/ExperienceLovelace/ha-floorplan/releases/tag/1.0.21

Normally 'Reload resources' in HA (In the menu in the upper right corner), and 2* Control+F5 does the trick for me, without disabling caching at all 😄.

[Alfiegerner]

Thanks @petarkozul, @exetico - that works great! Installed with HACs and cache all working.

Much appreciated 👍

[pkozul]

@Alfiegerner Excellent. Thanks for letting us know.