mapleboard on the table

我是楓葉板社群部落格板主Jonas~歡迎大家多發文、多回應,有任何問題歡迎寫信給我Jonas。                                               目前部落格網站有2個更動:1.草稿位置更改為博主首頁之內2.增加Emoji按鈕(按鈕的最左上角)。請大家留意並多加利用~    

媽呀 我把貓Responsive了!

gava  2018-04-10   留言:0

這...怎麼可能!!!😲

https://pixabay.com/en/cat-mouse-animal-cute-catch-2801751/

photo from here

明明上傳完圖片發現各各大小不一樣,縮成手機模式卻各各都一樣大了~

其實楓葉版部落格在圖片自動縮放(Responsive images)的部份已經幫我們做好做滿了...當然就以為到哪裡都能自動縮放了surprise

......縮放原來是需要技巧的!!

只要在原始碼模式的圖片 class 裡面加入 img-responsive 這行就可以了

<img src="..." class="img-responsive" alt="funny cat">

還有圓形的遮罩功能和相片模式喔!

<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">

http://www.lacuarta.com/noticia/fotos-estos-mininos-vieron-algo-que-los-inquieto/

photo from here

https://www.publicdomainpictures.net/en/view-image.php?image=97537&picture=smiling-cat

photo from here

Try it !!!! 




我們看過很多文章會添加粗體斜體以及新潮的刪除線逗趣效果……這究竟是如何作到的呢?

這一次要為大家介紹的是在文字做變化的部份。在Bootstrap3裡面,基礎的文字技巧有很多,今天先來說說一般博主(部落客)常用、也很簡單的文字變化技巧:

1.粗體(Bold):這個表示強調該文字的意思,如下:

​<strong>粗體</strong>

2.斜體(Italics):在引言(楔子)處,常會利用的技巧,要注意的是,這裡所用的em也代表「強調」的意思:

​​<em>斜體</em>

3.文字中添加刪除線:這算是在鄉野紅了一陣子的作法了,把我們覺得逗趣的文字做刪除線,但實際的意思我們也要來宣導一下,以下有兩個Tag會得到同效果的用法:

a.Strikethrough text:表示該文字已經「不再相關」

<s>這段文字已不再相關</s>

b.Deleted text:表示該文字「需要刪除」

<del>這段文字需要被刪除</del>

既然效果都相同,那我用哪一個有差嗎?是的,我們看文字看不出來他用哪一個Tag,但電腦、Google機器人會讀網站Code,就會知道我們前方一直在說的「該字的意思」。如此一來,長期就可能會有使機器誤會、進而使閱讀者讀到不一樣的網站的事情發生。

而我們痞客幫部落客們常用的刪除線是什麼意思呢?我想大家只是為了逗趣,所以也沒有特別在乎那個意思為何吧,而有些教學文章要強調「該段文字已經過期、希望大家以以下最新的方式進行」所使用的就是a.

 

其他還有像是「突顯」(Marked, Highlight):為文字增添螢光色、「底線」(Underlined, Inserted)、「縮小85%」(Small)就請各位再參照Bootstrap官方網站了。

 

以上是本次內容,如果各位有什麼想學的、想交流的歡迎回覆我哦。

 

參考資料:

https://getbootstrap.com/docs/3.3/css/#type-alignment




 

Bootstrap是兩個twitter 工程師發起的前端框架,一開始是為了解決各家瀏覽器預設的樣式問題。

常常做網站的人就會發現,一個網頁需要的固定班底元素都少不了那些。怎麼不對這些共同元素做個有設計的基本整理?這就是twitter 工程師發明Bootstrap的原點。

 

Bootstrap除了網頁基本的元素的設計外,最重要的特色在於RWD (Responsive Web Design)規範的設計,又稱自適應式或響應式網頁設計。讓網頁能夠在手機、平板、電腦瀏覽介面上有其規格的呈現版型,不會跑版或太小太大等等。

 

但是,客倌到這裡已經坐不下去了…

我又不是前端開發者,Bootstrap干我何事?

 

如何laugh?這裡就是一個Bootstrap的應用例子。話說我們的社群部落格使用Druapl系統,有plug-in Bootstrap 套件(版本是3.3.7喔),其實有一些東西可以來拿用用!!

這樣就可以讓我們的文章多一些特效阿😆(...說特效有點誇張)。

 

首先,打開你的文章編輯器(CKeditor),到按鈕CKeditor source code button這裡。這樣我們就可以來使用Bootstrap效果啦!

以下是推薦的寫文小技巧

1. blockquote 引言

 

這是一個範例

<blockquote class="blockquote">
<p><code class="javascript">這是一個範例</code></p>
</blockquote>

加入引用來源

這是一個範例

Someone famous in Source Title
<blockquote class="blockquote">
  <p>這是一個範例</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

