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
#21
Just confirming that a 3 year old Kindle updated to 5.9 firmware works with no mods. Not sure which version of signalk-server I have installed and using the sample nmea-0183 data, one and two line work but 4 box breaks but located error in javascript.
Reply
#22
Which model do you have? All the paperwhites work and the touch model before them. I have an old kindle it doesn’t work on.
Reply
#23
Kindle Paperwhite 3
Reply
#24
   
Hi guys
thanks to the advice of the forum I activated this display.
Wow the visibility is exceptional in full sun.
The kindle is a basic KT3 (serial G000KA) firmware 5.9.4 without modification.
It works very well.
I modified the code because I only have IMU and GPS without a depth gauge / wind station.
Reply
#25
Very cool. Similar to what I do in a stand-alone setup on a race boat I crew on. I want to get GPS Time on there too because our club races start promptly on the hour and it is much less troublesome than trying to synchronize a timer on a wristwatch.

I have a BME280 in there for no good reason, but why not, so I’d like to get that weather stuff in there too.
Reply
#26
(2019-05-01, 10:13 PM)ellgia Wrote: Hi guys
thanks to the advice of the forum I activated this display.
Wow the visibility is exceptional in full sun.
The kindle is a basic KT3 (serial G000KA) firmware 5.9.4 without modification.
It works very well.
I modified the code because I only have IMU and GPS without a depth gauge / wind station.

Great to see.  Willing to share your code or changes?
Reply
#27
With pleasure.

Main changes:
1. at row  145  added a small function to memorize the maximum speed as value
2. at row  154  added the reading of the COG as value4
3. at row  158  added the display of value and value4
4.  at row 418  modified to the display routine by adding the new values


index5.html

Code:
<!DOCTYPE HTML>
<HTML>
<HEAD>
  <Title>v 5</Title>
  <Script src="jquery.min.js"></Script>
  <Link rel="stylesheet" type="text/css" media="all" href="iKommunicate-Kindle.css">
  <Script>
    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=[["Speed SOG","Speed  STW"],
                     ["Speed STW","Speed  SOG"],
                     ["Heading (M)","Heading (T)","Heading COG"],
                     ["Wind (App)","Wind (True)"]
                    ]
    var LABEL_UNITS=[["m/s","m/s",],
                     ["Knots","Knots"],
                     ["Degrees","Degrees","Degrees"],
                     ["Knots","Knots",   "M/S","M/S"]
                    ]
    var KEYS_4BOXES=[["speedOverGround","speedThroughWater"],
                     ["speedThroughWater","speedOverGround"],
                     ["headingMagnetic","headingTrue","courseOverGroundTrue"],
                     ["angleApparent","angleTrue"],
                     ["speedApparent","speedTrue"]
                    ]
    var positionPriority=[-1,-1,-1,-1,-1];
    var ipServer;
    var flagStreamClosed=false;
    var displayMode=1,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 speed_old=0, speed_med=0;
    var i;
    // Start the request of data to the server
    function startRequestDataServer() {
      var urlServer;
      var jsonParsed;
      var value,value2,value3,value4,speed,maxspeed=0;

//  ------------   SERVER -----------------------------------
//      urlServer = "http://10.10.10.1:3000/signalk/v1/api/vessels/self/";
        urlServer = "http://demo.signalk.org/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:                                                        //  Speed  and Course
                    jsonParsed = JSON.parse(xhttp.responseText.replace(/,"value":{}/g,""));
                    speed_old = speed;
                    speed = jsonParsed["navigation"][KEYS_4BOXES[1][positionPriority[1]]].value;
                    speed *= 1.94384;
                    speed_med = (speed_old + speed)/2;
                    if(speed_med > maxspeed) 
                       maxspeed = speed_med;
                    value = maxspeed.toFixed(1);
                    value2 = speed.toFixed(1);
                    value3 = jsonParsed["navigation"][KEYS_4BOXES[2][positionPriority[2]]].value;
                    value3 *= 57.296;
                    value3 = Math.round(value3);
                    value3 = format3Digits(1,value3);
                    
                    value4 = jsonParsed["navigation"]["courseOverGroundTrue"].value;
                    value4 *= 57.296;
                    value4 = Math.round(value4);
                    value4 = format3Digits(1,value4);
                  displayValue(value3,value2,value,value4,null);
                  break;
                case 5:                                                        // Course (Heading) and Wind
                  jsonParsed = JSON.parse(xhttp.responseText.replace(/,"value":{}/g,""));
                  value = jsonParsed["navigation"][KEYS_4BOXES[2][positionPriority[2]]].value;
                  value *= 57.296;
                  value = Math.round(value);
                  value = format3Digits(1,value);
                  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["navigation"][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[1]) {
            case 0:
              currentPath = "navigation/speedOverGround";
              break;
            case 1:
              currentPath = "navigation/speedThroughWater";
              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.navigation.speedThroughWater!="undefined")            // Speed
        if(typeof answerHTTP.navigation.speedThroughWater.value!="undefined")
          positionPriority[0] = 0;
      if(positionPriority[0]==-1&&typeof answerHTTP.navigation.speedOverGround!="undefined")
        if(positionPriority[0]==-1&&typeof answerHTTP.navigation.speedOverGround.value!="undefined")
          positionPriority[0] = 1;
      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('display21').innerHTML =
                "<Font Style='Font-Size:300%;'><B>"+LABEL_VARIABLES[2][positionPriority[2]]+"&nbsp;&nbsp;&nbsp;"+LABEL_UNITS[2][positionPriority[2]+offset]+"</B></Font>"+
                "<span Style='Font-Size:100%;'><BR></span>"+
                "<span Style='Font-Size:1900%;'><B>"+value+"</span></B>"+
                "<Font Style='Font-Size:250%;'><B>"+" COG "+value4+"</B></Font>";
  
          document.getElementById('display11').innerHTML =
          
                "<Font Style='Font-Size:300%;'><B>"+LABEL_VARIABLES[1][positionPriority[1]]+"&nbsp;&nbsp;&nbsp;"+LABEL_UNITS[1][positionPriority[1]]+"</B></Font>"+
                 "<span Style='Font-Size:10%;'><BR></span>"+
                "<Font Style='Font-Size:1900%;'><B>"+value2+"</B></Font>"+
                "<Font Style='Font-Size:300%;'><B>"+" Max "+value3+"</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='Settings5.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>



Settings5.html
Code:
<!DOCTYPE HTML>
<HTML>
<HEAD>
<Title>Settings5</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)">
<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)" checked>
<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='index5.html'">
BACK</Button>
</TD>
</TR>
</Table>
<Script>
getSettings();
</Script>
</BODY>
</HTML>
Reply
#28
Hey, Saw this great thread. (Was at METS in Amsterdam and met the people of Yachtd.com. Take a look at them)
Back to this topic. Am new and newbie but I have Openplotter SignalK etc running on my raspi. I have it set up as AP. Can connect my Kindle Paperwhite 2 to there AP of the Raspi. Can open a Browser, but then I do not know how to proceed. What do I put in the URL. Or do I need to glue the code mentioned earlier on the kindle as well?
Pls help
Bart
Reply
#29
signalk is at http://your pi's ip address:3000/admin/#/dashboard
there you can setup other apps like node red, kip ect.
mare liberum
Reply
#30
(2019-11-22, 11:23 AM)jim321 Wrote: signalk is at http://your pi's ip address:3000/admin/#/dashboard
there you can setup other apps like  node red, kip ect.

Ok, will look into it.

Will report back

Wink

BArt
Reply


Forum Jump:


Users browsing this thread: 2 Guest(s)