CSS3とjQueryでアコーディオン
CSS3アニメーションを使って、アコーディオンを実現します。
jQueryのslideDownよりも幾分、なめらかに動作するかと思います。
サンプルはこちら
http://moeten.info/js/20140908_cssSlide/
メインのソースはこちら
css
dd{ overflow-y: hidden; opacity: 0; max-height: 0; transition-property: all; transition-duration: 1s; transition-timing-function: cubic-bezier(0, 1, 0.5, 1); } dd.open{ opacity: 1; max-height: 200px; }
javascript
$(function() { $("dl dt").click(function(){ $("dd").removeClass("open"); $("+dd",this).addClass("open"); }); });
html
<dl> <dt>タイトル</dt> <dd>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</dd> <dt>タイトル</dt> <dd>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</dd> <dt>タイトル</dt> <dd>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</dd> <dt>タイトル</dt> <dd>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</dd> </dl>
Apacheからnodejsのリッスンサーバーポートにマッピングさせる
Apacheからnodejsで起動したサーバーポート3000にマッピングさせます。
Apacheの設定ファイルの編集
設定ファイルを編集します。
emacs /etc/httpd/conf/httpd.conf
下記項目を追記します。
NameVirtualHost *:80 <VirtualHost *:80> ServerName example.com #←利用ドメインの指定 <Location /> ProxyPass http://localhost:3000/ ProxyPassReverse http://localhost:3000/ </Location> </VirtualHost>
Apacheのリスタート
apachectl restart
あとは、httpd.conに指定したexample.comにブラウザでアクセスすればlocalhost:3000にマッピングされます。
WindowsのPhpStormでLess
WindowsのPhpStormでLessを使用する方法です。
nodejsのインストール
まずは、nodejsをダウンロードしてインストールを行います。
node.js
※インストールすると使えるnodeやnpmコマンドは結構使用しますので、環境変数pathに追加しておくと、コマンドプロンプトのどこにいても呼び出せるので便利です。
プログラム環境の構築:パスの通し方
phpstromでwatch(監視)させる
File->Settings->File Wathersで+LESSを選択し、Programの項目に
C:\Users\ログインユーザー名\AppData\Roaming\npm\lessc.cmd
を指定します。
あとは、lessファイルを作成し、保存する度に、cssファイルが自動で吐き出されます。
SVGをレスポンシブ化
SVGをレスポンシブ化させます。
サンプルはこちら
http://moeten.info/js/20140722_svgResponsive/
適当にウィンドウ幅を変えてみてください。
ソースコードはこちら
index.html
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script> <script type="text/javascript"> // $(function(){ $("#mySvg").load("abc.svg"); }); </script> <style type="text/css"> #mySvg text{ fill: blue; } @media screen and (min-width : 768px){ #mySvg text{ fill: red; } } @media screen and (min-width : 1024px) { #mySvg text{ fill: yellow; } } </style> </head> <body> <div id="mySvg"></div> </body> </html>
Raspberry Piと温度湿度センサーを使って数値をグラフ化
Raspberry Piと温度湿度センサーを使って数値をグラフ化します。
サンプルはこちら
http://moeten.info/js/20140720_tempHumGraph/graph.html
必要なアイテム
温度湿度センサーのインストール
温度湿度センサーのインストール(詳細はこちらを参照)
$ sudo apt-get install gcc libusb-dev $ cd /usr/local/src $ sudo wget http://www.dd.iij4u.or.jp/~briareos/soft/usbrh-0.05.tar.gz $ sudo tar xvfz usbrh-0.05.tar.gz $ cd usbrh-0.05
usbrh_main.c の下記部分を追加修正します。
if((rc = usb_set_configuration(dh, dev->config->bConfigurationValue))<0){ if( rc = usb_detach_kernel_driver_np(dh, dev->config->interface->altsetting->bInterfaceNumber)<0 ){ //<-- 追記 puts("usb_set_configuration error"); usb_close(dh); exit(3); } //<-- 追記 }
コンパイルとインストールと実行
$ make $ sudo chown root:root usbrh $ sudo chmod u+s usbrh $ sudo mv -i usbrh /usr/local/bin/ $ usbrh //[温度] [湿度] が表示されます。
PHP実行部分
温度湿度センサーusbrhをphpから実行し、温度・湿度データーを取得します。
add.php
<?php //データーベースに接続 $con = mysql_connect('localhost', 'USER', 'PASSWORD'); mysql_select_db('DATABASE_NAME'); //温度湿度計コマンド実行 exec( '/usr/local/bin/usbrh',$buf); list($temp , $hum ) = explode(" ",$buf[0]); //不快指数の計算 http://homepage2.nifty.com/luminaries/guidance/kishou_018.htm //0.81×気温+0.01×湿度×(0.99×気温-14.3)+46.3 $discomfort = 0.81 * $temp + 0.01*$hum*(0.99*$temp-14.3)+46.3; //Raspberry Piの場合は下記コマンドでCPU温度が取得できます。 exec( '/opt/vc/bin/vcgencmd measure_temp',$buf2); list($str , $temp_cpu ) = explode("=",$buf2[0]); $temp_cpu = floatval( $temp_cpu ); //データーベースへデーターを挿入(変数のmysql_real_escape_stringは適宜してください ) $sql = <<<SQL INSERT INTO temperature_data ( temperature, humidity, discomfort, temperature_cpu, mdatetime )VALUES( '{$temp}', '{$hum}', '{$discomfort}', '{$temp_cpu}', NOW() ); SQL; $res = mysql_query( $sql );
cronを使って定期的にadd.phpプログラムを実行します。
$ sudo crontab -e
10分おきにコマンドを実行する場合
*/10 * * * * php /var/www/add.php
javascript用にデーターベースの中身をjson形式で出力
print.php
<?php //データーベースに接続 $con = mysql_connect('localhost', 'USER', 'PASSWORD'); mysql_select_db('DATABASE_NAME'); //データー取得 $sql = "SELECT * FROM temperature_data ORDER BY id LIMIT 100 ;"; $res = mysql_query( $sql ); while( $val = mysql_fetch_assoc( $res ) ){ $json[] = $val; } //jsonで出力 echo json_encode( $json );
グラフ表示部分
graph.html
<html> <head> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script> <script type="text/javascript"> google.load("visualization", "1", {packages:["corechart"]}); // $(function(){ //グーグルグラフのライブラリ読み込み完了イベント google.setOnLoadCallback( init ); //初期化 function init(){ //グラフ描画+指定秒繰り返す makeGraph(); setInterval(function(){ makeGraph(); },60 * 1000 ); } //グラフの描画 function makeGraph(){ //JSONデーターの取得 $.ajax({ type: 'GET', url: './print.php', dataType: 'json', success: function(json){ //タイトル作成 var dataArray = [[ '日付', '温度', '湿度', '不快指数', 'CPU温度' ]]; //jsonデーターの中身取得 var len = json.length; for(var i=0; i < len; i++){ //最新のデーターを取得 if( i == len-1 ){ $("#temperature").text(parseFloat(json[i].temperature) + "℃" ); $("#humidity").text(parseFloat(json[i].humidity) + "%" ); $("#discomfort").text(parseInt(json[i].discomfort , 10 ) ); $("#temperature_cpu").text(parseFloat(json[i].temperature_cpu) + "℃" ); } //データーに追加 dataArray.push([ json[i].mdatetime, parseFloat(json[i].temperature), parseFloat(json[i].humidity), parseFloat(json[i].discomfort), parseFloat(json[i].temperature_cpu) ]); } //グラフの描画 var data = google.visualization.arrayToDataTable( dataArray ); var options = { title: '温度・湿度グラフ', legend: { position: 'top' } }; var chart = new google.visualization.LineChart(document.getElementById('chart_div')); chart.draw(data, options); } }); } }); </script> <style type="text/css"> #chart_div{ width: 900px; height: 500px; } dl{ position: absolute; top: 76px; left: 760px; border: 1px solid rgb(228, 228, 228); padding: 10px 15px 0 14px; border-radius: 10px; box-shadow: 0 0 3px gray; background: rgb(255, 254, 249); } dd{ padding: 0; margin: 6px 0 10px 20px; font-size: 46px; text-align: right; } </style> </head> <body> <div id="chart_div"></div> <dl> <dt>不快指数</dt> <dd id="discomfort"></dd> <dt>CPU温度</dt> <dd id="temperature_cpu"></dd> <dt>湿度</dt> <dd id="humidity"></dd> <dt>温度</dt> <dd id="temperature"></dd> </dl> </body> </html>
不快指数が取得できますので、レストランなど、人を迎える場所にはいいかもしれませんね。
参考リンク
温度湿度センサー
Raspberry Piで温度と湿度を計測しグラフ化してみました | 株式会社インフィニットループ技術ブログ
趣味:不快指数の計算方法
- 出版社/メーカー: RS Components Ltd (ソースマーキング及び販売 Umemoto LLP)
- メディア: エレクトロニクス
- この商品を含むブログ (12件) を見る
- 作者: 日経Linux
- 出版社/メーカー: 日経BP社
- 発売日: 2014/02/28
- メディア: Kindle版
- この商品を含むブログ (1件) を見る