diff --git a/index.html b/index.html index b0bfdaa..69c6769 100644 --- a/index.html +++ b/index.html @@ -21,10 +21,10 @@ font-family: arial; } .wrapper { - width: 800px; - margin: auto; display: flex; flex-direction: column; + margin: auto; + width: 800px; } .section { margin: 10px 0; @@ -37,7 +37,8 @@ clear: both; margin-bottom: 1px; } - .section, .sub-section { + .section, + .sub-section { width: 100%; } .column { @@ -56,46 +57,77 @@ p { margin: 20px 0; } - .table { display: table; width: 100%; margin: 10px 0 0;} - .table-row { display: table-row; width: 100%; } - .table-cell { display: table-cell; padding: 5px 0;} - .table-cell:first-child { width: 30%; } - .table-cell:last-child { width: 70%; } - .table-cell:first-child label {font-weight: bold; } - .table-cell:last-child label { margin-right: 10px; } - .nested-table { margin: 0; } - .nested-table .table-cell { font-size: .9em; color: #666; width: 200px; } - .nested-table .table-cell:first-child { } - #format-caption-container div { - display: none; + .table { + display: table; + margin: 10px 0 0; width: 100%; - padding: 10px 0 15px; + } + .table-row { + display: table-row; + width: 100%; + } + .table-cell { + display: table-cell; + padding: 5px 0; + } + .table-cell:first-child { + width: 30%; + } + .table-cell:last-child { + width: 70%; + } + .table-cell:first-child label { + font-weight: bold; + } + .table-cell:last-child label { + margin-right: 10px; + } + .nested-table { + margin: 0; + } + .nested-table .table-cell { + color: #666; + font-size: .9em; + width: 200px; + } + .nested-table .table-cell:first-child { } + + #format-caption-container div { + color: #505050; + display: none; font-size: .9em; line-height: 1.4em; - color: #505050; + padding: 10px 0 15px; + width: 100%; } .byte-input { - min-width: 360px; min-height: 160px; + min-width: 360px; } .code-output { - width: 100%; height: 200px; + width: 100%; } - .note { color: #666666; margin: 3px 0; font-size: .9em; line-height: 1.4em; } - button, input[type="file"]::-webkit-file-upload-button { - margin: 10px 0; - background: #00CB99; - border: none; - padding: 4px 8px; - color: #fff; - font-weight: 100; + .note { + color: #666666; font-size: .9em; + line-height: 1.4em; + margin: 3px 0; + } + button, + input[type="file"]::-webkit-file-upload-button { + background: #00CB99; border-radius: 3px; + border: none; + color: #fff; + font-size: .9em; + font-weight: 100; + margin: 10px 0; + padding: 4px 8px; } input[type="file"]::-webkit-file-upload-button { - padding: 6px 20px; font-size: 1.6em; + padding: 6px 20px; } .generate-button { margin: 40px 0 20px; @@ -105,37 +137,57 @@ padding: 1px 4px; } .file-info { - font-size: .7em; color: #505050; + font-size: .7em; margin-left: 20px; - white-space: pre; max-width: 300px; + white-space: pre; + } + .size-input{ + width: 45px; + } + .glyph-input { + width: 80px; + margin-left: 10px; + } + #image-size-settings { + list-style-type: none; + } + #image-size-settings li { + margin: 4px 0; } - .size-input{ width: 45px; } - .glyph-input { width: 80px; margin-left: 10px; } - #image-size-settings { list-style-type: none; } - #image-size-settings li { margin: 4px 0; } #images-canvas-container canvas { border: 3px solid #88DAC5; margin: 10px 15px; } #images-canvas-container { + align-items: flex-start; display: flex; flex-wrap: wrap; - align-items: flex-start; } #extra-settings-container { } - #arduino-identifier, #adafruit-gfx-settings, #all-same-size { display: none; } - .msg { font-size: 1.2em; } - .error-msg { color: #ff0000; display: none; } + #arduino-identifier, + #adafruit-gfx-settings, + #all-same-size { + display: none; + } + .msg { + font-size: 1.2em; + } + .error-msg { + color: #ff0000; + display: none; + }

image2cpp

-

Click here to visit the Github repo for this tool.

-

Note: the tool was updated to let you select and convert multiple files at the same time (among some other changes). Do let us know if this update broke anything by opening an issue on Github.

+

This tool helps you convert images into bytestrings, which can be used with Arduino and OLED displays (among other platforms). + It was originally made to work with the Adafruit OLED library. An example sketch for Arduino and this library can be found here.

+

More info can be found in the Github repository. This is also where you report any issues you might come across.

+

This tool also works offline. Simply save this page to your computer and open the file in your browser.

@@ -308,7 +360,6 @@