//
表示中
モノづくり, Computer - コンピューター, Electronics - 電子工作

漆風呂の温湿度管理アプリケーションをダッシュボードっぽくする


この投稿の続きです。

直近の温度と湿度の表示を少しダッシュボードっぽくしました。

Screenshot from 2016-08-16 17-50-44

D3で円形のゲージを表示する部分のコードです。

function drawTempGuage(value) {
 var t = 2 * Math.PI;
 var svg = d3.select("#tempGuage");
 var width = +svg.attr("width");
 var height = +svg.attr("height");
 
 svg.selectAll("*").remove();
 
 var g = svg.append("g").attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
 
 var arc = d3.arc()
 .innerRadius(width/2 - 30)
 .outerRadius(width/2 - 4)
 .startAngle(0);
 
 var background = g.append("path")
 .datum({endAngle: t})
 .style("stroke", "#ddd")
 .style("fill", "#ddd")
 .attr("d", arc);
 
 var foreground = g.append("path")
 .datum({endAngle:0.127 * t})
 .style("stroke", "red")
 .style("fill", "red")
 .attr("d", arc);
 
 svg.append("text")
 .attr("x", width/2 - 30)
 .attr("y", height/2 + 8)
 .style("font-size", "24px")
 .style("font-weight", "bold")
 .style("fill", "darkgray")
 .text(value);

 foreground.transition()
 .duration(10)
 .attrTween("d", arcTween(arc, (value / 50) * t));
}

function arcTween(arc, newAngle) {
 return function(d) {
 var interpolate = d3.interpolate(d.endAngle, newAngle); 
 return function(t) {
 d.endAngle = interpolate(t);
 return arc(d);
 };
 };
}

円の中の数字の位置決めが少しダサいのでそのうち綺麗なロジックに書き直します。

温度と湿度の値は補正が必要です。いくらなんでエアコンの効いた部屋の湿度がこんな数値ではないはずです。

kazz12211 について

Working as a OO programmer and enjoying music, bicycle and photography.

ディスカッション

コメントはまだありません。

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中

手仕事日記

評価

ブログ統計

  • 526,808 ヒット

カテゴリー

アーカイブ

カレンダー

2016年8月
« 7月   9月 »
 123456
78910111213
14151617181920
21222324252627
28293031  
%d人のブロガーが「いいね」をつけました。