This forum uses cookies
This forum makes use of cookies to store your login information if you are registered, and your last visit if you are not. Cookies are small text documents stored on your computer; the cookies set by this forum can only be used on this website and pose no security risk. Cookies on this forum also track the specific topics you have read and when you last read them. Please confirm whether you accept or reject these cookies being set.

A cookie will be stored in your browser regardless of choice to prevent you being asked this question again. You will be able to change your cookie settings at any time using the link in the footer.

Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Implementing /digitalyacht/ikommunicate/webAPP
#1
Last summer I ran OpenPlotter 0.8.0 mainly as a server/multiplexer for the incomming data. Allthough this works like a charm, I am plannng to add more functionality. And with that search, I started with the installation of the new version 0.9.0 on my RPI3.

Further, I came across the webAPP page that Digital Yacht implement on their IKomunicate box. The below link shows an zip file with in it the main-html file, a css-file and a settings file.

I was a bit confident. I placed these files in my apache2 webserver folder, and nothing happened. The page does open when go to this ip-adress from my laptop or tablet, but there is no data polling. Somehow the SignalK server is not called propperly.

The first part of the file "iKommunicate-API-Kindle".html" is listed below.
Inhere you'll see that it refers to some ip-adresses, but i am not sure what to type where!?

Code:
<!DOCTYPE HTML>
<HTML>
<HEAD>
 <Title>.</Title>
 <Script src="jquery.min.js"></Script>
 <Link rel="stylesheet" type="text/css" media="all" href="iKommunicate-Kindle.css">

 <Script>
   //217.137.78.199:3000
   var fontSize;
   $(document).ready(function(){
     zoomX = 1;
     zoomY = 1;
     screenWidth = screen.width;
     if(screenWidth>1280)
       zoomX = screen.width / 1280;
     screenHeight = screen.height;
     if(screenHeight>768)
       zoomY = screen.height / 768;

     fontSize = parseInt($('body').css('font-size'),10);
     if(zoomX>1) {
       if(zoomX>zoomY)
          fontSize *= zoomX;
       else if(zoomY>1)
          fontSize *= zoomY;
     }
     $('body').css('font-size',fontSize+'px');
   })
   var NUMBER_VARIABLES=4;
   var LABEL_VARIABLES=[["Depth (K)","Depth (T)","Depth (S)"],
                    ["Speed","SOG"],
                    ["Heading (M)","Heading (T)","COG"],
                    ["Wind (App)","Wind (True)"]
                   ]
   var LABEL_UNITS=[["Meters","Meters","Meters",   "Feet","Feet","Feet"],
                    ["Knots","Knots"],
                    ["Degrees","Degrees","Degrees"],
                    ["Knots","Knots",   "M/S","M/S"]
                   ]
   var KEYS_4BOXES=[["belowKeel","belowTransducer","belowSurface"],
                    ["speedThroughWater","speedOverGround"],
                    ["headingMagnetic","headingTrue","courseOverGround"],
                    ["angleApparent","angleTrue"],
                    ["speedApparent","speedTrue"]
                   ]

   var positionPriority=[-1,-1,-1,-1,-1];

   var ipServer;
   var flagStreamClosed=false;
   var displayMode=0,speedUnitsMode=0,depthUnitsMode=0;
   var currentBoxes=0;
   var guiDrawed=false;
   var currentPath,currentPath2,currentPath3;
   var variableNumber=0;
   var interval=1000;
   var flagFirstBox=true,flagWindAngle=true;
   var i;

   // Start the request of data to the server
   function startRequestDataServer() {
     var urlServer;
     var jsonParsed;
     var value,value2,value3,value4;
     if(ipServer.length==0||ipServer=="192.168.1.64"||ipServer=="192.168.30.221"||ipServer=="192.168.30.219")
       urlServer = "http://demo.signalk.org/signalk/v1/api/vessels/self/";
       // urlServer = "http://217.137.78.199:3000/signalk/v1/api/vessels/self/";
     else
       urlServer = "http://"+ipServer+"/signalk/v1/api/vessels/self/";

Could anyone point me in a direction!?

regards,
Vic
Reply
#2
var value,value2,value3,value4;
ipServer="10.10.10.1:3000";
if(ipServer.length==0||ipServer!="10.10.10.1:3000")
urlServer = "http://demo.signalk.org/signalk/v1/api/vessels/self/";

copy files to /home/pi/.config/signalk-server-node/examples/ik
in browser http://10.10.10.1:3000/examples/ik/Settings.html

Digital Yacht is a supporter of the SignalK team let us also support Digital Yacht!
Reply
#3
Ah, thanks for pointing me in the right direction.

Modified the file with the ip-adresses you mentioned.
Created the folders /examples/ik/in the folder /home/pi/.config/signalk-server-node/
Copied the files (also the modified one) into this created folder.

When going to 10.10.10.1:3000/examples/ki/Settings.html, it could get "settings.html. I then copied the files into /home/pi/.config/signalk-server-node/bower_components/ik. And when I go to 10.10.10.1:3000/ik/iKommunicate-API-Kindle.html, it show the webpage as in the ikommunicate example.

The only thing is that it shows the signalk demo information. and not my information from my only generated signalk.

but again, I am one step forward...

regards,
Vic
Reply
#4
(2016-12-23, 12:08 AM)Vic Wrote: Ah, thanks for pointing me in the right direction.

Modified the file with the ip-adresses you mentioned.
Created the folders /examples/ik/in the folder /home/pi/.config/signalk-server-node/
Copied the files (also the modified one) into this created folder.

When going to 10.10.10.1:3000/examples/ki/Settings.html, it could get "settings.html. I then copied the files into /home/pi/.config/signalk-server-node/bower_components/ik. And when I go to 10.10.10.1:3000/ik/iKommunicate-API-Kindle.html, it show the webpage as in the ikommunicate example.

The only thing is that it shows the signalk demo information. and not my information from my only generated signalk.

but again, I am one step forward...

regards,
Vic

Any more progress on getting sk data to display?

Sent from my SM-G955U using Tapatalk
Reply
#5
(2017-05-12, 11:23 AM)Vamonos Wrote:
(2016-12-23, 12:08 AM)Vic Wrote: Ah, thanks for pointing me in the right direction.

Modified the file with the ip-adresses you mentioned.
Created the folders /examples/ik/in the folder /home/pi/.config/signalk-server-node/
Copied the files (also the modified one) into this created folder.

When going to 10.10.10.1:3000/examples/ki/Settings.html, it could get "settings.html. I then copied the files into /home/pi/.config/signalk-server-node/bower_components/ik. And when I go to 10.10.10.1:3000/ik/iKommunicate-API-Kindle.html, it show the webpage as in the ikommunicate example.

The only thing is that it shows the signalk demo information. and not my information from my only generated signalk.

but again, I am one step forward...

regards,
Vic

Any more progress on getting sk data to display?

Sent from my SM-G955U using Tapatalk

this is not working for me.....

Code:
<!DOCTYPE HTML>
<HTML>
<HEAD>
 <Title>.</Title>
 <Script src="jquery.min.js"></Script>
 <Link rel="stylesheet" type="text/css" media="all" href="iKommunicate-Kindle.css">

 <Script>
   //217.137.78.199:3000
   var fontSize;
   $(document).ready(function(){
     zoomX = 1;
     zoomY = 1;
     screenWidth = screen.width;
     if(screenWidth>1280)
       zoomX = screen.width / 1280;
     screenHeight = screen.height;
     if(screenHeight>768)
       zoomY = screen.height / 768;

     fontSize = parseInt($('body').css('font-size'),10);
     if(zoomX>1) {
       if(zoomX>zoomY)
          fontSize *= zoomX;
       else if(zoomY>1)
          fontSize *= zoomY;
     }
     $('body').css('font-size',fontSize+'px');
   })
   var NUMBER_VARIABLES=4;
   var LABEL_VARIABLES=[["Depth (K)","Depth (T)","Depth (S)"],
                    ["Speed","SOG"],
                    ["Heading (M)","Heading (T)","COG"],
                    ["Wind (App)","Wind (True)"]
                   ]
   var LABEL_UNITS=[["Meters","Meters","Meters",   "Feet","Feet","Feet"],
                    ["Knots","Knots"],
                    ["Degrees","Degrees","Degrees"],
                    ["Knots","Knots",   "M/S","M/S"]
                   ]
   var KEYS_4BOXES=[["belowKeel","belowTransducer","belowSurface"],
                    ["speedThroughWater","speedOverGround"],
                    ["headingMagnetic","headingTrue","courseOverGround"],
                    ["angleApparent","angleTrue"],
                    ["speedApparent","speedTrue"]
                   ]

   var positionPriority=[-1,-1,-1,-1,-1];

   var ipServer;
   var flagStreamClosed=false;
   var displayMode=0,speedUnitsMode=0,depthUnitsMode=0;
   var currentBoxes=0;
   var guiDrawed=false;
   var currentPath,currentPath2,currentPath3;
   var variableNumber=0;
   var interval=1000;
   var flagFirstBox=true,flagWindAngle=true;
   var i;

   // Start the request of data to the server
   function startRequestDataServer() {
     var urlServer;
     var jsonParsed;
     var value,value2,value3,value4;
     ipServer="10.10.10.1:3000";
     if(ipServer.length==0||ipServer!="10.10.10.1:3000")
     urlServer = "http://demo.signalk.org/signalk/v1/api/vessels/self/";
     else
       urlServer = "http://"+ipServer+"/signalk/v1/api/vessels/self/";

     setInterval(function() {
       // If the user close the stream (flagStreamClosed==true), do anything
       if(flagStreamClosed)
         return;
       if(!guiDrawed)
         drawGUI();

       var xhttp = new XMLHttpRequest();
       if(positionPriority[0]==-1) {
         xhttp.open("GET", urlServer, true);
       }
       else {
         switch(currentBoxes) {
           case 0:                                                            // Depth
           case 1:                                                            // Speed
           case 2:                                                            // Course (Heading)
           case 3:                                                            // Wind
             xhttp.open("GET", urlServer+currentPath+"/", true);
             break;
           case 4:                                                            // Depth and Speed
           case 5:                                                            // Course (Heading) and Wind
           case 6:                                                            // All
             xhttp.open("GET", urlServer, true);
             break;
         }
       }
       xhttp.send();
       // The next function is executed when the data arrives from the server
       xhttp.onreadystatechange = function() {
         if (xhttp.readyState == 4 && xhttp.status == 200) {
           if(positionPriority[0]==-1) {
             getPriorities(JSON.parse(xhttp.responseText.replace(/,"value":{}/g,"")));
             getPath(currentBoxes);
             return;
           }
           if(positionPriority[currentBoxes]!=9) {
             switch(currentBoxes) {
               case 0:                                                        // Depth
               case 1:                                                        // Speed
               case 2:                                                        // Course (Heading)
                 value = JSON.parse(xhttp.responseText.replace(/,"value":{}/g,"")).value;
                 if(depthUnitsMode==1&&currentBoxes==0)
                   value *= 3.2808;
                 else if(currentBoxes==1)
                   value *= 1.94384;
                 else if(currentBoxes==2)
                   value *= 57.296;
                 if(currentBoxes!=2)
                   value = value.toFixed(1);
                 else {
                   value = Math.round(value);
                   value = format3Digits(1,value);
                 }
                 displayValue(value,null,null,null,null);
                 break;
               case 3:
                 if(flagWindAngle) {
                   value = JSON.parse(xhttp.responseText.replace(/,"value":{}/g,"")).value;
                   value *= 57.296;
                   value = Math.round(value);
                   value = format3Digits(2,value);
                   xhttp.open("GET", urlServer+currentPath2+"/", true);
                   xhttp.send();
                   flagWindAngle = false;
                 }
                 else {
                   value2 = JSON.parse(xhttp.responseText.replace(/,"value":{}/g,"")).value;
                   if(speedUnitsMode==0)
                     value2 *= 1.94384;
                   value2 = Math.round(value2);
                   displayValue(value,value2,null,null,null);
                   flagWindAngle = true;
                 }
                 break;
               case 4:                                                        // Depth and Speed
                 jsonParsed = JSON.parse(xhttp.responseText.replace(/,"value":{}/g,""));
                 value  = jsonParsed["environment"]["depth"][KEYS_4BOXES[0][positionPriority[0]]].value;
                 if(depthUnitsMode==1)
                   value *= 3.2808;
                 value = value.toFixed(1);
                 value2 = jsonParsed["navigation"][KEYS_4BOXES[1][positionPriority[1]]].value;
                 value2 *= 1.94384;
                 value2 = value2.toFixed(1);
                 displayValue(value,value2,null,null,null);
                 break;
               case 5:                                                        // Course (Heading) and Wind
                 jsonParsed = JSON.parse(xhttp.responseText.replace(/,"value":{}/g,""));
                 value1 = jsonParsed["navigation"][KEYS_4BOXES[2][positionPriority[2]]].value;
                 value1 *= 57.296;
                 value1 = Math.round(value1);
                 value1 = format3Digits(1,value1);
                 value2 = jsonParsed["environment"]["wind"][KEYS_4BOXES[3][positionPriority[3]]].value;
                 value2 *= 57.296;
                 value2 = Math.round(value2);
                 value2 = format3Digits(2,value2);
                 value3 = jsonParsed["environment"]["wind"][KEYS_4BOXES[4][positionPriority[4]]].value;
                 if(speedUnitsMode==0)
                   value3 *= 1.94384;
                 value3 = Math.round(value3);
                 displayValue(value,value2,value3,null,null);
                 break;
               case 6:                                                        // All
                   jsonParsed = JSON.parse(xhttp.responseText.replace(/,"value":{}/g,""));
                   value  = jsonParsed["environment"]["depth"][KEYS_4BOXES[0][positionPriority[0]]].value;
                   if(depthUnitsMode==1)
                     value *= 3.2808;
                   value = value.toFixed(1);
                   value2 = jsonParsed["navigation"][KEYS_4BOXES[1][positionPriority[1]]].value;
                   value2 *= 1.94384;
                   value2 = value2.toFixed(1);
                   value3 = jsonParsed["navigation"][KEYS_4BOXES[2][positionPriority[2]]].value;
                   value3 *= 57.296;
                   value3 = Math.round(value3);
                   value3 = format3Digits(1,value3);
                   value4 = jsonParsed["environment"]["wind"][KEYS_4BOXES[3][positionPriority[3]]].value;
                   value4 *= 57.296;
                   value4 = Math.round(value4);
                   value4 = format3Digits(2,value4);
                   value5 = jsonParsed["environment"]["wind"][KEYS_4BOXES[4][positionPriority[4]]].value;
                   if(speedUnitsMode==0)
                     value5 *= 1.94384;
                   value5 = Math.round(value5);
                   displayValue(value,value2,value3,value4,value5);
                 break;
             }
           }
           else {
             document.getElementById('display11').innerHTML =
                   "<Font Style='Font-Size:500%;'><B>"+LABEL_VARIABLES[currentBoxes][0]+"</B><BR><BR></Font>"+
                   "<span Style='Font-Size:700%;'><B>Unavailable</span></B><BR><BR><BR><BR><BR><BR>"+
                   "<Font Style='Font-Size:500%;'><B>"+LABEL_UNITS[currentBoxes][0]+"</B></Font>";
           }
         }
         else {
         }
       };
     }, interval);
   }

   function drawGUI() {
     switch(Number(displayMode)) {
       case 0:
         currentBoxes = 0;
         break;
       case 1:
         document.getElementById("row1").style.height = "48%";
         document.getElementById("row2").style.display = "table-row";
         currentBoxes = 4;
         break;
       case 2:
         document.getElementById("row1").style.height = "48%";
         document.getElementById("row1").style.width = "50%";
         document.getElementById("row2").style.display = "table-row";
         document.getElementById("row2").style.width = "50%";
         document.getElementById("col12").style.display = "table-cell";
         document.getElementById("col22").style.display = "table-cell";
         currentBoxes = 6;
         break;
     }
     guiDrawed = true;
   }

   function getPath(answerHTTP) {
     switch(currentBoxes) {
       case 0:                                                                // Depth
         switch(positionPriority[0]) {
           case 0:
             currentPath = "environment/depth/belowKeel";
             break;
           case 1:
             currentPath = "environment/depth/belowTransducer";
             break;
           case 2:
             currentPath = "environment/depth/belowSurface";
             break;
         }
         break;
       case 1:                                                                // Speed
         switch(positionPriority[1]) {
           case 0:
             currentPath = "navigation/speedThroughWater";
             break;
           case 1:
             currentPath = "navigation/speedOverGround";
             break;
         }
         break;
       case 2:                                                                // Course (Heading)
         switch(positionPriority[2]) {
           case 0:
             currentPath = "navigation/headingMagnetic";
             break;
           case 1:
             currentPath = "navigation/headingTrue";
             break;
           case 2:
             currentPath = "navigation/courseOverGround";
             break;
         }
         break;
       case 3:                                                                // Wind
         switch(positionPriority[3]) {
           case 0:
             currentPath = "environment/wind/angleApparent";
             break;
           case 1:
             currentPath = "environment/wind/angleTrue";
             break;
         }
         switch(positionPriority[4]) {
           case 0:
             currentPath2 = "environment/wind/speedApparent";
             break;
           case 1:
             currentPath2 = "environment/wind/speedTrue";
             break;
         }
         break;
       case 4:                                                                // Depth and Speed
         switch(positionPriority[0]) {
           case 0:
             currentPath = "environment/depth/belowKeel";
             break;
           case 1:
             currentPath = "environment/depth/belowTransducer";
             break;
           case 2:
             currentPath = "environment/depth/belowSurface";
             break;
         }
         switch(positionPriority[1]) {
           case 0:
             currentPath2 = "navigation/speedThroughWater";
             break;
           case 1:
             currentPath2 = "navigation/speedOverGround";
             break;
         }
         break;
       case 5:                                                                // Course (Heading) and Wind
         switch(positionPriority[2]) {
           case 0:
             currentPath = "navigation/headingMagnetic";
             break;
           case 1:
             currentPath = "navigation/headingTrue";
             break;
           case 2:
             currentPath = "navigation/courseOverGround";
             break;
         }
         switch(positionPriority[3]) {
           case 0:
             currentPath2 = "environment/wind/angleApparent";
             break;
           case 1:
             currentPath2 = "environment/wind/angleTrue";
             break;
         }
         switch(positionPriority[4]) {
           case 0:
             currentPath3 = "environment/wind/speedApparent";
             break;
           case 1:
             currentPath3 = "environment/wind/speedTrue";
             break;
         }
         break;
       case 6:                                                                // All
         break;
     }
   }

   function getPriorities(answerHTTP) {
     if(typeof answerHTTP.environment.depth.belowKeel!="undefined")             // Depth
       if(typeof answerHTTP.environment.depth.belowKeel.value!="undefined")
         positionPriority[0] = 0;
     if(positionPriority[0]==-1&&typeof answerHTTP.environment.depth.belowTransducer!="undefined")
       if(positionPriority[0]==-1&&typeof answerHTTP.environment.depth.belowTransducer.value!="undefined")
         positionPriority[0] = 1;
     if(positionPriority[0]==-1&&typeof answerHTTP.environment.depth.belowSurface!="undefined")
       if(positionPriority[0]==-1&&typeof answerHTTP.environment.depth.belowSurface.value!="undefined")
         positionPriority[0] = 2;
     if(positionPriority[0]==-1)
       positionPriority[0] = 9;

     if(typeof answerHTTP.navigation.speedThroughWater!="undefined")            // Speed
       if(typeof answerHTTP.navigation.speedThroughWater.value!="undefined")
         positionPriority[1] = 0;
     if(positionPriority[1]==-1&&typeof answerHTTP.navigation.speedOverGround!="undefined")
       if(positionPriority[1]==-1&&typeof answerHTTP.navigation.speedOverGround.value!="undefined")
         positionPriority[1] = 1;
     if(positionPriority[1]==-1)
       positionPriority[1] = 9;

     if(typeof answerHTTP.navigation.headingMagnetic!="undefined")              // Course (Heading)
       if(typeof answerHTTP.navigation.headingMagnetic.value!="undefined")
         positionPriority[2] = 0;
     if(positionPriority[2]==-1&&typeof answerHTTP.navigation.headingTrue!="undefined")
       if(positionPriority[2]==-1&&typeof answerHTTP.navigation.headingTrue.value!="undefined")
         positionPriority[2] = 1;
     if(positionPriority[2]==-1&&typeof answerHTTP.navigation.courseOverGround!="undefined")
       if(positionPriority[2]==-1&&typeof answerHTTP.navigation.courseOverGround.value!="undefined")
       positionPriority[2] = 2;
     if(positionPriority[2]==-1)
       positionPriority[2] = 9;

     if(typeof answerHTTP.environment.wind.angleApparent!="undefined")  // Wind
       if(typeof answerHTTP.environment.wind.angleApparent.value!="undefined")  // Wind
         positionPriority[3] = 0;
     if(positionPriority[3]==-1&&typeof answerHTTP.environment.wind.angleTrue!="undefined")
       if(positionPriority[3]==-1&&typeof answerHTTP.environment.wind.angleTrue.value!="undefined")
         positionPriority[3] = 1;
     if(positionPriority[3]==-1)
       positionPriority[3] = 9;
     if(typeof answerHTTP.environment.wind.speedApparent!="undefined")          // Wind
       if(typeof answerHTTP.environment.wind.speedApparent.value!="undefined")
         positionPriority[4] = 0;
     if(positionPriority[4]==-1&&typeof answerHTTP.environment.wind.speedTrue!="undefined")
       if(positionPriority[4]==-1&&typeof answerHTTP.environment.wind.speedTrue.value!="undefined")
         positionPriority[4] = 1;
     if(positionPriority[4]==-1)
       positionPriority[4] = 9;
   }

   function displayValue(value,value2,value3,value4,value5) {
     var offset=0;
     switch(currentBoxes) {
       case 0:
       case 1:
       case 2:
         if(depthUnitsMode==1&&currentBoxes==0)
           offset = 2;
         document.getElementById('display11').innerHTML =
               "<Font Style='Font-Size:600%;'><B>"+LABEL_VARIABLES[currentBoxes][positionPriority[currentBoxes]]+
                     "</B><BR><BR></Font>"+
               "<span Style='Font-Size:1750%;'><B>"+value+"</span></B><BR><BR><BR><BR><BR><BR>"+
               "<Font Style='Font-Size:600%;'><B>"+LABEL_UNITS[currentBoxes][positionPriority[currentBoxes]+offset]+
                     "</B></Font>";
         break;
       case 3:
         if(speedUnitsMode==1)
           offset = 2;
         document.getElementById('display11').innerHTML =
               "<Font Style='Font-Size:600%;'><B>"+LABEL_VARIABLES[currentBoxes][positionPriority[currentBoxes]]+
                     "</B></Font><BR><BR><BR><BR>"+
               "<span Style='Font-Size:1500%; Display:Block; Line-Height:0.9;'><B>"+value+"<BR>"+value2+
                     "</span Style='line-height: 1;'></B><BR><BR><BR>"+
               "<Font Style='Font-Size:600%;'><B>"+LABEL_UNITS[currentBoxes][positionPriority[currentBoxes]+offset]+
                     "</B><BR></Font>";
         break;
       case 4:
         if(depthUnitsMode==1)
           offset = 2;
         document.getElementById('display11').innerHTML =
               "<Font Style='Font-Size:300%;'><B>"+LABEL_VARIABLES[0][positionPriority[0]]+"</B></Font><BR><BR><BR>"+
               "<span Style='Font-Size:1000%;'><B>"+value+"</span></B><BR><BR><BR>"+
               "<Font Style='Font-Size:300%;'><B>"+LABEL_UNITS[0][positionPriority[0]+offset]+"</B></Font>";
         document.getElementById('display21').innerHTML =
               "<Font Style='Font-Size:300%;'><B>"+LABEL_VARIABLES[1][positionPriority[1]]+"</B></Font><BR><BR><BR>"+
               "<span Style='Font-Size:1000%;'><B>"+value2+"</span></B><BR><BR><BR>"+
               "<Font Style='Font-Size:300%;'><B>"+LABEL_UNITS[1][positionPriority[1]]+"</B></Font>";
         break;
       case 5:
         document.getElementById('display11').innerHTML =
               "<Font Style='Font-Size:300%;'><B>"+LABEL_VARIABLES[2][positionPriority[2]]+"</B></Font><BR><BR><BR>"+
               "<span Style='Font-Size:1000%;'><B>"+value+"</span></B><BR><BR><BR>"+
               "<Font Style='Font-Size:300%;'><B>"+LABEL_UNITS[2][positionPriority[2]+offset]+"</B></Font>";
         if(speedUnitsMode==1)
           offset = 2;
         document.getElementById('display21').innerHTML =
               "<Font Style='Font-Size:300%;'><B>"+LABEL_VARIABLES[3][positionPriority[3]]+"</B></Font><BR><BR>"+
               "<span Style='Font-Size:900%; Display:Block; Line-Height:0.9;'><B>"+value2+"<BR>"+value3+
                     "</span></B><BR>"+
               "<Font Style='Font-Size:300%;'><B>"+LABEL_UNITS[3][positionPriority[3]+offset]+"</B></Font>";
         break;
       case 6:
         if(depthUnitsMode==1)
           offset = 2;
         document.getElementById('display11').innerHTML =
               "<Font Style='Font-Size:300%;'><B>"+LABEL_VARIABLES[0][positionPriority[0]]+"</B></Font><BR><BR><BR>"+
               "<span Style='Font-Size:900%;'><B>"+value+"</span></B><BR><BR><BR>"+
               "<Font Style='Font-Size:300%;'><B>"+LABEL_UNITS[0][positionPriority[0]+offset]+"</B></Font>";
         document.getElementById('display12').innerHTML =
               "<Font Style='Font-Size:300%;'><B>"+LABEL_VARIABLES[1][positionPriority[1]]+"</B></Font><BR><BR><BR>"+
               "<span Style='Font-Size:900%;'><B>"+value2+"</span></B><BR><BR><BR>"+
               "<Font Style='Font-Size:300%;'><B>"+LABEL_UNITS[1][positionPriority[1]]+"</B></Font>";
         document.getElementById('display21').innerHTML =
               "<Font Style='Font-Size:300%;'><B>"+LABEL_VARIABLES[2][positionPriority[2]]+"</B></Font><BR><BR><BR>"+
               "<span Style='Font-Size:900%;'><B>"+value3+"</span></B><BR><BR><BR>"+
               "<Font Style='Font-Size:300%;'><B>"+LABEL_UNITS[2][positionPriority[2]+offset]+"</B></Font>";
         offset = 0;
         if(speedUnitsMode==1)
           offset = 2;
         document.getElementById('display22').innerHTML =
               "<Font Style='Font-Size:300%;'><B>"+LABEL_VARIABLES[3][positionPriority[3]]+"</B></Font><BR><BR>"+
               "<span Style='Font-Size:800%; Display:Block; Line-Height:0.9;'><B>"+value4+"<BR>"+value5+
                     "</span></B><BR>"+
               "<Font Style='Font-Size:300%;'><B>"+LABEL_UNITS[3][positionPriority[3]+offset]+"</B></Font>";
         break;
     }
   }

   // This function is executed when the user press the button "Close/Open the stream", activating or deactivating
   // the flag "flagStreamClosed". This flag is checked in the function "getVariablesAvailable". If false, the program
   // request data from the server. If it is true, doesnt ask for data
   function openCloseStream() {
     if (document.getElementById("buttonOpenCloseStream").innerHTML.trim()=="Close Stream") {
       document.getElementById("buttonOpenCloseStream").innerHTML = "Open Stream";
       flagStreamClosed = true;
     }
     else {
       document.getElementById("buttonOpenCloseStream").innerHTML = "Close Stream";
       flagStreamClosed = false;
     }
     return false;
   }

   document.onclick = function(event) {
     if(event.offsetX>document.body.offsetWidth/2) {
       switch(currentBoxes) {
         case 0:
         case 1:
         case 2:
           currentBoxes++;
           break;
         case 3:
           break;
         case 4:                                                               // 12
           currentBoxes++;
           break;
          case 5:                                                              // 34
           break;
         case 6:                                                               // 1234
           break;
       }
     }
     else {
       switch(currentBoxes) {
         case 0:
           break;
         case 1:
         case 2:
         case 3:
            currentBoxes--;
           break;
         case 4:
           break;
         case 5:
            currentBoxes--;
            break;
         case 6:
           break;
       }
     }
     getPath(1,null);
   }

   // This function save, in the local space area, the value of the IP the user wrote in the field "IP" of the
   // WEB page, so he/she doesnt need to write again it every time the page is accessed
   function saveNewIP(event) {
     // The new IP is saved when the user press Enter (code key 13)
     if(event.keyCode===13) {
       if($('#ipServerInput').val().length!=0)
         localStorage.setItem('ipServer',$('#ipServerInput').val());
       else
         localStorage.removeItem("ipServer");
     }

     return false;
   }

   // This function save, in the local space area, the value of the IP the user wrote in the field "IP" of the
   // WEB page, so he/she doesnt need to write again it every time the page is accessed
   function getSettings() {
     if(localStorage.getItem("speedUnitsModeSetting"))
       speedUnitsMode = localStorage.getItem("speedUnitsModeSetting");
     if(localStorage.getItem("depthUnitsModeSetting"))
       depthUnitsMode = localStorage.getItem("depthUnitsModeSetting");
     if(localStorage.getItem("displayModeSetting"))
       displayMode = localStorage.getItem("displayModeSetting");
     if(localStorage.getItem("nightViewMode")) {
       if(localStorage.getItem("nightViewMode")==1) {
         document.body.classList.add("bodyNightView");
         document.getElementById("buttonSettings").style.backgroundImage = "url('OptionsImageWhite.png')";
       }
       else {
         document.body.classList.remove("bodyNightView");
         document.getElementById("buttonSettings").style.backgroundImage = "url('OptionsImage.png')";
       }

     }

     guiDrawed = false;
   }

   function format3Digits(typeCall,value) {
     switch(typeCall) {
       case 1:
         var valueString = value+"";
         if((value>0&&valueString.length>=3)||(value<0&&valueString.length>3))
           return valueString;
         if(value>=0) {
           while(valueString.length<3)
             valueString = "0"+valueString;
           value = valueString;
         }
         else {
           value = -value;
           valueString = value+"";
           while(valueString.length<3)
             valueString = "0"+valueString;
           valueString = "-"+valueString;
         }
         return valueString;
       case 2:
         if(value>180)
           value = value - 360;
         var valueString = value+"";
         if((value>0&&valueString.length>=3)||(value<0&&valueString.length>3)) {
           if(value>=100&&value<180)
             valueString = value+"-";
           return valueString;
         }
         if(value>=0&&value<100) {
           while(valueString.length<3)
             valueString = "0"+valueString;
           if(value!=0)
             valueString += "-";
         }
         else if(value>=-99&&value<=-1){
           value = -value;
           valueString = value+"";
           while(valueString.length<3)
             valueString = "0"+valueString;
           valueString = "-"+valueString;
         }
         return valueString;
     }
   }
 </Script>
</HEAD>

<BODY class=nightView onresize='document.getElementsByTagName("body")[0].style[ "font-size" ] = document.body.clientWidth*(12/600) + "px";'>
 <Table id="table" Style="Width:100%; Height:100%; Margin-Top:3px; Margin:0px; Padding:0" Border="0" CellPadding="0"
       CellSpacing="0">
   <TR Id="row1" Height=93%>
     <TD Width=50% Align="Center" VAlign="Center" Style="Border:1px solid;">
        <Div id="display11"></Div>
     </TD>
     <TD Id="col12" Width=50% Align="Center" VAlign="Center" Style="Border:1px solid; Border-Left-Style:Hidden; Display:None;">
        <Div id="display12"></Div>
     </TD>
   </TR>
   <TR Id="row2" Height=45% Style="Border:1px solid; Display:None;">
     <TD Width=50% Align="Center" VAlign="Center" Style="Border:1px solid; Border-Top-Style:Hidden;">
        <Div id="display21"></Div>
     </TD>
     <TD Id="col22" Width=50% Align="Center" VAlign="Center" Style="Border:1px solid;  Border-Left-Style:Hidden;
           Border-Top-Style:Hidden; Display:None;">
        <Div id="display22"></Div>
     </TD>
   </TR>
   <TR Height=7%>
     <TD Width=100% Align="Center" VAlign="Center" Style="Border:1px solid; Border-Top-Style:Hidden;" ColSpan=2>
       <Form>
         <div>
           <span id="ipServerInputLabel" Style="Display:None;"><B>URL or IP Address:</B></span>
           <Input Type="Text" id="ipServerInput" Size="15%"
                 PlaceHolder="demo.signalk.org" Style="Padding-top:3px; Padding-Bottom:3px; Display:None;"
                 onKeyPress="saveNewIP(event)">
           <Button id="buttonOpenCloseStream" Type="Button" Style="Color:White; Background-Color:Black; Border-Radius:4px;
                 Padding-top:3px; Padding-Bottom:3px; Display:None;" onClick="openCloseStream()">Close Stream</Button>
           <Button id="buttonSettings" Type="Button" Style="Border-Style:none; Background-Color:Transparent;
                 background-image: url('OptionsImage.png');
                 background-repeat: no-repeat; background-size:contain; Border-Radius:4px;
                 Padding-top:3px; Padding-Bottom:3px;" onclick="window.location.href='Settings.html'">
                 &nbsp&nbsp&nbsp&nbsp</Button>
         </div>
       </Form>
     </TD>
   </TR>
 </Table>
 <Script>
   ipServer = window.location.host;
   if(ipServer.length==0||ipServer=="192.168.1.64"||ipServer=="192.168.30.221"||ipServer=="192.168.30.219")
     document.getElementById("buttonSettings").style.opacity = 0.5;
   else
     document.getElementById("buttonSettings").style.opacity = 1;
console.log(ipServer);
   getSettings();
   startRequestDataServer();
//console.log(JSON.stringify(jsonParsed));
//console.log(positionPriority[0]+"   "+positionPriority[1]+"   "+positionPriority[2]+"   "+positionPriority[3]);
 </Script>
</BODY>
</HTML>
Huh Huh Huh Huh Huh


Attached Files Image(s)
       
Reply
#6
HowTo:
extract Kindle_App_Example.zip into /home/pi/.config/signalk-server-node/public/examples

To simulate values:
Start OpenPlotter GUI
Tools>SignalK Simulator
start
activate/check all Sliders (in diagnostic SignalK you should see 8 lines OPsimulation)

Open a browser
http://openplotter.local:3000/examples/K...indle.html or
http://10.10.10.1:3000/examples/Kindle_A...indle.html

That works for me.
Reply
#7
(2017-12-05, 11:14 PM)e-sailing Wrote: HowTo:
extract Kindle_App_Example.zip into /home/pi/.config/signalk-server-node/public/examples

To simulate values:
Start OpenPlotter GUI
Tools>SignalK Simulator
start
activate/check all Sliders (in diagnostic SignalK you should see 8 lines OPsimulation)

Open a browser
http://openplotter.local:3000/examples/K...indle.html or
http://10.10.10.1:3000/examples/Kindle_A...indle.html

That works for me.


EUREKA!!!!

Now I can launch the HTML app from kindle!!!, but no data are displayed.....

Tomorrow I will try to modify the HTML app to:

var value,value2,value3,value4;
ipServer="10.10.10.1:3000";
if(ipServer.length==0||ipServer!="10.10.10.1:3000")
urlServer = "http://demo.signalk.org/signalk/v1/api/vessels/self/";

[emoji108][emoji120]


Inviato dal mio iPad utilizzando Tapatalk
Reply
#8
EUREKAAAAAAAAA

I have dataaaaaaaaaa

and using WebLaunch, it is full screen.

now I will try to have portait view.......

THANKS A LOT!!!!!!!


Attached Files Image(s)
   
Reply
#9
I was just messing with this today on the boat, which doesn't have a connection to the Internet. I'm only getting a white screen, with no instruments, even when I use the SignalK simulator.

I noticed in the script the line "urlServer = "http://demo.signalk.org/signalk/v1/api/vessels/self/";", which clearly points to signalk.org. Could this cause a problem if OP isn't connected? I looked at it and it appears to be a set of definitions. Would it help to move that page to the local server and point to it there?
Reply
#10
(2017-12-23, 11:15 PM)abarrow Wrote: I was just messing with this today on the boat, which doesn't have a connection to the Internet. I'm only getting a white screen, with no instruments, even when I use the SignalK simulator.

I noticed in the script the line "urlServer = "http://demo.signalk.org/signalk/v1/api/vessels/self/";", which clearly points to signalk.org. Could this cause a problem if OP isn't connected? I looked at it and it appears to be a set of definitions. Would it help to move that page to the local server and point to it there?


I think that address is only for when it didn't find some signalk locally


Op 0.16.0
Rpi3
Gps USB
Imu MPU 9250
Pressure BMP180
Temperature HTU21D
Humidity HTU21D
Ais reciver 820t2 & sdr
Reply


Forum Jump:


Users browsing this thread: 1 Guest(s)