mirror of
https://github.com/javl/image2cpp.git
synced 2026-09-11 17:13:20 +00:00
24 KiB
24 KiB
<html class="light" lang="en" style=""><head>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
"colors": {
"on-primary-container": "#004538",
"on-tertiary": "#ffffff",
"surface-variant": "#e0e3e5",
"on-primary-fixed": "#002019",
"on-secondary-fixed": "#091d2e",
"border-subtle": "#E2E8F0",
"outline": "#6c7a75",
"inverse-surface": "#2d3133",
"tertiary-container": "#fa866f",
"tertiary-fixed-dim": "#ffb4a5",
"success-teal": "#1ABC9C",
"secondary-fixed-dim": "#b5c8df",
"inverse-on-surface": "#eff1f3",
"on-secondary-container": "#526478",
"surface-container-low": "#f2f4f6",
"on-tertiary-fixed-variant": "#7f2a1a",
"on-primary": "#ffffff",
"editor-bg": "#1E1E1E",
"secondary": "#4e6073",
"surface-tint": "#006b58",
"primary-container": "#1abc9c",
"on-secondary": "#ffffff",
"tertiary": "#9f402e",
"on-surface": "#191c1e",
"on-primary-fixed-variant": "#005141",
"text-muted": "#64748B",
"tertiary-fixed": "#ffdad3",
"surface-bright": "#f7f9fb",
"on-tertiary-fixed": "#3f0400",
"error": "#ba1a1a",
"on-surface-variant": "#3c4a45",
"inverse-primary": "#4eddbb",
"primary": "#006b58",
"surface-container": "#eceef0",
"surface-container-high": "#e6e8ea",
"error-container": "#ffdad6",
"on-error": "#ffffff",
"primary-fixed-dim": "#4eddbb",
"surface-container-lowest": "#ffffff",
"secondary-container": "#cfe2f9",
"surface-dim": "#d8dadc",
"on-secondary-fixed-variant": "#36485b",
"background": "#f7f9fb",
"surface": "#f7f9fb",
"on-tertiary-container": "#711f10",
"outline-variant": "#bbcac3",
"on-background": "#191c1e",
"surface-container-highest": "#e0e3e5",
"secondary-fixed": "#d1e4fb",
"on-error-container": "#93000a",
"primary-fixed": "#6ff9d6"
},
"borderRadius": {
"DEFAULT": "0.125rem",
"lg": "0.25rem",
"xl": "0.5rem",
"full": "0.75rem"
},
"spacing": {
"step-gap": "48px",
"container-max": "1200px",
"margin-desktop": "40px",
"margin-mobile": "16px",
"gutter": "24px"
},
"fontFamily": {
"body-md": ["Inter"],
"headline-lg-mobile": ["Inter"],
"code-block": ["JetBrains Mono"],
"body-sm": ["Inter"],
"headline-lg": ["Inter"],
"label-mono": ["JetBrains Mono"],
"headline-md": ["Inter"]
},
"fontSize": {
"body-md": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
"headline-lg-mobile": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
"code-block": ["14px", {"lineHeight": "22px", "fontWeight": "400"}],
"body-sm": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
"headline-lg": ["30px", {"lineHeight": "38px", "letterSpacing": "-0.02em", "fontWeight": "600"}],
"label-mono": ["13px", {"lineHeight": "16px", "fontWeight": "500"}],
"headline-md": ["20px", {"lineHeight": "28px", "fontWeight": "600"}]
}
},
},
}
</script>
<style>
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.step-active { color: #006b58; }
.step-line { position: absolute; left: 19px; top: 40px; bottom: -20px; width: 2px; background-color: #E2E8F0; }
.last-step-line { display: none; }
.custom-scrollbar::-webkit-scrollbar { width: 8px; }
.custom-scrollbar::-webkit-scrollbar-track { background: #f1f1f1; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
</style>
</head>
<script>
// Simple interactivity for demonstration
document.querySelectorAll('nav div, nav a').forEach(item => {
item.addEventListener('click', function() {
// Remove active classes from all
document.querySelectorAll('nav div').forEach(d => {
d.classList.remove('text-primary', 'font-bold', 'bg-primary-container/10', 'border-r-4', 'border-primary');
d.classList.add('text-secondary');
});
// Add to clicked
if (this.tagName === 'DIV') {
this.classList.add('text-primary', 'font-bold', 'bg-primary-container/10', 'border-r-4', 'border-primary');
this.classList.remove('text-secondary');
}
});
});
</html>
image2cpp
GitHub
dark_mode
Reset page
Image to C++ Converter
Generate monochrome byte arrays for OLED displays on Arduino or Raspberry Pi. All processing happens in your browser.
1
Upload Image File
cloud_upload
Drag and drop images here or Browse
Supports JPG, PNG, BMP, GIF
Or Paste Byte Array
2
Image Configuration
Canvas Size (px)
×
Background Color
White
Black
Transp.
Scaling
Original Size
Scale to Fit
Stretch to Fill
Stretch Horizontally
Stretch Vertically
Dithering Algorithm
Binary (Threshold)
Bayer (Ordered)
Floyd-Steinberg
Atkinson
Threshold (0-255)
128
Image Adjustments
Invert Colors
rotate_right Rotate Image
flip Flip Image
3
Preview
Original
Converted (1-bit)
4
Output Settings
Output Format
Plain bytes
Arduino code
Arduino code (Single Bitmap)
Adafruit GFX Bitmap Font
Identifier / Prefix
Draw Mode
Horizontal - 1 bit per pixel
Vertical - 1 bit per pixel
Horizontal - 2 bytes per pixel (565)
Swap bits in byte
Remove '0x' and commas
play_arrow Generate
content_copy Copy
download .bin
// Generated by image2cpp // 128x64px, myBitmap
const unsigned char myBitmap [] PROGMEM = {
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0xff, 0xff,
0xff, 0xff, 0x00, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x00, 0xff, 0xff,
0xff, 0xff, 0x00, 0xff, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0xff, 0x00, 0xff, 0xff,
0xff, 0xff, 0x00, 0xff, 0x00, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x00, 0xff, 0x00, 0xff, 0xff,
0xff, 0xff, 0x00, 0xff, 0x00, 0xff, 0x00, 0x00, 0x00, 0x00, 0xff, 0x00, 0xff, 0x00, 0xff, 0xff,
0xff, 0xff, 0x00, 0xff, 0x00, 0xff, 0x00, 0xff, 0xff, 0x00, 0xff, 0x00, 0xff, 0x00, 0xff, 0xff,
0xff, 0xff, 0x00, 0xff, 0x00, 0xff, 0x00, 0x00, 0x00, 0x00, 0xff, 0x00, 0xff, 0x00, 0xff, 0xff,
0xff, 0xff, 0x00, 0xff, 0x00, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x00, 0xff, 0x00, 0xff, 0xff,
0xff, 0xff, 0x00, 0xff, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0xff, 0x00, 0xff, 0xff,
0xff, 0xff, 0x00, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x00, 0xff, 0xff,
0xff, 0xff, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff
};
info
If the preview looks scrambled on your hardware, try switching the Draw Mode between Horizontal and Vertical.
// Sticky side nav highlight on scroll logic could be added here
</script>