Kindle Paperwhite as KIP Cockpit Display - Printable Version +- OpenMarine (https://forum.openmarine.net) +-- Forum: OpenPlotter (https://forum.openmarine.net/forumdisplay.php?fid=1) +--- Forum: General discussion (https://forum.openmarine.net/forumdisplay.php?fid=2) +--- Thread: Kindle Paperwhite as KIP Cockpit Display (/showthread.php?tid=1558) |
Kindle Paperwhite as KIP Cockpit Display - Saqqara - 2018-11-12 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. RE: Kindle Paperwhite as KIP Cockpit Display - chech - 2018-11-12 yes very good have you the code modified i want to make the same thing thinkyou RE: Kindle Paperwhite as KIP Cockpit Display - chech - 2018-11-12 ok for kobo just change localstorage to sessionstorage in the code and the setting RE: Kindle Paperwhite as KIP Cockpit Display - RedRyder - 2018-11-16 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? RE: Kindle Paperwhite as KIP Cockpit Display - chech - 2018-11-16 (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&¤tBoxes==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&¤tBoxes==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'">     </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> RE: Kindle Paperwhite as KIP Cockpit Display - Saqqara - 2018-11-17 This is my code revising iKommunicate's kindle app, forgive the US unit defaults 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&¤tBoxes==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&¤tBoxes==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'">     </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> RE: Kindle Paperwhite as KIP Cockpit Display - chech - 2018-11-17 https://drive.google.com/drive/folders/1vON2bW4nsG_9cpSWuIgC3BSWy88XbEp4?usp=sharing Kindle Paperwhite as KIP Cockpit Display - Saqqara - 2018-11-17 Who had sailgauge doctored for Kindle? Will you share? RE: Kindle Paperwhite as KIP Cockpit Display - chech - 2018-11-17 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 RE: Kindle Paperwhite as KIP Cockpit Display - russellkt - 2019-01-11 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. |