schedule page

[Daponte]

Hi,

there is some script to go back from the specific page of schedules to a visualization page?

[Daniel]

Hi
Add schedule on visualization via frame. Then you can use your menu for navigation.
BR

[Daponte]

Hi
Add schedule on visualization via frame.  Then you can use your menu for navigation.
BR

OK, thank you very much

[Thomas]

Hi
Add schedule on visualization via frame.  Then you can use your menu for navigation.
BR

Hi Daniel
I've hundreds of schedulers. Do you have any idea how to pass scheduler ID through a frame? I don't want to create 100+ additional windows with just one frame. I believe there must be way in javascript etc.

[buuuudzik]

You can check a current plan Id with currentPlanId and change the src of which is on this plan:

<iframe border="0" src="/scada-vis/trends?id=24" width="984" height="464" frameborder="0"></iframe>

But all of this you can do with Custom Javascript.

You can for example add some Additional class e.g. "Kitchen_Temperature" to the object which is connected to universal widget and then based on this class you can change the src of this widget.

I have similar issue so maybe I will try to create something like this

[buuuudzik]

This code is for using one widget page with an iframe for showing trends and schedulers:

Code:

// Change src of widget and have 1 widget for every trend and scheduler in visualisation
$(function(){
  if (!$('body').hasClass('usermode')) {
    return;
  }
 
  // BELOW CHANGE TRENDS AND SCHEDULERS LIST
  let mapping = [
    // Trends:
    {type: 't', className: 'wt_1', query: 'id=1'},
    {type: 't', className: 'wt_2', query: 'id=2&mode=week'},
    {type: 't', className: 'wt_kitchen-living', query: 'id=2,3&multiple=1'},
    
    // Schedulers:
    {type: 's', className: 'ws_1', query: 'id=1'},
    {type: 's', className: 'ws_2', query: 'id=2'},
    {type: 's', className: 'ws_outdoor-light', query: 'id=1,2&nohol'}
  ];
 
  function updateFrameSource(interval) {
      let widgetIframe = $('.trends_n_schedulers > iframe')[0];
    
    if (widgetIframe) {
         if (widgetIframe.src != location.origin + currentFrameURL) widgetIframe.src = currentFrameURL;
         else clearInterval(interval);
    };
  };
 
  function initEventListeners() {
    for (let i=0; i<mapping.length; i++) {
      let {type, className, query} = mapping[i];
      let newFrameSrc = (type=='t' ? '/scada-vis/trends?' : '/scada-vis/schedulers?') + query;
          
      $('.' + className).on('vclick', function () {
        currentFrameURL = newFrameSrc;
        let intervalId;
        intervalId = setInterval(updateFrameSource.bind(this, intervalId), 50);
      });
    };
  };
 
  // Initialization
  let currentFrameURL;
  initEventListeners();
});

How to use it:
1. Create a widget
2. Add the iframe to the widget and add to it Additional class "trends_n_schedulers"
3. Add above Javascript code to your Custom Javascript and edit trendsMap and schedulersMap tables

[Thomas]

Thank you it works.
But it doesn't work in touch visu. Why there's this row in your code? It disables loading of the inner page in touch visu.

if (!$('body').hasClass('usermode')) {
return;
}

[buuuudzik]

This row is for using this script only in main visualisation and not anywhere else so probably this is the answer for your question But i you delete it it would be executed also on other places like Trends, Schedulers pages. But if you will delete it it would work.

[Thomas]

This code is for using one widget page with an iframe for showing trends and schedulers:

Code:

// Change src of widget and have 1 widget for every trend and scheduler in visualisation
$(function(){
  if (!$('body').hasClass('usermode')) {
    return;
  }
 
  // BELOW CHANGE TRENDS AND SCHEDULERS LIST
  let mapping = [
    // Trends:
    {type: 't', className: 'wt_1', query: 'id=1'},
    {type: 't', className: 'wt_2', query: 'id=2&mode=week'},
    {type: 't', className: 'wt_kitchen-living', query: 'id=2,3&multiple=1'},
    
    // Schedulers:
    {type: 's', className: 'ws_1', query: 'id=1'},
    {type: 's', className: 'ws_2', query: 'id=2'},
    {type: 's', className: 'ws_outdoor-light', query: 'id=1,2&nohol'}
  ];
 
  function updateFrameSource(interval) {
      let widgetIframe = $('.trends_n_schedulers > iframe')[0];
    
    if (widgetIframe) {
         if (widgetIframe.src != location.origin + currentFrameURL) widgetIframe.src = currentFrameURL;
         else clearInterval(interval);
    };
  };
 
  function initEventListeners() {
    for (let i=0; i<mapping.length; i++) {
      let {type, className, query} = mapping[i];
      let newFrameSrc = (type=='t' ? '/scada-vis/trends?' : '/scada-vis/schedulers?') + query;
          
      $('.' + className).on('vclick', function () {
        currentFrameURL = newFrameSrc;
        let intervalId;
        intervalId = setInterval(updateFrameSource.bind(this, intervalId), 50);
      });
    };
  };
 
  // Initialization
  let currentFrameURL;
  initEventListeners();
});

How to use it:
1. Create a widget
2. Add the iframe to the widget and add to it Additional class "trends_n_schedulers"
3. Add above Javascript code to your Custom Javascript and edit trendsMap and schedulersMap tables

This row

Code:

let {type, className, query} = mapping[i];

doesn't work in Edge.
Working solution is

Code:

 let type = mapping[i].type;
     let className = mapping[i].className;
     let query = mapping[i].query;