mapleboard on the table

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

Draft Ability

blogtest  2018-01-29   留言:5

We have added a new feature: Draft!

BUT!

There is no page for members to see their own drafts...

I plan to make a posts management page tomorrow.

please be patient to wait, thanks.




好忙好忙

在滿是工程師的辦公室裡,分秒深陷程式碼中因而耳濡目染學會如何coding

這般美好的事情,當然是謀~~摳~~零~~

常常聊天到一半,只差沒懷疑自己是不是中間恍神了,怎麼現在聊的內容我完全聽不懂啊~

「哈囉~說人話好嗎?」

更別提他們間的聊天,扣掉中間穿插的幾個字詞勉強擦邊聽懂外,剩下的......啊哈哈,大概是因為我們是不同物種吧!

記得之前好像看過寵物翻譯機,主要針對犬類,將其吠聲與行為轉化成人類可理解語言

希望我也能獲得一台「工程師翻譯機」,最好可以自動充電,因為每天上班我都會需要它的!

(可不可以工程師們上班之餘看到我的許願,然後該做硬體的做硬體、該做軟體的做軟體,操作介面我不強求,簡單簡單就好)

 

 

但是(哼哼哼,難得這麼得意的說著這兩個字)

不得不誇獎一下自己,我從完全看不懂程式語言到拿著sudo亂揮(認真只是亂揮)

現在的我已經不是之前的我了哼哼,我可以自己下載APP來玩了~~~

雖然成就之小,但是進步就是進步(翹鼻子)

先曬下最初的小遊戲:
cmatrix

CMatrix

因為CMatrix已被Debian接納,所以安裝很簡單,只需要拿出sudo揮個兩下就能夠玩了

 

$sudo apt install cmatrix

但當我開心的展示成果時,老闆默默的問說:「你電腦中毒?」

更壞的是同事們,他們以一種「她腦子早就中毒」的表情回望老闆

 

 

國父革命11次才成功,已非吳下阿蒙的我怎能輕言放棄

最近找到了款工程師級的裝忙程式

svenstaro發表於Github的A nonsense activity generator

不管是安裝、執行還是下載,看起來就是厲害,是不!

(再次感謝svenstaro供圖,弱弱如我下個目標設為做出gif好了)

 

 

好玩的東西是值得浪費青春的,讓我們一步步看怎麼下載吧!

  1. releases page 依作業系統選擇下載檔
  2. 先到存放的資料夾,我剛下載所以直接到下載資料夾
    $ cd Download/ 
  3. 活化他~~~
    $ chmod +x genact-linux
  4. 別客氣,開始玩弄他!!!
    $ genact-linux

如果還是覺得好難,生命想浪費在有意義的事情上,但又想假冒一回厲害的工程師

網頁版愛你kiss

 

 

如果你是個有興趣又有能力的人,恭喜你!

A nonsense activity generator可以自行修改變數,想要它飛天或鑽地都行(啊是要一個裝忙程式做什麼啦......)

要是你也跟我一樣是個「程式在跑,除了帥還是帥」的人,沒事的

內行看門道,外行看熱鬧,就讓不會程式的我們一起好忙好忙~~~




heart drawn by d3.js author Nadieh Bremer

