超軟之家

2026年3月6日星期五

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

快速使用指南：

下載專案中的 ltmx-pixel-edit.html 檔案。
用您的瀏覽器（Google Chrome, Firefox, Safari 等）打開它。
設定您的矩陣尺寸，選擇顏色，開始繪圖！
完成後，點擊「Export」圖示按鈕，將生成的代碼整合到您的專案中。

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

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

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

2026年2月25日星期三

【Google 試算表教學】一鍵自動化：製作「快速插入帶格式新列」的自定義按鈕

引言

在處理大量數據時，手動插入新列再重新調整格式（框線、底色、字體）總是讓人感到繁瑣。身為追求效率的工程師與數位創作者，我們需要更聰明的做法！今天將教大家如何利用 Google Apps Script，製作一個可以「智慧偵測選取範圍」並「自動帶入樣式」的自定義按鈕，讓你的試算表進化為自動化工具。

🚀 核心功能介紹

這套方案不僅能插入新列，最厲害的地方在於它會自動偵測你目前選取了幾列。

選取 1 列：按一下按鈕，下方新增 1 列相同樣式的空白列。
選取 5 列：按一下按鈕，下方直接新增 5 列相同樣式的空白列。

第一步：撰寫自動化腳本 (Apps Script)

首先，我們要賦予試算表「智慧」。請在 Google 試算表中點選 「延伸功能」 > 「Apps Script」，並貼入以下程式碼：

JavaScript
/**
 * 功能：智慧插入新列並自動套用選取範圍的格式
 */
function insertRowsWithStyle() {
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var sheet = ss.getActiveSheet();
  var range = sheet.getActiveRange();
  
  var firstRow = range.getRow();
  var numRows = range.getNumRows(); // 自動取得選取的列數
  var lastColumn = sheet.getLastColumn();

  // 1. 在選取範圍的下方插入相同數量的列
  sheet.insertRowsAfter(firstRow + numRows - 1, numRows);

  // 2. 定義來源樣式範圍（你目前的樣板列）
  var sourceRange = sheet.getRange(firstRow, 1, numRows, lastColumn);
  
  // 3. 定義目標範圍（剛產生的空白列）
  var targetRange = sheet.getRange(firstRow + numRows, 1, numRows, lastColumn);

  // 4. 僅複製格式（確保新列乾淨但漂亮）
  sourceRange.copyTo(targetRange, SpreadsheetApp.CopyPasteType.PASTE_FORMAT);
  
  // 提示：若需要連公式一起複製，可取消下方代碼的註解
  // sourceRange.copyTo(targetRange, SpreadsheetApp.CopyPasteType.PASTE_FORMULA);
}

第二步：製作精美的 UI 自定義按鈕

腳本寫好了，現在我們需要一個「實體按鈕」來觸發它：

插入圖形：點選選單 「插入」 > 「繪圖」。
設計按鈕：使用「圓角矩形」畫出一個按鈕，輸入文字如「新增樣版列」，並調整你喜歡的顏色。
放置按鈕：儲存後，將按鈕移動到標題列或凍結視窗區域，這樣無論怎麼捲動都找得到它。

第三步：將腳本「綁定」到按鈕

這是最關鍵的一步，讓按鈕與程式碼連動：

對著按鈕點擊右鍵（或點擊右上角的三個點 ⋮）。
選擇 「指派指令碼」 (Assign script)。
輸入函數名稱：insertRowsWithStyle (注意大小寫需一致，且不需括號)。
完成！ 第一次執行時，請記得點選「允許授權」。

💡 專家進階小技巧

Q: 為什麼不直接用快捷鍵？
A: 雖然 Ctrl + Alt + Shift + = 可以插入列，但它無法精準地控制「僅貼上格式」或「跨工作表套用特定樣版」。透過自定義按鈕，你可以將這套邏輯封裝，甚至分享給協作同事使用，大大降低出錯率。

結語

透過簡單的幾行腳本，我們就能把機械式的操作變成一鍵完成。如果你在公司負責維護複雜的報表，這個小工具絕對會讓你成為辦公室裡的試算表專家！

覺得這篇文章實用嗎？

歡迎將此網址分享給你的同事，或是留言告訴我，你還希望實現哪些自動化功能！

2026年3月6日 星期五