X-Git-Url: https://fortfriendship.online/gitweb/gnargle.github.io.git/blobdiff_plain/d2b0f527920d3abcc9c2ac0bd5d2c6b4c0da1a6f..895bd91607359cd2914d5adfaefba9df8a7b41ec:/projects/pipboy.html diff --git a/projects/pipboy.html b/projects/pipboy.html index 391e2ac..c2c3af7 100644 --- a/projects/pipboy.html +++ b/projects/pipboy.html @@ -357,6 +357,133 @@ So we want tio draw something to screen that isnt 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. +

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

+ + A screenshot of an the graphics context in the pip boy firmware. + +

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

+

So, to find out, we're gonna draw three squares.

+ + A photo of the pipboy screen showing 3 16x16 squares. One is slightly dimmer than the other two. + +

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

+ + A screenshot of the code to make the three squares. The three are commented 'full byte pp', 'dithered square', and 'fullbright square' + +

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

+

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

+

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