Vibe coding 小工具 - Light Matrix Pixel Editor 輕量化 Web App

這是一個非常實用的 Vibe coding 小工具力作，特別推薦給從事嵌入式開發或 LED 矩陣專案的設計師與工程師們！

這款 Light Matrix Pixel Editor 是一個極輕量化、基於瀏覽器的像素藝術編輯器。它最大的優點是完全無需安裝、沒有任何依賴項—電腦端(PC/Mac)只需下載並打開 HTML 檔案，即可在瀏覽器中開始繪製您的矩陣圖案。

主要功能特色：

• 專為 LED 矩陣設計： 直觀的網格編輯介面，完美模擬 LED 燈珠排列。

• 靈活的尺寸設定： 可自定義像素矩陣的寬度與高度，適應各種不同規格的硬體。

• 匯出與整合： 支援匯出Array為 HEX string，方便直接複製貼上到 Arduino、ESP32 或其他嵌入式專案的程式碼中。

• 跨平台兼容： 無論在 Windows、macOS、Linux 還是行動裝置(受限)上的瀏覽器，都能順暢運行。(PS:在手機系統中與檔案相關功能無法使用)

這款工具極大簡化了 LED 點陣顯示圖案的設計流程，讓您專注於創意與內容的呈現，不再被複雜的軟體安裝與設定所困擾。

GitHub 專案連結：  https://github.com/benwei/ltmx-pixel-edit
Live Demo：https://ben.juluos.org/ltmx-pixel-edit-live-demo/ltmx-pixel-edit.html

英文使用說明:

* https://github.com/benwei/ltmx-pixel-edit/blob/main/USER-GUIDE.md

快速使用指南：

1. 下載專案中的 ltmx-pixel-edit.html 檔案。

2. 用您的瀏覽器（Google Chrome, Firefox, Safari 等）打開它。

3. 設定您的矩陣尺寸，選擇顏色，開始繪圖！

4. 完成後，點擊「Export」圖示按鈕，將生成的代碼整合到您的專案中。

如果您對這款小工具有任何建議或遇到問題，歡迎前往 GitHub 提交 Issue。希望這個工具能讓您的 LED 專案更輕鬆、更有趣！

如果您覺得這個工具好用，別忘了給我的專案一個 ⭐ Star 喔！感謝大家的支持！

#PixelArtEditor #LEDMatrix #EmbeddedDevelopment #WebTool #VibeCoding #Arduino #ESP32 #OpenSource #HTML5 #Maker工具 #點陣圖編輯器

當 Web Server 遇上10年老古董機 EPIA MII-12000

資料來源:Apache Web Survery

很久沒寫網誌，最近看了 Apache Web server 調查報告，發現這幾個月 nginx 成長的真快，看來Microsoft 巿佔被吃不少，而 Apache 也稍覺有威脅了吧。

近年來，筆者也有使用 nginx + fastcgi組合來開發django/nodejs web app。
用它的原因是:

• light weight
• performance
• scalability
• reliability

還有另外兩個主要的原因

Reverse proxy for HTTP and Mail

就是拿來做 HTTP reverse proxy 非常好用。nginx可以將 request 導向不同的 網址: '/' 或 'app/' 分別導到許不同的servers或web 服務程式。

Load balancing

