A static background image in a template node

Dashboard
1

I want a floorplan image and display the temperature values in each room as simple text. Normal way would be using a SVG image but my main display is an old iPad which does not render dynamic content embedded in SVG code.
My work around would be a simple static image where on top I display some text elements.
My template so far:

<style>
    body {
        background-image: url('/images/floorplan.jpg');
        background-size: auto;
        background-position: center;
        background-repeat: no-repeat;
        align-items: center;
    }

    .container {
        position: relative;
    }

    .text1 {
        position: absolute;
        top: 50px;
        left: 100px;
        font-size: 24px;
        color: white;
    }

    .text2 {
        position: absolute;
        top: 150px;
        left: 200px;
        font-size: 18px;
        color: white;
    }

    .text3 {
        position: absolute;
        top: 300px;
        left: 50px;
        font-size: 20px;
        color: white;
    }
</style>


<div class="container">
    <div class="text1">This is the first text element.</div>
    <div class="text2">This is the second text element.</div>
    <div class="text3">This is the third text element.</div>
</div>

Access to the local image file is ok but it is hidden behind the (standard) dark background with the white text on top.

What style attribute lets the background image "shine thru"?

2

if you're are assigning a css prop to an element that already has that prop, you cant try with:

background-image: url('/images/floorplan.jpg') !important;

3

Nope, has no effect.
I find many threads with similar background image problems. However I did not spot a complete example of a working tab with a specific background only for that one tab (or group) ., only sniplets??

4

If it is dashboard 1 then you can't see the body element. It is covered by some content wrappers so you'll need to find them and maybe add the background to topmost element.

I don't have dashboard 1 installed anymore can't point out what it is exactly

5

If the name of your tab is "mytab" then you can set the background image for that tab only, assuming that you have the right value in settings.js for http_static

#Tab_mytab {
   background-image: url('/images/floorplan.jpg');
}

And if a group on that tab is called "mygroup" you can make the group header and content transparent

#mytab_mygroup, #mytab_mygroup .nr-dashboard-template {
        background: transparent;
}

I thought it might be simpler using custom classes but couldn't make that work.

6

I'm not familiar with dashboard but presumably it's responsive so placing absolute elements with fixed offsets won't play nicely when background resizes.

7

Actually I found a solution which was working for my old Dashboard-1 (Versionnumbering within is 2.28.1, last version working with an old iPad5 tablet)

  • Creating a Dashboard Tab with only one(!) group called GFloor
  • Define a ui-template with type widget in group and point to GFloor
  • Content of template:
<style>
    .container {
    position: relative;
    width: 800px; /* Set the desired width */
    height: 600px; /* Set the desired height */
    background-image: url('/images/floorplan.png'); 
    background-size: cover;
    background-position: center;
    border: 1px solid #ccc; /* Optional: Add a border to the container */
    }
    
    .text1 {
    position: absolute;
    top: 150px;
    left: 220px;
    font-size: 24px;
    color: white;
    }
    
    .text2 {
    position: absolute;
    top: 150px;
    left: 430px;
    font-size: 24px;
    color: red;
    }
    
    .text3 {
    position: absolute;
    top: 350px;
    left: 250px;
    font-size: 20px;
    color: var(--nr-dashboard-groupTextColor);
    }
</style>
<div class="container">
    <div class="text1"><i class="fa fa-thermometer-empty fa-2x" aria-hidden="true"></i> {{msg.payload.t1}}.</div>
    <div class="text2"><i class="fa fa-tint fa-2x" aria-hidden="true"></i> {{msg.payload.t2}}</div>
    <div class="text3">Some static text</div>
</div>

Now I can inject some values like msg.payload.t1 together with some icons to display temperature sensors on top of a floorplan etc..

8

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