コンテンツへスキップ

PICマイコンを使ってみます。使用するのはpic16f886で、windows10、MPLAB v5.10。

PICマイコンを使ってみます。使用するのはpic16f886で、windows10、MPLAB v5.10

目次

  • PIC開発環境
  • 回路
  • コード
  • 書き込み
  • 動作確認
  • 雑記
  • 参考

PIC開発環境

ソフトウェアでコーディングした後、ライターを用いてマイコンに書き込みます。

  • ソフト (MPLAB X IDE + MPLAB XC8コンパイラ)

IDEは統合開発環境で、エディタ、デバッカ、シミュレータなどほとんどのプログラムを内蔵しています。MPLAB X IDEは8bit~32bitマイコンで共通で使用できます。 コンパイラはC言語のようなコンパイラ言語をコンパイルして機械語に翻訳するプログラムです。Cコンパイラは別にインストールし、MPLAB X IDE に統合します。

私はwindows10ですが、macでもlinuxでも同様の環境でOKみたいです。

コンパイラはいくつかありますが、microchip社が比較的新しく発表したのが MPLAB XC8コンパイラです。 MPLAB IDE8.84迄のバージョンには既にHI-TECH Cが同梱されているみたいです。

・ MPLAB X IDE | Microchip Technology


MPLAB XC Compilers| Microchip Technology

  • 書き込み機(ライター)

記事によって互換品の付属のアダプタが危険っぽかったので別途用意しました。ネタバレですが、書き込み機の一部機能が壊れてました。

回路

2つLEDをつけて交互に点滅させます。 簡単で良いです。実験中に電源が入っているかを確認するためのLEDと、電源を外したときに瞬間的にマイコン電源がなくなるのを防ぐために (一応)つけているコンデンサが加わっています。

回路図

データシートを見ながら回路を組み立てます。リンクは秋月さんのとこのです。

マイコンのpin

コード

PICに書きこむ例としてリモコンのコードを見ながら、自分でコードを書いていきたいと思います。

プロジェクト

file/New Projectから作成します。MicrochipのStandalone Projectを選択します。

new project

今回使うpic16f886を選択します。

ライターは使用するPickit3を選択します。

コンパイラはXC8を選択します。

ファイル名は適当に決めます。

sourceフォルダの中に1つmainのファイルが必要です。

cファイルを開き、コードを書いていきます。

設定

production/set configuration bit の設定をしていきます。 なお、このマイコンはMCC対応してません。MCCは、簡単に設定できる超便利ツール、らしいです。

MPLAB® Code Configurator -microchip

set configuration bit

出来たら、generate source codeをクリックしてコードをコピペします。

configuration

設定は秋月のリモコンと一緒にします。今回は関数など使ってないので、I/Oさえ間違わなければ問題ないと思われます。

// CONFIG1
#pragma config FOSC     = INTRC_NOCLKOUT    // 発振回路設定 Oscillator Selection bits (INTOSCIO oscillator: I/O function on RA6/OSC2/CLKOUT pin, I/O function on RA7/OSC1/CLKIN)
#pragma config WDTE     = OFF               // Watchdog Timer Enable bit (WDT disabled and can be enabled by SWDTEN bit of the WDTCON register)
#pragma config PWRTE    = OFF               // Power-up Timer Enable bit (PWRT disabled)
#pragma config MCLRE    = ON                // 外部リセット/汎用入力の選択で外部リセット有効化 RE3/MCLR pin function select bit (RE3/MCLR pin function is MCLR)
#pragma config CP       = OFF               // Code Protection bit (Program memory code protection is disabled)
#pragma config CPD      = OFF               // Data Code Protection bit (Data memory code protection is disabled)
#pragma config BOREN    = OFF               // Brown Out Reset Selection bits (BOR disabled)
#pragma config IESO     = ON                // オシレータのスタートアップとコード実行の潜在時間を最小化Internal External Switchover bit (Internal/External Switchover mode is enabled)
#pragma config FCMEN    = ON                // オシレータの故障の場合さえ、デバイスが作動し続けるのを許容するように設計Fail-Safe Clock Monitor Enabled bit (Fail-Safe Clock Monitor is enabled)
#pragma config LVP      = OFF               // Low Voltage Programming Enable bit (RB3 pin has digital I/O, HV on MCLR must be used for programming)

