Make Background light up to simulate Lights ON

[victor.back]

Hi.

I wonder there´s a way of making the Background image to light up from the status of a light group?
I´m thinking like, if I sets a kind o filter over a specific area of my background?

This so I  can illustrate a 2D floorplan to "light up" the rooms when a light is on.

Is this possibly in Visualization with CSS or Javascript or other way?

[AlexLV]

Hi, easiest way for me - using just svg icons with Alpha channel used (transparency). I use grey icon if light is off and yellow when is on. For that you need status of lighting object. At your plan you should select additional icons, and if status value = 0 use grey icon, if from 1 to 100 than yellow. Icons are transparent, so you will see your plan

Icons are in attach. You can use free inkscape editor to make changes. Even you can make rotating svg icons if you need. Read more at forum about icons.

BR,

Alex

  YellowEmpty.svg (Size: 2.88 KB / Downloads: 38)

  Grey2WEmpty.svg (Size: 2.88 KB / Downloads: 24)

[victor.back]

Hi, easiest way for me - using just svg icons with Alpha channel used (transparency). I use grey icon if light is off and yellow when is on. For that you need status of lighting object. At your plan you should select additional icons, and if status value = 0 use grey icon, if from 1 to 100 than yellow. Icons are transparent, so you will see your plan

Icons are in attach. You can use free inkscape editor to make changes. Even you can make rotating svg icons if you need. Read more at forum about icons.

BR,

Alex

Thanks. That might work, I´ll test does

[MarkosFerro]

Hi, I'm looking for something similar, but with variable opacity. I have a group address that represents the on/off state of a Dali lamp, "Status_on_off_bulb1 (1/1/1)". I also have another one that represents the intensity level of that lamp, "Status_value_bulb1 (1/1/2)". In the visualization, I add an object with the address (1/1/1) and represent its on state with a glowing bulb and its off state with an unlit bulb. This has worked so far.

Now I want to make a graphical improvement that represents the object's brightness level through its opacity. I've tried the following: I added a custom class called ".bulb-opacity" to the object, and using JavaScript, the program reads the brightness value (1/1/2) and applies the corresponding transparency to objects that contain the additional ".bulb-opacity" class.
The problem I'm having is that I would have to add additional classes to each bulb.

I'd like to know if it's possible to apply opacity to objects using JavaScript by their group address "1/1/1" or, better yet, by their label "Status_on_off_bulb1", setting the opacity value to the group address value "Status_value_bulb1(1/1/2)".

I'm attaching how I solved it with the additional class:

var ObjectAddress = Scada.encodeGroupAddress('1/1/2');
var minOpacityPercent = 40; // Minimum opacity percentage when the lamp is at minimum brightness (1/100)

objectStore.addListener(ObjectAddress, function(obj, type) {
    if (typeof obj.value === 'number') {
        var elements = document.querySelectorAll('.bulb-opacity');
        var value = obj.value;

        var opacity;

        if (value === 0) {
            // Lamp off → maximum opacity to clearly display the off icon
            opacity = 1; // I will review it soon
        } else {
            // Map value from 1–100 to opacity between minOpacityPercent–100%
            var min = minOpacityPercent / 100;
            opacity = min + (1 - min) * (value / 100);
        }

        elements.forEach(function(el) {
            el.style.setProperty('opacity', opacity.toString(), 'important');
        });
    }
});


Thanks in advance