{"id":855858,"date":"2025-12-29T10:19:08","date_gmt":"2025-12-29T10:19:08","guid":{"rendered":"https:\/\/elektrobox.ch\/?page_id=855858"},"modified":"2025-12-29T10:28:12","modified_gmt":"2025-12-29T10:28:12","slug":"xmb-565-editor","status":"publish","type":"page","link":"https:\/\/elektrobox.ch\/index.php\/xmb-565-editor\/","title":{"rendered":"XMB-565 Editor"},"content":{"rendered":"      <section class=\"xbm-page\" aria-labelledby=\"xbm-page-title\">\n        <header class=\"xbm-hero\">\n          <div class=\"xbm-hero__content\">\n            <p class=\"xbm-kicker\">ElektroBox Tool<\/p>\n            <h1 id=\"xbm-page-title\">XBM Bitmap Editor for Displays, Icons and Firmware<\/h1>\n            <p class=\"xbm-hero__lead\">\n              Draw simple 1-bit pixel graphics directly in the browser and export them as XBM-style C arrays for small displays, embedded projects, menu icons and documentation examples.\n            <\/p>\n            <div class=\"xbm-hero__meta\" aria-label=\"Tool highlights\">\n              <span>No login required<\/span>\n              <span>Runs in the browser<\/span>\n              <span>Useful for embedded projects<\/span>\n            <\/div>\n          <\/div>\n        <\/header>\n\n        <div class=\"xbm-layout\">\n          <main class=\"xbm-layout__main\">\n                  <div class=\"xbm-editor\"\n           data-default-width=\"16\"\n           data-default-height=\"16\"\n           data-default-name=\"XMB_565\">\n\n        <div class=\"xbm-card\">\n          <div class=\"xbm-header\">\n            <p class=\"xbm-kicker\">Bitmap editor<\/p>\n            <h2 class=\"xbm-title\">XBM Bitmap Editor<\/h2>\n            <div class=\"xbm-sub\">Click or drag to draw pixels. The XBM-style C output updates automatically.<\/div>\n          <\/div>\n\n          <div class=\"xbm-controls\">\n            <div class=\"xbm-field xbm-field--wide\">\n              <label>Name<\/label>\n              <input class=\"xbm-name\" type=\"text\" value=\"XMB_565\" \/>\n              <div class=\"xbm-hint\">Used for <code>#define name_width<\/code>, <code>#define name_height<\/code> and <code>name_bits[]<\/code>.<\/div>\n            <\/div>\n\n            <div class=\"xbm-field\">\n              <label>Preset<\/label>\n              <select class=\"xbm-preset\">\n                <option value=\"\">Custom<\/option>\n                <option value=\"16x16\">16 \u00d7 16<\/option>\n                <option value=\"24x24\">24 \u00d7 24<\/option>\n                <option value=\"32x32\">32 \u00d7 32<\/option>\n                <option value=\"64x32\">64 \u00d7 32<\/option>\n                <option value=\"64x64\">64 \u00d7 64<\/option>\n                <option value=\"128x64\">128 \u00d7 64<\/option>\n              <\/select>\n            <\/div>\n\n            <div class=\"xbm-field\">\n              <label>Width (px)<\/label>\n              <input class=\"xbm-w\" type=\"number\" min=\"1\" max=\"512\" value=\"16\" inputmode=\"numeric\" \/>\n            <\/div>\n\n            <div class=\"xbm-field\">\n              <label>Height (px)<\/label>\n              <input class=\"xbm-h\" type=\"number\" min=\"1\" max=\"512\" value=\"16\" inputmode=\"numeric\" \/>\n            <\/div>\n\n            <div class=\"xbm-field\">\n              <label>Cell size<\/label>\n              <input class=\"xbm-cell\" type=\"range\" min=\"8\" max=\"28\" step=\"1\" value=\"16\" \/>\n              <div class=\"xbm-small xbm-cell-label\">16 px<\/div>\n            <\/div>\n\n            <div class=\"xbm-actions\">\n              <button type=\"button\" class=\"xbm-btn xbm-apply\">Apply size<\/button>\n              <button type=\"button\" class=\"xbm-btn xbm-btn-ghost xbm-clear\">Clear<\/button>\n              <button type=\"button\" class=\"xbm-btn xbm-btn-ghost xbm-fill\">Fill<\/button>\n              <button type=\"button\" class=\"xbm-btn xbm-btn-ghost xbm-invert\">Invert<\/button>\n            <\/div>\n          <\/div>\n\n          <div class=\"xbm-work\">\n            <div class=\"xbm-grid-wrap\">\n              <canvas class=\"xbm-canvas\" aria-label=\"Bitmap canvas\"><\/canvas>\n              <div class=\"xbm-grid-meta xbm-small\"><\/div>\n            <\/div>\n\n            <div class=\"xbm-output-wrap\">\n              <div class=\"xbm-output-head\">\n                <div class=\"xbm-output-title\">Output (XBM-style C)<\/div>\n                <button type=\"button\" class=\"xbm-btn xbm-copy\">Copy<\/button>\n              <\/div>\n              <pre class=\"xbm-output\" aria-label=\"XBM output\"><\/pre>\n              <div class=\"xbm-small xbm-copy-hint\" aria-live=\"polite\"><\/div>\n\n              <div class=\"xbm-options\">\n                <label class=\"xbm-check\">\n                  <input type=\"checkbox\" class=\"xbm-wrap8\" checked \/>\n                  Wrap 8 bytes per line\n                <\/label>\n                <label class=\"xbm-check\">\n                  <input type=\"checkbox\" class=\"xbm-include-type\" \/>\n                  Include <code>static const unsigned char<\/code> type\n                <\/label>\n              <\/div>\n\n              <div class=\"xbm-small xbm-note\">\n                XBM packs pixels LSB-first per byte: bit 0 is the leftmost pixel in each 8-pixel group.\n              <\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n    \n            <div class=\"xbm-layout__below\" aria-label=\"Tool information\">\n              <aside class=\"xbm-side-card\">\n                <h2>Best for<\/h2>\n                <ul>\n                  <li>OLED and LCD bitmap icons<\/li>\n                  <li>Arduino, ESP32 and microcontroller projects<\/li>\n                  <li>Small monochrome UI graphics<\/li>\n                  <li>Firmware examples and documentation<\/li>\n                <\/ul>\n              <\/aside>\n\n              <aside class=\"xbm-side-card xbm-side-card--soft\">\n                <h2>Before exporting<\/h2>\n                <p>\n                  Check the pixel dimensions, icon name and byte order before copying the generated array into your firmware. XBM stores each row in bytes and packs the leftmost pixel into bit 0.\n                <\/p>\n              <\/aside>\n            <\/div>\n\n            <section class=\"xbm-content-section\" aria-labelledby=\"xbm-how-title\">\n              <p class=\"xbm-kicker\">How to use it<\/p>\n              <h2 id=\"xbm-how-title\">Create a 1-bit bitmap without leaving the project workflow<\/h2>\n              <p>\n                Choose a preset or enter a custom width and height, then click or drag on the grid to toggle pixels. The generated C output updates automatically, so you can copy the array into an Arduino sketch, display driver example or firmware file.\n              <\/p>\n              <div class=\"xbm-info-grid\">\n                <article>\n                  <h3>Draw pixels<\/h3>\n                  <p>Click a cell to toggle it. Click and drag to draw or erase multiple pixels in one stroke.<\/p>\n                <\/article>\n                <article>\n                  <h3>Set dimensions<\/h3>\n                  <p>Use common icon sizes such as 16 \u00d7 16, 32 \u00d7 32 or 128 \u00d7 64, or enter a custom size up to 512 pixels.<\/p>\n                <\/article>\n                <article>\n                  <h3>Copy C output<\/h3>\n                  <p>Export width, height and byte data in a compact format that is easy to paste into embedded projects.<\/p>\n                <\/article>\n              <\/div>\n            <\/section>\n\n            <section class=\"xbm-content-section\" aria-labelledby=\"xbm-format-title\">\n              <p class=\"xbm-kicker\">Output format<\/p>\n              <h2 id=\"xbm-format-title\">How the XBM byte packing works<\/h2>\n              <p>\n                The bitmap is exported row by row. Every group of eight horizontal pixels becomes one byte. In each byte, bit 0 represents the leftmost pixel in that group, bit 1 the next pixel and so on.\n              <\/p>\n              <div class=\"xbm-example-grid\">\n                <article class=\"xbm-example-card\">\n                  <span>Icon size<\/span>\n                  <code>16 \u00d7 16 px<\/code>\n                  <p>Good for small menu symbols, status icons and button graphics.<\/p>\n                <\/article>\n                <article class=\"xbm-example-card\">\n                  <span>Display area<\/span>\n                  <code>128 \u00d7 64 px<\/code>\n                  <p>Useful for testing complete monochrome display layouts.<\/p>\n                <\/article>\n                <article class=\"xbm-example-card\">\n                  <span>Firmware output<\/span>\n                  <code>static const unsigned char<\/code>\n                  <p>Enable the type option when your codebase expects a typed constant array.<\/p>\n                <\/article>\n              <\/div>\n            <\/section>\n\n            <section class=\"xbm-content-section\" aria-labelledby=\"xbm-faq-title\">\n              <p class=\"xbm-kicker\">FAQ<\/p>\n              <h2 id=\"xbm-faq-title\">XBM editor questions<\/h2>\n              <details class=\"xbm-faq\">\n                <summary>Does the editor upload my drawing?<\/summary>\n                <p>No. The bitmap editor runs locally in the browser. The drawing and generated code are handled by the page JavaScript.<\/p>\n              <\/details>\n              <details class=\"xbm-faq\">\n                <summary>Why is the bit order LSB-first?<\/summary>\n                <p>XBM-style data stores the first pixel of each 8-pixel group in the least significant bit. This is different from some display libraries, so check your target library before use.<\/p>\n              <\/details>\n              <details class=\"xbm-faq\">\n                <summary>Can I use this for color graphics?<\/summary>\n                <p>This tool is designed for 1-bit monochrome graphics. For grayscale or RGB displays, use it only for masks, simple icons or binary UI elements.<\/p>\n              <\/details>\n            <\/section>\n          <\/main>\n        <\/div>\n      <\/section>\n    \n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-855858","page","type-page","status-publish","hentry"],"blocksy_meta":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>XMB-565 Editor - ElektroBox<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elektrobox.ch\/index.php\/xmb-565-editor\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"XMB-565 Editor - ElektroBox\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elektrobox.ch\/index.php\/xmb-565-editor\/\" \/>\n<meta property=\"og:site_name\" content=\"ElektroBox\" \/>\n<meta property=\"article:modified_time\" content=\"2025-12-29T10:28:12+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/elektrobox.ch\\\/index.php\\\/xmb-565-editor\\\/\",\"url\":\"https:\\\/\\\/elektrobox.ch\\\/index.php\\\/xmb-565-editor\\\/\",\"name\":\"XMB-565 Editor - ElektroBox\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/elektrobox.ch\\\/#website\"},\"datePublished\":\"2025-12-29T10:19:08+00:00\",\"dateModified\":\"2025-12-29T10:28:12+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/elektrobox.ch\\\/index.php\\\/xmb-565-editor\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/elektrobox.ch\\\/index.php\\\/xmb-565-editor\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/elektrobox.ch\\\/index.php\\\/xmb-565-editor\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/elektrobox.ch\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"XMB-565 Editor\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/elektrobox.ch\\\/#website\",\"url\":\"https:\\\/\\\/elektrobox.ch\\\/\",\"name\":\"ElektroBox\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/elektrobox.ch\\\/#\\\/schema\\\/person\\\/878bd55e17d9d0b1a53523fa5e90f6b2\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/elektrobox.ch\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/elektrobox.ch\\\/#\\\/schema\\\/person\\\/878bd55e17d9d0b1a53523fa5e90f6b2\",\"name\":\"Jacob Jarosz\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/elektrobox.ch\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/Logo_Color-Kopie-scaled.png\",\"url\":\"https:\\\/\\\/elektrobox.ch\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/Logo_Color-Kopie-scaled.png\",\"contentUrl\":\"https:\\\/\\\/elektrobox.ch\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/Logo_Color-Kopie-scaled.png\",\"width\":2560,\"height\":2560,\"caption\":\"Jacob Jarosz\"},\"logo\":{\"@id\":\"https:\\\/\\\/elektrobox.ch\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/Logo_Color-Kopie-scaled.png\"},\"sameAs\":[\"http:\\\/\\\/elektrobox.ch\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"XMB-565 Editor - ElektroBox","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/elektrobox.ch\/index.php\/xmb-565-editor\/","og_locale":"en_US","og_type":"article","og_title":"XMB-565 Editor - ElektroBox","og_url":"https:\/\/elektrobox.ch\/index.php\/xmb-565-editor\/","og_site_name":"ElektroBox","article_modified_time":"2025-12-29T10:28:12+00:00","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/elektrobox.ch\/index.php\/xmb-565-editor\/","url":"https:\/\/elektrobox.ch\/index.php\/xmb-565-editor\/","name":"XMB-565 Editor - ElektroBox","isPartOf":{"@id":"https:\/\/elektrobox.ch\/#website"},"datePublished":"2025-12-29T10:19:08+00:00","dateModified":"2025-12-29T10:28:12+00:00","breadcrumb":{"@id":"https:\/\/elektrobox.ch\/index.php\/xmb-565-editor\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elektrobox.ch\/index.php\/xmb-565-editor\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/elektrobox.ch\/index.php\/xmb-565-editor\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/elektrobox.ch\/"},{"@type":"ListItem","position":2,"name":"XMB-565 Editor"}]},{"@type":"WebSite","@id":"https:\/\/elektrobox.ch\/#website","url":"https:\/\/elektrobox.ch\/","name":"ElektroBox","description":"","publisher":{"@id":"https:\/\/elektrobox.ch\/#\/schema\/person\/878bd55e17d9d0b1a53523fa5e90f6b2"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elektrobox.ch\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/elektrobox.ch\/#\/schema\/person\/878bd55e17d9d0b1a53523fa5e90f6b2","name":"Jacob Jarosz","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elektrobox.ch\/wp-content\/uploads\/2026\/05\/Logo_Color-Kopie-scaled.png","url":"https:\/\/elektrobox.ch\/wp-content\/uploads\/2026\/05\/Logo_Color-Kopie-scaled.png","contentUrl":"https:\/\/elektrobox.ch\/wp-content\/uploads\/2026\/05\/Logo_Color-Kopie-scaled.png","width":2560,"height":2560,"caption":"Jacob Jarosz"},"logo":{"@id":"https:\/\/elektrobox.ch\/wp-content\/uploads\/2026\/05\/Logo_Color-Kopie-scaled.png"},"sameAs":["http:\/\/elektrobox.ch"]}]}},"_links":{"self":[{"href":"https:\/\/elektrobox.ch\/index.php\/wp-json\/wp\/v2\/pages\/855858","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elektrobox.ch\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/elektrobox.ch\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/elektrobox.ch\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/elektrobox.ch\/index.php\/wp-json\/wp\/v2\/comments?post=855858"}],"version-history":[{"count":1,"href":"https:\/\/elektrobox.ch\/index.php\/wp-json\/wp\/v2\/pages\/855858\/revisions"}],"predecessor-version":[{"id":855859,"href":"https:\/\/elektrobox.ch\/index.php\/wp-json\/wp\/v2\/pages\/855858\/revisions\/855859"}],"wp:attachment":[{"href":"https:\/\/elektrobox.ch\/index.php\/wp-json\/wp\/v2\/media?parent=855858"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}