// CONFIG2
#pragma config BOR4V    = BOR40V            // リセットしきい値を4V Brown-out Reset Selection bit (Brown-out Reset set to 4.0V)
#pragma config WRT      = OFF               // Flash Program Memory Self Write Enable bits (Write protection off)

BORとは: 事故時などに信号が不安定になるとマイコンによくありません。そこで、一定のしきい値を設定し、4Vなら4V±0.2Vを下回るとリセットを書ける機能を設定します。そのような機能をブラウンアウトリセット機能(BOR)と呼びます。

main関数

I/Oポートを設定します。クロック周期設定 I/Oポートの指定は、init関数の中で行っています。関数の使い方が解らなかったので、0~9999まで数え上げさせて時間を作る雑なコードになりました。すべてPortAの8pinすべて出力にしています。RA2=1;は、RA2が割り当てられたpinに電圧をかける指令です。

void init(){
    OSCCON = 0b01110000; //8MHz
    ANSEL = 0b00000000; //
    TRISA = 0b00000000;//
    TRISB = 0b00000000;
    TRISC = 0x00;
    PORTA = 0b00000000;
}

void main(void){
    int i=0;
    init();
   
    while(1){
        
        i=0;
        while (i <10000){
            i++;
        }
        RA2 = 1;
        RA3 = 0;
        
        i=0;
        while (i <10000){
            i++;
        }
        RA2 = 0;
        RA3 = 1;
    } 
}
portA

書き込み

繋いだらメニューバーの下の△をクリックします。

警告がでました。C:\Program Files (x86)\Microchip\xc8\v2.05\pic\includeやC:\Program Files (x86)\Microchip\xc8\v2.05\pic\include\c99に入っているヘッダファイルを開きます。私の場合はなぜかここにありましたが、多くの場合はProgram Files (x86)じゃなくProgram Filesだと思います。 C標準ライブラリ -PICマイコンによる開発手法

なんだかよく分からないままひたすら関係ありそうなヘッダファイルを開いて確認していくと、xc.hがインクルードしているalloca.hが入っていない。

MPLAB X IDE v5.xxの注意点 -サヌキテックネット にしたがって、projectのプロパティから、XC8 Global OptionsでC99をC90に変更するとビルドに成功しました。警告は無視。

BUILD SUCCESSFUL (total time: 6s)

書き込んでいきます。

電源供給するように設定します(私のライターは安く買ったからか電源を供給する機能がうまくいきませんでした)。マイコンは電源がないと動作しませんので、ライターか回路から電源を供給して下さい。 project上右クリックでpropaties、hardware toolからPICkit3を選択、pickit3からpowerで、チェックボックスにチェック。マイコンのデータシートにWide Operating Voltage Range (2.0V-5.5V)とあったので、5.0Vの電圧を供給します。

電源がない場合はコンピュータがデバイスを見つけられない、とか、以下のようなメッセージが表示されます。

PICkit 3 is trying to supply 5.250000 volts from the USB port, but the target VDD is measured to be 4.875000 volts. This could be due to the USB port power capabilities or the target circuitry affecting the measured VDD.

私はライターが壊れていたので、無理やり外部から接続できるようにしました。

Programming...

The following memory area(s) will be programmed:
program memory: start address = 0x0, end address = 0xfff
configuration memory
Programming/Verify complete

ライターの画像です。Vddに電源+、VssにGNDを接続します。(Vssは本来電源がマイナスになり得る場合のマイナス側です。)ライター付属の紙より転載。

PICkit3

動作確認

チカチカした。

Lチカ
Lチカ

雑談

MCCという便利機能があるんですが、Tools/Embedded/MPLAB Code Configuratorで見たところ、最新版でもサポートしているデバイスが少なく今回使用したPIC16F886もサポートされていませんでした。悲しい。

参考

Blumaという使いやすいCSSワークフレームがあると聞いて使ってみました。

Webアプリを作るには画面表示も必要。使いやすいCSSワークフレームがあると聞いて使ってみました。

目次

  • 目的
  • bluma
  • 作ったもの(例)
  • おまけEmmet
  • 参考

目的

Railsでwebアプリを作ろうと思っているんですが、その後のビューを作成することが目的です。グラフを表示するのが機能のメインなんですが、使いやすいCSSワークフレームがあると聞いたので周りのデザインを先に作ってしまおうと思います。 構成は以下のようになっています。

構成

  • top画面
  • アプリ紹介画面
  • 詳細ページ1
  • 詳細ページ2
  • 詳細ページ3

