VFD segment displays in HTML/CSS for my SimPit

So I dunno if you know what a #VFD (https://en.wikipedia.org/wiki/Vacuum_fluorescent_display) is but I’m a sucker for these – at least virtually.

Games like #RebelGalaxyOutlaw perfected the look and this is where I want to go with my #Arwes HUD app for my #EliteDangerous / #X4Foundations home cockpit too.

The segment displays are heavily inspired by #AugmentedUI project (https://augmented-ui.com/) where I’ll borrow some more elements. Learned the neat fake scan lines from there too. And yes the 8 segment display works by shifting bits under the hood 🤓 This isn’t really needed for an app but I have plans to add some real segment displays eventually (I do have a whole box full with these!) so I wanted to know how to implement this anyway.

Video from an earlier stage in the development demos the scan line effect.

The bars are configured with parameters in size, count, percent, colours and thresholds 😁 I also added a random chance of 5% to shift the hue a little bit because just as in real life nothing is perfect.

And yes they are fully themed so switching the colour theme also affects the virtual VFDs.

I’m also going to replace the older horizontal bars, that look way too boring in comparison.

It’s still very early but I hope to get some rad animations going too. See https://www.hudsandguis.com/home/2022/retro-digital-dashboards to get an idea in which direction this is going 🤓

See the dedicated project page https://SimPit.dev for more details on this #Macross #VF1 inspired #cockpit panel.

https://beko.famkos.net/2025/05/04/vfd-segment-displays-in-html-css-for-my-simpit/

#arwes #augmentedUi #cockpit #EliteDangerous #homeCockpit #macross #RebelGalaxyOutlaw #simpit #VF1 #VFD #x4foundations

So I dunno if you know what a #VFD (https://en.wikipedia.org/wiki/Vacuum_fluorescent_display) is but I'm a sucker for these - at least virtually. Games like #RebelGalaxyOutlaw perfected the look and this is where I want to go with my app for my #EliteDangerous / #x4foundations home cockpit too.

This segment display is heavily inspired by #AugmentedUI project (https://augmented-ui.com/) where I'll borrow some more elements. Learned the neat fake scanlines from there too.

And yes they work by shifting bits under the hood 🤓

You can nab both #rebelgalaxy and #rebelgalaxyoutlaw #videogames for just $1 on Fanatical.

https://www.fanatical.com/en/bundle/rebel-galaxy-and-rebel-galaxy-outlaw-double-pack

I bought Outlaw when it debuted as an Epic Game Store exclusive -- that's how excited I was for it -- and I wasn't disappointed.

https://www.infinitydevil.com/rebel-galaxy-and-outlaw-20241127.html

Rebel Galaxy Outlaw on Linux PC

https://makertube.net/videos/watch/b169d37a-5b8c-4c64-abc4-6eed2743c29d

From the archives #Switch #NindieOfTheDay is #RebelGalaxyOutlaw!

https://nindiespotlight.com/game_profile.cfm?game=rebel-galaxy-outlaw-switch

How to (maybe) present ultra wide screenshots with A-Frame: https://beko.famkos.net/2023/03/17/do-you-like-my-curves/

Demos[1] for

https://beko.famkos.net/aframe-elite-dangerous.html #EliteDangerous
https://beko.famkos.net/aframe-fly-dangerous.html #FlyDangerous
https://beko.famkos.net/aframe-nms.html #NoMansSky
https://beko.famkos.net/aframe-rebel-galaxy-outlaw.html #RebelGalaxyOutlaw
https://beko.famkos.net/aframe-spacebourne2.html #SpaceBourne2
https://beko.famkos.net/aframe-starcitizen.html #StarCitizen
https://beko.famkos.net/aframe-x4-foundations.html #x4foundations

Best viewed on a mobile phone or tablet with gyro but a mouse can be used to move the camera too.

[1] Uses 5MB ext JS