想要取消繼承來的 CSS 設定? 這種想法有點瘋狂! 這原本是不會出現的. 因為絶大部份的狀況下, 我們總是可以精細的調整 CSS 的 Selector, 來達成區分 CSS 的作用範圍. 除非... CSS 的繼承來源你動不了. 又或者像是我在 "CSS: Double Strikeout 雙刪除線" 這一篇貼文裡遇到的狀況: 想要在同一個頁面展示二種雙刪除線的 CSS 設定效果 (不動用 <iframe> tag). 這個時候正是本篇的主角 all: revert 這種另類 CSS 大展身手的時候.

前情提要

首先, 狀況是我原本有一套雙刪除線的 CSS 設定套用在所有貼文裡. 這套雙刪除線作法是: 設定 <del> tag 的 border-top, 並向下位移此 <del> tag 的位置, 然後再用一個 <span> tag 把文字位置移回來.

這套雙刪除線我用的 CSS Selector 是:

前言

我的 "關於 PoE 以及 Raspberry Pi 的 PoE" 這一篇貼文裡, 有來自 "維基百科" 的三張 Raspberry Pi 的照片及一張從網路搜來的圖片. 而我, 需要在它們上頭作一些標記. 由於圖片已經上傳到 pixnet 了, 不想用小畫家改圖後再重新上傳, 於是突發奇想: 是否可以在貼文中直接利用 HTML 語法將 SVG 疊在它們上面?

可是一直無法在網路上找到相關主題的貼文, StackOverflow 也搜不到類似的問題解答 (可能是搜尋時使用的 keyword 不對??), 所以就先放著. 最近得空, 總算自己把它解決了. 故有此篇記錄如何解決.

方法一: 原先的想法

這一篇我們來談非同步序列 (串列) 傳輸以及一個古董級的傳輸技術: RS-232.

RS-232 是一種常用的序列傳輸技術, 和另外二個我們在嵌入式系統 (embedded system) 常用的序列傳輸技術 I²C 和 SPI 有很大的差異:

• RS-232 主要是用於非同步序列傳輸. 雖然 RS-232 標準也包括了支援同步的傳輸的部份, 不過現在我們最常用的是它非同步的部份.
• 它是用在二個系統之間 (一開始的目標就是跨系統), 而不是像 I²C 和 SPI 是用於同一片電路板, 或者同一個系統上.
• 它是全雙工傳輸. 不過有些它的衍生技術 (RS-485) 只支援半雙工傳輸.訂正: RS-485 不只支援半雙工傳輸, 也可以設置成全雙工傳輸.
• 早期的傳輸速率和 I²C 和 SPI 比起來是慢了許多. 不過後期修正的極限速率 (RS-232-C) 則已經和 I²C 相當.

有關 I²C 和 SPI 的介紹文章:

• SPI 的部份: "SPI (Serial Peripheral Interface) 串列 (序列) 週邊介面"
• I²C 的部份: "I2C bus 簡介 (Inter-Integrated Circuit Bus)"

我們先看 RS-232 的部份.

PoE 標準

目前主要的 PoE 標準有 3:

• IEEE 802.3af-2003 函蓋 Type 1 設備.
• IEEE 802.3at-2009 函蓋 Type 1 及 Type 2 設備.
• IEEE 802.3bt-2018 函蓋 Type 1 至 Type 4 設備.

最新的標準 IEEE 802.3bt 向下相容 IEEE 802.3af 和 IEEE 802.3at 標準.

PoE 專有名詞

• PSE: Power Sourcing Equipment 的縮寫. 中文翻譯為 "電力供應設備" 或 "供電設備".
• PD: Powered Device 的縮寫. 中文翻譯為 "受電設備" 或 "受電裝置".
• endspan 模式為 PSE (一般是指 Ethernet PoE 交換器) 的電力直接連接到 PD.
• midspan 模式為未支援標準 PoE 的設備 (一般的 Ethernet 交換器/一般的受電裝置) 之間的介接方法.
  • 非標準 PSE 外加 Power Injector (電力注入設備) 轉變為符合標準的 PSE.
  • 接入非標準 PD 之前則加入 Power Spliter (電力分離設備) 分離出符合用電設備需求的電力.
• Mode A: 使用 RJ-45 的 1-2 Pin, 3-6 Pin 傳輸電力. 即與 10BASE-T, 100BASE-TX 的資料傳輸共用傳輸線.
• Mode B: 使用 RJ-45 的 4-5 Pin, 7-8 Pin 傳輸電力.

