# Create aerospace attitude indicator in dashboard?

**URL:** <https://discourse.nodered.org/t/create-aerospace-attitude-indicator-in-dashboard/40957>\
**Category:** Dashboard\
**Created:** [14 February 2021 05:10 UTC](https://discourse.nodered.org/t/create-aerospace-attitude-indicator-in-dashboard/40957 "2021-02-14T05:10:40Z")\
**Posts on this page:** 20\
**Page:** 4

<div class="post-metadata">

**Author:** ![a1ex](https://avatars.discourse-cdn.com/v4/letter/a/3be4f8/32.png) [@a1ex](https://discourse.nodered.org/u/a1ex)\
**Post date:** [14 February 2021 20:21 UTC](https://discourse.nodered.org/t/create-aerospace-attitude-indicator-in-dashboard/40957/61 "2021-02-14T20:21:43Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![gerry](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gerry/32/21604_2.png) [@gerry](https://discourse.nodered.org/u/gerry)\
**Post date:** [14 February 2021 20:22 UTC](https://discourse.nodered.org/t/create-aerospace-attitude-indicator-in-dashboard/40957/62 "2021-02-14T20:22:40Z")

</div>

four gauges showing

---

<div class="post-metadata">

**Author:** ![gerry](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gerry/32/21604_2.png) [@gerry](https://discourse.nodered.org/u/gerry)\
**Post date:** [14 February 2021 20:26 UTC](https://discourse.nodered.org/t/create-aerospace-attitude-indicator-in-dashboard/40957/63 "2021-02-14T20:26:18Z")

</div>

got the turn coordinator working but still no airspeed

---

<div class="post-metadata">

**Author:** ![a1ex](https://avatars.discourse-cdn.com/v4/letter/a/3be4f8/32.png) [@a1ex](https://discourse.nodered.org/u/a1ex)\
**Post date:** [14 February 2021 20:27 UTC](https://discourse.nodered.org/t/create-aerospace-attitude-indicator-in-dashboard/40957/64 "2021-02-14T20:27:54Z")

</div>

![gauges](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/5/f5d08d016eeb2f3205d9f46ac301cadf20d04093.png)

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 😃

---

<div class="post-metadata">

**Author:** ![a1ex](https://avatars.discourse-cdn.com/v4/letter/a/3be4f8/32.png) [@a1ex](https://discourse.nodered.org/u/a1ex)\
**Post date:** [14 February 2021 20:29 UTC](https://discourse.nodered.org/t/create-aerospace-attitude-indicator-in-dashboard/40957/65 "2021-02-14T20:29:10Z")

</div>

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 class="post-metadata">

**Author:** ![gerry](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gerry/32/21604_2.png) [@gerry](https://discourse.nodered.org/u/gerry)\
**Post date:** [14 February 2021 20:31 UTC](https://discourse.nodered.org/t/create-aerospace-attitude-indicator-in-dashboard/40957/66 "2021-02-14T20:31:27Z")

</div>

```auto
<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

---

<div class="post-metadata">

**Author:** ![gerry](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gerry/32/21604_2.png) [@gerry](https://discourse.nodered.org/u/gerry)\
**Post date:** [14 February 2021 20:36 UTC](https://discourse.nodered.org/t/create-aerospace-attitude-indicator-in-dashboard/40957/67 "2021-02-14T20:36:21Z")

</div>

![flight3](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/2/22cec0bb136a00b443c702af064f522cad6b8ed8.jpeg)

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [14 February 2021 20:38 UTC](https://discourse.nodered.org/t/create-aerospace-attitude-indicator-in-dashboard/40957/68 "2021-02-14T20:38:42Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![a1ex](https://avatars.discourse-cdn.com/v4/letter/a/3be4f8/32.png) [@a1ex](https://discourse.nodered.org/u/a1ex)\
**Post date:** [14 February 2021 20:39 UTC](https://discourse.nodered.org/t/create-aerospace-attitude-indicator-in-dashboard/40957/69 "2021-02-14T20:39:44Z")

</div>

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...

---

<div class="post-metadata">

**Author:** ![a1ex](https://avatars.discourse-cdn.com/v4/letter/a/3be4f8/32.png) [@a1ex](https://discourse.nodered.org/u/a1ex)\
**Post date:** [14 February 2021 20:40 UTC](https://discourse.nodered.org/t/create-aerospace-attitude-indicator-in-dashboard/40957/70 "2021-02-14T20:40:20Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![a1ex](https://avatars.discourse-cdn.com/v4/letter/a/3be4f8/32.png) [@a1ex](https://discourse.nodered.org/u/a1ex)\
**Post date:** [14 February 2021 20:43 UTC](https://discourse.nodered.org/t/create-aerospace-attitude-indicator-in-dashboard/40957/71 "2021-02-14T20:43:57Z")

</div>

@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:

```auto
				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;

```

---

<div class="post-metadata">

**Author:** ![gerry](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gerry/32/21604_2.png) [@gerry](https://discourse.nodered.org/u/gerry)\
**Post date:** [14 February 2021 20:43 UTC](https://discourse.nodered.org/t/create-aerospace-attitude-indicator-in-dashboard/40957/72 "2021-02-14T20:43:59Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![gerry](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gerry/32/21604_2.png) [@gerry](https://discourse.nodered.org/u/gerry)\
**Post date:** [14 February 2021 20:45 UTC](https://discourse.nodered.org/t/create-aerospace-attitude-indicator-in-dashboard/40957/73 "2021-02-14T20:45:16Z")

</div>

![flight4](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/2/0297f60b9dbf7c6ff47eeeb1d0edcb39f8cfc481.jpeg)

---

<div class="post-metadata">

**Author:** ![gerry](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gerry/32/21604_2.png) [@gerry](https://discourse.nodered.org/u/gerry)\
**Post date:** [14 February 2021 20:46 UTC](https://discourse.nodered.org/t/create-aerospace-attitude-indicator-in-dashboard/40957/74 "2021-02-14T20:46:25Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![a1ex](https://avatars.discourse-cdn.com/v4/letter/a/3be4f8/32.png) [@a1ex](https://discourse.nodered.org/u/a1ex)\
**Post date:** [14 February 2021 20:50 UTC](https://discourse.nodered.org/t/create-aerospace-attitude-indicator-in-dashboard/40957/75 "2021-02-14T20:50:01Z")

</div>

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

 ![gauges_all](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/a/7ae7115cb75e9485fe9f39dec3fa5223443f3dfd.png)

---

<div class="post-metadata">

**Author:** ![gerry](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gerry/32/21604_2.png) [@gerry](https://discourse.nodered.org/u/gerry)\
**Post date:** [14 February 2021 20:50 UTC](https://discourse.nodered.org/t/create-aerospace-attitude-indicator-in-dashboard/40957/76 "2021-02-14T20:50:52Z")

</div>

did you sort out how to make it turn yet?

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [14 February 2021 20:58 UTC](https://discourse.nodered.org/t/create-aerospace-attitude-indicator-in-dashboard/40957/77 "2021-02-14T20:58:54Z")

</div>

First one who shows the turn\_coordinator with tilted plain gets the greatest fame and insane applause, bigger than anybody ever seen for today 🙂

---

<div class="post-metadata">

**Author:** ![gerry](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gerry/32/21604_2.png) [@gerry](https://discourse.nodered.org/u/gerry)\
**Post date:** [14 February 2021 21:00 UTC](https://discourse.nodered.org/t/create-aerospace-attitude-indicator-in-dashboard/40957/78 "2021-02-14T21:00:50Z")

</div>

![flight5](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/f/4f5b82e49283c4533e7c207824c5817074ea6b7a.jpeg)

---

<div class="post-metadata">

**Author:** ![a1ex](https://avatars.discourse-cdn.com/v4/letter/a/3be4f8/32.png) [@a1ex](https://discourse.nodered.org/u/a1ex)\
**Post date:** [14 February 2021 21:06 UTC](https://discourse.nodered.org/t/create-aerospace-attitude-indicator-in-dashboard/40957/79 "2021-02-14T21:06:21Z")

</div>

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

But! Check it out:

 ![yay](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/9/690171642d797ab1eb0f1b72ee451a2eb3877fa5.gif)

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 😃

---

<div class="post-metadata">

**Author:** ![gerry](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gerry/32/21604_2.png) [@gerry](https://discourse.nodered.org/u/gerry)\
**Post date:** [14 February 2021 21:06 UTC](https://discourse.nodered.org/t/create-aerospace-attitude-indicator-in-dashboard/40957/80 "2021-02-14T21:06:56Z")

</div>

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

[Previous page](https://discourse.nodered.org/t/create-aerospace-attitude-indicator-in-dashboard/40957.md?page=3)

[Next page](https://discourse.nodered.org/t/create-aerospace-attitude-indicator-in-dashboard/40957.md?page=5)