+ <div class="title-block">
+ <h3 class="blog-title">Actually doing input this time</h3>
+ <h3 class="datestamp">22/03/2025</h3>
+ </div>
+ <p>
+ OK we're back again baby. And this time I swear I am going to do
+ input. To show willing I've even already started diving into the
+ firmware to work out how it's done!
+ </p>
+ <a href="../img/projects/pipboy/firmwareInputListener.png">
+ <img class="blog-img-lrg"
+ src="../img/projects/pipboy/firmwareInputListener.png" alt="A
+ screenshot of the dumped firmware. It notably shows a function
+ 'd' and a call Pip.on('knob1', d)")." />
+ </a>
+ <p>
+ So that firmware screenshot tells us all we need to know,
+ really. The Pip object has some events (in this case, 'knob1',
+ which is a) funny and b) the left hand wheel control) one which
+ you can register functions to call.
+ </p>
+ <p>
+ This screenshot is from the portion of the code that handles
+ switching between the different health animations, but this
+ applies anywhere really. So what we need to do is:
+ </p>
+ <ul>
+ <li>Create a listener and register it</li>
+ <li>
+ Make sure we play the knob click audio like the rest of the
+ device does
+ </li>
+ <li>Move our selection up and down the list with each click</li>
+ </ul>
+ <p>Pretty simple! OK, lets go do that.</p>
+ <b>Code Updated. Check the github link to keep up.</b>
+ <p>And look at that! We're done.</p>
+ <video width="672" height="378" class="video-embed" controls>
+ <source
+ src="../img/projects/pipboy/inputWorking.mp4"
+ type="video/mp4"
+ />
+ Your browser does not support the video tag.
+ </video>
+ <p>
+ Nothing really special to talk about here, just some basic
+ increment/decrement handling and looping back to the start of
+ the list when necessary.
+ </p>
+ <p>
+ There is a specific wrinkle of having to deregister the input
+ event. Early on in my testing I hadn't done that and it kept the
+ .js loaded even after removing the SD card, which meant it
+ looked like any edits I made weren't actually working. In order
+ to prevent this I added gracefulClose() which deregisters the
+ handler and shows the main menu again.
+ </p>
+ <p>
+ Last thing here is really to handle what happens when we have
+ more perks than will fit in our available space. Then this
+ screen is basically done!
+ </p>
+ <b>Code Updated. Check the github link to keep up.</b>
+ <p>
+ And now that's done too! Couple of bugs with loading the right
+ files to list (primarily loading too many) but smart use of the
+ modulo operator and we're done! I filled in every perk I think
+ is funny and applicable to me, did some manual edits to some of
+ the icons (new vegas icons seem to generally be less optimised
+ for a real monochrome display, a rare instance where Bethesda's
+ attention to detail is better than Obsidian's) and filled in all
+ their data and, well, that's it!
+ </p>
+ <video width="672" height="378" class="video-embed" controls>
+ <source
+ src="../img/projects/pipboy/fullscreendemo.mp4"
+ type="video/mp4"
+ />
+ Your browser does not support the video tag.
+ </video>
+ <p>
+ I'm pretty happy with it! This was a really enjoyable project
+ and let me flex a lot of the muscles I don't tend to use a lot
+ in my pure software day-to-day.
+ </p>
+ <p>
+ I might come back to this later and make a second screen with
+ stats on it, but that's basically the same layout etc as the
+ perks screen just with a number, so I probably won't write it
+ up.
+ </p>
+ <p>
+ So yeah, for now, I'll leave it here. Thank you for reading and
+ following my thought processes, if you did!
+ </p>
+ <b>Code Updated. Check the github link to keep up.</b>
+ <p>
+ OK I LIED one last update. I wanted to handle the selector on
+ the right moving away from INV gracefully. Until now, switching
+ this while in the app would do nothing, and to get around this I
+ had the click in of the left wheel as the 'return me to the main
+ menu' key. That's not very accurate to how it should work,
+ though.
+ </p>
+ <p>
+ So I dove into the firmware again and after a few false starts I
+ found checkMode(). This is called on a timer in all the other
+ apps every 50 milliseconds. I experimented a little with this
+ timeout in my app - 50ms made the perk list feel laggy (because
+ I'm loading data from disk so ops take a bit more time than
+ everything else in the system) so I tweaked it up to 100ms,
+ which was a nice compromise.
+ </p>
+ <p>
+ Twiddling the mode dial triggers a menu change, but I also made
+ sure to gracefully shutdown when a change was detected - this
+ includes running showMainMenu(), which if we don't do the
+ control handlers don't get registered properly. Important.
+ </p>
+ <p>
+ I also dropped in a handler for the torch button - it does
+ nothing other than shutdown and activate the torch normally.
+ While testing this I actually found a bug with the current
+ firmware - if you stay on the torch page and the time changes,
+ the footer will display over the torch screen. Neat!
+ </p>
+ <p>Anyway that is really it this time. Thanks for reading <3</p>
+ <div class="title-block">
+ <h3 class="blog-title">The Stats Screen</h3>
+ <h3 class="datestamp">22/03/2025</h3>
+ </div>
+ <p>
+ OK I WORKED ON IT A BIT MORE but as mentioned it wasn't
+ particularly exciting - this actually reuses basically all the
+ same code, with just a smidge more for drawing the skill points.
+ </p>
+ <p>
+ I did actually have all the skills in one big JSON but it caused
+ an out of memory error, so I abandoned it and went back to
+ individual files for each skill.
+ </p>
+ <p>Anyway, here's it working!</p>
+ <video width="672" height="378" class="video-embed" controls>
+ <source
+ src="../img/projects/pipboy/statScreen.mp4"
+ type="video/mp4"
+ />
+ Your browser does not support the video tag.
+ </video>
+ <div class="title-block">
+ <h3 class="blog-title">The Special Screen</h3>
+ <h3 class="datestamp">23/03/2025</h3>
+ </div>
+ <p>
+ Final update! I added the SPECIAL screen too, and reordered the
+ screens to match the in-game pipboy. Finally I also did some TLC
+ to make the app a lot more responsive and reduce redraws, so now
+ it feels really snappy :)
+ </p>
projects / gnargle.github.io.git / blobdiff