mastodontech.de ist einer von vielen unabhängigen Mastodon-Servern, mit dem du dich im Fediverse beteiligen kannst.
Offen für alle (über 16) und bereitgestellt von Markus'Blog

Serverstatistik:

1,5 Tsd.
aktive Profile

#augmentedui

0 Beiträge0 Beteiligte0 Beiträge heute
Beko Pharm<p>VFD segment displays in HTML/CSS for my SimPit</p><p>So I dunno if you know what a <a rel="nofollow noopener" class="hashtag u-tag u-category" href="https://beko.famkos.net/tag/vfd/" target="_blank">#VFD</a> (<a href="https://en.wikipedia.org/wiki/Vacuum_fluorescent_display" rel="nofollow noopener" target="_blank">https://en.wikipedia.org/wiki/Vacuum_fluorescent_display</a>) is but I’m a sucker for these – at least virtually.</p><a href="https://beko.famkos.net/wp-content/uploads/2025/05/segments-hello.png" rel="nofollow noopener" target="_blank"></a><p>Games like <a rel="nofollow noopener" class="hashtag u-tag u-category" href="https://beko.famkos.net/tag/rebelgalaxyoutlaw/" target="_blank">#RebelGalaxyOutlaw</a> perfected the look and this is where I want to go with my <a rel="nofollow noopener" class="hashtag u-tag u-category" href="https://beko.famkos.net/tag/arwes/" target="_blank">#Arwes</a> HUD app for my <a rel="nofollow noopener" class="hashtag u-tag u-category" href="https://beko.famkos.net/tag/elitedangerous/" target="_blank">#EliteDangerous</a> / <a rel="nofollow noopener" class="hashtag u-tag u-category" href="https://beko.famkos.net/tag/x4foundations/" target="_blank">#X4Foundations</a> home cockpit too.</p><a href="https://beko.famkos.net/wp-content/uploads/2025/05/rebel-galaxy-outlaw-ingame-screenshot-compressed.jpg" rel="nofollow noopener" target="_blank"></a><p>The segment displays are heavily inspired by <a rel="nofollow noopener" class="hashtag u-tag u-category" href="https://beko.famkos.net/tag/augmentedui/" target="_blank">#AugmentedUI</a> project (<a href="https://augmented-ui.com/" rel="nofollow noopener" target="_blank">https://augmented-ui.com/</a>) 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.</p><p>Video from an earlier stage in the development demos the scan line effect. </p><p>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.</p><a href="https://beko.famkos.net/wp-content/uploads/2025/05/simpit-elite-dangerous-arwes-hud-improvements-02-compressed.jpg" rel="nofollow noopener" target="_blank"></a><p>And yes they are fully themed so switching the colour theme also affects the virtual VFDs.</p><a href="https://beko.famkos.net/wp-content/uploads/2025/05/simpit-elite-dangerous-arwes-hud-improvements-03-compressed.jpg" rel="nofollow noopener" target="_blank"></a><p>I’m also going to replace the older horizontal bars, that look way too boring in comparison.</p><p>It’s still very early but I hope to get some rad animations going too. See <a href="https://www.hudsandguis.com/home/2022/retro-digital-dashboards" rel="nofollow noopener" target="_blank">https://www.hudsandguis.com/home/2022/retro-digital-dashboards</a> to get an idea in which direction this is going 🤓</p><p>See the dedicated project page <a href="https://SimPit.dev" rel="nofollow noopener" target="_blank">https://SimPit.dev</a> for more details on this <a rel="nofollow noopener" class="hashtag u-tag u-category" href="https://beko.famkos.net/tag/macross/" target="_blank">#Macross</a> <a rel="nofollow noopener" class="hashtag u-tag u-category" href="https://beko.famkos.net/tag/vf1/" target="_blank">#VF1</a> inspired <a rel="nofollow noopener" class="hashtag u-tag u-category" href="https://beko.famkos.net/tag/cockpit/" target="_blank">#cockpit</a> panel.</p><p><a href="https://beko.famkos.net/2025/05/04/vfd-segment-displays-in-html-css-for-my-simpit/" class="" rel="nofollow noopener" target="_blank">https://beko.famkos.net/2025/05/04/vfd-segment-displays-in-html-css-for-my-simpit/</a></p><p><a rel="nofollow noopener" class="hashtag u-tag u-category" href="https://beko.famkos.net/tag/arwes/" target="_blank">#arwes</a> <a rel="nofollow noopener" class="hashtag u-tag u-category" href="https://beko.famkos.net/tag/augmentedui/" target="_blank">#augmentedUi</a> <a rel="nofollow noopener" class="hashtag u-tag u-category" href="https://beko.famkos.net/tag/cockpit/" target="_blank">#cockpit</a> <a rel="nofollow noopener" class="hashtag u-tag u-category" href="https://beko.famkos.net/tag/elitedangerous/" target="_blank">#EliteDangerous</a> <a rel="nofollow noopener" class="hashtag u-tag u-category" href="https://beko.famkos.net/tag/homecockpit/" target="_blank">#homeCockpit</a> <a rel="nofollow noopener" class="hashtag u-tag u-category" href="https://beko.famkos.net/tag/macross/" target="_blank">#macross</a> <a rel="nofollow noopener" class="hashtag u-tag u-category" href="https://beko.famkos.net/tag/rebelgalaxyoutlaw/" target="_blank">#RebelGalaxyOutlaw</a> <a rel="nofollow noopener" class="hashtag u-tag u-category" href="https://beko.famkos.net/tag/simpit/" target="_blank">#simpit</a> <a rel="nofollow noopener" class="hashtag u-tag u-category" href="https://beko.famkos.net/tag/vf1/" target="_blank">#VF1</a> <a rel="nofollow noopener" class="hashtag u-tag u-category" href="https://beko.famkos.net/tag/vfd/" target="_blank">#VFD</a> <a rel="nofollow noopener" class="hashtag u-tag u-category" href="https://beko.famkos.net/tag/x4foundations/" target="_blank">#x4foundations</a></p>
Beko Pharm<p>So I dunno if you know what a <a href="https://indieweb.social/tags/VFD" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>VFD</span></a> (<a href="https://en.wikipedia.org/wiki/Vacuum_fluorescent_display" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">en.wikipedia.org/wiki/Vacuum_f</span><span class="invisible">luorescent_display</span></a>) is but I'm a sucker for these - at least virtually. Games like <a href="https://indieweb.social/tags/RebelGalaxyOutlaw" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>RebelGalaxyOutlaw</span></a> perfected the look and this is where I want to go with my app for my <a href="https://indieweb.social/tags/EliteDangerous" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>EliteDangerous</span></a> / <a href="https://indieweb.social/tags/x4foundations" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>x4foundations</span></a> home cockpit too.</p><p>This segment display is heavily inspired by <a href="https://indieweb.social/tags/AugmentedUI" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>AugmentedUI</span></a> project (<a href="https://augmented-ui.com/" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="">augmented-ui.com/</span><span class="invisible"></span></a>) where I'll borrow some more elements. Learned the neat fake scanlines from there too.</p><p>And yes they work by shifting bits under the hood 🤓</p>
Beko Pharm (deprecated)<p>Playing some more with <a href="https://social.tchncs.de/tags/augmentedUI" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>augmentedUI</span></a> (<a href="https://augmented-ui.com/" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="">augmented-ui.com/</span><span class="invisible"></span></a>)</p><p>That's all CSS o0</p>
Beko Pharm<p>Hidden Chubie in AugmentedUI</p><p>I’m not saying that <a rel="nofollow noopener" class="hashtag u-tag u-category" href="https://beko.famkos.net/tag/augmentedui/" target="_blank">#augmentedUi</a> has some easter eggs in it’s documentation but there is at least one Chubie (<a href="https://www.youtube.com/watch?v=AhXoYgB7rPU&amp;t=13693s" rel="nofollow noopener" target="_blank">https://www.youtube.com/watch?v=AhXoYgB7rPU&amp;t=13693s</a>) and a mysterious secret hidden in one of it’s demo elements 🤓</p><p>Had a good chuckle and now I wonder what the secret is. It wasn’t just base64 or rot13 tho 🤔</p><p>Is this a paper chase?</p><p><a href="http://augmented-ui.com/" rel="nofollow noopener" target="_blank">http://augmented-ui.com/</a></p><p><a href="https://beko.famkos.net/2023/02/27/hidden-chubie-in-augmentedui/" class="" rel="nofollow noopener" target="_blank">https://beko.famkos.net/2023/02/27/hidden-chubie-in-augmentedui/</a></p><p><a rel="nofollow noopener" class="hashtag u-tag u-category" href="https://beko.famkos.net/tag/augmentedui/" target="_blank">#augmentedUi</a></p>
Beko Pharm (deprecated)<p>I'm not saying that <a href="https://social.tchncs.de/tags/augmentedUi" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>augmentedUi</span></a> has some easter eggs in it's documentation but there is at least one Chubie (<a href="https://www.youtube.com/watch?v=AhXoYgB7rPU&amp;t=13693s" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://www.</span><span class="ellipsis">youtube.com/watch?v=AhXoYgB7rP</span><span class="invisible">U&amp;t=13693s</span></a>) and a mysterious secret hidden in one of it's demo elements 🤓 </p><p>Had a good chuckle and now I wonder what the secret is. It wasn't just base64 or rot13 tho 🤔 </p><p>Is this a paper chase?</p><p><a href="http://augmented-ui.com/" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">http://</span><span class="">augmented-ui.com/</span><span class="invisible"></span></a></p>