pipboy update

[gnargle.github.io.git] / projects / pipboy.html

diff --git a/projects/pipboy.html b/projects/pipboy.html
index c2c3af72d94acf4c49d4d5fbf3ff1b22f38cd86e..4c9edec4e4f7ee92f5eee3490b6600eec24099d5 100644 (file)
--- a/projects/pipboy.html
+++ b/projects/pipboy.html
@@ -354,7 +354,7 @@
                 />
               </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>
@@ -411,12 +411,12 @@
                 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>
+              <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
+                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">
@@ -444,8 +444,8 @@
                 />
               </a>
               <p>
-                OK, it's display, but that's clearly not right. Here's what it's
-                supposed to look like:
+                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
@@ -484,6 +484,49 @@
                 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>
             </div>
           </div>
         </div>