SSI variable copied to Javascript

Old Forum

posted May 23 '19 at 2:28 pm

I have a DT-85 with 3 CEM20 mods attached. I am monitoring the temperatures and power consumption of 6 induction furnaces. I am attempting to create a web page for each furnace that will:

echo the appropriate channel readings on the web page and 2. based on the value of a computed CV, select a color format for the displayed value (red, yellow, green background).

Displaying the SSI CV value (echo) on screen works just beautifully! Where I am having an issue is getting the value of the computed CV into a JavaScript variable so that a decision can be made for the background color. i.e.

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!-- var current="<!--#echo var = '100CV' -->"; 
document.write("hello "); 
document.write(current); 
//--> </SCRIPT>

If I use a value instead var current="126"; it does functionally what I want, but not when the CV is called. Is there a way of getting SSI variable value to a JavaScript var declaration?

Within tDT85 program, the CV value is calculated as follows:

' ALARM STATE 
' FU-01 
' IN GREEN RANGE CV=2 
' IN YELLOW RANGE UPPER CV=3 
' IN YELLOW RANGE LOWER CV= 1 
' IN RED RANGE UPPER CV=4 
' IN RED RANGE LOWER CV=0 
' TC OPEN CV=5 
' 100CV 
902CV(W)=(150CV+(150CV*900CV)) 
903CV(W)=(150CV-(150CV*900CV)) 
904CV(W)=(150CV+(150CV*901CV)) 
905CV(W)=(150CV-(150CV*901CV)) 
126CV(W)=1*(100CV>905CV)+1*(100CV>903CV)+1*(100CV>902CV)+1*(100CV>904CV)+1*(100CV>=99999) 
900CV=.1 902CV=.2

150CV is the set point value I want to compare the reading to. If the reading is +/-10% of set point, then it is good (green) between 10-20% range is yellow and beyond 20% is red. If the TC is open, then the value is set to 5. The web page is dynamic and auto updates every 20 seconds (DT-85 scan time less than 15 seconds).

Any help would be greatly appreciated.

I have a DT-85 with 3 CEM20 mods attached. I am monitoring the temperatures and power consumption of 6 induction furnaces. I am attempting to create a web page for each furnace that will: 1. echo the appropriate channel readings on the web page and 2. based on the value of a computed CV, select a color format for the displayed value (red, yellow, green background). Displaying the SSI CV value (echo) on screen works just beautifully! Where I am having an issue is getting the value of the computed CV into a JavaScript variable so that a decision can be made for the background color. i.e. ```` <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript"> "; document.write("hello "); document.write(current); //--> </SCRIPT> ```` If I use a value instead **var current="126"**; it does functionally what I want, but not when the CV is called. Is there a way of getting SSI variable value to a JavaScript var declaration? Within tDT85 program, the CV value is calculated as follows: ```` ' ALARM STATE ' FU-01 ' IN GREEN RANGE CV=2 ' IN YELLOW RANGE UPPER CV=3 ' IN YELLOW RANGE LOWER CV= 1 ' IN RED RANGE UPPER CV=4 ' IN RED RANGE LOWER CV=0 ' TC OPEN CV=5 ' 100CV 902CV(W)=(150CV+(150CV*900CV)) 903CV(W)=(150CV-(150CV*900CV)) 904CV(W)=(150CV+(150CV*901CV)) 905CV(W)=(150CV-(150CV*901CV)) 126CV(W)=1*(100CV>905CV)+1*(100CV>903CV)+1*(100CV>902CV)+1*(100CV>904CV)+1*(100CV>=99999) 900CV=.1 902CV=.2 ```` 150CV is the set point value I want to compare the reading to. If the reading is +/-10% of set point, then it is good (green) between 10-20% range is yellow and beyond 20% is red. If the TC is open, then the value is set to 5. The web page is dynamic and auto updates every 20 seconds (DT-85 scan time less than 15 seconds). Any help would be greatly appreciated.

KadeM

posted May 23 '19 at 2:32 pm

Hi Goodfixer,

This is fairly easy to do using jQuery, which is a powerful java scripting tool for customizing the way things look.

