</p>
<a href="../img/projects/pipboy/errorlowmem.png">
<img
- class="blog-img"
+ class="blog-img-lrg"
src="../img/projects/pipboy/errorlowmem.png"
alt="A screenshot of the espruino terminal reading 'New interpreter error: LOW_MEMORY,MEMORY'"
/>
<b>Code Updated. Check the github link to keep up.</b>
<a href="../img/projects/pipboy/imgstringdump.png">
<img
- class="blog-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."
/>
</p>
<p>OK, next up, we swap images on the fly.</p>
<b>Code Updated. Check the github link to keep up.</b>
- <video src="../img/projects/pipboy/pipboyperkswitch.mp4"></video>
+ <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,
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">Chasing accuracy</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>
+ <b>Code Updated. Check the github link to keep up.</b>
+ <p>
+ Ooookay, a lot has happened since I said I'd check the firmware.
+ Here's the current state of the screen:
+ </p>
+ <a href="../img/projects/pipboy/accurateLayout.jpg">
+ <img
+ class="blog-img-lrg"
+ src="../img/projects/pipboy/accurateLayout.jpg"
+ alt="A photo of the pipboy on the perks screen. The perk title is now boxed with green pixels, with the text in black. The font of all text is also accurate to the game now."
+ />
+ </a>
+ <p>
+ So, like I said, I dove into the firmware code. I found quite a
+ lot of interesting stuff in there while trying to figure out how
+ they did the black on white textbox. Let's run through.
+ </p>
+ <p>
+ Top of the order - there are three foreground colours the pipboy
+ can draw in, 0-3. These are actually different brightnesses of
+ the pixels. So drawing a fullbright pixel is colour 3, an off
+ pixel is colour 0, but there's also colours 1 and 2 which are
+ slightly dimmer on colours!
+ </p>
+ <p>
+ This is how the fading 'Attachment' and 'Aid' labels at the top
+ are drawn, although it's not very clear in the photos I've
+ taken.
+ </p>
+ <p>
+ I actually discovered this by accident - I saw a setColor(0) in
+ the firmware and deduced that was black, so then I added that in
+ to my drawing code - but in so doing I also set the colour of
+ everything not black to setColor(1), which made everything
+ dimmer.
+ </p>
+ <p>
+ This was a bit of a eureka moment - I'd figured out that there
+ were roughly 4 colours displayed on screen but earlier assumed
+ this was all dithering after my experiments a few days ago.
+ Turns out I was right all along! Ha-HA!
+ </p>
+ <p>
+ So, using this new knowledge, I've added correct coloring to
+ everything. I've also chosen to dim the perk image a shade and I
+ think it makes it look really good. The full brightness was
+ overpowering some of the details of the icons.
+ </p>
+ <p>
+ While digging, I also found an interesting function call:
+ setFontMonofonto18(). This was a call on the graphgics context
+ and was pretty self-explanatory.
+ </p>
+ <p>
+ The thing is, I'd noticed my fonts were a bit off. They weren't
+ as tall as they should have been. Turns out, that's because
+ there's a custom font in use, but only when you specifically set
+ it. So because I was just using setFontVector() instead of these
+ Monofonto calls, the font was getting set back to the default
+ Espruino vector font.
+ </p>
+ <p>
+ Ctrl-F-ing 'Monofonto' in the firmware dump showed up a few
+ similar calls, listed here for convenience:
+ </p>
+ <ul>
+ <li>setFontMonofonto16</li>
+ <li>setFontMonofonto18</li>
+ <li>setFontMonofonto23</li>
+ <li>setFontMonofonto28</li>
+ <li>setFontMonofonto96</li>
+ <li>setFontMonofonto120</li>
+ </ul>
+ <p>
+ I assumed Monofonto was the font name, and tried to plug it in
+ to a few of the Espruino font functions, but got errors each
+ time, which was troubling. Giving it a quick duckduckgo
+ presented an excellent result:
+ <a href="https://www.dafont.com/monofonto.font"
+ >DaFont Monofonto.</a
+ >
+ Turns out the font used on the pip-boy (and presumably in the
+ actual game!) is freely available to download. Perfect!
+ </p>
+ <p>
+ With that in hand, I looked at the Espruino setCustomFont call,
+ and with a smidge more docs digging I found
+ <a href="https://www.espruino.com/Font+Converter">this page</a>
+ that converts a font and size into a graphics context function
+ call - just like the ones already in the firmware!
+ </p>
+ <p>
+ This was perfect. I plugged in the font and set size to 14,
+ dropped the code in my file, and now my description is in the
+ correct font. I used the pre-existing setFontMonofonto18 for the
+ Title - 16 was proving a little too small, and other menus in
+ the device are size 18.
+ </p>
+ <p>
+ I'm honestly over the moon about this. I had kind of already
+ settled for things not looking quite right, but with a bit of
+ digging, I solved basically all the imparities with the games.
+ </p>
+ <p>
+ What that isn't, though, is input. Which was the title of this
+ update (I've changed it now). So I'll tackle that next!
+ </p>
</div>
</div>
</div>
projects / gnargle.github.io.git / blobdiff