发现了一个Mac桌面widget的神器 Übersicht

毕业前后除了聚会没做什么实事，整天在闲逛混时间，偶然间在知乎上发现了这个 Übersicht神器，觉得很有意思，也很符合我想要的“个人信息中心”的梦想，就准备研究一下。也欢迎更多的朋友来研究，做出更多更有趣的widget。

 command: "echo Hello World!"

  refreshFrequency: 5000 # ms

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

  style: """
    left: 20px
    top: 20px
    color: #fff
  """

上面是官网上的一段示例代码，虽然我对原理还不清楚，但是它的编程过程还是非常的清晰。整个脚本是用coffee script写的，当然官网上说是纯javascript也可以（coffee script我并不了解，只大概晓得它是javascript的优美版本，而js目前也只是学了一个皮毛。。。），command是需要在终端中运行的命令，refreshFrequency是运行的频率，以毫秒为单位，render是想要输出的格式（HTML5），style则是css。简单的来说就是通过在终端中以一定的频率运行一条命令，输出的字符串显示在由html5和css构成了widget中。可见这种方式不仅在显示的内容，更在现实的格式上有非常大的灵活性，可以DIY很多东西。它事实上是在localhost:41416上运行的，至于它如何开的本地服务器，又如何投射到桌面上我还不了解，也许需要

官网上提供了一些示例，我比较喜欢的有sys-monitor, calendar, countdown这几个，分别入下图所示

我前段时间一直在研究RSS的问题，很想把所有想关注的网站的信息都集中到一起，其中就包括直播吧上的比赛日程，用RSS工具搞了很久也没搞好。受到了一个叫world cup的简单widget的启发，它就是通过python脚本爬取当日的比赛信息，并通过字符串输出显示在html框架中，那本我也可以用爬虫爬取直播吧上今天的赛程然后显示啊！说干就干，先研究python怎么写爬虫，找到了这个很好的博客，照着它用urllib2抓取html，用BeatuifulSoup解析

import urllib2
import bs4
from bs4 import BeautifulSoup
import sys
reload(sys)
sys.setdefaultencoding('utf-8')
#from datetime import *

response = urllib2.urlopen("http://www.zhibo8.cc")
soup = BeautifulSoup(response.read())
#today = datetime.now().strftime('%Y-%m-%d')
today = soup.h2.contents
matches = []
for m in soup.h2.parent.next_sibling.next_sibling.ul.contents:
	if m != u'\n':
		# print m.contents[0]
		i=0
		match = ''
		while(True):
			if isinstance(m.contents[i],bs4.element.NavigableString):
				match += m.contents[i]
			elif isinstance(m.contents[i],bs4.element.Tag):
				if m.contents[i].name=="a":
					break
				elif m.contents[i].name=="b":
					match+='<b>'+m.contents[i].string+'</b>'
				else:
					match+=m.contents[i].string 
			# print match
			i=i+1
		matches.append(match)
print '</br>'.join(matches)

注意这里最后将输出为简单的html格式，并设置了字符的编码（具体原理还不清楚）。接下来就是coffee script的部分，很简单

command:"/Users/Pro/canopy/bin/python zhiboba.widget/zhiboba.py"
refreshFrequency: 3600000
render: (output) -> """
<div id="container">		
		#{output}		
</div>
"""
style:"""
top:10px
right:10px
#container
		background rgba(#000, .5)
		margin 0px 0px 0px
		padding 10px
		border-radius 5px

		color rgba(#fff, .9)
		font-family Helvetica Neue
		font-size 8pt
		font-weight 300
b
	color #63B8FF
"""

遇到的一点小问题是在command中直接写python会显示找不到bs4的库，而我明明已经在系统默认的python中安装了这个库，最后只能通过写python的完整路径来解决。另外就是这里我设置了每一小时更新一次，并且将有加粗标签的文字设置为了淡蓝色便于分辨，最后的效果图是这样的

总体来说还是有成就感的，以后准备进一步的探究这个东西，也许要读源码等，希望能把自己想要的信息都能及时的显示在桌面上，做一个hecker。有一点遗憾的是我发现显示在桌面上的widget是无法交互的，但是总的来说它依旧有非常大的灵活性，接下来还会继续研究。最后还是希望自己能不要荒废掉这个暑假。。。