読者です 読者をやめる 読者になる 読者になる

ツタンラーメンの忘備録

プログラミングや精神疾患、ラーメンについて書いていきます。たぶん。

ProcessingでArduinoから複数の値を受けて可視化する

f:id:hungrykirby:20170521211413g:plain
f:id:hungrykirby:20170521211407g:plain

方位センサ(取得値三つ)とフォトリフレクタ4つのときの挙動比較。

import processing.serial.*;
Serial myPort;

int[][] data;

final int N = 4; //ここを受信する数値の数にする

void setup(){
  size(1000, 1000);
  myPort = new Serial(this, "COM4", 19600);
  
  data = new int[width][N];
  
  for(int i = 0; i < width; i++){
    for(int j = 0; j < N; j++){
      data[i][j] = 0;
    }
  }
}

void draw(){
  background(255);
  for(int i = 0; i < width - 1; i++){
    for(int j = 0; j <N; j++){
      strokeWeight(2);
      colorMode(HSB);
      stroke(j * 40, 255, 255);
      line(i, convToGraphPoint(data[i][j], j), i + 1, convToGraphPoint(data[i + 1][j], j));
      colorMode(RGB);
      stroke(150, 100, 100);
      strokeWeight(4);
      line(i, convToGraphPoint(0, j), i + 1, convToGraphPoint(0, j));
    }
  }
}

void serialEvent(Serial p){
  try{
    if(N + 1 == myPort.available()){
      if(myPort.read() == 'a'){
        for(int i = 0; i < width - 1; i++){
          for(int j = 0; j < N; j++){
            data[i][j] = data[i + 1][j];
          }
        }
        for(int i = 0; i < N; i++){
          data[width - 1][i] = myPort.read();
        }
      }
    }
  }
  catch(RuntimeException e) {
    
  }
}

float convToGraphPoint(int value, int j){
  return value + j*height/N + height/(N*2); //ここで適当にmapするときれいになるかな。
}

雑にFlask×chart.js

簡単と標ぼうされるものをかけ合わせて簡単に簡単に動かしたいときにコードを書いた
f:id:hungrykirby:20170521164836g:plain


基本的には
Flask and great looking charts using Chart.js – Python Tutorial
を参照したんだけど、当然のようにそのままだと動かないので、編集した。

graph.html
{% extends "layout.html" %}
{% block content %}
  <!-- Form
  ================================================== -->
<div class="form">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <canvas id="chart" width="600" height="400"></canvas>

      </div>
    </div>
  </div>
</div>
<script>
var barData = {
  labels : [{% for item in labels %}
            "{{item}}",
        {% endfor %}],
  datasets : [{
    label: 'Sample',
    backgroundColor: 'rgba(255, 99, 132, 0.2)',
    borderColor: 'rgba(255,99,132,1)',
    borderWidth:10,
    data : [{% for item in values %}
                  {{item}},
                {% endfor %}]
  }]
}
var mychart = document.getElementById("chart");
var chart = new Chart(mychart, {
  type:'bar',
  data:barData
});
</script>
{% endblock %}

メインのpythonコード、昔別のところで使っていたコードなんだけど、変える必要もないのでそのまま使った。(かなり雑である)

app.py
import os

from flask_sqlalchemy import SQLAlchemy

from datetime import datetime
import time

from flask import Flask, render_template, request, redirect, url_for
import numpy as np

app = Flask(__name__)

def picked_up():
    messages = [
        "こんにちは、あなたの名前を入力してください",
        "やあ!お名前は何ですか?",
        "あなたの名前を教えてね"
    ]
    return np.random.choice(messages)[f:id:hungrykirby:20170521164836g:plain][f:id:hungrykirby:20170521164836g:plain]

@app.route('/')
def index():
    title = "ようこそ"
    message = picked_up()
    return render_template('index.html',
                           message=message, title=title)

@app.route('/post', methods=['GET', 'POST'])
def post():
    title = "こんにちは"
    if request.method == 'POST':
        name = request.form['name']
        return render_template('post.html',
                               name=name, title=title)
    else:
        return redirect(url_for('index'))

@app.route('/display', methods=['GET', 'POST'])
def diplay():
    titile = "You can see your graph"
    if request.method == 'POST':
        labels = ["January","February","March","April","May","June","July","August"]
        values = [10,9,8,7,6,4,7,8]
        return render_template('graph.html', values=values, labels=labels)
    else:
        return "Error"


if __name__ == '__main__':
    app.run()

layout.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    {% if title %}
      <title>{{ title }}</title>
    {% else %}
      <title>Bootstrap 101 Template</title>
    {% endif %}
    <!-- Bootstrap -->
    <link href="/static/css/bootstrap.min.css" rel="stylesheet">
    <script src="/static/js/Chart.min.js"></script>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    {% block content %}{% endblock %}
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="/static/js/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="/static/js/bootstrap.min.js"></script>
  </body>
</html>

jQuery、bootstrapは適時使ってください。これもどこかのコピペ。

これで動く。あとで成形したいけど、備忘録なので次描くときでいいか。

フォトリフレクタ+Arduinoで可変抵抗をつないで分解能を上げる話

フォトリフレクタ(RPR220)を使ったときに、分解能を上げるための施策にこまった。
deviceplus.jp

基本的にはこのサイトを参照した。困ったのは512Ωの部分の最適な抵抗値。なるべく大きいrangeで取りたい。
で普通に可変抵抗(max10kΩ)を使ってみると、どうやら20kΩくらいがちょうど良さそうなことがわかった。
ふむふむ

マイコン・カーを製作してみよう(9) - ARM(Cortex-M3,M0)
ちなみに今(手元に在庫がなくて二種類使っているのだけど)LBR-127HLDも同時に使っている。

