上 一 篇 文 講 過 cncjs 有 幾 好 用 ，今 次 就 講 下 我 安 裝 和 使 用 cncjs 的 經 驗 吧 。cncjs 是 一 個 好 東 西 ，但 可 能 因 為 使 用 的 人 不 多 ，所 以 網 上 教 學 其 實 亦 唔 多 ，documentation 也 唔 係 好 update。

cncjs 是 什 麼 呢 ？作 者 的 說 法 是 A web-based interface for CNC milling controller running Grbl。它 是 用 web interface 來 控 制 GRBL 的 一 個 軟 件 。用 了 web interface 的 好 處 是 你 可 以 用 任 何 裝 置 來 控 制 你 的 CNC 機 。只 要 有 browser 的 裝 置 都 可 以 用 ，包 裝 電 腦 、平 板 、手 機 、Chromebook、智 能 電 視 …….

cncjs 本 身 是 一 個 軟 件 ，所 以 它 也 要 在 一 台 電 腦 上 面 運 行 。cncjs 可 以 在 多 種 平 台 上 面 運 行 ，但 最 便 宜 和 最 省 電 的 ，就 是 在 一 台 Raspberry Pi 上 面 運 行 。如 果 你 本 身 沒 有 Pi，cncjs 的 作 者 建 議 你 買 一 片 快 一 點 的 Pi ( 就 是 別 買 Pi Zero，買 Raspberry Pi 3b+ )。

安 裝 cncjs Pi Image

cncjs Pi Image：https://github.com/cncjs/cncjs-pi-raspbian

***大 家 要 注 意 一 下 ，上 面 這 個 image 更 新 的 得 比 較 慢 ，還 是 用 舊 的 raspbian stretch light，大 概 是 不 能 在 新 的 pi 4 上 面 跑 。除 非 作 者 有 更 新 ，我 還 是 建 議 大 家 暫 時 用 pi 3B+。

而 想 最 簡 單 、最 快 在 Pi 上 面 運 行 cncjs，我 們 可 以 直 接 下 載 一 個 已 經 安 裝 好 cncjs 的 Pi Image ( disk image，磁 碟 映 像 / 鏡 像 )。只 要 把 這 個 image 燒 錄 到 SD card ( 使 用 Etcher 軟 件 )，再 插 入 Pi 裡 面 ， boot 機 即 可 。

使 用 Pi Image 的 安 裝 方 法 尤 其 適 合 把 Pi 當 成 一 個 「無 頭 」電 腦 來 使 用 ( headless environment )。無 頭 的 意 思 就 是 電 腦 沒 有 接 駁 monitor、keyboard、mouse 等 東 西 ，電 腦 server 就 大 多 數 是 headless 的 。

我 的 這 篇 教 學 ，亦 是 把 Pi 當 成 headless computer 來 使 用 的 。這 樣 你 就 不 需 要 特 別 為 Pi 而 多 準 備 一 套 monitor、keyboard、mouse 了 。

cncjs 的 Pi Image 其 實 就 是 Raspbian Stretch Lite ( Pi 的 官 方 Linux 系 統 )，再 預 先 安 裝 好 了 cncjs 1.9.15，以 及 cncjs 所 依 賴 的 所 有 程 式 ，也 為 cncjs 做 好 了 一 些 常 用 的 設 定 。

這 已 經 是 一 個 「開 箱 即 用 」的 image 了 ，不 過 ，我 們 亦 應 該 養 成 良 好 的 使 用 習 慣 ，為 Pi / Raspbian 做 好 必 要 的 設 定 和 更 新 。

設 定 和 更 新 Pi / Raspbian / cncjs

因 為 是 無 頭 設 定 ，所 以 在 Pi 第 一 次 boot 機 時 ，我 們 最 好 用 一 條 Lan 線 把 Pi 連 接 到 Router。在 router 裡 面 的 DHCP table，你 應 該 會 見 到 一 個 新 加 入 的 ip 地 址 。如 果 你 唔 識 用 router，你 也 可 以 在 你 的 電 腦 使 用 一 些 ip scanner 軟 件 ( 例 如 很 有 名 的 Angry Ip Scanner ) 來 「掃 瞄 」一 下 你 的 本 地 網 絡 。你 的 Pi 的 host name 應 該 是 cncjs 或 者 raspberrypi。

