打造 E-ink 專用的瀏覽器 (II): 增加按鈕、桌面模式、改善 UI

Daniel Kao
Apr 12, 2020 · 6 min read

開始來改造 Browser 吧

增加 PageUp / PageDown 按鈕

大部分的電子書閱讀器雖然有 A2 模式可以啟動,加速畫面繪製的速度,但是如果能讓瀏覽器跟看書一樣,是以頁為單位往上或往下前進的話,還是比較方便,而且會造成的殘影也會少一些。

目前 Onyx Boox 系列內建的瀏覽器有做方向鍵在畫面左下方,但點擊時上或下時,畫面還是以捲動的方式往上或往下一頁。

所以,第一個要新增的功能是為 FOSS Browser 加上翻頁的按鈕,成果如下圖標示。

PageUp /PageDown 按鈕

要更改的程式碼不多,主要是幫 NinjiaWebView 加上 pageDownWithNoAnimation ,然後在翻頁時呼叫它。

往上翻頁的按鈕也比照辦理就行了。

有了上下翻頁的功能後,另一個很常要用到功能是跳到網頁的最上方。這個功能我把它加在長按 PageUp 按鈕。

支援 Desktop 模式

目前的 E-ink 設備,6吋,7.8吋,一直到 10 吋,13 吋都有,除了6 吋有點太小,其他尺寸蠻適合用來瀏覽 PC 版的網頁,所以,讓 Browser 可以切換 Desktop 模式是很重要的。

在 reddit 上看到,在很早期的 FOSS Browser 是有支援這功能的,只是在後來不知道為什麼,就把這功能拿掉了。有了這資訊後,當然是先回去翻翻 commit,找原本的實作在哪裡,看有沒有機會直接再搬到最新版的程式碼中。

經過一陣搜尋後,發現在是 v5.6 升級到 v5.7 時,將它拿掉的(目前最新版是 v6.9了)。在稍微參考原先的作法後,我把 fast toggle 選單中的「反轉顏色」的功能,改成新版的 Desktop 模式的按鈕。對 E-ink 設備來說,應該不會有人想把底色換成全黑的吧。

如下圖所示,當長按三個點時,會跳出 fast toggle 的選單,紅色框選的按鈕就是新加的 Desktop 模式。點選後再按 RELOAD 就可以看到 PC 版的網頁了。

實作其實不難,只是塞一個類似 PC Browser 的 user agent string 給 WebView 而已。如果想離開 Desktop 模式,只要再把原本的 user agent string 重新設定回去就行。

改善瀏覽器 UI 的配色

FOSS Browser 原本的 icons 設定的顏色都是用 "?android:attr/textColorSecondary"。這是一個近似黑色的顏色,在 E-ink devices 上看起來灰灰的,視覺效果不是很好,所以全部都改成了黑色,讓這些 icon 在電子書上更顯眼。

顯示目前分頁數

FOSS Browser 雖然可以讓使用者開啟多個網頁,而且可以叫出預覽畫面,在不同的網頁間切換,但在正常模式下,看不出來目前有多少分頁;也不曉得點了連結後,是在原本的分頁開啟,還是又開啟了一個新的分頁。

如果能夠在下方把目前分頁數顯示出來的話,就能避免這樣子的問題。

修改前的功能列
修改後的功能列

這修改也很容易,只要把原本的 icon image 換成隨便一個 checkbox 的圖案,然後在它上頭蓋上一個 TextView ,這個 TextView 在網頁數有增加時,都更新一下數字就可以了。

系列文章

有用的連結

如果想裝來試試的人,可以安裝 Google Play Store 上的版本,或是下面已經編譯好的版本。

EinkBro

專門為 Eink 設備設計的瀏覽器;支援點擊翻頁,加粗字體,直排,閱讀模式等 Eink 特別需要的功能,並且加強介面的圖案文字對比,讓瀏覽體驗更加順暢。

EinkBro

隨著電子書閱讀器的硬體效能愈來愈好,一台在手,除了可以滿足傳統的電子書閱讀功能外,還可以利用它進行一般平板上可以操作的功能,像是安裝 Android App,或是看網頁。但不論是哪一家的電子書閱讀器,內建的瀏覽器充其量只能稱得上堪用,完全沒有針對電子紙的特性量身訂做。為了解決這個問題,我開始開發一款符合自己在電子書閱讀器上使用習慣的瀏覽器,並把過程記錄於此,希望能幫助到其他也有類似需求的人。https://f-droid.org/en/packages/info.plateaukao.einkbro/

Daniel Kao

Written by

Mobile App Developer

EinkBro

隨著電子書閱讀器的硬體效能愈來愈好,一台在手,除了可以滿足傳統的電子書閱讀功能外,還可以利用它進行一般平板上可以操作的功能,像是安裝 Android App,或是看網頁。但不論是哪一家的電子書閱讀器,內建的瀏覽器充其量只能稱得上堪用,完全沒有針對電子紙的特性量身訂做。為了解決這個問題,我開始開發一款符合自己在電子書閱讀器上使用習慣的瀏覽器,並把過程記錄於此,希望能幫助到其他也有類似需求的人。https://f-droid.org/en/packages/info.plateaukao.einkbro/

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store