まず、最初から準備されているウィジットである、時計、メッセージ（テキスト）、数字、Twitterを表示してみます。
前回のインストール手順では、/home/pi/dashboardをdashingのルートフォルダとしました。このルートフォルダ配下のdashboardsフォルダにある.erbファイルが、ダッシュボードのレイアウトや表示要素を決める設定ファイルになっています。
この設定ファイルを準備した上で、ルートフォルダでdashing startコマンドを実行することにより、dashingのサーバプロセスが起動し、3030ポートが開きます。
pi@raspberrypi ~/dashboard $ dashing start
Thin web server (v1.6.3 codename Protein Powder)
Maximum connections set to 1024
Listening on 0.0.0.0:3030, CTRL+C to stop
ダッシュボードの設定ですが、dashboardsフォルダに最初からあるsample.erbやsampletv.erbを参考に、というか、ここからコピペしてダッシュボード画面を作っていきます。このフォルダにtest.erbがあれば、http://192.168.1.xxx:3030/testにアクセスすることでtest.erbに設定した、ダッシュボードの内容を表示をすることができます。(192.168.1.xxxはdashingがインストールされているraspberry piのIPアドレスです。)
■時計
現在の時刻を表示する時計です。
デフォルトで準備されているので、以下の設定をすると表示することができます。
pi@raspberrypi ~/dashboard/dashboards $ more clock.erb
<% content_for :title do %>My clock dashboard<% end %>
<div class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
<div data-id="my_widget" data-view="Clock"></div>
<i class="icon-time icon-background"></i>
</li>
</ul>
</div>
ダッシュボードにテキストでメッセージを書くことができます。
デフォルトで準備されているので、以下の設定をすると表示することができます。
pi@raspberrypi ~/dashboard/dashboards $ more text.erb
<% content_for :title do %>My text dashboard<% end %>
<div class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizex="2" data-sizey="1">
<div data-id="my_event" data-view="Text" data-title="本日のイベント" data-text="今日は新年会があります。" data-moreinfo=" "></div>
</li>
</ul>
</div>
ダッシュボードのテキストの内容は、以下のコマンドでraspberry piにhttpのpostを送ることにより変更することができます。(httpなのでリモートのクライアントからテキストを変更できます)
$curl -d '{ "auth_token": "YOUR_AUTH_TOKEN", "text":"表示したいテキストをここに記載します"}' http://192.168.1.xxx:3030/widgets/my_event
■数字
数字を表示できます。現時点の数値(current)を表示するのに加え、前回の数値(last)からの変化率を自動で計算し％表記してくれます。
これもデフォルトで準備されているので、.erbファイルに記述するだけで表示できます。
pi@raspberrypi ~/dashboard/dashboards $ more number.erb
<% content_for :title do %>My number dashboard<% end %>
<div class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
<div data-id="my_number" data-view="Number" data-title="数値タイトル" style="background-color:#96bf48;"></div>
<i class="icon-heart icon-background"></i>
</li>
</ul>
</div>
こちらもテキストと同様に、httpで数値をセットすることができます。
$curl -d '{ "auth_token": "YOUR_AUTH_TOKEN", "current":1000}' http://192.168.1.xxx:3030/widgets/my_number
$curl -d '{ "auth_token": "YOUR_AUTH_TOKEN", "last":800}' http://192.168.1.xxx:3030/widgets/my_number
とすると、以下のような表示になります。
■Twitter
TwitterのAPIを使ってTweetを取得し、ダッシュボードに表示することができます。これも最初から用意されていますが、Twitter APIにアクセスするためのキーをTwitterのデベロッパーサイトで取得し、dashingのtwitterジョブファイルに登録する必要があります。ルートフォルダ配下のjobsフォルダにあるtwitter.rbファイルが、twitterを表示するためのジョブファイルになっていますので、具体的にはtwitter.rbファイルの中にある、以下の4つの文字列を、TwitterAPIサイトで取得した文字列に書き換えます。
config.consumer_key = 'YOUR_CONSUMER_KEY'
config.consumer_secret = 'YOUR_CONSUMER_SECRET'
config.access_token = 'YOUR_OAUTH_TOKEN'
config.access_token_secret = 'YOUR_OAUTH_SECRET'
twitter.rbは、デフォルトではハッシュタグ#todayilearnedを持つtweetsを検索し、表示させるスクリプトになっています。スクリプトでは、
search_term = URI::encode('#todayilearned')
と
tweets = twitter.search("#{search_term}")
が、ハッシュタグを指定し、そのtweetを引っ張ってくるプログラム部分です。
なのでこの'#todayilearned'を任意の文字列に変えれば、別のハッシュタグを検索した結果を表示することができます。
今回は、ハッシュタグではなく、任意のアカウントのtweetsを表示させたかったので、該当のスクリプト部分を
tweets = twitter.user_timeline("copywritebot", { count: 200 } )
というように変更しました。copywritebotに任意のTwitterアカウント名を入れれば、そのユーザのTweetを表示することができます。Twitter APIの詳しいことは調べていませんので、適当に変更してみたら出来ましたというレベルに終わっています。
Tweetを取得する準備はできたので、表示するためのerbファイルを作ります。
pi@raspberrypi ~/dashboard/dashboards $ more twitter.erb
<% content_for :title do %>My twitter dashboard<% end %>
<div class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizex="2" data-sizey="1">
<div data-id="twitter_mentions" data-view="Comments" style="background-color:#ff9618;" data-moreinfo="Tweets by @copywritebot"></div>
<i class="icon-twitter icon-background"></i>
</li>
</ul>
</div>
で、以下のような表示になります。
今回は、最初から用意されているいくつかのwidgetをダッシュボードに表示してみましたが、Dashingには、サードパーティによって作られている追加ウィジットがあり以下のサイトに公開されています。
次回は、このサードパーティウィジットを使って、天気と、写真のスライドショーをダッシュボードに表示させてみたいと思います。
0 件のコメント:
コメントを投稿