2. tooltip 加入小提示右邊顯示

範例:

右邊顯示(滑鼠請滑過來)

你也可試試不同邊來顯示小提示

<p data-toggle="tooltip" data-placement="left" title="左邊範例">左邊顯示</p>
<p data-toggle="tooltip" data-placement="top" title="上邊範例">上邊顯示</p>
<p data-toggle="tooltip" data-placement="bottom" title="下邊範例">下邊顯示</p>
<p data-toggle="tooltip" data-placement="right" title="右邊範例">右邊顯示</p>

更多有趣請見 Bootstrap v3.3




【教學文--Typography】

jonas  2018-03-31   留言:2

本文以及楓葉板社群部落格所使用的版本是Bootstrap3。關於Bootstrap3與Bootstrap4的差異,有興趣者請參見以下網址:

https://www.quackit.com/bootstrap/bootstrap_4/differences_between_bootstrap_3_and_bootstrap_4.cfm

 

最近看了有關Bootstrap的文章,發現原來寫網頁還能夠有如此多的變化。首先介紹一下什麼是Bootstrap:「Bootstrap是一組用於網站和網路應用程式開發的開源前端(所謂「前端」,指的是展現給終端使用者的介面)。」也就是說,運用Bootstrap,我們能為原本死板的章添加模板、排序,進而得到漂亮、有設計過的文字內容。(想看實例的話點這裡,裡面演繹了關於把圖片變成橢圓形、如何在手機也有完整的呈現)

 

(教學正文開始)

因此我來跟大家分享2個Bootstrap的應用:

1.Headings(標題):我們可以去編輯要多大的標題,Bootstrap給的固定尺寸是這樣:

Headings

也就是說,如果我們想要用36級字的標題,我們可以輸入「h1 測試 /h1」的程式碼,如下:

(小提醒:在本站寫博文要輸入程式碼,要按右上角的按鈕Source)

<h1>主標題</h1>

而在一些情況下,我們會希望做副標題(較小並且在主標題旁邊),這時可以在上一個完成的情況下,在中間加入small,如下:

<h1>主標題<small>副標題</small></h1>

因此綜合以上兩個部份,會得到這個結果:

副標題

2.Paragraph(段落):預設是14級字體,輸入的程式碼為「<p>段落</p>」,如圖:

<p>段落</p>

而在一篇文章的許多段落中,我們有時希望有哪一段特別顯露出來,效果將會產生「比原本標題段更大一點」的情形。

<p class="lead">這個段落是特別的</p>

最後附上我在楓葉板社群部落格中,撰寫文章所使用的過程與成果:

Bootstrap教學0331Bootstrap教學0331

 

以上的教學,希望大家也能一同來學習Bootstrap,在撰寫楓葉板社群部落格時也能試著練習寫,未來我們的文章在排版、質量上一定能獲得更大的突破。

 

資料來源:

https://getbootstrap.com/docs/3.3/css/#type-body-copy

https://zh.wikipedia.org/wiki/Bootstrap

https://www.w3schools.com/bootstrap/bootstrap_typography.asp




在看了不少相關問題解法後,決定來將問題整理一遍,提供開發者遇到類似問題可以比較快解決的參考辦法

開發環境

kernel :linux 4.15.2

SoC : Allwinner H3 

 

這次搜尋的錯誤訊息有

  • 1c22c00.codec: ASoC: /soc/codec-analog@01f015c0 not registered [ 1.704762] sun4i-codec 1c22c00.codec: Failed to register our card 
     
  • aplay: device_list:270: no soundcards found...
     
  • ALSA lib confmisc.c:768:(parse_card) cannot find card '0'

之前會覺得錯誤訊息很多很可怕,但現在是少得很可怕,因為這代表我們能搜尋用的關鍵字變少了😭


1. IRCLOG (注意有出現 Guest80588 的對話內容)

1c22c00.codec: ASoC: /soc/codec-analog@01f015c0 not registered [ 1.704762] sun4i-codec 1c22c00.codec: Failed to register our card 

https://irclog.whitequark.org/linux-sunxi/2017-02-08

Guest80588 ﹕提問者

wens︰回答者

(把H3 加入 sun4i-codec 的author就是他喔 !!) 所以由他回答有一定公信力

KotCzarny︰應該也是回答者 

這個錯誤訊息是開機時回報的錯誤訊息

對話內容有列出當事人所遇到的狀況,所以如果還不清楚問題出在哪,不妨先照這個流程試試看,比較看看你和當事人遇到的情況是否類似,或是至少可以從中找到bug可能所在之處。

後來我在kernel中插入printk時才注意到,這個function總共會被呼叫2次,其中錯誤訊息只在第1次呼叫時產生的,而且在後面一點的地方可以看到我們的soundcard 其實有完成註冊, 類似以下形式

