added ArduboyFx begin drawBitmap and display to the crate also added a fxdata-converter.html file to the docs

Project/game/src/lib.rs

@@ -2,6 +2,7 @@
 #![allow(non_upper_case_globals)]
 
 //Include the Arduboy Library
+use arduboy_rust::arduboyfx::*;
 #[allow(unused_imports)]
 use arduboy_rust::prelude::*;
 
@@ -11,14 +12,23 @@ const arduboy: Arduboy2 = Arduboy2::new();
 // Progmem data
 
 // dynamic ram variables
+const FX_DATA_PAGE: u16 = 0xffff;
+const FX_DATA_BYTES: u32 = 234;
+const FXlogo: u32 = 0x000000;
+const FXlogoWith: i16 = 115;
+const FXlogoHeight: i16 = 16;
 
+static mut x: i16 = (WIDTH - FXlogoWith) / 2;
+static mut y: i16 = 25;
+static mut xDir: i8 = 1;
+static mut yDir: i8 = 1;
 // The setup() function runs once when you turn your Arduboy on
 #[no_mangle]
 pub unsafe extern "C" fn setup() {
     // put your setup code here, to run once:
     arduboy.begin();
     arduboy.set_frame_rate(30);
-    arduboy.clear();
+    arduboyfx_begin_data(FX_DATA_PAGE);
 }
 // The loop() function repeats forever after setup() is done
 #[no_mangle]
@@ -28,5 +38,14 @@ pub unsafe extern "C" fn loop_() {
     if !arduboy.next_frame() {
         return;
     }
-    arduboy.display();
+    arduboyfx_draw_bitmap(x, y, FXlogo, 0, 0);
+    x += xDir as i16;
+    y += yDir as i16;
+    if x == 0 || x == WIDTH - FXlogoWith {
+        xDir = -xDir;
+    }
+    if y == 0 || y == HEIGHT - FXlogoHeight {
+        yDir = -yDir;
+    }
+    arduboyfx_display_clear();
 }

arduboy-rust/src/lib.rs

@@ -37,5 +37,6 @@ pub use crate::library::arduboy_tone::{self, ArduboyTones};
 pub use crate::library::ardvoice::{self, ArdVoice};
 pub use crate::library::eeprom::{EEPROM, EEPROMBYTE};
 pub use crate::library::{arduino, c, sprites};
+pub use crate::library::arduboyfx;
 pub mod serial_print;
 

arduboy-rust/src/library/arduboy2.rs

@@ -14,11 +14,11 @@ pub const FONT_SIZE: u8 = 6;
 /// The standard width of the arduboy
 ///
 /// this is to calculate with it.
-pub const WIDTH: u8 = 128;
+pub const WIDTH: i16 = 128;
 /// The standard height of the arduboy
 ///
 /// this is to calculate with it.
-pub const HEIGHT: u8 = 64;
+pub const HEIGHT: i16 = 64;
 
 /// This item is to chose between Black or White
 #[derive(Debug, Copy, Clone, Hash, Eq, PartialEq, Ord, PartialOrd)]

arduboy-rust/src/library/arduboyfx.rs

@@ -1,8 +1,26 @@
+#![allow(non_upper_case_globals)]
+use core::ffi::{c_int, c_long, c_uchar, c_uint, c_ulong};
 
-
+pub const dbmNormal: u8 = 0;
-
+pub const dbmOverwrite: u8 = 0;
+pub const dbmMasked: u8 = 1;
 extern "C" {
     #[link_name = "arduboyfx_begin"]
-    fn arduboyfx_begin();
+    pub fn arduboyfx_begin();
-
+    #[link_name = "arduboyfx_begin_data"]
+    pub fn arduboyfx_begin_data(datapage: c_uint);
+    #[link_name = "arduboyfx_begin_data_save"]
+    pub fn arduboyfx_begin_data_save(datapage: c_uint, savepage: c_uint);
+    #[link_name = "arduboyfx_display"]
+    pub fn arduboyfx_display();
+    #[link_name = "arduboyfx_display_clear"]
+    pub fn arduboyfx_display_clear();
+    #[link_name = "arduboyfx_draw_bitmap"]
+    pub fn arduboyfx_draw_bitmap(
+        x: c_int,
+        y: c_int,
+        address: c_ulong,
+        frame: c_uchar,
+        mode: c_uchar,
+    );
 }

docs/arduboy-file-converter.html

