This forum uses cookies

Saqqara · (This post was last modified: 2018-11-17, 12:18 AM by Saqqara.)

This is my code revising iKommunicate's kindle app, forgive the US unit defaults Smile

I THINK this is my latest version but not sure.

---------

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

<Script>

//BUG: WHEN DISPLAYING DEPTH BELOW KEEL IN FEET UNIT SHOWS METERS Also two line windspeed shows MS units
var fontSize;
$(document).ready(function(){
zoomX = 1;
zoomY = 1;
screenWidth = screen.width;
if(screenWidth>1280)
zoomX = screen.width / 1280;
screenHeight = screen.height;
if(screenHeight>768)
zoomY = screen.height / 768;

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

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

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

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

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

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

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

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

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

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

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

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

function displayValue(value,value2,value3,value4,value5) {
var offset=0;
switch(currentBoxes) {
case 0:
case 1:
case 2:
if(depthUnitsMode==1&&currentBoxes==0)
offset = 2;
document.getElementById('display11').innerHTML =
""+LABEL_VARIABLES[currentBoxes][positionPriority[currentBoxes]]+
" "+
""+value+" "+
""+LABEL_UNITS[currentBoxes][positionPriority[currentBoxes]+offset]+
"";
break;
case 3:
if(speedUnitsMode==1)
offset = 2;
document.getElementById('display11').innerHTML =
""+LABEL_VARIABLES[currentBoxes][positionPriority[currentBoxes]]+
" "+
""+value+" "+value2+
" "+
""+LABEL_UNITS[currentBoxes][positionPriority[currentBoxes]+offset]+
" ";
break;
case 4:
document.getElementById('display11').innerHTML =
""+LABEL_VARIABLES[2][positionPriority[2]]+" "+
""+value+" "+
""+LABEL_UNITS[2][positionPriority[2]+offset]+"";
document.getElementById('display21').innerHTML =
""+LABEL_VARIABLES[1][positionPriority[1]]+" "+
""+value2+" "+
""+LABEL_UNITS[1][positionPriority[1]]+"";
break;
case 5:
if(depthUnitsMode==1)
offset = 2;
document.getElementById('display11').innerHTML =
""+LABEL_VARIABLES[0][positionPriority[0]]+" "+
""+value+" "+
""+LABEL_UNITS[0][positionPriority[0]+offset]+"";

if(speedUnitsMode==1)
offset = 2;
document.getElementById('display21').innerHTML =
""+LABEL_VARIABLES[3][positionPriority[3]]+" "+
""+value2+" "+value3+
" "+
""+LABEL_UNITS[3][positionPriority[3]+offset]+"";
break;
case 6:
if(depthUnitsMode==1)
offset = 2;
document.getElementById('display11').innerHTML =
""+LABEL_VARIABLES[0][positionPriority[0]]+" "+
""+value+" "+
""+LABEL_UNITS[0][positionPriority[0]+offset]+"";
document.getElementById('display12').innerHTML =
""+LABEL_VARIABLES[1][positionPriority[1]]+" "+
""+value2+" "+
""+LABEL_UNITS[1][positionPriority[1]]+"";
document.getElementById('display21').innerHTML =
""+LABEL_VARIABLES[2][positionPriority[2]]+" "+
""+value3+" "+
""+LABEL_UNITS[2][positionPriority[2]+offset]+"";
offset = 0;
if(speedUnitsMode==1)
offset = 2;
document.getElementById('display22').innerHTML =
""+LABEL_VARIABLES[3][positionPriority[3]]+" "+
""+value4+" "+value5+
" "+
""+LABEL_UNITS[3][positionPriority[3]+offset]+"";
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>
URL or IP Address:
<Input Type="Text" id="ipServerInput" Size="15%"
PlaceHolder="demo.signalk.org" Style="Padding-top:3px; Padding-Bottom:3px; Display:None;"
onKeyPress="saveNewIP(event)">
<Button id="buttonOpenCloseStream" Type="Button" Style="Color:White; Background-Color:Black; Border-Radius:4px;
Padding-top:3px; Padding-Bottom:3px; Display:None;" onClick="openCloseStream()">Close Stream</Button>
<Button id="buttonSettings" Type="Button" Style="Border-Style:none; Background-Color:Transparent;
background-image: url('OptionsImage.png');
background-repeat: no-repeat; background-size:contain; Border-Radius:4px;
Padding-top:3px; Padding-Bottom:3px;" onclick="window.location.href='Settings.html'">
&nbsp&nbsp&nbsp&nbsp</Button>
</div>
</Form>
</TD>
</TR>
</Table>
<Script>
ipServer = window.location.host;
if(ipServer.length==0||ipServer=="192.168.1.64"||ipServer=="192.168.30.221"||ipServer=="192.168.30.219")
document.getElementById("buttonSettings").style.opacity = 0.5;
else
document.getElementById("buttonSettings").style.opacity = 1;
console.log(ipServer);
getSettings();
startRequestDataServer();
//console.log(JSON.stringify(jsonParsed));
//console.log(positionPriority[0]+" "+positionPriority[1]+" "+positionPriority[2]+" "+positionPriority[3]);
</Script>
</BODY>
</HTML>

Login
Username/Email:
Password:	Lost Password?
	Remember me