找 到 ip 地 址 之 後 ( 上 圖 的 例 子 就 是 192.168.0.147 )，你 就 可 以 在 電 腦 之 上 ，使 用 一 些 SSH client 軟 件 ( 例 如 很 有 名 的 Putty ) 來 「遙 距 登 入 」你 的 Pi。

輸 入 IP 地 址 ，按 下 Open 之 後 ，它 會 彈 出 一 個 Security Alert。這 是 因 為 SSH 連 線 是 加 密 的 連 線 ，所 以 你 要 Accept 一 次 server 的 加 密 鑰 匙 ( host key )。

然 後 你 就 要 輸 入 使 用 者 名 稱 和 密 碼 。Pi / Raspbian 的 預 設 使 用 者 名 稱 和 密 碼 就 是 pi / raspberry。

第 一 次 成 功 登 入 之 後 ，我 就 可 以 打 開 pi 的 設 定 工 具 ，raspi-config ( 輸 入 指 令 ，sudo raspi-config )。

sudo raspi-config

這 個 小 工 具 可 以 幫 助 我 們 對 Pi 進 行 一 些 簡 單 的 設 定 。在 這 裡 我 們 有 必 要 做 的 就 是 兩 點 ，第 一 就 是 更 改 使 用 者 pi 的 密 碼 ，第 二 就 是 設 定 好 time zone。有 需 的 話 ，你 也 可 以 在 這 裡 設 定 WiFi ( WiFi Country / SSID / pre-shared key )。如 果 有 使 用 Pi Camera 的 ，也 可 以 在 這 裡 進 行 設 定 。

raspi-config 是 一 個 圖 形 使 用 介 面 ，使 用 方 向 鍵 、Tab 鍵 、Enter、Escape 來 操 作 就 可 以 。應 該 沒 有 什 麼 難 度 的 。如 果 想 更 詳 細 的 了 解 raspi-config 每 項 功 能 的 用 法 ，可 以 參 考 下 面 官 方 的 documentation。

raspberry pi documentation – raspi-config

完 成 raspi-config 之 後 ，最 好 reboot 一 次 pi，才 進 行 其 他 設 定 和 更 新 。

sudo reboot

重 啟 之 後 ，我 們 再 次 用 putty 登 入 Pi，然 後 就 可 以 進 行 一 系 列 的 更 新 。為 什 麼 都 未 開 始 用 就 要 更 新 呢 ？因 為 這 個 Pi Image 已 經 有 一 年 多 未 更 新 。例 如 佢 跟 機 的 cncjs 版 本 只 是 1.9.15，但 按 筆 者 編 寫 此 文 的 時 候 ，cncjs 已 經 出 到 1.9.20 了 。

下 文 是 cncjs 的 documentation 來 的 ，大 家 跟 著 文 中 的 指 令 一 個 一 個 輸 入 就 OK 的 了 。煩 是 有 點 煩 的 ，但 應 該 沒 什 麼 難 度 。

Setup Guide: Raspberry Pi | Maintaining your Software Stack w Updates & Upgrades

這 裡 提 供 一 個 tips 給 大 家 ，putty 預 設 是 用 right click 來 paste 的 。你 可 以 在 網 頁 中 一 次 copy 一 行 command ( ctrl-c )，然 後 mouse 移 去 putty 視 窗 的 cursor 位 置 ，right click 一 下 就 得 ，再 double check 一 次 command 沒 問 題 ，就 可 以 按 enter 執 行 。大 家 善 用 copy & paste 功 能 ，就 唔 會 成 日 打 錯 command 了 。

有 # 號 開 頭 的 行 是 documentation，那 些 是 不 用 輸 入 的 ( 輸 入 左 都 無 用 )。其 他 不 是 # 號 開 頭 的 行 都 需 要 執 行 一 次 。完 成 晒 文 中 的 所 有 更 新 之 後 ，你 就 可 以 正 式 使 用 cncjs 了 。

雖 然 上 面 講 既 野 好 似 好 複 雜 ，但 其 實 十 分 八 分 鐘 就 能 完 成 。講 咁 詳 細 係 因 為 怕 有 些 朋 友 唔 熟 悉 Raspberry Pi 或 者 Linux 的 基 本 操 作 。

沒 有 LAN 線 如 何 設 定 WiFi ( optional )

如 果 你 百 分 之 一 百 肯 定 你 無 得 用 Lan 線 ，不 能 在 raspi-config 裡 面 設 定 WiFi，你 也 可 以 使 用 下 文 這 個 方 法 預 先 在 SD card 上 設 定 好 WiFi ( 只 需 參 考 WiFi headlessly 的 部 分 )。

