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
Kindle Paperwhite as KIP Cockpit Display
#11
The photo is the iKommunicate app modified to use larger font and to have speed over ground and magnetic heading on one page.

I use Openplotter with just an IMU and GPS dongle on the boat I crew on Wednesday nights. He doesn’t have depth or wind.

I like having it at the mast so I can see it too.
Reply
#12
yes very good have you the code modified i want to make the same thing thinkyou
Reply
#13
ok for kobo just change localstorage to sessionstorage in the code and the setting
Reply
#14
This is great! I haven't been able to make it work with my Kindle 4 yet - the older browser doesn't seem to work with the code. What sort of refresh rate do you get?
Reply
#15
(2018-11-16, 12:23 PM)RedRyder Wrote: C'est génial! Je n'ai pas encore réussi à le faire fonctionner avec mon Kindle 4 - l'ancien navigateur ne semble pas fonctionner avec le code. Quel type de taux de rafraîchissement obtenez-vous?

the good code its index2 you take the kindle folder in usr lib nodeṣmodules signalk.server public

le 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>

    //10.10.10.1: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","courseOverGroundTrue"],

                     ["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!="10.10.10.1:3000"||ipServer=="localhost:3000"||ipServer=="192.168.30.219")

        urlServer = "http://10.10.10.1:3000/signalk/v1/api/vessels/self/";

        // urlServer = "http://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/courseOverGroundTrue";

              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/speedOverGroundTrue";

              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/courseOverGroundTrue";

              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.courseOverGroundTrue!="undefined")

        if(positionPriority[2]==-1&&typeof answerHTTP.navigation.courseOverGroundTrue.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)

          sessionStorage.setItem('ipServer',$('ipServerInput').val());

        else

          sessionStorage.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(sessionStorage.getItem("speedUnitsModeSetting"))

        speedUnitsMode = sessionStorage.getItem("speedUnitsModeSetting");

      if(sessionStorage.getItem("depthUnitsModeSetting"))

        depthUnitsMode = sessionStorage.getItem("depthUnitsModeSetting");

      if(sessionStorage.getItem("displayModeSetting"))

        displayMode = sessionStorage.getItem("displayModeSetting");

      if(sessionStorage.getItem("nightViewMode")) {

        if(sessionStorage.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='Settings3.html'">

                  &nbsp&nbsp&nbsp&nbsp</Button>

          </div>

        </Form>

      </TD>

    </TR>

  </Table>

  <Script>

    ipServer = window.location.host;

    if(ipServer.length==0||ipServer=="10.10.10.1:3000")

      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>

setting3

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

<Script>
// Get settings
function getSettings() {
if(sessionStorage.getItem("speedUnitsModeSetting")) {
switch(Number(sessionStorage.getItem("speedUnitsModeSetting"))) {
case 0:
document.getElementById("knots").checked = true;
break;
case 1:
document.getElementById("mS").checked = true;
break;
}
}
else {
document.getElementById("knots").checked = true;
}

if(sessionStorage.getItem("depthUnitsModeSetting")) {
switch(Number(sessionStorage.getItem("depthUnitsModeSetting"))) {
case 0:
document.getElementById("meters").checked = true;
break;
case 1:
document.getElementById("feet").checked = true;
break;
}
}
else {
document.getElementById("meters").checked = true;
}

if(sessionStorage.getItem("displayModeSetting")) {
switch(Number(sessionStorage.getItem("displayModeSetting"))) {
case 0:
document.getElementById("oneLine").checked = true;
break;
case 1:
document.getElementById("twoLines").checked = true;
break;
case 2:
document.getElementById("fourBoxes").checked = true;
break;
}
}
else {
document.getElementById("oneLine").checked = true;
}

if(sessionStorage.getItem("nightViewMode")) {
if(SessionStorage.getItem("nightViewMode")==1) {
document.body.classList.add("bodyNightView");
document.getElementById("nightView").checked = true;
}
}
}

// Change display mode (1 line, 2 lines, 4 boxes)
function changeSettingMode(event,setting) {
switch(setting) {
case 1:
var speedUnitsMode = document.getElementsByName('speedUnitsMode');
// Loop in the list to find the radio button selected
for(var i = 0; i < speedUnitsMode.length; i++){
if(speedUnitsMode[i].checked)
break;
}
sessionStorage.setItem('speedUnitsModeSetting',i);
break;
break;
case 2:
var depthUnitsMode = document.getElementsByName('depthUnitsMode');
// Loop in the list to find the radio button selected
for(var i = 0; i < depthUnitsMode.length; i++){
if(depthUnitsMode[i].checked)
break;
}
sessionStorage.setItem('depthUnitsModeSetting',i);
break;
break;
case 3:
var displayMode = document.getElementsByName('displayMode');
// Loop in the list to find the radio button selected
for(var i = 0; i < displayMode.length; i++){
if(displayMode[i].checked)
break;
}
sessionStorage.setItem('displayModeSetting',i);
break;
case 4:
var nightViewMode = document.getElementById('nightView');
if(!nightViewMode.checked) {
document.body.classList.remove("bodyNightView");
sessionStorage.setItem('nightViewMode',0);
}
else {
document.body.classList.add("bodyNightView");
sessionStorage.setItem('nightViewMode',1);
}
break;
}
}
</Script>
</HEAD>

<BODY>
<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=100% VAlign="Top" Style="Border:1px solid;">
<P Style="Margin:0; Padding-Left:20px; Font-Size:300%;"><B>Units</B></P>
<P Style="Margin:0; Padding-Left:20px; Font-Size:200%;"><B>Wind Speed</B></P>
<Div Style="Padding-Left:20px; Font-Size:200%;">
<Input type="radio" name="speedUnitsMode" id="knots" Style="Width:20px; Height:20px;"
onClick="changeSettingMode(event,1)" checked>
<label for="knots"><B>Knots</B></Div>
<Div Style="Padding-Left:20px; Margin-Top:5px; Font-Size:200%;">
<Input type="radio" name="speedUnitsMode" id="mS" Style="Width:20px; Height:20px;"
onClick="changeSettingMode(event,1)">
<label for="mS"><B>m/s</B></Div>

<P Style="Margin:0; Padding-Top:15px; Padding-Left:20px; Font-Size:200%;"><B>Depth</B></P>
<Div Style="Padding-Left:20px; Font-Size:200%;">
<Input type="radio" name="depthUnitsMode" id="meters" Style="Width:20px; Height:20px;"
onClick="changeSettingMode(event,2)" checked>
<label for="knots"><B>Meters</B></Div>
<Div Style="Padding-Left:20px; Margin-Top:5px; Font-Size:200%;">
<Input type="radio" name="depthUnitsMode" id="feet" Style="Width:20px; Height:20px;"
onClick="changeSettingMode(event,2)">
<label for="mS"><B>Feet</B></Div>

<P Style="Margin:0; Padding-Top:20px; Padding-Left:20px; Font-Size:300%;"><B>Display</B></P>
<Div Style="Padding-Left:20px; Font-Size:200%;">
<Input type="radio" name="displayMode" id="oneLine" Style="Width:20px; Height:20px;"
onClick="changeSettingMode(event,3)" checked>
<label for="oneLine"><B>1 Line</B></Div>
<Div Style="Padding-Left:20px; Margin-Top:5px; Font-Size:200%;">
<Input type="radio" name="displayMode" id="twoLines" Style="Width:20px; Height:20px;"
onClick="changeSettingMode(event,3)">
<label for="twoLines"><B>2 Lines</B></Div>
<Div Style="Padding-Left:20px; Margin-Top:5px; Font-Size:200%;">
<Input type="radio" name="displayMode" id="fourBoxes" Style="Width:20px; Height:20px;"
onClick="changeSettingMode(event,3)">
<label for="fourBoxes"><B>4 Boxes</B></Div>
<P Style="Margin:0; Padding-Top:20px; Padding-Left:20px; Font-Size:300%;"><B>View</B></P>
<Div Style="Padding-Left:20px; Font-Size:200%;">
<Input type="checkbox" id="nightView" Style="Width:20px; Height:20px;"
onClick="changeSettingMode(event,4)">
<label for="oneLine"><B>Night View</B></Div>
</TD>
</TR>
<TR Id="row2" Height=7%>
<TD Width=100% Align="Center" VAlign="Center" Style="Border:1px solid; Border-Top-Style:Hidden;" ColSpan=2>
<Button id="back" Type="Button" Style="Width:20%; Color:White; Background-Color:Black; Border-Radius:4px;
Padding-top:3px; Padding-Bottom:3px;" onClick="window.location.href='index2.html'">
BACK</Button>
</TD>
</TR>
</Table>
<Script>
getSettings();
</Script>
</BODY>
</HTML>
Reply
#16
This is my code revising iKommunicate's kindle app, forgive the US unit defaults Smile

I THINK this is my latest version but not sure.

---------

<!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>

//BUG: WHEN DISPLAYING DEPTH BELOW KEEL IN FEET UNIT SHOWS METERS Also two line windspeed shows MS units
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=1,speedUnitsMode=0,depthUnitsMode=1;
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")
//ipServer="192.168.1.60:3000";
//if(ipServer.length==0||ipServer!="192.168.1.60:3000")
urlServer = "http://demo.signalk.org/signalk/v1/api/vessels/self/";
//
// 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/";

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: // Heading and Speed
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["navigation"][KEYS_4BOXES[1][positionPriority[1]]].value;
value2 *= 1.94384;
value2 = value2.toFixed(1);
displayValue(value1,value2,null,null,null);
break;
case 5: // Depth and Wind
jsonParsed = JSON.parse(xhttp.responseText.replace(/,"value":{}/g,""));
value1 = jsonParsed["environment"]["depth"][KEYS_4BOXES[0][positionPriority[0]]].value;
if(depthUnitsMode==1)
value1 *= 3.2808;
value1 = value1.toFixed(1);
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(value1,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: // Heading and Speed
switch(positionPriority[0]) {
case 0:
currentPath = "navigation/headingMagnetic";
break;
case 1:
currentPath = "navigation/headingTrue";
break;
case 2:
currentPath = "navigation/courseOverGround";
break;
}
switch(positionPriority[1]) {
case 0:
currentPath2 = "navigation/speedThroughWater";
break;
case 1:
currentPath2 = "navigation/speedOverGround";
break;
}
break;
case 5: // Depth and Wind
switch(positionPriority[2]) {
case 0:
currentPath = "environment/depth/belowKeel";
break;
case 1:
currentPath = "environment/depth/belowTransducer";
break;
case 2:
currentPath = "environment/depth/belowSurface";
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%; Display:Block; Line-Height:0.9;'><B>"+LABEL_VARIABLES[currentBoxes][positionPriority[currentBoxes]]+
"</B><BR><BR></Font>"+
"<span Style='Font-Size:1500%; Display:Block; Line-Height:0.9;'><B>"+value+"</span></B><BR><BR><BR>"+
"<Font Style='Font-Size:600%; Display:Block; Line-Height:0.9;'><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:
document.getElementById('display11').innerHTML =
"<Font Style='Font-Size:300%; Display:Block; Line-Height:0.9;'><B>"+LABEL_VARIABLES[2][positionPriority[2]]+"</B></Font><BR>"+
"<span Style='Font-Size:1900%; Display:Block; Line-Height:0.9;'><B>"+value+"</span></B><BR>"+
"<Font Style='Font-Size:300%;Display:Block; Line-Height:0.9;'><B>"+LABEL_UNITS[2][positionPriority[2]+offset]+"</B></Font>";
document.getElementById('display21').innerHTML =
"<Font Style='Font-Size:300%; Display:Block; Line-Height:0.9;'><B>"+LABEL_VARIABLES[1][positionPriority[1]]+"</B><BR></Font>"+
"<span Style='Font-Size:1900%; Display:Block; Line-Height:0.9;'><B>"+value2+"</span><BR>"+
"<Font Style='Font-Size:300%; Display:Block; Line-Height:0.9;'><B>"+LABEL_UNITS[1][positionPriority[1]]+"</B></Font>";
break;
case 5:
if(depthUnitsMode==1)
offset = 2;
document.getElementById('display11').innerHTML =
"<Font Style='Font-Size:300%; Display:Block; Line-Height:0.9;'><B>"+LABEL_VARIABLES[0][positionPriority[0]]+"</B></Font><BR>"+
"<span Style='Font-Size:1900%; Display:Block; Line-Height:0.9;'><B>"+value+"</span></B><BR>"+
"<Font Style='Font-Size:300%; Display:Block; Line-Height:0.9;'><B>"+LABEL_UNITS[0][positionPriority[0]+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>
Reply
#17
https://drive.google.com/drive/folders/1...sp=sharing
Reply
#18
Who had sailgauge doctored for Kindle? Will you share?
Reply
#19
i test sailgauge with black and white color but the center is not ver easy to change i think its possible i work to this i talk you if its ok
Reply
#20
Awesome guys.  Know that there are 7 of us interested now.  I've got an older Kindle and will try the code as soon as able.
Reply


Forum Jump:


Users browsing this thread: 2 Guest(s)