diff --git a/README.md b/README.md
index 12361ed..0709c1f 100644
--- a/README.md
+++ b/README.md
@@ -8,6 +8,9 @@ I like to use the SSD1306-based displays in Particle projects. They're small and
- 128 x 32 short
- 128 x 64 yellow and blue, with the top 16 pixels yellow and the rest blue
+There's also support for SH110X OLED displays:
+- 128 x 128 white (1.5")
+
They're available with I2C and SPI interfaces. I recommend I2C; it's fewer pins (D0 and D1 only) and the added speed of SPI is not worth the effort in my opinion.
On Particle devices, the [Adafruit GFX library](https://github.com/adafruit/Adafruit-GFX-Library) is typically used to draw to the display. It works great, but it's kind of a pain to have to adjust a pixel or two, recompile and flash your code, and repeat the process over and over.
@@ -87,6 +90,12 @@ It also generates the C++ display code, including the GFX calls, any additional
The Javascript code takes the display bitmap and renders it on a HTML5 canvas in normal and zoomed size.
+## Running Locally:
+Run the following command and open `http://localhost:8000/public/` in your browser:
+
+```
+python -m http.server 8000
+```
## Releases
diff --git a/public/editor.css b/public/editor.css
index 6f5e8dd..51ed91f 100644
--- a/public/editor.css
+++ b/public/editor.css
@@ -1,22 +1,20 @@
-body
-{
-background-color:#ffffff;
-max-width:800;
+body {
+ background-color:#ffffff;
+ max-width:800;
+ margin: auto;
+ padding-top: 1rem;
}
-p,h1,h2,h3,li,td,div
-{
-font-family: helvetica, sans-serif;
-color:#000000;
-font-size: medium;
+p, h1, h2, h3, li, td, div {
+ font-family: helvetica, sans-serif;
+ color:#000000;
+ font-size: medium;
}
-div.selectedCommand
-{
-background-color:#ffee67;
+div.selectedCommand {
+ background-color:#ffee67;
}
-textarea.code
-{
-font-family: monospace;
+textarea.code {
+ font-family: monospace;
}
\ No newline at end of file
diff --git a/public/editor.js b/public/editor.js
index 97c60d0..318bc84 100644
--- a/public/editor.js
+++ b/public/editor.js
@@ -2,8 +2,10 @@
// Repository: https://github.com/rickkas7/DisplayGenerator
// License: MIT
-var screenx = 128;
-var screeny = 64;
+var maxScreenX = 128;
+var maxScreenY = 128;
+var currentScreenX = 128;
+var currentScreenY = 64;
var zoom = 3;
var margin = 4;
var showMini = true;
@@ -23,10 +25,10 @@ var Module = {
onRuntimeInitialized: function() {
// console.log('Enscripten loaded!');
- // Create an Adafruit GFX 1-bit deep bitmap of screenx x screeny pixels
+ // Create an Adafruit GFX 1-bit deep bitmap of maxScreenX and maxScreenY pixels
// Note: when using the short display the GFX screen size is still set at
// 128x64, it's just the bottom half isn't rendered to the screen.
- gfx = new Module.TestGFX(screenx, screeny);
+ gfx = new Module.TestGFX(maxScreenX, maxScreenY);
initializeVue();
}
@@ -229,7 +231,7 @@ function initializeVue() {
},
moveUpCommand: function() {
if (this.selectedCommandId > 0) {
- for(var ii = 1; ii < mainApp.commands.length - 1; ii++) {
+ for(var ii = 1; ii < mainApp.commands.length; ii++) {
var cmd = mainApp.commands[ii];
if (cmd.id == this.selectedCommandId) {
mainApp.commands[ii] = mainApp.commands[ii - 1];
@@ -386,15 +388,15 @@ function initializeVue() {
if (cx < 0) {
cx = 0;
}
- if (cx > screenx) {
- cx = screenx;
+ if (cx > currentScreenX) {
+ cx = currentScreenX;
}
var cy = Math.round((y - margin) / zoom);
if (cy < 0) {
cy = 0;
}
- if (cy > screeny) {
- cy = screeny;
+ if (cy > currentScreenY) {
+ cy = currentScreenY;
}
this.coordinates = '(' + cx + ', ' + cy + ')';
@@ -425,11 +427,16 @@ function initializeVue() {
handler(val) {
if (val === 'short') {
// 128x32
- screeny = 32;
+ currentScreenY = 32;
+ }
+ else if (val === 'SH110X_large') {
+ // 128x128
+ currentScreenX = 128;
+ currentScreenY = 128;
}
else {
// 128x64
- screeny = 64;
+ currentScreenY = 64;
}
document.getElementById('mainCanvas').height = mainCanvasHeight();
@@ -837,7 +844,7 @@ function initializeVue() {
switch(this.standardLogoSelect) {
case 'p128x32':
selectedCmd.x = 0;
- selectedCmd.y = (screeny == 32) ? 0 : 16;
+ selectedCmd.y = (currentScreenY == 32) ? 0 : 16;
selectedCmd.width = 128;
selectedCmd.height = 32;
selectedCmd.bitmap = particle128x32;
@@ -845,7 +852,7 @@ function initializeVue() {
case 'p32x32':
selectedCmd.x = 48;
- selectedCmd.y = (screeny == 32) ? 0 : 16;
+ selectedCmd.y = (currentScreenY == 32) ? 0 : 16;
selectedCmd.width = 32;
selectedCmd.height = 32;
selectedCmd.bitmap = particle32x32;
@@ -853,7 +860,7 @@ function initializeVue() {
case 'p48x48':
selectedCmd.x = 40;
- selectedCmd.y = (screeny == 32) ? -8 : 8;
+ selectedCmd.y = (currentScreenY == 32) ? -8 : 8;
selectedCmd.width = 48;
selectedCmd.height = 48;
selectedCmd.bitmap = particle48x48;
@@ -1069,13 +1076,15 @@ function processCommands() {
case 'setTextColor':
+ const colorPrex = mainApp.displayType === 'SH110X_large' ? 'SH110X_' : '';
+
if (!cmd.invert) {
gfx.setTextColor(1);
- codeImpl += indent + gfxClass + 'setTextColor(WHITE);\n';
+ codeImpl += indent + gfxClass + `setTextColor(${colorPrex}WHITE);\n`;
}
else {
gfx.setTextColor2(0, 1);
- codeImpl += indent + gfxClass + 'setTextColor(BLACK, WHITE);\n';
+ codeImpl += indent + gfxClass + `setTextColor(${colorPrex}BLACK, ${colorPrex}WHITE);\n`;
}
break;
@@ -1106,7 +1115,7 @@ function processCommands() {
var cursorY = gfx.getCursorY();
cmd.width = gfx.measureTextX(cmd.text);
- var cursorX = Math.floor((screenx / 2) - (cmd.width / 2));
+ var cursorX = Math.floor((currentScreenX / 2) - (cmd.width / 2));
gfx.setCursor(cursorX, cursorY);
codeImpl += indent + gfxClass + 'setCursor(' + cursorX + ', ' + cursorY + ');\n';
@@ -1161,13 +1170,13 @@ function mainCanvasY(y) {
return margin + y * zoom + ((mainApp.displayType === 'yellow' && y >= yellowTopSize) ? zoom : 0);
}
function mainCanvasWidth() {
- return (2 * margin) + (screenx * zoom);
+ return (2 * margin) + (currentScreenX * zoom);
}
function mainCanvasHeight() {
- return (2 * margin) + (screeny * zoom) + ((mainApp.displayType === 'yellow') ? zoom : 0);
+ return (2 * margin) + (currentScreenY * zoom) + ((mainApp.displayType === 'yellow') ? zoom : 0);
}
function miniCanvasLeft() {
- return (screenx * zoom) + (2 * margin) + miniSeparator;
+ return (currentScreenX * zoom) + (2 * margin) + miniSeparator;
}
function miniCanvasX(x) {
return miniCanvasLeft() + miniMargin + x;
@@ -1176,10 +1185,10 @@ function miniCanvasY(y) {
return miniMargin + y + ((mainApp.displayType === 'yellow' && y >= yellowTopSize) ? 1 : 0);
}
function miniCanvasWidth() {
- return (2 * miniMargin) + screenx;
+ return (2 * miniMargin) + currentScreenX;
}
function miniCanvasHeight() {
- return (2 * miniMargin) + screeny + ((mainApp.displayType === 'yellow') ? 1 : 0);
+ return (2 * miniMargin) + currentScreenY + ((mainApp.displayType === 'yellow') ? 1 : 0);
}
function render() {
@@ -1204,7 +1213,7 @@ function render() {
var byteIndex = 0;
- for(var yy = 0; yy < screeny; yy++) {
+ for(var yy = 0; yy < currentScreenY; yy++) {
if (yellow) {
if (yy < yellowTopSize) {
ctx.fillStyle = displayYellow;
@@ -1213,7 +1222,7 @@ function render() {
ctx.fillStyle = displayBlue;
}
}
- for(var xx = 0; xx < screenx; xx += 8) {
+ for(var xx = 0; xx < currentScreenX; xx += 8) {
var pixel8 = bytes[byteIndex++];
for(var ii = 0; ii < 8; ii++) {
diff --git a/public/index.html b/public/index.html
index f6af2de..3a2f0b6 100644
--- a/public/index.html
+++ b/public/index.html
@@ -21,6 +21,7 @@
+