Simple Raspberry Pi setup tutorial

這 涉 及 在 SD card 上 建 立 一 個 純 文 字 檔 ，你 最 好 使 用 一 個 正 常 的 text editor ( 例 如 很 有 名 的 notepad++ )，而 唔 好 用 windows 的 記 事 本 ( notepad )。你 也 需 要 設 定 好 WiFi country code，香 港 的 code 就 是 HK。

完 成 這 個 SD 卡 的 WiFi 設 定 之 後 ，你 一 樣 需 要 找 到 IP 地 址 和 使 用 putty 來 登 入 Pi 去 進 行 設 定 和 更 新 。

使 用 cncjs

更 新 完 之 後 ，最 好 也 是 reboot 一 次 。Boot 起 機 之 後 ，只 要 在 電 腦 的 browser 打 開 http://ip.address/，就 可 以 開 始 使 用 cncjs 了 ( 也 可 以 使 用 http://cncjs.local/ )。

第 一 次 打 開 cncjs，其 實 個 user interface 同 你 一 般 用 開 的 grbl controller / G-code sender 軟 件 都 差 唔 多 。有 地 方 可 以 connect usb，有 個 console 可 以 直 接 輸 入 G code，有 地 方 見 到 工 作 座 標 ，可 以 移 動 X Y Z 軸 ，有 得 對 刀 ，等 等 等 等 。在 上 傳 G code 檔 案 之 後 ，正 中 間 就 會 顯 示 3D 的 刀 路 出 來 。

這 些 一 格 格 的 user interface 叫 做 Widgets。按 一 下 左 上 角 的 Mange Widgets 按 鈕 ，你 就 可 以 自 己 決 定 enable / disable 邊 一 個 Widgets。例 如 我 只 用 Grbl 做 雕 刻 ，所 以 Smothie / TinyG / Laser widgets，我 都 是 disable 左 佢 的 。又 例 如 我 沒 有 使 用 Webcam，所 以 Webcam widget 我 也 是 disable 的 。

第 二 個 要 設 定 的 地 方 就 是 settings ( 左 上 角 的 齒 輪 圖 示 )。在 settings 裡 面 ，你 可 以 設 定 語 言 、使 用 者 、雕 刻 機 參 數 之 類 的 東 西 。

另 一 個 頗 為 有 用 的 就 是 Macro widget，你 可 以 將 成 日 要 重 複 做 的 一 些 動 作 ，自 己 寫 成 一 個 macro，以 後 只 要 按 一 下 鍵 就 可 以 自 動 執 行 。例 如 在 documentation 之 中 的 Traverse around the boundary macro 就 十 分 有 用 ，可 以 在 雕 刻 前 檢 查 一 下 雕 刻 會 不 會 超 出 邊 界 。

如 果 你 有 使 用 對 刀 模 塊 的 話 ，你 也 需 要 在 probe widget 裡 面 設 定 正 確 的 參 數 。

要 雕 刻 的 話 ，就 使 用 Upload G-code 按 鈕 上 傳 一 個 G-code 檔 ，沒 問 題 的 話 就 接 一 下 旁 邊 的 Play 按 鈕 。

cncjs 的 網 頁 介 面 的 用 法 就 唔 多 講 了 ，反 正 你 有 用 開 grbl controller / G-code sender 軟 件 就 唔 會 難 得 到 你 。下 面 的 youtube 片 有 cncjs 簡 單 的 介 紹 ，大 家 也 可 以 參 考 一 下 。

A quick run through how to use CNCJS with your CNC/Shapeoko or DIY CNC – GRBL

cncjs 的 手 機 / 平 板 介 面

因 為 我 們 這 次 是 直 接 使 用 cncjs 的 Pi Image，裡 面 有 兩 個 額 外 的 手 機 / 平 板 的 使 用 者 介 面 ，已 經 預 設 幫 我 們 安 裝 好 。

https://github.com/cncjs/cncjs-pendant-tinyweb

第 一 個 就 叫 做 cncjs-pendant-tinyweb，這 原 本 是 一 個 設 計 比 320 x 240 touch screen LCD 的 介 面 ，用 在 手 機 就 最 合 適 。你 只 要 在 瀏 覽 器 打 開 http://ip.address/tinyweb/ 就 用 得 。不 過 因 為 版 面 比 較 細 ，有 很 多 有 用 的 功 能 都 無 收 入 在 這 裡 面 。

