Create aerospace attitude indicator in dashboard?

For others 5 years from now (and to me a few days from now), if you (I) wonder how we got the turn coordinator to work...

You have to add a new if statement to the "Flight" template node code:

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

And you have to add a new variable for the turn coordinator (in that same code):

    var turn = $.flightIndicator('#turn_coordinator', 'turn_coordinator',options);

And you have to add a new HTML container for the turn coordinator (in the first two lines of the "Flight" template code):

<span id="turn_coordinator"></span>

You have to remember to put the <span> element before the end </div> tag.

And finally, if you want to drive the turn coordinator, you need to add a topic named "turn" (if using the code I pasted above exactly) to the message containing the turn data---e.g., using a Set node configured as below (or using the Injector nodes directly as is done to test all other gauges):

set_topic_turn

I think this is all?

1 Like

Huge thanks again to everyone for helping me get these gauges working. And great work on them, @hotNipi. It's very kind of you to share.

Now as you have done it and written it down, you'll most probably remember it for ever, cos that is most effective way to learn.
I'm happy for both of you, well done.

1 Like

Ha ha ha. Why, it's a typical flight, cruise level, calm skies, and all. Can't trust the gauges to always be right, har har.

@gerry, if you get far with the flight gauges and you get them working with a quadcopter (or any other vehicle made with Arduino/Raspberry Pi/etc), please share! I'd be very curious to see, because I'm heading down that path myself.

One year later: Skynet assumes command, and what else is on its dashboard but the six gauges :wink:

my ultimate goal is
I have a 7 inch lcd that fits onto a pi and I'm going to get the mpu9250 working with it all and mount it in my jeep for trail riding to see heading , pitch , etc.

1 Like

Sweet... Good luck!

@hotNipi: For use in node-red, do we need the .min files in the js and css folders or can we ignore them?

Wondering in case I need to change the js/css files. The fewer the files to modify, the easier the job of modifying them :smiley:

Can you say what the .min files are for?

If you don't need to explore the libraries every day to figure out how and what to do with them, of course the best practice is to use .min versions of files. In this case here, the files are pretty small and you use them locally most probably so doesn't make much difference but best practices are always good to follow. You should change that other template to load .min files. And you can delete the others if you want to.

Thanks! So the .min files are the ones to keep if I only keep some. Good to know!

How did you get your dynamic gauges to move so smoothly? I think I saw somewhere that you needed to add extra code for that, but maybe I was imagining things, because I can't find that page anymore. My gauges are working great, but they aren't very smooth yet, so I'm wondering if I can improve that...

#Post 11. But not every gauge in every condition can be smoothed so adding them must be done with care. Add one by one and see the result and adjust the times and be prepared to misbehavior :slight_smile:

Oh I found it, it wasn't in a separate page, it was way above in this thread. The magical code (to paste in CSS):

.roll {
  transition: all 0.5s;
}
.pitch {
  transition: all 0.5s;
}
.vario {
  transition: all 3s;
}
.speed {
  transition: all 5s;
}
.heading{
  transition: all 1s;
}
.needle{
  transition: all 1s;
}
.needleSmall{
  transition: all 1s;
}
.pressure{
  transition: all 2s;
}

It misses the

.turn{
  transition: all 1s;
}

Ahhh. OK, will keep an eye out for unexpected behavior, then. I imagine the problem would be the interpolation between values? What type of interpolation would it be, linear, maybe?

Yep! Can't forget the turn coordinator. Which of course I would have :smiley:

You can adjust however you need.
https://www.w3schools.com/css/css3_transitions.asp

For sure first misbehavior you'll meet is with altimeter in case it steps over the 360 degrees. The animation goes full turn backwards.

Got it, altimeter will break first :ok_hand:

That's why the original does not provide any animations. The gauges are targeted to react to real situation which means fast update so gauges are as smooth as you fly :slight_smile: