Best way to display graphic image in simple dashboard?

General
1

Best way to display graphic image in simple NR dashboard? I thought this was pretty straight forward, until I realized I have never do this type of thing before.

Here is the scenario, I have two(2) graphic files, JPEG, PNG, whatever, the format I don't think is import per se. One is just a simple 'On Air' image, the other is 'Off Air' image.

A python monitoring script is watching our youtube channel for 'any' live stream, and said script sends, or publishes rather, a MQTT message which notes on air or off air. I want to display the applicable graphic in a dashboard group, that just shows said graphic. The applicable MQTT messages also (already) go to existing dedicated signage devices, the NR display will be in addition to those other display devices, and letting us use existing smart TVs versus the dedicated devices.

I am a complete newbie to do this display of graphic file to the NR dashboard, in this manner, so asking anyone with experience in this scenario to chime in.

Kinda thinking maybe a template node with a bit of HTML to display the graphic file, but is there a better way with the (new) dashboard 2.0? Just starting using the new dashboard, so not that familiar as yet with all of its feature set.

At some point I may replace the python script with full NR flow logic, but that is a task for another day.

2

Does it need to be a graphic ?

  • if no
    • with some text and styles you can probably make it in a simpler manner
  • if yes
    • there are many ways to show a graphic, i would still go the html only way via a ui-template node with inline images
      • and those images could be also svg, or inline jpg/png/webp (base64 encoded) or serve them as images via an http-in/out node.

Simple example ui-template:

<template>
    <div class="air" :class="msg.payload == 'on' ? 'on' : 'off'">{{ msg.payload == 'on' ? 'on air' : 'off air'  }}</div>
</template>
<style>
   .air{padding:20px 8px;text-align:center;font-size:3em;text-transform:uppercase; width:100%;}
   .on{background:#ff3300;color:#fff;}
   .off{background:#333;color:#888;}
</style>

Inject msg.payload with on or off

3

@bakman2 Thx.