https://github.com/cncjs/cncjs-shopfloor-tablet

第 二 個 就 叫 做  cncjs-shopfloor-tablet，這 是 一 個 專 門 寫 給 平 板 電 腦 的 介 面 ，功 能 會 比 tinyweb 完 整 一 點 。使 用 方 法 就 是 在 瀏 覽 器 打 開  http://ip.address/tablet/。

因 為 理 論 上 ，cncjs 係 可 以 同 時 操 控 多 部 cnc 機 的 ，所 以 每 個 browser 打 開 介 面 時 ，都 是 要 connect 一 次 usb 的 ( 因 為 你 可 以 browser A connect 去 usb port A，browser B 就 connect 去 usb port B，諸 如 似 類 )。

所 以 ，你 不 管 是 正 常 的 web 介 面 ，tinyweb 和 tablet 介 面 ，三 個 介 面 都 要 各 自 connect USB 一 次 的 。connect 成 功 之 後 ，三 者 的 數 據 倒 是 會 同 步 的 ( 因 為 三 者 都 已 經 connect 左 去 同 一 個 usb port )。

cncjs-shopfloor-tablet 介 面 有 得 load G code 檔 案 來 開 始 雕 刻 ，不 過 就 要 自 己 設 定 一 個 指 定 的 資 料 夾 ( watch directory )。要 設 定 watch directory，我 們 要 先 用 putty 登 入 Pi。

登 入 之 後 ，首 先 新 增 一 個 directory。

mkdir /home/pi/GCode

完 成 之 後 ，打 開 cncjs 的 設 定 檔 。

nano /home/pi/.cncrc

然 後 在 適 當 的 地 方 ，加 入 watchDirectory 參 數 。

cncjs-shopfloor-tablet 的 對 刀 指 令 也 有 點 奇 怪 ( 在 pull down menu 裡 面 ，唔 係 好 就 手 )，它 會 執 行 放 在 watch directory 裡 面 的 Probe.nc 檔 案 。所 以 我 們 也 要 自 己 建 立 一 個 包 含 對 刀 指 令 的 Probe.nc 檔 案 在 watch directory 裡 面 。

nano /home/pi/GCode/Probe.nc

然 後 把 Probe Widget 所 生 成 的 對 刀 G code，複 製 到 Probe.nc 裡 面 。

; Z-Probe
G91
G38.2 Z-20 F20
G90
; Set the active WCS Z0
G10 L20 P1 Z1.6
; Retract from the touch plate
G91
G0 Z3.4
G90

不 過 對 刀 指 令 是 人 人 不 同 的 ，你 不 能 直 接 抄 我 的 來 用 。

Watch Directory 要 reboot 之 後 才 生 效 ，所 以 修 改 完 大 家 就 reboot 一 次 Pi 吧 。

cncjs 的 進 階 改 動 ( optional )

如 果 前 面 所 有 野 都 十 分 和 諧 地 運 作 ，咁 恭 喜 你 ，你 已 經 有 了 一 台 好 洗 好 用 的 雕 刻 機 控 制 器 。平 時 在 電 腦 上 面 建 立 刀 路 檔 ( G code file )，完 成 上 傳 去 cncjs，開 始 雕 刻 之 後 就 可 以 關 機 。在 雕 刻 之 前 ，就 可 以 用 手 機 / 平 板 ，在 雕 刻 機 面 前 調 較 好 主 軸 的 位 置 和 對 好 刀 。

但 偏 偏 我 自 己 就 遇 到 頗 多 問 題 。

cncjs-shopfloor-tablet 見 不 到 usb port

第 一 樣 就 是  cncjs-shopfloor-tablet 的 usb connect 介 面 ，完 全 見 不 到 有 usb port 列 出 來 。這 是 由 於  cncjs-shopfloor-tablet 的 作 者 ，為 了 自 己 方 便 ，所 以 用 程 式 的 方 法 限 制 了 只 有 他 自 己 用 的 TingG controller 才 會 被 列 出 來 。

Nothing displayed in the port drop down

解 決 方 法 很 簡 單 ，一 是 下 載 新 版 的  cncjs-shopfloor-tablet，一 是 自 己 進 入 pi 去 修 改 相 開 的 檔 案 。不 過 ，不 管 是 那 一 個 方 法 ，首 先 你 要 知 道 究 竟  cncjs-shopfloor-tablet 安 裝 了 在 pi 的 哪 個 folder。

