TITLEBAR "Avionics"

html "<style type='text/css'>
<!--
body {background-color:black}
-->
</style>"

' ---------------------------------------
' Backend communications
' ---------------------------------------
html "<script language='javascript'>
<!--

function createRequestObject() 
  {
  var ro;
  var browser = navigator.appName;
  if(browser == 'Microsoft Internet Explorer')
    {
    ro = new ActiveXObject('Microsoft.XMLHTTP');
    }
  else
    {
    ro = new XMLHttpRequest();
    }
  return ro;
  }

var http = createRequestObject();

function trim(string)
  {
  while (string.substring(0,1) == ' ')
    {
    string = string.substring(1, string.length);
    }
  while (string.substring(string.length-1, string.length) == ' ')
    {
    string = string.substring(0,string.length-1);
    }
  return string;
  }

function handleResponse()
  {
  if(http.readyState == 4)
    {
    var response = http.responseText;
    
//alert ('got back from server response:' + response);
    var at = 0;
    
    // --- strip leading junk ----
    x   = response.substring(0,1);
    while (x < '0')
      {  
      response = response.substring(1);
      x   = response.substring(0,1);
      }
    var update = new Array();
    if(response.indexOf('|' != -1)) 
      {
      update = response.split('|');
      x = update.length;
      //  alert ('update length:' + x);
      for (i=0;i<x;i++)
        {
        update[i] = update[i].replace(/;;/g ,'|');
        }
      for (i=1;i<x;i=i+2)
        {
        at = i - 1;
        update[at] = trim(update[at]);
        //  alert ('at:' + at + '|update[at]:' + update[at] + '|i:' + i + '|update[i]:' + update[i]);
        
        try
          {
          ss = document.getElementById(update[at]);
          ssv = ss.value;
          sse = ss.element;
          sst = ss.title;
          ssn = ss.name;
          ssi = ss.id;
          ssh = ss.innerHTML;
          //  alert ('ss:' + ss + '|ssv:' + ssv  + '|sse:' + sse  + '|ssn:' + ssn  + '|ssi:' + ssi  + '|ssh:' + ssh + '|at:' + update[at] + '|i:' + update[i] );
          
          if (ssv != undefined)  ss.value = update[i];
          else 
          if (ssh != undefined)  ss.innerHTML = update[i];
          }
        catch(err)
          {
          alert ('Invalid display field:' + update[at]);
          }
        }
      }
    }
  }