Bluma

Bluamaは、FlexboxをベースにしたフリーのCSSフレームワークです。下の公式ページからダウンロード出来ますが、CDNから利用すればダウンロードする必要がありません。 CDNとは、デジタルコンテンツをネットで大量に配信するためのネットワークの事です。これを利用するとURLを貼ることでダウンロードしなくてもBlumaを利用できます

BLUMA

ビューをHTMLとCSSで書いていきます(おまけも参照)。 Blumaを使用する準備は、該当のURLを貼るだけです。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.1.2/css/bulma.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<a href="#" >HELLO!</a>
<a href="#" class="button">HELLO!</a>
<a href="#" class="button is-primary is-large">HELLO!</a>
<a href="#" class="button is-primary is-medium">HELLO!</a>
<a href="#" class="button is-primary is-small">HELLO!</a>
<a href="#" class="button is-info is-small">HELLO!</a>
<a href="#" class="button is-success is-small">HELLO!</a>
<a href="#" class="button is-warning is-small">HELLO!</a>
<a href="#" class="button is-danger is-small">HELLO!</a>
<a href="#" class="button is-white is-small">HELLO!</a>
<a href="#" class="button is-black is-small">HELLO!</a>
Bluma test: button color size

classを割り当てることで、ボタンなどを表示できます。色や大きさはis-large,is-primaryなどで指定できます。

   <div class="columns">
        <div class="column">
            <div style="background-color: #42afe3">
            左サイド
            </div>
        </div>
        <div class="column">
            <div style="background-color: #f68b39">
            まんなか
            </div>
        </div>
        <div class="column">
            <div style="background-color: #fce473">
            右サイド
            </div>
        </div>
        <div class="column">
            <div style="background-color: #fce473">
            追加
            </div>
        </div>
    </div>
Bluma test: column

columsで囲ったcolumnは均等に並べられます。

    <div class="columns">
      <div class="column is-2">
        <div style="background-color: #f68b39">
          ウィンドウ幅1/12サイズの要素
        </div>
      </div>
      <div class="column is-4">
        <div style="background-color: #fce473">
          ウィンドウ幅2/12サイズの要素
        </div>
      </div>
    </div>
    <div class="columns">
      <div class="column is-6">
        <div style="background-color: #42afe3">
          ウィンドウ幅6/12サイズの要素
        </div>
      </div>
    </div>

    <div class="columns">
      <div class="column is-4">
        <div style="background-color: #f68b39">
          ウィンドウ幅4/12サイズの要素
        </div>
      </div>
      <div class="column is-4">
        <div style="background-color: #fce473">
          ウィンドウ幅4/12サイズの要素
        </div>
      </div>
    </div>
    <div class="columns">
      <div class="column is-4">
        <div style="background-color: #42afe3">
          ウィンドウ幅4/12サイズの要素
        </div>
      </div>
    </div>
Bluma test: column x/12

columnに大きさの指定をしてみます。この場合、左から12に対していくつの割合なのかを指定できます。うまく並ばなかったので端までは並ばないかもしれません。下のように分数で与えるとより細かく指定できます。

   <div class="columns">
      <div class="column is-two-thirds">
        <div style="background-color: #f68b39">
          ウィンドウ幅2/3サイズの要素
        </div>
      </div>
      <div class="column is-one-thirds">
        <div style="background-color: #fce473">
          ウィンドウ幅1/3サイズの要素
        </div>
      </div>
    </div>
    <div class="columns">
      <div class="column is-one-quarter">
        <div style="background-color: #42afe3">
          ウィンドウ幅1/4サイズの要素
        </div>
      </div>
      <div class="column is-half">
        <div style="background-color: #f68b39">
          ウィンドウ幅1/2サイズの要素
        </div>
      </div>
    </div>
Bluma test: column x/y

作った物(例)

bluma以外のCSSの色はこちらを見ました。=> HTML,CSS ホームページの背景色や文字色 (フォントカラー) -ホームページ 作成、運営管理ガイド

全体的にダサいのはフレームワークが悪いのではなくて(略)

例 アプリ紹介画面
例 詳細画面

グラフはcanvas.jsで書きました。今回はメインと離れるので割愛します。