免費版本: 已有 Simple load balancing for HTTP/HTTPS 的功能 (詳見: nginx's products)

我的老古董機 EPIA MII-12000

(圖片來源: VIA Embedded)

nginx 拿來做實驗真的很方便，連筆者的近10年前的舊機  EPIA MII-12000 + 256MB 也使用 nginx 來跑 reverse proxy 來做小 web app 也十分順暢。

目前MII上，使用debian 7.0 上安裝 nginx，十分簡單。

 sudo apt-get install nginx

連 http://yourserver/ 即可看到

nginx memory 使用量 3.1 %

比較一下 lighttpd 0.4 %

其實以 nginx 提供的功能相比記憶使用量，筆者覺得性價比十分高。

最後問一下, 本網誌的網友主要使用那一種 Web Server 呢?

參考資料:

• http://news.netcraft.com/archives/2014/03/03/march-2014-web-server-survey.html
• http://nginx.com/products/
• http://www.blogjava.net/daniel-tu/archive/2008/12/29/248883.html
• http://www.viaembedded.com/en/products/boards/202/2/EPIA_MII-Series_Mini-ITX_Board_(EOL).html
• https://wiki.debian.org/Nginx

用BeagleBone Rev.A3 打造簡易行動NAS系統

承上篇開發環境 BeagleBone A8 實測Linaro-nano, 筆者便想這塊Beaglebone 可以做什麼實際用途呢?

去年,曾寫過試用FreeNas 8.01一文，若能將常用的功能(rsync, ssh, cifs) 放到Beaglebone，則它便可成為一台行動網路NAS。

但FreeNas 還沒有ARM的版本，所以筆者用Linaro-nano 為基礎，作了簡單實做。

開發時，遇到網路卡會不定時自動斷掉，十分惱人。原本以為是Linaro 所用的kernel 不穩定；
後來找了很久，最後發現BeagleBone - Rev. A3上已知硬體問題。

Etherent Drop/Reset switch(A3 and A4 Only] On some A3 and A4 boards, the reset switch can develop a low impedance path to ground creating a voltage divider making the reset line go to 1.5V to 1.8V. To determine this you can measure the voltage on pin 10 of P9. This issue can cause intermittent resets of the SMSC PHY, causing the link to drop. To fix this, just remove the reset switch. No, it will not void the warranty on the board if you remove the reset switch. You can request an RMA for a new switch and one will be sent to you. You can also request an RMA, return the board, and we will repair the switch for you.

依照說明（不會因此破壞保固），用尖嘴鉗把Reset 按鈕暴力拔除；斷電後，重新啟動執行，測試超過24小時，目前都運作正常。


簡易NAS移植

在Linaro 中，以apt-get 安裝下列套件

• CIFS - Samba
• Rsync -
• FTP  - sftp
• SSH - openssl-server

另外，使用者介面部分，暫時先以編輯設定檔方式來修改啟動必要之功能。

目前在開發板中，以Web方式來實作必要的管理介面。
Web 由將下列主要由 node.js+ python batchjob 組成。

利用node.js來實做web 介來顯示系統狀態:

使用arm gcc-4.6.1, 編譯node.js 0.6.9，並安裝npm套件: express, commander, nconf

NAS Web Prototype – Status



小結：

經由上述實做，筆者將beaglebone Rev.A3 打造成為一個小型NAS 系統，
可利用 rsync , ssh/sftp , cifs 來經由網路存取其SD卡或姆指碟，
而系統記憶使用量約在80MB左右，應可進一步瘦身；
最後可依筆者需求來開發對應Restful API來進行管理作業。

python 與 Redis 資料庫初探

個最近想提高公司網站的效能，之前為求先縮短第一版開發的時程，先用MySQL來實作session store，始終覺得有殺雞用牛刀的感覺。便著手研究目前非常流行的Redis，它是一種No SQL及In-Memory 的資料庫，就一個倶有Key-Value結構等特性的資料庫而言，十分適合用來做Session Store使用。


安裝

為Redis 的網站說明做的不錯，照著下載區及其安裝說明，三步驟安裝：

$ wget http://redis.googlecode.com/files/redis-2.4.6.tar.gz $ tar xzf redis-2.4.6.tar.gz $ cd redis-2.4.6 $ make

網站上建議使用2.4 版，筆者下載2.4.6 穩定版來安裝。

目前開發環境在Mac OS X Lion及 Ubuntu 11.10上，安裝都十分順利；但無法在cygwin中編譯成功。安裝完成後，預設無密碼。直接執行 redis-server 啟動：

/home/ubuntu# redis-server /usr/local/etc/redis.conf [1264] 30 Jan 14:35:26 * Server started, Redis version 2.4.6 [1264] 30 Jan 14:35:26 * DB loaded from disk: 0 seconds [1264] 30 Jan 14:35:26 * The server is now ready to accept connections on port 6379 [1264] 30 Jan 14:35:26 - DB 0: 1 keys (0 volatile) in 4 slots HT. [1264] 30 Jan 14:35:26 - 0 clients connected (0 slaves), 717560 bytes in use [1264] 30 Jan 14:35:31 - DB 0: 1 keys (0 volatile) in 4 slots HT. [1264] 30 Jan 14:35:31 - 0 clients connected (0 slaves), 717560 bytes in use

接著使用redis-cli 便可直接連上redis-server。(詳參照data types intro)

$ redis-cli redis 127.0.0.1:6379> get a "1" redis 127.0.0.1:6379> set a 2 OK redis 127.0.0.1:6379> get a "2" redis 127.0.0.1:6379> incr a (integer) 3 redis 127.0.0.1:6379> get a "3" redis 127.0.0.1:6379> quit

python redis.py

sudo pip install redis

或

sudo easy_install redis

使用python import redis 來測試看看

ubuntu@redis:~$ python Python 2.7.2+ (default, Oct  4 2011, 20:06:09) [GCC 4.6.1] on linux2 Type "help", "copyright", "credits" or "license" for more information. >>> import redis >>> r = redis.StrictRedis(host='localhost', port=6379, db=0) >>> r.get('a') '3' >>> r.set('b', 10) True >>> r.incr('b') 11 >>> r.get('b') '11' >>>

就session store或engine 有關django的目前找下列三種：

• https://github.com/martinrusev/django-redis-sessions
• Followers: 44 forks: 6

• https://bitbucket.org/dpaccoud/django-redis-sessions/src
• Followers: 30 forks:2

• https://github.com/MirkoRossini/django-redis-engine
• Followers: 33 forks: 3

尚未進行測試，之後會陸續評估看看那個較為適合目前的使用情境。

小結

redis安裝起來，十分簡單，也很容易使用。

目前在github 上，有許多python 相關的函式庫可供使用，值得花些時間學習看看。

相關問題?

如何停止redis-server?

強烈建議請使用shutdown 命令，來完成將記憶體中尚未資料儲存至硬碟中，否則資料可能遺失。

原因為redis 設定中，有命令save 命令在特定時間內有變更多少筆鍵值才會進行儲存。

預設設定檔如下：

# # Save the DB on disk: # #   save <seconds> <changes> # #   Will save the DB if both the given number of seconds and the given #   number of write operations against the DB occurred. # #   In the example below the behaviour will be to save: #   after 900 sec (15 min) if at least 1 key changed #   after 300 sec (5 min) if at least 10 keys changed #   after 60 sec if at least 10000 keys changed # #   Note: you can disable saving at all commenting all the "save" lines. save 900 1 save 300 10 save 60 10000

安全性？

在redis.conf 中，可利用requirepass 來設定，就官方文件要求需要設定強度較高且長度較長的密碼，

因若redis在較高效能的機器上，同時大量執行的密碼驗證（auth)命令時，可達15K次每秒，可能在極短時間內破解強度較弱的密碼。