You will need to download a jquery javascript item from jquery (http://jquery.com/) and import it in your page. See my code below for a full working example:

 <html>

   <head>

     <!-- IMPORT THE JQUERY SOURCE FILE -->
     <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
     <!-- THIS IS OUR CODE -->

     <script language="JavaScript" type="text/javascript"> 
       //this code runs when the document is loaded
       $(document).ready(function() {
           //these two lines will automatically strip the SSI comments from the DIV
           var CV100=$("#100CV").text(); //get the number from the hidden DIV
           CV100 = parseFloat(CV100); //convert to a number
           //apply styling to the #100CV DIV based on the value of the CV
           if(CV100>10) $("#100CV").css('color', 'red'); 
           if(CV100<2) $("#100CV").css('color', 'green');
       });
     </script>

   </head>

   <body>
     <div id="100CV"><!-- #echo var = "100CV(FF3)" --></div>
   </body>
 </html>

Regards,
Kade Miller

Hi Goodfixer, This is fairly easy to do using jQuery, which is a powerful java scripting tool for customizing the way things look. You will need to download a jquery javascript item from jquery (http://jquery.com/) and import it in your page. See my code below for a full working example: ```` <html> <head>  <script type="text/javascript" src="jquery-1.3.2.min.js"></script>  <script language="JavaScript" type="text/javascript"> //this code runs when the document is loaded $(document).ready(function() { //these two lines will automatically strip the SSI comments from the DIV var CV100=$("#100CV").text(); //get the number from the hidden DIV CV100 = parseFloat(CV100); //convert to a number //apply styling to the #100CV DIV based on the value of the CV if(CV100>10) $("#100CV").css('color', 'red'); if(CV100<2) $("#100CV").css('color', 'green'); }); </script> </head> <body> <div id="100CV"></div> </body> </html> ```` Regards, Kade Miller

KadeM

posted May 23 '19 at 2:33 pm

Also, I see that you wanted to set the background colour, so you will use the css property "background-color" instead of just "color".

If you don't want to use DIV tags (because these have the full width of the browser window) then you can use a SPAN

 <span id="100CV"><!-- #echo var = "100CV(FF3)" --></span>

Kade Miller

Also, I see that you wanted to set the background colour, so you will use the css property "background-color" instead of just "color". If you don't want to use DIV tags (because these have the full width of the browser window) then you can use a SPAN ````  ```` Kade Miller

Old Forum

posted May 23 '19 at 2:42 pm

Thank you for the reply.

ohhhhh...so close to what I'm trying to do!! TYVM!!

From what you gave me and some general hacking skills (lol-been on this learning curve for a week now), I have almost got what I want, however, I'm not sure why it's working the way it does.

My temperature to be displayed is in 100CV (degree F). The range of which the temperature is at is in 126CV (0-5). 126CV is the variable that tells me what "range" 100CV is in. The 126CV variable holds the 0-5 value. 100CV is the temperature reading of the channel.

To display it properly, I have to echo the range back to the parsed variable for the background-color to take effect, but it also prints out the 126CV as well (but the background is right woohoo).

Can I reference the SSI variable back without it actually printing it?

Thanks again in advance

Here is the code:

<html>
   <head>
     <title>Furnace 1 View</title>
     <meta http-equiv="Refresh" content="20">

     <!-- IMPORT THE JQUERY SOURCE FILE --> 
     <script type="text/javascript" src="jquery-1.3.2.min.js"></script> 
     <!-- THIS IS OUR CODE -->
     <script language="JavaScript" type="text/javascript">
     //this code runs when the document is loaded
     $(document).ready(function() { 
          //these two lines will automatically strip the SSI comments from the DIV
          var CV126=$("#126CV").text(); //get the number from the hidden DIV
          CV126=parseFloat(CV126); //convert to a number
          //apply styling to the #126CV DIV based on the value of the CV
          if(CV126==0 || CV126==4) $("#126CV").css('background-color', 'red');
          if(CV126==1 || CV126==3) $("#126CV").css('background-color', 'yellow');
          if(CV126==2) $("#126CV").css('background-color', 'green');
          if(CV126>4) $("#126CV").css('background-color', 'white');
          var CV127=$("#127CV").text(); //get the number from the hidden DIV
          CV127=parseFloat(CV127); //convert to a number
          //apply styling to the #127CV DIV based on the value of the CV
          if(CV127==0 || CV127==4) $("#127CV").css('background-color', 'red');
          if(CV127==1 || CV127==3) $("#127CV").css('background-color', 'yellow');
          if(CV127==2) $("#127CV").css('background-color', 'green');
          if(CV127>4) $("#127CV").css('background-color', 'white');

      }); 
     </script>
   </head>

   <style type="text/css">

       body {background-image:url('custom.jpg');}
       body {color:black,}

       p.la {position:absolute;left:110px;top:308px;}
       p.kw {position:absolute;left:110px;top:331px;}
       p.fa {position:absolute;left:110px;top:354px;}
       p.fv {position:absolute;left:110px;top:378px;}
       p.incoil {position:absolute;left:110px;top:437px;}
       p.outcoil {position:absolute;left:110px;top:461px;}
       p.xtc1 {position:absolute;left:110px;top:516px;}
       p.xtc2 {position:absolute;left:110px;top:540px;}
       p.xtc3 {position:absolute;left:110px;top:565px;}
       p.xtc4 {position:absolute;left:110px;top:590px;}
       p.tc1 {position:absolute;left:438px;top:380px;}
       p.tc2 {position:absolute;left:446px;top:496px;}
       p.tc3 {position:absolute;left:709px;top:500px;}
       p.tc4 {position:absolute;left:720px;top:378px;}
       p.tc5 {position:absolute;left:580px;top:284px;}
       p.tc6 {position:absolute;left:583px;top:415px;}
       p.tc7 {position:absolute;left:345px;top:215px;}
       p.tc8 {position:absolute;left:352px;top:539px;}
       p.tc9 {position:absolute;left:582px;top:617px;}
       p.tc10 {position:absolute;left:803px;top:539px;}
       p.tc11 {position:absolute;left:818px;top:213px;}
       p.tc12 {position:absolute;left:584px;top:146px;}

      p.title {position:absolute;left:450px;top:15px;font-size=50px}

   </style>
   <body>
      <p><!--#echo var = "dtmodel" --></p>
      <p class=title>Furnace 1 View</p>

      <p class=la><span style='background:yellow;'><!--#echo var = "112CV" --></span></p>
      <p class=kw><span style='background:yellow;'><!--#echo var = "113CV" --></span></p>
      <p class=fa><span style='background:yellow;'><!--#echo var = "114CV" --></span></p>
      <p class=fv><span style='background:yellow;'><!--#echo var = "115CV" --></span></p>
       <p class=incoil><span style='background:yellow;'><!--#echo var = "116CV" --></span></p>
       <p class=outcoil><span style='background:yellow;'><!--#echo var = "117CV" --></span></p>
       <p class=xtc1><span style='background:yellow;'><!--#echo var = "118CV" --></span></p>
       <p class=xtc2><span style='background:yellow;'><!--#echo var = "119CV" --></span></p>
       <p class=xtc3><span style='background:yellow;'><!--#echo var = "120CV" --></span></p>
        <p class=xtc4><span style='background:yellow;'><!--#echo var = "121CV" --></span></p>
        <p class=tc1><span id="126CV"><!--#echo var='126CV(FF0)' --"><!-- #echo var = "100CV(FF0)" --></span></p>
        <p class=tc2><span id="127CV"><!--#echo var="127CV(FF0)" --><!--#echo var = "101CV(FF0)" --></span></p>
        <p class=tc3><span style='background:yellow;'><!--#echo var = "102CV" --></span></p>
        <p class=tc4><span style='background:yellow;'><!--#echo var = "103CV" --></span></p>
        <p class=tc5><span style='background:yellow;'><!--#echo var = "104CV" --></span></p>
        <p class=tc6><span style='background:yellow;'><!--#echo var = "105CV" --></span></p>
        <p class=tc7><span style='background:yellow;'><!--#echo var = "106CV" --></span></p>
        <p class=tc8><span style='background:yellow;'><!--#echo var = "107CV" --></span></p>
        <p class=tc9><span style='background:yellow;'><!--#echo var = "108CV" --></span></p>
        <p class=tc10><span style='background:yellow;'><!--#echo var = "109CV" --></span></p>
        <p class=tc11><span style='background:yellow;'><!--#echo var = "110CV" --></span></p>
        <p class=tc12><span style='background:yellow;'><!--#echo var = "111CV" --></span></p>

        <p><span style='background:yellow;'>DataTaker time : <!--#echo var = "T" --></span></p>

        <p><!--#printenv --></p>


        </div>
        </tr>
        </table>
        </tr>
        </table>

Thank you for the reply. ohhhhh...so close to what I'm trying to do!! TYVM!! From what you gave me and some general hacking skills (lol-been on this learning curve for a week now), I have almost got what I want, however, I'm not sure why it's working the way it does. My temperature to be displayed is in 100CV (degree F). The range of which the temperature is at is in 126CV (0-5). 126CV is the variable that tells me what "range" 100CV is in. The 126CV variable holds the 0-5 value. 100CV is the temperature reading of the channel. To display it properly, I have to echo the range back to the parsed variable for the background-color to take effect, but it also prints out the 126CV as well (but the background is right woohoo). Can I reference the SSI variable back without it actually printing it? Thanks again in advance Here is the code: ```` <html> <head> <title>Furnace 1 View</title> <meta http-equiv="Refresh" content="20">  <script type="text/javascript" src="jquery-1.3.2.min.js"></script>  <script language="JavaScript" type="text/javascript"> //this code runs when the document is loaded $(document).ready(function() { //these two lines will automatically strip the SSI comments from the DIV var CV126=$("#126CV").text(); //get the number from the hidden DIV CV126=parseFloat(CV126); //convert to a number //apply styling to the #126CV DIV based on the value of the CV if(CV126==0 || CV126==4) $("#126CV").css('background-color', 'red'); if(CV126==1 || CV126==3) $("#126CV").css('background-color', 'yellow'); if(CV126==2) $("#126CV").css('background-color', 'green'); if(CV126>4) $("#126CV").css('background-color', 'white'); var CV127=$("#127CV").text(); //get the number from the hidden DIV CV127=parseFloat(CV127); //convert to a number //apply styling to the #127CV DIV based on the value of the CV if(CV127==0 || CV127==4) $("#127CV").css('background-color', 'red'); if(CV127==1 || CV127==3) $("#127CV").css('background-color', 'yellow'); if(CV127==2) $("#127CV").css('background-color', 'green'); if(CV127>4) $("#127CV").css('background-color', 'white'); }); </script> </head> <style type="text/css"> body {background-image:url('custom.jpg');} body {color:black,} p.la {position:absolute;left:110px;top:308px;} p.kw {position:absolute;left:110px;top:331px;} p.fa {position:absolute;left:110px;top:354px;} p.fv {position:absolute;left:110px;top:378px;} p.incoil {position:absolute;left:110px;top:437px;} p.outcoil {position:absolute;left:110px;top:461px;} p.xtc1 {position:absolute;left:110px;top:516px;} p.xtc2 {position:absolute;left:110px;top:540px;} p.xtc3 {position:absolute;left:110px;top:565px;} p.xtc4 {position:absolute;left:110px;top:590px;} p.tc1 {position:absolute;left:438px;top:380px;} p.tc2 {position:absolute;left:446px;top:496px;} p.tc3 {position:absolute;left:709px;top:500px;} p.tc4 {position:absolute;left:720px;top:378px;} p.tc5 {position:absolute;left:580px;top:284px;} p.tc6 {position:absolute;left:583px;top:415px;} p.tc7 {position:absolute;left:345px;top:215px;} p.tc8 {position:absolute;left:352px;top:539px;} p.tc9 {position:absolute;left:582px;top:617px;} p.tc10 {position:absolute;left:803px;top:539px;} p.tc11 {position:absolute;left:818px;top:213px;} p.tc12 {position:absolute;left:584px;top:146px;} p.title {position:absolute;left:450px;top:15px;font-size=50px} </style> <body>  Furnace 1 View                       DataTaker time :   </div> </tr> </table> </tr> </table> ````

Pending draft

Selected posts

Confirm move posts

Insufficient permissions

Select a different topic

Confirm selection

Edit history