Display Images from complex template

[SdeGeata]

Hello;

I am enjoying this module very much, so much so that I have installed a second instance of the module to display yet more sensors in another MM region. My question however is unrelated to that, as both instances work fine to display sensor-only data.

What I am trying to do though is display a dynamic image, based somewhat on a "picture elements card" and "state-image" that I am using in Home Assistant. It is essentially the template and sensors used in the HA configuration, with minor modifications for MM. I can't seem to get it to display anything but the title and [object Object] on the Magic Mirror.

Here is the module's config entry, maybe you can suggest something?

{
    module: 'MMM-HomeAssistantDisplay',
    classes: "stiofan", 
    position: 'bottom_center',
    config: {
        host: "192.168.1.100",
        token: "Redacted",
        port: 8123,
        useTLS: false,
        title: "Laughing Goblin",
        class: "draught",
        sections: [{
                triggerEntities: [
                    "input_number.left_tap_counter",
                    "input_select.keg_1",
                    "sensor.beer_on_left_tap"
                ],
                displayTemplate: `
                {%- set keg_1_level = states('input_number.left_tap_counter') | float -%}
                {%- set contents = states('input_select.keg_1') -%}
                {%- if keg_1_level == 34 and contents == 'Blonde' -%}
                {%- set keg1Image = "CornyKeg-Blonde-34.png" -%}
                {%- elif 30.5 <= keg_1_level <= 33.5 and contents == 'Blonde' -%}
                {%- set keg1Image = "CornyKeg-Blonde-33.png" -%}
                {%- elif 27.5 <= keg_1_level <= 30 and contents == 'Blonde' -%}
                {%- set keg1Image = "CornyKeg-Blonde-30.png" -%}

                                // Redacted. This goes on for many lines...

                {%- elif keg_1_level != 0 and contents == 'Coming Soon' -%}
                {%- set keg1Image = "_CornyKeg-Carbonating-coming_soon.png" -%}
                {%- elif contents == 'Empty' -%}
                {%- set keg1Image = "_CornyKeg-Empty_clean.png" -%}
                {%- else -%}
                {%- set keg1Image = "_CornyKeg-Empty.png" -%}
                {%- endif -%}

                <div class="image"><img src="http://192.168.1.100:8123/local/corny_keg_images/{{keg1Image}}" height="300"/></div>
                <div class="title">{{ states.sensor.beer_on_left_tap }}</div>
                <i class='mdi mdi-glass-mug-variant'> </i>{{input_number.left_tap_counter}} Pints Remaining
                `,
                class: "draught"
            }, 
        ]
    },
},

[wonderslug]

Hey Cool, glad your getting some use from it. Cool that you are doing kegs :)

The image stuff looks fine to me.

I think one of your issues is the <div class="title">{{ states.sensor.beer_on_left_tap }}</div>

should probably be

{{ states.sensor.beer_on_left_tap.state }}

And <i class='mdi mdi-glass-mug-variant'> </i>{{input_number.left_tap_counter}} Pints Remaining should probably be <i class='mdi mdi-glass-mug-variant'> </i>{{states.input_number.left_tap_counter.state}} Pints Remaining

You can always check your template in your Developer Template Tool : https://my.home-assistant.io/redirect/developer_template

[SdeGeata]

Hey there!

Thanks for your prompt reply.

Yeah, I caught those missing .states too. They display fine. I have been playing with the thing some more, I tested the template in the dev tools and it renders a proper URL that I can then pop into a browser and it shows the correct image from my HA 'local' directory. i have also tested it with an image from the internet and that displays fine too. It still won't show the template images on my mirror though.

This code in the config, shows as below on the mirror.

`

            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/6e/Home_Assistant_Logo.svg/240px-Home_Assistant_Logo.svg.png" height="50"/></div>
            <div class="title">{{ states.sensor.beer_on_left_tap.state }}</div>
            <i class='mdi mdi-glass-mug-variant'> </i>{{states.input_number.left_tap_counter.state}} Pints Remaining`