首頁圖 (image source
有辦法在網頁上畫一個愛心嗎?他有一名朋友最近有點難過
這次會有這篇文章要感謝OO同學因為她提了一個有趣的問題
 
我就來問問了我們偉大的Google大神
於是乎就找到了這個有趣的的文章
其實畫圖這件事並不難
重點是畫出愛心的方程式要怎寫
這對一個非數學系的人是一個不小的挑戰
所幸我們有Google (歡呼~)
 
這次文章程式碼主要是從Nadieh Bremer 網站的教學擷取出來
看完才發現原來這位作者Nadieh Bremer是一位data visualization 的專家
有興趣的可以點這個連結看更多這位作者的作品 https://www.visualcinnamon.com/portfolio
 
nadieh bremer works snapshot
 
Data visualization 一直是我很有興趣的一塊
但礙於我美工天份不足所以一直以來都只能是欣賞
而不太能實做 ><
結果直到看了這一篇
我才知道有一段時間我一直再做的其實就是data visualization
而我一直景仰的是inforgraphics
 
這兩者差異在那呢?
原文  Matthew Pritchard : Data visualization vs. infographics
 
Data visualization
  1. 描繪原始數據
  2. 傳達資訊
  3. 提供客觀性

簡單說data visualization 就是可以取得數值,圖表產生。基本上在這一步完成讀者就可以根據這些資訊來完成結論,但因為只有圖表, 所以還是會仰賴輔助文字說明,才能了解我們現在所看到的圖表究竟代表什麼意義。

Inforgraphics
  1. 故事視覺化
  2. 提出觀點
  3. 提供主觀性
光是只有上面的圖表可能無法吸引非專業人士的目光, 有時我們也會希望這組數據可以引起更多人注意, 所以吸引目光這件事情就主要是透過infographics來達成。因為有故事的關係還有版面配置, 會讓讀者就像在看童話故事書一般深入其中,並迫不及待想看完這故事,迎來最後英雄擊敗大魔王勝利的完美大結局
 
所以根據本質差異兩種方式有不同使用的場合
 
Data visualization
  1. 新聞
  2. 白皮書&電子書
  3. 年度報告

有興趣可以點以下連結了解 :http://killerinfographics.com/blog/storytelling-through-data-visualization.html

Inforgraphics
  1. 部落格文章
  2. 案例分析
  3. 市場行銷文案

有興趣可以點以下連結了解 :http://killerinfographics.com/blog/4-ways-to-stretch-your-infographic-content.html

而關於d3.js 以及data visualization的淵源我也不是很清楚
但這篇文章還介紹的滿詳細,就放在這邊供有興趣的人參考
 
Bonus : processing.js
這也是一個可以畫圖的js
但這個似乎比較偏向藝術類
有興趣可以點以下網站點每個作品進去看看
每次重新整理都會是不同的結果
 
 
p5p generative art gallery snapshot
 
 
 



【開源,干卿底事?】

jonas  2018-01-24   留言:0

吹皺一池春水

上回我們科普了何謂開放原始碼(以下簡稱「開源」),這次來談談他與我們的連結。

 

從工程師的角度而言,我完成一個專案、為公司寫了許多Code,但一切版權仍然留在公司,也就是說所有的心血都無法帶走、重製,更甭提商業活動了。而開源的起源,一個很大原因就是如此:冀望有自由、得到更大的創作權利。

 

我不是工程師,那開源又與我何干?在現今的科技產業中,很多東西已經不是傳統「把一種技術練好就打遍全世界」(無法這樣的原因包括1.專案的塊頭太大,憑一公司之力難以完成2.科技產業競爭激烈,自己來不及做出來別人就攻下來了),因此前些年GoogleAndroid開源,為智慧型手機App產業帶來一次前所未有的革新,也就是說,我們現在能有如此多的免費好用的App,這部份要拜Google所賜。

 

而在更貼近生活的部份上,台灣的國家機構、中小學教育機構也開始導入開源,所以我們如果在學校使用電腦,有看見「odt」檔的部份,就是他使用了開源系統。開源的事務軟體也能一併轉換成WordExcelPowerpoint,因此在使用上不會有太大的阻礙。另一方面,Google的雲端硬碟、照片的智慧分類與辨識、Gmail等等相關產品,都有滿大程度的免費使用,這對我們一般使用者而言實在是福音。

 

想進一步體驗、使用開源的話:

1.如果你跟我一樣沒有寫軟體的技術,建議你可以看麻省理工學院的App學習:http://appinventor.mit.edu/explore

(中文解說、舉例:https://sites.google.com/site/jingprogram/app)幾年前我用這個有做出傳簡訊到手機、訂Pizza多久到之類的手機與電腦連動功能。

 

2.如果你是工程師,相信你早已了解關於寫App的部份,TensorFlowDrupalDebian會是你最佳的選擇——參與一個專案,協助專案的推動與完成,這對於你的技術提昇、職涯成長都有莫大助益。

 

開源的概念已經在我們的生活逐漸展開了,你還不跟風試試嗎?




blog01

開始接到這計畫,接到的指令是要把一個未生產的電路板用3D軟體繪製出來, 等於是把一個不存在的東西,讓它實實在在有血有肉的長出來, MP130楓葉板的內容等於是一台電腦的主機板,想必內容是五臟俱全的精細, 兩年前,對於一個已經深深浸泡在2D世界泥沼的我, 內心充滿無限『不可能吧』台灣人問號的想法, 且剛開始從一般業界所用的美工設計軟體大頭Adobe 練習轉為開放源系列軟體, 以公司案件的需求,實戰探索的方式來學習操作,平面類還算可以循序漸進的上手。但是對於3D,我只是3D MAX之小學生...畢業已久 ....

 

想當年『學習3D-Blender軟體』列為年度計畫,對我來說真的非常有挑戰性!

blog03

 

目前現階段3D-MP130楓葉板目標已經完成90%,寫一下小小的紀錄,分享給想學習Blender的人。

blog02

 

開 始

1. 研讀官網的使用者手冊User Manual(全英文)

2. Youtobe上面的教學影片 (外文居多,因開放源常更新,要注意有些改版功能調整很大)

( 練習的第一個建模! 小狗玩偶建模 )

blog04

 

初學者TIPS

  1. 中文教學影片 ( 由淺入深 - 從了解基本界面開始 )
  2. 收尋快速鍵,把常用的功能筆記下來 (Hotkey沒有它不行)
  3. 常常要有x.y.z 立體空間的概念(可練習素描各種物體,增加你對空間感的敏銳度)
  4. 與同好社群朋友一起研究,這就是開放源的精神 (卡住的時候,會有人拉你一把,或是一起迷路不孤單XD)
  5. Blender Animation Studio會不定期推出代表電影,了解軟體可以到什麼無與倫比的境界,讓人期待與有所啟發。https://www.youtube.com/channel/UCz75RVbH8q2jdBJ4SnwuZZQ

 

資 源

 

謝謝收看!:)    




圖片截取自 https://help.gnome.org/users/gnome-help/stable/screen-shot-record.html.en

(圖片截取自 https://help.gnome.org/users/gnome-help/stable/screen-shot-record.html…

我已經使用GNOME桌面多年,經常需要截取Screen一小區域,例如做Bug Report。往往大費周張,先按 alt + prt sc 截取整個視窗圖,然後用GIMP,取出我所需要的區塊。

昨天無意中看到 Sia 用 shift + prt sc 直接截取Screen中一小區塊圖,歎爲觀止,立刻請她教我。這麼簡單,這麼直覺。這些年來,我卻做了多少虛功?感謝 Sia。

寫下這個短博文,分享這個小小 tip 給還不曉得的人。

 




不做不知道

contact  2018-01-11   留言:2

MP130楓葉板海報

Jennie新設計了一張楓葉板海報,很有節慶的味道。春節即將來臨,拿出來曬給大家看。

楓葉板是什麼?多面向的單板電腦:學習板、應用板、開發板、測試板、發想板、 DIY 板。大家都知道在英國開發的樹莓派是現在單板電腦的盟主,創造了一個新風潮,銷售到全世界,每天幾乎賣到一萬八千片。

當樹莓派已經這麼dominate的情況下,我們爲什麼還要做楓葉板?楓葉板計劃已經進行超過兩年了,我常反覆思索這個問題。隨着計劃的進展,對我來說,這個問題的答案越來越清楚,就是,不做不知道。

舉一個例子來說,當楓葉板計劃徹底做下去,很快就會發現,只有硬體一塊電路板成就不了什麼。真正重要的是跟着而來的楓葉板社羣的建立和經營。這真是大塊頭,不做不知道。要建立經營楓葉板社羣,先從楓葉板部落格做起。原來想,做部落格沒什麼,小菜一碟,就當作暖身和訓練計劃。做下去才曉得不是這麼回事,從各種Web程式語言技術,框架選擇,內容管理系統,資料庫,到實驗設計伺服器,功能測試伺服器,可靠度測試伺服器,最後才是舞臺上的Production伺服器。也就是說一個檯面上的部落格伺服器,後面有三個流水線般的伺服器,同時在一版又一版不中斷的開發、測試和發佈。此外還有使用者介面、使用者經驗、使用者Scenario的設計,最後才是內容撰寫和美工設計。好不容易,楓葉板部落格總算要開張了,且慢,10個使用者,100個使用者,1000個使用者,5000個使用者時的Policy和Mechanism間的分寸安排,應該很不同吧,每個階段過多或不足的Policy,過少或太多的Mechanism,都會造成不同程度的災難。

怎麼說呢?還是一句話:不做不知道。

附記:這篇短短博文寫得不太順暢,今晚很冷,有隻貓咪來亂,躺在我懷裏取暖,趕不走。

 

bagel1

 

bagel2




Lost in time

首頁圖  Image source

 

0. 楔子

一開始以為很簡單的系統時間顯示, 沒想到處理起來才發現其中隱藏很多技術問題.

這篇主要會說明在實做發現的問題以及解法, 以及最後發現的可行實做的解法供大家做參考.
 

0.1 問題定義

期望結果:有一個php js編寫的網頁, 希望可以透過網頁操作修改系統時間, 並將網頁上的時間更新.

已知問題:目前可以透過網頁修改系統時間, 但無法將系統時間更新至網頁顯示. 之前沒有發現這個問題是因為, 系統和瀏覽器都在同一台電腦, 這次的問題就是發生在系統和瀏覽器在不同電腦上.

實做時間功能:系統時間是對系統下linux 指令 date , 瀏覽器時間則是用moment.js 的 moment() 函式取得

欲解決之問題:如何讓網頁顯示伺服器的時間

建議解法:計算兩者時間差, 使用moment().add() 完成系統時間的計算

 

1. What is moment.js

就是一個已經寫好的javascript提供許多容易理解以及實用的函數供網頁開發者處理時間顯示,轉換等功能

如果需要處理時區資訊還有另外一個姊妹作 moment-timezone.js

moment.js

    使用範例  /  基本入門

moment-timezone.js

    使用範例  /  基本入門

 

2. 實戰篇

這邊不介紹實做細節,因為這都不是最後採用的解法,但因為這個過程中學到不少東西,所以就把有用的一些資訊整理紀錄下來作分享.

2.1 moment().add(兩地時間差,'milliseconds')

  • 系統的date 也可以調整輸出格式(更多細節
  • moment() 直接使用就是顯示瀏覽器的時間, 至於如何調整時間顯示格式則可透過moment().format() (更多細節
  • time format:
        hh (01~12) vs HH (00~23) 如果有使用am/pm 要注意使用的時間格式
  • timezone format :
        z / zz 這個會回傳時區縮寫
        Z ZZ 這個才是會回傳已中央標準時間(GMT)-07:00 ~07:00 
  • 時差計算:(更多細節
        moment().diff(Moment|String|Number|Date|Array);
  • js date and moment object conversion: 
        建議把javascript date 使用 toIsoString() 轉換格式後再配合moment的物件或是函式使用
  • 更多其他有趣使用plugin 可以參考 這裡

2.2 moment.tz(伺服器時區).format()

  • 如果有使用到時區資訊請使用moment-timezone-with-data / moment-timezone-with-data-20xx-20xx,否則timezone資訊找不到會造成時間無法顯示
  • javascript使用上有呼叫先後順序, 錯誤的擺放引用順序會產生物件或是函式未定義的情況發生
    <script src="/path/to/my/js/moment.js"></script>
    <script src="/path/to/my/js/moment-timezone.js"></script>
    

     

3. 真 ‧ 解法

其實這裡解法並非唯一

php解法說明  (參考連結

  • php 可以直接取得系統時間資訊 (參考連結
  • php 可以將值傳到javascript上 (參考連結
    var currenttime = '<? print date("F d, Y H:i:s", time())?>';
    var serverdate=new Date(currenttime);

     

js 解法說明 (參考連結

  • javascript 可以透過網頁特殊欄位取得系統時間資訊
    完整欄位資訊可以透過getAllResponseHeaders取得 (範例
  • 整體分成三個步驟
    1. fetchServerTime:取得系統時間計算時間差
    2. timerHandler:目前顯示時間=目前時間moment()+時間差
    3. updateDisplay :更新目前顯示時間

 

4. 後記 - 問題探索過程摘要

當然對於一個之前非網頁專門工程師來說, 中間當然要借助不少開發者工具,或是線上沙盒幫忙, 最後才會知道說原來兩邊說的時間是不一樣的. linux 指令 date:這個毫無疑問可以取得伺服器時間, 而moment.js 的 moment() 則是回報瀏覽器的時間這會因為使用者所在時區或自行設定的時間不同而有所不同. 剛開始的確是按照建議的方式去執行,並依照建議將linux date得到的結果透過toISOString(), 但結果是時間會因為時區計算錯誤而導致顯示時間和想要設定的時間差了幾個小時大致慘況是這樣

網頁角度:
瀏覽器目前所在時區為GMT+08:00
目前顯示的時間為 2018/01/10 17:36 GMT+08:00
伺服器目前時區為 GMT-04:00 而時間又是調整過成為 2018/01/10 09:22 那瀏覽器會怎解釋呢?

瀏覽器會先把 要設定的時間轉為一致的時區再做計算 (-4 → +8)
2018/01/10 09:22 (-04:00) → 2018/01/10 21:22 (+08:00)
瀏覽器就會看到 2018/01/10 21 :22 GMT+08:00

使用者角度:

看到時間從 09:22 變成 21:22
使用者就崩潰了 >< (為什麼跟我設定的時間不一樣)

於是我又開始往更麻煩的地方去想:時間差=兩地時間差+兩地時差
過程中還有使用到系統時區資訊將最後顯示到的網頁時間重新調整

var dispDate=moment(iso格式時間).tz(系統時區).format(時間格式)

但是這次又變成不會更新了!!原因是我的系統時間只會再有變更或是頁面重新載入時才會更新, 除此之外並不會自動更新
其實要自動更新並不是不行, 而是目前使用的方法每一次對系統詢問或是設定至少都需要0.2ms,所以每秒都要更新的時間, 這樣是不切實際的

所以到頭來才發現
1.要取得系統時間不麻煩
2.取得時間方法不唯一

知道這兩點剩下就輕鬆了 surprise

常用資源

1. w3cshools - js

2. w3cshools - php

3. online php sandbox

4. jsfiddle

5. php manual