ちなみに最終的にどういう回路になったかと言うと
f:id:hungrykirby:20170522130958p:plain

適当に組んだので真逆の動きをする。いいんだけどね。変化が取れれば。

herokuコマンドを入力するとエラーが出る問題に対処する

heroku login

をするが、なぜか動かない

heroku-cli: Installing CLI... 18.53MB/18.53MB ! Heroku client internal error.
! Search for help at: https://help.heroku.com
! Or report a bug at: https://github.com/heroku/heroku/issues/new

Permission denied @ rb_sysopen .../heroku/cli/lib/node.exe

みたいなのが出る。
github.com

ここを見るとよくわからんが「消せ」と書いてあるので
/heroku
以下を消す

消せない

node.exeが起動中らしい。

コントロールパネルを見ると、node.jsが勝手に起動しているので止める。


デプロイできた!!!

pythonでherokuの/tmpファイルに一時ファイルを保管する

これに需要がなさそうなのですが、herokuは一時的にファイルを置けるんですよね。どう使い道があるのかわからないのですが…。

from flask import Flask, render_template, request, redirect, url_for
import numpy as np
import os
import glob
from werkzeug import secure_filename
import requests

ALLOWED_EXTENSIONS = set(['txt', 'pdf', 'png', 'jpg', 'jpeg', 'gif'])

app = Flask(__name__)

def allowed_file(filename):
    return '.' in filename and \
        filename.rsplit('.', 1)[1] in ALLOWED_EXTENSIONS


@app.route('/')
def index():
    title = "ようこそ"
    message = "welcome"
    return render_template('index.html',
                           message=message, title=title)

@app.route('/post', methods=['GET', 'POST'])
def post():
    title = "こんにちは"
    if request.method == 'POST':
        name = request.form['name']
        return render_template('index.html',
                               name=name, title=title)
    else:
        return redirect(url_for('index'))

@app.route('/image-upload', methods=['GET', 'POST'])
def image_post():
    if request.method == 'POST':
        f = request.files['file']
        if f and allowed_file(f.filename):
            filename = secure_filename(f.filename)
            path_2_tmp = os.path.join(os.path.dirname(os.path.abspath(__file__)), "tmp")
            print(os.path.join(path_2_tmp, filename))
            if not os.path.exists(path_2_tmp):
                os.mkdir(path_2_tmp)
            f.save(os.path.join(path_2_tmp, filename))
            return filename
        return "file req error"
    return "post error"

@app.route('/fetch-image', methods=['GET', 'POST'])
def fetch_image():
    if request.method == 'GET':
        for fn in glob.glob(os.path.join(os.getcwd(),"tmp","*")):
            print(fn)
    return "fetch image"


if __name__ == '__main__':
    app.run()

どっかで見たようなコードですがだいたいどっかのパクリです。
これを適当にhtmlファイルと画像uploadボタンを作ってください。
そのあとURLに/image-uploadや/fetch-imageすれば完了です。まじで誰が使うんだこれ…。

Arduinoからシリアル通信で送られてきた値をリアルタイムにグラフでプロットしていく

Processingでやれよ!!!!

三軸方位センサの値をプロットしています。
冷静に考えて、webとしてFlask+p5.jsとかでやったほうがきれいだったんじゃないか…。

ちなみに何回かやってわかったのですが、これやらないほうがいいです。Ctrl-cでも止まらなくなったりdelayが出たり、そもそも重くなったりするので。

#app.py
import serial
import re
import arrange

def main():
    arra = arrange.Arrange()
    with serial.Serial('COM3',9600,timeout=1) as ser:
        while True:
            c = ser.readline()
            de = c.decode('utf-8')
            m = re.match("\-*[\w]+", str(de))
            if(m != None):
                arra.fetch_three_numbers(m.group())
            else:
                pass
        ser.close()


if __name__ == "__main__":
    main()
#arrage.py
import numpy as np
from scipy import signal
from pylab import *

class Arrange:
    bwn_a = False
    ax = None
    plots_numbers = []
    def __init__(self):
        plot(500, 1) #ここいらない気がする。
        plot(500, 3)
        plot(500, 5)


    def plots(self, x, y, z):
        clf()
        axis([-500, 500, -0.5, 5.5])
        subplots_adjust(left=None, bottom=None, right=None, top=None, wspace=0.2, hspace=0.5)
        plot(x, 1, 'o')
        plot(y, 3, '*')
        plot(z, 5, 'd')
        pause(0.01)

    def fetch_three_numbers(self, matched_group):
        if matched_group == "a":
            self.bwn_a = True
            self.plots_numbers = []
        elif self.bwn_a:
            self.plots_numbers.append(matched_group)

        if len(self.plots_numbers) == 3:
            pl = self.plots_numbers
            self.plots(pl[0], pl[1], pl[2])
            self.bwn_a = False
            print(pl)

ちなみにArduinoのコード

#include <Wire.h>
#include "skHMC5883L.h"
#define SENSOR_ADRS     0x1E
skHMC5883L  Compass(SENSOR_ADRS);

void setup() {
  int ans;
  Serial.begin(9600);
  Wire.begin();
  ans = Compass.Begin() ;
}

void loop() {
  // put your main code here, to run repeatedly:
  int ans;
  float deg;
  ans = Compass.SingleRead(&deg,6.6);
  if(ans == 0){
    Serial.println("a");
    Serial.println(RowX);
    Serial.println(RowY);
    Serial.println(RowZ);
  }else Serial.println("NG");
  delay(1000);
}

mySQLで新たに作ったユーザでデータベースが作れなかった。

mysql -u root -p

でrootに入る。この状態で作成したユーザに権限を付与しないとエラーになる(なった)

grant all on *.* to 'user'@'localhost';

これするといい!