X-Git-Url: https://fortfriendship.online/gitweb/gnargle.github.io.git/blobdiff_plain/2136fb66a999a81a0a802f98b74cd6caee70156d..9cce12bac04dee8b7e4b5bfc44ce30939717faa4:/projects/pipboy.html?ds=inline diff --git a/projects/pipboy.html b/projects/pipboy.html index 582a5d6..6301f48 100644 --- a/projects/pipboy.html +++ b/projects/pipboy.html @@ -354,7 +354,7 @@ />

- So we want tio draw something to screen that isnt just text, + So we want tio draw something to screen that isn't just text, next. So I need to dive into some docs. More updates in a bit...

Code Updated. Check the github link to keep up. @@ -411,7 +411,176 @@ need to find one and run the icons for various perks etc through them, and we can get one displaying.

-

in fact, maybe that's what we do next. BRB...

+

In fact, maybe that's what we do next. BRB...

+ Code Updated. Check the github link to keep up. +

+ Excellent, here's one, first hit on google. + image2cpp + Let's run the Cherchez La Femme image through it and upload it + to the machine aaaand... +

+ + A screenshot of the espruino terminal reading 'New interpreter error: LOW_MEMORY,MEMORY' + +

+ So, that's not good. In fairness, I am loading a 167x167 bitmap + into memory here, I suppose it makes sense that that wouldn't + exactly work. But it is going to make this more difficult. +

+

+ Next question then. What is a reasonable maximum array size we + can use here? Time to experiment. We'll start with half the + resolution, 83x83. +

+ + A photo of the pipboy screen showing garbage in a square. + +

+ OK, it's displaying, but that's clearly not right. Here's what + it's supposed to look like: +

+ + The Cherchez La Femme perk icon from New Vegas + +

+ That's ok though, there's options on the converter for just this + predicament. This was the default (Horizontal - 1bpp), and + Vertical - 1bpp landed similar results, so let's move on from + that converter and use the one hosted on + Espruino's website + instead. Man I'm really proving myself soooo smart today. +

+

+ Using the right tool for the job gives us this! And it's even + full resolution! Huzzah! +

+ + A photo of the pipboy screen showing the Cherchez La Femme icon. + +

+ OK, that's real, genuine progress. We can encode images and + display them, which we need for the perks screen. They are + pretty big though, so I think next order of business is going to + be keeping those strings in text files and loading them in when + we need to. Back to the docs... Although I might leave it there + tonight, my back hurts. No wonder Zuck had to be 19 to do this + live. +

+
+

Loading from files

+

21/03/2025

+
+

Evening! Let's get right back to work.

+

+ 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. +

+

+ So, first up: storing and loading the image. This is gonna need + me to look up how the espruino fs library works. BRB... +

+ Code Updated. Check the github link to keep up. + + A screenshot of the pipboys serial connection in vscode showing the file read from disk. + +

+ 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! +

+

OK, next up, we swap images on the fly.

+ Code Updated. Check the github link to keep up. + +

+ 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. +

+

+ 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. +

+ Code Updated. Check the github link to keep up. +

+ Hoooo boy I spent a while here huh! So much for 'live' blogging. +

+ + 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. + +

+ 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! +

+

+ 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. +

+

+ 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. +

+ + Another photo of the pipboy showing the perk menu. Now Cherchez La femme, second in the list, is selected. + +

+ 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. +

+

+ 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! +