[Mac] Make your personal dashboard on desktop in 5 mins (2)

ankycheng

Published in

Jedi Apprentice

9 min readJul 4, 2017

第二種方法是使用Übersicht，此篇將會簡單介紹如何使用Übersicht與他的套件Übersicht Widgets。

什麼是Übersicht?

官網的介紹：

At a Glance
Übersicht lets you run system commands and display their output on your desktop in little containers, called widgets. Widgets are written using HTML5, which means they
* are easy to write and customize
* can show data in tables, charts, graphs … you name it
* can react to different screen sizes

第二種方法是使用Übersicht，與Geektool相比，同樣是針對Mac桌面背景的應用，但使用上的門檻卻相對高了不少，不過如果會一些網頁前端的技巧（HTML/CSS/JavaScript），可以達到更加多元靈活的應用，想像他就是直接把寫好的網頁檔打印在你的桌面背景上面就很好理解。Übersicht 是以CoffeeScript(一種JavaScript的轉譯語言)為執行語言搭配HTML5。Coffee我也不太會用XD，不過好消息是在Coffee檔中仍然可以執行JavaScript語法。如果不諳程式碼或是懶得自己寫，也可以直接到Übersicht Widgets的網頁抓人家寫好的套件來用。

下載

到官方網站點擊下載後一樣解壓縮到應用程式資料夾即可。

基本介面

打開之後畫面上會出現問候與使用方式：

如果不寫程式，主要會使用到的只有一個部分，就是把別人在Übersicht Widgets寫好Widgets下載放到自己的Widgets資料夾中。也可以在每個Widget的選單中選擇顯示的介面以及是否隱藏等選項。

所以所有放在Widget Folder的檔案都會出現在menu bar的選單內

所以例如，今天如果只是想要一個簡單的時鐘，可以直接下載 simple-clock這個檔案，把它丟到Widgets Folder中就能達到打印時間的效果。像這樣：

程式架構

如果要自己編寫或是改別人的程式碼的話就需要瞭解一下Übersicht的執行方式：
這是打印出歡迎畫面的原始碼：

# This is a simple example Widget, written in CoffeeScript, to get you started
# with Übersicht. For the full documentation please visit:
#
# https://github.com/felixhageloh/uebersicht
#
# You can modify this widget as you see fit, or simply delete this file to
# remove it.

# this is the shell command that gets executed every time this widget refreshes
command: "whoami"

# the refresh frequency in milliseconds
refreshFrequency: 1000000

# render gets called after the shell command has executed. The command's output
# is passed in as a string. Whatever it returns will get rendered as HTML.
render: (output) -> """
  <h1>Hi, #{output}</h1>
  <p>
    Thanks for trying out Übersicht!
    This is an example widget to get you started.
  </p>
  <p>
    To view this example widget, choose <em>'Open Widgets Folder'</em>
    from the status bar menu. Use it to create your own widget,
    or simply delete it.
  </p>
  <p>
    To download other widgets, choose <em>'Visit Widgets Gallery'</em>
    from the status bar menu.
  </p>
"""

# the CSS style for this widget, written using Stylus
# (http://learnboost.github.io/stylus/)
style: """
  background: rgba(#fff, 0.95) url('übersicht-logo.png') no-repeat 50% 20px
  background-size: 176px 84px
  -webkit-backdrop-filter: blur(20px)
  border-radius: 1px
  border: 2px solid #fff
  box-sizing: border-box
  color: #141f33
  font-family: Helvetica Neue
  font-weight: 300
  left: 50%
  line-height: 1.5
  margin-left: -170px
  padding: 120px 20px 20px
  top: 10%
  width: 340px
  text-align: justify

  h1
    font-size: 20px
    font-weight: 300
    margin: 16px 0 8px

  em
    font-weight: 400
    font-style: normal
"""

架構主要有幾個部分：

command: "whoami"：這裡是指令碼的部份，跟Geektool一樣，每次執行這份文件的時候都會先跑Command，取得回傳值。像是這個範例中的whoami 在Shell Script中就是取得username的指令。也因此歡迎畫面中第一句 Hi,XXX 中的XXX就是直接套用這個指令的回傳值。
refreshFrequency: 1000000：如同Geektool的Refresh Every xx seconds 。設定幾毫（1/1000）秒要自動更新一次。
render: (output) -> ...：function_name: (var) ->... 是在Coffee中定義函式的方法，這邊他直接把HTML檔寫好丟回來。值得注意的是 #{output}這個值，這是Coffee中使用內嵌函式的方法，可以直接定義函式或是把特定的變數回傳。此外，Coffee會直接把上一個函式的執行結果輸出，因此這邊output的內容就會直接帶入上述command指令的回傳值（你的名字）。
style: ...：就是CSS的部份，負責樣式與排版。

從設定選單中的Show Debug Console 可以看到render出來的HTML架構，桌面就是執行的網頁：

時間設定

Command的使用方式與Geekool無異，一樣用Date就能叫出當下的時間。因此用最簡單的方式先試試看：

#my_clock.coffee saved in /Users/ankycheng/Library/Application\ Support/Übersicht/widgets
command: "Date"
render: (output) ->
  "<h1>#{output}</h1>"

結果：時間出現在左上角了，而且如同網頁一樣不做任何的設定的話都是置左置頂對齊。

這時可以編輯CSS的內容，美化一下：

command: "Date"

render: (output) ->
  """
  <div>#{output}</div>
  """

style: """
  font-family: gilroy; //調整字型
  color:white; //顏色
  font-size: 45px; //字體大小
  width: 99.7vw; //指定外框寬度，文字置中用
  line-height: 99.5vh; //指定外框高度，文字置中用
  text-align: center; //文字置中
"""

結果：

那如果想要日期時間分開取得，個別排版呢？也可以。這時可以用Command的&&指令，一次抓取多個參數再用split方法把取得的數值分別存在不同的變數當中，像是這樣：

#my_clock.coffee saved in /Users/ankycheng/Library/Application\ Support/Übersicht/widgets

timeFormat = "date '+%A, %b. %d' && date '+%l:%M'"

command: timeFormat

render: (output) ->
  [date, time] = output.split('\n')
  """
  <div>#{time} <br> #{date}</div>
  """

style: """
  div
    font-family: gilroy;
    color:white;
    font-size: 45px;
    width: 99.7vw;
    margin-top: 40 vh;
    line-height: 100%;
    text-align: center;
"""