就筆者看來，最好使用 iptables 或host ACL方法，只授權必要使用redis server的相關伺服器接入。

Ubuntu 11.10 執行警告訊息

[1063] 30 Jan 14:17:26 # WARNING overcommit_memory is set to 0! Background save may fail under low memory condition. To fix this issue add 'vm.overcommit_memory = 1' to /etc/sysctl.conf and then reboot or run the command 'sysctl vm.overcommit_memory=1' for this to take effect.

請務必設定vm.overcommit_memory=1的值，不可忽略。

Python+Django 輕鬆寫Web AP

近期工作需要在較短時間內，開發出Web端的程式，因筆者擅長Python，最後決定使用python+django 的組合。
另外在FreeNas 8 中也是使用 python+django來實作Web 控制介面，所以學會django，也可日後若為FreeNas添加新功能做準備。

（註：Google App Engine也採用django，但內建的版本已封裝一層，但有網上教學如何使用原來的django套件方法。）

環境設定

本次採用python 2.7+django 1.3.1
django 授權BSD License（筆者愛用BSD授權）

Cygwin

• 下載python-2.7.2 重新編繹
• 開啟Cygwin Terminal 或Mintty for Cygwin
• 安裝pip
• easy_install pip
• 使用pip來管理python套件
• pip install django

Mac OS X Lion

• 內建python 2.7.1
• 開啟Terminal
• 安裝pip
• sudo easy_install pip
• 使用pip來管理python套件
• sudo pip install django

如何建立專案？

此部分主要參考django文件（原文），加入筆者心得
Django首次使用產生主網站（如：mystie）

django-admin.py startproject mysite

註：在Mac OS X使用django-admin.py startproject 如出permission denied, 請將修改權限

chmod +x django-admin.py

mysite 目錄結構

manage.py	django命令列工具
settings.py	django專案設定腳本
urls.py	用來設定urls 對應網頁進入點（可參原文說明）
__init__.py	空的內容則用來告訴python這是一個module，並可用來指定mysite模組初始化動作

啟動mystie專案

若只要本機內可供取用，請執行下行命令（server 會啟動在127.0.0.1:8000)

python manage.py runserver

參數語法

python manage.py runserver [:]

若欲使外部可連接請指定IP為0.0.0.0，表所有外部電腦均可使用此server系統IP連接。

python manage.py runserver 0.0.0.0:8080

註：不可單獨指定IP而沒有指定port

$ python manage.py runserver 0.0.0.0 Error: "0.0.0.0" is not a valid port number or address:port pair.

執行結果

~ mysite$ python manage.py runserver 0.0.0.0:8080 Validating models... 0 errors found Django version 1.3.1, using settings 'mysite.settings' Development server is running at http://0.0.0.0:8080/ Quit the server with CONTROL-C.

使用瀏覽器連接到localhost:8080

結論

與之前試過nodejs+express，有異曲同工之妙；只在使用的語言不同。
若網友想寫類似Web應用程式，可選擇慣用，產能倍增。
除此之外，便是主機代管服務的選擇，也將會影響你的可用的組合。
因筆者較熟悉python，用django較為得心應手，而nodejs 到處使用callback的方式不太習慣。
最近django網站首頁所列一句話：
＂Django makes it easier to build better Web apps more quickly and with less code.＂
也是筆者採用的主因之一。
本篇旨在記錄一下，學習心得，歡迎交流。