Hylke Bons 🥜
RE: https://mastodon.social/@hbons/115684542795059829
several people told me (unprompted) that they liked my "micro dev blogging" for Bobby on here.
so fave if you want to see my failures in real time for the next one. :)
alright let's get started!
got a backend that mirrors+archives to SQLite (hence Bobby) space weather data from the NOAA. and you'll be able to self-host a mirror.
now to write a beautiful aurora dashboard in #gtk #libadwaita UI!
the NOAA space weather data does not have an API. it's a bunch of undocumented random .json files behind a CDN that sometimes partially cuts cached files.
so I wanted to have something reliable to work with first.
it's... interesting for an official government agency... 🤨
hitting the ground running because of all the code reuse. thanks Bobby. :)
been a while since I used a Grid (probably GTK2 days). and being able to set relative positions to other items is a lot more intuitive and less clunky than hardcoding edge numbers.
also <sub> and <sup> texts are working nicely for scientific notations! 📊
adding ✨.
almost done with the low hanging fruit. now need to add graphs over time.
best way to do that?
boom. bar charts. 📊
just using a GtkFrame and styling with CSS.
the line graph will be trickier, but thinking about generating an SVG and displaying that.
TIL about GtkLevelBar.
GtkProgressBar's lost brother from an other mother.
just set the min/max and a value. convenient!
#libadwaita has a handy .accent CSS class for labels.
using that (+bold) to highlight when measurements are good or heading in the right direction.
adding a main summary card for those not yet familiar interpreting the numbers.
I wonder if I can turn this into a widget that goes next to the weather in the shell?
adding a small inline ⚠️ icon and suddenly your eyes have a kind of anchor from which to explore the rest of the text.
sometimes decorations are good.
got some line graphs going using SVG and with the system accent colour.
still blurry and need to iterate on the style, but it's a start. 📉
using the .warning CSS class to highlight upcoming high Kp values. 🚨
the threshold will be configurable in Preferences and/or based on your location.
settling on the layout. I think this will be it for the first release.
funky colours that match the wallpaper totally by accident... 😉
also added a #fediverse hashtag graph. arguably the best indicator!
ok, light theme! ☀️
cards use the same colour as windows. so I'm slightly changing the base window colour to the one used in sidebars (like in Files).
GTK doesn't seem to have a .dark or .light CSS selector. so had to manually toggle a class and listen for the dark mode signal. no big deal.
Emmanuele Bassi
taye@ebassi @hbons @media `light-dark()` is also a good method (dunno if GTK supports it)
--bg-color: light-dark(#efedea, #223a2c);
https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/light-dark
light-dark() - CSS | MDN
The light-dark() CSS <color> function enables setting two colors for a property - returning one of the two colors options by detecting if the developer has set a light or dark color scheme or the user has requested light or dark color theme - without needing to encase the theme colors within a prefers-color-scheme media feature query. Users are able to indicate their color-scheme preference through their operating system settings (e.g., light or dark mode) or their user agent settings. The light-dark() function enables providing two color values where any <color> value is accepted. The light-dark() CSS color function returns the first value if the user's preference is set to light or if no preference is set and the second value if the user's preference is set to dark.