因 為 製 作 Pi Image 的 作 者 ，將 東 西 安 裝 了 在 hidden 的 folder，所 以 我 也 花 了 一 點 時 間 才 把 安 裝 的 路 徑 找 了 出 來 。cncjs-shop-floor-tablet 的 位 置 就 在 下 面 的 folder。folder 名 前 面 有 一 點 ( full stop, period )，就 是 hidden 的 意 思 。

/home/pi/.cncjs/cncjs-shopfloor-tablet

要 修 改 pi 上 面 的 檔 案 ，自 然 又 要 用 到 putty 了 。登 入 pi 之 後 ，如 果 想 要 修 改 相 關 的 檔 案 ，可 以 輸 入 下 面 的 command，用 nano 打 開 相 關 的 檔 案 。

nano /home/pi/.cncjs/cncjs-shopfloor-tablet/src/app.js

要 comment 了 下 圖 中 的 if 句 子 。

...
...
    $el.empty();
    $.each(list, function(key, value) {
//	if (value.manufacturer == 'Synthetos') {
            var $option = $('')
		.attr('value', value.port)
		.attr('data-inuse', value.inuse)
		.text(value.port);
            $el.append($option);
//	}
    });
...
...

完 成 之 後 就 可 以 離 開 nano 和 儲 存 檔 案 。再 回 到 browser，reload 一 次 頁 面 就 應 該 見 得 返 D usb port。

自 己 更 新  cncjs-shopfloor-tablet / cncjs-pendant-tinyweb

不 過 本 文 之 前 也 提 到 過 ，這 個 Pi Image 本 身 比 較 舊 ，已 經 一 年 多 沒 有 更 新 。所 以 可 能 更 新 成 個 cncjs-shopfloor-tablet 是 更 好 的 選 擇 。cncjs-shopfloor-tablet 和  cncjs-pendant-tinyweb 是 獨 立 於 cncjs 的 ( 唔 同 folder )，所 以 之 前 更 新 cncjs 係 無 更 新 這 兩 個 user interface 的 。

要 更 新  cncjs-shopfloor-tablet 也 不 難 ，我 們 同 樣 要 用 putty 登 入 pi，然 後 去 到 cncjs-shopfloor-tablet 上 一 層 的 folder。

cd /home/pi/.cncjs/

更 新 之 前 ，先 要 移 除 舊 的 資 料 夾 和 檔 案 。( rm -r = remove non empty directory )

rm -r cncjs-shopfloor-tablet

然 後 我 們 就 可 以 直 接 由 github 複 製 ( 下 載 ) 一 次 最 新 版 的 檔 案 。

git clone https://github.com/cncjs/cncjs-shopfloor-tablet.git

