Visualized fever of WordCamp Osaka 2018. Measure temperature and humidity at 4F Wapuu Cafe, calculate discomfort index, and make a graph of them. WordCamp Osaka 2018の熱気を可視化しました。4F わぷーカフェ周辺の温度・湿度を測定、不快指数を計算して、これらの値をグラフ化しています。

1. WordCampの熱気
を可視化してみた
Visualized fever at WordCamp
2018-06-02
WordCamp Osaka 2018
WordBench 川崎（復活準備中）
池⽥ 百合⼦

2. WordBench東京 6月 LT 大会
6月23日(土) 14:30-17:30
https://wbtokyo.doorkeeper.jp/events/74637

3. Camp盛り上がった?
Is this camp fevered?

4. 熱気を測ってみよう
Let's measure fever

5. ラズパイで
Using a Raspberry Pi

6. “一般的なご家庭には
必ずあるラズパイ”
“There is a RPi in a ordinary home ”
‒‒ 屋
‒‒ A network operator said.
逸般的な誤家庭
odd-inary home

7. Raspberry Pi
Single Board Computer
Same size as cards
Linux,
Windows 10 IoT, etc..
$5〜$35
(648〜5400 JPY)
Low power(5~12W)
From U.K.
http://wp.yuriko.net

8. Hardware
Raspberry Pi B+ / Pi Zero WH
Pi 2, Pi 3, Pi 3+ 発熱⼤
避
Sense HAT

9. Sense HAT
Add-on Board
for AstroPi
RGB LED Matrix 8x8
Sensors
Temp/Humi/Press/Gyro/Mag
$40

10. Software
Raspbian Lite
https://www.raspberrypi.org/downloads/
Sense HAT API
https://pythonhosted.org/sense-hat/api/

11. 温度・湿度測定
Measure temperature/humidity
from sense_hat import SenseHat
sense = SenseHat()
temp = sense.get_temperature()
print("Temperature: %s C" % temp)
humi = sense.get_humidity()
print("Humidity: %s %%rH" % humi)

12. 不快指数に変換
Convert into discomfort index
0.81Td +0.01H(0.99Td -14.3) +46.3
Td: Temp (℃)
H: Humidity

13. WordPressで記録
Log with WordPress

14. SVGでグラフ化
Make graph by SVG

15. WordPress as
Data Store

16. Custom Post Type
https://codex.wordpress.org/post_type
add_action( 'init', 'create_fever_log_type' );
function create_fever_log_type() {
register_post_type( 'fever_log',
array(
'labels' => array(
'name' => __( 'Fever' ),
'singular_name' => __( 'Fever' )
),
'public' => true,
'has_archive' => true,
)
);
}

17. "ferver_log" type
post_title
←
不快指数
discomfort index
本⽂
post_content
←
温度+湿度
temp, humidity
更新⽇時
post_date
←
測定⽇時
date & time

18. Create API

19. Custom End Point
温度・湿度 記録
(Submit a temp/humidity)
/wp-json/fever/v1/log
不快指数 履歴 取得
(Get history of discomfort indexes)
/wp-json/fever/v1/history

20. エンドポイント設置
Add end point
add_action('rest_api_init', function () {
register_rest_route('fever/v1', '/log/',
array(
'methods' => 'POST',
'callback' => 'log_fever_value',
) );
register_rest_route('fever/v1' '/history/',
array(
'methods' => 'GET',
'callback' => 'get_fever_history',
) );
} );

21. 温度・湿度を記録(1)
Log temp & humidity
function log_fever_value() {
$obj = json_decode($_POST);
$t = $obj['temp'];
$h = $obj['humi'];
$data = array();
if (! is_numeric($t) || ! is_numeric($h) ) {
return new WP_REST_Response($data, 400);
}
$json=json_encode(array('temp'=>$t,'humi'=>$h));
$discomf = $t*0.81+$h*($t*0.99-14.3)*0.01+46.3;

22. 温度・湿度を記録(2)
Log temp & humidity
$post = array(
'post_type' => 'fever_log',
'post_name' => 'fever_log',
'post_content' => $json,
'post_title' => $discomf,
);
$post_ID = wp_insert_post($post);
if (! $post_ID ) {
return new WP_REST_Response($data, 500);
}
$data['post_ID'] = $post_ID;
return new WP_REST_Response($data, 200);
}

