Custom JavaScript examples

[buuuudzik]

Is it possible to do the moving text with the last alerts which appeared in the last 5 minutes and its timestamp?

[buuuudzik]

You can also replace [0].innerHTML with jQuery's .html()

Thanks Admin,

The code will be like this then:

Here is the final sample for changing color with css based on setpoint and actual value difference.

Give the first setpoint these additional classes 'Setp Setp_1', the 2nd 'Setp Setp_2', the 3th 'Setp Setp_3' etc

Give the first actual these additional classes 'Temp Temp_1', the 2nd 'Temp Temp_2', the 3th 'Temp Temp_3' etc  

So all setpoints will have 2 additional classes (Setp and Setp_nr) and all actuals will have 2 additional classes (Temp and Temp_nr)

Make sure to use incredimental sequense 1,2,3,4,5 etc. without gaps as Temp_nr and Setp_nr (the number makes the match between both)

Put this code in your custom JavaScript:

Code:

$(function(){
 
 // Set color values
 var defaultcolor = $('.Temp').css("color") // Use color that is default set on the object
 var highcolor = 'rgb(0, 153, 204)' // Blue
 var lowcolor = 'rgb(204, 153, 0)' // Orange
 
 // Function to change colors on values
 function CheckSetpointandValue(){
   // Check if and how many elements there are with additional class 'Temp'
   if ($(".Temp").length > 0){

     // Set number of items to loop through based on additional class 'Temp' items
     var TempValueItems = $(".Temp").length // Determine number of compare items
     
     // Set difference between actual and setpoint to change color
     var MinimalDifference = 0.5 // Determine minnimal difference between setpoint and actual temperature
   
     // Loop to items to set CSS
     for (i = 1; (i-1) < TempValueItems; i++) {
       // Set conditions for Setp_nr and Temp_nr
       if ( Number( $(".Temp_" + i).html() ) > ( Number( $(".Setp_" + i).html() ) + MinimalDifference ) ){
         $(".Temp_" + i).css("color", highcolor);
       } else if ( ( Number( $(".Temp_" + i).html() ) + MinimalDifference ) < Number( $(".Setp_" + i).html() ) ){
         $(".Temp_"  + i).css("color", lowcolor);
       } else {
         $(".Temp_" + i).css("color", defaultcolor);
       }
     }
   }
 }  
 
 // Check for changes on value of item with Temp
 $('.Temp').bind("DOMSubtreeModified",function(){
   CheckSetpointandValue();
 });
 
 // Check for changes on value of item with Setp
 $('.Setp').bind("DOMSubtreeModified",function(){
   CheckSetpointandValue();
 });
 
 // Initial execution
 CheckSetpointandValue();
 
});

BR,

Erwin

When temperature or setpoint is in the Objects with some unit e.g. '°C' there must be additional lines for delete this unit from the text.

This could be in this way:

Code:

     // Loop to items to set CSS
     for (i = 1; (i-1) < TempValueItems; i++) {
       // Set conditions for Setp_nr and Temp_nr
       temperature = ( $(".Temp_" + i).html() ).slice(0, -2);
       setpoint = ( $(".Setp_" + i).html() ).slice(0, -2);
               
       if ( temperature > ( setpoint + MinimalDifference ) ){
         $(".Temp_" + i).css("color", highcolor);
       
       } else if ( ( temperature + MinimalDifference ) < setpoint ){
         $(".Temp_"  + i).css("color", lowcolor);
         
       } else {
         $(".Temp_" + i).css("color", defaultcolor);
       }
     }
   }
 }  

[admin]

Try replacing Number(...) calls with parseFloat(...). Then it won't matter whether you have units/suffix set or not.

[buuuudzik]

Try replacing Number(...) calls with parseFloat(...). Then it won't matter whether you have units/suffix set or not.

It works good So this is ready. I've checked also the possibility of using one pair (Temp_1 and Setp_1) in a few places, when you have actual temperature presented in a few places. You must add to every 2, 3, 4 etc. actual temp only 'Temp_x' and it works.


Only it not work on iPhone 5s and iPad Air2 when temperature is on the widget. On PC it working also on the widget. Do you know what could be the reason?

[buuuudzik]

Does anybody know how can I find and edit via custom javascript text which is in the page which is in the iframe?

I've tried:

document.getElementById("iframe1").contentWindow.document.getElementById("text")

but it not works

[Erwin van der Zwart]

---

Hi,

Here is a update: Use this script:

Code:

$(function(){

 $('iframe').load(function() {
   var iframeInnerElement = $('iframe').contents().find('#bloktext').get(0);
   iframeInnerElement.innerHTML = "Erwin van der Zwart";
 });
 
});

Your <p> element where the text actualy is has no id. Make sure you have set it like this:

Code:

<div id="blok">
 <p id="bloktext">tekst</p>
</div>

