Custom JavaScript examples

[admin]

Small suggestion, replace this:

Code:

position_plus = Scada.encodeGroupAddress('6/0/54'); // Position
objectStore.addListener(position_plus, function(obj, type) {

With this:

Code:

grp.listen('6/0/54', function(obj, type) {

[Erwin van der Zwart]

Another small suggestion:

Replace 'click' with 'vclick' to make it also work on touch devices (;

BR,

Erwin

[admin]

Good one, click works on touch devices but can have a nasty delay which makes UI feel slow.

[buuuudzik]

What is the difference between:

"objectStore.addListener(position_plus, function(obj, type) {"
and
"grp.listen('6/0/54', function(obj, type) {"

And also how can I run function at every object update not only on change? Because of this I used 2 objects not 1 like would be easier

[admin]

Yes, add a third parameter to grp.listen and set it to true. Then your callback will be executed for every value update.

[buuuudzik]

Like here:
"grp.listen('6/0/54', function(obj, type, true) {"
?

[admin]

Code:

grp.listen('6/0/54', function(obj, type) { ... }, true);

[buuuudzik]

I've tested whole little project also on iPhone and click was working. But when I changed to 'vclick' it is not working. Are you sure that 'vclick' works also on svg?

Sory for a lot of questions but I am still learning a lot with this new tool(Custom javascript)

[admin]

Actually, no, because you are using native addEventListener call, vclick only works on jQuery objects. Don't bother if it's working properly for you already.

[buuuudzik]

Can I replace js function 'addEventListener' with some other jQuery?

Maybe something like this?

Code:

$(document).click(select_element);

I want to know the best solution(from clearness and effective) so your suggestions are very important for me. I also know that jQuery has less code so it is much clearer

[buuuudzik]

Is there a way to replace layer background with some other e.g. background_day and background_night?

I have not the best solution but working. I've added on layout 1 image with additional class 'day' and without any background. I've also added to Custom javascript little code which change the path to night image when GA 0/0/20 has value == false.

Code:

// Day/Night background change
$(function(){
grp.listen('0/0/20', function(obj, type) {
var plans = $('.day')[0]
if (obj.value == true) {plans.innerHTML = '<img src="/scada/resources/img/Day.jpg?1465541682">';} else {plans.innerHTML = '<img src="/scada/resources/img/Night.jpg?1465541682">';}
}, true);
});

[buuuudzik]

Maybe somebody know how solve this problem:

I have temperature on the widget. I am changing its color via custom javascript. On PC(firefox, safari) all is perfect.

The problem is on iOS(iPhone 5s, iPad Air 2) and Android(Samsung Galaxy S7 Edge). Temperature has default color.

There are no errors in the console.

Maybe you Admin, can check if custom javascript works also on controls which are on the widgets on such systems(iOS, Android). Please

[cekca]

Hi is possible to open a specific page + play a mp3 file saved in the storage when a grp address is triggered...??? 

I want to use it for the alert page, in case of alarm the graphics changes to the alert page + play a alert mp3.  

[admin]

See this post for alert tone that should work across all platforms, playing an audio file might require extra activation step on certain devices:
http://forum.logicmachine.net/showthread...16#pid1616

Then you can call showPlan(planId) to show the required page.

[cekca]

The beep function doesn't work in my iphone... ( in the laptop yes )

This solution with mp3 works in both, iphone & laptop:

http://forum.logicmachine.net/showthread...94#pid1294

Is possible to play the sound when a grp address is triggered instead the click of the mouse...???

[Erwin van der Zwart]

Hi Cekca,

There are restrictions build into iOS by Apple that require user input to play audio.

The audio must be called once by a user event like 'click', the sample i made you point out to has this event so that's why it works.

Here is a fix to bypass it but still not fully... You have to at least touch the screen once (anywhere) to be able to play audio during the rest of the session..

Code:

// Fix iOS Audio Context
(function() {
    var fixAudioContext = function (e) {
        if (ctx) {
            // Create empty buffer
            var buffer = ctx.createBuffer(1, 1, 22050);
            var source = ctx.createBufferSource();
            source.buffer = buffer;
            // Connect to output
            source.connect(ctx.destination);
            // Play sound
            if (source.start) {
                source.start(0);
            } else if (source.play) {
                source.play(0);
            } else if (source.noteOn) {
                source.noteOn(0);
            }
        }
        // Check if document is loaded in iframe
        if (window.frameElement){
            // Remove event listeners from parent
            var thisparent = window.parent;
            thisparent.document.removeEventListener('touchstart', fixAudioContext);
            thisparent.document.removeEventListener('touchend', fixAudioContext);
        }
        // Remove events
        document.removeEventListener('touchstart', fixAudioContext);
        document.removeEventListener('touchend', fixAudioContext);
    };
    // Check if document is loaded in iframe
    if (window.frameElement){
        // Add event listeners to parent
        var thisparent = window.parent;
        // Event listener for iOS 6-8 (was previous touchstart event)
        thisparent.document.addEventListener('touchstart', fixAudioContext);
        // Event listener for iOS 9+ (is now touchend event)
        thisparent.document.addEventListener('touchend', fixAudioContext);
    }
    // Event listener for iOS 6-8 (was previous touchstart event)
    document.addEventListener('touchstart', fixAudioContext);
    // Event listener for iOS 9+ (is now touchend event)
    document.addEventListener('touchend', fixAudioContext);
})();

And yes you can trigger audio by KNX object, check previous custom JavaScript samples, there a quite a lot scripts with this functionality..

BR,

Erwin van der Zwart

[Domoticatorino]

Hi Erwing,
I would like to realise a switch which send "1" when I push and send "0" when I release. What do you suggest?
Thanks.

Claudio

[admin]

Add this to Custom JavaScript and set Additional classes to bell-press for each element that requires this functionality. This will work both in Touch and User mode visualization.

Code:

$(function(){
  var el, els;
  
  if ($('html').hasClass('touch')) {
    els = $('.bell-press .control');
  }
  else if ($('body').hasClass('usermode')) {
    els = $('.bell-press');
  }
  else {
    return;
  }
  
  els
    .off('vclick')
    .on('vmousedown.bpress', function() {
      el = $(this).closest('.bell-press');
      grp.write(el.data('object'), true);
    })
    .on('dragstart', function() {
      return false;
    });

  $('body').on('vmouseup.bpress vmousecancel.bpress', function() {
    if (el) {
      grp.write(el.data('object'), false);
      el = null;
    }
  });
});

[buuuudzik]

Do you know how wake up the monitor via javascipt? E.g. when doorphone calls.

[admin]

Not yet possible, there's a draft standard whicl allows to control standby: http://boiler23.github.io/screen-wake/
And there are libraries that allow to prevent sleep on Android/iOS: https://github.com/richtr/NoSleep.js