<header class="nav">
      <div class="nav-left">
          <span class="nav-item">
              <i class="fas fa-bolt"></i>APP NAME
          </span>
      </div>
      <section class="level">
            <div class="level-left">
            </div>
            <div class="level-right">
                <div class="level-item tabs">
                <ul>
                    <li><a>TOP</a></li>
                    <li  class="is-active"><a>About</a></li>
                    <li><a>Daily</a></li>
                    <li><a>Weekly</a></li>
                    <li><a>Mounthly</a></li>
                    </ul>
                </div>
            </div>
            
        </section>
  </header>

navコンポーネントでナビゲーションとして仕様したい要素を囲う事でnavとして使用可能になります。 は実際に表示されるものをしていするときに使用すると、上下方向をちょうど良くしてくれます。

levelは水平に並べるコンポーネントで、tabに内包されたlistがタブとして表示されます。例の右上の部分になります。 is-activeは現在表示しているものの色を変えるなどするためのものです。JavaScriptは使っていないため、動くわけではありません。

<span class="nav-item">
            <p>ログイン</p>
            </span>

control has-addonsは調節機能であり、今回は隣のボタンと連なって見えるように調節してくれます。 場所はleft、rightなどで調節できます。
"fa fa-〜"はアイコンを表示してくれます。Font Awesome に一覧がのっています。 これもheadでURLを指定すればすぐに使えます。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">

main

HEROエリアには最も目立たせたいものを配置します。

    <div class="hero is-success is-small">
        <div class="hero-body">
            <div class="container">
                <h1 class="title"> About</h1>
                <h2 class="subtitle"> </h2>
            </div>
        </div>
    </div>

"hero-head"はヒーローエリアのトップに、 "hero-body"はヒーローエリアの中心に、 "hero-foot"はヒーローエリアの底部に表示されるエリアです。"hero-body"の主コンテンツは垂直方向にセンタリングされます。

"is-bold"モディファイアーはヒーローエリアの背景色をグラデーションにします。"container"モディファイアーは内包するコンテンツを水平方向にセンタリングします。 heroを変な場所に置くと、clumonに組み込まれつつ大きく表示したりするのでレイアウトがおかしくなります。

<main class="columns">
    <div class="submenu column is-2 is-large">
              
    </div>

    <div class="column is-8"> 
          <div class="box media">
            <figure class="media-left">
                <i class="fab fa-earlybirds"></i>
            </figure>
            <div class="media-content">
                <div class="content">
                    <p><strong>24時間監視</strong><br>
                      サーバーが24時間常に監視し続けます。
                    </p>
                </div>
            </div>
          </div>  

          <div class="box media">
            <!--同様-->
          </div>  

          <div class="box media">
             <!--同様-->       
          </div>   
                  
        </div>      
    </div>        
  </main>

boxは四角で囲うためのものです。clumns内部のclass="submenu column is-2 is-large",class="column is-8"がそれぞれ指定した大きさで並んでいます。class="column is-8"内部でmediaが縦に並んでいます。

<figure class="media-left">
      <p class="image is-64x64">
         <img src="http://placehold.it/128x128">
      </p>
</figure>

mediaはtwitterのようなメディアをイメージしたものです。アイコンに画像を入れるとそれっぽくなりますが、使いませんでした。

<main class="columns">
         <div class="submenu column is-2">
            
            <aside class="box">
                <p class="menu-label">
                    datas(average)
                </p>
                <ul class="menu-list">
                    <li>monday</li>
                    <li>Tuesday</li>
                    <li>Wednesday</li>
                    <li>Thursday</li>
                    <li>Friday</li>
                    <li>Saturday</li>
                    <li>Sunday</li>   
                </ul>
            </aside>
        </div>
        
        <div class="submenu column is-8">
          <aside class="box">
              graph             
              <canvas id="canvas2" height="300" width="300"></canvas>
          </aside>
        </div>

    </main>

menuは縦に並べる要素で、menu-listのlistが並びます。labelはキーワードなど、分類を書く部分です。

    <footer class="footer">
        <div class="container">
            <div class="content has-text-centered">
            <i class="far fa-copyright"></i> Copyright 2019 Inc.Monsters
            </div>
        </div>
    </footer>

footerは画面下部にかかれる要素です。特に書くことがありませんが、一応copyrightを書いておきます。「著作権はこちら、使うときはここに言って」という事です。

おまけ Emmet

HTMLをまずは書くわけですが、便利な機能を見つけたので使います。 VScodeで拡張機能のEmmetをインストールし、左下の歯車をクリックして設定を開きます。ここで、 下記を追加します。