ALSA device list:
  #0: YOUR AUDIO INFO

而對話中也wens也表明能到這一步,基本上和driver已經沒有問題了,所以似乎問題和這錯誤訊息沒有太大關係。


2. Alexandre Belloni  "ASoC : Supporting Audio on an Embedded Board "

https://elinux.org/images/b/b5/Belloni-alsa-asoc.pdf

這邊有初步介紹處理 sound driver 的流程,也是看到裡面教學才知道原來不是所有定義的member 都會有資料,而是兩者有其中一個存在(p9 codec_name & codec_of_node),或是不存在 (p8 cpu-dai_name),不然之前傻傻的把header檔定義的變數名稱一個個印出來看,結果還一直遇到印出未初始化的變數,結果當然就是Kernel panic 😖。當初還很天真的以為應該就是這些變數沒有被正確初始才會造成如此錯誤,但教學文件說這本來就沒有必要全部初始,只要你有需要的有初始化就好。好吧,看來bug也不在這。

只是driver 寫法並不唯一,所以實例部份參考就好,不要衝動把自己的driver改成像教學中的示範例子一模一樣 (真的差點這樣做...)


3.  stackoverflow "Cannot find card0"

https://stackoverflow.com/questions/12151942/alsa-on-my-target-device-s…

這個錯誤訊息是嘗試執行aplay 時回報的錯誤訊息

真的完全是被這一篇給救了,因為這位作者 Jun 列出了很詳細的資訊

我才把soundcard 沒有名字這件事會造成錯誤的可能給排除,因為他也是一樣的狀況

而且最後也把問題解決了 (在home directory 下 加入一個 .asoundrc)

