Create aerospace attitude indicator in dashboard?

Yep! I had all five gauges @hotNipi showed. I didn't have to do anything special to get them all to show... Either they all showed or none of them showed... Strange that some would be missing! You have just three of the five gauges?

four gauges showing

got the turn coordinator working but still no airspeed

The speed gauge sits there by itself on the far right... Maybe it was cut off on your screen? Sorry, this is the advice the blind give to the blind :smiley:

How did you get the turn coordinator to show? I'm still wondering how to add it to my dashboard. Did you copy the code and do CTRL+I to import?

<div><span id="attitude"></span><span id="heading"></span><span id="airspeed"></span></div>
<div><span id="variometer"></span><span id="altimeter"></span><span id="turn_coordinator"></span></div>

<script>
(function(scope) {
    var options = {
    	size : 200,				// Sets the size in pixels of the indicator (square)
    	roll : 0,				// Roll angle in degrees for an attitude indicator
    	pitch : 0,				// Pitch angle in degrees for an attitude indicator
    	heading: 0,				// Heading angle in degrees for an heading indicator
    	vario: 0,				// Variometer in 1000 feets/min for the variometer indicator
    	airspeed: 0,			// Air speed in knots for an air speed indicator
    	altitude: 0,			// Altitude in feets for an altimeter indicator
    	pressure: 1000,			// Pressure in hPa for an altimeter indicator
    	showBox : true,			// Sets if the outer squared box is visible or not (true or false)
    	img_directory : '/flight/img/'	// The directory where the images are saved to
    }
    var atti = $.flightIndicator('#attitude', 'attitude',options);
    var heading = $.flightIndicator('#heading', 'heading',options);
    var speed = $.flightIndicator('#airspeed', 'airspeed',options);
    var vario = $.flightIndicator('#variometer', 'variometer',options);
    var alti = $.flightIndicator('#altimeter', 'altimeter',options);
    var turn = $.flightIndicator('#turn_coordinator', 'turn_coordinator',options);
    scope.$watch('msg', function(msg) {
        if (msg) {
          if(msg.topic == "roll"){
              atti.setRoll(msg.payload)
          }
          if(msg.topic == "pitch"){
              atti.setPitch(msg.payload)
          }
          if(msg.topic == "heading"){
              heading.setHeading(msg.payload)
          }
          if(msg.topic == "speed"){
              speed.setAirSpeed(msg.payload)
          }
          if(msg.topic == "vario"){
              vario.setVario(msg.payload)
          }
          if(msg.topic == "alti"){
              alti.setAltitude(msg.payload)
          }
          if(msg.topic == "press"){
              alti.setPressure(msg.payload)
          }
          
        }
  });
})(scope);
</script>

here is my code in total, you need to go into the top of the code and add another section
at the end of the code there, be careful about the div /div tags as that messed with me for a moment
[edit]
I have a box where the airspeed should be, maybe I'm missing the img file or something

flight3

Again, if something is missing, check the browser network tab. It tells if it is not loaded. also it tells the name of file if it is missing. so you can look in the folder and investigate for the reson

Got it!

It shows up on the left bottom instead of the right bottom (where the 6th gauge gap was in @hotNipi's screenshot). Will have to figure out how to reposition...

Looks like the airspeed gauge image can't be found?

@gerry: I want to guess we also need to add the following line to the "Flight" template code?

if(msg.topic == "turn"){
alti.setTurn(msg.payload)
}

I do see that setTurn is defined in the JS folder:

				case 'turn_coordinator':
					$(this).html('<div class="instrument turn_coordinator"><img src="' + settings.img_directory + 'fi_box.svg" class="background box" alt="" /><img src="' + settings.img_directory + 'turn_coordinator.svg" class="box" alt="" /><div class="turn box"><img src="' + settings.img_directory + 'fi_tc_airplane.svg" class="box" alt="" /></div><div class="mechanics box"><img src="' + settings.img_directory + 'fi_circle.svg" class="box" alt="" /></div></div>');
					_setTurn(settings.turn);
				break;

for some reason that img file did not get copied over, found and fixed. Thanks again @hotNipi for the pointer

1 Like

flight4

haven't gotten that far, was pounding on the airspeed thingie (thingie is a aircraft technical term)

Got it! Of course I would trip over the div thing. Ha ha.

did you sort out how to make it turn yet?

First one who shows the turn_coordinator with tilted plain gets the greatest fame and insane applause, bigger than anybody ever seen for today :slight_smile:

1 Like

1 Like

Ha ha. It would the first time I'd been first at anything :wink:

But! Check it out:

The altimeter is idle because I'm driving it with simulation data from a TCP connection that was closed at the moment---but it works :smiley:

well done,
[edit]
but from looking at the gauges you may want to check the pilots blood alcohol level

2 Likes