"emmet.triggerExpansionOnTab": true,
    "emmet.variables":{
        "lang": "ja"
    }

設定した後で、HTMLファイルを作成して!でTabを押すと

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

これが一気に表示されます。素晴らしい。

コマンド一覧 =>Emmet Documentation

参考

CDNについて

Bulmaについて

Emmetについて

ラズパイ上でruby on Railsをやるのが楽なのでは?と思って環境構築したときに詰まったことを書きます。

IoT的なシステムを作る上で、センサ情報をラズパイが取得し、webアプリへ送信するものを作るならラズパイ上でruby on Railsをやるのが楽なのでは?と思って環境構築したときに詰まったことを書きます。

目次

  • 目的
  • 環境構築
  • 参考

目的

ラズパイ上でRuby on Rails環境を作ります。現在の環境は以下。

  • raspberry pi 3 B +
  • ubuntu MATE

Railsとは

Ruby on RailsはRubyで書かれたwebアプリケーションフレームワークであり、webアプリケーションを他のフレームワークよりも少ないコードでかけるように設計されています。 Model View Controllerアーキテクチャに基づいて構築されています。

Model View Controller
  • model:処理
  • view:画面表示部分
  • controller:modelとviewをつなぐ処理 modelとviewへの命令に変換する

modelとviewの中間処理をcontrollerに書く、というような思想がModel View Controllerです。図はwikipediaを参考にしました。

環境構築

普段通りアップデートを確認した後、以下のコマンドを打っていきます。先にnode.jsをインストールしているのは、これがないとjavascriptがないと怒られるからだそうです。

$sudo apt-get install nodejs 

次に参考で見たのでは以下のようにやっていましたが、rbenv install -listで入れたいバージョンが出てこないエラーが発生しました。

$sudo apt-get install rbenv ruby-build 

理由についていろいろと調べたところ、知人によってsudoでrbenvを入れたせいでroot権限が付与されたのではないかと指摘されますた。 ですので、試行錯誤の結果、gitからcloneでインストールしたら成功しました。APPはお好きな名前に変更してください。

$sudo rm -rf ~/.rbenv
$git clone https://github.com/sstephenson/rbenv.git ~/.rbenv
$git clone https://github.com/sstephenson/ruby-build.git ~/.rbenv/plugins/ruby-build //続いているので注意
$rbenv install -l 
$rbenv install 2.5.0
$rbenv rehash
$sudo reboot
$gem install bundler
$gem install rails
$ sudo apt-get install libsqlite3-dev
$ sudo reboot
$ mkdir rails
$ cd rails
$ rails new APP —skip-bundle //APPアプリを作成。
$ cd APP

ここで、ラズパイと相性が悪い部分があるので、エラー回避のため、config/boot.rbの以下を削除(コメントアウト)します。

#require ‘bootsnap/setup’

ラズパイの接続状況を調べて、以下のように書きます。右上の有線・無線マークの接続情報から見られます。

$ rails s -b (ラズパイの現在のPIアドレス) -d

これにて成功です。http://(ラズパイのIPアドレス):3000 を開いて確認します。

Railsのhello

成功ではありますが、chromium-driver-helperがサポート終了するらしいので、webdriberに移行して欲しいというメッセージが現れます。

+--------------------------------------------------------------------+
 |                                                                    |
 |  NOTICE: chromedriver-helper is deprecated after 2019-03-31.       |
 |                                                                    |
 |  Please update to use the 'webdrivers' gem instead.                |
 |  See https://github.com/flavorjones/chromedriver-helper/issues/83  |
 |                                                                    |
 +--------------------------------------------------------------------+

rails/Gemfileを以下のように変更して、

group :test do
 # Adds support for Capybara system testing and selenium driver
 gem 'capybara', '>= 2.15'
 gem 'selenium-webdriver'
 # Easy installation and use of chromedriver to run system tests with Chrome
 gem 'chromedriver-helper' => gem 'webdrivers'  //ここ
end
$bundle install

同様にサーバーを立てて動作を確認しましょう。 アプリケーションを作るたびにこの設定をした方がいいと思います。このときもconfig/boot.rbの設定変更を忘れずに。

雑記

以前windowsに入れたときにめちゃくちゃ大変だった記憶があります。rubyのバージョンが合わないとすぐエラー!要注意。

参考