いかにして問題を解くか

このサイトはGoogle Analyticsを利用しています。

BME280 with C-lang and Raspberry Pi

目的

Raspberry Pi 上の Linux から i2c バス経由で、 BME280からデータを C言語のプログラムで取得する。

この記事の続きです。 katogiso-tech.hatenablog.com

BME280 センサ

秋月電子のモジュールキットを利用する。

akizukidenshi.com

使い方

 $ rake
 $ chmod 776 ./bme280
 $ ./bme280

ソースコード

参考文献

以下の情報を参考にしています。

Bosch Sensortec ソースコード

猫ぱーんち! Raspberry Pi でI2C: C言語プログラミング

今回のソースコード

bme280.git

概要

詳細は後日記載する予定です。

Bosch のサンプルプログラムを全面的に整理して、 Raspberry Pi 上の Linux で動かしました。

BME280 を Forced Mode で動かして、気温、湿度、気圧データを取得しています。 main.c を見るとおおよその流れがわかると思います。

openBD (https://openbd.jp/) 書影

前置き

ここで言及するのは日本の書籍情報を取得できる API であるところの openBD です。JAVAのライブラリの方ではありません。

画像(書影)を表示する。

ソース

<div>
  <img id="output"></img>
</div>


<script>
function clickGet(){
  genRequest( uri, function(resp){
    var obj = JSON.parse(resp);
    var src = obj[0]["onix"]["CollateralDetail"]["SupportingResource"]["ResourceVersion"][0]["ResourceLink"];
    var alt = obj[0]["onix"]["DescriptiveDetail"]["TitleDetail"]["TitleElement"]["TitleText"]["content"];

    var img_tag = document.getElementById("output");
    img_tag.setAttribute('src', src);
    img_tag.setAttribute('alt', alt);
  });
}

function genRequest( uri, callback){
  var xhr = new XMLHttpRequest();

  xhr.onreadystatechange = function(){
    if (this.readyState==4 && this.status==200) {
      callback(this.response);
    }
  };

  xhr.responseType = 'json';
  xhr.open('GET',uri,true);
  xhr.send();
}

var uri = "https://api.openbd.jp/v1/get?isbn=4873113636?pretty";

</script>

脱"変なリンク"

openBD に書影が存在すれば気軽に画像がブログなどに表示できる。 それが第三者の販売サイトとは独立に利用できるのが良い。

openBD (https://openbd.jp/)

前置き

ここで言及するのは日本の書籍情報を取得できる API であるところの openBD です。JAVAのライブラリの方ではありません。

とりあえず

書籍「いかにして問題をとくか」をISBNで取得する。

 スクリプト

    function clickGet(){
       genRequest( uri, function(resp){
          var output_area = document.getElementById("output");
          output_area.value = JSON.stringify(resp);
       });
    }

    function genRequest( uri, callback){
       var xhr = new XMLHttpRequest();

       xhr.onreadystatechange = function(){
          if (this.readyState==4 && this.status==200) {
             callback(this.response);
          }
       };

       xhr.responseType = 'json';
       xhr.open('GET',uri,true);
       xhr.send();
    }

var uri = "https://api.openbd.jp/v1/get?isbn=4621045938?pretty";

Fritzing 0.9.2 - Basic

目的

ブレッドボードの綺麗な図を書けるようになる。

Fritzing は EDA ツールで、PCB も作成できますが、 とりあえず説明用のブレッドボード図をおこすために使用しています。

Fritzing Fritzing

結果

こんな感じになりました。

f:id:katogiso-tech:20170109215623p:plain

部品追加の説明

Raspberry Pi などの有名なボードはライブラリにあるので、 そこから持ってくるだけで図がかけます。

ただし、秋月のボードなどは無いので、自分で絵を描く必要があります。 SVG ファイルで記述すれば良いので、Inkscape で描きました。 どうも自前のエディタで絵を描くのは諦めて、外部ツールに任せたようです。

今回は2つのセンサボードを追加していますが、Fritzing 側の説明だけに絞ります。

手順

"mm" 単位で作成した部品の SVG 画像ファイルはもう作成済みとします。 また、アイコン(ライブラリから選択するときの画像)も 32x32ピクセルで準備してください。

  1. ブレッドボードのタブで、汎用IC を追加する。
  2. ICを選択して、プロパティの "pins"(ピン数)と、"パッケージ"( SIP or DIP )を選択する。
  3. IC を右クリック(コンテキストメニュー)で、"Edit"を選択する。
  4. Parts Editor のブレッドボード図を表示して、"ファイル" -> "Load image for View" で SVG ファイルを選択する。
  5. 画像のpin 位置をを認識させるために、Parts Editor のブレッドボード図右側で "Select graphic" をクリックして、画像の適当なアイテムをクリックする。
  6. 同様に、アイコンタブでアイコンを登録する。

ブレッドボードのタブで、汎用IC を追加する。

f:id:katogiso-tech:20170109221009p:plain

IC を右クリック(コンテキストメニュー)で、"Edit"を選択する。

f:id:katogiso-tech:20170109221107p:plain

SVG ファイル の登録

f:id:katogiso-tech:20170109221150p:plain

pin位置の登録

f:id:katogiso-tech:20170109221202p:plain

Inkscape の補足情報

別記事にしようと思っていますが、作成した画像サイズにドキュメントサイズを変更するやり方だけメモしておきます。

ドキュメントのプロパティでページタブを表示して、"Resize page to content..." をクリックして表示される "Resize page to drawing or selection" をクリックするとリサイズされます。

f:id:katogiso-tech:20170109221643p:plain

Chart JS V2.0 Scatter chart base

目的

散布図の書き方のベースを作成する。

結果

f:id:katogiso-tech:20161231141427p:plain

概要

Charjs で line chart を指定して、データは x,y データを保持したオブジェクトの配列、[{x: n, y, m}, ...] を指定する。ただし、options.scales.xAxes を指定し忘れると散布図にならないので注意する。

サンプル概要

2つのデータセットJavascript のランダム値を使って自動で生成している。そのためブラウザでリロードするたびにグラフは変化する。

データ

genData() で [{x:..,y:..},...] のデータを生成できる。 サンプルではそのデータを2組利用している。

また、異なるプロット表示にするため、pointStyle を使って、"1st Data" は 'star' に指定している。

data: {
    datasets: [
        {
            label:             "1st Data",
            data:              firstData ,
            pointStyle:        'star',
            pointRadius:       5,
            pointBorderRadius: 5,
            borderColor:       '#000',
            showLine:          false
        },

xAxes

オプション指定が無いと散布図にならない。

options: {
    scales: {
        xAxes:[{
            type: 'linear',
            position: 'bottom'
        }]
    },

全体

gistdc1329a83e31d8ef2c7f724ffbc6a1a7

wavedrom

目的

Web 上にディジタル波形を描画できるようになるJavascript ライブラリを導入する。

Hatena Blog 上で使えることの確認

記事の編集はMarkdown で行っているが、直接 HTML タグを埋め込めるので記述できる。

表示

一時的に非表示

ソース

直接以下の記述を記事内に書いている。 4つある script タグのうち、最後の記述が波形の内容で、それ以外は一回書けば大丈夫なはず。

<script src="https://cdnjs.cloudflare.com/ajax/libs/wavedrom/1.3.0/skins/default.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wavedrom/1.3.0/wavedrom.min.js" type="text/javascript"></script>

<script type="text/javascript">
window.onload = WaveDrom.ProcessAll;
</script>

<script type="WaveDrom">
{ signal: [
  { name: "clk",         wave: "p.....|..." },
  { name: "Data",        wave: "x.345x|=.x", data: ["head", "body", "tail", "data"] },
  { name: "Request",     wave: "0.1..0|1.0" },
  {},
  { name: "Acknowledge", wave: "1.....|01." }
]}
</script>

他の記事でも利用する場合

一つの記事だけなら上記のようにその場で読みこめば良いが、 複数の記事で共通して使うならはてなブログのデザイン設定でタイトル下に入れ込んでしまうのが良いと思う。

EventDrops のソースコードを読んでいる時のメモ

おことわり

この記事はメモ書きなので、特に誰向けかを意識して記述していません。 どこかの段階で正式な記事にしたいとは思うのですが。

スクランナー

ビルドスクリプトとほぼ同じようなもの。 そもそもこの言葉(タスクランナー)の定義もあまり明確にわかっていないが、単に make と目的自体は変わらない。

EventDrop では WebPack を使用している。 他にもたくさんあるが、流行り廃りが激しく2016年時点での流行に乗っている感じである。

Javascript 界隈でのタスクランナーにおける主な目的は、

  • require/import などを使って複数ファイルに分割しているJavascriptファイル群をまとめ上げる

ことになる。

require/import などの文法(?)は CommonJs(これ自体はルールの名前) や、node.js などの処理系によって定義されている。2016年時点でブラウザはこのルールを実装していないため、require/import を展開、変換する必要がある。

webpack の依存関係など

package.js を見るとわかる。

import

import <object name> from 'filename or Directory name'

import したファイル内において で参照できるようになる。 from 以降がディレクトリ名だった場合は、そのディレクトリ内の index.js を参照して解決する。

Webサーバの URL( ex. http://example.com/hoge/ )で、index.htmlをデフォルトで読み込むような感じなのだろう。

configurable.js

EventDrop のエントリポイントである eventDrops.js で読み込まれている。

configurable.js

どこにソースがあるのかよくわからず困った。

ボックス化

意味は値型(非オブジェクト)をオブジェクト型に変換すること。

MDN で apply() についての記述で現れた表現。

不勉強だった。

スプレッド演算子

...array

ドット(.) が3つで一つの演算子となり、スプレッド演算子と呼ぶ。 array をその場で展開してくれる。

解説は MDN で。

BABEL

EventDrops で使われている Javacript は BABEL で拡張されている。

BABEL

'Babel is a JavaScript compiler. Use next generation JavaScript, today.'

で、最新仕様 + 拡張? Javascript を現状の多くのブラウザで動く Javascript に変換するツールである。 Javascript から Javascript を生成する。

Javascript の初期化イディオム

 a = a || {}

a が nil や undefined であった場合、 {} を a に代入する。 BABEL が a = { ...b, ...c } をコンパイルすると、この初期化イディオムが生成される。

var _extends = Object.assign || function (target) { 
    for (var i = 1; i < arguments.length; i++) { 
       var source = arguments[i]; 
       for (var key in source) { 
            if (Object.prototype.hasOwnProperty.call(source, key)) { 
                target[key] = source[key]; 
            } 
        } 
    } 
    return target; 
};

Javascriptの処理系(ブラウザ etc.) が Object.assign を実装していない場合、 function以降が _extends に入る。

Rest parameters

スプレッド演算子に似てるけど、こちらはメソッド定義時に使う。

something( a, b, ...args ){}

こちらはa,b (3番目) 以降の可変長引数部を配列にしてしまう。 スプレッド演算子とは意味合いが逆転している。

ちなみに、javascript では基本的に可変長引数なので、 "可変長引数"なんて言葉を使うべきではないかもしれない。

解説は MDN で。

アロー演算子

// 無名関数基本
function( a, b, c ) { }

// アロー演算子で表現
( a, b, c ) => { }

// 引数が一つなら () を省略できる。
a => { }

ただし、this の評価タイミングが異なるため、全く同一表現でもない。

Enhanced Object Literals

変数を使って動的にオブジェクトプロパティを定義できる。

var inst = { "property": 1};

これを、

var key  = "property"
var inst = { [key]: 1 };

と記述できる。 key をユーザーの入力によって動的に変更が可能。