読者です 読者をやめる 読者になる 読者になる

Keep on moving

あんまりまとまってないことを書きますよ

WebAPIを駆使して東京電力使用状況メーターを作る!(Titanium Mobile版)

Titanium Mobile JavaScript

勉強も飽きてきたので、たまにはまともに動くものを書いてみました。
いろいろな言語/環境で書かれてる処理があるので参考にさせていただきました。
(というよりまるっきりまねしている箇所が多々あります)
先人の方々に感謝いたします。

Titanium Mobileでの実現方法

実装方法は2パターンあります。

WebViewを使う場合

ブラウザ表示するTitanium.UI.WebViewからはhtmlファイルを呼び出すことができます。
ここで使っているHTMLは[を] WebAPIを駆使して東京電力使用状況メーターを作る!(Perl版とJavaScript版)をそのまま使っています。

var win1 = Titanium.UI.currentWindow;

var web1 = Titanium.UI.createWebView({
    url: "static/html/stdn.html"
});

win1.add(web1);

f:id:Ehren:20110405014405p:image

ImageVewを使う場合

画像表示するTitanium.UI.ImageViewからURLで呼び出すことができます。
AndroidではExceptionが出て動きません。現在調査中。

var appid = 'Your App ID';
var xhr = Titanium.Network.createHTTPClient();
xhr.open('GET', 
	 'http://setsuden.yahooapis.jp/v1/Setsuden/latestPowerUsage?output=json&appid='+appid);

xhr.onload = function(){
  // for debug
  //Titanium.API.info(this.responseText);

  var json = JSON.parse(this.responseText);

  var usage = json.ElectricPowerUsage.Usage.$;
  var capacity = json.ElectricPowerUsage.Capacity.$;
  var hour = json.ElectricPowerUsage.Hour;
  var rate = Math.ceil(usage / capacity * 100);

  var image_url = 
    'http://chart.apis.google.com/chart?chxt=x&chbh=a,4,5&chs=225x69' +
    '&cht=bhs&chco=FFCC33,FF0000&chd=t:' + rate  + '|' + (100 - rate) +
    '&chtt=東京電力使用状況' + hour + '時台&chts=676767,14.5';

  var imageView = Titanium.UI.createImageView({
    image:image_url,
    width:225,
    height:69,
    top:100
  });

  win2.add(imageView);

};

f:id:Ehren:20110405014432p:image