From 123b18f89c10f4efd313808ee14fbb154fac6808 Mon Sep 17 00:00:00 2001 From: damp11113 Date: Tue, 24 Dec 2024 20:50:48 +0700 Subject: [PATCH] add pixel transition and fix readme and add example to test.html --- README.md | 35 ++++++++-- javascript/char-lcd.js | 20 +++--- test.html | 141 +++++++++++++++++++++++++++++------------ 3 files changed, 141 insertions(+), 55 deletions(-) diff --git a/README.md b/README.md index 04e0867..bc89eb2 100644 --- a/README.md +++ b/README.md @@ -68,11 +68,24 @@ require(['char-lcd'], function(CharLCD) { ## Example ```html -
-... -var lcd = new CharLCD({ at: 'lcd', rows: 2, cols: 16, rom: 'eu' }); -// Map UNICODE string to the internal character set: -lcd.text(0, 0, "ЁЛКИ-ПАЛКИ!"); +
+ + ``` ## API @@ -82,10 +95,15 @@ lcd.text(0, 0, "ЁЛКИ-ПАЛКИ!"); - `at`: a DOM element in which to place the object, or its `id`; default: at the bottom of the page; - `rom`: `jp` (default) for Japanese standard font, or `eu` for European standard font. -- `rows`: - number of rows; +- `rows`: number of rows; default: 2; -- `cols`: - number of columns; +- `cols`: number of columns; default: 16; +- `pix`: pixel size; default: 3; +- `brk`: space between pixel; default: 1; +- `off`: character pixel off color (background); default: #cd2; +- `on`: character pixel on color; default: #143; +- `transitionDuration`: character pixel transition duration; default: 100ms; Unlike the real hardware where only certain combinations of `rows`/`cols` exist, there are no restrictions in the simulator; @@ -100,3 +118,6 @@ This function treats `\n` as new line and maps UNICODE characters to the interna ##### font(n, data) `lcd.font(n, data);` - define the pixels for the `n`-th character; `data` is an array of up to 10 bytes. In real hardware, only first 8 characters can be changed, but there is no such limitation in the simulator. + +##### clear() +`lcd.clear();` - clear all characters in LCD. \ No newline at end of file diff --git a/javascript/char-lcd.js b/javascript/char-lcd.js index c19b613..14551c8 100644 --- a/javascript/char-lcd.js +++ b/javascript/char-lcd.js @@ -13,9 +13,9 @@ })(this, function() { //////////////////////////// -var CW = 5; // charachter width -var CH = 8; // character height -var CL = 10; // large character height +var CW = 5; +var CH = 8; +var CL = 10; function CharLCD(obj) { var _ = { @@ -27,13 +27,15 @@ function CharLCD(obj) { pix: 3, brk: 1, off: '#cd2', - on: '#143' - } + on: '#143', + transitionDuration: '100ms' + }, + previousState: [], }; if (obj) { for (var key in obj) { - if (typeof _.arg[key] != 'undefined' && _.arg[key] == parseInt(_.arg[key])) { // numeric + if (typeof _.arg[key] != 'undefined' && _.arg[key] == parseInt(_.arg[key])) { if (obj[key] == parseInt(obj[key]) && obj[key] > 0) _.arg[key] = parseInt(obj[key]); } else _.arg[key] = obj[key]; @@ -41,11 +43,12 @@ function CharLCD(obj) { if (obj.rom && obj.rom.toString().toLowerCase() == 'eu') _.rom = _eu; } create(_); + this.set = function(r, c, data) { set(_, r, c, data); }; this.char = function(r, c, ch) { char(_, r, c, ch); }; this.text = function(r, c, str) { text(_, r, c, str); }; this.font = function(n, data) { font(_, n, data); }; - this.clear = function() { clear(_) } + this.clear = function() { clear(_) }; } function create(_) { @@ -91,6 +94,7 @@ function createAt(_) { pix.style.width = _.arg.pix + 'px'; pix.style.height = _.arg.pix + 'px'; pix.style.backgroundColor = _.arg.off; + pix.style.transition = `background-color ${_.arg.transitionDuration} ease-in-out`; _.pix.push(pix); lcd.appendChild(pix); } @@ -158,7 +162,7 @@ function font(_, n, data) { function clear(_) { for (var r = 0; r < _.arg.rows; r++) { for (var c = 0; c < _.arg.cols; c++) { - set(_, r, c, []); // Set all pixels to off (clear the character) + set(_, r, c, []); } } } diff --git a/test.html b/test.html index e84276d..c3ce89f 100644 --- a/test.html +++ b/test.html @@ -1,46 +1,107 @@ - -char-lcd test - - - - + + char-lcd test + + -

char-lcd test

- -
- - - -
-
- - - -
- - +

char-lcd test

+ +
+ + + +
+
+ + + +
+ +

Example code in README.md

+
+ +

LCD Without Blur Effect

+ + +

LCD With Blur Effect

+ + + \ No newline at end of file