API tools faq
paste
Advertisement
Guest User

Telemachus Primary Flight Display

a guest
May 10th, 2015
768
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 135.87 KB | None | 0 0
raw download clone embed print report
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <script src="http://code.jquery.com/jquery-latest.js"></script>
  5.  
  6. <meta charset="utf-8">
  7. <meta name="mobile-web-app-capable" content="yes">
  8. <style>
  9.     body{ background-color: rgb(0, 0, 0); }
  10. </style>
  11. </head>
  12.  
  13. <body>
  14. <canvas id="base" style="position: absolute; left: 0; top: 0; z-index: 1;"></canvas>
  15. <canvas id="altb" style="position: absolute; left: 0; top: 0; z-index: 10;"></canvas>
  16. <canvas id="spdb" style="position: absolute; left: 0; top: 0; z-index: 11;"></canvas>
  17. <canvas id="hdgb" style="position: absolute; left: 0; top: 0; z-index: 12;"></canvas>
  18. <canvas id="hor" style="position: absolute; left: 0; top: 0; z-index: 20;"></canvas>
  19. <canvas id="btn" style="position: absolute; left: 0; top: 0; z-index: 30;"></canvas>
  20.  
  21.  
  22. <script>
  23.     var canvas=document.getElementById("base");
  24.     var ctx=canvas.getContext("2d");
  25.     ctx.canvas.width  = window.innerWidth;
  26.     ctx.canvas.height = window.innerHeight;
  27.  
  28.     //----an insane number of variables.... I'm sorry----
  29.     var WWidth = window.innerWidth;
  30.     var WHeight = window.innerHeight;
  31.     var Scale = 0;
  32.  
  33.     var con = "false";
  34.     var IP = "127.0.0.1:8085";
  35.     var ip = 0;
  36.     var Alt = 0;
  37.     var AAlt = 0;
  38.     var GrDist = 0;
  39.     var AGrDist = 0;
  40.     var AP = 0;
  41.     var AAP = 0;
  42.     var PE = 0;
  43.     var APE = 0;
  44.     var Spd = 0;
  45.     var ASpd = 0;
  46.     var SpdHor = 0;
  47.     var ASpdHor = 0;
  48.     var SpdVert = 0;
  49.     var ASpdVert = 0;
  50.     var Sx = 0;
  51.     var Sx_m = 0;
  52.     var Sy = 0;
  53.     var Sz = 0;
  54.     var Body ="";
  55.     var Tar = "";
  56.  
  57.     var Roll = 0;
  58.     var Pitch = 0;
  59.     var Yaw = 0;
  60.     var AYaw = 0;
  61.     var PPitch = 0;
  62.     var PYaw = 0;
  63.     var PRoll = 0;
  64.     var TPitch = 0;
  65.     var TYaw = 0;
  66.     var TRoll = 0;
  67.     var TDist = 0;
  68.     var Inc = 0;
  69.     var Ecc = 0;
  70.     var Per = 0
  71.     var TrA = 0;
  72.     var TTA = 0;
  73.     var TTP = 0;
  74.     var Long = 0;
  75.     var Lat = 0;
  76.     var LongAlt = 0;
  77.     var LatAlt = 0;
  78.     var MET = 0;
  79.  
  80.     var mode = 2;
  81.     var mj = 0;
  82.     var atmo = 1;
  83.     var light = "";
  84.     var sas = "";
  85.     var gear ="";
  86.     var rcs = "";
  87.     var ass = "";
  88.     var brake = "";
  89.     var gee = 0;
  90.     var thrust = 0;
  91.     var lf_s = 0;
  92.     var lf_s_max = 0;
  93.     var sf_s = 0;
  94.     var sf_s_max = 0;
  95.     var ox_s = 0;
  96.     var ox_s_max = 0;
  97.     var mono = 0;
  98.     var mono_max = 0;
  99.     var charge = 0;
  100.     var charge_max = 0;
  101.     var intake = 0;
  102.     var intake_max = 0;
  103.     var xenon = 0;
  104.     var xenon_max = 0;
  105.     var lf_s_r = 0;
  106.     var sf_s_r = 0;
  107.     var ox_s_r = 0;
  108.     var mono_r = 0;
  109.     var charge_r = 0;
  110.     var xenon_r = 0;
  111.     var delt = 1;
  112.     var rst = true;
  113.     var btn = false;
  114.     var load = true;
  115.     var disp = 1;
  116.     var ag = 0;
  117.     var ab = false;
  118.  
  119.  
  120.     WWidth = window.innerWidth;
  121.     WHeight = window.innerHeight;
  122.  
  123.     if(WWidth/1920<WHeight/1080){
  124.         Scale = WWidth/1920;
  125.     }else{
  126.         Scale = WHeight/1080;
  127.     }
  128.  
  129.     var CenterX = 700 * Scale;
  130.     var CenterY = 540 * Scale;
  131.     var Width = 116*Scale;
  132.     var Height = 50*Scale;
  133.     var lblue = "rgba(199,237,240,1)";
  134.     var blue = "rgba(74,166,182,1)";
  135.     var lred = "rgba(212,95,87,1)";
  136.     var red = "rgba(148, 38,44,1)";
  137.     var bg = "rgba(26,26,26,1)";
  138.     var white = "rgba(255,255,255,1)";
  139.     var setbg = "rgba(26,26,26,1)";
  140.     var blblue = "rgba(199,237,240,1)";
  141.     var bblue = "rgba(74,166,182,1)";
  142.     var blred = "rgba(212,95,87,1)";
  143.     var bred = "rgba(148, 38,44,1)";
  144.     var bbg = "rgba(0,0,0,1)";
  145.     var bsetbg = "rgba(26,26,26,1)";
  146.     var bwhite = "rgba(255,255,255,1)";
  147.     var res;
  148.     var pg = 0;
  149.     var rate = 200;
  150.     var set = false;
  151.  
  152.  
  153.  
  154.     function load_Data(){                       //load settings from localStorage, or use default values when no stored data
  155.         var temp = "";
  156.  
  157.         if (localStorage.getItem('Rate')) {
  158.             rate = localStorage.getItem('Rate');
  159.         }else{
  160.             rate = 100;
  161.         }
  162.         if (localStorage.getItem('IP')) {
  163.             IP = localStorage.getItem('IP');
  164.         }else{
  165.             IP = "127.0.0.1:8085";
  166.         }
  167.         if (localStorage.getItem('C1')) {
  168.             temp = localStorage.getItem('C1');
  169.             blue = "rgba("+temp+",1)";
  170.         }else{
  171.             blue = bblue;
  172.         }
  173.         if (localStorage.getItem('C2')) {
  174.             temp = localStorage.getItem('C2');
  175.             red = "rgba("+temp+",1)";
  176.         }else{
  177.             red = bred;
  178.         }
  179.         if (localStorage.getItem('H1')) {
  180.             temp = localStorage.getItem('H1');
  181.             lblue = "rgba("+temp+",1)";
  182.  
  183.         }else{
  184.             lblue = blblue;
  185.         }
  186.         if (localStorage.getItem('H2')) {
  187.             temp = localStorage.getItem('H2');
  188.             lred = "rgba("+temp+",1)";
  189.  
  190.  
  191.         }else{
  192.             lred = blred;
  193.  
  194.         }
  195.         if (localStorage.getItem('BG')) {
  196.             temp = localStorage.getItem('BG');
  197.             bg = "rgba("+temp+",1)";
  198.         }else{
  199.             bg = bbg;
  200.         }
  201.         if (localStorage.getItem('MK')) {
  202.             temp = localStorage.getItem('MK');
  203.             white = "rgba("+temp+",1)";
  204.         }else{
  205.             white = bwhite;
  206.         }
  207.     }
  208.  
  209.     load_Data();
  210.  
  211.     //----connect to webSocket----
  212.     var connection = new WebSocket('ws://'+IP+'/datalink');
  213.  
  214.     connection.onopen = function () {           //connection established
  215.         console.log('Connected');
  216.         connection.send('{"+":["tar.name","tar.distance","v.missionTime","v.body","o.timeToAp","o.timeToPe","o.trueAnomaly","o.ApA","o.PeA","o.inclination","o.eccentricity","o.period","f.throttle","v.altitude","v.heightFromTerrain","n.pitch","n.roll","n.heading","v.verticalSpeed","v.surfaceVelocity","v.surfaceVelocityx","v.surfaceVelocityy","v.surfaceVelocityy","v.orbitalVelocity","v.geeForce","v.long","v.lat","v.atmosphericDensity","v.rcsValue","v.sasValue","v.lightValue","v.brakeValue","v.gearValue","r.resource[LiquidFuel]","r.resource[Oxidizer]","r.resourceMax[LiquidFuel]","r.resourceMax[Oxidizer]","r.resource[ElectricCharge]","r.resourceMax[ElectricCharge]","r.resource[MonoPropellant]","r.resourceMax[MonoPropellant]","r.resource[SolidFuel]","r.resourceMax[SolidFuel]","r.resource[IntakeAir]","r.resource[XenonGas]","r.resourceMax[IntakeAir]","r.resourceMax[XenonGas]","r.resourceCurrent[LiquidFuel]","r.resourceCurrent[Oxidizer]","r.resourceCurrent[ElectricCharge]","r.resourceCurrent[MonoPropellant]","r.resourceCurrent[Solid]","r.resourceCurrent[IntakeAir]","r.resourceCurrent[XenonGas]","rate":'+rate+'}');
  217.         con = "true";
  218.     };
  219.  
  220.     connection.onmessage = function (evt) {     //when data is received
  221.         var obj = JSON.parse(evt.data);
  222.  
  223.         //----store old data to analyse difference----
  224.         LongAlt = Long;
  225.         LatAlt = Lat;
  226.         AAlt = Alt;
  227.         AGrDist = GrDist;
  228.         ASpd = Spd;
  229.         ASpdHor = SpdHor;
  230.         ASpdVert = SpdVert;
  231.         AYaw = Yaw;
  232.         AAP = AP;
  233.         APE = PE;
  234.         lf_s_r = lf_s;
  235.         ox_s_r = ox_s;
  236.         mono_r = mono;
  237.         charge_r = charge;
  238.         xenon_r = xenon;
  239.         sf_s_r = sf_s;
  240.  
  241.         //----read new data----
  242.         Alt = document.getElementById("base").innerHTML=obj["v.altitude"];
  243.         GrDist = document.getElementById("base").innerHTML=obj["v.heightFromTerrain"];
  244.         AP = document.getElementById("base").innerHTML=obj["o.ApA"];
  245.         PE = document.getElementById("base").innerHTML=obj["o.PeA"];
  246.         Roll = document.getElementById("base").innerHTML=obj["n.roll"];
  247.         Pitch = document.getElementById("base").innerHTML=obj["n.pitch"];
  248.         Yaw = document.getElementById("base").innerHTML=obj["n.heading"];
  249.         Inc = document.getElementById("base").innerHTML=obj["o.inclination"];
  250.         Ecc = document.getElementById("base").innerHTML=obj["o.eccentricity"];
  251.         Per = document.getElementById("base").innerHTML=obj["o.period"];
  252.         TTA = document.getElementById("base").innerHTML=obj["o.timeToAp"];
  253.         TTP = document.getElementById("base").innerHTML=obj["o.timeToPe"];
  254.         TrA = document.getElementById("base").innerHTML=obj["o.trueAnomaly"];
  255.         Long = document.getElementById("base").innerHTML=obj["v.long"];
  256.         Lat = document.getElementById("base").innerHTML=obj["v.lat"];
  257.         Spd = document.getElementById("base").innerHTML=obj["v.orbitalVelocity"];
  258.         SpdHor = document.getElementById("base").innerHTML=obj["v.surfaceVelocity"];
  259.         SpdVert = document.getElementById("base").innerHTML=obj["v.verticalSpeed"];
  260.         Sx_m = document.getElementById("base").innerHTML=obj["v.surfaceVelocityx"];
  261.         Sy = document.getElementById("base").innerHTML=obj["v.surfaceVelocityy"];
  262.         gee = document.getElementById("base").innerHTML=obj["v.geeForce"];
  263.         atmo = document.getElementById("base").innerHTML=obj["v.atmosphericDensity"];
  264.         rcs = document.getElementById("base").innerHTML=obj["v.rcsValue"];
  265.         sas = document.getElementById("base").innerHTML=obj["v.sasValue"];
  266.         light = document.getElementById("base").innerHTML=obj["v.lightValue"];
  267.         gear = document.getElementById("base").innerHTML=obj["v.gearValue"];
  268.         brake = document.getElementById("base").innerHTML=obj["v.brakeValue"];
  269.         pg = document.getElementById("base").innerHTML=obj["v.angleToPrograde"];
  270.         lf_s = document.getElementById("base").innerHTML=obj["r.resource[LiquidFuel]"];
  271.         lf_s_max = document.getElementById("base").innerHTML=obj["r.resourceMax[LiquidFuel]"];
  272.         sf_s = document.getElementById("base").innerHTML=obj["r.resource[SolidFuel]"];
  273.         sf_s_max = document.getElementById("base").innerHTML=obj["r.resourceMax[SolidFuel]"];
  274.         ox_s = document.getElementById("base").innerHTML=obj["r.resource[Oxidizer]"];
  275.         ox_s_max = document.getElementById("base").innerHTML=obj["r.resourceMax[Oxidizer]"];
  276.         mono = document.getElementById("base").innerHTML=obj["r.resource[MonoPropellant]"];
  277.         mono_max = document.getElementById("base").innerHTML=obj["r.resourceMax[MonoPropellant]"];
  278.         charge = document.getElementById("base").innerHTML=obj["r.resource[ElectricCharge]"];
  279.         charge_max = document.getElementById("base").innerHTML=obj["r.resourceMax[ElectricCharge]"];
  280.         intake = document.getElementById("base").innerHTML=obj["r.resource[IntakeAir]"];
  281.         intake_max = document.getElementById("base").innerHTML=obj["r.resource[IntakeAir]"];
  282.         xenon = document.getElementById("base").innerHTML=obj["r.resourceMax[IntakeAir]"];
  283.         xenon_max = document.getElementById("base").innerHTML=obj["r.resourceMax[XenonGas]"];
  284.         //lf_s_r = document.getElementById("base").innerHTML=obj["r.resourceCurrent[LiquidFuel]"];
  285.         //sf_s_r = document.getElementById("base").innerHTML=obj["r.resourceCurrent[Solid]"];
  286.         //ox_s_r = document.getElementById("base").innerHTML=obj["r.resourceCurrent[Oxidizer]"];
  287.         //mono_r = document.getElementById("base").innerHTML=obj["r.resourceCurrent[MonoPropellant]"];
  288.         //charge_r = document.getElementById("base").innerHTML=obj["r.resourceCurrent[ElectricCharge]"];
  289.         //xenon_r = document.getElementById("base").innerHTML=obj["r.resourceCurrent[XenonGas]"];
  290.         thrust = document.getElementById("base").innerHTML=obj["f.throttle"];
  291.         Body = document.getElementById("base").innerHTML=obj["v.body"];
  292.         Tar = document.getElementById("base").innerHTML=obj["tar.name"];
  293.         TDist = document.getElementById("base").innerHTML=obj["tar.distance"];
  294.         if(Body == ""){
  295.             Body = "NO INF";
  296.         }
  297.  
  298.         //----make window resizeable----
  299.         WWidth = window.innerWidth;
  300.         WHeight = window.innerHeight;
  301.         if(WWidth/1920<WHeight/1080){
  302.             Scale = WWidth/1920;
  303.         }else{
  304.             Scale = WHeight/1080;
  305.         }
  306.         CenterX = 700*Scale;
  307.         CenterY = 540*Scale;
  308.         Width = 116*Scale;
  309.         Height = 50*Scale;
  310.         ctx.canvas.width  = window.innerWidth;
  311.         ctx.canvas.height = window.innerHeight;
  312.         PPitch = (180/Math.PI)*Math.atan(SpdVert/SpdHor);
  313.  
  314.         //PYaw = (-180/Math.PI)*Math.atan(Sx/Sy);
  315.         //if(Sx<0 && Sy<0){
  316.         //  PYaw+=180;
  317.         //}
  318.         //if(Sx>=0 && Sy<0){
  319.         //  PYaw+=180;
  320.         //}
  321.         //if(Sx>=0 && Sy>=0){
  322.         //  PYaw+=360;
  323.         //}
  324.         //if(Sx < 0 && Sy>=0){
  325.         //}
  326.         //if(Sx==0 && Sy==0){
  327.         //  PYaw = Yaw;
  328.         //}
  329.  
  330.         //----calculate prograde angles----
  331.         PYaw = (180/Math.PI)*Math.atan((Long-LongAlt)/((Lat-LatAlt)*(1/Math.cos(Lat*Math.PI/180))));
  332.         if(Lat-LatAlt==0){
  333.             if(Long-LongAlt>0){
  334.                 PYaw = 90;
  335.             }else{
  336.                 PYaw = 270;
  337.             }
  338.         }
  339.         if(Lat-LatAlt<0 && Long-LongAlt>=0){
  340.             PYaw+=180;
  341.         }
  342.         if(Lat-LatAlt<0 && Long-LongAlt<0){
  343.             PYaw+=180;
  344.         }
  345.         if(Lat-LatAlt>=0 && Long-LongAlt<0){
  346.             PYaw+=360;
  347.         }
  348.         if(Lat-LatAlt>=0 && Long-LongAlt>=0){
  349.         }
  350.         if(Long-LongAlt==0 && Lat-LatAlt==0){
  351.             PYaw = Yaw;
  352.         }
  353.  
  354.         //----draw all the things!---
  355.         draw_altBar(Alt, AAlt, GrDist, AGrDist, AP, AAP, PE, APE);
  356.         if(mode == 2){
  357.             draw_speedbar(Math.sqrt(SpdHor*SpdHor+SpdVert*SpdVert), Math.sqrt(ASpdHor*ASpdHor+ASpdVert*ASpdVert), SpdHor, ASpdHor, SpdVert, ASpdVert);
  358.         }else{
  359.             draw_speedbar(Spd, ASpd, SpdHor, ASpdHor, SpdVert, ASpdVert);
  360.         }
  361.         draw_hdgbar(Yaw, AYaw, Roll, Pitch);
  362.         draw_ah(Pitch, Yaw, Roll);
  363.         draw_buttons();
  364.     };
  365.  
  366.     connection.onerror = function (error) {     //connection error
  367.         con = "err";
  368.         console.log('WebSocket Error ' + error.data);
  369.         set = true;
  370.     };
  371.  
  372.     connection.onclose = function () {          //connection closed
  373.         console.log('Disconnected');
  374.         con = "false";
  375.         draw_ah(0, 0, 0);
  376.         draw_altBar(0, 0, 0, 0, 0, 0, 0, 0);
  377.         draw_speedbar(0, 0, 0, 0, 0, 0);
  378.         draw_hdgbar(0, 0, 0, 0, 0, 0);
  379.         gee = 0;
  380.         draw_buttons();
  381.         set = true;
  382.  
  383.     };
  384.  
  385.     if(con=="false"){                           //not connected
  386.         draw_ah(0, 0, 0);
  387.         draw_altBar(0, 0, 0, 0, 0, 0, 0);
  388.         draw_speedbar(0, 0, 0, 0, 0, 0);
  389.         draw_hdgbar(0, 0, 0, 0, 0, 0);
  390.         gee = 0;
  391.         draw_buttons();
  392.     }
  393.  
  394.     //----functions for things to draw----
  395.     function draw_altBar(alt, aalt, grdist, agrdist, ap, aap, pe, ape, gr){
  396.         var canvas=document.getElementById("altb");
  397.         var ctx=canvas.getContext("2d");
  398.         ctx.canvas.width  = window.innerWidth;
  399.         ctx.canvas.height = window.innerHeight;
  400.         ctx.clearRect(StartX-200*Scale, StartY-400*Scale, 400*Scale, 800*Scale);
  401.         ctx.fillStyle = bg;
  402.         ctx.fillRect(0,0, WWidth, WHeight);
  403.  
  404.         var StartX = 515*Scale+CenterX;
  405.         var StartY = 515*Scale;
  406.         var exponent = 1;
  407.         var div = 1;
  408.         var print = 0;
  409.         var Unit = "";
  410.         var print = 0;
  411.         var Width = 116*Scale;
  412.         var Height = 50*Scale;
  413.         var lz = "";
  414.         var m = 0;
  415.         draw_bar(alt, ap, pe, grdist);
  416.         draw_ind(alt, aalt, StartX, StartY, "ALT", 0.00001)
  417.         draw_ind(grdist, agrdist, StartX, 1018*Scale, "GrdDist", 0.00001)
  418.         draw_ind(ap, aap, StartX, 50*Scale, "AP", 0.0001)
  419.         draw_ind(pe, ape, StartX, 65*Scale+Height, "PE", 0.0001)
  420.  
  421.         function draw_bar(v, vap, vpe, vgr){                                                    //draw alitutde bar
  422.             var dy = 0;
  423.             var dx = 0;
  424.             var rad = 500*Scale;
  425.             var deltx = 0;
  426.             var delty = 40*Scale;
  427.  
  428.             if(Math.abs(v) < 10){                                                               //calculate unit, step width and exponent
  429.                 exponent = 1;
  430.                 div = 1;
  431.                 Unit = "m";
  432.             }else if(Math.abs(v) >= 10 && Math.abs(v) < 100){
  433.                 exponent = 1;
  434.                 div = 5;
  435.                 Unit = "m";
  436.             }else if(Math.abs(v) >= 100 && Math.abs(v) < 1000){
  437.                 exponent = 1;
  438.                 div = 10;
  439.                 Unit = "m";
  440.             }else if(Math.abs(v) >= 1000 && Math.abs(v) < 10000){
  441.                 exponent = 1;
  442.                 div = 100;
  443.                 Unit = "m";
  444.             }else if(Math.abs(v) >= 10000 && Math.abs(v) < 100000){
  445.                 exponent = 1;
  446.                 div = 500;
  447.                 Unit = "m";
  448.             }else if(Math.abs(v) >= 100000 && Math.abs(v) < 1000000){
  449.                 exponent = 1000;
  450.                 div = 5000;
  451.                 Unit = "km";
  452.             }else if(Math.abs(v) >= 1000000 && Math.abs(v) < 10000000){
  453.                 exponent = 1000;
  454.                 div = 10000;
  455.                 Unit = "km";
  456.             }else if(Math.abs(v) >= 10000000 && Math.abs(v) < 100000000){
  457.                 exponent = 1000;
  458.                 div = 100000;
  459.                 Unit = "km";
  460.             }else{
  461.                 exponent = 1000000;
  462.                 div = 1000000;
  463.                 Unit = "Mm";
  464.             }
  465.  
  466.             for(i=-10;i<=9;i++){                                                                //draw items of altitude bar
  467.                 print=Math.floor(v/div)*div+(i+1)*div;
  468.                 m = print/exponent;
  469.  
  470.                 if(m<10 && m >= 0){                                         //format string
  471.                     lz = "00 00"+Math.floor(m);
  472.                 }else if(m < 100 && m >= 10){
  473.                     lz = "00 0"+Math.floor(m);
  474.                 }else if(m < 1000 && m >= 100){
  475.                     lz = "00 "+Math.floor(m);
  476.                 }else if(m < 10000 && m >= 1000){
  477.                     lz = "0"+m.toFixed(0).slice(0,1)+" "+m.toFixed(0).slice(1,4);
  478.                 }else if(m < 0 && m > -9){
  479.                     lz = ("-0 00" + Math.abs(m.toFixed()));
  480.                 }else if(m <= -10 && m > -99){
  481.                     lz = ("-00 " + Math.abs(m.toFixed()));
  482.                 }else if(m <= -100 && m > -999){
  483.                     lz = ("-0 " + Math.abs(m.toFixed()));
  484.                 }else{
  485.                     lz = m.toFixed(0).slice(0,2)+" "+m.toFixed(0).slice(2,5);
  486.                 }
  487.                 if(i>=0){
  488.                     ctx.fillStyle=blue;
  489.                     ctx.strokeStyle=blue;
  490.                 }else{
  491.                     ctx.fillStyle=red;
  492.                     ctx.strokeStyle=red;
  493.                 }
  494.                 deltx = 4*Scale+(-(i+1)*delty+delty*((v/div)-Math.floor(v/div)))*Math.tan(0.5*Math.asin((-(i+1)*delty+delty*((v/div)-Math.floor(v/div)))/rad));
  495.  
  496.                 ctx.lineWidth = 1*Scale;
  497.                 ctx.font = 22*Scale+'pt Courier New';
  498.                 ctx.textAlign = 'right';
  499.                 ctx.fillText(lz, StartX-deltx+Width, StartY+24*Scale-(i+1)*delty+delty*((v/div)-Math.floor(v/div)));
  500.                 ctx.strokeText(lz, StartX-deltx+Width, StartY+24*Scale-(i+1)*delty+delty*((v/div)-Math.floor(v/div)));
  501.                 ctx.fillStyle="transparent";
  502.  
  503.             }
  504.  
  505.             dy = delty*(ap - v)/(div);
  506.             dx = dy*Math.tan(0.5*Math.asin(dy/rad));
  507.             if(Math.abs(dy+16*Scale)<350*Scale && Math.abs(dy+16*Scale)>25*Scale){              //draw apoapsis indicator
  508.                 ctx.fillStyle = blue;
  509.                 ctx.strokeStyle = blue;
  510.                 ctx.font = 18*Scale+'pt Courier New';
  511.                 ctx.textAlign = 'center';
  512.                 ctx.beginPath();
  513.                 ctx.moveTo(StartX+120*Scale-dx,StartY+16*Scale-dy);
  514.                 ctx.lineTo(StartX+120*Scale+30*Scale-dx,StartY-5*Scale+16*Scale-dy);
  515.                 ctx.lineTo(StartX+120*Scale+30*Scale-dx,StartY+5*Scale+16*Scale-dy);
  516.                 ctx.closePath();
  517.                 ctx.fill();
  518.                 ctx.fillText("AP", StartX+135*Scale-dx,StartY-dy);
  519.                 ctx.strokeText("AP", StartX+135*Scale-dx,StartY-dy);
  520.             }
  521.  
  522.             dy = delty*(vpe - v)/(div);
  523.             dx = dy*Math.tan(0.5*Math.asin(dy/rad));
  524.             if(Math.abs(dy+16*Scale)<350*Scale && Math.abs(dy+16*Scale)>25*Scale){              //draw periapsis indicator
  525.                 ctx.fillStyle = red;
  526.                 ctx.strokeStyle = red;
  527.                 ctx.font = 18*Scale+'pt Courier New';
  528.                 ctx.textAlign = 'center';
  529.                 ctx.beginPath();
  530.                 ctx.moveTo(StartX+120*Scale-dx,StartY+16*Scale-dy);
  531.                 ctx.lineTo(StartX+120*Scale+30*Scale-dx,StartY-5*Scale+16*Scale-dy);
  532.                 ctx.lineTo(StartX+120*Scale+30*Scale-dx,StartY+5*Scale+16*Scale-dy);
  533.                 ctx.closePath();
  534.                 ctx.fill();
  535.                 ctx.fillText("PE", StartX+135*Scale-dx,StartY-dy+44*Scale);
  536.                 ctx.strokeText("PE", StartX+135*Scale-dx,StartY-dy+44*Scale);
  537.             }
  538.  
  539.             dy = delty*(-vgr)/(div);
  540.             dx = dy*Math.tan(0.5*Math.asin(dy/rad));
  541.             if(Math.abs(dy+16*Scale)<350*Scale && Math.abs(dy+16*Scale)>25*Scale && vgr != -1){ //draw ground indicator
  542.                 ctx.fillStyle = red;
  543.                 ctx.strokeStyle = red;
  544.                 ctx.font = 18*Scale+'pt Courier New';
  545.                 ctx.textAlign = 'center';
  546.                 ctx.beginPath();
  547.                 ctx.moveTo(StartX+120*Scale-dx,StartY+16*Scale-dy);
  548.                 ctx.lineTo(StartX+120*Scale+30*Scale-dx,StartY-5*Scale+16*Scale-dy);
  549.                 ctx.lineTo(StartX+120*Scale+30*Scale-dx,StartY+5*Scale+16*Scale-dy);
  550.                 ctx.closePath();
  551.                 ctx.fill();
  552.                 ctx.fillText("GRND", StartX+135*Scale-dx,StartY-dy+44*Scale);
  553.                 ctx.strokeText("GRND", StartX+135*Scale-dx,StartY-dy+44*Scale);
  554.             }
  555.  
  556.             var grd1=ctx.createLinearGradient(0,StartY-delty*9,0,StartY-delty*7);               //draw gradients to cover top and bottom of the bar
  557.             var grd2=ctx.createLinearGradient(0,StartY+delty*8,0,StartY+delty*10);
  558.             grd1.addColorStop(0,bg);
  559.             grd1.addColorStop(0.75,bg.slice(0,-3)+",0.5)");
  560.             grd1.addColorStop(1,bg.slice(0,-3)+",0)");
  561.             grd2.addColorStop(0,bg.slice(0,-3)+",0)");
  562.             grd2.addColorStop(0.25,bg.slice(0,-3)+",0.5)");
  563.             grd2.addColorStop(1,bg);
  564.             ctx.fillStyle=grd1;
  565.             ctx.fillRect(StartX-200*Scale,StartY-delty*10, 300*Scale,3*delty);
  566.             ctx.fillStyle=grd2;
  567.             ctx.fillRect(StartX-200*Scale,StartY+delty*8,300*Scale,3*delty);
  568.         }       //end draw_bar
  569.  
  570.         function draw_ind(v, av, x, y, t, delta){                                               //draw altitude indicator
  571.  
  572.             if(Math.abs(v) < 10){                                                               //calculate unit and exponent
  573.                 exponent = 1;
  574.                 Unit = "m";
  575.             }else if(Math.abs(v) >= 10 && Math.abs(v) < 100){
  576.                 exponent = 1;
  577.                 Unit = "m";
  578.             }else if(Math.abs(v) >= 100 && Math.abs(v) < 1000){
  579.                 exponent = 1;
  580.                 Unit = "m";
  581.             }else if(Math.abs(v) >= 1000 && Math.abs(v) < 10000){
  582.                 exponent = 1;
  583.                 Unit = "m";
  584.             }else if(Math.abs(v) >= 10000 && Math.abs(v) < 100000){
  585.                 exponent = 1;
  586.                 Unit = "m";
  587.             }else if(Math.abs(v) >= 100000 && Math.abs(v) < 1000000){
  588.                 exponent = 1000;
  589.                 Unit = "km";
  590.             }else if(Math.abs(v) >= 1000000 && Math.abs(v) < 10000000){
  591.                 exponent = 1000;
  592.                 Unit = "km";
  593.             }else if(Math.abs(v) >= 10000000 && Math.abs(v) < 100000000){
  594.                 exponent = 1000;
  595.                 Unit = "km";
  596.             }else{
  597.                 exponent = 1000000;
  598.                 Unit = "Mm";
  599.             }
  600.  
  601.             m=v/(exponent);
  602.  
  603.             if(m<10 && m >= 0){                                                                 //format string
  604.                     lz = "00 00"+Math.floor(m);
  605.                 }else if(m < 100 && m >= 10){
  606.                     lz = "00 0"+Math.floor(m);
  607.                 }else if(m < 1000 && m >= 100){
  608.                     lz = "00 "+Math.floor(m);
  609.                 }else if(m < 10000 && m >= 1000){
  610.                     lz = "0"+m.toFixed(0).slice(0,1)+" "+m.toFixed(0).slice(1,4);
  611.                 }else if(m < 0 && m > -9){
  612.                     lz = ("-0 00" + Math.abs(m.toFixed()));
  613.                 }else if(m <= -10 && m > -99){
  614.                     lz = ("-00 " + Math.abs(m.toFixed()));
  615.                 }else if(m <= -100 && m > -999){
  616.                     lz = ("-0 " + Math.abs(m.toFixed()));
  617.                 }else{
  618.                     lz = m.toFixed(0).slice(0,2)+" "+m.toFixed(0).slice(2,5);
  619.                 }
  620.  
  621.             if(v==-1 && av==-1){                                                                //draw error when no info
  622.                 lz = "NO INF";
  623.                 Unit = "";
  624.             }
  625.             ctx.fillStyle=blue;
  626.             ctx.fillRect(x,y,Width,Height);
  627.  
  628.             ctx.font = 18*Scale+'pt Lucida Console';
  629.             ctx.textAlign = 'left';
  630.             ctx.fillStyle = blue;
  631.             ctx.fillText(Unit, x+Width+8*Scale, y+32*Scale);
  632.             ctx.lineWidth = 1*Scale;
  633.             ctx.strokeStyle = blue;
  634.             ctx.strokeText(Unit, x+Width+8*Scale, y+32*Scale);
  635.  
  636.             ctx.font = 22*Scale+'pt Courier New';
  637.             ctx.textAlign = 'right';
  638.             ctx.fillStyle = lblue;
  639.             ctx.fillText(lz, x+Width-4*Scale, y+24*Scale);
  640.             ctx.lineWidth = 1*Scale;
  641.             ctx.strokeStyle = lblue;
  642.             ctx.strokeText(lz, x+Width-4*Scale, y+24*Scale);
  643.  
  644.             ctx.font = 10*Scale+'pt Courier New';
  645.             ctx.textAlign = 'left';
  646.             ctx.fillText(t, x+8*Scale, y+Height-8*Scale);
  647.             //ctx.strokeText(t, x+8*Scale, y+Height-8*Scale);
  648.             if(Math.abs((v-av)/v)>delta){                                                       //draw change indicator
  649.                 if(v-av>0 && Math.abs((v-av)/v) < 0.01){
  650.                     ctx.fillStyle = blue;
  651.                     ctx.beginPath();
  652.                     ctx.moveTo(x-10*Scale,y+15*Scale);
  653.                     ctx.lineTo(x-15*Scale,y+Height-15*Scale);
  654.                     ctx.lineTo(x-5*Scale,y+Height-15*Scale);
  655.                     ctx.closePath();
  656.                     ctx.fill();
  657.                 }else if(v-av>0 && Math.abs((v-av)/v) >= 0.01){
  658.                     ctx.fillStyle = blue;
  659.                     ctx.beginPath();
  660.                     ctx.moveTo(x-10*Scale,y+5*Scale);
  661.                     ctx.lineTo(x-15*Scale,y+Height/2);
  662.                     ctx.lineTo(x-5*Scale,y+Height/2);
  663.                     ctx.closePath();
  664.                     ctx.fill();
  665.                     ctx.beginPath();
  666.                     ctx.moveTo(x-10*Scale,y+Height/2);
  667.                     ctx.lineTo(x-15*Scale,y+Height-5*Scale);
  668.                     ctx.lineTo(x-5*Scale,y+Height-5*Scale);
  669.                     ctx.closePath();
  670.                     ctx.fill();
  671.                 }else if(v-av<0 && Math.abs((v-av)/v) < 0.01){
  672.                     ctx.fillStyle = red;
  673.                     ctx.beginPath();
  674.                     ctx.moveTo(x-5*Scale,y+15*Scale);
  675.                     ctx.lineTo(x-15*Scale,y+15*Scale);
  676.                     ctx.lineTo(x-10*Scale,y+Height-15*Scale);
  677.                     ctx.closePath();
  678.                     ctx.fill();
  679.                 }else if(v-av<0 && Math.abs((v-av)/v) >= 0.01){
  680.                     ctx.fillStyle = red;
  681.                     ctx.beginPath();
  682.                     ctx.moveTo(x-5*Scale,y+5*Scale);
  683.                     ctx.lineTo(x-15*Scale,y+5*Scale);
  684.                     ctx.lineTo(x-10*Scale,y+Height/2);
  685.                     ctx.closePath();
  686.                     ctx.fill();
  687.                     ctx.beginPath();
  688.                     ctx.moveTo(x-5*Scale,y+Height/2);
  689.                     ctx.lineTo(x-15*Scale,y+Height/2);
  690.                     ctx.lineTo(x-10*Scale,y+Height-5*Scale);
  691.                     ctx.closePath();
  692.                     ctx.fill();
  693.                 }
  694.             }
  695.         }       //end draw_ind
  696.  
  697.     }   //end draw_altbar
  698.  
  699.     function draw_speedbar(spd, aspd, spd_hor, aspd_hor, spd_vert, aspd_vert){
  700.         var canvas=document.getElementById("spdb");
  701.         var ctx=canvas.getContext("2d");
  702.         ctx.canvas.width  = window.innerWidth;
  703.         ctx.canvas.height = window.innerHeight;
  704.         var Width = 116*Scale;
  705.         var Height = 50*Scale;
  706.         var StartX = -527*Scale+CenterX;
  707.         var StartY = 515*Scale;
  708.         var Rad = 0;
  709.         var exponent = 1;
  710.         var print = 0;
  711.         var deltx = 0;
  712.         var lz = "";
  713.         var dif = 0;
  714.         ctx.clearRect(0, 0, 1920*Scale, 1080*Scale);
  715.  
  716.         function draw_indicator(x, y, w, h, v, av, t){                                          //draw speed indcator
  717.             var m = 0;
  718.             var deltx = 0;
  719.  
  720.             if(Math.abs(v) < 10){                                                               //calculate unit and exponent
  721.                 exponent = 1;
  722.                 Unit = "m";
  723.             }else if(Math.abs(v) >= 10 && Math.abs(v) < 100){
  724.                 exponent = 1;
  725.                 Unit = "m";
  726.             }else if(Math.abs(v) >= 100 && Math.abs(v) < 1000){
  727.                 exponent = 1;
  728.                 Unit = "m";
  729.             }else if(Math.abs(v) >= 1000 && Math.abs(v) < 10000){
  730.                 exponent = 1;
  731.                 Unit = "m";
  732.             }else if(Math.abs(v) >= 10000 && Math.abs(v) < 100000){
  733.                 exponent = 1;
  734.                 Unit = "m";
  735.             }else if(Math.abs(v) >= 100000 && Math.abs(v) < 1000000){
  736.                 exponent = 1000;
  737.                 Unit = "km";
  738.             }else if(Math.abs(v) >= 1000000 && Math.abs(v) < 10000000){
  739.                 exponent = 1000;
  740.                 Unit = "km";
  741.             }else if(Math.abs(v) >= 10000000 && Math.abs(v) < 100000000){
  742.                 exponent = 1000;
  743.                 Unit = "km";
  744.             }else{
  745.                 exponent = 1000000;
  746.                 Unit = "Mm";
  747.             }
  748.  
  749.             m = v/exponent;
  750.  
  751.             if(m<10 && m >= 0){                                                                 //format string
  752.                     lz = "00 00"+Math.floor(m);
  753.                 }else if(m < 100 && m >= 10){
  754.                     lz = "00 0"+Math.floor(m);
  755.                 }else if(m < 1000 && m >= 100){
  756.                     lz = "00 "+Math.floor(m);
  757.                 }else if(m < 10000 && m >= 1000){
  758.                     lz = "0"+m.toFixed(0).slice(0,1)+" "+m.toFixed(0).slice(1,4);
  759.                 }else if(m < 0 && m > -10){
  760.                     lz = ("-0 00" + Math.abs(Math.floor(m)));
  761.                 }else if(m <= -10 && m > -100){
  762.                     lz = ("-0 0" + Math.abs(Math.floor(m)));
  763.                 }else if(m <= -100 && m > -1000){
  764.                     lz = ("-0 " + Math.abs(Math.floor(m)));
  765.                 }else if(m <= -1000 && m > -10000){
  766.                     lz = ("-" + Math.abs(Math.floor(m)));
  767.                 }else if(m <= -10000 && m > -100000){
  768.                     lz = ("-" + Math.abs(Math.floor(m)));
  769.                 }else{
  770.                     lz = m.toFixed(0).slice(0,2)+" "+m.toFixed(0).slice(2,5);
  771.             }
  772.  
  773.             ctx.fillStyle=blue;
  774.             ctx.fillRect(x, y, w, h);
  775.  
  776.             ctx.font = 18*Scale+'pt Lucida Console';
  777.             ctx.textAlign = 'left';
  778.             ctx.fillStyle = blue;
  779.             ctx.fillText(Unit, x+w+8*Scale, y+16*Scale);
  780.             ctx.fillText("s", x+w+8*Scale+deltx, y+46*Scale);
  781.             ctx.lineWidth = 1*Scale;
  782.             ctx.strokeStyle = blue;
  783.             ctx.strokeText(Unit, x+w+8*Scale, y+16*Scale);
  784.             ctx.strokeText("s", x+w+8*Scale+deltx, y+46*Scale);
  785.  
  786.             ctx.beginPath();
  787.             ctx.lineWidth = 2*Scale;
  788.             ctx.moveTo(x+w+4*Scale, y+h/2);
  789.             ctx.lineTo(x+w+26*Scale+2*deltx, y+h/2);
  790.             ctx.stroke();
  791.  
  792.             ctx.font = 22*Scale+'pt Courier New';
  793.             ctx.textAlign = 'right';
  794.             ctx.fillStyle = lblue;
  795.             ctx.fillText(lz, x+w-4*Scale, y+24*Scale);
  796.             ctx.lineWidth = 1*Scale;
  797.             ctx.strokeStyle = lblue;
  798.             ctx.strokeText(lz, x+w-4*Scale, y+24*Scale);
  799.  
  800.             ctx.font = 10*Scale+'pt Courier New';
  801.             ctx.textAlign = 'left';
  802.             ctx.fillText(t, x+8*Scale, y+h-8*Scale);
  803.             //ctx.strokeText(t, x+8*Scale, y+h-8*Scale);
  804.  
  805.             if(Math.abs(v-av)>0.02){                                                            //draw change indicator
  806.                 if(v-av>0.01 && Math.abs(v-av)/v < 0.1){
  807.                     ctx.fillStyle = blue;
  808.                     ctx.beginPath();
  809.                     ctx.moveTo(x-10*Scale,y+15*Scale);
  810.                     ctx.lineTo(x-15*Scale,y+Height-15*Scale);
  811.                     ctx.lineTo(x-5*Scale,y+Height-15*Scale);
  812.                     ctx.closePath();
  813.                     ctx.fill();
  814.                 }else if(v-av>0.01 && Math.abs(v-av)/v >= 0.1){
  815.                     ctx.fillStyle = blue;
  816.                     ctx.beginPath();
  817.                     ctx.moveTo(x-10*Scale,y+5*Scale);
  818.                     ctx.lineTo(x-15*Scale,y+Height/2);
  819.                     ctx.lineTo(x-5*Scale,y+Height/2);
  820.                     ctx.closePath();
  821.                     ctx.fill();
  822.                     ctx.beginPath();
  823.                     ctx.moveTo(x-10*Scale,y+Height/2);
  824.                     ctx.lineTo(x-15*Scale,y+Height-5*Scale);
  825.                     ctx.lineTo(x-5*Scale,y+Height-5*Scale);
  826.                     ctx.closePath();
  827.                     ctx.fill();
  828.                 }else if(v-av<0.01 && Math.abs(v-av)/v < 0.1){
  829.                     ctx.fillStyle = red;
  830.                     ctx.beginPath();
  831.                     ctx.moveTo(x-5*Scale,y+15*Scale);
  832.                     ctx.lineTo(x-15*Scale,y+15*Scale);
  833.                     ctx.lineTo(x-10*Scale,y+Height-15*Scale);
  834.                     ctx.closePath();
  835.                     ctx.fill();
  836.                 }else if(v-av<0.01 && Math.abs(v-av)/v >= 0.1){
  837.                     ctx.fillStyle = red;
  838.                     ctx.beginPath();
  839.                     ctx.moveTo(x-5*Scale,y+5*Scale);
  840.                     ctx.lineTo(x-15*Scale,y+5*Scale);
  841.                     ctx.lineTo(x-10*Scale,y+Height/2);
  842.                     ctx.closePath();
  843.                     ctx.fill();
  844.                     ctx.beginPath();
  845.                     ctx.moveTo(x-5*Scale,y+Height/2);
  846.                     ctx.lineTo(x-15*Scale,y+Height/2);
  847.                     ctx.lineTo(x-10*Scale,y+Height-5*Scale);
  848.                     ctx.closePath();
  849.                     ctx.fill();
  850.                 }
  851.             }
  852.  
  853.         }   //end draw_indicator
  854.  
  855.         function draw_bar_s(v, startx, starty, delty, min){                                     //draw straight speed bar
  856.  
  857.             if(Math.abs(v) < 9){                                                                //calculate unit, step width and exponent
  858.                 exponent = 1;
  859.                 div = 1;
  860.                 Unit = "m";
  861.             }else if(Math.abs(v) >= 10 && Math.abs(v) < 100){
  862.                 exponent = 1;
  863.                 div = 5;
  864.                 Unit = "m";
  865.             }else if(Math.abs(v) >= 100 && Math.abs(v) < 1000){
  866.                 exponent = 1;
  867.                 div = 10;
  868.                 Unit = "m";
  869.             }else if(Math.abs(v) >= 1000 && Math.abs(v) < 10000){
  870.                 exponent = 1;
  871.                 div = 100;
  872.                 Unit = "m";
  873.             }else if(Math.abs(v) >= 10000 && Math.abs(v) < 100000){
  874.                 exponent = 1;
  875.                 div = 500;
  876.                 Unit = "m";
  877.             }else if(Math.abs(v) >= 100000 && Math.abs(v) < 1000000){
  878.                 exponent = 1000;
  879.                 div = 1000;
  880.                 Unit = "km";
  881.             }else if(Math.abs(v) >= 1000000 && Math.abs(v) < 10000000){
  882.                 exponent = 1000;
  883.                 div = 10000;
  884.                 Unit = "km";
  885.             }else if(Math.abs(v) >= 10000000 && Math.abs(v) < 100000000){
  886.                 exponent = 1000;
  887.                 div = 100000;
  888.                 Unit = "km";
  889.             }else{
  890.                 exponent = 1000000;
  891.                 div = 1000000;
  892.                 Unit = "Mm";
  893.             }
  894.  
  895.             for(i=-4;i<=3;i++){                                                                 //draw items
  896.                 print=Math.floor(v/(exponent*div))*div+(i+1)*div;
  897.                 m = print/exponent;
  898.  
  899.                 if(m<10 && m >= 0){                                                             //format string
  900.                     lz = "00 00"+Math.floor(m);
  901.                 }else if(m < 100 && m >= 10){
  902.                     lz = "00 0"+Math.floor(m);
  903.                 }else if(m < 1000 && m >= 100){
  904.                     lz = "00 "+Math.floor(m);
  905.                 }else if(m < 10000 && m >= 1000){
  906.                     lz = "0"+m.toFixed(0).slice(0,1)+" "+m.toFixed(0).slice(1,4);
  907.                 }else if(m < 0 && m > -10){
  908.                     lz = ("-0 00" + Math.abs(Math.floor(m)));
  909.                 }else if(m <= -10 && m > -100){
  910.                     lz = ("-0 0" + Math.abs(Math.floor(m)));
  911.                 }else if(m <= -100 && m > -1000){
  912.                     lz = ("-0 " + Math.abs(Math.floor(m)));
  913.                 }else if(m <= -1000 && m > -10000){
  914.                     lz = ("-" + Math.abs(Math.floor(m)));
  915.                 }else if(m <= -10000 && m > -100000){
  916.                     lz = ("-" + Math.abs(Math.floor(m)));
  917.                 }else{
  918.                     lz = m.toFixed(0).slice(0,2)+" "+m.toFixed(0).slice(2,5);
  919.                 }
  920.  
  921.                 if(i>=0){                                                                       //blue color for items on top
  922.                     ctx.fillStyle=blue;
  923.                     ctx.strokeStyle=blue;
  924.                 }else{                                                                          //red color for items on bottom
  925.                     ctx.fillStyle=red;
  926.                     ctx.strokeStyle=red;
  927.                 }
  928.                 if(min=="false"){                                                               //draw only positiv or both pos and neg items
  929.                     if(print>=0){
  930.                         ctx.lineWidth = 1*Scale;
  931.                         ctx.font = 22*Scale+'pt Courier New';
  932.                         ctx.textAlign = 'right';
  933.                         ctx.fillText(lz, startx, starty+24*Scale-(i+1)*delty+delty*(1/div)*((v/(exponent))-Math.floor(v/(exponent*div))*div));
  934.                         ctx.strokeText(lz, startx, starty+24*Scale-(i+1)*delty+delty*(1/div)*((v/(exponent))-Math.floor(v/(exponent*div))*div));
  935.                     }
  936.                 }else if(min=="true"){
  937.                     ctx.lineWidth = 1*Scale;
  938.                     ctx.font = 22*Scale+'pt Courier New';
  939.                     ctx.textAlign = 'right';
  940.                     ctx.fillText(lz, startx, starty+24*Scale-(i+1)*delty+delty*(1/div)*((v/(exponent))-Math.floor(v/(exponent*div))*div));
  941.                     ctx.strokeText(lz, startx, starty+24*Scale-(i+1)*delty+delty*(1/div)*((v/(exponent))-Math.floor(v/(exponent*div))*div));
  942.                 }
  943.             }
  944.  
  945.             var grd1=ctx.createLinearGradient(0,starty-1.5*delty,0,starty-delty*0.5);           //draw gradients on top and bottom
  946.             var grd2=ctx.createLinearGradient(0,starty+delty*2,0,starty+delty*4);
  947.             grd1.addColorStop(0,bg);
  948.             grd1.addColorStop(0.75,bg.slice(0,-3)+",0.5)");
  949.             grd1.addColorStop(1,bg.slice(0,-3)+",0)");
  950.             grd2.addColorStop(0,bg.slice(0,-3)+",0)");
  951.             grd2.addColorStop(0.25,bg.slice(0,-3)+",0.5)");
  952.             grd2.addColorStop(1,bg);
  953.             ctx.fillStyle=grd1;
  954.             ctx.fillRect(startx-116*Scale,0, 116*Scale,2*delty);
  955.             ctx.fillStyle=grd2;
  956.             ctx.fillRect(startx-116*Scale,starty+delty*2, 116*Scale,3*delty);
  957.         }   //end draw_bar_s
  958.  
  959.         function draw_bar_r(v, startx, starty, delty){                                          //draw curved bar
  960.             var delty = 40*Scale;
  961.             if(Math.abs(v) < 9){                                                                //calculate unit, step width and exponent
  962.                 exponent = 1;
  963.                 div = 1;
  964.                 Unit = "m";
  965.             }else if(Math.abs(v) >= 10 && Math.abs(v) < 100){
  966.                 exponent = 1;
  967.                 div = 5;
  968.                 Unit = "m";
  969.             }else if(Math.abs(v) >= 100 && Math.abs(v) < 1000){
  970.                 exponent = 1;
  971.                 div = 10;
  972.                 Unit = "m";
  973.             }else if(Math.abs(v) >= 1000 && Math.abs(v) < 10000){
  974.                 exponent = 1;
  975.                 div = 100;
  976.                 Unit = "m";
  977.             }else if(Math.abs(v) >= 10000 && Math.abs(v) < 100000){
  978.                 exponent = 1;
  979.                 div = 500;
  980.                 Unit = "m";
  981.             }else if(Math.abs(v) >= 100000 && Math.abs(v) < 1000000){
  982.                 exponent = 1000;
  983.                 div = 50;
  984.                 Unit = "km";
  985.             }else if(Math.abs(v) >= 1000000 && Math.abs(v) < 10000000){
  986.                 exponent = 1000;
  987.                 div = 500;
  988.                 Unit = "km";
  989.             }else if(Math.abs(v) >= 10000000 && Math.abs(v) < 100000000){
  990.                 exponent = 1000;
  991.                 div = 1000;
  992.                 Unit = "km";
  993.             }else{
  994.                 exponent = 1000000;
  995.                 div = 1000000;
  996.                 Unit = "Mm";
  997.             }
  998.  
  999.             for(i=-10;i<=9;i++){                                                                //draw items
  1000.                 print=Math.floor(v/(exponent*div))*div+(i+1)*div;
  1001.                 m = print/exponent;
  1002.  
  1003.                 if(m<10 && m >= 0){                                                             //format string
  1004.                     lz = "00 00"+Math.floor(m);
  1005.                 }else if(m < 100 && m >= 10){
  1006.                     lz = "00 0"+Math.floor(m);
  1007.                 }else if(m < 1000 && m >= 100){
  1008.                     lz = "00 "+Math.floor(m);
  1009.                 }else if(m < 10000 && m >= 1000){
  1010.                     lz = "0"+m.toFixed(0).slice(0,1)+" "+m.toFixed(0).slice(1,4);
  1011.                 }else if(m < 0 && m > -9){
  1012.                     lz = ("-0 00" + Math.abs(Math.floor(m)));
  1013.                 }else if(m <= -10 && m > -99){
  1014.                     lz = ("-0 0" + Math.abs(Math.floor(m)));
  1015.                 }else if(m <= -10 && m > -99){
  1016.                     lz = ("-0 " + Math.abs(Math.floor(m)));
  1017.                 }else{
  1018.                     lz = m.toFixed(0).slice(0,2)+" "+m.toFixed(0).slice(2,5);
  1019.                 }
  1020.  
  1021.                 if(i>=0){                                                                       //blue color for items on top
  1022.                     ctx.fillStyle=blue;
  1023.                     ctx.strokeStyle=blue;
  1024.                 }else{                                                                          //red color for items on bottom
  1025.                     ctx.fillStyle=red;
  1026.                     ctx.strokeStyle=red;
  1027.                 }
  1028.                 rad = 500*Scale;
  1029.                 deltx = (-(i+1)*delty+delty*(1/div)*((v/(exponent))-Math.floor(v/(exponent*div))*div))*Math.tan(0.5*Math.asin((-(i+1)*delty+delty*(1/div)*((v/(exponent))-Math.floor(v/(exponent*div))*div))/rad));
  1030.  
  1031.                 if(print>=0){                                                                   //only draw positiv items
  1032.                     ctx.lineWidth = 1*Scale;
  1033.                     ctx.font = 22*Scale+'pt Courier New';
  1034.                     ctx.textAlign = 'right';
  1035.                     ctx.fillText(lz, startx+deltx, starty+24*Scale-(i+1)*delty+delty*(1/div)*((v/(exponent))-Math.floor(v/(exponent*div))*div));
  1036.                     ctx.strokeText(lz, startx+deltx, starty+24*Scale-(i+1)*delty+delty*(1/div)*((v/(exponent))-Math.floor(v/(exponent*div))*div));
  1037.                 }
  1038.             }
  1039.  
  1040.             var grd1=ctx.createLinearGradient(0,starty-delty*9,0,starty-delty*7);               //draw gradients on top and bottom
  1041.             var grd2=ctx.createLinearGradient(0,starty+delty*8,0,starty+delty*10);
  1042.             grd1.addColorStop(0,bg);
  1043.             grd1.addColorStop(0.75,bg.slice(0,-3)+",0.5)");
  1044.             grd1.addColorStop(1,bg.slice(0,-3)+",0)");
  1045.             grd2.addColorStop(0,bg.slice(0,-3)+",0)");
  1046.             grd2.addColorStop(0.25,bg.slice(0,-3)+",0.5)");
  1047.             grd2.addColorStop(1,bg);
  1048.             ctx.fillStyle=grd1;
  1049.             ctx.fillRect(startx,starty-delty*10, 200*Scale,3*delty);
  1050.             ctx.fillStyle=grd2;
  1051.             ctx.fillRect(startx,starty+delty*8,200*Scale,3*delty);
  1052.         } //end draw_bar_r
  1053.  
  1054.         draw_bar_r(spd, StartX, StartY, 40*Scale);
  1055.         draw_bar_s(spd_hor, CenterX-300*Scale+Width, 50*Scale, 25*Scale, "false");
  1056.         draw_bar_s(spd_vert, CenterX+300*Scale-8*Scale, 50*Scale, 25*Scale, "true");
  1057.  
  1058.         draw_indicator(StartX-Width, StartY, Width, Height, spd, aspd, "SPD");
  1059.         draw_indicator(CenterX-300*Scale+4*Scale, 50*Scale, Width, Height, spd_hor, aspd_hor, "HorSPD");
  1060.         draw_indicator(CenterX+300*Scale-Width-4*Scale, 50*Scale, Width, Height, spd_vert, aspd_vert, "VertSPD");
  1061.     }   //end draw spdbar
  1062.  
  1063.     function draw_hdgbar(yaw, ayaw, roll, pitch){
  1064.         var canvas=document.getElementById("hdgb");
  1065.         var ctx=canvas.getContext("2d");
  1066.         ctx.canvas.width  = window.innerWidth;
  1067.         ctx.canvas.height = window.innerHeight;
  1068.         var Width = 116*Scale;
  1069.         var StartX = CenterX-Width/2;
  1070.         var StartY = 1018*Scale;
  1071.         var print = "";
  1072.         var Rad = 0;
  1073.         var print = 0;
  1074.         var deltx = 50*Scale;
  1075.         var delty = 0;
  1076.  
  1077.         ctx.clearRect(StartX-400*Scale, StartY-200*Scale, 800*Scale, 400*Scale);
  1078.  
  1079.         function draw_bar(v){                                                                   //draw heading bar
  1080.             for(i=-5;i<=4;i++){
  1081.  
  1082.                 print=Math.floor(v)+(i+1)*0.5;
  1083.                 if(print<0){
  1084.                     print+=360;
  1085.                 }
  1086.  
  1087.                 ctx.fillStyle=blue;
  1088.                 ctx.strokeStyle=blue;
  1089.                 rad = 800*Scale;
  1090.                 delty = (25*Scale+2*(i+1)*deltx-deltx*4*(v-Math.floor(v)))*Math.tan(0.5*Math.asin((25*Scale+2*(i+1)*deltx-deltx*4*(v-Math.floor(v)))/rad));
  1091.  
  1092.                 ctx.lineWidth = 1*Scale;
  1093.                 ctx.font = 22*Scale+'pt Courier New';
  1094.                 ctx.textAlign = 'right';
  1095.                 if((Width-4*Scale+2*(i+1)*deltx-deltx*4*(v-Math.floor(v)))> -300*Scale && (Width-4*Scale+2*(i+1)*deltx-deltx*4*(v-Math.floor(v)))< 450*Scale){
  1096.                     ctx.fillText(print.toFixed(1), StartX+Width-4*Scale+2*(i+1)*deltx-deltx*4*(v-Math.floor(v)), StartY+24*Scale-delty);
  1097.                     ctx.strokeText(print.toFixed(1), StartX+Width-4*Scale+2*(i+1)*deltx-deltx*4*(v-Math.floor(v)), StartY+24*Scale-delty);
  1098.                 }
  1099.             }
  1100.  
  1101.             var grd1=ctx.createLinearGradient(StartX-300*Scale,0,StartX-100*Scale,0);           //draw gradients left and right
  1102.             var grd2=ctx.createLinearGradient(StartX+300*Scale,0,StartX+500*Scale,0);
  1103.             grd1.addColorStop(0,bg);
  1104.             grd1.addColorStop(0.75,bg.slice(0,-3)+",0.5)");
  1105.             grd1.addColorStop(1,bg.slice(0,-3)+",0)");
  1106.             grd2.addColorStop(0,bg.slice(0,-3)+",0)");
  1107.             grd2.addColorStop(0.25,bg.slice(0,-3)+",0.5)");
  1108.             grd2.addColorStop(1,bg);
  1109.             ctx.fillStyle=grd1;
  1110.             ctx.fillRect(StartX-400*Scale,StartY-100*Scale, 300*Scale,100*Scale);
  1111.             ctx.fillStyle=grd2;
  1112.             ctx.fillRect(StartX+300*Scale,StartY-100*Scale, 300*Scale,100*Scale);
  1113.         }
  1114.  
  1115.         function draw_indicator(v, av){                                                         //draw heading indicator
  1116.  
  1117.             ctx.fillStyle=blue;
  1118.             ctx.fillRect(StartX,StartY,Width,Height);
  1119.             ctx.font = 22*Scale+'pt Courier New';
  1120.             ctx.textAlign = 'right';
  1121.             ctx.fillStyle = lblue;
  1122.             ctx.lineWidth = 1*Scale;
  1123.             ctx.strokeStyle = lblue;
  1124.  
  1125.             ctx.fillText(v.toFixed(1), StartX+Width-4*Scale, StartY+24*Scale);
  1126.             ctx.strokeText(v.toFixed(1), StartX+Width-4*Scale, StartY+24*Scale);
  1127.  
  1128.             ctx.font = 10*Scale+'pt Courier New';
  1129.             ctx.textAlign = 'left';
  1130.             ctx.fillText("HDG", StartX+8*Scale, StartY+Height-8*Scale);
  1131.  
  1132.             if(Math.abs(v-av)>0.0001){                                                          //draw change indicator
  1133.                 if(v-av>0 && Math.abs((v-av)) < 0.1){
  1134.                     ctx.fillStyle = blue;
  1135.                     ctx.beginPath();
  1136.                     ctx.moveTo(StartX+Width/2-10*Scale,StartY-15*Scale);
  1137.                     ctx.lineTo(StartX+Width/2-10*Scale,StartY-5*Scale);
  1138.                     ctx.lineTo(StartX+Width/2+10*Scale,StartY-10*Scale);
  1139.                     ctx.closePath();
  1140.                     ctx.fill();
  1141.                 }else if(v-av>0 && Math.abs((v-av)) >= 0.1){
  1142.                     ctx.fillStyle = blue;
  1143.                     ctx.beginPath();
  1144.                     ctx.moveTo(StartX+Width/2-20*Scale,StartY-15*Scale);
  1145.                     ctx.lineTo(StartX+Width/2-20*Scale,StartY-5*Scale);
  1146.                     ctx.lineTo(StartX+Width/2,StartY-10*Scale);
  1147.                     ctx.closePath();
  1148.                     ctx.fill();
  1149.                     ctx.beginPath();
  1150.                     ctx.moveTo(StartX+Width/2,StartY-15*Scale);
  1151.                     ctx.lineTo(StartX+Width/2,StartY-5*Scale);
  1152.                     ctx.lineTo(StartX+Width/2+20*Scale,StartY-10*Scale);
  1153.                     ctx.closePath();
  1154.                     ctx.fill();
  1155.                 }else if(v-av<0 && Math.abs((v-av)) < 0.1){
  1156.                     ctx.fillStyle = blue;
  1157.                     ctx.beginPath();
  1158.                     ctx.moveTo(StartX+Width/2-10*Scale,StartY-10*Scale);
  1159.                     ctx.lineTo(StartX+Width/2+10*Scale,StartY-15*Scale);
  1160.                     ctx.lineTo(StartX+Width/2+10*Scale,StartY-5*Scale);
  1161.                     ctx.closePath();
  1162.                     ctx.fill();
  1163.                 }else if(v-av<0 && Math.abs((v-av)) >= 0.1){
  1164.                     ctx.fillStyle = blue;
  1165.                     ctx.beginPath();
  1166.                     ctx.moveTo(StartX+Width/2+20*Scale,StartY-15*Scale);
  1167.                     ctx.lineTo(StartX+Width/2+20*Scale,StartY-5*Scale);
  1168.                     ctx.lineTo(StartX+Width/2,StartY-10*Scale);
  1169.                     ctx.closePath();
  1170.                     ctx.fill();
  1171.                     ctx.beginPath();
  1172.                     ctx.moveTo(StartX+Width/2,StartY-15*Scale);
  1173.                     ctx.lineTo(StartX+Width/2,StartY-5*Scale);
  1174.                     ctx.lineTo(StartX+Width/2-20*Scale,StartY-10*Scale);
  1175.                     ctx.closePath();
  1176.                     ctx.fill();
  1177.                 }
  1178.             }
  1179.         }
  1180.  
  1181.         draw_bar(yaw);
  1182.         draw_indicator(yaw, ayaw);
  1183.     }   //end draw_hdgbar
  1184.  
  1185.     function draw_ah(pitch, yaw, roll){
  1186.         var canvas=document.getElementById("hor");
  1187.         var ctx=canvas.getContext("2d");
  1188.         ctx.canvas.width  = window.innerWidth;
  1189.         ctx.canvas.height = window.innerHeight;
  1190.         var r = 400*Scale;
  1191.         var s = 25*Scale;
  1192.         var l = 50*Scale;
  1193.         var y = 0*Scale;
  1194.         var x = 0*Scale;
  1195.         var y = 0*Scale;
  1196.         var p = 0*Scale;
  1197.         var d = 10*Scale;
  1198.         var a = 25*Scale;
  1199.         var b = 50*Scale;
  1200.         var alph = 0;
  1201.         var bet = 0;
  1202.         var lenght = 0;
  1203.  
  1204.         var print = 0;
  1205.         ctx.lineCap="round";
  1206.         ctx.clearRect(CenterX-450*Scale, CenterY-450*Scale, 900*Scale, 900*Scale);
  1207.  
  1208.         for(i=-4;i<=4;i++){                                                                     //draw inner pitch bars 10°
  1209.             p = pitch-(Math.floor(pitch/10))*10+i*10;
  1210.             if(p<=37 && p!=0 && p >=-37){
  1211.                 if((Math.floor(pitch/10))*10-i*10<0){
  1212.                     ctx.strokeStyle =red;
  1213.                     ctx.fillStyle =red;
  1214.                     l = 100*Scale;
  1215.                     ctx.lineWidth = 2*Scale;
  1216.                 }else if((Math.floor(pitch/10))*10-i*10>0){
  1217.                     ctx.strokeStyle =blue;
  1218.                     ctx.fillStyle =blue;
  1219.                     l = 100*Scale;
  1220.                     ctx.lineWidth = 2*Scale;
  1221.                 }else{
  1222.                     var grd1=ctx.createLinearGradient(CenterX+(p*d-b)*Math.sin(-roll*Math.PI/180), CenterY+(p*d-b)*Math.cos(-roll*Math.PI/180),CenterX+(p*d+b)*Math.sin(-roll*Math.PI/180), CenterY+(p*d+b)*Math.cos(-roll*Math.PI/180));
  1223.                     grd1.addColorStop(0,blue.slice(0,-3)+",0)");
  1224.                     grd1.addColorStop(0.4999,blue.slice(0,-3)+",0.2)");
  1225.                     grd1.addColorStop(0.5001,red.slice(0,-3)+",0.2)");
  1226.                     grd1.addColorStop(1,red.slice(0,-3)+",0)");
  1227.  
  1228.                     ctx.beginPath();
  1229.                     ctx.arc(CenterX, CenterY, 399*Scale, 0, 2*Math.PI, false);
  1230.                     ctx.closePath();
  1231.                     ctx.fillStyle=grd1;
  1232.                     ctx.fill();
  1233.                     l = Math.sqrt(r*r-(p*d)*(p*d));
  1234.                     ctx.strokeStyle =blue;
  1235.                     ctx.lineWidth = 4*Scale;
  1236.                 }
  1237.                 ctx.beginPath();
  1238.                 ctx.moveTo(CenterX-l*Math.cos(-roll*Math.PI/180)+p*d*Math.sin(-roll*Math.PI/180), CenterY+l*Math.sin(-roll*Math.PI/180)+p*d*Math.cos(-roll*Math.PI/180));
  1239.                 ctx.lineTo(CenterX+l*Math.cos(-roll*Math.PI/180)+p*d*Math.sin(-roll*Math.PI/180), CenterY-l*Math.sin(-roll*Math.PI/180)+p*d*Math.cos(-roll*Math.PI/180));
  1240.                 ctx.stroke();
  1241.  
  1242.                 ctx.font = 14*Scale+'pt Courier New';
  1243.                 ctx.lineWidth = 1*Scale;
  1244.                 ctx.textAlign = 'center';
  1245.                 print = (Math.floor(pitch/10))*10-i*10;
  1246.                 if(print> 90){
  1247.                         print+=2*(90-print);
  1248.                 }
  1249.                 if(print< -90){
  1250.                         print+=2*(-90-print);
  1251.                 }
  1252.                 if(print != 0){
  1253.                     ctx.fillText(print, CenterX-(l+s)*Math.cos(-roll*Math.PI/180)+p*d*Math.sin(-roll*Math.PI/180), CenterY+6*Scale+(l+2*d)*Math.sin(-roll*Math.PI/180)+p*d*Math.cos(-roll*Math.PI/180));
  1254.                     ctx.strokeText(print, CenterX-(l+s)*Math.cos(-roll*Math.PI/180)+p*d*Math.sin(-roll*Math.PI/180), CenterY+6*Scale+(l+2*d)*Math.sin(-roll*Math.PI/180)+p*d*Math.cos(-roll*Math.PI/180));
  1255.                     ctx.fillText(print, CenterX+(l+s)*Math.cos(-roll*Math.PI/180)+p*d*Math.sin(-roll*Math.PI/180), CenterY+6*Scale-(l+2*d)*Math.sin(-roll*Math.PI/180)+p*d*Math.cos(-roll*Math.PI/180));
  1256.                     ctx.strokeText(print, CenterX+(l+s)*Math.cos(-roll*Math.PI/180)+p*d*Math.sin(-roll*Math.PI/180), CenterY+6*Scale-(l+2*d)*Math.sin(-roll*Math.PI/180)+p*d*Math.cos(-roll*Math.PI/180));
  1257.                 }
  1258.             }
  1259.         }
  1260.  
  1261.         for(i=-5;i<=4;i++){                                                                     //draw inner pitch bars 5°
  1262.             s = 50*Scale;
  1263.             p = pitch-(Math.floor(pitch/10))*10+i*10+5;
  1264.             if(p<=38 && p!=0 && p >=-38){
  1265.                 if(pitch-(i+1)*10<0){
  1266.                     ctx.strokeStyle =red;
  1267.                 }else{
  1268.                     ctx.strokeStyle =blue;
  1269.                 }
  1270.                 ctx.lineWidth = 2*Scale;
  1271.                 ctx.beginPath();
  1272.                 ctx.moveTo(CenterX-s*Math.cos(-roll*Math.PI/180)+p*d*Math.sin(-roll*Math.PI/180), CenterY+s*Math.sin(-roll*Math.PI/180)+p*d*Math.cos(-roll*Math.PI/180));
  1273.                 ctx.lineTo(CenterX+s*Math.cos(-roll*Math.PI/180)+p*d*Math.sin(-roll*Math.PI/180), CenterY-s*Math.sin(-roll*Math.PI/180)+p*d*Math.cos(-roll*Math.PI/180));
  1274.                 ctx.stroke();
  1275.  
  1276.             }
  1277.         }
  1278.  
  1279.         for(i=-4;i<=4;i++){                                                                     //draw inner yaw bars 10°
  1280.             l = 50*Scale;
  1281.             y = -(yaw-(Math.floor(yaw/10))*10+i*10);
  1282.             if(y<=39 && y!=0 && y >=-39){
  1283.                 ctx.strokeStyle =lblue;
  1284.                 ctx.fillStyle =lblue;
  1285.                 ctx.lineWidth = 2*Scale;
  1286.                 ctx.beginPath();
  1287.                 ctx.moveTo(CenterX-l*Math.sin(roll*Math.PI/180)+y*d*Math.cos(roll*Math.PI/180), CenterY+l*Math.cos(roll*Math.PI/180)+y*d*Math.sin(roll*Math.PI/180));
  1288.                 ctx.lineTo(CenterX+l*Math.sin(roll*Math.PI/180)+y*d*Math.cos(roll*Math.PI/180), CenterY-l*Math.cos(roll*Math.PI/180)+y*d*Math.sin(roll*Math.PI/180));
  1289.                 ctx.stroke();
  1290.                 if((Math.floor(yaw/10))*10-i*10!=0 && y<33 && y>-33){
  1291.                     ctx.font = 14*Scale+'pt Courier New';
  1292.                     ctx.lineWidth = 1*Scale;
  1293.                     ctx.textAlign = 'center';
  1294.                     print = (Math.floor(yaw/10))*10-i*10;
  1295.                     if(print> 360){
  1296.                         print-= 360;
  1297.                     }
  1298.                     if(print< 0){
  1299.                         print+=360;
  1300.                     }
  1301.                     ctx.fillText(print, CenterX-(l+s)*Math.sin(roll*Math.PI/180)+y*d*Math.cos(roll*Math.PI/180), CenterY+6*Scale+(l+2*d)*Math.cos(roll*Math.PI/180)+y*d*Math.sin(roll*Math.PI/180));
  1302.                     ctx.strokeText(print, CenterX-(l+s)*Math.sin(roll*Math.PI/180)+y*d*Math.cos(roll*Math.PI/180), CenterY+6*Scale+(l+2*d)*Math.cos(roll*Math.PI/180)+y*d*Math.sin(roll*Math.PI/180));
  1303.                     ctx.fillText(print, CenterX+(l+s)*Math.sin(roll*Math.PI/180)+y*d*Math.cos(roll*Math.PI/180), CenterY+6*Scale-(l+2*d)*Math.cos(roll*Math.PI/180)+y*d*Math.sin(roll*Math.PI/180));
  1304.                     ctx.strokeText(print, CenterX+(l+s)*Math.sin(roll*Math.PI/180)+y*d*Math.cos(roll*Math.PI/180), CenterY+6*Scale-(l+2*d)*Math.cos(roll*Math.PI/180)+y*d*Math.sin(roll*Math.PI/180));
  1305.                 }
  1306.             }
  1307.         }
  1308.  
  1309.         for(i=-5;i<=4;i++){                                                                     //draw inner yaw bars 5°
  1310.             s = 10*Scale;
  1311.             y = -(yaw-(Math.floor(yaw/10))*10+i*10+5);
  1312.             if(y<=39 && y!=0 && y >=-39){
  1313.                 ctx.lineWidth = 2*Scale;
  1314.                 ctx.beginPath();
  1315.                 ctx.moveTo(CenterX-s*Math.sin(roll*Math.PI/180)+y*d*Math.cos(roll*Math.PI/180), CenterY+s*Math.cos(roll*Math.PI/180)+y*d*Math.sin(roll*Math.PI/180));
  1316.                 ctx.lineTo(CenterX+s*Math.sin(roll*Math.PI/180)+y*d*Math.cos(roll*Math.PI/180), CenterY-s*Math.cos(roll*Math.PI/180)+y*d*Math.sin(roll*Math.PI/180));
  1317.                 ctx.stroke();
  1318.  
  1319.             }
  1320.         }
  1321.  
  1322.         var grd3=ctx.createRadialGradient(CenterX,CenterY,390*Scale,CenterX,CenterY,250*Scale); //draw circular gradient to dim edge
  1323.         grd3.addColorStop(0,bg.slice(0,-3)+",0.8)");
  1324.         grd3.addColorStop(1,bg.slice(0,-3)+",0)");
  1325.  
  1326.         ctx.beginPath();
  1327.         ctx.arc(CenterX, CenterY, 399*Scale, 0, 2*Math.PI, false);
  1328.         ctx.closePath();
  1329.         ctx.fillStyle=grd3;
  1330.         ctx.fill();
  1331.  
  1332.         for(i=-4;i<=4;i++){                                                                     //draw outer pitch bars 10°
  1333.             l = 20*Scale;
  1334.             p = pitch-(Math.floor(pitch/10))*10+i*10;
  1335.             x = (r-1*Scale) - Math.sqrt(r*r-(p*d)*(p*d));
  1336.             if(p<=35 && p!=0 && p >=-35){
  1337.                 if(pitch-i*10<0){
  1338.                     ctx.strokeStyle =lred;
  1339.                 }else{
  1340.                     ctx.strokeStyle =lblue;
  1341.                 }
  1342.                 ctx.lineWidth = 2*Scale;
  1343.                 ctx.beginPath();
  1344.                 ctx.moveTo(CenterX+r*Math.cos(-roll*Math.PI/180)+p*d*Math.sin(-roll*Math.PI/180)-x*Math.cos(-roll*Math.PI/180), CenterY-r*Math.sin(-roll*Math.PI/180)+p*d*Math.cos(-roll*Math.PI/180)+x*Math.sin(-roll*Math.PI/180));
  1345.                 ctx.lineTo(CenterX+r*Math.cos(-roll*Math.PI/180)+p*d*Math.sin(-roll*Math.PI/180)-x*Math.cos(-roll*Math.PI/180)+l*Math.cos(-roll*Math.PI/180), CenterY-r*Math.sin(-roll*Math.PI/180)+p*d*Math.cos(-roll*Math.PI/180)+x*Math.sin(-roll*Math.PI/180)-l*Math.sin(-roll*Math.PI/180));
  1346.                 ctx.stroke();
  1347.                 ctx.beginPath();
  1348.                 ctx.moveTo(CenterX-r*Math.cos(-roll*Math.PI/180)+p*d*Math.sin(-roll*Math.PI/180)+x*Math.cos(-roll*Math.PI/180), CenterY+r*Math.sin(-roll*Math.PI/180)+p*d*Math.cos(-roll*Math.PI/180)-x*Math.sin(-roll*Math.PI/180));
  1349.                 ctx.lineTo(CenterX-r*Math.cos(-roll*Math.PI/180)+p*d*Math.sin(-roll*Math.PI/180)+x*Math.cos(-roll*Math.PI/180)-l*Math.cos(-roll*Math.PI/180), CenterY+r*Math.sin(-roll*Math.PI/180)+p*d*Math.cos(-roll*Math.PI/180)-x*Math.sin(-roll*Math.PI/180)+l*Math.sin(-roll*Math.PI/180));
  1350.                 ctx.stroke();
  1351.             }
  1352.         }
  1353.  
  1354.         for(i=-5;i<=4;i++){                                                                     //draw outer pitch bars 5°
  1355.             s = 10*Scale;
  1356.             p = pitch-(Math.floor(pitch/10))*10+i*10+5;
  1357.             x = (r-1*Scale) - Math.sqrt(r*r-(p*d)*(p*d));
  1358.             if(p<=35 && p!=0 && p >=-35){
  1359.                 if(pitch-(i+1)*10<0){
  1360.                     ctx.strokeStyle =lred;
  1361.                 }else{
  1362.                     ctx.strokeStyle =lblue;
  1363.                 }
  1364.                 ctx.lineWidth = 2*Scale;
  1365.                 ctx.beginPath();
  1366.                 ctx.moveTo(CenterX+r*Math.cos(-roll*Math.PI/180)+p*d*Math.sin(-roll*Math.PI/180)-x*Math.cos(-roll*Math.PI/180), CenterY-r*Math.sin(-roll*Math.PI/180)+p*d*Math.cos(-roll*Math.PI/180)+x*Math.sin(-roll*Math.PI/180));
  1367.                 ctx.lineTo(CenterX+r*Math.cos(-roll*Math.PI/180)+p*d*Math.sin(-roll*Math.PI/180)-x*Math.cos(-roll*Math.PI/180)+s*Math.cos(-roll*Math.PI/180), CenterY-r*Math.sin(-roll*Math.PI/180)+p*d*Math.cos(-roll*Math.PI/180)+x*Math.sin(-roll*Math.PI/180)-s*Math.sin(-roll*Math.PI/180));
  1368.                 ctx.stroke();
  1369.                 ctx.beginPath();
  1370.                 ctx.moveTo(CenterX-r*Math.cos(-roll*Math.PI/180)+p*d*Math.sin(-roll*Math.PI/180)+x*Math.cos(-roll*Math.PI/180), CenterY+r*Math.sin(-roll*Math.PI/180)+p*d*Math.cos(-roll*Math.PI/180)-x*Math.sin(-roll*Math.PI/180));
  1371.                 ctx.lineTo(CenterX-r*Math.cos(-roll*Math.PI/180)+p*d*Math.sin(-roll*Math.PI/180)+x*Math.cos(-roll*Math.PI/180)-s*Math.cos(-roll*Math.PI/180), CenterY+r*Math.sin(-roll*Math.PI/180)+p*d*Math.cos(-roll*Math.PI/180)-x*Math.sin(-roll*Math.PI/180)+s*Math.sin(-roll*Math.PI/180));
  1372.                 ctx.stroke();
  1373.             }
  1374.         }
  1375.         if(pitch>=0){                                                                           //draw pitch degree dots
  1376.             s =5*Scale;
  1377.             for(i=0;i<=pitch;i++){
  1378.                 p = pitch-i;
  1379.                 x = r-s - Math.sqrt(r*r-(p*d)*(p*d));
  1380.                 if(p<=35 && p!=0 && p >=-35){
  1381.                     ctx.fillStyle =lblue;
  1382.                     ctx.fillRect(CenterX-1*Scale+r*Math.cos(-roll*Math.PI/180)+p*d*Math.sin(-roll*Math.PI/180)-x*Math.cos(-roll*Math.PI/180),CenterY-1*Scale-r*Math.sin(-roll*Math.PI/180)+p*d*Math.cos(-roll*Math.PI/180)+x*Math.sin(-roll*Math.PI/180),2*Scale,2*Scale);
  1383.                 }
  1384.             }
  1385.         }else{
  1386.             s =5*Scale;
  1387.             for(i=1;i<=Math.abs(pitch);i++){
  1388.                 p = pitch+i;
  1389.                 x = r-s - Math.sqrt(r*r-(p*d)*(p*d));
  1390.                 if(p<=35 && p!=0 && p >=-35){
  1391.                     ctx.fillStyle =lred;
  1392.                     ctx.fillRect(CenterX-1*Scale+r*Math.cos(-roll*Math.PI/180)+p*d*Math.sin(-roll*Math.PI/180)-x*Math.cos(-roll*Math.PI/180),CenterY-1*Scale-r*Math.sin(-roll*Math.PI/180)+p*d*Math.cos(-roll*Math.PI/180)+x*Math.sin(-roll*Math.PI/180),2*Scale,2*Scale);
  1393.                 }
  1394.             }
  1395.         }
  1396.  
  1397.         if(pitch>=0 && pitch <10){                                                              //calculate position of pitch number based on text lenght
  1398.             lenght=24*Scale;
  1399.         }else if(pitch>=10 && pitch <100){
  1400.             lenght=30*Scale;
  1401.         }else if(pitch>-10 && pitch <0){
  1402.             lenght=30*Scale;
  1403.         }else{
  1404.             lenght=36*Scale;
  1405.         }
  1406.  
  1407.         if(pitch>=0){                                                                           //draw pitch number, red when neg, blue when pos
  1408.             ctx.fillStyle = blue;
  1409.             ctx.strokeStyle = blue;
  1410.         }else{
  1411.             ctx.fillStyle = red;
  1412.             ctx.strokeStyle = red;
  1413.         }
  1414.         ctx.fillText(pitch.toFixed(1)+"°", CenterX+(Math.cos(roll*Math.PI/180)*(420*Scale+lenght)),CenterY+6*Scale+(Math.sin(roll*Math.PI/180)*430*Scale));
  1415.         ctx.strokeText(pitch.toFixed(1)+"°", CenterX+(Math.cos(roll*Math.PI/180)*(420*Scale+lenght)),CenterY+6*Scale+(Math.sin(roll*Math.PI/180)*430*Scale));
  1416.  
  1417.         ctx.lineWidth = 4*Scale;                                                                //draw wing level
  1418.         ctx.strokeStyle = blue;
  1419.         ctx.beginPath();
  1420.         ctx.moveTo(CenterX+370*Scale*Math.cos(roll*Math.PI/180), CenterY+370*Scale*Math.sin(roll*Math.PI/180));
  1421.         ctx.lineTo(CenterX+420*Scale*Math.cos(roll*Math.PI/180), CenterY+420*Scale*Math.sin(roll*Math.PI/180));
  1422.         ctx.stroke();
  1423.         ctx.beginPath();
  1424.         ctx.moveTo(CenterX-370*Scale*Math.cos(roll*Math.PI/180), CenterY-370*Scale*Math.sin(roll*Math.PI/180));
  1425.         ctx.lineTo(CenterX-420*Scale*Math.cos(roll*Math.PI/180), CenterY-420*Scale*Math.sin(roll*Math.PI/180));
  1426.         ctx.stroke();
  1427.  
  1428.         ctx.font = 14*Scale+'pt Courier New';                                                   //draw roll indicator
  1429.         ctx.lineWidth = 2*Scale;
  1430.         ctx.fillStyle = blue;
  1431.         ctx.strokeStyle = blue;
  1432.         ctx.textAlign = 'center';
  1433.  
  1434.         print = roll;
  1435.  
  1436.         if(print>=0 && print <10){                                                              //calculate position of roll number based on text lenght
  1437.             lenght=24*Scale;
  1438.         }else if(print>=10 && print <100){
  1439.             lenght=30*Scale;
  1440.         }else if(print>-10 && print <0){
  1441.             lenght=30*Scale;
  1442.         }else if(print>=100){
  1443.             lenght=36*Scale;
  1444.         }else if(print>-100 && print <=-10){
  1445.             lenght=36*Scale;
  1446.         }else{
  1447.             lenght=42*Scale;
  1448.         }
  1449.  
  1450.         if(roll<-4 || roll>4){                                                                  //draw roll number except close to 0, 90, 180, -90
  1451.             if(roll<85 || roll>95){
  1452.                 if(roll>-85 || roll<-95){
  1453.                     if(roll<176){
  1454.                         if(roll>-176){
  1455.                             ctx.fillText(print.toFixed(1)+"°", CenterX-(Math.cos(roll*Math.PI/180))*(360*Scale-lenght), CenterY+6*Scale-(Math.sin(roll*Math.PI/180))*350*Scale);
  1456.                             ctx.strokeText(print.toFixed(1)+"°", CenterX-(Math.cos(roll*Math.PI/180))*(360*Scale-lenght), CenterY+6*Scale-(Math.sin(roll*Math.PI/180))*350*Scale);
  1457.                         }
  1458.                     }
  1459.                 }
  1460.             }
  1461.         }
  1462.  
  1463.         if(roll>0){                                                                             //draw roll degree dots
  1464.             s =5*Scale;
  1465.             for(i=0;i<roll;i++){
  1466.                 ctx.fillStyle = lblue;
  1467.                 ctx.fillRect(CenterX-1*Scale-(Math.cos(i*Math.PI/180))*(r-s), CenterY-1*Scale-(Math.sin(i*Math.PI/180))*(r-s), 2*Scale, 2*Scale);
  1468.             }
  1469.         }else if(roll<0){
  1470.             s =5*Scale;
  1471.             for(i=0;i<-roll;i++){
  1472.                 ctx.fillStyle = lblue;
  1473.                 ctx.fillRect(CenterX-1*Scale-(Math.cos(-i*Math.PI/180))*(r-s), CenterY-1*Scale-(Math.sin(-i*Math.PI/180))*(r-s), 2*Scale, 2*Scale);
  1474.             }
  1475.         }else{
  1476.         }
  1477.  
  1478.         ctx.strokeStyle = lblue;
  1479.         for(i=0; i<36;i++){                                                                     //draw roll marks 0, 90, 180, -90
  1480.             ctx.beginPath();
  1481.             if(i==0 || i==9 || i==18 || i==27){
  1482.                 ctx.moveTo(CenterX-(r-1*Scale)*Math.cos(i*10*Math.PI/180), CenterY-(r-1*Scale)*Math.sin(i*10*Math.PI/180));
  1483.                 ctx.lineTo(CenterX-(r-30*Scale)*Math.cos(i*10*Math.PI/180), CenterY-(r-30*Scale)*Math.sin(i*10*Math.PI/180));
  1484.             }else{
  1485.                 ctx.moveTo(CenterX-(r-1*Scale)*Math.cos(i*10*Math.PI/180), CenterY-(r-1*Scale)*Math.sin(i*10*Math.PI/180));
  1486.                 ctx.lineTo(CenterX-(r-20*Scale)*Math.cos(i*10*Math.PI/180), CenterY-(r-20*Scale)*Math.sin(i*10*Math.PI/180));
  1487.             }
  1488.             ctx.stroke();
  1489.         }
  1490.         for(i=0; i<36;i++){                                                                     //draw roll marks 10°
  1491.             ctx.beginPath();
  1492.             ctx.moveTo(CenterX-(r-1*Scale)*Math.cos((i+0.5)*10*Math.PI/180), CenterY-(r-1*Scale)*Math.sin((i+0.5)*10*Math.PI/180));
  1493.             ctx.lineTo(CenterX-(r-10*Scale)*Math.cos((i+0.5)*10*Math.PI/180), CenterY-(r-10*Scale)*Math.sin((i+0.5)*10*Math.PI/180));
  1494.             ctx.stroke();
  1495.         }
  1496.         for(i=-1; i<3;i++){                                                                     //draw roll text 0, 90, 180, -90
  1497.             ctx.font = 14*Scale+'pt Courier New';
  1498.             ctx.fillStyle = lblue;
  1499.             ctx.lineWidth = 1*Scale;
  1500.             ctx.strokeStyle = lblue;
  1501.             ctx.textAlign = 'center';
  1502.             ctx.fillText(i*90+"°", CenterX-(r-50*Scale)*Math.cos(i*90*Math.PI/180), CenterY+6*Scale-(r-44*Scale)*Math.sin(i*90*Math.PI/180));
  1503.             ctx.strokeText(i*90+"°", CenterX-(r-50*Scale)*Math.cos(i*90*Math.PI/180), CenterY+6*Scale-(r-44*Scale)*Math.sin(i*90*Math.PI/180));
  1504.         }
  1505.  
  1506.         ctx.lineWidth = 2*Scale;                                                                //draw outer ring
  1507.         ctx.strokeStyle = blue;
  1508.         ctx.beginPath();
  1509.         ctx.arc(CenterX, CenterY, 400*Scale, 0, 2 * Math.PI, false);
  1510.         ctx.stroke();
  1511.  
  1512.         for(i=0;i<=3;i++){                                                                      //draw center indicator
  1513.             ctx.beginPath();
  1514.             ctx.moveTo(CenterX,CenterY);
  1515.             ctx.lineTo(CenterX-60*Scale*Math.cos(i*0.5*Math.PI)+4*Math.sin(i*0.5*Math.PI),CenterY-60*Scale*Math.sin(i*0.5*Math.PI)+4*Math.cos(i*0.5*Math.PI));
  1516.             ctx.lineTo(CenterX-60*Scale*Math.cos(i*0.5*Math.PI)-4*Math.sin(i*0.5*Math.PI),CenterY-60*Scale*Math.sin(i*0.5*Math.PI)-4*Math.cos(i*0.5*Math.PI));
  1517.             ctx.closePath();
  1518.             ctx.fillStyle=white.slice(0,-3)+",0.25)";
  1519.             ctx.fill();
  1520.         }   //end draw_center
  1521.  
  1522.         if(Math.abs(SpdHor)>0.01 || Math.abs(SpdVert)>0.01){                                    //draw pro and retrograde marker when moving
  1523.             draw_prograde(Pitch, Yaw, Roll, PPitch, PYaw);
  1524.             draw_retro(Pitch, Yaw, Roll, PPitch, PYaw);
  1525.         }
  1526.  
  1527.         if(Tar!="No Target Selected."){                                                         //draw target marker when selected !!NOT IMPLEMENTED!!
  1528.             //draw_target(Pitch, Yaw, Roll, TPitch, TYaw, TDist);
  1529.             //draw_antitarget(Pitch, Yaw, Roll, TPitch, TYaw, TDist);
  1530.         }
  1531.  
  1532.         function draw_prograde(pitch, yaw, roll, ppitch, pyaw){                                 //draw prograde marker
  1533.             var dyaw = 0;
  1534.             var droll = 0;
  1535.             var dpitch = 0;
  1536.  
  1537.             PYaw = pyaw;
  1538.             PRoll = 0;
  1539.             PPitch = ppitch;
  1540.  
  1541.             dyaw = yaw - PYaw;
  1542.  
  1543.  
  1544.             droll = roll - PRoll;                                                               //calculate angle difference
  1545.             dpitch = pitch - PPitch;
  1546.             if(dpitch<-90){
  1547.                 dpitch+=180;
  1548.             }
  1549.             var r = 320*Scale;
  1550.             var x = 0;
  1551.             var y = 0;
  1552.             var l = 40*Scale;
  1553.             var k = 10*Scale;
  1554.             var d = 10*Scale;
  1555.             var rad = 60*Scale;
  1556.  
  1557.  
  1558.             if(Math.sqrt(dpitch*dpitch+dyaw*dyaw)<32){                                          //draw big or small marker
  1559.                 rad = 30*Scale;                                                                 //draw big marker when in view
  1560.                 x = CenterX-dpitch*d*Math.sin(droll*Math.PI/180)-dyaw*d*Math.cos(droll*Math.PI/180);
  1561.                 y = CenterY+dpitch*d*Math.cos(droll*Math.PI/180)-dyaw*d*Math.sin(droll*Math.PI/180);
  1562.                 ctx.lineWidth = 2*Scale;
  1563.                 ctx.strokeStyle = white;
  1564.                 ctx.fillStyle = white;
  1565.                 ctx.beginPath();
  1566.                 ctx.arc(x, y, rad, 0, 2 * Math.PI, false);
  1567.                 ctx.stroke();
  1568.                 for(i=0;i<=3;i++){
  1569.                     ctx.beginPath();
  1570.                     ctx.moveTo(x-(rad+5*Scale)*Math.cos(i*90*Math.PI/180), y-(rad+5*Scale)*Math.sin(i*90*Math.PI/180));
  1571.                     ctx.lineTo(x-(rad-5*Scale)*Math.cos(i*90*Math.PI/180), y-(rad-5*Scale)*Math.sin(i*90*Math.PI/180));
  1572.                     ctx.stroke();
  1573.                 }
  1574.                 ctx.fillRect(x-1*Scale, y-1*i*Scale, 2*Scale, 2*Scale);
  1575.             }else if(Math.abs(dpitch)<=95 && Math.abs(dyaw)<=95){                               //draw small marker and arrow when out of view
  1576.                 rad = 10*Scale;
  1577.                 ctx.lineWidth = 2*Scale;
  1578.                 ctx.strokeStyle = white;
  1579.                 ctx.fillStyle = white;
  1580.                 x = calc_x(r, 0, 0);
  1581.                 y = calc_y(r, 0, 0);
  1582.                 ctx.beginPath();
  1583.                 ctx.arc(x, y, rad, 0, 2 * Math.PI, false);
  1584.                 ctx.stroke();
  1585.                 for(i=0;i<=3;i++){
  1586.                     ctx.beginPath();
  1587.                     ctx.moveTo(x-(rad+3*Scale)*Math.cos(i*90*Math.PI/180), y-(rad+3*Scale)*Math.sin(i*90*Math.PI/180));
  1588.                     ctx.lineTo(x-(rad-3*Scale)*Math.cos(i*90*Math.PI/180), y-(rad-3*Scale)*Math.sin(i*90*Math.PI/180));
  1589.                     ctx.stroke();
  1590.                     ctx.fillRect(x-1*Scale, y-1*Scale, Scale, Scale);
  1591.                 }
  1592.                 ctx.beginPath();
  1593.                 x = calc_x(r+70*Scale, 0, 0);
  1594.                 y = calc_y(r+70*Scale, 0, 0);
  1595.                 ctx.moveTo(x,y);
  1596.                 x = calc_x(r+70*Scale, 50*Scale, 1);
  1597.                 y = calc_y(r+70*Scale, 50*Scale, 1);
  1598.                 ctx.lineTo(x,y);
  1599.                 x = calc_x(r+70*Scale, 50*Scale, -1);
  1600.                 y = calc_y(r+70*Scale, 50*Scale, -1);
  1601.                 ctx.lineTo(x,y);
  1602.                 ctx.closePath();
  1603.                 ctx.fill();
  1604.  
  1605.                 function calc_x(rad, t, w){                                                     //calculate x-position
  1606.                     var x = 0;
  1607.                     var a = 0;
  1608.                     var b = 0;
  1609.                     a = ((rad-t)*dyaw)/Math.sqrt(dpitch*dpitch+dyaw*dyaw);
  1610.                     b = ((rad-t)*dpitch)/Math.sqrt(dpitch*dpitch+dyaw*dyaw);
  1611.                     x = CenterX-(a*Math.cos((w+droll)*Math.PI/180)+(b*Math.sin((w+droll)*Math.PI/180)));
  1612.                     return x;
  1613.                 }
  1614.  
  1615.                 function calc_y(rad, t, w){                                                     //calculate y-position
  1616.                     var y = 0;
  1617.                     var a = 0;
  1618.                     var b = 0;
  1619.                     a = ((rad-t)*dyaw)/Math.sqrt(dpitch*dpitch+dyaw*dyaw);
  1620.                     b = ((rad-t)*dpitch)/Math.sqrt(dpitch*dpitch+dyaw*dyaw);
  1621.                     y = CenterY+(b*Math.cos((w+droll)*Math.PI/180)-(a*Math.sin((w+droll)*Math.PI/180)));
  1622.                     return y;
  1623.                 }
  1624.  
  1625.             }
  1626.         }   //end draw_pro
  1627.  
  1628.         function draw_retro(pitch, yaw, roll, ppitch, pyaw){                                    //draw retrograde marker
  1629.             var dyaw = 0;
  1630.             var droll = 0;
  1631.             var dpitch = 0;
  1632.             var rpitch = 0;
  1633.             var rroll = 0;
  1634.             var ryaw = 0;
  1635.             var d = 10*Scale;
  1636.  
  1637.             PYaw = pyaw;
  1638.             PRoll = 0;
  1639.             PPitch = ppitch;
  1640.  
  1641.             RPitch = -PPitch;
  1642.             RRoll = PRoll;
  1643.             RYaw = PYaw +180;
  1644.             if(RYaw > 360){
  1645.                 RYaw-=360;
  1646.             }
  1647.  
  1648.             dyaw = yaw - RYaw;                                                                  //calculate angle difference
  1649.             droll = roll - RRoll;
  1650.             dpitch = pitch - RPitch;
  1651.  
  1652.             var r = 320*Scale;
  1653.             var a = 0;
  1654.             var b = 0;
  1655.  
  1656.             if(Math.sqrt(dpitch*dpitch+dyaw*dyaw)<32){                                          //draw big or small marker
  1657.                 rad = 30*Scale;                                                                 //draw big marker when in view
  1658.                 x = CenterX-dpitch*d*Math.sin(droll*Math.PI/180)-dyaw*d*Math.cos(droll*Math.PI/180);
  1659.                 y = CenterY+dpitch*d*Math.cos(droll*Math.PI/180)-dyaw*d*Math.sin(droll*Math.PI/180);
  1660.                 ctx.lineWidth = 2*Scale;
  1661.                 ctx.strokeStyle = white;
  1662.                 ctx.fillStyle = white;
  1663.                 ctx.beginPath();
  1664.                 ctx.arc(x, y, rad, 0, 2 * Math.PI, false);
  1665.                 ctx.stroke();
  1666.                 for(i=0;i<=1;i++){
  1667.                     ctx.moveTo(x-(rad+5*Scale)*Math.cos((i+0.5)*90*Math.PI/180), y+(rad+5*Scale)*Math.sin((i+0.5)*90*Math.PI/180));
  1668.                     ctx.lineTo(x+(rad+5*Scale)*Math.cos((i+0.5)*90*Math.PI/180), y-(rad+5*Scale)*Math.sin((i+0.5)*90*Math.PI/180));
  1669.                     ctx.stroke();
  1670.                 }
  1671.  
  1672.             }else if(Math.abs(dpitch)<=95 && Math.abs(dyaw)<=95){                               //draw small marker and arrow when out of view
  1673.                 x = calc_x(r, 0, 0);
  1674.                 y = calc_y(r, 0, 0);
  1675.  
  1676.                 rad = 10*Scale;
  1677.                 ctx.lineWidth = 2*Scale;
  1678.                 ctx.strokeStyle = white;
  1679.                 ctx.fillStyle = white;
  1680.                 ctx.beginPath();
  1681.                 ctx.arc(x, y, rad, 0, 2 * Math.PI, false);
  1682.                 ctx.stroke();
  1683.                 for(i=0;i<=1;i++){
  1684.                     ctx.beginPath();
  1685.                     ctx.moveTo(x-(rad+3*Scale)*Math.cos((i+0.5)*90*Math.PI/180), y+(rad+3*Scale)*Math.sin((i+0.5)*90*Math.PI/180));
  1686.                     ctx.lineTo(x+(rad+3*Scale)*Math.cos((i+0.5)*90*Math.PI/180), y-(rad+3*Scale)*Math.sin((i+0.5)*90*Math.PI/180));
  1687.                     ctx.stroke();
  1688.                 }
  1689.  
  1690.                 ctx.beginPath();
  1691.                 x = calc_x(r+70*Scale, 0, 0);
  1692.                 y = calc_y(r+70*Scale, 0, 0);
  1693.                 ctx.moveTo(x,y);
  1694.                 x = calc_x(r+70*Scale, 50*Scale, 1);
  1695.                 y = calc_y(r+70*Scale, 50*Scale, 1);
  1696.                 ctx.lineTo(x,y);
  1697.                 x = calc_x(r+70*Scale, 50*Scale, -1);
  1698.                 y = calc_y(r+70*Scale, 50*Scale, -1);
  1699.                 ctx.lineTo(x,y);
  1700.                 ctx.f;
  1701.                 ctx.fill();
  1702.  
  1703.                 function calc_x(rad, t, w){                                                     //calculate x position
  1704.                     var x = 0;
  1705.                     var a = 0;
  1706.                     var b = 0;
  1707.                     a = ((rad-t)*dyaw)/Math.sqrt(dpitch*dpitch+dyaw*dyaw);
  1708.                     b = ((rad-t)*dpitch)/Math.sqrt(dpitch*dpitch+dyaw*dyaw);
  1709.                     x = CenterX-(a*Math.cos((w+droll)*Math.PI/180)+(b*Math.sin((w+droll)*Math.PI/180)));
  1710.                     return x;
  1711.                 }
  1712.  
  1713.                 function calc_y(rad, t, w){                                                     //calculate y position
  1714.                     var y = 0;
  1715.                     var a = 0;
  1716.                     var b = 0;
  1717.                     a = ((rad-t)*dyaw)/Math.sqrt(dpitch*dpitch+dyaw*dyaw);
  1718.                     b = ((rad-t)*dpitch)/Math.sqrt(dpitch*dpitch+dyaw*dyaw);
  1719.                     y = CenterY+(b*Math.cos((w+droll)*Math.PI/180)-(a*Math.sin((w+droll)*Math.PI/180)));
  1720.                     return y;
  1721.                 }
  1722.             }else{
  1723.             }
  1724.         }   //end draw_retro
  1725.  
  1726.         function draw_target(pitch, yaw, roll, tpitch, tyaw, tdist){                            //draw target marker
  1727.             var dyaw = 0;
  1728.             var droll = 0;
  1729.             var dpitch = 0;
  1730.             var print = 0;
  1731.             var unit ="";
  1732.  
  1733.             if(tdist > 9999999){                                                                //calculate unit and exponent of distance
  1734.                 exponent = 1000000;
  1735.                 unit = "Mm";
  1736.             }else if(tdist>9999 && tdist <= 9999999){
  1737.                 exponent = 1000;
  1738.                 unit = "km";
  1739.             }else{
  1740.                 exponent = 1;
  1741.                 unit = "m";
  1742.             }
  1743.  
  1744.             print = tdist/exponent;
  1745.             PYaw = tyaw;
  1746.             PRoll = 0;
  1747.             PPitch = tpitch;
  1748.  
  1749.             dyaw = yaw - PYaw;
  1750.  
  1751.  
  1752.             droll = roll - PRoll;                                                               //calculate angle difference
  1753.             dpitch = pitch - PPitch;
  1754.             if(dpitch<-90){
  1755.                 dpitch+=180;
  1756.             }
  1757.             var r = 320*Scale;
  1758.             var x = 0;
  1759.             var y = 0;
  1760.             var l = 40*Scale;
  1761.             var k = 10*Scale;
  1762.             var d = 10*Scale;
  1763.             var rad = 60*Scale;
  1764.  
  1765.             if(Math.sqrt(dpitch*dpitch+dyaw*dyaw)<32){                                          //draw big or small marker and distance
  1766.                 rad = 30*Scale;                                                                 //draw big marker and distance when in view
  1767.                 x = CenterX-dpitch*d*Math.sin(droll*Math.PI/180)-dyaw*d*Math.cos(droll*Math.PI/180);
  1768.                 y = CenterY+dpitch*d*Math.cos(droll*Math.PI/180)-dyaw*d*Math.sin(droll*Math.PI/180);
  1769.                 ctx.lineWidth = 2*Scale;
  1770.                 ctx.strokeStyle = blue;
  1771.                 ctx.fillStyle = blue;
  1772.                 ctx.beginPath();
  1773.                 ctx.arc(x, y, rad, 0, 2 * Math.PI, false);
  1774.                 ctx.stroke();
  1775.                 for(i=0;i<=3;i++){
  1776.                     ctx.moveTo(x-(rad+5*Scale)*Math.cos(i*90*Math.PI/180), y-(rad+5*Scale)*Math.sin(i*90*Math.PI/180));
  1777.                     ctx.lineTo(x-(rad-5*Scale)*Math.cos(i*90*Math.PI/180), y-(rad-5*Scale)*Math.sin(i*90*Math.PI/180));
  1778.                     ctx.stroke();
  1779.                 }
  1780.                 ctx.fillRect(x-1*Scale, y-1*i*Scale, 2*Scale, 2*Scale);
  1781.  
  1782.                 ctx.font = 14*Scale+'pt Courier New';
  1783.                 ctx.fillStyle = blue;
  1784.                 ctx.lineWidth = 1*Scale;
  1785.                 ctx.strokeStyle = blue;
  1786.                 ctx.textAlign = 'center';
  1787.                 ctx.fillText(print.toFixed(1)+unit, CenterX-dpitch*10*Math.sin(droll*Math.PI/180)-dyaw*10*Math.cos(droll*Math.PI/180),CenterY+40+dpitch*10*Math.cos(droll*Math.PI/180)-dyaw*10*Math.sin(droll*Math.PI/180));
  1788.                 ctx.strokeText(print.toFixed(1)+unit, CenterX-dpitch*10*Math.sin(droll*Math.PI/180)-dyaw*10*Math.cos(droll*Math.PI/180),CenterY+40+dpitch*10*Math.cos(droll*Math.PI/180)-dyaw*10*Math.sin(droll*Math.PI/180));
  1789.  
  1790.             }else if(Math.abs(dpitch)<=95 && Math.abs(dyaw)<=95){                               //draw small marker, arrow and distance when out of view
  1791.                 rad = 10*Scale;
  1792.                 ctx.lineWidth = 2*Scale;
  1793.                 ctx.strokeStyle = blue;
  1794.                 ctx.fillStyle = blue;
  1795.                 x = calc_x(r, 0, 0);
  1796.                 y = calc_y(r, 0, 0);
  1797.                 ctx.beginPath();
  1798.                 ctx.arc(x, y, rad, 0, 2 * Math.PI, false);
  1799.                 ctx.stroke();
  1800.                 for(i=0;i<=3;i++){
  1801.                     ctx.beginPath();
  1802.                     ctx.moveTo(x-(rad+5*Scale)*Math.cos(i*90*Math.PI/180), y-(rad+5*Scale)*Math.sin(i*90*Math.PI/180));
  1803.                     ctx.lineTo(x-(rad-5*Scale)*Math.cos(i*90*Math.PI/180), y-(rad-5*Scale)*Math.sin(i*90*Math.PI/180));
  1804.                     ctx.stroke();
  1805.                     ctx.fillRect(x-1*Scale, y-1*Scale, Scale, Scale);
  1806.                 }
  1807.                 ctx.beginPath();
  1808.                 x = calc_x(r+70*Scale, 0, 0);
  1809.                 y = calc_y(r+70*Scale, 0, 0);
  1810.                 ctx.moveTo(x,y);
  1811.                 x = calc_x(r+70*Scale, 30, 1);
  1812.                 y = calc_y(r+70*Scale, 30, 1);
  1813.                 ctx.lineTo(x,y);
  1814.                 x = calc_x(r+70*Scale, 30, -1);
  1815.                 y = calc_y(r+70*Scale, 30, -1);
  1816.                 ctx.lineTo(x,y);
  1817.                 ctx.closePath();
  1818.                 ctx.fill();
  1819.  
  1820.                 ctx.font = 14*Scale+'pt Courier New';
  1821.                 ctx.fillStyle = blue;
  1822.                 ctx.lineWidth = 1*Scale;
  1823.                 ctx.strokeStyle = blue;
  1824.                 ctx.textAlign = 'center';
  1825.                 x = calc_x(r-60*Scale, 0, 0);
  1826.                 y = calc_y(r-40*Scale, 0, 0);
  1827.                 ctx.fillText(print.toFixed(1)+unit, x, y);
  1828.                 ctx.strokeText(print.toFixed(1)+unit, x, y);
  1829.  
  1830.                 function calc_x(rad, t, w){                                                     //calculate x position
  1831.                     var x = 0;
  1832.                     var a = 0;
  1833.                     var b = 0;
  1834.                     a = ((rad-t)*dyaw)/Math.sqrt(dpitch*dpitch+dyaw*dyaw);
  1835.                     b = ((rad-t)*dpitch)/Math.sqrt(dpitch*dpitch+dyaw*dyaw);
  1836.                     x = CenterX-(a*Math.cos((w+droll)*Math.PI/180)+(b*Math.sin((w+droll)*Math.PI/180)));
  1837.                     return x;
  1838.                 }
  1839.  
  1840.                 function calc_y(rad, t, w){                                                     //calculate y position
  1841.                     var y = 0;
  1842.                     var a = 0;
  1843.                     var b = 0;
  1844.                     a = ((rad-t)*dyaw)/Math.sqrt(dpitch*dpitch+dyaw*dyaw);
  1845.                     b = ((rad-t)*dpitch)/Math.sqrt(dpitch*dpitch+dyaw*dyaw);
  1846.                     y = CenterY+(b*Math.cos((w+droll)*Math.PI/180)-(a*Math.sin((w+droll)*Math.PI/180)));
  1847.                     return y;
  1848.                 }
  1849.             }
  1850.         }   //end draw_target
  1851.  
  1852.         function draw_antitarget(pitch, yaw, roll, tpitch, tyaw, tdist){                        //draw antitarget marker
  1853.             var dyaw = 0;
  1854.             var droll = 0;
  1855.             var dpitch = 0;
  1856.             var rpitch = 0;
  1857.             var rroll = 0;
  1858.             var ryaw = 0;
  1859.             var d = 10*Scale;
  1860.             var print = 0;
  1861.             var unit = "";
  1862.  
  1863.             if(tdist > 9999999){                                                                //calculate unit and exponent of distance
  1864.                 exponent = 1000000;
  1865.                 unit = "Mm";
  1866.             }else if(tdist>9999 && tdist <= 9999999){
  1867.                 exponent = 1000;
  1868.                 unit = "km";
  1869.             }else{
  1870.                 exponent = 1;
  1871.                 unit = "m";
  1872.             }
  1873.  
  1874.             print = tdist/exponent
  1875.  
  1876.             PYaw = tyaw;
  1877.             PRoll = 0;
  1878.             PPitch = tpitch;
  1879.  
  1880.             RPitch = -PPitch;
  1881.             RRoll = PRoll;
  1882.             RYaw = PYaw +180;
  1883.             if(RYaw > 360){
  1884.                 RYaw-=360;
  1885.             }
  1886.  
  1887.             dyaw = yaw - RYaw;                                                                  //calculate angle difference
  1888.             droll = roll - RRoll;
  1889.             dpitch = pitch - RPitch;
  1890.  
  1891.  
  1892.             var r = 320*Scale;
  1893.             var a = 0;
  1894.             var b = 0;
  1895.  
  1896.             if(Math.sqrt(dpitch*dpitch+dyaw*dyaw)<32){                                          //draw big or small marker and distance
  1897.                 rad = 30*Scale;                                                                 //draw big marker and distance when in view
  1898.                 x = CenterX-dpitch*d*Math.sin(droll*Math.PI/180)-dyaw*d*Math.cos(droll*Math.PI/180);
  1899.                 y = CenterY+dpitch*d*Math.cos(droll*Math.PI/180)-dyaw*d*Math.sin(droll*Math.PI/180);
  1900.                 ctx.lineWidth = 2*Scale;
  1901.                 ctx.strokeStyle =blue;
  1902.                 ctx.fillStyle = blue;
  1903.                 ctx.beginPath();
  1904.                 ctx.arc(x, y, rad, 0, 2 * Math.PI, false);
  1905.                 ctx.stroke();
  1906.                 for(i=0;i<=1;i++){
  1907.                     ctx.moveTo(x-(rad+5*Scale)*Math.cos((i+0.5)*90*Math.PI/180), y+(rad+5*Scale)*Math.sin((i+0.5)*90*Math.PI/180));
  1908.                     ctx.lineTo(x+(rad+5*Scale)*Math.cos((i+0.5)*90*Math.PI/180), y-(rad+5*Scale)*Math.sin((i+0.5)*90*Math.PI/180));
  1909.                     ctx.stroke();
  1910.                 }
  1911.  
  1912.                 ctx.font = 14*Scale+'pt Courier New';
  1913.                 ctx.fillStyle = blue;
  1914.                 ctx.lineWidth = 1*Scale;
  1915.                 ctx.strokeStyle = blue;
  1916.                 ctx.textAlign = 'center';
  1917.                 ctx.fillText(print.toFixed(1)+unit, CenterX-dpitch*10*Math.sin(droll*Math.PI/180)-dyaw*10*Math.cos(droll*Math.PI/180),CenterY+40+dpitch*10*Math.cos(droll*Math.PI/180)-dyaw*10*Math.sin(droll*Math.PI/180));
  1918.                 ctx.strokeText(print.toFixed(1)+unit, CenterX-dpitch*10*Math.sin(droll*Math.PI/180)-dyaw*10*Math.cos(droll*Math.PI/180),CenterY+40+dpitch*10*Math.cos(droll*Math.PI/180)-dyaw*10*Math.sin(droll*Math.PI/180));
  1919.  
  1920.             }else if(Math.abs(dpitch)<=95 && Math.abs(dyaw)<=95){                               //draw small marker, arrow and distance when out of view
  1921.                 x = calc_x(r, 0, 0);
  1922.                 y = calc_y(r, 0, 0);
  1923.  
  1924.                 rad = 10*Scale;
  1925.                 ctx.lineWidth = 2*Scale;
  1926.                 ctx.strokeStyle = blue;
  1927.                 ctx.fillStyle = blue;
  1928.                 ctx.beginPath();
  1929.                 ctx.arc(x, y, rad, 0, 2 * Math.PI, false);
  1930.                 ctx.stroke();
  1931.                 for(i=0;i<=1;i++){
  1932.                     ctx.moveTo(x-(rad+5*Scale)*Math.cos((i+0.5)*90*Math.PI/180), y+(rad+5*Scale)*Math.sin((i+0.5)*90*Math.PI/180));
  1933.                     ctx.lineTo(x+(rad+5*Scale)*Math.cos((i+0.5)*90*Math.PI/180), y-(rad+5*Scale)*Math.sin((i+0.5)*90*Math.PI/180));
  1934.                     ctx.stroke();
  1935.                 }
  1936.  
  1937.                 ctx.beginPath();
  1938.                 x = calc_x(r+70*Scale, 0, 0);
  1939.                 y = calc_y(r+70*Scale, 0, 0);
  1940.                 ctx.moveTo(x,y);
  1941.                 x = calc_x(r+70*Scale, 30, 1);
  1942.                 y = calc_y(r+70*Scale, 30, 1);
  1943.                 ctx.lineTo(x,y);
  1944.                 x = calc_x(r+70*Scale, 30, -1);
  1945.                 y = calc_y(r+70*Scale, 30, -1);
  1946.                 ctx.lineTo(x,y);
  1947.                 ctx.closePath();
  1948.                 ctx.fill();
  1949.  
  1950.                 ctx.font = 14*Scale+'pt Courier New';
  1951.                 ctx.fillStyle = blue;
  1952.                 ctx.lineWidth = 1*Scale;
  1953.                 ctx.strokeStyle = blue;
  1954.                 ctx.textAlign = 'center';
  1955.                 x = calc_x(r-60*Scale, 0, 0);
  1956.                 y = calc_y(r-40*Scale, 0, 0);
  1957.                 ctx.fillText(print.toFixed(1)+unit, x, y);
  1958.                 ctx.strokeText(print.toFixed(1)+unit, x, y);
  1959.  
  1960.                 function calc_x(rad, t, w){                                                     //calculate x position
  1961.                     var x = 0;
  1962.                     var a = 0;
  1963.                     var b = 0;
  1964.                     a = ((rad-t)*dyaw)/Math.sqrt(dpitch*dpitch+dyaw*dyaw);
  1965.                     b = ((rad-t)*dpitch)/Math.sqrt(dpitch*dpitch+dyaw*dyaw);
  1966.                     x = CenterX-(a*Math.cos((w+droll)*Math.PI/180)+(b*Math.sin((w+droll)*Math.PI/180)));
  1967.                     return x;
  1968.                 }
  1969.  
  1970.                 function calc_y(rad, t, w){                                                     //calculate y position
  1971.                     var y = 0;
  1972.                     var a = 0;
  1973.                     var b = 0;
  1974.                     a = ((rad-t)*dyaw)/Math.sqrt(dpitch*dpitch+dyaw*dyaw);
  1975.                     b = ((rad-t)*dpitch)/Math.sqrt(dpitch*dpitch+dyaw*dyaw);
  1976.                     y = CenterY+(b*Math.cos((w+droll)*Math.PI/180)-(a*Math.sin((w+droll)*Math.PI/180)));
  1977.                     return y;
  1978.                 }
  1979.             }
  1980.         }   //end draw_antitarget
  1981.     }   //end draw_ah
  1982.  
  1983.     function draw_buttons(){
  1984.         var canvas=document.getElementById("btn");
  1985.         var ctx=canvas.getContext("2d");
  1986.         ctx.canvas.width  = window.innerWidth;
  1987.         ctx.canvas.height = window.innerHeight;
  1988.         var BtnX = 1482*Scale;
  1989.         var BtnY = 50*Scale;
  1990.         var BWidth = 116*Scale;
  1991.         var BHeight = 50*Scale;
  1992.         var BDiffs = 10*Scale;
  1993.         var BDiffl = 20*Scale;
  1994.         var BDiffxs = 7.6*Scale;
  1995.         var BDiffxl = 50*Scale;
  1996.         var TDiff = 32*Scale;
  1997.         var SWidth = 800*Scale;
  1998.         var SHeight = 476*Scale;
  1999.         var BX = new Array(BtnX, BtnX+BWidth+BDiffs, BtnX+2*BWidth+2*BDiffs, BtnX+92*Scale, BtnX+276*Scale);
  2000.         var BY = 0;
  2001.         var SX = 1920*Scale/2-SWidth/2;
  2002.         var SY = 1080*Scale/2-SHeight/2;
  2003.         var print = "";
  2004.         var time = 0;
  2005.  
  2006.         function reset(){                                                                       //timer to prevent multiple click events and to make switches light up shortly
  2007.             rst = true;
  2008.             btn = false;
  2009.             ag = 0;
  2010.         }
  2011.  
  2012.         function Button(x, y, w, h, type, t, st){                                               //defines how each button gets drawn and what happens when clicked
  2013.             var delty = 0;
  2014.             var deltx = 0;
  2015.             canvas.addEventListener('click', doMouseDown, false);
  2016.             //ctx.clearRect(x,y,w,h);
  2017.             draw();
  2018.  
  2019.             function draw(){                                                                    //draw styles for each button
  2020.  
  2021.                 switch(type){                                                                   //button background
  2022.                     case "IndOn":
  2023.                         ctx.fillStyle=blue;
  2024.                     break;
  2025.                     case "IndOff":
  2026.                         ctx.fillStyle=blue.slice(0,-3)+",0.2)";
  2027.                     break;
  2028.                     case "Warn":
  2029.                         ctx.fillStyle=lred;
  2030.                     break;
  2031.                     case "AlarmOn":
  2032.                         ctx.fillStyle=red;
  2033.                     break;
  2034.                     case "AlarmOff":
  2035.                         ctx.fillStyle=red.slice(0,-3)+",0.2)";
  2036.                     break;
  2037.                     case "ButtonOn":
  2038.                         ctx.fillStyle=blue;
  2039.                     break;
  2040.                     case "ButtonOff":
  2041.                         ctx.fillStyle=blue.slice(0,-3)+",0.2)";
  2042.                     break;
  2043.                     case "IP":
  2044.                         ctx.fillStyle=blue;
  2045.                     break;
  2046.                     case "RATE":
  2047.                         ctx.fillStyle=blue;
  2048.                     break;
  2049.                     case "C1":
  2050.                         ctx.fillStyle=blue;
  2051.                     break;
  2052.                     case "H1":
  2053.                         ctx.fillStyle=lblue;
  2054.                     break;
  2055.                     case "BG":
  2056.                         ctx.fillStyle=bg;
  2057.                     break;
  2058.                     case "C2":
  2059.                         ctx.fillStyle=red;
  2060.                     break;
  2061.                     case "H2":
  2062.                         ctx.fillStyle=lred;
  2063.                     break;
  2064.                     case "MK":
  2065.                         ctx.fillStyle=white;
  2066.                     break;
  2067.                     case "C1R":
  2068.                         ctx.fillStyle=blue;
  2069.                     break;
  2070.                     case "H1R":
  2071.                         ctx.fillStyle=lblue;
  2072.                     break;
  2073.                     case "BGR":
  2074.                         ctx.fillStyle=bg;
  2075.                     break;
  2076.                     case "C2R":
  2077.                         ctx.fillStyle=red;
  2078.                     break;
  2079.                     case "H2R":
  2080.                         ctx.fillStyle=lred;
  2081.                     break;
  2082.                     case "MKR":
  2083.                         ctx.fillStyle=white;
  2084.                     break;
  2085.                     case "TITLE +":
  2086.                         ctx.fillStyle=bg;
  2087.                     break;
  2088.                     case "TITLE -":
  2089.                         ctx.fillStyle=bg;
  2090.                     break;
  2091.                     case "SUBTITLE":
  2092.                         ctx.fillStyle=bg;
  2093.                     break;
  2094.                     case "SUBTITLE +":
  2095.                         ctx.fillStyle=bg;
  2096.                     break;
  2097.                     case "SUBTITLE -":
  2098.                         ctx.fillStyle=bg;
  2099.                     break;
  2100.                 }
  2101.                 ctx.fillRect(x,y,w,h);
  2102.  
  2103.                 switch(type){                                                                   //button text
  2104.                     case "IndOn":
  2105.                         ctx.fillStyle = lblue;
  2106.                         ctx.strokeStyle = lblue;
  2107.                         break;
  2108.                     case "IndOff":
  2109.                         ctx.fillStyle = bg;
  2110.                         ctx.strokeStyle = bg;
  2111.                         break;
  2112.                     case "Warn":
  2113.                         ctx.fillStyle = bg;
  2114.                         ctx.strokeStyle = bg;
  2115.                         break;
  2116.                     case "AlarmOn":
  2117.                         ctx.fillStyle = bg;
  2118.                         ctx.strokeStyle = bg;
  2119.                         break;
  2120.                     case "AlarmOff":
  2121.                         ctx.fillStyle = bg;
  2122.                         ctx.strokeStyle = bg;
  2123.                         break;
  2124.                     case "ButtonOn":
  2125.                         ctx.fillStyle = bg;
  2126.                         ctx.strokeStyle = bg;
  2127.                         break;
  2128.                     case "ButtonOff":
  2129.                         ctx.fillStyle = bg;
  2130.                         ctx.strokeStyle = bg;
  2131.                         break;
  2132.                     case "IP":
  2133.                         ctx.fillStyle = setbg;
  2134.                         ctx.strokeStyle = setbg;
  2135.                         break;
  2136.                     case "RATE":
  2137.                         ctx.fillStyle = setbg;
  2138.                         ctx.strokeStyle = setbg;
  2139.                         break;
  2140.                     case "C1":
  2141.                         ctx.fillStyle = setbg;
  2142.                         ctx.strokeStyle = setbg;
  2143.                         break;
  2144.                     case "H1":
  2145.                         ctx.fillStyle = setbg;
  2146.                         ctx.strokeStyle = setbg;
  2147.                         break;
  2148.                     case "BG":
  2149.                         ctx.fillStyle = setbg;
  2150.                         ctx.strokeStyle = setbg;
  2151.                         break;
  2152.                     case "C2":
  2153.                         ctx.fillStyle = setbg;
  2154.                         ctx.strokeStyle = setbg;
  2155.                         break;
  2156.                     case "H2":
  2157.                         ctx.fillStyle = setbg;
  2158.                         ctx.strokeStyle = setbg;
  2159.                         break;
  2160.                     case "MK":
  2161.                         ctx.fillStyle = setbg;
  2162.                         ctx.strokeStyle = setbg;
  2163.                         break;
  2164.                 }
  2165.  
  2166.                 ctx.lineWidth = 1*Scale;
  2167.  
  2168.                 if(st !="" && st !="C" && st !="R"){                                            //secondary text can change position of primary text, also used as a switch to change layout
  2169.                     ctx.font = 22*Scale+'pt Courier New';
  2170.                     ctx.textAlign = "right";
  2171.                     delty = 24*Scale;
  2172.                     deltx = w - 8*Scale;
  2173.                 }else if(st == "C"){
  2174.                     ctx.font = 24*Scale+'pt Courier New';
  2175.                     ctx.textAlign = "left";
  2176.                     delty = 42*Scale;
  2177.                     deltx = 8*Scale;
  2178.                 }else{
  2179.                     ctx.font = 22*Scale+'pt Courier New';
  2180.                     ctx.textAlign = "left";
  2181.                     delty = 32*Scale;
  2182.                     deltx = 8*Scale;
  2183.                 }
  2184.                 if(st !="R"){                                                                   //color reset buttons don't have text
  2185.                     ctx.fillText(t, x+deltx, y+delty);
  2186.                     ctx.strokeText(t, x+deltx, y+delty);
  2187.                 }
  2188.  
  2189.                 if(st !="R" && st!="C"){                                                        //secondary text
  2190.                     ctx.font = 10*Scale+'pt Courier New';
  2191.                     ctx.textAlign = 'left';
  2192.                     ctx.fillText(st, x+8*Scale, y+Height-8*Scale);
  2193.                 }
  2194.  
  2195.                 if(type == "CLOSE"){                                                            //settings close button
  2196.                     ctx.fillStyle = red;
  2197.                     ctx.fillRect(x, y, 20*Scale, 20*Scale);
  2198.                     ctx.strokeStyle = lred;
  2199.                     ctx.lineWidth = 2*Scale;
  2200.                     ctx.beginPath();
  2201.                     ctx.moveTo(x+4*Scale, y+4*Scale);
  2202.                     ctx.lineTo(x+16*Scale, y+16*Scale);
  2203.                     ctx.stroke();
  2204.                     ctx.beginPath();
  2205.                     ctx.moveTo(x+4*Scale, y+16*Scale);
  2206.                     ctx.lineTo(x+16*Scale, y+4*Scale);
  2207.                     ctx.stroke();
  2208.                 }
  2209.                 if(type == "TITLE +"){                                                          //clickable titles to change display mode
  2210.                     ctx.clearRect(x,y,x+w,y+h);
  2211.                     ctx.lineWidth = 1*Scale;
  2212.                     ctx.strokeStyle = red;
  2213.                     ctx.fillStyle = red;
  2214.                     ctx.font = 24*Scale+'pt Courier New';
  2215.                     ctx.textAlign = 'left';
  2216.                     ctx.fillText(t, x, y+28*Scale);
  2217.                     ctx.strokeText(t, x, y+28*Scale);
  2218.                     ctx.fillText("[+]", x+3*BWidth-3*BDiffs, y+28*Scale);
  2219.                     ctx.strokeText("[+]", x+3*BWidth-3*BDiffs, y+28*Scale);
  2220.                     ctx.lineWidth = 2*Scale;
  2221.                     ctx.strokeStyle = blue.slice(0,-3)+",0.2)";
  2222.                     ctx.beginPath();
  2223.                     ctx.moveTo(x, y+40*Scale);
  2224.                     ctx.lineTo(x+3*BWidth+2*BDiffs, y+40*Scale);
  2225.                     ctx.stroke();
  2226.                 }
  2227.                 if(type == "TITLE -"){                                                          //clickable titles to change display mode
  2228.                     ctx.clearRect(x,y,x+w,y+h);
  2229.                     ctx.lineWidth = 1*Scale;
  2230.                     ctx.strokeStyle = red;
  2231.                     ctx.fillStyle = red;
  2232.                     ctx.font = 24*Scale+'pt Courier New';
  2233.                     ctx.textAlign = 'left';
  2234.                     ctx.fillText(t, x, y+28*Scale);
  2235.                     ctx.strokeText(t, x, y+28*Scale);
  2236.                     ctx.fillText("[-]", x+3*BWidth-3*BDiffs, y+28*Scale);
  2237.                     ctx.strokeText("[-]", x+3*BWidth-3*BDiffs, y+28*Scale);
  2238.                     ctx.lineWidth = 2*Scale;
  2239.                     ctx.strokeStyle = blue.slice(0,-3)+",0.2)";
  2240.                     ctx.beginPath();
  2241.                     ctx.moveTo(x, y+40*Scale);
  2242.                     ctx.lineTo(x+3*BWidth+2*BDiffs, y+40*Scale);
  2243.                     ctx.stroke();
  2244.                 }
  2245.                 if(type == "SUBTITLE +"){                                                       //clickable subtitles to change display mode
  2246.                     ctx.clearRect(x,y,x+w,y+h);
  2247.                     ctx.lineWidth = 1*Scale;
  2248.                     ctx.strokeStyle = red.slice(0,-3)+",0.5)";
  2249.                     ctx.fillStyle = red.slice(0,-3)+",0.5)";
  2250.                     ctx.font = 20*Scale+'pt Courier New';
  2251.                     ctx.textAlign = 'left';
  2252.                     ctx.fillText(t, x, y+16*Scale);
  2253.                     ctx.strokeText(t, x, y+16*Scale);
  2254.                     ctx.fillText("[+]", x+3*BWidth-2*BDiffs, y+16*Scale);
  2255.                     ctx.strokeText("[+]", x+3*BWidth-2*BDiffs, y+16*Scale);
  2256.                     ctx.lineWidth = 2*Scale;
  2257.                     ctx.strokeStyle = blue.slice(0,-3)+",0.2)";
  2258.                     ctx.beginPath();
  2259.                     ctx.moveTo(x, y+28*Scale);
  2260.                     ctx.lineTo(x+3*BWidth+2*BDiffs, y+28*Scale);
  2261.                     ctx.stroke();
  2262.                 }
  2263.                 if(type == "SUBTITLE -"){                                                           //clickable subtitles to change display mode
  2264.                     ctx.clearRect(x,y,x+w,y+h);
  2265.                     ctx.lineWidth = 1*Scale;
  2266.                     ctx.strokeStyle = red.slice(0,-3)+",0.5)";
  2267.                     ctx.fillStyle = red.slice(0,-3)+",0.5)";
  2268.                     ctx.font = 20*Scale+'pt Courier New';
  2269.                     ctx.textAlign = 'left';
  2270.                     ctx.fillText(t, x, y+16*Scale);
  2271.                     ctx.strokeText(t, x, y+16*Scale);
  2272.                     ctx.fillText("[-]", x+3*BWidth-2*BDiffs, y+16*Scale);
  2273.                     ctx.strokeText("[-]", x+3*BWidth-2*BDiffs, y+16*Scale);
  2274.                     ctx.lineWidth = 2*Scale;
  2275.                     ctx.strokeStyle = blue.slice(0,-3)+",0.2)";
  2276.                     ctx.beginPath();
  2277.                     ctx.moveTo(x, y+28*Scale);
  2278.                     ctx.lineTo(x+3*BWidth+2*BDiffs, y+28*Scale);
  2279.                     ctx.stroke();
  2280.                 }
  2281.                 if(type == "SUBTITLE"){                                                         //nonclickable subtitle
  2282.                     ctx.clearRect(x,y,x+w,y+h);
  2283.                     ctx.lineWidth = 1*Scale;
  2284.                     ctx.strokeStyle = red.slice(0,-3)+",0.5)";
  2285.                     ctx.fillStyle = red.slice(0,-3)+",0.5)";
  2286.                     ctx.font = 20*Scale+'pt Courier New';
  2287.                     ctx.textAlign = 'left';
  2288.                     ctx.fillText(t, x, y+16*Scale);
  2289.                     ctx.strokeText(t, x, y+16*Scale);
  2290.                     ctx.lineWidth = 2*Scale;
  2291.                     ctx.strokeStyle = blue.slice(0,-3)+",0.2)";
  2292.                     ctx.beginPath();
  2293.                     ctx.moveTo(x, y+28*Scale);
  2294.                     ctx.lineTo(x+3*BWidth+2*BDiffs, y+28*Scale);
  2295.                     ctx.stroke();
  2296.                 }
  2297.             }
  2298.  
  2299.             function doMouseDown(event){                                                        //what happens when clicked
  2300.                 var mx;
  2301.                 var my;
  2302.                 mx = event.clientX;
  2303.                 my = event.clientY;
  2304.                 if((mx >= x && my >= y) && (mx <= (x+w) && my <= (y+h))){                       //click on button check
  2305.                     if(set==false){                                                             //settings menu off
  2306.                         if(t == "CON"){                                                         //show menu
  2307.                             set = true;
  2308.                         }                                                                   //----CHANGE DISPLAY MODES----
  2309.                         if(st == "ATT" && disp == 1 && rst==true){                                          //ATTITUDE CONTROL
  2310.                             disp =2;
  2311.                         }
  2312.                         if(st == "SYS" && disp == 1){                                           //SYSTEM
  2313.                             disp =3;
  2314.                         }
  2315.                         if(st == "STAT" && disp == 1){                                          //STATUS
  2316.                             disp =4;
  2317.                         }
  2318.                         if(st == "ATT2" && disp == 2){                                          //MIXED DISPLAY
  2319.                             disp =1;
  2320.                         }
  2321.                         if(st == "SYS2" && (disp == 3 || disp == 5)){                           //MIXED DISPLAY
  2322.                             disp =1;
  2323.                         }
  2324.                         if(st == "STAT2" && disp == 4){                                         //MIXED DISPLAY
  2325.                             disp =1;
  2326.                         }
  2327.                         if(st == "ORB" && disp == 3){                                           //ORBIT MAP
  2328.                             disp = 5
  2329.                         }
  2330.                         if(st == "ORB2" && disp == 5){                                                      //STATUS
  2331.                             disp = 3;
  2332.                         }
  2333.                         if(disp == 1 || disp == 2){                                             //----MECHJEB CONTROLS----
  2334.                             if(t == "ORB"){                                                         //ORB
  2335.                                 mode = 1;
  2336.                             }
  2337.                             if(t == "SURF"){                                                        //SURF
  2338.                                 mode = 2;
  2339.                             }
  2340.                             if(t == "TGT"){                                                         //TGT
  2341.                                 mode = 3;
  2342.                             }
  2343.                             if(t == "NODE"){                                                        //NODE
  2344.                                 connection.send('{"run":["mj.node"]}');
  2345.                                 mj = 19;
  2346.                             }
  2347.                             if(t == "PRO"){                                                         //PRO
  2348.                                 mj = 1;
  2349.                                 connection.send('{"run":["mj.prograde"]}');
  2350.                             }
  2351.                             if(t == "RET"){                                                         //RET
  2352.                                 mj = 2;
  2353.                                 connection.send('{"run":["mj.retrograde"]}');
  2354.                             }
  2355.                             if(t == "NML +"){                                                       //NML+
  2356.                                 mj = 3;
  2357.                                 connection.send('{"run":["mj.normalplus"]}');
  2358.                             }
  2359.                             if(t == "NML -"){                                                       //NML-
  2360.                                 mj = 4;
  2361.                                 connection.send('{"run":["mj.normalminus"]}');
  2362.                             }
  2363.                             if(t == "RAD +"){                                                       //RAD+
  2364.                                 mj = 5;
  2365.                                 connection.send('{"run":["mj.radialplus"]}');
  2366.                             }
  2367.                             if(t == "RAD -"){                                                       //RAD-
  2368.                                 mj = 6;
  2369.                                 connection.send('{"run":["mj.radialminus"]}');
  2370.                             }
  2371.                             if(t == "PIT +"){                                                       //PIT+
  2372.                                 mj = 7;
  2373.                                 connection.send('{"run":["mj.surface2[' + Yaw + "," + (Pitch-(-delt)) + "," + -Roll + ']}');
  2374.                             }
  2375.                             if(t == "PIT -"){                                                       //PIT-
  2376.                                 mj = 8;
  2377.                                 connection.send('{"run":["mj.surface2[' + Yaw + "," + (Pitch-delt) + "," + -Roll + ']}');
  2378.                             }
  2379.                             if(t == "YAW +"){                                                       //YAW+
  2380.                                 mj = 9;
  2381.                                 connection.send('{"run":["mj.surface2[' + (Yaw+delt) + "," + Pitch + "," + -Roll + ']}');
  2382.                             }
  2383.                             if(t == "YAW -"){                                                       //YAW-
  2384.                                 mj = 10;
  2385.                                 connection.send('{"run":["mj.surface2[' + (Yaw-delt) + "," + Pitch + "," + -Roll + ']}');
  2386.                             }
  2387.                             if(t == "ROL +"){                                                       //ROL+
  2388.                                 mj = 11;
  2389.                                 connection.send('{"run":["mj.surface2[' + Yaw + "," + Pitch + "," + -(Roll+delt) + ']}');
  2390.                             }
  2391.                             if(t == "ROL -"){                                                       //ROL-
  2392.                                 mj = 12;
  2393.                                 connection.send('{"run":["mj.surface2[' + Yaw + "," + Pitch + "," + -(Roll-delt) + ']}');
  2394.                             }
  2395.                             if(t == "TGT +"){                                                       //TGT+
  2396.                                 mj = 13;
  2397.                                 connection.send('{"run":["mj.targetplus"]}');
  2398.                             }
  2399.                             if(t == "TGT -"){                                                       //TGT-
  2400.                                 mj = 14;
  2401.                                 connection.send('{"run":["mj.targetminus"]}');
  2402.                             }
  2403.                             if(t == "REL +"){                                                       //REL+
  2404.                                 mj = 15;
  2405.                                 connection.send('{"run":["mj.relativeplus"]}');
  2406.                             }
  2407.                             if(t == "REL -"){                                                       //REL-
  2408.                                 mj = 16;
  2409.                                 connection.send('{"run":["mj.relativeminus"]}');
  2410.                             }
  2411.                             if(t == "PAR +"){                                                       //PAR+
  2412.                                 mj = 17;
  2413.                                 connection.send('{"run":["mj.parallelplus"]}');
  2414.                             }
  2415.                             if(t == "PAR -"){                                                       //PAR-
  2416.                                 mj = 18;
  2417.                                 connection.send('{"run":["mj.parallelminus"]}');
  2418.                             }
  2419.                             if(t == "0.1 X"){                                                       //0.1x
  2420.                                 delt = 0.1;
  2421.                             }
  2422.                             if(t == "1 X"){                                                         //1x
  2423.                                 delt = 1;
  2424.                             }
  2425.                             if(t == "10 X"){                                                        //10x
  2426.                                 delt = 10;
  2427.                             }
  2428.                         }                                                                       //----SYSTEM CONTROLS----
  2429.                         if(disp == 1 || disp == 3){                                             //----System Controls----
  2430.                             if(t == "LIGHT" && rst == true){                                        //light
  2431.                                 connection.send('{"run":["f.light"]}');
  2432.                             }
  2433.                             if(t == "GEAR" && rst == true){                                         //gear
  2434.                                 connection.send('{"run":["f.gear"]}');
  2435.                             }
  2436.                             if(t == "BRAKE" && rst == true){                                        //brake
  2437.                                 connection.send('{"run":["f.brake"]}');
  2438.                             }
  2439.                             if(t == "RCS" && rst == true){                                          //rcs
  2440.                                 connection.send('{"run":["f.rcs"]}');
  2441.                             }
  2442.                             if(t == "SAS" && rst == true){                                          //sas
  2443.                                 connection.send('{"run":["f.sas"]}');
  2444.                             }
  2445.                             if(t == "ASS" && rst == true){                                          //ass
  2446.                                 connection.send('{"run":["mj.smartassoff"]}');
  2447.                                 connection.send('{"run":["f.sas"]}');
  2448.                                 mj = 0;
  2449.                             }
  2450.                         }
  2451.                         if(t == "ABORT" && rst == true){                                        //ABORT
  2452.                             connection.send('{"run":["f.abort"]}');
  2453.                             ab = !ab;
  2454.                         }
  2455.                         if(t == "1" && btn == true){                                            //action group 1
  2456.                             connection.send('{"run":["f.ag1"]}');
  2457.                             ag = 1;
  2458.                         }
  2459.                         if(t == "2" && btn == true){                                            //action group 2
  2460.                             connection.send('{"run":["f.ag2"]}');
  2461.                             ag = 2;
  2462.                         }
  2463.                         if(t == "3" && btn == true){                                            //action group 3
  2464.                             connection.send('{"run":["f.ag3"]}');
  2465.                             ag = 3;
  2466.                         }
  2467.                         if(t == "4" && btn == true){                                            //action group 4
  2468.                             connection.send('{"run":["f.ag4"]}');
  2469.                             ag = 4;
  2470.                         }
  2471.                         if(t == "5" && btn == true){                                            //action group 5
  2472.                             connection.send('{"run":["f.ag5"]}');
  2473.                             ag = 5;
  2474.                         }
  2475.                         if(t == "6" && btn == true){                                            //action group 6
  2476.                             connection.send('{"run":["f.ag6"]}');
  2477.                             ag = 6;
  2478.                         }
  2479.                         if(t == "7" && btn == true){                                            //action group 7
  2480.                             connection.send('{"run":["f.ag7"]}');
  2481.                             ag = 7;
  2482.                         }
  2483.                         if(t == "8" && btn == true){                                            //action group 8
  2484.                             connection.send('{"run":["f.ag8"]}');
  2485.                             ag = 8;
  2486.                         }
  2487.                         if(t == "9" && btn == true){                                            //action group 9
  2488.                             connection.send('{"run":["f.ag9"]}');
  2489.                             ag = 9;
  2490.                         }
  2491.                         if(t == "10" && btn == true){                                           //action group 10
  2492.                             connection.send('{"run":["f.ag10"]}');
  2493.                             ag = 10;
  2494.                         }
  2495.                     }else{      //set == true                                               //----SETTINGS MENU----
  2496.  
  2497.                         if(type == "IP" && rst == true){                                        //ip
  2498.                             IP = prompt("IP and Port (127.0.0.1:8085)", IP);
  2499.                             localStorage.setItem('IP', IP);
  2500.                             location.reload();
  2501.                         }
  2502.                         if(type == "RATE" && rst == true){                                      //rate
  2503.                             rate = prompt("Refresh Rate in ms ", rate);
  2504.                             localStorage.setItem('Rate', rate);
  2505.                             location.reload();
  2506.                         }
  2507.                         if(type == "C1" && rst == true){                                        //color 1
  2508.                             temp = prompt("Color 1 (255, 255, 255)", blue.slice(5,-3));
  2509.                             if(check_color()!=false){
  2510.                                 blue = "rgba("+temp+",1)";
  2511.                                 localStorage.setItem('C1', temp);
  2512.                             }
  2513.                         }
  2514.                         if(type == "C1R" && rst == true){                                       //reset color 1
  2515.                             blue = bblue;
  2516.                             localStorage.setItem('C1', blue.slice(5,-3));
  2517.                         }
  2518.                         if(type == "H1" && rst == true){                                        //highlight 1
  2519.                             temp = prompt("Highlight 1 (255, 255, 255)", lblue.slice(5,-3));
  2520.                             if(check_color()!=false){
  2521.                                 lblue = "rgba("+temp+",1)";
  2522.                                 localStorage.setItem('H1', temp);
  2523.                             }
  2524.                         }
  2525.                         if(type == "H1R" && rst == true){                                       //reset highlight 1
  2526.                             lblue = blblue;
  2527.                             localStorage.setItem('H1', lblue.slice(5,-3));
  2528.                         }
  2529.                         if(type == "BG" && rst == true){                                        //background color
  2530.                         temp = prompt("Background (255, 255, 255)", bg.slice(5,-3));
  2531.                             if(check_color()!=false){
  2532.                                 bg = "rgba("+temp+",1)";
  2533.                                 localStorage.setItem('BG', temp);
  2534.                             }
  2535.                         }
  2536.                         if(type == "BGR" && rst == true){                                       //reset background color
  2537.                             bg = bbg;
  2538.                             localStorage.setItem('BG', bg.slice(5,-3));
  2539.                         }
  2540.                         if(type == "C2" && rst == true){                                        //color 2
  2541.                         temp = prompt("Color 2 (255, 255, 255)", red.slice(5,-3));
  2542.                             if(check_color()!=false){
  2543.                                 red = "rgba("+temp+",1)";
  2544.                                 localStorage.setItem('C2', temp);
  2545.                             }
  2546.                         }
  2547.                         if(type == "C2R" && rst == true){                                       //reset color 2
  2548.                             red = bred;
  2549.                             localStorage.setItem('C2', red.slice(5,-3));
  2550.                         }
  2551.                         if(type == "H2" && rst == true){                                        //highlight 2
  2552.                             temp = prompt("Highlight 2 (255, 255, 255)", lred.slice(5,-3));
  2553.                             if(check_color()!=false){
  2554.                                 lred = "rgba("+temp+",1)";
  2555.                                 localStorage.setItem('H2', temp);
  2556.                             }
  2557.                         }
  2558.                         if(type == "H2R" && rst == true){                                       //reset highlight 2
  2559.                             lred = blred;
  2560.                             localStorage.setItem('H2', lred.slice(5,-3));
  2561.                         }
  2562.                         if(type == "MK" && rst == true){                                        //marker color
  2563.                             temp = prompt("Marker (255, 255, 255)", white.slice(5,-3));
  2564.                             if(check_color()!=false){
  2565.                                 white = "rgba("+temp+",1)";
  2566.                                 localStorage.setItem('MK', temp);
  2567.                             }
  2568.                         }
  2569.                         if(type == "MKR" && rst == true){                                       //reset marker color
  2570.                             white = bwhite;
  2571.                             localStorage.setItem('MK', white.slice(5,-3));
  2572.                         }
  2573.                         if(type == "CLOSE"){                                                    //close settings
  2574.                             set=false;
  2575.                         }
  2576.                     }
  2577.                     btn = true;                                                                 //indicates that a button was clicked
  2578.                     rst = false;                                                                //prevents recognition of dublicate click events
  2579.                     timeoutID = window.setTimeout(reset, 100);                                  //timeout of 100ms to reset
  2580.  
  2581.                 }                                                                               //end if click on button
  2582.                 function check_color(){                                                         //check if input is a valid color (rgb)
  2583.                     try{                                                                        //tries to create a transparent gradient with input color,
  2584.                         var test=ctx.createLinearGradient(0,0,1,1);                             //if color is wrong format will create error message
  2585.                             test.addColorStop(0.1,blue.slice(0,-3)+",0.5)");
  2586.                             test.addColorStop(1,"rgba("+temp+",0.5)");
  2587.                     }
  2588.                     catch(err) {                                                                //catching error message,
  2589.                         alert("Color in wrong format. Change not applied.");                    //alerting user to prevent input of invalid colors
  2590.                         return false;
  2591.                     }
  2592.                 }
  2593.             }   //end doMouseDown
  2594.         }   //end button
  2595.         if (mj !=0){                                                                            //turn on ass when ass function selected
  2596.             ass = "True";
  2597.         }else{
  2598.             ass = "False";
  2599.         }
  2600.  
  2601.         if (disp<1 || disp>5){                                                                  //failsafe reset to mixed display incase something goes wrong
  2602.             disp = 1;
  2603.         }
  2604.         switch(con){                                                                            //connection&settings button
  2605.             case "true":
  2606.                 Button(100*Scale, 50*Scale, BWidth, BHeight, "ButtonOn", "CON", "");
  2607.             break;
  2608.             case "err":
  2609.                 Button(100*Scale, 50*Scale, BWidth, BHeight, "Warn", "CON", "");
  2610.             break;
  2611.             case "false":
  2612.                 Button(100*Scale, 50*Scale, BWidth, BHeight, "ButtonOff", "CON", "");
  2613.             break;
  2614.         }
  2615.  
  2616.         if(disp == 1){                                                                          //mixed display
  2617.             ctx.clearRect(BtnX, 0, 3*BWidth+2*BDiffs, WHeight);
  2618.             BY = BtnY;
  2619.             Button(BX[0], BY-20*Scale, 3*BWidth+2*BDiffs, 30*Scale,"TITLE +", "ATTITUDE CONTROL", "ATT");
  2620.             BY += TDiff;
  2621.             switch(mode){
  2622.                 case 1:
  2623.                     Button(BX[0], BY, BWidth, BHeight,"ButtonOn", "ORB", "");
  2624.                     Button(BX[1], BY, BWidth, BHeight,"ButtonOff", "SURF", "");
  2625.                     Button(BX[2], BY, BWidth, BHeight,"ButtonOff", "TGT", "");
  2626.                     BY +=BHeight+BDiffs+BDiffl;
  2627.                     if(mj == 1){
  2628.                         Button(BX[0], BY, BWidth, BHeight,"ButtonOn", "PRO", "");
  2629.                     }else{
  2630.                         Button(BX[0], BY, BWidth, BHeight,"ButtonOff", "PRO", "");
  2631.                     }
  2632.                     if(mj == 3){
  2633.                         Button(BX[1], BY, BWidth, BHeight,"ButtonOn", "NML +", "");
  2634.                     }else{
  2635.                         Button(BX[1], BY, BWidth, BHeight,"ButtonOff", "NML +", "");
  2636.                     }
  2637.                     if(mj == 5){
  2638.                         Button(BX[2], BY, BWidth, BHeight,"ButtonOn", "RAD +", "");
  2639.                     }else{
  2640.                         Button(BX[2], BY, BWidth, BHeight,"ButtonOff", "RAD +", "");
  2641.                     }
  2642.                     BY +=BHeight+BDiffs;
  2643.                     if(mj == 2){
  2644.                         Button(BX[0], BY, BWidth, BHeight,"ButtonOn", "RET", "");
  2645.                     }else{
  2646.                         Button(BX[0], BY, BWidth, BHeight,"ButtonOff", "RET", "");
  2647.                     }
  2648.                     if(mj == 4){
  2649.                         Button(BX[1], BY, BWidth, BHeight,"ButtonOn", "NML -", "");
  2650.                     }else{
  2651.                         Button(BX[1], BY, BWidth, BHeight,"ButtonOff", "NML -", "");
  2652.                     }
  2653.                     if(mj == 6){
  2654.                         Button(BX[2], BY, BWidth, BHeight,"ButtonOn", "RAD -", "");
  2655.                     }else{
  2656.                         Button(BX[2], BY, BWidth, BHeight,"ButtonOff", "RAD -", "");
  2657.                     }
  2658.                     BY +=BHeight+BDiffs;
  2659.                     if(mj == 19 && btn == true){
  2660.                         Button(BX[1], BY, BWidth, BHeight,"ButtonOn", "NODE", "");
  2661.                     }else{
  2662.                         Button(BX[1], BY, BWidth, BHeight,"ButtonOff", "NODE", "");
  2663.                     }
  2664.                 break;
  2665.                 case 2:
  2666.                     BY = BtnY+TDiff
  2667.                     Button(BX[0], BY, BWidth, BHeight,"ButtonOff", "ORB", "");
  2668.                     Button(BX[1], BY, BWidth, BHeight,"ButtonOn", "SURF", "");
  2669.                     Button(BX[2], BY, BWidth, BHeight,"ButtonOff", "TGT", "");
  2670.                     BY +=BHeight+BDiffs+BDiffl;
  2671.                     if(mj == 7 & btn == true){
  2672.                         Button(BX[0], BY, BWidth, BHeight,"ButtonOn", "PIT +", "");
  2673.                     }else{
  2674.                         Button(BX[0], BY, BWidth, BHeight,"ButtonOff", "PIT +", "");
  2675.                     }
  2676.                     if(mj == 9 & btn == true){
  2677.                         Button(BX[1], BY, BWidth, BHeight,"ButtonOn", "YAW +", "");
  2678.                     }else{
  2679.                         Button(BX[1], BY, BWidth, BHeight,"ButtonOff", "YAW +", "");
  2680.                     }
  2681.                     if(mj == 11 & btn == true){
  2682.                         Button(BX[2], BY, BWidth, BHeight,"ButtonOn", "ROL +", "");
  2683.                     }else{
  2684.                         Button(BX[2], BY, BWidth, BHeight,"ButtonOff", "ROL +", "");
  2685.                     }
  2686.                     BY +=BHeight+BDiffs;
  2687.                     if(mj == 8 & btn == true){
  2688.                         Button(BX[0], BY, BWidth, BHeight,"ButtonOn", "PIT -", "");
  2689.                     }else{
  2690.                         Button(BX[0], BY, BWidth, BHeight,"ButtonOff", "PIT -", "");
  2691.                     }
  2692.                     if(mj == 10 & btn == true){
  2693.                         Button(BX[1], BY, BWidth, BHeight,"ButtonOn", "YAW -", "");
  2694.                     }else{
  2695.                         Button(BX[1], BY, BWidth, BHeight,"ButtonOff", "YAW -", "");
  2696.                     }
  2697.                     if(mj == 12 & btn == true){
  2698.                         Button(BX[2], BY, BWidth, BHeight,"ButtonOn", "ROL -", "");
  2699.                     }else{
  2700.                         Button(BX[2], BY, BWidth, BHeight,"ButtonOff", "ROL -", "");
  2701.                     }
  2702.                     BY +=BHeight+BDiffs;
  2703.                     if(delt== 0.1){
  2704.                         Button(BX[0], BY, BWidth, BHeight,"ButtonOn", "0.1 X", "");
  2705.                         Button(BX[1], BY, BWidth, BHeight,"ButtonOff", "1 X", "");
  2706.                         Button(BX[2], BY, BWidth, BHeight,"ButtonOff", "10 X", "");
  2707.                     }else if(delt == 1){
  2708.                         Button(BX[0], BY, BWidth, BHeight,"ButtonOff", "0.1 X", "");
  2709.                         Button(BX[1], BY, BWidth, BHeight,"ButtonOn", "1 X", "");
  2710.                         Button(BX[2], BY, BWidth, BHeight,"ButtonOff", "10 X", "");
  2711.                     }else if(delt == 10){
  2712.                         Button(BX[0], BY, BWidth, BHeight,"ButtonOff", "0.1 X", "");
  2713.                         Button(BX[1], BY, BWidth, BHeight,"ButtonOff", "1 X", "");
  2714.                         Button(BX[2], BY, BWidth, BHeight,"ButtonOn", "10 X", "");
  2715.                     }
  2716.                 break;
  2717.                 case 3:
  2718.                     BY = BtnY+TDiff;
  2719.                     Button(BX[0], BY, BWidth, BHeight,"ButtonOff", "ORB", "");
  2720.                     Button(BX[1], BY, BWidth, BHeight,"ButtonOff", "SURF", "");
  2721.                     Button(BX[2], BY, BWidth, BHeight,"ButtonOn", "TGT", "");
  2722.                     BY +=BHeight+BDiffs+BDiffl;
  2723.                     if(mj == 13){
  2724.                         Button(BX[0], BY, BWidth, BHeight,"ButtonOn", "TGT +", "");
  2725.                     }else{
  2726.                         Button(BX[0], BY, BWidth, BHeight,"ButtonOff", "TGT +", "");
  2727.                     }
  2728.                     if(mj == 15){
  2729.                         Button(BX[1], BY, BWidth, BHeight,"ButtonOn", "REL +", "");
  2730.                     }else{
  2731.                         Button(BX[1], BY, BWidth, BHeight,"ButtonOff", "REL +", "");
  2732.                     }
  2733.                     if(mj == 17){
  2734.                         Button(BX[2], BY, BWidth, BHeight,"ButtonOn", "PAR +", "");
  2735.                     }else{
  2736.                         Button(BX[2], BY, BWidth, BHeight,"ButtonOff", "PAR +", "");
  2737.                     }
  2738.                     BY +=BHeight+BDiffs;
  2739.                     if(mj == 14){
  2740.                         Button(BX[0], BY, BWidth, BHeight,"ButtonOn", "TGT -", "");
  2741.                     }else{
  2742.                         Button(BX[0], BY, BWidth, BHeight,"ButtonOff", "TGT -", "");
  2743.                     }
  2744.                     if(mj == 16){
  2745.                         Button(BX[1], BY, BWidth, BHeight,"ButtonOn", "REL -", "");
  2746.                     }else{
  2747.                         Button(BX[1], BY, BWidth, BHeight,"ButtonOff", "REL -", "");
  2748.                     }
  2749.                     if(mj == 18){
  2750.                         Button(BX[2], BY, BWidth, BHeight,"ButtonOn", "PAR -", "");
  2751.                     }else{
  2752.                         Button(BX[2], BY, BWidth, BHeight,"ButtonOff", "PAR -", "");
  2753.                     }
  2754.                     BY +=BHeight+BDiffs;
  2755.                     if(mj == 19 && btn == true){
  2756.                         Button(BX[1], BY, BWidth, BHeight,"ButtonOn", "NODE", "");
  2757.                     }else{
  2758.                         Button(BX[1], BY, BWidth, BHeight,"ButtonOff", "NODE", "");
  2759.                     }
  2760.                 break
  2761.             }
  2762.             BY +=BHeight+BDiffxl;
  2763.             Button(BX[0], BY-20*Scale, 3*BWidth+2*BDiffs, 30*Scale,"TITLE +", "INFORMATION", "SYS");
  2764.             BY+=TDiff;
  2765.             if(atmo > 0){
  2766.                 Button(BX[2], BY, BWidth, BHeight,"IndOn", "ATMO", "");
  2767.             }else{
  2768.                 Button(BX[2], BY, BWidth, BHeight,"IndOff", "ATMO", "");
  2769.             }
  2770.             BY +=BHeight+BDiffs;
  2771.             if(light == "True"){
  2772.                 Button(BX[0], BY, BWidth, BHeight,"ButtonOn", "LIGHT", "");
  2773.             }else{
  2774.                 Button(BX[0], BY, BWidth, BHeight,"ButtonOff", "LIGHT", "");
  2775.             }
  2776.             if(brake == "True"){
  2777.                 Button(BX[1], BY, BWidth, BHeight,"ButtonOn", "BRAKE", "");
  2778.             }else{
  2779.                 Button(BX[1], BY, BWidth, BHeight,"ButtonOff", "BRAKE", "");
  2780.             }
  2781.             if(sas == "True"){
  2782.                 Button(BX[2], BY, BWidth, BHeight,"ButtonOn", "SAS", "");
  2783.             }else{
  2784.                 Button(BX[2], BY, BWidth, BHeight,"ButtonOff", "SAS", "");
  2785.             }
  2786.             BY +=BHeight+BDiffs;
  2787.             if(gear == "True"){
  2788.                 Button(BX[0], BY, BWidth, BHeight,"ButtonOn", "GEAR", "");
  2789.             }else{
  2790.                 Button(BX[0], BY, BWidth, BHeight,"ButtonOff", "GEAR", "");
  2791.             }
  2792.             if(rcs == "True"){
  2793.                 Button(BX[1], BY, BWidth, BHeight,"ButtonOn", "RCS", "");
  2794.             }else{
  2795.                 Button(BX[1], BY, BWidth, BHeight,"ButtonOff", "RCS", "");
  2796.             }
  2797.             if(ass == "True"){
  2798.                 Button(BX[2], BY, BWidth, BHeight,"ButtonOn", "ASS", "");
  2799.             }else{
  2800.                 Button(BX[2], BY, BWidth, BHeight,"ButtonOff", "ASS", "");
  2801.             };
  2802.             BY +=BHeight+BDiffxl;
  2803.             Button(BX[0], BY-20*Scale, 3*BWidth+2*BDiffs, 30*Scale,"TITLE +", "STATUS", "STAT");
  2804.             draw_sliders();
  2805.         }
  2806.         if(disp == 2){                                                                          //control display
  2807.             ctx.clearRect(BtnX, 0, 3*BWidth+2*BDiffs, WHeight);
  2808.             BY = BtnY;
  2809.             Button(BX[0], BY-20*Scale, 3*BWidth+2*BDiffs, 30*Scale,"TITLE -", "ATTITUDE CONTROL", "ATT2");
  2810.             BY +=BDiffl+BDiffl;
  2811.             Button(BX[0], BY, 3*BWidth+2*BDiffs, 30*Scale,"SUBTITLE", "VESSEL", "");
  2812.             BY +=2*BDiffl;
  2813.             Button(BX[0], BY, BWidth, BHeight,"IndOn", Pitch.toFixed(1), "PITCH");
  2814.             Button(BX[1], BY, BWidth, BHeight,"IndOn", Yaw.toFixed(1), "HEADING");
  2815.             Button(BX[2], BY, BWidth, BHeight,"IndOn", Roll.toFixed(1), "ROLL");
  2816.             BY +=BHeight+BDiffl+BDiffxs;
  2817.             Button(BX[0], BY, 3*BWidth+2*BDiffs, 30*Scale,"SUBTITLE", "PROGRADE", "");
  2818.             BY +=2*BDiffl;
  2819.             Button(BX[0], BY, BWidth, BHeight,"IndOn", PPitch.toFixed(1), "PITCH");
  2820.             Button(BX[1], BY, BWidth, BHeight,"IndOn", PYaw.toFixed(1), "HEADING");
  2821.             Button(BX[2], BY, BWidth, BHeight,"IndOn", PRoll.toFixed(1), "ROLL");
  2822.             BY += BHeight+BDiffl+BDiffxs;
  2823.             Button(BX[0], BY, 3*BWidth+2*BDiffs, 30*Scale,"SUBTITLE", "MODE", "");
  2824.             BY +=2*BDiffl;
  2825.             switch(mode){
  2826.                 case 1:
  2827.                     Button(BX[0], BY, BWidth, BHeight,"ButtonOn", "ORB", "");
  2828.                     Button(BX[1], BY, BWidth, BHeight,"ButtonOff", "SURF", "");
  2829.                     Button(BX[2], BY, BWidth, BHeight,"ButtonOff", "TGT", "");
  2830.                 break;
  2831.                 case 2:
  2832.                     Button(BX[0], BY, BWidth, BHeight,"ButtonOff", "ORB", "");
  2833.                     Button(BX[1], BY, BWidth, BHeight,"ButtonOn", "SURF", "");
  2834.                     Button(BX[2], BY, BWidth, BHeight,"ButtonOff", "TGT", "");
  2835.                 break;
  2836.                 case 3:
  2837.                     Button(BX[0], BY, BWidth, BHeight,"ButtonOff", "ORB", "");
  2838.                     Button(BX[1], BY, BWidth, BHeight,"ButtonOff", "SURF", "");
  2839.                     Button(BX[2], BY, BWidth, BHeight,"ButtonOn", "TGT", "");
  2840.                 break;
  2841.             }
  2842.             BY += BHeight+BDiffl+BDiffxs;
  2843.             Button(BX[0], BY, 3*BWidth+2*BDiffs, 30*Scale,"SUBTITLE", "ORBIT CONTROL", "");
  2844.             BY +=2*BDiffl;
  2845.             if(mj == 1){
  2846.                 Button(BX[0], BY, BWidth, BHeight,"ButtonOn", "PRO", "");
  2847.             }else{
  2848.                 Button(BX[0], BY, BWidth, BHeight,"ButtonOff", "PRO", "");
  2849.             }
  2850.             if(mj == 3){
  2851.                 Button(BX[1], BY, BWidth, BHeight,"ButtonOn", "NML +", "");
  2852.             }else{
  2853.                 Button(BX[1], BY, BWidth, BHeight,"ButtonOff", "NML +", "");
  2854.             }
  2855.             if(mj == 5){
  2856.                 Button(BX[2], BY, BWidth, BHeight,"ButtonOn", "RAD +", "");
  2857.             }else{
  2858.                 Button(BX[2], BY, BWidth, BHeight,"ButtonOff", "RAD +", "");
  2859.             }
  2860.             BY += BHeight+ BDiffs;
  2861.             if(mj == 2){
  2862.                 Button(BX[0], BY, BWidth, BHeight,"ButtonOn", "RET", "");
  2863.             }else{
  2864.                 Button(BX[0], BY, BWidth, BHeight,"ButtonOff", "RET", "");
  2865.             }
  2866.             if(mj == 4){
  2867.                 Button(BX[1], BY, BWidth, BHeight,"ButtonOn", "NML -", "");
  2868.             }else{
  2869.                 Button(BX[1], BY, BWidth, BHeight,"ButtonOff", "NML -", "");
  2870.             }
  2871.             if(mj == 6){
  2872.                 Button(BX[2], BY, BWidth, BHeight,"ButtonOn", "RAD -", "");
  2873.             }else{
  2874.                 Button(BX[2], BY, BWidth, BHeight,"ButtonOff", "RAD -", "");
  2875.             }
  2876.             BY += BHeight+ BDiffs;
  2877.             if(mj == 19 && btn == true){
  2878.                 Button(BX[1], BY, BWidth, BHeight,"ButtonOn", "NODE", "");
  2879.             }else{
  2880.                 Button(BX[1], BY, BWidth, BHeight,"ButtonOff", "NODE", "");
  2881.             }
  2882.             BY += BHeight+BDiffl+BDiffxs;
  2883.             Button(BX[0], BY, 3*BWidth+2*BDiffs, 30*Scale,"SUBTITLE", "SURFACE CONTROL", "");
  2884.             BY +=2*BDiffl;
  2885.             if(mj == 7 & btn == true){
  2886.                 Button(BX[0], BY, BWidth, BHeight,"ButtonOn", "PIT +", "");
  2887.             }else{
  2888.                 Button(BX[0], BY, BWidth, BHeight,"ButtonOff", "PIT +", "");
  2889.             }
  2890.             if(mj == 9 & btn == true){
  2891.                 Button(BX[1], BY, BWidth, BHeight,"ButtonOn", "YAW +", "");
  2892.             }else{
  2893.                 Button(BX[1], BY, BWidth, BHeight,"ButtonOff", "YAW +", "");
  2894.             }
  2895.             if(mj == 11 & btn == true){
  2896.                 Button(BX[2], BY, BWidth, BHeight,"ButtonOn", "ROL +", "");
  2897.             }else{
  2898.                 Button(BX[2], BY, BWidth, BHeight,"ButtonOff", "ROL +", "");
  2899.             }
  2900.             BY += BHeight+ BDiffs;
  2901.             if(mj == 8 & btn == true){
  2902.                 Button(BX[0], BY, BWidth, BHeight,"ButtonOn", "PIT -", "");
  2903.             }else{
  2904.                 Button(BX[0], BY, BWidth, BHeight,"ButtonOff", "PIT -", "");
  2905.             }
  2906.             if(mj == 10 & btn == true){
  2907.                 Button(BX[1], BY, BWidth, BHeight,"ButtonOn", "YAW -", "");
  2908.             }else{
  2909.                 Button(BX[1], BY, BWidth, BHeight,"ButtonOff", "YAW -", "");
  2910.             }
  2911.             if(mj == 12 & btn == true){
  2912.                 Button(BX[2], BY, BWidth, BHeight,"ButtonOn", "ROL -", "");
  2913.             }else{
  2914.                 Button(BX[2], BY, BWidth, BHeight,"ButtonOff", "ROL -", "");
  2915.             }
  2916.             BY += BHeight+ BDiffs;
  2917.             if(delt==0.1){
  2918.                     Button(BX[0], BY, BWidth, BHeight,"ButtonOn", "0.1 X", "");
  2919.                     Button(BX[1], BY, BWidth, BHeight,"ButtonOff", "1 X", "");
  2920.                     Button(BX[2], BY, BWidth, BHeight,"ButtonOff", "10 X", "");
  2921.             }else if(delt ==1){
  2922.                     Button(BX[0], BY, BWidth, BHeight,"ButtonOff", "0.1 X", "");
  2923.                     Button(BX[1], BY, BWidth, BHeight,"ButtonOn", "1 X", "");
  2924.                     Button(BX[2], BY, BWidth, BHeight,"ButtonOff", "10 X", "");
  2925.             }else if(delt == 10){
  2926.                     Button(BX[0], BY, BWidth, BHeight,"ButtonOff", "0.1 X", "");
  2927.                     Button(BX[1], BY, BWidth, BHeight,"ButtonOff", "1 X", "");
  2928.                     Button(BX[2], BY, BWidth, BHeight,"ButtonOn", "10 X", "");
  2929.             }
  2930.             BY += BHeight+BDiffl+BDiffxs;
  2931.             Button(BX[0], BY, 3*BWidth+2*BDiffs, 30*Scale,"SUBTITLE", "TARGET CONTROL", "");
  2932.             BY +=2*BDiffl;
  2933.             if(mj == 13){
  2934.                 Button(BX[0], BY, BWidth, BHeight,"ButtonOn", "TGT +", "");
  2935.             }else{
  2936.                 Button(BX[0], BY, BWidth, BHeight,"ButtonOff", "TGT +", "");
  2937.             }
  2938.             if(mj == 15){
  2939.                 Button(BX[1], BY, BWidth, BHeight,"ButtonOn", "REL +", "");
  2940.             }else{
  2941.                 Button(BX[1], BY, BWidth, BHeight,"ButtonOff", "REL +", "");
  2942.             }
  2943.             if(mj == 17){
  2944.                 Button(BX[2], BY, BWidth, BHeight,"ButtonOn", "PAR +", "");
  2945.             }else{
  2946.                 Button(BX[2], BY, BWidth, BHeight,"ButtonOff", "PAR +", "");
  2947.             }
  2948.             BY += BHeight+ BDiffs;
  2949.             if(mj == 14){
  2950.                 Button(BX[0], BY, BWidth, BHeight,"ButtonOn", "TGT -", "");
  2951.             }else{
  2952.                 Button(BX[0], BY, BWidth, BHeight,"ButtonOff", "TGT -", "");
  2953.             }
  2954.             if(mj == 16){
  2955.                 Button(BX[1], BY, BWidth, BHeight,"ButtonOn", "REL -", "");
  2956.             }else{
  2957.                 Button(BX[1], BY, BWidth, BHeight,"ButtonOff", "REL -", "");
  2958.             }
  2959.             if(mj == 18){
  2960.                 Button(BX[2], BY, BWidth, BHeight,"ButtonOn", "PAR -", "");
  2961.             }else{
  2962.                 Button(BX[2], BY, BWidth, BHeight,"ButtonOff", "PAR -", "");
  2963.             }
  2964.  
  2965.         }
  2966.         if(disp == 3){                                                                          //info display
  2967.             ctx.clearRect(BtnX, 0, 3*BWidth+2*BDiffs, 1080*Scale);
  2968.             BY = BtnY;
  2969.             Button(BX[0], BY-20*Scale, 3*BWidth+2*BDiffs, 30*Scale,"TITLE -", "INFORMATION", "SYS2");
  2970.             BY +=BDiffl+TDiff;
  2971.             Button(BX[0], BY, 3*BWidth+2*BDiffs, 30*Scale,"SUBTITLE", "ENVIRONMENT", "");
  2972.             BY +=2*BDiffl;
  2973.             Button(BX[0], BY, BWidth, BHeight,"IndOn", Body.toUpperCase(), "");
  2974.             if(atmo > 0){
  2975.                 Button(BX[2], BY, BWidth, BHeight,"IndOn", "ATMO", "");
  2976.             }else{
  2977.                 Button(BX[2], BY, BWidth, BHeight,"IndOff", "ATMO", "");
  2978.             }
  2979.             BY +=BHeight+BDiffl+BDiffs;
  2980.             Button(BX[0], BY, 3*BWidth+2*BDiffs, 30*Scale,"SUBTITLE +", "ORBIT INFO", "ORB");
  2981.             BY +=2*BDiffl;
  2982.             Button(BX[0], BY, BWidth, BHeight,"IndOn", Inc.toFixed(2), "INC (deg)");
  2983.             Button(BX[1], BY, BWidth, BHeight,"IndOn", Ecc.toFixed(4), "ECC");
  2984.             if(Per>9203328){
  2985.                 Button(BX[2], BY, BWidth, BHeight,"IndOn", format_time(Per), "PER (y)");
  2986.             }else if(Per>216000){
  2987.                 Button(BX[2], BY, BWidth, BHeight,"IndOn", format_time(Per), "PER (d)");
  2988.             }else if(Per>6000){
  2989.                 Button(BX[2], BY, BWidth, BHeight,"IndOn", format_time(Per), "PER (h)");
  2990.             }else{
  2991.                 Button(BX[2], BY, BWidth, BHeight,"IndOn", format_time(Per), "PER (min)");
  2992.             }
  2993.             BY +=BHeight+BDiffs;
  2994.  
  2995.             Button(BX[0], BY, BWidth, BHeight,"IndOn", (TrA).toFixed(2), "TrAn (deg)");
  2996.             if(Math.abs(TTA)>9203328){
  2997.                 Button(BX[1], BY, BWidth, BHeight,"IndOn", format_time(TTA), "TtoAP (y)");
  2998.             }else if(Math.abs(TTA)>216000){
  2999.                 Button(BX[1], BY, BWidth, BHeight,"IndOn", format_time(TTA), "TtoAP (d)");
  3000.             }else if(Math.abs(TTA)>6000){
  3001.                 Button(BX[1], BY, BWidth, BHeight,"IndOn", format_time(TTA), "TtoAP (h)");
  3002.             }else if(Math.abs(TTA)>100){
  3003.                 Button(BX[1], BY, BWidth, BHeight,"IndOn", format_time(TTA), "TtoAP (min)");
  3004.             }else{
  3005.                 Button(BX[1], BY, BWidth, BHeight,"IndOn", format_time(TTA), "TtoAP (sec)");
  3006.             }
  3007.             if(Math.abs(TTP)>9203328){
  3008.                 Button(BX[2], BY, BWidth, BHeight,"IndOn", format_time(TTP), "TtoPe (y)");
  3009.             }else if(Math.abs(TTP)>216000){
  3010.                 Button(BX[2], BY, BWidth, BHeight,"IndOn", format_time(TTP), "TtoPe (d)");
  3011.             }else if(Math.abs(TTP)>6000){
  3012.                 Button(BX[2], BY, BWidth, BHeight,"IndOn", format_time(TTP), "TtoPe (h)");
  3013.             }else if(Math.abs(TTP)>100){
  3014.                 Button(BX[2], BY, BWidth, BHeight,"IndOn", format_time(TTP), "TtoPe (min)");
  3015.             }else{
  3016.                 Button(BX[1], BY, BWidth, BHeight,"IndOn", format_time(TTP), "TtoPe (sec)");
  3017.             }
  3018.             BY +=BHeight+BDiffl+BDiffs;
  3019.             Button(BX[0], BY, 3*BWidth+2*BDiffs, 30*Scale,"SUBTITLE", "SYSTEMS", "");
  3020.             BY +=2*BDiffl;
  3021.             if(light == "True"){
  3022.                 Button(BX[0], BY, BWidth, BHeight,"ButtonOn", "LIGHT", "");
  3023.             }else{
  3024.                 Button(BX[0], BY, BWidth, BHeight,"ButtonOff", "LIGHT", "");
  3025.             }
  3026.             if(brake == "True"){
  3027.                 Button(BX[1], BY, BWidth, BHeight,"ButtonOn", "BRAKE", "");
  3028.             }else{
  3029.                 Button(BX[1], BY, BWidth, BHeight,"ButtonOff", "BRAKE", "");
  3030.             }
  3031.             if(sas == "True"){
  3032.                 Button(BX[2], BY, BWidth, BHeight,"ButtonOn", "SAS", "");
  3033.             }else{
  3034.                 Button(BX[2], BY, BWidth, BHeight,"ButtonOff", "SAS", "");
  3035.             }
  3036.             BY +=BHeight+BDiffs;
  3037.             if(gear == "True"){
  3038.                 Button(BX[0], BY, BWidth, BHeight,"ButtonOn", "GEAR", "");
  3039.             }else{
  3040.                 Button(BX[0], BY, BWidth, BHeight,"ButtonOff", "GEAR", "");
  3041.             }
  3042.             if(rcs == "True"){
  3043.                 Button(BX[1], BY, BWidth, BHeight,"ButtonOn", "RCS", "");
  3044.             }else{
  3045.                 Button(BX[1], BY, BWidth, BHeight,"ButtonOff", "RCS", "");
  3046.             }
  3047.             if(ass == "True"){
  3048.                 Button(BX[2], BY, BWidth, BHeight,"ButtonOn", "ASS", "");
  3049.             }else{
  3050.                 Button(BX[2], BY, BWidth, BHeight,"ButtonOff", "ASS", "");
  3051.             };
  3052.             BY += BHeight+BDiffl+BDiffs;
  3053.             Button(BX[0], BY, 3*BWidth+2*BDiffs, 30*Scale,"SUBTITLE", "ACTION GROUPS", "");
  3054.             BY +=2*BDiffl;
  3055.             if(ag == 1){
  3056.                 Button(BX[0], BY, BWidth, BHeight,"ButtonOn", "1", "");
  3057.             }else{
  3058.                 Button(BX[0], BY, BWidth, BHeight,"ButtonOff", "1", "");
  3059.             }
  3060.             if(ag == 2){
  3061.                 Button(BX[1], BY, BWidth, BHeight,"ButtonOn", "2", "");
  3062.             }else{
  3063.                 Button(BX[1], BY, BWidth, BHeight,"ButtonOff", "2", "");
  3064.             }
  3065.             if(ag == 3){
  3066.                 Button(BX[2], BY, BWidth, BHeight,"ButtonOn", "3", "");
  3067.             }else{
  3068.                 Button(BX[2], BY, BWidth, BHeight,"ButtonOff", "3", "");
  3069.             }
  3070.             BY +=BHeight+BDiffs;
  3071.             if(ag == 4){
  3072.                 Button(BX[0], BY, BWidth, BHeight,"ButtonOn", "4", "");
  3073.             }else{
  3074.                 Button(BX[0], BY, BWidth, BHeight,"ButtonOff", "4", "");
  3075.             }
  3076.             if(ag == 5){
  3077.                 Button(BX[1], BY, BWidth, BHeight,"ButtonOn", "5", "");
  3078.             }else{
  3079.                 Button(BX[1], BY, BWidth, BHeight,"ButtonOff", "5", "");
  3080.             }
  3081.             if(ag == 6){
  3082.                 Button(BX[2], BY, BWidth, BHeight,"ButtonOn", "6", "");
  3083.             }else{
  3084.                 Button(BX[2], BY, BWidth, BHeight,"ButtonOff", "6", "");
  3085.             }
  3086.             BY +=BHeight+BDiffs;
  3087.             if(ag == 7){
  3088.                 Button(BX[0], BY, BWidth, BHeight,"ButtonOn", "7", "");
  3089.             }else{
  3090.                 Button(BX[0], BY, BWidth, BHeight,"ButtonOff", "7", "");
  3091.             }
  3092.             if(ag == 8){
  3093.                 Button(BX[1], BY, BWidth, BHeight,"ButtonOn", "8", "");
  3094.             }else{
  3095.                 Button(BX[1], BY, BWidth, BHeight,"ButtonOff", "8", "");
  3096.             }
  3097.             if(ag == 9){
  3098.                 Button(BX[2], BY, BWidth, BHeight,"ButtonOn", "9", "");
  3099.             }else{
  3100.                 Button(BX[2], BY, BWidth, BHeight,"ButtonOff", "9", "");
  3101.             }
  3102.             BY +=BHeight+BDiffs;
  3103.             if(ag == 10){
  3104.                 Button(BX[1], BY, BWidth, BHeight,"ButtonOn", "10", "");
  3105.             }else{
  3106.                 Button(BX[1], BY, BWidth, BHeight,"ButtonOff", "10", "");
  3107.             }
  3108.  
  3109.             BY += BHeight+BDiffl+BDiffs;
  3110.             Button(BX[0], BY, 3*BWidth+2*BDiffs, 30*Scale,"SUBTITLE", "ABORT", "");
  3111.             BY +=2*BDiffl;
  3112.             BY +=BHeight+BDiffs;
  3113.             if(ab == false){
  3114.                 Button(BX[1], BY, BWidth, BHeight,"AlarmOff", "ABORT", "");
  3115.             }else{
  3116.                 Button(BX[1], BY, BWidth, BHeight,"AlarmOn", "ABORT", "");
  3117.             }
  3118.  
  3119.         }
  3120.         if(disp == 4){                                                                          //status display
  3121.             ctx.clearRect(BtnX, 0, 3*BWidth+2*BDiffs, 1080*Scale);
  3122.             BY = BtnY;
  3123.             Button(BX[0], BY-20*Scale, 3*BWidth+2*BDiffs, 30*Scale,"TITLE -", "STATUS", "STAT2");
  3124.             BY +=+TDiff;
  3125.             draw_dial_r_pm(BX[3],BY, (charge_r-charge)/(rate/1000), "CHARGE");
  3126.             draw_dial_r_p_10(BX[4],BY, intake, intake_max, "AIR");
  3127.             BY +=196*Scale;
  3128.             draw_dial_r_p_100(BX[3],BY, (lf_s_r-lf_s)/(rate/1000), lf_s_max, "LF");
  3129.             draw_dial_r_p_100(BX[4],BY, (ox_s_r-ox_s)/(rate/1000), ox_s_max, "OX");
  3130.             BY +=196*Scale;
  3131.             draw_dial_r_p_10(BX[3],BY, (mono_r-mono)/(rate/1000), mono_max, "MONO");
  3132.             draw_dial_r_p_100(BX[4],BY, (sf_s_r-sf_s)/(rate/1000), sf_s_max, "SOLID");
  3133.             draw_sliders();
  3134.  
  3135.         }
  3136.         if(disp == 5){                                                                          //info display
  3137.             ctx.clearRect(BtnX, 0, 3*BWidth+2*BDiffs, 1080*Scale);
  3138.             BY = BtnY;
  3139.             Button(BX[0], BY-20*Scale, 3*BWidth+2*BDiffs, 40*Scale,"TITLE -", "INFORMATION", "SYS2");
  3140.             BY +=BDiffl+TDiff;
  3141.             Button(BX[0], BY, 3*BWidth+2*BDiffs, 40*Scale,"SUBTITLE", "ENVIRONMENT", "");
  3142.             BY +=2*BDiffl;
  3143.             Button(BX[0], BY, BWidth, BHeight,"IndOn", Body.toUpperCase(), "");
  3144.             if(atmo > 0){
  3145.                 Button(BX[2], BY, BWidth, BHeight,"IndOn", "ATMO", "");
  3146.             }else{
  3147.                 Button(BX[2], BY, BWidth, BHeight,"IndOff", "ATMO", "");
  3148.             }
  3149.             BY +=BHeight+BDiffl+BDiffs;
  3150.             Button(BX[0], BY, 3*BWidth+2*BDiffs, 40*Scale,"SUBTITLE -", "ORBIT INFO", "ORB2");
  3151.             BY +=2*BDiffl;
  3152.             Button(BX[0], BY, BWidth, BHeight,"IndOn", Inc.toFixed(2), "INC (deg)");
  3153.             Button(BX[1], BY, BWidth, BHeight,"IndOn", Ecc.toFixed(4), "ECC");
  3154.             if(Per>9203328){
  3155.                 Button(BX[2], BY, BWidth, BHeight,"IndOn", format_time(Per), "PER (y)");
  3156.             }else if(Per>216000){
  3157.                 Button(BX[2], BY, BWidth, BHeight,"IndOn", format_time(Per), "PER (d)");
  3158.             }else if(Per>6000){
  3159.                 Button(BX[2], BY, BWidth, BHeight,"IndOn", format_time(Per), "PER (h)");
  3160.             }else{
  3161.                 Button(BX[2], BY, BWidth, BHeight,"IndOn", format_time(Per), "PER (min)");
  3162.             }
  3163.             BY +=BHeight+BDiffs;
  3164.  
  3165.             Button(BX[0], BY, BWidth, BHeight,"IndOn", (TrA).toFixed(2), "TrAn (deg)");
  3166.             if(Math.abs(TTA)>9203328){
  3167.                 Button(BX[1], BY, BWidth, BHeight,"IndOn", format_time(TTA), "TtoAP (y)");
  3168.             }else if(Math.abs(TTA)>216000){
  3169.                 Button(BX[1], BY, BWidth, BHeight,"IndOn", format_time(TTA), "TtoAP (d)");
  3170.             }else if(Math.abs(TTA)>6000){
  3171.                 Button(BX[1], BY, BWidth, BHeight,"IndOn", format_time(TTA), "TtoAP (h)");
  3172.             }else if(Math.abs(TTA)>100){
  3173.                 Button(BX[1], BY, BWidth, BHeight,"IndOn", format_time(TTA), "TtoAP (min)");
  3174.             }else{
  3175.                 Button(BX[1], BY, BWidth, BHeight,"IndOn", format_time(TTA), "TtoAP (sec)");
  3176.             }
  3177.             if(Math.abs(TTP)>9203328){
  3178.                 Button(BX[2], BY, BWidth, BHeight,"IndOn", format_time(TTP), "TtoPe (y)");
  3179.             }else if(Math.abs(TTP)>216000){
  3180.                 Button(BX[2], BY, BWidth, BHeight,"IndOn", format_time(TTP), "TtoPe (d)");
  3181.             }else if(Math.abs(TTP)>6000){
  3182.                 Button(BX[2], BY, BWidth, BHeight,"IndOn", format_time(TTP), "TtoPe (h)");
  3183.             }else if(Math.abs(TTP)>100){
  3184.                 Button(BX[2], BY, BWidth, BHeight,"IndOn", format_time(TTP), "TtoPe (min)");
  3185.             }else{
  3186.                 Button(BX[1], BY, BWidth, BHeight,"IndOn", format_time(TTP), "TtoPe (sec)");
  3187.             }
  3188.             BY +=BHeight+BDiffl+BDiffs;
  3189.             Button(BX[0], BY, 3*BWidth+2*BDiffs, 40*Scale,"SUBTITLE", "MAP", "");
  3190.             BY +=2*BDiffl;
  3191.             draw_orbit(BX[0]+184*Scale, BY+220*Scale);
  3192.  
  3193.             BY = 882*Scale;
  3194.             Button(BX[0], BY, 3*BWidth+2*BDiffs, 40*Scale,"SUBTITLE", "ABORT", "");
  3195.             BY +=2*BDiffl;
  3196.             BY +=BHeight+BDiffs;
  3197.             if(ab == false){
  3198.                 Button(BX[1], BY, BWidth, BHeight,"AlarmOff", "ABORT", "");
  3199.             }else{
  3200.                 Button(BX[1], BY, BWidth, BHeight,"AlarmOn", "ABORT", "");
  3201.             }
  3202.         }
  3203.  
  3204.         function format_time(t){
  3205.         var time = 0;
  3206.         var diff = 0;
  3207.         var diff2 = 0;
  3208.             if(Math.abs(t)>9203328){                                                            //years
  3209.                 diff = 9203328;
  3210.                 diff2 = 21600;
  3211.             }else if(Math.abs(t)>21600){                                                        //days
  3212.                 diff = 21600;
  3213.                 diff2 =3600;
  3214.             }else if(Math.abs(t)>6000){                                                         //hours
  3215.                 diff = 3600;
  3216.                 diff2 = 60;
  3217.             }else if(Math.abs(t)>100){                                                          //minutes
  3218.                 diff = 60;
  3219.                 diff2 = 1;
  3220.             }else{                                                                              //seconds
  3221.                 diff = 1;
  3222.                 diff = 1;
  3223.                 return t.toFixed(0);
  3224.             }
  3225.             time = t/diff;
  3226.             if(Math.floor((t-Math.floor(time)*diff)/diff2)<10){
  3227.                 return Math.floor(time)+":0"+(Math.floor((t-Math.floor(time)*diff)/diff2));
  3228.             }else{
  3229.                 return Math.floor(time)+":"+(Math.floor((t-Math.floor(time)*diff)/diff2));
  3230.             }
  3231.         }
  3232.  
  3233.         function draw_orbit(x,y){
  3234.             var radius = 0;
  3235.             var a = 0;
  3236.             var SC = 0;
  3237.             var m = 0.1;
  3238.             var f = (PE/1000+radius)*2;
  3239.             switch(Body){
  3240.                 case "Sun":
  3241.                     radius = 261600000;
  3242.                     atmo = 0;
  3243.                     break;
  3244.                 case "Moho":
  3245.                     radius = 250000;
  3246.                     atmo = 0;
  3247.                     break;
  3248.                 case "Eve":
  3249.                     radius = 700000;
  3250.                     atmo = 96708.574;
  3251.                     break;
  3252.                 case "Gilly":
  3253.                     radius = 13000;
  3254.                     atmo = 0;
  3255.                     break;
  3256.                 case "Kerbin":
  3257.                     radius = 600000;
  3258.                     atmo = 69077.553;
  3259.                     break;
  3260.                 case "Mun":
  3261.                     radius = 200000;
  3262.                     atmo = 0;
  3263.                     break;
  3264.                 case "Minmus":
  3265.                     radius = 60000;
  3266.                     atmo = 0;
  3267.                     break;
  3268.                 case "Duna":
  3269.                     radius = 320000;
  3270.                     atmo = 41446.532 ;
  3271.                     break;
  3272.                 case "Ike":
  3273.                     radius = 130000;
  3274.                     atmo = 0;
  3275.                     break;
  3276.                 case "Dres":
  3277.                     radius = 138000;
  3278.                     atmo = 0;
  3279.                     break;
  3280.                 case "Jool":
  3281.                     radius = 6000000;
  3282.                     atmo = 138155.11;
  3283.                     break;
  3284.                 case "Laythe":
  3285.                     radius = 500000;
  3286.                     atmo = 55262.042 ;
  3287.                     break;
  3288.                 case "Vall":
  3289.                     radius = 300000;
  3290.                     atmo = 0;
  3291.                     break;
  3292.                 case "Tylo":
  3293.                     radius = 600000;
  3294.                     atmo = 0;
  3295.                     break;
  3296.                 case "Bop":
  3297.                     radius = 65000;
  3298.                     atmo = 0;
  3299.                     break;
  3300.                 case "Pol":
  3301.                     radius = 44000;
  3302.                     atmo = 0;
  3303.                     break;
  3304.                 case "Eeloo":
  3305.                     radius = 210000;
  3306.                     atmo = 0;
  3307.                     break;
  3308.             }
  3309.             if(Ecc<1){
  3310.                 SC = radius/((AP+radius))*(140/radius)*Scale;
  3311.             }else{
  3312.                 SC = radius/((PE+radius))*(50/radius)*Scale;
  3313.             }
  3314.             ctx.strokeStyle = blue;
  3315.             if(atmo>0){
  3316.                 ctx.lineWidth = 0.5*Scale;                                                          //draw atmosphere
  3317.                 ctx.fillStyle = blue.slice(0,-3)+",0.25)";
  3318.                 ctx.beginPath();
  3319.                 ctx.arc(x, y, (radius+atmo)*SC, 0, 2 * Math.PI, false);
  3320.                 ctx.closePath();
  3321.                 ctx.fill();
  3322.             }
  3323.             ctx.strokeStyle = lblue;
  3324.             ctx.fillStyle = lblue;
  3325.             ctx.font = 16*Scale+'pt Courier New';
  3326.             ctx.textAlign = 'center';
  3327.  
  3328.             ctx.lineWidth = 2*Scale;                                                                //draw AP and PE Marker
  3329.  
  3330.             if(AP>0){
  3331.                 ctx.beginPath();
  3332.                 ctx.moveTo(x+(radius+AP)*SC-10*Scale, y);
  3333.                 ctx.lineTo(x+(radius+AP)*SC+10*Scale, y);
  3334.                 ctx.closePath();
  3335.                 ctx.stroke();
  3336.                 ctx.fillText("AP", x+(radius+AP)*SC+30*Scale, y+6*Scale);
  3337.             }
  3338.             if(PE>0){
  3339.                 ctx.beginPath();
  3340.                 ctx.moveTo(x-(radius+PE)*SC-10*Scale, y);
  3341.                 ctx.lineTo(x-(radius+PE)*SC+10*Scale, y);
  3342.                 ctx.stroke();
  3343.                 ctx.closePath();
  3344.                 ctx.fillText("PE", x-(radius+PE)*SC-30*Scale, y+6*Scale);
  3345.  
  3346.             }
  3347.  
  3348.  
  3349.             ctx.strokeStyle = lblue;
  3350.  
  3351.  
  3352.             if(Ecc<1){                                                                          //draw elliptic orbit
  3353.                 a = (AP+PE+2*radius)/2;
  3354.                 ctx.lineWidth = 2/SC;
  3355.                 ctx.save();
  3356.                 ctx.translate(Ecc*a*SC+x, y);
  3357.                 ctx.scale(SC, Math.sqrt(1-Ecc*Ecc)*SC);
  3358.                 ctx.beginPath();
  3359.                 ctx.arc(0, 0, a, 0, 2 * Math.PI, false);
  3360.                 ctx.closePath();
  3361.                 ctx.stroke()
  3362.  
  3363.                 ctx.restore();
  3364.             }else if(Ecc == 1){                                                                 //draw parabolic orbit
  3365.                 ctx.lineWidth=2;
  3366.                 for(i=-11;i<=10;i++){
  3367.                     ctx.beginPath();
  3368.                     ctx.moveTo(x-(f/2)*SC+(1/(4*f))*(i/m)*(i/m),y+(i/m));
  3369.                     ctx.lineTo(x-(f/2)*SC+(1/(4*f))*((i+1)/m)*((i+1)/m),y+((i+1)/m));
  3370.                     ctx.stroke();
  3371.                 }
  3372.                 ctx.fillStyle = bg;
  3373.                 ctx.fillRect(x-184*Scale+3*BWidth+2*BDiffs, y-220*Scale, 200*Scale, 440*Scale);
  3374.             }else{                                                                              //draw hyperbolic orbit
  3375.                 var xh = 0;
  3376.                 var yh = 0;
  3377.                 a = ((radius+PE)/(Ecc-1));
  3378.                 b = Math.sqrt(Ecc*a*Ecc*a-a*a);
  3379.                 ctx.lineWidth=2;
  3380.                 for(i=0;i<=29;i++){
  3381.                     ctx.beginPath();
  3382.                     yh = (i*7*Scale);
  3383.                     xh = -a*Math.sqrt(1-((yh)*(yh)/(b*b)))*SC;
  3384.                     ctx.moveTo(x+2*a*SC+xh-Ecc*a*SC,y-yh);
  3385.                     yh = ((i+1)*7*Scale);
  3386.                     xh = -a*Math.sqrt(1-((yh)*(yh)/(b*b)))*SC;
  3387.                     ctx.lineTo(x+2*a*SC+xh-Ecc*a*SC,y-yh);
  3388.  
  3389.                     ctx.stroke();
  3390.                 }
  3391.                 for(i=0;i<=30;i++){
  3392.                     ctx.beginPath();
  3393.                     yh = -(i*7*Scale);
  3394.                     xh = -a*Math.sqrt(1-((yh)*(yh)/(b*b)))*SC;
  3395.                     ctx.moveTo(x+2*a*SC+xh-Ecc*a*SC,y-yh);
  3396.                     yh = -((i+1)*7*Scale);
  3397.                     xh = -a*Math.sqrt(1-((yh)*(yh)/(b*b)))*SC;
  3398.                     ctx.lineTo(x+2*a*SC+xh-Ecc*a*SC,y-yh);
  3399.                     ctx.stroke();
  3400.                 }
  3401.                 ctx.fillStyle = bg;
  3402.                 ctx.fillRect(x-184*Scale+3*BWidth+2*BDiffs, y-220*Scale, 200*Scale, 440*Scale);
  3403.  
  3404.             }
  3405.             ctx.strokeStyle = blue;
  3406.             ctx.lineWidth = 4*Scale;                                                                    //draw body
  3407.             ctx.fillStyle = bg;
  3408.             ctx.beginPath();
  3409.             ctx.arc(x, y, radius*SC, 0, 2 * Math.PI, false);
  3410.             ctx.closePath();
  3411.             ctx.fill();
  3412.             ctx.stroke();
  3413.             ctx.fillStyle = blue;
  3414.             ctx.font = 24*Scale+'pt Courier New';
  3415.             ctx.textAlign = 'center';
  3416.             ctx.lineWidth = 2*Scale;
  3417.         }
  3418.  
  3419.         function draw_sliders(){                                                                //shows percentage of resource and throttle
  3420.             var count = 1;
  3421.             var BDiffxl = 50*Scale;
  3422.             var TDiff = 32*Scale;
  3423.             var SldX_R = 1850*Scale;
  3424.             var SldX_L = 50*Scale;
  3425.             var SldY = 1018*Scale;
  3426.             var SWidth = 0;
  3427.             var SHeight = 50*Scale;
  3428.  
  3429.             if(charge_max > 0){                                                                 //calculate total number of siders to draw
  3430.                 count += 1;
  3431.             }
  3432.             if(mono_max > 0){
  3433.                 count += 1;
  3434.             }
  3435.             if(ox_s_max > 0){
  3436.                 count += 1;
  3437.             }
  3438.             if(lf_s_max > 0){
  3439.                 count += 1;
  3440.             }
  3441.             if(sf_s_max > 0){
  3442.                 count += 1;
  3443.             }
  3444.  
  3445.             SWidth = ((368-55)*Scale/(count-1))-10*Scale+(10*Scale)/(count-1);                          //calculate width of each slider, minmimum 60
  3446.             if(SWidth >60*Scale){
  3447.                 SWidth = 60*Scale;
  3448.             }
  3449.             deltx = SWidth;
  3450.             if(charge_max > 0){
  3451.                 drawBar(SldX_R-deltx, SldY, SWidth, SHeight, "CHRG", charge, charge_max);
  3452.                 deltx+=SWidth+10*Scale;
  3453.             }
  3454.             if(mono_max > 0){
  3455.                 drawBar(SldX_R-deltx, SldY, SWidth, SHeight, "MONO", mono, mono_max);
  3456.                 deltx+=SWidth+10*Scale;
  3457.             }
  3458.             if(ox_s_max > 0){
  3459.                 drawBar(SldX_R-deltx, SldY, SWidth, SHeight, "OX", ox_s, ox_s_max);
  3460.                 deltx+=SWidth+10*Scale;
  3461.             }
  3462.             if(lf_s_max > 0){
  3463.                 drawBar(SldX_R-deltx, SldY, SWidth, SHeight, "LF", lf_s, lf_s_max);
  3464.                 deltx+=SWidth+10*Scale;
  3465.             }
  3466.             if(sf_s_max > 0){
  3467.                 drawBar(SldX_R-deltx, SldY, SWidth, SHeight, "SF", sf_s, sf_s_max);
  3468.                 deltx+=SWidth+10*Scale;
  3469.             }
  3470.             if(count>1){
  3471.                 deltx+=27*Scale;
  3472.             }else{
  3473.                 deltx=SWidth;
  3474.             }
  3475.             drawBar(SldX_R-deltx, SldY, SWidth, SHeight, "TRHL", thrust, 1);
  3476.             deltx+=SWidth;
  3477.             if(deltx>SWidth){
  3478.                 drawScale(SldX_R-deltx, SldY, SWidth, SHeight)
  3479.             }
  3480.             //drawSlider(SldX_R-(deltx+80), SldY, SWidth, SHeight, "THR", thrust, 1);
  3481.             function drawScale(x, y, w, h){                                                     //draw percentage scale
  3482.                 var print = "";
  3483.  
  3484.                 ctx.font = 18*Scale+'pt Courier New';
  3485.                 ctx.textAlign = 'right';
  3486.                 ctx.fillStyle = blue;
  3487.  
  3488.  
  3489.                 for(i=0;i<=10;i++){                                                             //draw scale
  3490.                     ctx.fillStyle = lblue;
  3491.                     ctx.lineWidth = 2*Scale;
  3492.                     ctx.strokeStyle = blue.slice(0,-3)+",0.2)";
  3493.                     ctx.beginPath();
  3494.                     ctx.moveTo(x+SWidth-30*Scale, y-5*Scale-i*34.5*Scale);
  3495.                     ctx.lineTo(x+SWidth-15*Scale, y-5*Scale-i*34.5*Scale);
  3496.                     ctx.stroke();
  3497.  
  3498.                 }
  3499.                     ctx.strokeStyle = blue.slice(0,-3)+",0.2)";
  3500.                     ctx.beginPath();
  3501.                     ctx.moveTo(x+SWidth-15*Scale, y-350*Scale);
  3502.                     ctx.lineTo(x+SWidth-15*Scale, y-5*Scale);
  3503.                     ctx.stroke();
  3504.  
  3505.                 for(i=0;i<=5;i++){                                                              //draw even percentage big, eg. 0,20,40,60,80,100
  3506.                     ctx.fillStyle = blue;
  3507.                     ctx.lineWidth = 1*Scale;
  3508.                     ctx.strokeStyle = blue;
  3509.                     print = 2*i*10;
  3510.                     ctx.fillText(print.toFixed(0), x+SWidth-45*Scale, y+6*Scale-2*i*34.5*Scale);
  3511.                     ctx.strokeText(print.toFixed(0), x+SWidth-45*Scale, y+6*Scale-2*i*34.5*Scale);
  3512.                 }
  3513.                 for(i=0;i<=4;i++){                                                              //draw odd percentage small, eg. 10, 30, 50, 70, 90
  3514.                     ctx.font = 14*Scale+'pt Courier New';
  3515.                     ctx.fillStyle = blue.slice(0,-3)+",0.2)";
  3516.                     ctx.lineWidth = 1*Scale;
  3517.                     ctx.strokeStyle = blue.slice(0,-3)+",0.2)";
  3518.                     print = (2*i+1)*10;
  3519.                     ctx.fillText(print.toFixed(0), x+SWidth-45*Scale, y+4*Scale-(2*i+1)*34.5*Scale);
  3520.                     ctx.strokeText(print.toFixed(0), x+SWidth-45*Scale, y+4*Scale-(2*i+1)*34.5*Scale);
  3521.                 }
  3522.             }   //end draw_slider
  3523.  
  3524.             function drawBar(x, y, w, h, nme, cur, max){                                        //draw resource bar
  3525.                 dy = 0;
  3526.                 var print = "";
  3527.                 var grd=ctx.createLinearGradient(0,y-5*Scale+30*Scale,0,y-350*Scale);
  3528.                 grd.addColorStop(0,lblue);
  3529.                 grd.addColorStop(1,blue);
  3530.                 ctx.fillStyle=grd;
  3531.  
  3532.                 ctx.font = 14*Scale+'pt Courier New';
  3533.                 ctx.textAlign = 'right';
  3534.                 ctx.fillStyle = blue;
  3535.  
  3536.                 for(i=1;i<=10;i++){                                                             //draw bar
  3537.                     ctx.lineWidth = 2*Scale;
  3538.                     if(cur/max<(i-1)/10){                                                       //empty rectangles
  3539.                         ctx.strokeStyle = blue.slice(0,-3)+",0.2)";
  3540.                         ctx.strokeRect(x, y-i*5*Scale-i*30*Scale, w, 30*Scale);
  3541.                     }else if(cur/max<i/10){                                                     //partly filled rectangle
  3542.                         ctx.strokeStyle = blue.slice(0,-3)+",0.2)";
  3543.                         ctx.strokeRect(x, y-i*5*Scale-i*30*Scale, w, 30*Scale);
  3544.                         ctx.fillStyle = grd;
  3545.                         dy = ((cur-((max/10)*(i-1)))/(max/10))*30*Scale;
  3546.                         ctx.fillRect(x,y-i*5*Scale-30*Scale*i+(30*Scale-dy),w,dy);
  3547.                     }else{                                                                      //filled rectangle
  3548.                         ctx.fillStyle = grd;
  3549.                         ctx.fillRect(x, y-i*5*Scale-i*30*Scale, w, 30*Scale);
  3550.                     }
  3551.  
  3552.  
  3553.                 }
  3554.  
  3555.                 if(cur > 0.01 && cur/max < 0.2){                                                    //draw bottom indicator, color based on level
  3556.                     ctx.fillStyle = lred;
  3557.                 }else if(cur<0.01){
  3558.                     ctx.fillStyle = red;
  3559.                 }else{
  3560.                     ctx.fillStyle = blue;
  3561.                 }
  3562.                 ctx.fillRect(x,y,w,h);
  3563.  
  3564.                 ctx.font = 14*Scale+'pt Courier New';
  3565.                 ctx.textAlign = 'left';
  3566.                 ctx.fillStyle = bg;
  3567.                 ctx.lineWidth = 1*Scale;
  3568.                 ctx.strokeStyle = bg;
  3569.  
  3570.                 ctx.fillText(nme, x+8*Scale, y+32*Scale);
  3571.                 ctx.strokeText(nme, x+8*Scale, y+32*Scale);
  3572.             }   //end draw_bar
  3573.         }   //end draw_sliders
  3574.  
  3575.         function draw_dial_r_p_10(x, y, r, m, n){                                                   //round dial, only positiv values up to 10
  3576.             var rad = 68*Scale;
  3577.             var w = 0;
  3578.             var scale = new Array(0, 0.02, 0.04, 0.06, 0.08, 0.1, 0.2, 0.4, 0.6, 0.8, 1,2,4,6,8,10);
  3579.             y +=rad+10*Scale;
  3580.  
  3581.             ctx.textAlign = 'center';
  3582.             ctx.font = 10*Scale+'pt Courier New';
  3583.             ctx.strokeStyle = lblue;
  3584.             for(i=0;i<=15;i++){                                                                 //drawing scale for sub values, eg. 0.2, 0.4, 0.6...
  3585.                 ctx.lineWidth = 2*Scale;
  3586.                 w = Math.sqrt(scale[i])*270/Math.sqrt(scale[15])-45;
  3587.                 ctx.beginPath();
  3588.                 ctx.moveTo(x-rad*Math.cos(w*Math.PI/180), y-rad*Math.sin(w*Math.PI/180));
  3589.                 ctx.lineTo(x-(rad-8*Scale)*Math.cos(w*Math.PI/180), y-(rad-8*Scale)*Math.sin(w*Math.PI/180));
  3590.                 ctx.stroke();
  3591.                 }
  3592.             for(i=0;i<=3;i++){                                                                  //drawing scale for main values, eg 0, 0.1, 1, 10
  3593.                 ctx.lineWidth = 2*Scale;
  3594.                 w = Math.sqrt(scale[5*i])*270/Math.sqrt(scale[15])-45;
  3595.                 ctx.beginPath();
  3596.                 ctx.moveTo(x-rad*Math.cos(w*Math.PI/180), y-rad*Math.sin(w*Math.PI/180));
  3597.                 ctx.lineTo(x-(rad-15*Scale)*Math.cos(w*Math.PI/180), y-(rad-15*Scale)*Math.sin(w*Math.PI/180));
  3598.                 ctx.stroke();
  3599.                 ctx.lineWidth = 1*Scale;
  3600.                 ctx.fillText(scale[5*i], x-(rad-30*Scale)*Math.cos(w*Math.PI/180), y+4-(rad-30*Scale)*Math.sin(w*Math.PI/180));
  3601.                 ctx.strokeText(scale[5*i], x-(rad-30*Scale)*Math.cos(w*Math.PI/180), y+4-(rad-30*Scale)*Math.sin(w*Math.PI/180));
  3602.             }
  3603.             ctx.strokeStyle = red;
  3604.             ctx.lineWidth = 4*Scale;
  3605.             if(r>10){                                                                           //needle at maximum value
  3606.                 w = 225;
  3607.                 ctx.beginPath();
  3608.                 ctx.beginPath();
  3609.                 ctx.moveTo(x-(rad-17*Scale)*Math.cos(w*Math.PI/180), y-(rad-17*Scale)*Math.sin(w*Math.PI/180));
  3610.                 ctx.lineTo(x, y);
  3611.                 ctx.stroke();
  3612.             }else{                                                                              //needle for other values
  3613.                 w = Math.sqrt(r)*270/Math.sqrt(scale[15])-45;
  3614.                 ctx.beginPath();
  3615.                 ctx.moveTo(x-(rad-17*Scale)*Math.cos(w*Math.PI/180), y-(rad-17*Scale)*Math.sin(w*Math.PI/180));
  3616.                 ctx.lineTo(x, y);
  3617.                 ctx.stroke();
  3618.             }
  3619.             ctx.lineWidth = 2*Scale;                                                            //center circle, middle arc, outer circle and name
  3620.             ctx.strokeStyle = lblue;
  3621.             ctx.beginPath();
  3622.             ctx.arc(x, y, rad, 0.75*Math.PI, 0.25*Math.PI, false);
  3623.             ctx.stroke();
  3624.             ctx.strokeStyle = blue;
  3625.             ctx.fillStyle = blue;
  3626.             ctx.beginPath();
  3627.             ctx.arc(x, y, rad+10*Scale, 0, 2*Math.PI, false);
  3628.             ctx.closePath();
  3629.             ctx.stroke();
  3630.             ctx.beginPath();
  3631.             ctx.arc(x, y, 5*Scale, 0, 2*Math.PI, false);
  3632.             ctx.closePath();
  3633.             ctx.fill();
  3634.             ctx.strokeStyle = lblue;
  3635.             ctx.lineWidth = 1*Scale;
  3636.             ctx.textAlign = 'center';
  3637.             ctx.font = 14*Scale+'pt Courier New';
  3638.             ctx.fillText(n, x, y+rad-10*Scale);
  3639.             ctx.strokeText(n, x, y+rad-10*Scale);
  3640.             ctx.stroke();
  3641.             if(m <= 0){                                                                         //dim dial when resource not in vessel
  3642.                 ctx.fillStyle = bg.slice(0,-3)+",0.8)";
  3643.                 ctx.fillRect(x-(rad+12*Scale), y-(rad+12*Scale), 2*(rad+12*Scale), 2*(rad+12*Scale));
  3644.             }
  3645.         }
  3646.  
  3647.         function draw_dial_r_p_100(x, y, r, m, n){                                                  //round dial, only positiv values up to 100
  3648.             var rad = 68*Scale;
  3649.             var w = 0;
  3650.             var scale = new Array(0, 0.2, 0.4, 0.6, 0.8, 1, 2, 4, 6, 8, 10,20,40,60,80,100);
  3651.             y +=rad+10*Scale;
  3652.  
  3653.             ctx.textAlign = 'center';
  3654.             ctx.font = 10*Scale+'pt Courier New';
  3655.             ctx.strokeStyle = lblue;
  3656.             for(i=0;i<=15;i++){                                                                 //drawing scale for sub values, eg. 0.2, 0.4, 0.6...
  3657.                 ctx.lineWidth = 2*Scale;
  3658.                 w = Math.sqrt(scale[i])*270/Math.sqrt(scale[15])-45;
  3659.                 ctx.beginPath();
  3660.                 ctx.moveTo(x-rad*Math.cos(w*Math.PI/180), y-rad*Math.sin(w*Math.PI/180));
  3661.                 ctx.lineTo(x-(rad-8*Scale)*Math.cos(w*Math.PI/180), y-(rad-8*Scale)*Math.sin(w*Math.PI/180));
  3662.                 ctx.stroke();
  3663.                 }
  3664.             for(i=0;i<=3;i++){                                                                  //drawing scale for main values, eg 0, 0.1, 1, 10
  3665.                 ctx.lineWidth = 2*Scale;
  3666.                 w = Math.sqrt(scale[5*i])*270/Math.sqrt(scale[15])-45;
  3667.                 ctx.beginPath();
  3668.                 ctx.moveTo(x-rad*Math.cos(w*Math.PI/180), y-rad*Math.sin(w*Math.PI/180));
  3669.                 ctx.lineTo(x-(rad-15*Scale)*Math.cos(w*Math.PI/180), y-(rad-15*Scale)*Math.sin(w*Math.PI/180));
  3670.                 ctx.stroke();
  3671.                 ctx.lineWidth = 1*Scale;
  3672.                 ctx.fillText(scale[5*i], x-(rad-30*Scale)*Math.cos(w*Math.PI/180), y+4-(rad-30*Scale)*Math.sin(w*Math.PI/180));
  3673.                 ctx.strokeText(scale[5*i], x-(rad-30*Scale)*Math.cos(w*Math.PI/180), y+4-(rad-30*Scale)*Math.sin(w*Math.PI/180));
  3674.             }
  3675.             ctx.strokeStyle = red;
  3676.             ctx.lineWidth = 4*Scale;
  3677.             if(r>100){                                                                          //needle at maximum value
  3678.                 w = 225;
  3679.                 ctx.beginPath();
  3680.                 ctx.beginPath();
  3681.                 ctx.moveTo(x-(rad-17*Scale)*Math.cos(w*Math.PI/180), y-(rad-17*Scale)*Math.sin(w*Math.PI/180));
  3682.                 ctx.lineTo(x, y);
  3683.                 ctx.stroke();
  3684.             }else{                                                                              //needle for other values
  3685.                 w = Math.sqrt(r)*270/Math.sqrt(scale[15])-45;
  3686.                 ctx.beginPath();
  3687.                 ctx.moveTo(x-(rad-17*Scale)*Math.cos(w*Math.PI/180), y-(rad-17*Scale)*Math.sin(w*Math.PI/180));
  3688.                 ctx.lineTo(x, y);
  3689.                 ctx.stroke();
  3690.             }
  3691.             ctx.lineWidth = 2*Scale;                                                            //center circle, middle arc, outer circle and name
  3692.             ctx.strokeStyle = lblue;
  3693.             ctx.beginPath();
  3694.             ctx.arc(x, y, rad, 0.75*Math.PI, 0.25*Math.PI, false);
  3695.             ctx.stroke();
  3696.             ctx.strokeStyle = blue;
  3697.             ctx.fillStyle = blue;
  3698.             ctx.beginPath();
  3699.             ctx.arc(x, y, rad+10*Scale, 0, 2*Math.PI, false);
  3700.             ctx.closePath();
  3701.             ctx.stroke();
  3702.             ctx.beginPath();
  3703.             ctx.arc(x, y, 5*Scale, 0, 2*Math.PI, false);
  3704.             ctx.closePath();
  3705.             ctx.fill();
  3706.             ctx.strokeStyle = lblue;
  3707.             ctx.lineWidth = 1*Scale;
  3708.             ctx.textAlign = 'center';
  3709.             ctx.font = 14*Scale+'pt Courier New';
  3710.             ctx.fillText(n, x, y+rad-10*Scale);
  3711.             ctx.strokeText(n, x, y+rad-10*Scale);
  3712.             ctx.stroke();
  3713.             if(m <= 0){                                                                         //dim dial when resource not in vessel
  3714.                 ctx.fillStyle = bg.slice(0,-3)+",0.8)";
  3715.                 ctx.fillRect(x-(rad+12*Scale), y-(rad+12*Scale), 2*(rad+12*Scale), 2*(rad+12*Scale));
  3716.             }
  3717.         }
  3718.  
  3719.         function draw_dial_r_pm(x, y, r, n){                                                    //round dial, positiv and negativ values
  3720.             var rad = 70*Scale;
  3721.             var w = 0;
  3722.             var scale = new Array(0, 0.02, 0.04, 0.06, 0.08, 0.1, 0.2, 0.4, 0.6, 0.8, 1);
  3723.             y +=rad+10*Scale;
  3724.  
  3725.             ctx.textAlign = 'center';
  3726.             ctx.font = 10*Scale+'pt Courier New';
  3727.             ctx.strokeStyle = lblue;
  3728.             for(i=-10;i<=0;i++){                                                                //draw scale for negativ sub values, eg. -0.6, -0.4, -0.2...
  3729.                 ctx.lineWidth = 2*Scale;
  3730.                 w = -Math.sqrt(scale[-i])*135/Math.sqrt(scale[10])+90;
  3731.                 ctx.beginPath();
  3732.                 ctx.moveTo(x-rad*Math.cos(w*Math.PI/180), y-rad*Math.sin(w*Math.PI/180));
  3733.                 ctx.lineTo(x-(rad-8*Scale)*Math.cos(w*Math.PI/180), y-(rad-8*Scale)*Math.sin(w*Math.PI/180));
  3734.                 ctx.stroke();
  3735.                 }
  3736.             for(i=-2;i<=0;i++){                                                                 //draw scale for negativ main values, eg. -1, -0.1
  3737.                 ctx.lineWidth = 2*Scale;
  3738.                 w = -Math.sqrt(scale[-5*i])*135/Math.sqrt(scale[10])+90;
  3739.                 ctx.beginPath();
  3740.                 ctx.moveTo(x-rad*Math.cos(w*Math.PI/180), y-rad*Math.sin(w*Math.PI/180));
  3741.                 ctx.lineTo(x-(rad-15*Scale)*Math.cos(w*Math.PI/180), y-(rad-15*Scale)*Math.sin(w*Math.PI/180));
  3742.                 ctx.stroke();
  3743.                 ctx.lineWidth = 1*Scale;
  3744.                 ctx.fillText(-scale[-5*i], x-(rad-30*Scale)*Math.cos(w*Math.PI/180), y+4-(rad-30*Scale)*Math.sin(w*Math.PI/180));
  3745.                 ctx.strokeText(-scale[-5*i], x-(rad-30*Scale)*Math.cos(w*Math.PI/180), y+4-(rad-30*Scale)*Math.sin(w*Math.PI/180));
  3746.             }
  3747.             for(i=1;i<=10;i++){                                                                 //draw scale for positiv sub values, eg. 0.2, 0.4, 0.6...
  3748.                 ctx.lineWidth = 2*Scale;
  3749.                 w = Math.sqrt(scale[i])*135/Math.sqrt(scale[10])+90;
  3750.                 ctx.beginPath();
  3751.                 ctx.moveTo(x-rad*Math.cos(w*Math.PI/180), y-rad*Math.sin(w*Math.PI/180));
  3752.                 ctx.lineTo(x-(rad-8*Scale)*Math.cos(w*Math.PI/180), y-(rad-8*Scale)*Math.sin(w*Math.PI/180));
  3753.                 ctx.stroke();
  3754.                 }
  3755.             for(i=1;i<=2;i++){                                                                  //draw scale for negativ main values, eg. 0.1, 1
  3756.                 ctx.lineWidth = 2*Scale;
  3757.                 w = Math.sqrt(scale[5*i])*135/Math.sqrt(scale[10])+90;
  3758.                 ctx.beginPath();
  3759.                 ctx.moveTo(x-rad*Math.cos(w*Math.PI/180), y-rad*Math.sin(w*Math.PI/180));
  3760.                 ctx.lineTo(x-(rad-15*Scale)*Math.cos(w*Math.PI/180), y-(rad-15*Scale)*Math.sin(w*Math.PI/180));
  3761.                 ctx.stroke();
  3762.                 ctx.lineWidth = 1*Scale;
  3763.                 ctx.fillText(scale[5*i], x-(rad-30*Scale)*Math.cos(w*Math.PI/180), y+4-(rad-30*Scale)*Math.sin(w*Math.PI/180));
  3764.                 ctx.strokeText(scale[5*i], x-(rad-30*Scale)*Math.cos(w*Math.PI/180), y+4-(rad-30*Scale)*Math.sin(w*Math.PI/180));
  3765.             }
  3766.             ctx.strokeStyle = red;
  3767.             ctx.lineWidth = 4*Scale;
  3768.             if(r>1){                                                                            //needle at maximum value
  3769.                 w = 225;
  3770.                 ctx.beginPath();
  3771.                 ctx.beginPath();
  3772.                 ctx.moveTo(x-(rad-17*Scale)*Math.cos(w*Math.PI/180), y-(rad-17*Scale)*Math.sin(w*Math.PI/180));
  3773.                 ctx.lineTo(x, y);
  3774.                 ctx.stroke();
  3775.             }else if(r<-1){                                                                     //needle at minimum value
  3776.                 w = -45;
  3777.                 ctx.beginPath();
  3778.                 ctx.beginPath();
  3779.                 ctx.moveTo(x-(rad-17*Scale)*Math.cos(w*Math.PI/180), y-(rad-17*Scale)*Math.sin(w*Math.PI/180));
  3780.                 ctx.lineTo(x, y);
  3781.                 ctx.stroke();
  3782.             }else if(r>=0){                                                                     //needle for positiv values
  3783.                 w = Math.sqrt(r)*135/Math.sqrt(scale[10])+90;
  3784.                 ctx.beginPath();
  3785.                 ctx.moveTo(x-(rad-17*Scale)*Math.cos(w*Math.PI/180), y-(rad-17*Scale)*Math.sin(w*Math.PI/180));
  3786.                 ctx.lineTo(x, y);
  3787.                 ctx.stroke();
  3788.             }else{                                                                              //needle for negativ values
  3789.                 w = -Math.sqrt(-r)*135/Math.sqrt(scale[10])+90;
  3790.                 ctx.beginPath();
  3791.                 ctx.moveTo(x-(rad-17*Scale)*Math.cos(w*Math.PI/180), y-(rad-17*Scale)*Math.sin(w*Math.PI/180));
  3792.                 ctx.lineTo(x, y);
  3793.                 ctx.stroke();
  3794.             }
  3795.             ctx.lineWidth = 2*Scale;                                                            //center circle, middle arc, outer circle and name
  3796.             ctx.strokeStyle = lblue;
  3797.             ctx.beginPath();
  3798.             ctx.arc(x, y, rad, 0.75*Math.PI, 0.25*Math.PI, false);
  3799.             ctx.stroke();
  3800.             ctx.strokeStyle = blue;
  3801.             ctx.fillStyle = blue;
  3802.             ctx.beginPath();
  3803.             ctx.arc(x, y, rad+10*Scale, 0, 2*Math.PI, false);
  3804.             ctx.closePath();
  3805.             ctx.stroke();
  3806.             ctx.beginPath();
  3807.             ctx.arc(x, y, 5*Scale, 0, 2*Math.PI, false);
  3808.             ctx.closePath();
  3809.             ctx.fill();
  3810.             ctx.strokeStyle = lblue;
  3811.             ctx.lineWidth = 1*Scale;
  3812.             ctx.textAlign = 'center';
  3813.             ctx.font = 14*Scale+'pt Courier New';
  3814.             ctx.fillText(n, x, y+rad-10*Scale);
  3815.             ctx.strokeText(n, x, y+rad-10*Scale);
  3816.             ctx.stroke();
  3817.         }
  3818.  
  3819.         if(Math.abs(gee)>=3 && Math.abs(gee)<5){                                                //draw gee indicator
  3820.             Button(100*Scale, 1018*Scale, BWidth, BHeight,"Warn", gee.toFixed(2), "G");
  3821.         }else if(Math.abs(gee)<3){
  3822.             Button(100*Scale, 1018*Scale, BWidth, BHeight,"IndOn", gee.toFixed(2), "G");
  3823.         }else{
  3824.             Button(100*Scale, 1018*Scale, BWidth, BHeight,"AlarmOn", gee.toFixed(2), "G");
  3825.         }
  3826.  
  3827.         if(con=="false" && set==false){                                                         //draw "connecting, please wait" overlay
  3828.             draw_connect();
  3829.         }
  3830.  
  3831.         if(set==true){                                                                          //draw settings
  3832.             draw_settings();
  3833.         }
  3834.  
  3835.         function draw_settings(){                                                               //settings menu)
  3836.             SBackground();
  3837.             Button(SX+SWidth-30*Scale, SY+10*Scale, 20*Scale, 20*Scale,"CLOSE", "", "R");
  3838.  
  3839.             STitle("IP and Port", SX+32*Scale, SY+32*Scale);
  3840.             Button(SX+32*Scale, SY+56*Scale, 400*Scale, 64*Scale,"IP", IP, "C");
  3841.             STitle("Refresh Rate (ms)", SX+480*Scale, SY+32*Scale);
  3842.             Button(SX+480*Scale, SY+56*Scale, 288*Scale, 64*Scale,"RATE", rate, "C");
  3843.  
  3844.             Button(SX+32*Scale, SY+176*Scale, 248*Scale, 64*Scale,"C1", "Color 1", "C");
  3845.             Button(SX+312*Scale, SY+176*Scale, 64*Scale, 64*Scale,"C1R", "", "R");
  3846.             Button(SX+32*Scale, SY+272*Scale, 248*Scale, 64*Scale,"H1", "Highlight 1", "C");
  3847.             Button(SX+312*Scale, SY+272*Scale, 64*Scale, 64*Scale,"H1R", "", "R");
  3848.             Button(SX+32*Scale, SY+368*Scale, 248*Scale, 64*Scale,"BG", "Background", "C");
  3849.             Button(SX+312*Scale, SY+368*Scale, 64*Scale, 64*Scale,"BGR", "", "R");
  3850.  
  3851.             STitle("Colors", SX+32*Scale, SY+152*Scale);
  3852.             Button(SX+424*Scale, SY+176*Scale, 248*Scale, 64*Scale,"C2", "Color 2", "C");
  3853.             Button(SX+704*Scale, SY+176*Scale, 64*Scale, 64*Scale,"C2R", "", "R");
  3854.             Button(SX+424*Scale, SY+272*Scale, 248*Scale, 64*Scale,"H2", "Highlight 2", "C");
  3855.             Button(SX+704*Scale, SY+272*Scale, 64*Scale, 64*Scale,"H2R", "", "R");
  3856.             Button(SX+424*Scale, SY+368*Scale, 248*Scale, 64*Scale,"MK", "Marker", "C");
  3857.             Button(SX+704*Scale, SY+368*Scale, 64*Scale, 64*Scale,"MKR", "", "R");
  3858.  
  3859.  
  3860.             function STitle(t, x, y){
  3861.                 ctx.lineWidth = 1*Scale;
  3862.                 ctx.strokeStyle = red;
  3863.                 ctx.fillStyle = red;
  3864.                 ctx.font = 16*Scale+'pt Courier New';
  3865.                 ctx.textAlign = 'left';
  3866.                 ctx.fillText(t, x, y+8*Scale);
  3867.                 ctx.strokeText(t, x, y+8*Scale);
  3868.             }
  3869.  
  3870.             function SBackground(){
  3871.                 ctx.clearRect(SX, SY, SWidth, SHeight);
  3872.                 ctx.fillStyle = "rgba(0,0,0,0.75)";
  3873.                 ctx.fillRect(0, 0, WWidth, WHeight);
  3874.                 ctx.fillStyle = setbg;
  3875.                 ctx.fillRect(SX, SY, SWidth, SHeight);
  3876.             }
  3877.         }
  3878.  
  3879.         function draw_connect(){                                                                //connecting overlay
  3880.             ctx.fillStyle = "rgba(0,0,0,0.75)";
  3881.             ctx.fillRect(0, 0, WWidth, WHeight);
  3882.             ctx.fillStyle = setbg;
  3883.             ctx.fillRect(960*Scale-200*Scale, WHeight/2-100*Scale, 400*Scale, 200*Scale);
  3884.  
  3885.             ctx.lineWidth = 2*Scale;
  3886.             ctx.strokeStyle = red;
  3887.             ctx.fillStyle = red;
  3888.             ctx.font = 32*Scale+'pt Courier New';
  3889.             ctx.textAlign = 'center';
  3890.             ctx.fillText("CONNECTING", 960*Scale, WHeight/2-20*Scale);
  3891.             ctx.strokeText("CONNECTING", 960*Scale, WHeight/2-20*Scale);
  3892.             ctx.lineWidth = 1*Scale;
  3893.             ctx.strokeStyle = lred;
  3894.             ctx.fillStyle = lred;
  3895.             ctx.font = 24*Scale+'pt Courier New';
  3896.             ctx.textAlign = 'center';
  3897.             ctx.fillText("PLEASE WAIT", 960*Scale, WHeight/2+40*Scale);
  3898.             ctx.strokeText("PLEASE WAIT", 960*Scale, WHeight/2+40*Scale);
  3899.         }
  3900.  
  3901.     }   //end draw_buttons
  3902.  
  3903. </script>
  3904. </body>
  3905. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!