Posts: 4
Threads: 0
Joined: Jan 2019
Reputation:
1
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.
Posts: 180
Threads: 39
Joined: Mar 2016
Reputation:
6
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.
Posts: 4
Threads: 0
Joined: Jan 2019
Reputation:
1
Posts: 5
Threads: 1
Joined: Apr 2017
Reputation:
0
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.
Posts: 180
Threads: 39
Joined: Mar 2016
Reputation:
6
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.
Posts: 4
Threads: 0
Joined: Jan 2019
Reputation:
1
(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?
Posts: 5
Threads: 1
Joined: Apr 2017
Reputation:
0
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&¤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: // 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&¤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('display21').innerHTML =
"<Font Style='Font-Size:300%;'><B>"+LABEL_VARIABLES[2][positionPriority[2]]+" "+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]]+" "+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'">
    </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>
Posts: 76
Threads: 14
Joined: Nov 2019
Reputation:
1
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
Posts: 800
Threads: 46
Joined: Jun 2017
Reputation:
25
2019-11-22, 11:23 AM
(This post was last modified: 2019-11-22, 11:29 AM by jim321.)
signalk is at http://your pi's ip address:3000/admin/#/dashboard
there you can setup other apps like node red, kip ect.
Posts: 76
Threads: 14
Joined: Nov 2019
Reputation:
1
(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
BArt
|
