/>
</a>
<p>
- 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...
</p>
+ <b>Code Updated. Check the github link to keep up.</b>
+ <p>
+ OK, first thing I want to do is draw a square. Which means we
+ need to understand how the graphics buffer is working. See,
+ right here, in the dump of the buffer of the main portion of the
+ screen, is some interesting evidence.
+ </p>
+ <a href="../img/projects/pipboy/firmwarebCbuffer.png">
+ <img
+ class="blog-img"
+ src="../img/projects/pipboy/firmwarebCbuffer.png"
+ alt="A screenshot of an the graphics context in the pip boy firmware."
+ />
+ </a>
+ <p>
+ The interesting thing here is 'UInt8.' This is an array of 8bit
+ integers. This could mean the pixels are rendered as 3-byte RGB
+ values, with the r and b just ignored, or it could mean each bit
+ in the byte is a pixel, and the different tones is achieved
+ using dithering. Right now, I'm not sure!
+ </p>
+ <p>So, to find out, we're gonna draw three squares.</p>
+ <a href="../img/projects/pipboy/squares.jpg">
+ <img
+ class="blog-img-lrg"
+ src="../img/projects/pipboy/squares.jpg"
+ alt="A photo of the pipboy screen showing 3 16x16 squares. One is slightly dimmer than the other two."
+ />
+ </a>
+ <p>
+ And there we have it! Three squares. Now if we look at the code
+ I've written, and note that the middle square is the dimmest of
+ the three, we can deduce...
+ </p>
+ <a href="../img/projects/pipboy/squarecode.png">
+ <img
+ class="blog-img"
+ src="../img/projects/pipboy/squarecode.png"
+ alt="A screenshot of the code to make the three squares. The three are commented 'full byte pp', 'dithered square', and 'fullbright square'"
+ />
+ </a>
+ <p>
+ That I was completely wrong and the screen is compeltely
+ monochrome, and any dimming is done by dithering. I'm so glad
+ I'm liveblogging this so everyone can see how stupid I am.
+ </p>
+ <p>
+ That's ok though! We're here to learn, and this actually makes
+ things relatively nice and easy. I'm sure there are monochrome
+ image -> uint arrays somewhere out there one the web already,
+ thisn is a very common format on embedded platforms, so I just
+ need to find one and run the icons for various perks etc through
+ them, and we can get one displaying.
+ </p>
+ <p>In fact, maybe that's what we do next. BRB...</p>
+ <b>Code Updated. Check the github link to keep up.</b>
+ <p>
+ Excellent, here's one, first hit on google.
+ <a href="https://javl.github.io/image2cpp/">image2cpp</a>
+ Let's run the Cherchez La Femme image through it and upload it
+ to the machine aaaand...
+ </p>
+ <a href="../img/projects/pipboy/errorlowmem.png">
+ <img
+ class="blog-img"
+ src="../img/projects/pipboy/errorlowmem.png"
+ alt="A screenshot of the espruino terminal reading 'New interpreter error: LOW_MEMORY,MEMORY'"
+ />
+ </a>
+ <p>
+ 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.
+ </p>
+ <p>
+ 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.
+ </p>
+ <a href="../img/projects/pipboy/chercheztake1.jpg">
+ <img
+ class="blog-img-lrg"
+ src="../img/projects/pipboy/chercheztake1.jpg"
+ alt="A photo of the pipboy screen showing garbage in a square."
+ />
+ </a>
+ <p>
+ OK, it's displaying, but that's clearly not right. Here's what
+ it's supposed to look like:
+ </p>
+ <a href="../img/projects/pipboy/CherchezLaFemme.png">
+ <img
+ class="blog-img"
+ src="../img/projects/pipboy/CherchezLaFemme.png"
+ alt="The Cherchez La Femme perk icon from New Vegas"
+ />
+ </a>
+ <p>
+ 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
+ <a href="https://www.espruino.com/Image+Converter"
+ >Espruino's website</a
+ >
+ instead. Man I'm really proving myself soooo smart today.
+ </p>
+ <p>
+ Using the right tool for the job gives us this! And it's even
+ full resolution! Huzzah!
+ </p>
+ <a href="../img/projects/pipboy/cherchezsuccess.jpg">
+ <img
+ class="blog-img-lrg"
+ src="../img/projects/pipboy/cherchezsuccess.jpg"
+ alt="A photo of the pipboy screen showing the Cherchez La Femme icon."
+ />
+ </a>
+ <p>
+ 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.
+ </p>
+ <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"
+ 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 src="../img/projects/pipboy/pipboyperkswitch.mp4"></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>
</div>
</div>
</div>
projects / gnargle.github.io.git / blobdiff