diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..dc67c17 --- /dev/null +++ b/css/style.css @@ -0,0 +1,226 @@ +* { + margin: 0; + padding: 0; +} + +body{ + font-family: arial; +} + +.wrapper { + display: flex; + flex-direction: column; + margin: auto; + width: 900px; +} + +.section { + margin: 10px 0; +} + +.bottom-divider { + border-bottom: 2px solid #000000; + padding-bottom: 20px; +} + +.sub-section { + clear: both; + margin-bottom: 1px; +} + +.section, +.sub-section { + width: 100%; +} + +.column { + float: left; +} + +.column-center { + min-width: 160px; + text-align: center; +} + +.column-right { + float: right; +} + +.sub-section-title { + margin: 0 0 10px; +} + +p { + margin: 20px 0; +} + +.table { + display: table; + margin: 10px 0 0; + width: 100%; +} + +.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; +} + +#format-caption-container div { + color: #505050; + display: none; + font-size: .9em; + line-height: 1.4em; + padding: 10px 0 15px; + width: 100%; +} + +.upload-note { + max-width: 300px; +} + +.byte-input { + min-height: 160px; + min-width: 360px; +} + +.code-output { + height: 200px; + width: 100%; +} + +.note { + color: #666666; + font-size: .9em; + line-height: 1.4em; + margin: 3px 0; +} + +.file-input-entry { + display: flex; + justify-content: space-between; + margin-bottom: 10px; +} + +button, +input[type="file"] { + background: #00CB99; + border-radius: 3px; + border: none; + color: #fff; + font-size: .9em; + font-weight: bold; + margin: 10px 0; + padding: 4px 8px; +} + +input[type="file"] { + font-size: 1.0em; + padding: 6px 20px; +} + +.generate-button { + margin: 40px 0 20px; +} + +.remove-button { + margin: 0 0 0 10px; + padding: 1px 4px; +} + +.file-info { + color: #505050; + font-size: .7em; + margin-left: 20px; + 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; +} + +#images-canvas-container canvas { + border: 3px solid #88DAC5; + margin: 10px 15px; +} + +#images-canvas-container { + align-items: flex-start; + display: flex; + flex-wrap: wrap; +} + +#arduino-identifier, +#adafruit-gfx-settings, +#all-same-size { + display: none; +} + +.msg { + font-size: 1.2em; +} + +.error-msg { + color: #ff0000; + display: none; +} + +h1{ + padding: 10px; + color: white; + background-color: #00cb99; +} + +.sp-block { + border: 1px solid rgb(65, 65, 65); + padding: .5rem; + border-radius: 1rem; +} +.sp-btn { + display: block; + margin-top: .5rem; +} diff --git a/index.html b/index.html index ad57ff3..da01b16 100644 --- a/index.html +++ b/index.html @@ -11,239 +11,21 @@ image2cpp - - - - + + +

image2cpp

-

image2cpp is a simple tool to change images into byte arrays (or your array back into an image) for use with Arduino and (monochrome) displays such as OLEDs. - It was originally made to work with the Adafruit OLED library. An example sketch for Arduino and this library can be found here.

+

image2cpp is a simple tool to change images into byte arrays (or arrays back into an images) for use with (monochrome) displays such as OLEDs on your Arduino or Raspberry Pi.
+ It was originally made to work with the Adafruit OLED library (for which your can find an example sketch for Arduino here) but + has been expanded by the community to be useful in all kind of (embedded) projects.

More info (and credits) can be found in the Github repository. This is also where you can 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.

-

- Did you find this tool useful? Feel free to support my open source software:
- +

+ Did you find this tool useful? Feel free to support my open source software on Github:
+