完 成 之 後 ，在 browser 上 面 reload 一 次 就 得 ( http://ip.address/tablet/ )。

更 新 cncjs-pendant-tinyweb 的 步 驟 也 是 一 樣 ，不 過  cncjs-pendant-tinyweb 已 經 兩 年 多 沒 有 更 新 過 了 ，所 以 Pi Image 上 面 的 應 該 已 經 是 最 新 版 。

首 先 ，去 到 cncjs-pendant-tinyweb 上 一 層 的 folder。

cd /home/pi/.cncjs/

更 新 之 前 ，先 要 移 除 舊 的 資 料 夾 和 檔 案 。

rm -r cncjs-pendant-tinyweb

然 後 就 是 複 製 ( 下 載 ) 檔 案 。

git clone https://github.com/cncjs/cncjs-pendant-tinyweb.git

完 成 後 同 樣 在 browser 上 面 reload 一 次 就 可 以 見 得 到 更 新 ( http://ip.address/tinyweb/ )。

git 當 然 還 有 很 多 進 階 的 用 法 ，但 這 就 留 給 大 家 自 己 去 發 掘 了 。

加 裝 3.5 寸 touch screen 顯 示 屏

cncjs-pendant-lcd – CNCjs Web Kiosk Display

cncjs 還 有 一 種 特 別 的 玩 法 ，就 是 自 己 加 個 3.5 寸 touch screen 顯 示 屏 。然 後 一 boot 起 機 ，就 自 動 顯 示 一 個 full screen 的 tinyweb 使 用 者 介 面 。這 種 用 法 叫 kiosk mode，cncjs 的 pi image 亦 已 經 幫 我 們 預 先 設 定 好 左 。

這 樣 其 實 就 是 一 個 自 製 的 脫 機 控 制 器 了 。不 過 咁 樣 用 法 其 實 唔 算 十 分 之 極 之 方 便 ，因 為 始 終 Pi 要 拖 著 2 條 線 ( USB 線 和 電 源 線 )。我 個 人 覺 得 直 接 用 手 機 的 browser 會 更 好 。

Pi 用 的 3.5 寸 顯 示 器 有 兩 大 類 ，一 是 用 HDMI 的 ，會 貴 少 少 。另 一 種 就 是 使 用 SPI 介 面 的 ( 插 在 GPIO )，價 錢 會 平 少 少 。SPI 介 面 的 LCD 會 比 較 難 用 ，要 裝 driver，所 以 很 多 人 都 會 叫 你 買 HDMI 版 本 。

我 自 己 只 係 買 來 玩 玩 ，咁 梗 係 買 平 的 SPI 介 面 的 。未 裝 好 driver 之 前 ，LCD 是 只 有 一 片 白 光 的 。我 的 LCD 用 的 是 下 面 這 個 driver，這 是 一 個 十 分 常 用 的 LCD driver。

https://github.com/goodtft/LCD-show

只 要 跟 著 它 的 步 驟 安 裝 就 好 了 ，沒 什 麼 難 的 。最 後 我 們 要 選 擇 的 LCD type 就 是 ：

sudo ./LCD35-show

裝 完 driver 之 後 就 要 reboot。然 後 你 會 見 到 一 堆 文 字 ，是 linux boot 機 的 訊 息 ，然 後 ，就 會 見 到 一 個 error。這 是 完 全 正 常 的 ，大 家 可 以 參 考 下 面 2 個 thread。

Wont start X Server

Rotating Touch [Raspbian 4.14, 3.5 LCD, RP 2]

解 決 方 法 是 你 要 自 己 補 回 ( 新 增 ) 兩 個 檔 案 。

nano /etc/X11/xorg.conf.d/98-lcd-show.conf

打 開 左 空 白 的 檔 案 之 後 ，就 輸 入 下 面 的 內 容 。

Section "Device" 
	# WaveShare SpotPear 3.5", framebuffer 1
	Identifier "uga" 
	driver "fbdev" 
	Option "fbdev" "/dev/fb1" 
	Option "ShadowFB" "off"
	#Option "Rotate" "UD"  # Flip Upside Down
	Option "SwapbuffersWait" "true"
EndSection 

Section "Monitor" 
	# Primary monitor. WaveShare SpotPear 480x320
	Identifier "WSSP" 
EndSection 

Section "Screen" 
	Identifier "primary" 
	Device "uga" 
	Monitor "WSSP" 
EndSection 

Section "ServerLayout" 
	Identifier "default" 
	Screen 0 "primary" 0 0
EndSection

完 成 就 exit 和 save。

第 二 個 檔 案 也 是 一 樣 ，先 建 立 檔 案 。

nano /etc/X11/xorg.conf.d/99-calibration.conf

然 後 在 空 白 的 檔 案 輸 入 下 面 的 內 容 。

Section "InputClass"
	Identifier      "calibration touchscreen default primary uga fbdev"
	MatchProduct    "ADS7846 Touchscreen"
	Option  "Calibration"   "3936 227 268 3880"
	Option "CalibrationMatrix" "0 -1 1 1 0 0 0 0 1"   # 270 degree
	#Option "CalibrationMatrix" "0 1 0 -1 0 1 0 0 1"  # 90 degree, Flip Upside Down
	###Option	"SwapAxes"  "1"
	###Option	"SwapXY"	"1"
	###Option	"InvertX" "true"
	###Option	"InvertY" "true"
EndSection

考 慮 到 Pi 的 電 源 線 的 方 向 ，所 以 我 要 把 顯 示 的 影 像 flip 180 度 ，於 是 兩 個 檔 案 都 要 稍 作 修 改 。

// 98-lcd-show.conf
Option "Rotate" "UD"  # Flip Upside Down

// 99-calibration.conf
#Option "CalibrationMatrix" "0 -1 1 1 0 0 0 0 1"   # 270 degree
Option "CalibrationMatrix" "0 1 0 -1 0 1 0 0 1"  # 90 degree, Flip Upside Down

建 立 好 兩 個 新 檔 案 之 後 ，就 可 以 reboot 一 次 。

成 功 的 話 ，你 就 會 見 到 如 同 下 圖 的 一 個 脫 機 控 制 器 ( 呵 呵 呵 )。比 起 淘 寶 常 見 的 GRBL 脫 機 控 制 器 ，上 面 只 有 一 個 「旋 鈕 ( rotary encoder  )」或 者 幾 個 「按 鈕 ( push button )」，這 一 片 touch screen LCD 實 在 是 好 用 得 太 多 。

君 不 見 入 門 級 3D Printer 都 逐 漸 改 用 Touch Screen LCD 了 麼 ？怎 麼 GRBL 的 控 制 器 還 不 改 革 更 新 呢 ？( 其 實 我 在 某 家 小 店 是 看 到 過 的 ，那 個  Touch Screen 脫 機 控 制 器 似 乎 是 不 須 要 配 合 特 定 的 GRBL 控 制 板 來 使 用 的 。不 過 小 店 比 較 小 ，唔 知 售 後 服 務 如 何 ，就 引 唔 起 我 的 興 趣 了 。 )

自 己 修 改 tinyweb 使 用 者 介 面

不 過 好 老 實 講 ，其 實 原 裝 的 tinyweb 的 使 用 者 介 面 一 D 都 唔 好 用 。點 解 呢 ？因 為 佢 缺 少 左 一 D 我 覺 得 很 必 要 的 功 能 。

第 一 樣 缺 少 的 野 係 set Zero。其 實 通 常 我 自 己 雕 刻 時 做 的 第 一 樣 野 ，就 係 設 定 好 原 點 ( Origin，即 Work Position 的 X0 Y0 )。原 點 在 那 裡 ，就 視 乎 你 的 工 件 的 擺 位 ，和 刀 路 檔 裡 面 的 設 定 。我 自 己 最 常 用 的 原 點 就 係 工 件 的 正 中 間 。

實 際 的 操 作 ，就 是 用 X+、X-、Y+、Y- 去 移 動 主 軸 ，移 到 正 確 的 位 置 ，我 們 就 去 接 一 下 Set Home / Set Zero 的 按 鈕 。但 是 偏 偏 Tinyweb Interface 就 是 沒 有 set zero 的 按 鈕 。你 話 激 唔 激 死 人 ？

第 二 樣 Tinyweb 無 既 野 ，就 係 對 刀 按 鈕 ( Probing )。通 常 我 設 定 好 原 點 之 後 ，就 會 對 一 次 刀 ，然 後 就 可 以 開 始 雕 刻 的 了 。可 能 Tinyweb 的 作 者 考 慮 到 對 刀 唔 係 一 個 單 一 動 作 ，也 因 為 人 人 用 的 對 刀 塊 都 唔 同 ，所 以 無 一 個 單 一 而 universal 的 對 刀 指 令 ，所 以 就 專 登 唔 加 入 對 刀 功 能 。

第 三 樣 就 係 那 個 steps 的 select tag，裡 面 的 list 太 長 了 。那 些 0.001、0.005 之 流 ，我 真 係 一 世 都 用 唔 到 ( 就 係 調 左 你 肉 眼 都 睇 唔 出 吧 ？！ )。

還 有 就 是 方 向 鍵 (  X+、X-、Y+、Y- ) 中 間 的 那 個 move to X0Y0 按 鈕 ，常 常 在 我 調 整 原 點 時 被 我 按 錯 ，然 後 又 要 重 頭 開 始 對 位 。

所 以 我 就 決 定 自 己 修 改 Tinyweb 的 介 面 ，一 是 補 回 缺 失 的 功 能 ，二 是 把 唔 就 手 、唔 順 眼 既 野 ，順 便 都 改 改 佢 。唔 好 以 為 這 是 很 大 工 程 ，其 實 只 要 你 懂 一 點 點 html 和 javascript 的 皮 毛 ，就 可 以 自 己 輕 鬆 為 自 己 打 做 一 個 獨 一 無 二 的 使 用 者 介 面 。

要 修 改 Tinyweb 的 介 面 ，其 實 只 要 修 改 兩 個 相 關 的 檔 案 ( 用 nano 就 得 )。檔 案 的 路 徑 如 下 ：

/home/pi/.cncjs/cncjs-pendant-tinyweb/src/app.js
/home/pi/.cncjs/cncjs-pendant-tinyweb/src/index.html

app.js 裡 面 是 一 些 javascript funtion，index.html 就 是 用 html 寫 的 使 用 者 介 面 。

首 先 在 app.js 裡 面 ，在 適 當 的 位 置 ( 我 加 了 在 cnc.sendMove 之 前 )，補 回 兩 條 function，cnc.zeroAxis 和 cnc.probe。

...
...
cnc.zeroAxis = function(axis) {
    controller.command('gcode', 'G10 L20 P1 ' + axis + '0');
}

cnc.probe = function() {
    controller.command('gcode', 'G91');
    controller.command('gcode', 'G38.2 Z-30 F20');
    controller.command('gcode', 'G90');
    controller.command('gcode', 'G10 L20 P1 Z1.6');
    controller.command('gcode', 'G91');
    controller.command('gcode', 'G0 Z3.4');
    controller.command('gcode', 'G90');
}
...
...

要 留 意 ，cnc.probe 我 是 照 抄 Probe Widget 所 generate 出 來 的 G code 的 。你 的 機 器 和 對 刀 模 塊 和 我 的 肯 定 唔 一 樣 ，所 以 你 唔 能 夠 照 抄 我 的 。切 記 切 記 。

然 後 在 index.html，修 改 幾 個 按 鈕 的 顯 示 文 字 和 function。

把 button tag 之 間 的 文 字 ，改 成 你 想 要 的 ( 例 如 X=0 )。再 把 title 的 值 改 成 你 想 要 的 ( 例 如 set X to zero )。最 後 把 onclick 的 值 改 成 你 想 要 執 行 的 function ( 例 如 cnc.zeroAxis(‘X’) )。

...
<div class="col-xs-2">
	<button
		type="button"
		class="btn btn-default jog-x-zero"
		title="Set X to Zero"
		onclick="cnc.zeroAxis('X')"
	>
		X=0
	</button>
</div>
<div class="col-xs-2">
	<button
		type="button"
		class="btn btn-default jog-y-zero"
		title="Set Y to Zero"
		onclick="cnc.zeroAxis('Y')"
	>
		Y=0
	</button>
</div>
<div class="col-xs-2">
	<button
		type="button"
		class="btn btn-default jog-z-zero"
		title="Z Probe"
		onclick="cnc.probe()"
	>
		Probe
	</button>
</div>
...

最 後 ，我 也 順 手 disable 左  move to X0Y0 按 鈕 ，同 埋 將 個 steps 的 list 清 理 了 一 下 。

做 完 這 些 改 動 ，我 的 tinyweb 介 面 就 變 得 好 好 用 了 ( 切 合 我 個 人 的 工 作 流 程 而 已 )。Open source 的 東 西 就 是 好 ，你 喜 歡 怎 樣 改 就 怎 樣 改 。我 做 這 些 改 動 也 是 為 了 讓 我 的 3.5 寸 touch screen LCD 起 死 回 生 吧 ( 心 理 上 覺 得 唔 會 浪 費 左 幾 十 蚊 )，不 過 當 然 這 些 改 動 也 可 以 用 在 手 機 上 。

你 自 己 買 個 現 成 的 脫 機 控 制 器 ，九 成 九 無 得 咁 樣 比 你 自 己 改 。針 對  cncjs-shopfloor-tablet 你 也 可 以 作 出 類 似 的 修 改 ，讓 它 變 得 更 加 適 合 自 己 用 。不 過  cncjs-shopfloor-tablet 大 部 分 功 能 都 有 ，我 就 沒 有 特 別 花 時 間 去 修 改 了 吧 。

2019-08 後 記 ：

原 本 我 是 用 上 面 這 一 款 3.5 寸 LCD 樹 莓 派 外 殼 的 ，可 能 因 為 全 密 封 的 關 係 ，所 以 運 行 時 都 頗 為 熱 ( Pi 和 LCD 都 有 一 定 熱 量 )。

所 以 後 來 我 在 Thingiverse 上 面 找 了 一 款 使 用 4010 風 扇 ( 要 5V 的 ) 的 外 殼 ，再 自 己 稍 為 修 改 了 一 下 。加 了 風 扇 之 後 ，溫 度 就 下 降 了 許 多 。

這 個 外 殼 四 平 八 穩 ，LCD 也 有 一 個 十 分 舒 適 的 角 度 ，令 到 這 個 DIY 脫 機 控 制 器 的 好 用 程 度 又 提 升 了 許 多 。

張先生，男性，肖龍。
職業：I.T. Consultant
簡介：不好好讀書；七尺差五寸，手長過膝，雙耳垂肩；性寬和，寡言語，喜怒不形於色。據說少時曾斬白蛇於鳳凰山下……