コンテンツへスキップ

マイクロマウス大会へ向けて動いていきたいと思います!今回はハードを作成しました。

マイクロマウス大会へ向けて動いていきたいと思います!

今回はハードを作成しました。special thanks for Furuta!!!

目次

  • マイクロマウスとは
  • 機能
  • 回路 
  • PCB
  • 部品
  • 基板注文
  • 完成
  • 雑記

マイクロマウスとは

迷路を自律走行ロボットが探索してゴールを目指す大会です。ゴールできたら、経過時間を競います。

公式:マイクロマウス2019 -公共財団ニューテクノロジー振興財団

機能

機能は以下のようになっています。EEPROMとは 不揮発性メモリの一種で 、マイコンに書き込んだデータを記憶してくれる物です。

  • 電源 12V-5V-3.3V
  • EEPROM
  • LED
  • スイッチ入力
  • 距離センサ 発光/ 受光
  • モータドライブ

回路

回路図はこちらです。お好きなマイコンをお使いください。

PCB

上の回路をKiCADでPCBデータにしました。

部品

多くは秋月電子へのリンクになっています。部品数は確認しましたが正確ではないかも知れませんのでご了承ください。

機能部品名個数備考
ICソケット28pin1
ICソケット8pin1
マイコンLPC1
モータードライバーa498821
XH3pinベース12
タクトスイッチ4
コンデンサ0.1uF6
EEPROM 24LC64-I/P1
LED3
RLED用3305
3端子レギュレータ12V-5V78051
3端子レギュレータ5V-3.3VLP29501
C100uF5
赤外線LED33
npnトランジスタ8050SL-C-T92-K3
R1k8
R10k14
R474
赤外線受光NJL7302L44
C0.01uF4
ステッピングモーター21
PH6pinハウジング 2
C220uF2
XH6pinハウジング2
XH6pinベース2
XH4pinハウジング2
XH4pinベース2
ピンヘッダ2pin6
VHベース2pin1
バッテリ3S12V 1000mA1+予備
鉄板底板15
スペーサー30mm2
スペーサー20mm2
スペーサー25mm4
スペーサー10mm 4
プラねじ とナットM34
熱収縮チューブ Φ5センサ用カバー1
R3.3k2
トグルスイッチ16
PHハウジング6pinモータ接続用2
PH圧着端子8
XH圧着端子32

チップ抵抗の読み方

  1. 解説動画です。https://www.youtube.com/watch?v=5CmjB4WF5XA
  2. ピンヘッドでも可
  3. 貰った物なのでわからないですが、 これとか。受光素子が反応する周波数を確認してください。
  4. これも貰った物なので、たぶんこれであろうと思うものを記載しました
  5. 貰ったものです。ミスミなどで買ったと思われます。
  6. カバーを取り外しました。

基板注文

注文したのはelecrowさんです。

注文方法に関しては過去のこちらの記事や他の方のブログなどをご覧ください。=>KiCADでプリント基板を作ってElecrowさんに注文

完成品

完成!電圧も大丈夫そうです。マウスのサイズになりました。

雑記

次からは動作確認をしています。

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について

Bumaについて

Emmetについて