詳細解法可以看alsa 官網說明 (asounrc#The default plugin)

順利完成後 這次在輸入"aplay -l" 應該就會多出一個default ,那就代表你成功了 😂

/dev # cat /proc/asound/card0/pcm0p/info 
card: 0
device: 0
subdevice: 0
stream: PLAYBACK
id: DSP 1 msm-codec-dai-0
name: 
subname: subdevice #0
class: 0
subclass: 0
subdevices_count: 2
subdevices_avail: 2

最後還遇到一個很好笑的問題

我居然沒有權限可以執行aplay!不過這暫時用sudo 就可以解決了

音量記得到alsamixer 調整 lineout的部份 (建議先調到100)

當然還有喇叭的音量調整

 

希望大家最後都可以順利開發出屬於自己的板子 ✌️

 




Install Epson Printer Driver on Linux

sean  2018-03-30   留言:1

很多使用Linux的朋友可能都遇過
買硬體回家開開心心
結果驅動程式卻動不起來 😡

通常我們是到官網看看有無相關的support可以download
再來就是google有沒有人佛心來著已經改好了👍

如果都沒有的話
相信各位大神肯定可以自己動手做一個的😃
讓小弟當當 free rider

這次我們遇到的問題是Epson Printer L4150
這款去年推出的新機種
過去的Linux驅動程式版本竟然不會動😭

通常印表機的驅動同一個大系列都是可以通用的
不過這次可能有比較大的改版
所以我在一些論壇上找到的高手改編版也無法正常使用

https://goo.gl/XPFA2F
官網產品頁面找不到Linux選項
Epson l4150 說明書目錄部份截圖
進階使用手冊也沒有提到Linux...

這次我們的解決方案其他Epson產品也可以嘗試
因為Epson其實有偷偷整理所有的驅動可以搜尋...

  1. 下載
    http://download.ebz.epson.net/dsc/search/01/search/searchModule
    輸入 L4150 版本選擇 Linux 搜尋
    下載ESC/P-R Driver(generic driver)
    按接受後選對應的系統版本
    例如epson-inkjet-printer-escpr_1.6.19-1lsb3.2_amd64.deb
     
  2. 安裝
    根據下載頁的 information
    先在console輸入sudo apt install lsb

    把上一步下載的 driver安裝好
    sudo apt install 檔案絕對路徑
    例如 /home/your-name/Downloads/epson-inkjet-printer-escpr_1.6.19-1lsb3.2_amd64.deb
     
  3. 設定
    到我們作業系統的設定→印表機→新增印表機→完成 😼



楓葉板、BeagleBoard、樹莓派

contact  2018-03-26   留言:2

MapleBoard development

單板電腦起源於各系統晶片製造廠爲了讓系統設計工程師了解其系統晶片的效能,推出各種評估板。評估板把系統晶片的絕大部份功能都設計利用出來,因此相當複雜,電路板面積龐大,成本高昻,約在五、六千美元到一萬美元上下。通常很少由個人購買,大部分是公司、機構等購買。系統晶片製造廠之一德州儀器公司相關之BeagleBoard計劃,於2008年推出一精簡版的開源評估板,面積不到10cm x 10cm,價格不到一百美元。BeagleBoard的推出,立刻引起工程師們個人的購買風潮,銷量打破以前評估板想像不到的大量,產生很多工程師個人的開發計劃,形成開源BeagleBoard社群。社群成員間相互技術支援,不再需要依靠原廠,徹底改變了評估板的遊戲規則。英國的樹莓派基金會基於全面推廣數位應用的目標,於2013年推出售價三十元上下的單板電腦樹莓派,打破過去評估板限於工程師使用的領域,讓一般社會大衆廣泛學習利用單板電腦。樹莓派開創了電腦應用的新局面,帶來劃時代的影響。

 

楓葉板社鑑於BeagleBoard和樹莓派的成功及影響,深入瞭解到其中最精彩的部分包括利用開源力量,集衆志開發單板電腦及相關之作業系統,以及開源系統晶片之開發設計,和在地社的建立與經營,而不止是應用單板電腦而已。楓葉板社因此展開設計製作一系列楓葉板單板電腦,開發Maple GNU/Linux作業系統和楓葉板Web桌面,建立楓葉板軟體套件伺服器,並計劃將來加入開源系統晶片開發專案。




Blender 3D 廚房開箱

gava  2018-03-21   留言:1

雖然聽聞3D已久…也看過強者用3D做出許多驚人的效果(詳見洛克西德FB)。

覺得自己在旁邊觀望就好,還是當個粉絲就可以了cheeky

 

不過,冤家路窄… 該來的緣份還是會來...

有一天,就這麼蠟筆小新的打開了Blender的盒子…這時才了解,為什麼強者可以每天泡在3D了!

 

✔ Blender 很適合3D的初學者入門

  • 它是開源軟體(就是免費啦)!
  • 支援 Windows. Linux. MacOS(下載
  • 目前到2.8版了。日後也會持續更新。
  • 可用Phyton Program。喜歡創新的人別擔心~

 

看過Maya操作頁面,會感覺Blender使用起來頗方便。

或許Blender沒辦法媲美Maya裡做動畫或遊戲裡很複雜的功能。

不過,做3D方式,動畫方法與影片的概念是一樣的。

對於喜歡做靜態圖的Maker或嚮往把3D亂發展的我們,已經很夠用了!!

 

Blender會隨著程式的發展演進其功能和內容,或許裡面也有Maya無法媲美的功能。

畢竟,以程式開發的角度和動畫製作的角度來開發的立場起點本來就不一樣。(推薦閱讀:2018 設計趨勢:今年這 20 種設計將成熱門

話不多說,等不及趕快做點菜了laugh,讓我們趕快進入Blender 廚房吧!

 

➔ Blender Screen Layout (Default)

Blender Screen Layout (Default)

如何?有熟悉感嗎 blush?

 

如果你曾用過製圖軟體 illustrator , photoshop...等,應該對於做圖的界面不陌生。

3D只是多了時間(動畫與影格)與第三維空間(z 軸)這兩個可以演變的變數。

以圖形製作來說,基本會有幾個功能區:

 

製圖區 

可以是平面或3D

Blender 3D View

✔ 圖層區  

讓我們知道目前工作區的物件結構(就像用資料夾看檔案的概念)

Blender 圖層視窗

✔ 物件功能區 

針對畫面及物件做我們的上色及繪製動作。

Blender 功能視窗

✔ 編輯功能地圖 

如:製圖區、圖層區、物件功能區 ...等

Blender 編輯功能地圖

 

➔ Blender 廚房特別的地方在哪裡呢?

  • 3D製作原來能結合物件導向發揮的淋漓盡致

剛剛上述所看到的『編輯功能地圖』,其實是可以在任何一個『物件功能區』做開啟的。

意思就是,今天我在『圖層區』也能切到『製圖區』。

不管是用數值輸入的方式、色彩畫上去的方式...等。任何一種編輯模式,都能賦予3D呈現我們想要的樣子。

  • 快捷鍵設定人性化

Blender 的快捷鍵基本上跟其功能的意思(英文)不會差到太遠。

這個就要親自操作就能感同身受啦~~

  • 龐大的開發社群

既然是開源軟體,背後一定有許多強而有力的強者在開發及測試。

YouTube上也有很多教學資源可以學習 ex:Blender Guru,也有許多討論的論壇網站 ex:BlenderNation(這裡我只做一個連結,大家可以多找尋其他桃花源)

 

快來Blender 廚房做菜吧!

就像做菜一樣有趣~~heart

食物=建模+材質

調味=打燈

火候=鏡頭

先放個甜甜圈讓大家嚐點甜頭~我們下期待續~~~

3D Donut by Ejan