Create aerospace attitude indicator in dashboard?

Makes sense! And that's the way I hope to do it once I make my own quadcopter.

For now I'm driving the gauges with an external simulation running simultaneously (but on the same computer), and I guess the computational burden is enough that... the software can't keep up with it? It's taking about half a second for the gauges to refresh and I'm going to have to figure out why :thinking:

It doesn't help that my simulation data seems to come in spurts: three data points all at once, then nothing for close to a second, then three more data points all at once, then nothing for close to a second, and so on...

Maybe it's the TCP connection that's to blame :thinking:


It may freely be that outgoing data is not real time due the optimizations applied to leave more computing power for more important operations. But that is blind guess...

Yeah, that could be the whole reason, actually... My computer is not real-time. Maybe it's worth looking into real-time machines for the simulation end of this. Even the CSS transitions don't seem to be working...

Wait, the CSS transitions are now working... after I restarted node-red... I guess I need to do that when I change my static folder files... So much smoother now, even if still laggy at times :smiley:

It should apply if you reload the dashboard actually ... clear the cache is next reasonable step...

Hm, I tried many times, actually, but never saw the smooth transitions take effect... I even closed and reopened the dashboard... Not sure why... Reloading the dashboard would seem enough, though...

I take that back... I must not have tried refreshing very much because when I do it now... it actually reflects my CSS changes right away...

With linear CSS transitions of 3s (because ~3s delay between data refresh):

Without transitions:

1 Like

Please remind me to never go flying with you :rofl:


Gee, you let the plane flip once and everyone thinks you're a bad pilot :stuck_out_tongue:

Haven't figured out where that last bit of code goes, can you give me a little bit more of a specific pointer?
The last bit that goes into css

For the smooth CSS transitions? Just go to your .node-red/static/flight/css folder and open your flightindicators.css file. Then set your CSS transition properties---e.g.:

.roll, .pitch, .heading, .speed, .vario, .turn, .pressure, .needle, .needleSmall  {
  transition: all 3s;
  transition-timing-function: linear;	

I set the transition-timing-function property to linear because my instrument data comes in at a super slow rate (literally with 3s lag, which explains why I chose a 3s transition period)... and I didn't want the transition to speed up and slow down and speed up and slow down, as it would have by default. Linear interpolation gives you a constant transition rate.

Just remember that CSS transitions are optional, and they could work against you. If your data refreshes at a sufficiently high rate, then you might want to avoid them altogether (since transitions are just interpolations between last and current states, and so do not reflect the instantaneous state of your vehicle). If your data refreshes at a high rate, then you probably don't need transitions anyway.

@hotNipi warned also that exceeding certain data ranges could make your instruments do weird things---like loop backward if your pointer goes over 360 degrees. The altimeter seems vulnerable to this.

Hi! I just tried to implement this cool dashboard. I do have knowledge about node-red so not a total beginner. I have a strange issue though which I cannot wrap my head around. There is one step that goes wrong each time for me. The minute I configure statichttp in settings.js to configure the path to the css files, my dashboard ui crashes. The url can either not be loaded (plugin not found) or it says, please add some dashboard nodes.

When I disable the statichttp, all returns to normal, but then the files are not loaded. The dashboard UI page will start working again, but without a fully configured dashboard.

I have the fealing that when I configure the static path, the dashboard-ui or node-red is missing critical files to use the dashboard ui.

I tried an alternative solution, which is to find out what the default static path is. I do need to point out that my installation of node-red is a little bit different. I am running a programm called SignalK on a raspberry pi (a marine open standard) and use a node red embedded plugin, so the installation directory is not default.

This means I have these folders:

/home/pi/.signalk/red (In here there is no settings.js file, this is managed elsewhere)
/home/pi/.signalk/node_modules/node-red (this does contain a settings.js file, but when editing the httpstatic folder, it doesn't do anything also not after reboot) example:


How settings.js is managed, is through a signalk plugin.

When applying this, the dashboard itself will crash.
I have also asked the developers of Signalk, but I just wanted to try if anyone in here has any other ideas of what is happening.

Have you stop/started Node-RED after making the change? And cleared your browser cache?

Hi, I have restarted the Pi (the normal stop start commands don't work on my install, also not through systemctl) but I hope rebooting would be the same thing. I have also cleared the browser cache. Unfortunately this didn't work. It is just as if the entire dashboard ui plugin cannot be found anymore after setting the static path.

Since this node-red is running as a plug-in to Signalk you should ask them about this

Yes, thought so, will do