Now you can do whatever with the element (:

BR,

Erwin

[buuuudzik]

I've added the additional class to the iframe: ''komunikat1".

My iframe has following structure:

Code:

-- Create HTML content
<!DOCTYPE html>
<html>
 <head>
   <meta charset="utf-8">
   <title>Darmowy Kurs CSS</title>

   <style>
     #blok {
       position:relative;
       width:660px;
       height:80px;
       line-height:80px;
       margin:0 auto;
       <!--    border:3px solid #DDD;
                border-color: #787878;
                border-radius: 10px;    -->
                font-family:sans-serif;
       font-size:50px;
                font-weight:bold;
                color: white;
       background-color:]] .. color .. [[;
       overflow:hidden;
     }

     #blok > p {
       position:absolute;
       margin:0;
       white-space:nowrap;
animation:przesun 20s linear infinite;
-webkit-animation:przesun 20s linear infinite; /* dla Google Chrome, Safari, Opera 15+ */
     }

     #blok > p:hover {
       animation-play-state:paused;
       -webkit-animation-play-state:paused;
     }
      
     /* ------------ANIMACJA-PRZESUN------------ */
     @keyframes przesun
     {
       0% { transform:translateX(0); padding-left:110%; }
       100% { transform:translateX(-100%); padding-left:110%; }
     }

     @-webkit-keyframes przesun /* dla Google Chrome, Safari, Opera 15+ */
     {
       0% { -webkit-transform:translateX(0); padding-left:110%; }
       100% { -webkit-transform:translateX(-100%); padding-left:110%; }
     }
   </style>
 </head>

 <body>

   <div id="blok">
     <p>tekst</p>
   </div>

 </body>
</html>]]

But unfortunately console in Mozilla show:
"myiframe is undefined"


I've also tried run this function after the document is ready

Code:

$(function(){
$( document ).ready(function() {
var myiframe = document.getElementsByClassName("komunikat1")[0];
var myiframeelement = myiframe.contentWindow.document.getElementById('blok')
console.log(myiframeelement)
});
});

but unfortunately the result is the same.

---

I've tried but I have this(something but probably not exactly "blok"):

[Erwin van der Zwart]

Hi Buuuudzik,

The problem is that the iframe is not fully loaded when
grabbing the element. I changed the code to solve this.

See previous post, i have updated the article (;

BR,

Erwin van der Zwart

[buuuudzik]

Yes, it works! You're the best. Maybe do you have some idea how to change css and interval of this page.

I've tried:

Code:

$(function(){
 var black = 'rgb(0, 0, 0)' // Black
 $('iframe').load(function() {
   // Changing text
   var iframeInnerElement = $('iframe').contents().find('#bloktext').get(0);
   iframeInnerElement.innerHTML = "Erwin van der Zwart";
   
   // Changing interval
   iframeInnerElement.css('animation', przesun 4s linear infinite);
   iframeInnerElement.css('-webkit-animation', przesun 4s linear infinite);
   
   // Changing background color
   var iframeInnerElement = $('iframe').contents().find('#blok').get(0);
   iframeInnerElement.css('background-color', black);

 });
 
 
});

When I've tried run lines for "Changing interval" the console show:
"identifier starts immediately after numeric literal"

When I've tried run lines for "Changing background color" the console show:
"iframeInnerElement.css is not a function"

[Erwin van der Zwart]

Hi Buuuudzik,

Change your css with Jquery like this:

Code:

// Change text opacity
$(iframeInnerElement).css('opacity', '0.2');

// Change text color
$(iframeInnerElement).css('color', 'rgb(0, 0, 0)');

// Change duration
var textspeed = 4;
$(iframeInnerElement).css('animationDuration', textspeed + 's');

BR,

Erwin van der Zwart

[buuuudzik]

It works There is no thing that you couldn't do on LM

[Erwin van der Zwart]

Hi Buuudzik,

To be honest, i can't do anything with LM, but i can do magic with
homeLYnk and spaceLYnk (:

BR,

Erwin van der Zwart

[buuuudzik]

What kind of javascript function you are using for sleep function like os.sleep() in LUA?

[Erwin van der Zwart]

Hi Buuuudzik,

Try this:

Code:

// Sleep time expects milliseconds
function sleep (time) {
 return new Promise((resolve) => setTimeout(resolve, time));
}

// Usage:
sleep(500).then(() => {
   // Do something after the sleep
});

BR,

Erwin

[admin]

Use built-in setTimeout, just keep in mind that it's async, so it will not further block execution unlike Lua os.sleep.

Code:

setTimeout(function() {
  console.log('hello')
}, 1000); // time in in milliseconds

[admin]

Task: change which plan is shown when plan link is clicked depending on object value. For example, there are 2 plans for climate control, winter mode has heating controls, summer mode has air conditioning.

1. Create two plans: named Winter mode and Summer mode
2. Create a boolean object 1/1/1 (for which we assume that true = winter, false = summer)
3. Create a plan link element and add summer-winter to Additional classes. Plan link location does not matter
4. Add this to custom JavaScript (edit config variables as needed if plan names or object address is different):

Code:

$(function() {
 // make sure we're in visualization mode
 if (typeof grp === 'undefined') {
   return;
 }
 
 // config
 var winterPlanName = 'Winter mode'
   , summerPlanName = 'Summer mode'
   , toggleObject = '1/1/1' // true = winter, false = summer
   , planLinkClass = '.summer-winter';

 // find plan id by plan name
 function findPlanByName(name) {
   var id = -1;
   $.each(planStore, function(pid, plan) {
     if (plan.name == name) {
       id = pid;
     }
   });

   return id;
 };

 // listen to changes on summer/winter object
 grp.listen(toggleObject, function(obj) {
   var id = findPlanByName(obj.value ? winterPlanName : summerPlanName)
     , el = $(planLinkClass);

   // remove old click handler
   el.off('vclick');
   // assign new handler
   el.on('vclick', function() {
     showPlan(id);
   });
 });
});

[buuuudzik]

Try replacing Number(...) calls with parseFloat(...). Then it won't matter whether you have units/suffix set or not.

It works good So this is ready. I've checked also the possibility of using one pair (Temp_1 and Setp_1) in a few places, when you have actual temperature presented in a few places. You must add to every 2, 3, 4 etc. actual temp only 'Temp_x' and it works.


Only it not work on iPhone 5s and iPad Air2 when temperature is on the widget. On PC it working also on the widget. Do you know what could be the reason?

Do somebody know what could be the reason that on Apple devices on widget temperature is not colored but when I open the same page on the PC browser(Mozilla and also Safari) temperatures on a widget are colored?

[admin]

Probably some bug in iOS where DOMSubtreeModified event is not called on hidden elements. You can try refreshing the status every second and see if it works in iOS:

Code:

// Initial execution
CheckSetpointandValue();
setInterval(CheckSetpointandValue, 1000);

[buuuudzik]

I've tried but unfortunately on iPhone 5s still there is no color but on PC is perfect.

---

I've tried to change the fill color and height of rectangle in SVG which is in <object>. This is the solution.

Code:

$(function(){

 $('object').load(function() {
   
   var svg = $('object')[0]; // Choosing svg

   var svgDoc = svg.contentDocument; // Choosing content from svg
   var svgItem = svgDoc.getElementById("rect4136"); // Choosing rectangle from content
   svgItem.setAttribute('height', '50'); // Changing attributes e.g. height
   svgItem.style.fill='black'; // Changing style e.g. fill color
 
});
 
});

I hope that it would be helpful for somebody in the future

[buuuudzik]

Here is some svg image and custom script which can be used for learning manipulating svg images by custom javascript. I used Inkscape for editing svg image(e.g. adding new elements).

1. Copy to "Custom javascript":

Code:

// Manipulating SVG images
$(function(){

  $('.blind1 > object').load(function() {
    
    var svg = $('.blind1 > object')[0]; // Choosing svg

    var svgDoc = svg.contentDocument; // Choosing content from svg
    var svgItem = svgDoc.getElementById("rect4136"); // Choosing blind from content
    var svgItem1 = svgDoc.getElementById("g4136"); // Choosing window from content
    var svgItem2 = svgDoc.getElementById("rect4154-4"); // Choosing light from content
    
    position_plus = '32/1/15'; // Position
    grp.listen(position_plus, function(obj, type) {
      if (type == 'init') return false;
      
        let height = Number( svgItem.getAttribute("height") ) + 10;
      console.log('plus, nowa: ', height)
      if (height >= 100) svgItem.setAttribute('height', '100');
      else if (height < 100) svgItem.setAttribute('height', height);
      
      if (height > 50) {
        svgItem.style.fill='black';
        svgItem2.style.opacity= '0';
      } else {
        svgItem.style.fill='red';
          svgItem2.style.opacity= '80';
      };
    }, true);
    
    position_minus = '32/1/16';
    grp.listen(position_minus, function(obj, type) {
      if (type == 'init') return false;
      
        let height = Number( svgItem.getAttribute("height") ) - 10;
      console.log('minus, nowa: ', height)
      if (height <= 0) svgItem.setAttribute('height', '0');
      else if (height > 0) svgItem.setAttribute('height', height);
      
      if (height > 50) {
        svgItem.style.fill='black';
        svgItem2.style.opacity= '0';
      } else {
        svgItem.style.fill='red';
        svgItem2.style.opacity= '80';
      };
    }, true);
    
    // onclick blind-up
    svgItem.addEventListener('click', function (event) {
        }, false);
        svgItem.addEventListener('click', function (event) {
         svgItem.setAttribute('height', '0')
        }, true);
    
    // onclick blind-down
    svgItem1.addEventListener('click', function (event) {
        }, false);
        svgItem1.addEventListener('click', function (event) {
         svgItem.setAttribute('height', '100');
        }, true);
 
});
 
});

2. Upload 'interactive.svg' to /Images/Backgrounds'.

3. Add it as local image on some plan and add to this image Additional class 'blind1'.

4. You can also add some buttons which change +/-10% height.
Currently they should be created in this way:
For +10%:  '6/0/54' which send 0 and 1
For -10%:  '6/0/53' which send 0 and 1

5. Try manipulating this svg