23. fever log post

24. 不快指数を読み出し(1)
Read discomfort indexes
function get_fever_history() {
$num = 360;
$args = array (
'post_type' => 'fever_log',
'numberposts' => $num,
'offset' => 0,
'orderby' => 'date',
'order' => 'ASC',
);
$posts = get_posts($args);

25. 不快指数を読み出し(2)
Read discomfort indexes
$data = array();
foreach ( $posts as $p ) {
setup_postdata( $p );
$data[] = array(
'date' => get_the_date('Y/m/d H:i:s'),
'discomfort' => floatval(get_the_title()),
);
}
return new WP_REST_Response($data,200);
}

26. /wp-json/fever/v1/history
[
{"datetime":"2018/06/01 22:25:11",
"discomfort":83.0214384153},
{"datetime":"2018/06/01 22:25:35",
"discomfort":83.3682958288},
{"datetime":"2018/06/02 09:12:00",
"discomfort":82.3637111865}
]

27. Logging on
RasPi

28. 温度・湿度を送信
Send temp/humidity
#!/usr/bin/python
api="http://example.net/wp-json/fever/v1/log"
import requests
from sense_hat import SenseHat
sense = SenseHat()
temp = sense.get_temperature()
humi = sense.get_humidity()
env = '{"temp":%f, "humi":%f}' % (temp, humi)
response = requests.post(api, env,
headers={'Content-Type': 'application/json'}
)

29. 定期的に送信
Send periodically
$ crontab -e
*/5 * * * * /home/pi/log-env.py
{"temp":30.190403,
"humi":41.724270}

30. Make Graph

31. SVG Graph Libs
http://dygraphs.com
http://morrisjs.github.io/morris.js/

32. Static HTML
<html><head>
<script type="text/javascript" src="dygraph.js">
</script>
<link rel="stylesheet" src="dygraph.css" />
</head>
<body>
<div id="graphdiv"></div>
<script type="text/javascript">
g = new Dygraph(
document.getElementById("graphdiv"),
// CSV data.
);
</script>
</body>
</html>

33. functions.php
add_action('wp_enqueue_scripts','dygraph_styles');
function dygraph_styles() {
wp_enqueue_style(
'child-style',
get_stylesheet_directory_uri().'/dygraph.css');
wp_enqueue_script(
'dygraph',
get_stylesheet_directory_uri().'/dygraph.js');
}

34. post_content
<div id="graphdiv"></div>
<script type="text/javascript">
g = new Dygraph(
// containing div
document.getElementById("graphdiv"),
// CSV or path to a CSV file.
"Time,Fevern" +
"2018-06-02 10:15:07,77.258414n" +
"2018-06-02 10:16:08,77.554262n" +
"2018-06-02 10:17:10,77.680172n" +
"2018-06-02 10:18:02,77.825666n" +
"2018-06-02 10:20:04,78.359325n" +
"2018-06-02 10:25:03,79.242797n"
);
</script>

35. post_content
<div id="graphdiv"></div>
<script type="text/javascript">
g = new Dygraph(
// containing div
document.getElementById("graphdiv"),
// CSV or path to a CSV file.
[fever_csv]
);
</script>

37. あしたこそ!!

38. TODO
投稿時 OAuth認証
Add OAuth authentication when posting.
開始・終了時刻 指定可能
Can specify start/end time.
温度・湿度 描画
Draw graph of temperature or humidity only.

39. 池⽥ 百合⼦
http://www.yuriko.net/
@lilyfanjp
https://www.slideshare.net/
lilyfan/fever
https://github.com/lilyfanjp/
fever