function trim(stringToTrim)
  {
  return stringToTrim.replace(/^\s+|\s+$/g,"""");
  }
function ltrim(stringToTrim) 
  {
  return stringToTrim.replace(/^\s+/,"""");
  }
function rtrim(stringToTrim) 
  {
  return stringToTrim.replace(/\s+$/,"""");
  }
function server(prog)
  {
  prog = ltrim(prog);      // Left trim 
  rs = http.readyState;    // see if the previous task it done - state must be 0
  if (rs == 4) rs = 0;
  if (rs != 0)
    {
    rs = 0;                // ?????? why don't this work ??????/
    try
      {
      rs = http.readyState;    // see if the previous task is done - state must be 0
      }
    catch(err)
      {
      rs = 1;  
      alert ('Server Busy. Please try again. Thank you and have a nice day ' + rs);
      }
    }
  
  if (rs == 0)  
    {
    prog1 = '';
    xx  = '';
    if(prog.indexOf('|' != -1)) 
      {
      val = prog.split('|');
      for ( key in val) 
        {
        //  alert('key:' + key + ' |val:' + val[key]);
        x = '';
        xx = val[key];
        if (key & 1)
          {
          try
            {
            x   = document.getElementById(xx).value;
            toe = document.getElementById(xx).type;   // type of element
            chk = document.getElementById(xx).checked;
            prog1 = prog1 + x;
            }
          catch(err)
            {
            //  alert ('--error----xx:' + xx + '|err:' + err.description);
            prog1 = prog1 + err.description;      
            }
          //  alert ('------x:' + x + '| toe:' + toe + '| chk:' + chk);
          }
        else prog1 = prog1 + xx;
        }
      }
    
   // alert ('server side get program| prog1:' + prog1);
    
    http.open('get', prog1);
    http.onreadystatechange = handleResponse;
    http.send(null);
    }
  }
//--></script>
"

' ---------------------------------------
' Timer routine
' ---------------------------------------
 html " <script type='text/javascript'>
 <!--
 var IntervalId = 0;
 
 function ClickHandler ( )
 {
 if ( document.getElementById('btn').value == 'Start' )
 	{
 	// Start the timer
 	document.getElementById('btn').value = 'Stop';
 	IntervalId = setInterval ( 'timer()', 3000 );
 	}
 else
 	{
 	document.getElementById('time').innerHTML = '';
 	document.getElementById('btn').value = 'Start';
 	clearInterval ( IntervalId );
 	}
 }
 
 function timer( )
 {
	server('/seaside/go/runbasicpersonal?app=avionicsBe&time&|ts|&|pass|')
 }
 
 //--></script>
 "
 
bf$		= "<B><FONT SIZE=2 FACE=Arial COLOR=white>"  ' Bold font
bfr$		= "<B><FONT SIZE=2 COLOR=red FACE=Arial>"
bf2$		= "<B><FONT SIZE=2 color=white FACE=Arial>"
yourDir$	= "../avionics_project/"   ' need your directory

html "<TABLE BORDER=1 CELLPADDING=0 CELLSPACING=0 WIDTH=100% height=300>"
html "<TR><TD ROWSPAN=2 width=300>"
html "<TABLE BORDER=1 CELLPADDING=0 CELLSPACING=0 WIDTH=300 height=300>"

sqliteconnect	#sql, "avionics.db"            ' Connect to the DB

sql$ = "SELECT 
pin,	loc,	name,	
yellowLo,	amberLo,	redLo,	yellowVoiceLo,	amberVoiceLo,	redVoiceLo,	
yellowHi,	amberHi,	redHi,	yellowVoiceHi,	amberVoiceHi,	redVoiceHi,	
pcnt,	show
FROM gauge ORDER BY loc"
	#sql execute(sql$)
 WHILE	#sql hasanswer()
	 result$	= 	#sql nextrow$(" |")
	 pin		=   val(word$(result$,1,"|"))
	 loc		=   val(word$(result$,2,"|"))
	 name$		= trim$(word$(result$,3,"|"))

	 yellowLo	=   val(word$(result$,4,"|"))
	 amberLo	=   val(word$(result$,5,"|"))
	 redLo		=   val(word$(result$,6,"|"))
	 yellowVoiceLo$	= trim$(word$(result$,7,"|"))
	 amberVoiceLo$	= trim$(word$(result$,8,"|"))
	 redVoiceLo$	= trim$(word$(result$,9,"|"))

	 yellowHi	=   val(word$(result$,10,"|"))
	 amberHi	=   val(word$(result$,11,"|"))
	 redHi		=   val(word$(result$,12,"|"))
	 yellowVoiceHi$	= trim$(word$(result$,13,"|"))
	 amberVoiceHi$	= trim$(word$(result$,14,"|"))
	 redVoiceHi$	= trim$(word$(result$,15,"|"))

	 pcnt$		= trim$(word$(result$,16,"|"))
	 show$		= trim$(word$(result$,17,"|"))

' instrument value
if loc and 1 then 
	html "<TR>"
	else
	html "<TR bgcolor=#404040>"
end if
html "<TD align=center width=40 id=iv";pin;" style='font-family: arial; color:white; font-weight: bold; font-size: 15px;'>";loc;"</TD>"
html "<TD>";bf$;name$;"</TD>"		' Instrument Name
html "<TD WIDTH=130 id=ig";pin;"></TD></TR>"		' Instrument Graph

calc$	= ""
for i	= 1 to 31
pct$	= trim$(word$(pcnt$,i,":"))
if pct$ = ":" or pct$ = "" then exit for
sho$	= word$(show$,i,":")
calc$	= calc$ + pct$ + ":" + sho$ + ":"
next i
i = i - 1
pass$ = pass$ ; pin;",";yellowLo;",";amberLo;",";redLo;",";yellowHi;",";amberHi;",";redHi;",";i;",";calc$;",";"]"

WEND
html "</TABLE></TD><TD width=150 align=center valign=top>"
'
' Tilt Display
'
html "<TABLE BORDER=1 CELLPADDING=0 CELLSPACING=0 height=150 WIDTH=150><TR VALIGN=TOP><TD id=tilt align=center>"
html "</TD></TR></TABLE>"

for i = 0 to 60
ii$ = using("##",i)
 html "<script> document.getElementById('tilt').innerHTML = ""<img src='";yourDir$;"tilt";ii$;".png' width=150 height=150>"";</script>"
next i

'
' Pass Parameters (hidden)
'
html "<INPUT TYPE=HIDDEN id=pass value='";pass$;"'>"	' pass data to backend
' ----------------------------------------------
' Compass Display
' ----------------------------------------------
heading = 0			' make heading 0 degrees North

html "<TABLE BORDER=1 CELLPADDING=0 CELLSPACING=0 height=20 width=100%><TR>"
html "<TD id='hdng' align=center style='font-family: arial; font-size: 1.5em; color:#CCFFFF;'>"
html "0 degrees North"
html "</TD></TR></table>"

html "<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 bgcolor=#404040>"
html "<TR id=cmps align=center style='font-family:arial; font-size:12px; color:#CCFFFF;'>"
ii = heading + 18
for i = ii to ii + 36
deg = i
	if deg > 35 then deg = deg - 36
	if deg > 35 then deg = deg - 36
d$ = ""
if deg =  0 then d$ = "N"
if deg =  9 then d$ = "E"
if deg = 18 then d$ = "S"
if deg = 27 then d$ = "W"
html "<TD>";d$;"</TD>"
next i
html "</TR><TR id=dgrs align=center style='font-family:arial; font-size:12px; color:#CCFFFF;'>"
for i = ii to ii + 36
 if int(i / 3) * 3 = i then
	deg = i
	if deg > 35 then deg = deg - 36
	if deg > 35 then deg = deg - 36
	html "<TD>";deg;"</TD>"
else
	html "<TD>|</TD>"
	end if
next i
html "</tr></table>"
' --------------- end compass

html "</TD><TD VALIGN=TOP>"
'
' Time Display
'
html "<TABLE BORDER=1 CELLPADDING=0 CELLSPACING=0 WIDTH=100%><TR>"
html "<TD id='time' align=center style='height: 1.5em; font-family: arial; font-size: 2em; color: red;'>"
html "</TD></TR></TABLE>"
'
' Time stamp milliseconds
'
html "<TABLE BORDER=1 CELLPADDING=0 CELLSPACING=0 WIDTH=100%>"
html "<TR><TD align=center>"
html "<INPUT TYPE='TEXT' id='ts' SIZE=20 onChange=""server('/seaside/go/runbasicpersonal?app=avionicsBe&data&|ts|&|pass|');"">"
html "</TD></TR></TABLE>"
'
' Buttons
'
html "<TABLE BORDER=1 CELLPADDING=0 CELLSPACING=0 WIDTH=100%>"
html "<TR bgcolor=#404040><TD align=center>"
html "<input type='button' name='btn' id='btn' value='Start' onclick='ClickHandler()'/>"
html "</TD><TD align=center>"
html "<INPUT TYPE=BUTTON id='tst' Value='Test' onCLick=""server('/seaside/go/runbasicpersonal?app=avionicsBe&test&|ts|&|pass|');"">"
html "</TD><TD align=center>"
html "<INPUT TYPE=BUTTON id='chk' Value='Check' onCLick=""server('/seaside/go/runbasicpersonal?app=avionicsBe&chek&|ts|&|pass|');"">"
html "</TD><TD></TR></TABLE>"
'
' info
'
html "<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 WIDTH=100%>"
html "<TR><TD id=info></TD></TR>"
for i = 1 to 16
 html "<TR><TD style='font-family:arial; font-size:12px; color:white;' id=info";i;"></TD></TR>"
next i

html "</TABLE></TD></TR></TABLE>"

function repeat$(str$,num)
for i = 1 to num
repeat$ = repeat$ + str$
next i
end function
end