+ <div class="title-block">
+ <h3 class="blog-title">Loading from files</h3>
+ <h3 class="datestamp">21/03/2025</h3>
+ </div>
+ <p>Evening! Let's get right back to work.</p>
+ <p>
+ Yesterday, we figured out how to correctly convert and display
+ an image on the screen. Today,we're going to figure out storing
+ those images, loading them at runtime, and switching to another
+ image later.
+ </p>
+ <p>
+ So, first up: storing and loading the image. This is gonna need
+ me to look up how the espruino fs library works. BRB...
+ </p>
+ <b>Code Updated. Check the github link to keep up.</b>
+ <a href="../img/projects/pipboy/imgstringdump.png">
+ <img
+ class="blog-img-lrg"
+ src="../img/projects/pipboy/imgstringdump.png"
+ alt="A screenshot of the pipboys serial connection in vscode showing the file read from disk."
+ />
+ </a>
+ <p>
+ Well that was tremendously easy. First try baby, finally I'm not
+ completely stupid about something! We're gaming! I would take a
+ photo of the screen but I didn't change the image's position so
+ it looks exactly the same. but rest assured it is there!
+ </p>
+ <p>OK, next up, we swap images on the fly.</p>
+ <b>Code Updated. Check the github link to keep up.</b>
+ <video width="672" height="378" class="video-embed" controls>
+ <source
+ src="../img/projects/pipboy/pipboyperkswitch.mp4"
+ type="video/mp4"
+ />
+ Your browser does not support the video tag.
+ </video>
+ <p>
+ Done! Again! Wow we're going win after win today. Apart from the
+ weird bit of artifacting in the top left of the image there,
+ but, er... I'm sure that's fine. Let's ignore it for now. We'll
+ see if it continues with other images.
+ </p>
+ <p>
+ OK, so this is actually a fair cut through the work we need to
+ do here. So let's structure the screen a bit, and add the name
+ and descriptions.
+ </p>
+ <b>Code Updated. Check the github link to keep up.</b>
+ <p>
+ Hoooo boy I spent a while here huh! So much for 'live' blogging.
+ </p>
+ <a href="../img/projects/pipboy/perklist1.jpg">
+ <img
+ class="blog-img-lrg"
+ src="../img/projects/pipboy/perklist1.jpg"
+ alt="A photo of the pipboy screen showing a decent approximation of the perk menu from FO3/NV. Action Girl is selected and shows its icon and description."
+ />
+ </a>
+ <p>
+ While I've been gone I basically drew the rest of the fucking
+ owl. Look! It's the screen from the game! Pretty much
+ completely!
+ </p>
+ <p>
+ There's some artistic license; in-game the perk description
+ displays in the same column as the image, but the available area
+ there is too small to display it readably on screen, so I've
+ bannered it at the bottom instead.
+ </p>
+ <p>
+ But yeah, we've got the basics of the screen here! The list of
+ perks, the box around the selected one, the image, the
+ description. They're all loaded dynamically from the list of
+ files on the SD card, and I've just gone in and tested the
+ reselection with a timeout, and hot damn, it works.
+ </p>
+ <a href="../img/projects/pipboy/perklist2.jpg">
+ <img
+ class="blog-img-lrg"
+ src="../img/projects/pipboy/perklist2.jpg"
+ alt="Another photo of the pipboy showing the perk menu. Now Cherchez La femme, second in the list, is selected."
+ />
+ </a>
+ <p>
+ Additionally, if you're code digging, you'll see I've done a
+ bunch of reorganisation. While I was hacking before, I've gone
+ in and refactored and made all of this actually functionally
+ useful for building up the application proper.
+ </p>
+ <p>
+ Next thing, then, is input. Which hopefully, shouldn't be too
+ bad? I'll tackle that at some point over the weekend. Then it's
+ just filling the rest of the perk data (and fixing whatever is
+ wrong with the action girl image) and presto, that's a screen!
+ </p>
+ <b>Code Updated. Check the github link to keep up.</b>
+ <p>
+ OK I lied did a tiny bit more tonight. It's some housekeeping
+ code - I wanted to make sure the images displayed centrally if
+ they were cropped to just their actual data, any rows of empty
+ pixels around them removed.
+ </p>
+ <p>
+ This turned out to be a smart decision - It saves space, it
+ looks nice, and it meant I redid the action girl icon with its
+ bit of corrupted data, a bug I would have otherwise inevtiably
+ ignored until the end. No photos right now because not much has
+ actually changed but it's good and sets us up for just
+ implementing the manual selection now.
+ </p>
+ <div class="title-block">
+ <h3 class="blog-title">Time to solve input</h3>
+ <h3 class="datestamp">22/03/2025</h3>
+ </div>
+ <p>
+ Good morning! I'm up bright and early to continue my vital work.
+ </p>
+ <p>
+ Actually, I've already started. I looked up what the perk menu
+ looks like in Fallout 4 to check if there a) is one other than
+ the chart (there is) and b) if what I'm making is accurate to
+ that.
+ </p>
+ <p>
+ And it mostly is, but the selection box around the perk in the
+ list is actually all green and the text is black, see the below
+ image.
+ </p>
+ <a href="../img/projects/pipboy/pipboyfo4.png">
+ <img
+ class="blog-img-lrg"
+ src="../img/projects/pipboy/pipboyfo4.png"
+ alt="A screenshot of Fallout 4 showing the pipboy open on the perks screen."
+ />
+ </a>
+ <p>
+ So I kinda want to recreate that. Doing so would be useful as
+ it'll also bring my selection menu in line with some of the
+ official submenus on the device as well, making the app look
+ more official :)
+ </p>
+ <p>
+ This is what I've got so far - I couldn't get the text to draw
+ in black so I settled on a halftone selection box instead. I'm
+ still not completely happy with it though and want to get as
+ close to accurate as I can, so I'm going to dive into the
+ firmware and see if I can divine how it does the black on white.
+ </p>
+ <a href="../img/projects/pipboy/halftoneselection.jpg">
+ <img
+ class="blog-img-lrg"
+ src="../img/projects/pipboy/halftoneselection.jpg"
+ alt="A photo of the pipboy on the perks screen, showing the selected perk title with a grey box behind it.."
+ />
+ </a>
projects / gnargle.github.io.git / blobdiff