安裝/啟用 WSL 2

如果你現在用的是 Win11 (或者 Win10 21H2), 那麼恭喜你, 你只要以系統管理員身分執行以下指令即可 "啟用執行 WSL 並安裝 Linux 的 Ubuntu 發行版本".

wsl --install

重要提示

• TF 2.10 是 Windows 平台上 原生環境最後一版可以支援 GPU 的版本.
• 如果需要在 Windows 中使用 TF2.11 及以後的版本, 請改用WSL 2 環境.

前言

這個主題大概是所有平時只用 Windows 的人士心中永遠的痛 (尤其是不懂系統, 或者不十分了解系統的人). 其實 Linux 用戶也好不到哪裡去啦 (如果你不是 Linux 上系統工程師), 差別只是無解和有點希望. 不過這個問題在 Win10/Win11 上現在幾乎已經完全解開, 不再是無解的問題了.

目前在 Win10/Win11 平台上, 要啟用 GPU 對於 TensorFlow 的支援, 可用的作法可以分為四類:

• 使用 Windows 原生環境 (及 Python 虛擬環境)
• 使用 WSL2 環境
• 使用 docker 環境
• 使用 Anaconda for Windows 環境

不過在開始安裝之前, 各位有二件事要決定一下:

有關 Unicode 的編碼規則及 Unicode 的 BOM 可以參閱我的這一篇貼文:
"Python: 關於 Unicode 的 BOM"

在 HTML 中表示 Unicode 字元

HTML 的內容直接有支援 Unicode, 所以直接輸入或者貼上 Unicode (並以 UTF-8 編碼存檔) 即可. 不過由於部份符號有輸入 (或顯示/辨識) 的問題, 同時也為了 browser 轉譯頁面內容時不會產生定義糢糊不明的情況, HTML 還定義了一些特殊符號以編碼值轉譯的方式輸入: 例如:

前言

這一篇原本是 2017-12-21 寫的 (Pixnet 後台文章日期 2017-12-21 18:18:53), 但是因為後面一小段卡了, 一直沒發表. 後來因為工作內容轉為開發前台系統, 由於工作上有許多以前未接觸過的, 實在是空不下來, 也就很少有時間再碰 embedded system. 除非接手的團隊有問題回頭來請教, 非得要試一下才能給答案, 幾乎是沒機會再把它接上電源開起來. 所以它也就在未完成文章中趟了 4 年多, 今天就把後面一小段有關 std io 的 sample code 先拿掉, 作個小結. 發表出來. 至於有關 std io 的部份我想...就以後有緣再寫吧!?

關於 embedded system 的 C/C++

許多剛開始接觸 embedded system 的工程師常常會被 C 語言的底層搞得七葷八素. 最主要的是:

• 弄不清楚到底 embedded system 的 C/C++ 和一般在 Windows PC 用的 C/C++ 到底有什麼差異?
• 以及 (因為專案上的需要) 要如何才能把這些差異補起來?

在開始之前你一定先記住的是記憶體是稀缺資源, 一定不要浪費, 尤其是 local 變數區 (用到的是 STACK).

前言

今天心血來潮, 用 Google 查了如何在網頁中敘述按鍵組合. 結果意外在 stackoverflow 上看到這組漂亮的按鍵 CSS, 就順手記錄下來.

用法

使用 <kbd> tag 將按鍵文字括住即可. 例如:

• <kbd>Ctrl</kbd> 就變成 Ctrl
• <kbd>Shift</kbd> 就變成 Shift

如果按鍵為圖示, 或者還想加入代表該按鍵的圖示, 則以 HTML 格式插入代表該圖示 unicode 編碼, 或是直接插入該 unicode 字元均可. 例如:

前言

這二天在整理一個系統前端時, 發現需要一個可拉動位置的彈出視窗. 最初一直卡在拉動時移動量非常大. 網路上貼的例子雖然都可以正常動作, 可是都沒有明確的說明重點, 套到自己的程式時就是不正常. 最後經過大半天的測試修正, 總算找到問題點, 搞定! 故特記下一點心得.

HTML 文件

這是前端系統的 HTML 框架. 只寫到 myDiv 這一層, 前端 JS 程式執行了之後 myDiv 裡會再填入一個輸入用的表格 (form). 完成之後, 我希望可拉動的部份就是整個輸入表格 (含 myDiv).

<div id='pop' class="msgDiv ui-overlay">
        <div id='myDiv'></div>
</div>