LSS100200 Visualization

[Ahmed_Tolba23]

I’m working on a visualization using the LSS100200 controller, and I would like to confirm a couple of technical possibilities related to the visualization system:

1. Time-Based Background Change:

Is there any method (for example, through scripting or internal logic) to automatically change the layout background in the visualization depending on the time?

If so, could you please advise whether this can be achieved directly within the standard visualization environment or only through the CSS/HTML visualization editor?

2. Merging CSS and Manual Visualization:

• Is it possible to combine or merge elements from the CSS visualization with the Manual visualization, or can the system only operate one visualization type at a time?

If not, is there any recommended method to link between both (for example, opening a CSS page from a manual visualization button)?

[Erwin-vd-Zwart]

@Ahmed_Tolba23 

Can you elaborate on what you mean by CSS visualization and Manual visualization ?

We have 3 types of visualizations:

1) PC/Tablet

2) Smartphone

3) Touch

To answer your question(s):

1) Yes we can change background when using PC/Tablet and/or Smartphone with custom JS, if i need to make a sample i need to know if you are adding the background on plan level or layout level. Touch does not support custom JS so there it is not possible (afaik).

2) You cannot use Touch widgets in combination with PC/Tablet, however you can use both visualization engines in parallel, but you need to configure them both as they have no relation between each other apart from the same available objects they will use. Touch is also the underlying foundation for the Wiser KNX App.

[Ahmed_Tolba23]

@Erwin-vd-Zwart 

I am using the background on plan level

[Erwin-vd-Zwart]

@Ahmed_Tolba23 

You can change the background image at plan level with custom JS below, change the image names (.jpg) and listener address (0/0/1) as required and from there you can control the background by creating a scheduler at your listener address and send the values 1-4 to select a background at a certain moment in time:

$(function(){

// Change Background by object value

  if (typeof grp != 'undefined'){

    grp.listen('0/0/1', function(object, state){

      if (state == 'value' || state == 'init'){

        var imageUrl;

        if(object.value == 1){

          imageUrl = "/scada/resources/img/image-at-value-1.jpg";

        } else if(object.value == 2){

          imageUrl = "/scada/resources/img/image-at-value-2.jpg";

        } else if(object.value == 3){

          imageUrl = "/scada/resources/img/image-at-value-3.jpg";

        } else if(object.value == 4){

          imageUrl = "/scada/resources/img/image-at-value-4.jpg";

        } 

        $(".plan-background").css("background-image", "url(" + imageUrl + ")");

      }

    }, true);

  }

});