P.S. And yeah, draught beer at home is super cool! I'll never go back to bottling again.

[SdeGeata]

The media player displays the image too when I take the URL from the Dev Tools Template Tester, but it won't render on the mirror. Strange.

[wonderslug]

Can you look at the MM using a web browser and see what the actual HTML being displayed by the MM is?

[SdeGeata]

I don't follow. I am trying to get the MM module to load an image from my HA device. Why would the MM's URL be important?

[SdeGeata]

Sorry, I get what you mean now. I looked at the Mirror from a browser magic-mirror.local:8080 and the images load fine.

So is this an electron issue, or perhaps Samba Share?

[SdeGeata]

So, any idea? It still won't load on my mirror, but loads fine from another browser.

[wonderslug]

So depending on how you have MM running it may be a networking issue. If you are running in a docker container the electron "web browser" that shows the page on the MM may have issues hitting the IP. Since that is done on the browser side.

The other possibility its a CORS issue. You can disable CORS checks by by adding the httpHeaders section to you config:

let config = {
    httpHeaders: { 
        contentSecurityPolicy: false, 
        crossOriginOpenerPolicy: false, 
        crossOriginEmbedderPolicy: false, 
        crossOriginResourcePolicy: false, 
        originAgentCluster: false, 
        frameguard: false 
    },

[SdeGeata]

It doesn't seem to be the CORS checking. I disabled it as per your instructions and it made no difference.

I am running HA on Hassio, so I don't even know if it is in a docker container or not. I know that I can see the images if I enter the URL into my MM pie's Chrome browser... but I guess that wouldn't be in the docker container anyway.

How can I fix this if it is a docker issue?

[wonderslug]

I mean if you are running MM using a docker image. I dont think your HA setup is the issue, since it works fine when you use the web browser against the MM and the images show up fine.

[SdeGeata]

Magic Mirror's not in a docker container. This is super weird.

[SdeGeata]

So I found the problem.

My MM config is set as follows:

address : '0.0.0.0', port: 8080, ipWhitelist: ["127.0.0.1", "::ffff:127.0.0.1", "::1", "192.168.1.42", "192.168.1.23", "192.168.1.69", "192.168.1.100", "192.168.1.200"],

The address is set to '0.0.0.0' for the sake of MMM-Remote-Control, which is super handy, but becoming a serious pain in the ass. You module is yet another one that won't work properly with that setting. Configuring the address to address: 'localhost', solves the issue, but MMM-Remote-Control doesn't work anymore.

I don't know why, both devices are listed in the ipWhitelist, but it doesn't seem to work anyway. Any suggestions???

[wonderslug]

The Address being 0.0.0.0 simply means what address the MM service is listening on on the MM machine. you can "Bind" it only to certain IP addresses if you want.

Setting the address to "localhost" or 127.0.0.1 (same thing) means that you cant hit the MM server from any outside IP address because the service itself is not listening for connections on any other network address other than its internal one.

So if its set to localhost you cannot reach the remote control.

Now as to why that would allow access to the images, that is not clear to me.

You might try a couple of things.

First would be to maybe host the images on the MM itself instead hosting them on the HA instance. If you enable the images module

        {
            module: "images"
        },

and place your images in the modules/images directory you can get at them with a url like /images/CornyKeg-Blonde-33.png

This is really a work around and doesnt address your main problem but it would get you going.

[SdeGeata]

So, a final update. I couldn't get it to work, no matter what I did. The address: "0.0.0.0" needs to be that in the config, other wise MMM-Remote-Control won't work, and the images don't render unless that is set to address: "localhost".

I need MMM-Remote-Control as I use it to change different things throughout the day with Home Assistant automations.

My "solution", a work-around really, was just to host those dynamic images on my Magic Mirror directly, within a folder in MMM-HomeAssistantDisplay. Works well!

Thank you for all your help in troubleshooting this. It is too bad about the security settings for the MM hosts interfering with the functionality of this module. At least I did find a work-around. Not the same case for MMM-MotionEye.

Thanks again.