@@ -100,7 +100,6 @@
 
         .topnav {
             background-color: #000000;
-            overflow: hidden;
             height: 47px;
         }
 
@@ -126,7 +125,7 @@
             display: none;
         }
 
-        @media screen and (max-width: 1049px) {
+        @media screen and (max-width: 800px) {
             .topnav a:not(:first-child) {
                 display: none;
             }
@@ -137,10 +136,10 @@
             }
         }
 
-        @media screen and (max-width: 1049px) {
+        @media screen and (max-width: 800px) {
             .topnav.responsive {
                 position: relative;
-                height: 247px;
+                height: auto;
             }
 
             .topnav {
@@ -215,13 +214,31 @@
     </style>
     <div class="wrapper">
         <div class="topnav" id="myTopnav">
-            <a href="https://zenndev1337.github.io/Rust-for-Arduboy/index.html">Rust for Arduboy</a>
+            <a
-            <a href="https://zenndev1337.github.io/Rust-for-Arduboy/image-converter.html">Image
+            href="https://zenndev1337.github.io/Rust-for-Arduboy/index.html"
-                Converter</a>
+            ><nobr>Rust for Arduboy</nobr></a
-            <a href="https://zenndev1337.github.io/Rust-for-Arduboy/tile-converter.html">Tile Converter</a>
+        >
-            <a href="https://zenndev1337.github.io/Rust-for-Arduboy/sprite-converter.html">Sprite Converter</a>
+        <a
-            <a href="https://zenndev1337.github.io/Rust-for-Arduboy/arduboy-file-converter.html" class="active">.arduboy
+            href="https://zenndev1337.github.io/Rust-for-Arduboy/image-converter.html"
-                Generator</a>
+            ><nobr>Image Converter</nobr></a
+        >
+        <a
+            href="https://zenndev1337.github.io/Rust-for-Arduboy/tile-converter.html"
+            ><nobr>Tile Converter</nobr></a
+        >
+        <a
+            href="https://zenndev1337.github.io/Rust-for-Arduboy/sprite-converter.html"
+            ><nobr>Sprite Converter</nobr></a
+        >
+        <a
+            href="https://zenndev1337.github.io/Rust-for-Arduboy/arduboy-file-converter.html" class="active"
+            ><nobr>.arduboy Generator</nobr></a
+        >
+        <a
+            href="https://zenndev1337.github.io/Rust-for-Arduboy/fxdata-converter.html"
+            
+            ><nobr>fxdata.h Converter</nobr></a
+        >
             <a href="javascript:void(0);" class="icon" onclick="myFunction()">
                 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-list"
                     viewBox="0 0 16 16">

docs/fxdata-converter.html

@@ -0,0 +1,363 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <link
+            rel="icon"
+            href="https://upload.wikimedia.org/wikipedia/commons/0/0f/Original_Ferris.svg"
+            type="image/svg+xml"
+        />
+        <title>ZennDev1337 Image Converter</title>
+    </head>
+
+    <body onload="setup(this);">
+        <style>
+            html,
+            body {
+                margin: 0;
+                background-color: black;
+                color: azure;
+                overflow: hidden;
+            }
+
+            body {
+                font-family: Courier New;
+                text-align: center;
+                align-items: center;
+                font-size: xx-large;
+                font-weight: 700;
+            }
+
+            .wrapper {
+                min-height: calc(100vh - 50px);
+            }
+
+            .footer {
+                font-family: Courier New;
+                text-align: center;
+                font-size: large;
+                font-weight: 600;
+                height: 50px;
+
+                color: #e7e7e7;
+            }
+
+            .footer > a {
+                font-family: Courier New;
+                text-align: center;
+                font-size: large;
+                font-weight: 700;
+                margin: 0;
+                color: #e7e7e7;
+                text-decoration: none;
+            }
+
+            .sticky {
+                bottom: 0;
+                height: 50px;
+            }
+
+            textarea {
+                background-color: #281c1c;
+                color: azure;
+                border: dotted 2px #ce422b;
+                width: 670px;
+                height: 300px;
+                resize: none;
+            }
+
+            .title > p {
+                padding-left: 20px;
+                margin: 0;
+                padding-right: 20px;
+                color: #e7e7e7;
+                font-size: xx-large;
+            }
+
+            .title {
+                padding-top: 50px;
+            }
+
+            .separator {
+                border-top: solid #281c1c;
+                border-bottom: none;
+                border-left: none;
+                border-right: none;
+                margin-top: 40px;
+                width: clamp(700px, 70vw, 1200px);
+            }
+
+            .image-container {
+                margin-top: 40px;
+                min-height: 80px;
+            }
+
+            p {
+                font-size: medium;
+            }
+
+            .txtHead {
+                margin-bottom: 5px;
+            }
+
+            .topnav {
+                background-color: #000000;
+                height: 47px;
+            }
+
+            .topnav a {
+                color: #f2f2f2;
+                text-align: center;
+                padding: 14px 16px;
+                text-decoration: none;
+                font-size: 17px;
+            }
+
+            .topnav a:hover {
+                background-color: #ddd;
+                color: black;
+            }
+
+            .topnav a.active {
+                background-color: #281c1c;
+                color: white;
+            }
+
+            .topnav .icon {
+                display: none;
+            }
+
+            @media screen and (max-width: 800px) {
+                .topnav a:not(:first-child) {
+                    display: none;
+                }
+
+                .topnav a.icon {
+                    float: right;
+                    display: block;
+                }
+            }
+
+            @media screen and (max-width: 800px) {
+                .topnav.responsive {
+                    position: relative;
+                    height: auto;
+                }
+
+                .topnav {
+                    text-align: left;
+                }
+
+                .topnav.responsive a.icon {
+                    position: absolute;
+                    right: 0;
+                    top: 0;
+                }
+
+                .topnav.responsive a {
+                    float: none;
+                    display: block;
+                    text-align: left;
+                }
+            }
+        </style>
+        <div class="wrapper">
+            <div class="topnav" id="myTopnav">
+                <a
+                    href="https://zenndev1337.github.io/Rust-for-Arduboy/index.html"
+                    ><nobr>Rust for Arduboy</nobr></a
+                >
+                <a
+                    href="https://zenndev1337.github.io/Rust-for-Arduboy/image-converter.html"
+                    ><nobr>Image Converter</nobr></a
+                >
+                <a
+                    href="https://zenndev1337.github.io/Rust-for-Arduboy/tile-converter.html"
+                    ><nobr>Tile Converter</nobr></a
+                >
+                <a
+                    href="https://zenndev1337.github.io/Rust-for-Arduboy/sprite-converter.html"
+                    ><nobr>Sprite Converter</nobr></a
+                >
+                <a
+                    href="https://zenndev1337.github.io/Rust-for-Arduboy/arduboy-file-converter.html"
+                    ><nobr>.arduboy Generator</nobr></a
+                >
+                <a
+                    href="https://zenndev1337.github.io/Rust-for-Arduboy/fxdata-converter.html"
+                    class="active"
+                    ><nobr>fxdata.h Converter</nobr></a
+                >
+                <a
+                    href="javascript:void(0);"
+                    class="icon"
+                    onclick="myFunction()"
+                >
+                    <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="16"
+                        height="16"
+                        fill="currentColor"
+                        class="bi bi-list"
+                        viewBox="0 0 16 16"
+                    >
+                        <path
+                            fill-rule="evenodd"
+                            d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"
+                        />
+                    </svg>
+                </a>
+            </div>
+            <div class="title">
+                <p>Drop your fxdata.h here</p>
+            </div>
+            <hr class="separator" />
+            <div class="image-container">
+                <div id="image-container"></div>
+            </div>
+            <hr class="separator" />
+        </div>
+
+        <footer class="footer">
+            <a href="https://github.com/ZennDev1337/" target="_blank"
+                >By ZennDev1337</a
+            >
+        </footer>
+        <script language="JavaScript">
+            function myFunction() {
+                var x = document.getElementById("myTopnav");
+                if (x.className === "topnav") {
+                    x.className += " responsive";
+                } else {
+                    x.className = "topnav";
+                }
+            }
+        </script>
+        <script language="JavaScript">
+            function swapImage(t, e) {
+                var r = t.getAttribute("data-srcnm");
+                t.removeAttribute("srcset"),
+                    r || t.setAttribute("data-srcnm", t.src),
+                    (t.src = e);
+            }
+            function setOriginal(t) {
+                var e = "",
+                    r = "";
+                (r = t.getAttribute("data-srcmd")),
+                    (e = t.getAttribute("data-srcnm")),
+                    r
+                        ? ((t.src = r), t.removeAttribute("data-srcmd"))
+                        : ((t.src = e), t.removeAttribute("data-srcnm"));
+            }
+            function swapImageMD(t, e) {
+                t.setAttribute("data-srcmd", t.src), (t.src = e);
+            }
+            function jsready(t) {
+                /in/.test(document.readyState)
+                    ? setTimeout("jsready(" + t + ")", 9)
+                    : t();
+            }
+            jsready(function () {
+                var t = window.devicePixelRatio ? window.devicePixelRatio : 1;
+                if (t > 1)
+                    for (
+                        var e = document.getElementsByTagName("img"), r = 0;
+                        r < e.length;
+                        r++
+                    )
+                        e[r].getAttribute("data-src2x") &&
+                            (e[r].setAttribute(
+                                "data-src-orig",
+                                e[r].getAttribute("src")
+                            ),
+                            e[r].setAttribute(
+                                "src",
+                                e[r].getAttribute("data-src2x")
+                            ));
+            });
+
+            function setup(body) {
+                body.ondragover = function () {
+                    return false;
+                };
+                body.ondragend = function () {
+                    return false;
+                };
+                body.ondrop = function (e) {
+                    // Prevent the browser from showing the dropped file
+                    e.preventDefault();
+                    // Get the image data
+                    var reader = new FileReader();
+                    reader.onload = function (e) {
+                        //console.log(this.result);
+                        convertCtoRust(this.result);
+                    };
+                    reader.readAsText(e.dataTransfer.files[0]);
+                    // var imageData = getImageData(e);
+
+                    // // If there is some data, add it to the page
+                    // if (imageData !== null) {
+                    //     addDroppedElement(imageData);
+                    // }
+                };
+            }
+
+            function convertCtoRust(file) {
+                var lines = file.split("\n");
+                var resultString = "";
+                var droppedImageCode = document.createElement("textarea");
+                droppedImageCode.className = "code";
+
+                droppedImageCode.style.width = "698px";
+                droppedImageCode.rows = "20";
+                var imageContainer = document.getElementById("image-container");
+                imageContainer.innerHTML = "";
+                imageContainer.appendChild(droppedImageCode);
+                var regexPattern = /\s+/g;
+                for (var line of lines) {
+                    if (!line) {
+                        resultString += "\n";
+                    }
+                    if (line.includes("//")) {
+                        resultString += `${line.replace(regexPattern, " ")}\n`;
+                    }
+                    if (line.includes("/***")) {
+                        var words = line.split(" ");
+                        words.pop();
+                        words.shift();
+                        resultString += `// ${words}\n// Convertet to Rust with https://zenndev1337.github.io/Rust-for-Arduboy/fxdata-converter.html`;
+                    }
+                    if (line.includes("constexpr")) {
+                        var words = line.replace(regexPattern, " ").split(" ");
+                        for (i in words) {
+                            if (words[i] === "") delete words[i];
+                        }
+                        var type = "";
+                        var cType = words[1];
+                        switch (cType) {
+                            case "uint16_t":
+                                type = "u16";
+                                break;
+                            case "uint24_t":
+                                type = "u32";
+                                break;
+                            case "uint32_t":
+                                type = "u32";
+                                break;
+                            case "uint8_t":
+                                type = "u8";
+                                break;
+                            default:
+                                type = "???";
+                        }
+                        resultString += `const ${words[2]}:${type} = ${words[4]}\n`;
+                    }
+                }
+                var result = resultString.split("\n");
+                result.shift();
+                resultString = result.join("\n");
+                droppedImageCode.innerHTML = resultString;
+            }
+        </script>
+    </body>
+</html>

docs/image-converter.html

@@ -1,14 +1,16 @@
 <!DOCTYPE html>
 <html>
-
+    <head>
-<head>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <link
-    <link rel="icon" href="https://upload.wikimedia.org/wikipedia/commons/0/0f/Original_Ferris.svg"
+            rel="icon"
-        type="image/svg+xml" />
+            href="https://upload.wikimedia.org/wikipedia/commons/0/0f/Original_Ferris.svg"
+            type="image/svg+xml"
+        />
         <title>ZennDev1337 Image Converter</title>
-</head>
+    </head>
 
-<body onload="setup(this);">
+    <body onload="setup(this);">
         <style>
             html,
             body {
@@ -40,7 +42,7 @@
                 color: #e7e7e7;
             }
 
-        .footer>a {
+            .footer > a {
                 font-family: Courier New;
                 text-align: center;
                 font-size: large;
@@ -64,7 +66,7 @@
                 resize: none;
             }
 
-        .title>p {
+            .title > p {
                 padding-left: 20px;
                 margin: 0;
                 padding-right: 20px;
@@ -100,7 +102,6 @@
 
             .topnav {
                 background-color: #000000;
-            overflow: hidden;
                 height: 47px;
             }
 
@@ -126,7 +127,7 @@
                 display: none;
             }
 
-        @media screen and (max-width: 1049px) {
+            @media screen and (max-width: 800px) {
                 .topnav a:not(:first-child) {
                     display: none;
                 }
@@ -137,10 +138,10 @@
                 }
             }
 
-        @media screen and (max-width: 1049px) {
+            @media screen and (max-width: 800px) {
                 .topnav.responsive {
                     position: relative;
-                height: 247px;
+                    height: auto;
                 }
 
                 .topnav {
@@ -162,18 +163,48 @@
         </style>
         <div class="wrapper">
             <div class="topnav" id="myTopnav">
-            <a href="https://zenndev1337.github.io/Rust-for-Arduboy/index.html">Rust for Arduboy</a>
+                <a
-            <a href="https://zenndev1337.github.io/Rust-for-Arduboy/image-converter.html" class="active">Image
+                    href="https://zenndev1337.github.io/Rust-for-Arduboy/index.html"
-                Converter</a>
+                    ><nobr>Rust for Arduboy</nobr></a
-            <a href="https://zenndev1337.github.io/Rust-for-Arduboy/tile-converter.html">Tile Converter</a>
+                >
-            <a href="https://zenndev1337.github.io/Rust-for-Arduboy/sprite-converter.html">Sprite Converter</a>
+                <a
-            <a href="https://zenndev1337.github.io/Rust-for-Arduboy/arduboy-file-converter.html">.arduboy
+                    href="https://zenndev1337.github.io/Rust-for-Arduboy/image-converter.html"
-                Generator</a>
+                    class="active"
-            <a href="javascript:void(0);" class="icon" onclick="myFunction()">
+                    ><nobr>Image Converter</nobr></a
-                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-list"
+                >
-                    viewBox="0 0 16 16">
+                <a
-                    <path fill-rule="evenodd"
+                    href="https://zenndev1337.github.io/Rust-for-Arduboy/tile-converter.html"
-                        d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z" />
+                    ><nobr>Tile Converter</nobr></a
+                >
+                <a
+                    href="https://zenndev1337.github.io/Rust-for-Arduboy/sprite-converter.html"
+                    ><nobr>Sprite Converter</nobr></a
+                >
+                <a
+                    href="https://zenndev1337.github.io/Rust-for-Arduboy/arduboy-file-converter.html"
+                    ><nobr>.arduboy Generator</nobr></a
+                >
+                <a
+                    href="https://zenndev1337.github.io/Rust-for-Arduboy/fxdata-converter.html"
+                    ><nobr>fxdata.h Converter</nobr></a
+                >
+                <a
+                    href="javascript:void(0);"
+                    class="icon"
+                    onclick="myFunction()"
+                >
+                    <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="16"
+                        height="16"
+                        fill="currentColor"
+                        class="bi bi-list"
+                        viewBox="0 0 16 16"
+                    >
+                        <path
+                            fill-rule="evenodd"
+                            d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"
+                        />
                     </svg>
                 </a>
             </div>
@@ -188,7 +219,9 @@
         </div>
 
         <footer class="footer">
-        <a href="https://github.com/ZennDev1337/" target="_blank">By ZennDev1337</a>
+            <a href="https://github.com/ZennDev1337/" target="_blank"
+                >By ZennDev1337</a
+            >
         </footer>
         <script language="JavaScript">
             function myFunction() {
@@ -398,6 +431,5 @@
                 reader.readAsDataURL(imageData);
             }
         </script>
-</body>
+    </body>
-
 </html>

docs/index.html

@@ -99,8 +99,7 @@
 
         .topnav {
             background-color: #000000;
-            overflow: hidden;
+            min-height: 47px;
-            height: 47px;
         }
 
         .topnav a {
@@ -125,7 +124,7 @@
             display: none;
         }
 
-        @media screen and (max-width: 1049px) {
+        @media screen and (max-width: 800px) {
             .topnav a:not(:first-child) {
                 display: none;
             }
@@ -136,10 +135,10 @@
             }
         }
 
-        @media screen and (max-width: 1049px) {
+        @media screen and (max-width: 800px) {
             .topnav.responsive {
                 position: relative;
-                height: 247px;
+                height: auto;
             }
 
             .topnav {
@@ -167,12 +166,31 @@
     </style>
     <div class="wrapper">
         <div class="topnav" id="myTopnav">
-            <a href="https://zenndev1337.github.io/Rust-for-Arduboy/index.html" class="active">Rust for Arduboy</a>
+            <a
-            <a href="https://zenndev1337.github.io/Rust-for-Arduboy/image-converter.html">Image Converter</a>
+            href="https://zenndev1337.github.io/Rust-for-Arduboy/index.html" class="active"
-            <a href="https://zenndev1337.github.io/Rust-for-Arduboy/tile-converter.html">Tile Converter</a>
+            ><nobr>Rust for Arduboy</nobr></a
-            <a href="https://zenndev1337.github.io/Rust-for-Arduboy/sprite-converter.html">Sprite Converter</a>
+        >
-            <a href="https://zenndev1337.github.io/Rust-for-Arduboy/arduboy-file-converter.html">.arduboy
+        <a
-                Generator</a>
+            href="https://zenndev1337.github.io/Rust-for-Arduboy/image-converter.html"
+            ><nobr>Image Converter</nobr></a
+        >
+        <a
+            href="https://zenndev1337.github.io/Rust-for-Arduboy/tile-converter.html"
+            ><nobr>Tile Converter</nobr></a
+        >
+        <a
+            href="https://zenndev1337.github.io/Rust-for-Arduboy/sprite-converter.html"
+            ><nobr>Sprite Converter</nobr></a
+        >
+        <a
+            href="https://zenndev1337.github.io/Rust-for-Arduboy/arduboy-file-converter.html"
+            ><nobr>.arduboy Generator</nobr></a
+        >
+        <a
+            href="https://zenndev1337.github.io/Rust-for-Arduboy/fxdata-converter.html"
+           
+            ><nobr>fxdata.h Converter</nobr></a
+        >
             <a href="javascript:void(0);" class="icon" onclick="myFunction()">
                 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-list"
                     viewBox="0 0 16 16">

docs/sprite-converter.html

@@ -1,25 +1,29 @@
 <!DOCTYPE html>
 <html>
-
+    <head>
-<head>
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="icon" href="https://upload.wikimedia.org/wikipedia/commons/0/0f/Original_Ferris.svg"
+        <link
-        type="image/svg+xml" />
+            rel="icon"
+            href="https://upload.wikimedia.org/wikipedia/commons/0/0f/Original_Ferris.svg"
+            type="image/svg+xml"
+        />
         <title>ZennDev1337 Sprite Converter</title>
-</head>
+    </head>
 
-<body onload="setup(this);">
+    <body onload="setup(this);">
         <style>
             html,
             body {
                 margin: 0;
                 background-color: black;
                 color: azure;
+                overflow: hidden;
             }
 
             body {
                 font-family: Courier New;
                 text-align: center;
+                align-items: center;
                 font-size: xx-large;
                 font-weight: 700;
             }
@@ -38,14 +42,14 @@
                 color: #e7e7e7;
             }
 
-        .footer>a {
+            .footer > a {
                 font-family: Courier New;
                 text-align: center;
                 font-size: large;
                 font-weight: 700;
                 margin: 0;
-            text-decoration: none;
                 color: #e7e7e7;
+                text-decoration: none;
             }
 
             .sticky {
@@ -62,7 +66,7 @@
                 resize: none;
             }
 
-        .title>p {
+            .title > p {
                 padding-left: 20px;
                 margin: 0;
                 padding-right: 20px;
@@ -98,7 +102,6 @@
 
             .topnav {
                 background-color: #000000;
-            overflow: hidden;
                 height: 47px;
             }
 
@@ -124,7 +127,7 @@
                 display: none;
             }
 
-        @media screen and (max-width: 1049px) {
+            @media screen and (max-width: 800px) {
                 .topnav a:not(:first-child) {
                     display: none;
                 }
@@ -135,10 +138,10 @@
                 }
             }
 
-        @media screen and (max-width: 1049px) {
+            @media screen and (max-width: 800px) {
                 .topnav.responsive {
                     position: relative;
-                height: 247px;
+                    height: auto;
                 }
 
                 .topnav {
@@ -160,18 +163,48 @@
         </style>
         <div class="wrapper">
             <div class="topnav" id="myTopnav">
-            <a href="https://zenndev1337.github.io/Rust-for-Arduboy/index.html">Rust for Arduboy</a>
+                <a
-            <a href="https://zenndev1337.github.io/Rust-for-Arduboy/image-converter.html">Image Converter</a>
+                    href="https://zenndev1337.github.io/Rust-for-Arduboy/index.html"
-            <a href="https://zenndev1337.github.io/Rust-for-Arduboy/tile-converter.html">Tile Converter</a>
+                    ><nobr>Rust for Arduboy</nobr></a
-            <a href="https://zenndev1337.github.io/Rust-for-Arduboy/sprite-converter.html" class="active">Sprite
+                >
-                Converter</a>
+                <a
-            <a href="https://zenndev1337.github.io/Rust-for-Arduboy/arduboy-file-converter.html">.arduboy
+                    href="https://zenndev1337.github.io/Rust-for-Arduboy/image-converter.html"
-                Generator</a>
+                    ><nobr>Image Converter</nobr></a
-            <a href="javascript:void(0);" class="icon" onclick="myFunction()">
+                >
-                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-list"
+                <a
-                    viewBox="0 0 16 16">
+                    href="https://zenndev1337.github.io/Rust-for-Arduboy/tile-converter.html"
-                    <path fill-rule="evenodd"
+                    ><nobr>Tile Converter</nobr></a
-                        d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z" />
+                >
+                <a
+                    href="https://zenndev1337.github.io/Rust-for-Arduboy/sprite-converter.html"
+                    class="active"
+                    ><nobr>Sprite Converter</nobr></a
+                >
+                <a
+                    href="https://zenndev1337.github.io/Rust-for-Arduboy/arduboy-file-converter.html"
+                    ><nobr>.arduboy Generator</nobr></a
+                >
+                <a
+                    href="https://zenndev1337.github.io/Rust-for-Arduboy/fxdata-converter.html"
+                    ><nobr>fxdata.h Converter</nobr></a
+                >
+                <a
+                    href="javascript:void(0);"
+                    class="icon"
+                    onclick="myFunction()"
+                >
+                    <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="16"
+                        height="16"
+                        fill="currentColor"
+                        class="bi bi-list"
+                        viewBox="0 0 16 16"
+                    >
+                        <path
+                            fill-rule="evenodd"
+                            d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"
+                        />
                     </svg>
                 </a>
             </div>
@@ -186,7 +219,9 @@
         </div>
 
         <footer class="footer sticky">
-        <a href="https://github.com/ZennDev1337/" target="_blank">By ZennDev1337</a>
+            <a href="https://github.com/ZennDev1337/" target="_blank"
+                >By ZennDev1337</a
+            >
         </footer>
         <script language="JavaScript">
             function myFunction() {
@@ -632,7 +667,7 @@
                                 p[0] -= (a * (p[0] - b)) / alpharadbias;
                                 p[1] -= (a * (p[1] - g)) / alpharadbias;
                                 p[2] -= (a * (p[2] - r)) / alpharadbias;
-                        } catch (e) { } // prevents 1.3 miscompilation
+                            } catch (e) {} // prevents 1.3 miscompilation
                         }
 
                         if (k > lo) {
@@ -642,7 +677,7 @@
                                 p[0] -= (a * (p[0] - b)) / alpharadbias;
                                 p[1] -= (a * (p[1] - g)) / alpharadbias;
                                 p[2] -= (a * (p[2] - r)) / alpharadbias;
-                        } catch (e) { }
+                            } catch (e) {}
                         }
                     }
                 };
@@ -1401,7 +1436,7 @@
                     var dmin = 256 * 256 * 256;
                     var len = colorTab.length;
 
-                for (var i = 0; i < len;) {
+                    for (var i = 0; i < len; ) {
                         var dr = r - (colorTab[i++] & 0xff);
                         var dg = g - (colorTab[i++] & 0xff);
                         var db = b - (colorTab[i] & 0xff);
@@ -1953,6 +1988,5 @@
                 reader.readAsDataURL(imageData);
             }
         </script>
-</body>
+    </body>
-
 </html>

docs/tile-converter.html

@@ -1,25 +1,29 @@
 <!DOCTYPE html>
 <html>
-
+    <head>
-<head>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <link
-    <link rel="icon" href="https://upload.wikimedia.org/wikipedia/commons/0/0f/Original_Ferris.svg"
+            rel="icon"
-        type="image/svg+xml" />
+            href="https://upload.wikimedia.org/wikipedia/commons/0/0f/Original_Ferris.svg"
+            type="image/svg+xml"
+        />
         <title>ZennDev1337 Tile Converter</title>
-</head>
+    </head>
 
-<body onload="setup(this);">
+    <body onload="setup(this);">
         <style>
             html,
             body {
                 margin: 0;
                 background-color: black;
                 color: azure;
+                overflow: hidden;
             }
 
             body {
                 font-family: Courier New;
                 text-align: center;
+                align-items: center;
                 font-size: xx-large;
                 font-weight: 700;
             }
@@ -38,7 +42,7 @@
                 color: #e7e7e7;
             }
 
-        .footer>a {
+            .footer > a {
                 font-family: Courier New;
                 text-align: center;
                 font-size: large;
@@ -62,7 +66,7 @@
                 resize: none;
             }
 
-        .title>p {
+            .title > p {
                 padding-left: 20px;
                 margin: 0;
                 padding-right: 20px;
@@ -98,7 +102,6 @@
 
             .topnav {
                 background-color: #000000;
-            overflow: hidden;
                 height: 47px;
             }
 
@@ -124,7 +127,7 @@
                 display: none;
             }
 
-        @media screen and (max-width: 1049px) {
+            @media screen and (max-width: 800px) {
                 .topnav a:not(:first-child) {
                     display: none;
                 }
@@ -135,10 +138,10 @@
                 }
             }
 
-        @media screen and (max-width: 1049px) {
+            @media screen and (max-width: 800px) {
                 .topnav.responsive {
                     position: relative;
-                height: 247px;
+                    height: auto;
                 }
 
                 .topnav {
@@ -160,18 +163,48 @@
         </style>
         <div class="wrapper">
             <div class="topnav" id="myTopnav">
-            <a href="https://zenndev1337.github.io/Rust-for-Arduboy/index.html">Rust for Arduboy</a>
+                <a
-            <a href="https://zenndev1337.github.io/Rust-for-Arduboy/image-converter.html">Image Converter</a>
+                    href="https://zenndev1337.github.io/Rust-for-Arduboy/index.html"
-            <a href="https://zenndev1337.github.io/Rust-for-Arduboy/tile-converter.html" class="active">Tile
+                    ><nobr>Rust for Arduboy</nobr></a
-                Converter</a>
+                >
-            <a href="https://zenndev1337.github.io/Rust-for-Arduboy/sprite-converter.html">Sprite Converter</a>
+                <a
-            <a href="https://zenndev1337.github.io/Rust-for-Arduboy/arduboy-file-converter.html">.arduboy
+                    href="https://zenndev1337.github.io/Rust-for-Arduboy/image-converter.html"
-                Generator</a>
+                    ><nobr>Image Converter</nobr></a
-            <a href="javascript:void(0);" class="icon" onclick="myFunction()">
+                >
-                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-list"
+                <a
-                    viewBox="0 0 16 16">
+                    href="https://zenndev1337.github.io/Rust-for-Arduboy/tile-converter.html"
-                    <path fill-rule="evenodd"
+                    class="active"
-                        d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z" />
+                    ><nobr>Tile Converter</nobr></a
+                >
+                <a
+                    href="https://zenndev1337.github.io/Rust-for-Arduboy/sprite-converter.html"
+                    ><nobr>Sprite Converter</nobr></a
+                >
+                <a
+                    href="https://zenndev1337.github.io/Rust-for-Arduboy/arduboy-file-converter.html"
+                    ><nobr>.arduboy Generator</nobr></a
+                >
+                <a
+                    href="https://zenndev1337.github.io/Rust-for-Arduboy/fxdata-converter.html"
+                    ><nobr>fxdata.h Converter</nobr></a
+                >
+                <a
+                    href="javascript:void(0);"
+                    class="icon"
+                    onclick="myFunction()"
+                >
+                    <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="16"
+                        height="16"
+                        fill="currentColor"
+                        class="bi bi-list"
+                        viewBox="0 0 16 16"
+                    >
+                        <path
+                            fill-rule="evenodd"
+                            d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"
+                        />
                     </svg>
                 </a>
             </div>
@@ -186,7 +219,9 @@
         </div>
 
         <footer class="footer">
-        <a href="https://github.com/ZennDev1337/" target="_blank">By ZennDev1337</a>
+            <a href="https://github.com/ZennDev1337/" target="_blank"
+                >By ZennDev1337</a
+            >
         </footer>
         <script language="JavaScript">
             function myFunction() {
@@ -484,6 +519,5 @@
                 reader.readAsDataURL(imageData);
             }
         </script>
-</body>
+    </body>
-
 </html>