「技術」カテゴリーアーカイブ

【ラズパイ】スイッチを設置して使用できるようにする。

次は、スイッチを繋げてみます。

購入したのはスイッチが12個付いている簡易的なキットです。

この基板に部品を設置して、はんだ付けします。

ダイオード。

向きに注意。

向きを間違えると動きません。

黒い印が付いている方がカソードになります。

基板に向きがきちんと書かれているので、それに従って配置します。

抵抗。

で、これがスイッチ。

はんだ付け完了。

ブレッドボードに設置。

さらに配線も接続します。

もうこれ以上部品を設置するのは不可能ですね。

ちなみに、配線は以下の様になっています。

12SWとあるのが、今回追加したスイッチモジュールです。

スイッチが押されたかの確認は、

X=LOW、Y=HIGH、Z=HIGH

X=HIGH、Y=LOW、Z=HIGH

X=HIGH、Y=HIGH、Z=LOW

の状態を繰り返し、そのときのA,B,C,Dの出力状態(押されたときにLOWになる)を確認します。

XYZとABCDの組み合わせはこんな感じです。

回路はこんな感じ。

これを見たところ、おそらく、スイッチを押していないときは、▼から入ってきた入力がそのままA~Dに流れていく(HIGH)のでしょう。

そして、X~YがLOWの時にスイッチを押すと、▼の入力がスイッチの方へ流れていくので、その結果、A~DがLOWとなるのでは、と思います。

まぁ、この回路を流用すれば、自分で部品を調達してスイッチ回路を組むことも可能でしょう。

次回はこれを動かすためのプログラムコードを作成します。

【北海道大戦】マップと都市をリンクする

前回までの状況はこちら。

最新ソースはこちら(gitHub)

https://github.com/takishita2nd/HokkaidoWar

前回はマップ同士のリンクを作成しました。

ここ、もうちょっと改良します。

すぐ終わります。

マップのプロパティにUp、Down、Left、Rightを追加してそこから隣接するマップを取得させましょう。

    class Map
    {
        public Map Up { 
            get {
                var field = Singleton.GetFieldMap();
                return field.GetMap(_x, _y - 1);
            }
        }

        public Map Down
        {
            get
            {
                var field = Singleton.GetFieldMap();
                return field.GetMap(_x, _y + 1);
            }
        }

        public Map Left
        {
            get
            {
                var field = Singleton.GetFieldMap();
                return field.GetMap(_x - 1, _y);
            }
        }

        public Map Right
        {
            get
            {
                var field = Singleton.GetFieldMap();
                return field.GetMap(_x + 1, _y);
            }
        }
    class FieldMap
    {
        public Map GetMap(int x, int y)
        {
            if(x < 0 || x >= MaxX || y < 0 || y >= MaxY)
            {
                return null;
            }
            else
            {
                return _map[x, y];
            }
        }

これでだいぶ扱いやすくなったはず。

動作結果は前回と同じ。

で、ここからが今回の本題。

マップと都市のリンクを作成します。

マップから所属する都市を取得できるようにします。

まぁ、やっていることは簡単ですが。

    class Map
    {
        public void SetCity(City city)
        {
            _city = city;
        }

        public City GetCity()
        {
            return _city;
        }
    class City
    {
        public City(string name, Point[] points, int population)
        {
            _name = name;
            _population = population;
            _maps = new List<Map>();
            var r = Singleton.GetRandom();
            _color = new asd.Color((byte)r.Next(0, 255), (byte)r.Next(0, 255), (byte)r.Next(0, 255));

            var fieldMap = Singleton.GetFieldMap();

            foreach (var p in points)
            {
                Map m = new Map(p.x, p.y, _color);
                m.SetCity(this);
                _maps.Add(m);
                fieldMap.SetMap(m);
            }
        }

マップに都市を設定する所を追加、マップの生成と一緒に自分自身のオブジェクトを設定する、というようにしました。

で、これを検証するために、選択した都市と隣接する都市の色を変えようと思います。

        private List<City> GetLinkedCities()
        {
            List<City> cities = new List<City>();
            foreach (var m in _maps)
            {
                if (m.Up != null)
                {
                    var c = m.Up.GetCity();
                    if (cities.Contains(c) == false && c != this)
                    {
                        cities.Add(c);
                    }
                }
                if (m.Down != null)
                {
                    var c = m.Down.GetCity();
                    if (cities.Contains(c) == false && c != this)
                    {
                        cities.Add(c);
                    }
                }
                if (m.Left != null)
                {
                    var c = m.Left.GetCity();
                    if (cities.Contains(c) == false && c != this)
                    {
                        cities.Add(c);
                    }
                }
                if (m.Right != null)
                {
                    var c = m.Right.GetCity();
                    if (cities.Contains(c) == false && c != this)
                    {
                        cities.Add(c);
                    }
                }
            }
            return cities;
        }
        public void OnMouse(asd.Vector2DF pos)
        {
            foreach (var m in _maps)
            {
                if(m.IsOnMouse(pos))
                {
                    var info = Singleton.GetInfomationWindow();
                    info.ShowText(pos, _name + "\r\n" + _population.ToString());
                    // test
                    var cities = GetLinkedCities();
                    foreach (var c in cities)
                    {
                        c.linkedCity();
                    }
                }
            }
        }
        //test
        private void linkedCity()
        {
            foreach(var m in _maps)
            {
                m.linkedMap();
            }
        }
    class HokkaidoWar
    {
        public void Run()
        {
            while (asd.Engine.DoEvents())
            {
                FieldMap fieldMap = Singleton.GetFieldMap();
                fieldMap.unlinkMap();

List.Contains(Obj)を使用すると、Listの中にObjと同じ物があるかを確認できます。

自分の都市の隣接する都市なので、自分自身は含めていません。

実行結果はこうなりました。

【Laravel】【ダイエット支援】グラフをもっと簡潔に【完成】

前回までの状況はこちら。

最新ソースはこちら(gitHub)

https://github.com/takishita2nd/diet-mng

このプログラムはこちらのリンク先で運用中です。

https://taki-lab.site:8443

前回からあれこれ考えたのですが、

3つのデータを1つのグラフに表示させようというのがよろしくないという結論になりました。

リンクのクリックでグラフを体重、体脂肪率、BMIで切り替えるようにしました。

たいした修正では無いので、ソースは書きませんが、gitHubのソースコードを参照してもらえればと思います。

ついでに軸の設定も変えました。(最大値と最小値)

かなりスッキリして見やすくなったかな。

やっぱりグラフは多くて2つまでかな、と思います。

さて、体重記録機能はほぼ完了しました。

次は・・・食事記録かな・・・。

【ラズパイ】【GLCD】倉田ましろを書いてみる。

こちらのネームクリップの絵がシンプルなデザインなので、この絵を表示させてみたいと思いました。

https://bang-dream.com/goods/1883

InkScapeで画像からトレースして線を書いて、

ドット絵ナニカのサイトで64×64ドットの画像に変換してExcelで出力。

http://dot-e-nanika.com

これを8×8に区分けして、16進数のドットパターンデータに変換(手作業)。

Array = [
    [
        0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
        0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
        0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x80,
        0x40, 0x40, 0x20, 0x20, 0x10, 0x10, 0x20, 0x20,
        0x40, 0x80, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
        0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
        0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
        0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00
    ],
    [
        0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
        0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x80, 0x40,
        0x20, 0x10, 0x08, 0x04, 0x02, 0x82, 0x81, 0x40,
        0x40, 0x20, 0x20, 0x10, 0x08, 0x04, 0x03, 0x00,
        0x80, 0x41, 0x3B, 0x20, 0x20, 0x20, 0x20, 0x40,
        0x40, 0x40, 0x40, 0x80, 0x80, 0x00, 0x00, 0x00,
        0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
        0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
    ],
    [
def drowMashiro():
    for page in range(8):
        for addr in range(64):
            if addr < 32:
                SelectIC(1)
                SetPage(page)
                SetAddress(addr + 32)
            else:
                SelectIC(2)
                SetPage(page)
                SetAddress(addr - 32)
            WriteData(mashiro.Array[page][addr])

で、表示できました。

なかなか良い感じに映っております。

【北海道大戦】マップデータを管理する

前回までの状況はこちら。

最新ソースはこちら(gitHub)

https://github.com/takishita2nd/HokkaidoWar

さて、現状マップデータの管理は、都市オブジェクトの中に所属するマップが格納されていると言う状態で、マップ同士の横のつながりがありません。

このままでは「隣接するマップ」を取り出すことが出来ないので、整理して管理したいと思います。

マップデータは横44マス、縦35マスで構成されているので、二次元配列にするのが最適でしょう。

なので、このデータを管理するクラスを作成し、シングルトンで使用します。

    class FieldMap
    {
        public int MaxX { get { return 44; } }
        public int MaxY { get { return 35; } }

        private Map[,] _map;
        public FieldMap()
        {
            _map = new Map[44, 35];
        }

        public Map GetMap(int x, int y)
        {
            return _map[x, y];
        }

        public void SetMap(Map map)
        {
            _map[map.X, map.Y] = map;
        }

    class Singleton
    {
        private static FieldMap _map = null;
        public static FieldMap GetFieldMap()
        {
            if (_map == null)
            {
                _map = new FieldMap();
            }
            return _map;
        }

で、都市オブジェクトからマップオブジェクトを作成する際に、このクラスにマップオブジェクトも保持させます。

        public City(string name, Point[] points, int population)
        {
            _name = name;
            _population = population;
            _maps = new List<Map>();
            var r = Singleton.GetRandom();
            _color = new asd.Color((byte)r.Next(0, 255), (byte)r.Next(0, 255), (byte)r.Next(0, 255));

            var fieldMap = Singleton.GetFieldMap();

            foreach (var p in points)
            {
                Map m = new Map(p.x, p.y, _color);
                _maps.Add(m);
                fieldMap.SetMap(m);
            }
        }

たぶん、これだけでOKのはずなので、うまく管理出来ているか、テストコードで確認したいと思います。

マウスカーソルのあるマップの隣にあるマップの色を変化させます。

    class City
    {
        public void OnMouse(asd.Vector2DF pos)
        {
            var fieldMap = Singleton.GetFieldMap();
            foreach (var m in _maps)
            {
                if(m.IsOnMouse(pos))
                {
                    var info = Singleton.GetInfomationWindow();
                    info.ShowText(pos, _name + "\r\n" + _population.ToString());
                    // test
                    fieldMap.onMouse(m);
                }
            }
        }
    class FieldMap
    {
        // Test
        public void onMouse(Map map)
        {
            for(int x = 0; x < MaxX; x++)
            {
                for(int y = 0; y < MaxY; y++)
                {
                    if(_map[x,y] != null)
                    {
                        _map[x, y].unlinkedMap();
                    }
                }
            }
            if(map.X > 0)
            {
                if (_map[map.X + 1, map.Y] != null)
                {
                    _map[map.X + 1, map.Y].linkedMap();
                }
            }
            if (map.X < MaxX)
            {
                if (_map[map.X - 1, map.Y] != null)
                {
                    _map[map.X - 1, map.Y].linkedMap();
                }
            }
            if (map.Y > 0)
            {
                if (_map[map.X, map.Y - 1] != null)
                {
                    _map[map.X, map.Y - 1].linkedMap();
                }
            }
            if (map.Y < MaxY)
            {
                if (_map[map.X, map.Y + 1] != null)
                {
                    _map[map.X, map.Y + 1].linkedMap();
                }
            }
        }
    class Map
    {
        // Test
        public void linkedMap()
        {
            var changeColor = new asd.Color(200, 200, 200);
           _geometryObj.Color = changeColor;
        }

        public void unlinkedMap()
        {
            _geometryObj.Color = _color;
        }

うまくいけていると思います。

【ラズパイ】GLCDに時刻・気温・湿度・天候情報を表示する

前回までやっていたGLCDをライブラリ化して、gitHubを更新しました。

https://github.com/takishita2nd/GLCD

このGLCDライブラリを使ってGLCDに時刻、気温、湿度、天候情報を表示させたいと思います。

まず、温度、湿度を表示させるために、AM2320周りもライブラリ化しました。

import time
import smbus

i2c = smbus.SMBus(1)
address = 0x5c

def GetTemp():
    loop = True
    block = []
    while loop:
        try:
            i2c.write_i2c_block_data(address, 0x00,[])
            i2c.write_i2c_block_data(address, 0x03,[0x02, 0x02])

            time.sleep(0.05)

            block = i2c.read_i2c_block_data(address, 0, 4)
            loop = False
        except IOError:
            pass
    temp =  block[2] << 8 | block[3]
    return format(temp / 10)

def GetHum():
    loop = True
    block = []
    while loop:
        try:
            i2c.write_i2c_block_data(address, 0x00,[])
            i2c.write_i2c_block_data(address, 0x03,[0x00, 0x02])

            time.sleep(0.05)

            block = i2c.read_i2c_block_data(address, 0, 4)
            loop = False
        except IOError:
            pass
    hum =  block[2] << 8 | block[3]
    return format(hum / 10)

天候データはopenWeatherのWebAPIを利用します。

https://openweathermap.org

openWeatherにした理由は、今のGLCDが半角アスキー文字しか表示できないので、どうしても英語で表示させる必要があります。

なので、海外の英語のAPIを利用させて貰いました。

アクセス回数を絞れば無料で利用できます。

import json
import urllib.request

weather = ""
temp_min = 0
temp_max = 0
temp = 0

def RequestAPI():
    global weather
    global temp_max
    global temp_min
    global temp

    url = 'http://api.openweathermap.org/data/2.5/weather?lat=XXX&lon=XXX&units=metric&appid=XXXXXXXX'
    req = urllib.request.Request(url)
    with urllib.request.urlopen(req) as res:
        body = json.load(res)
        weather = body['weather'][0]['main']
        temp_min = body['main']['temp_min']
        temp_max = body['main']['temp_max']
        temp = body['main']['temp']

def GetWeather():
    return weather

def GetTemp():
    return temp

def GetTempMin():
    return temp_min

def GetTempMax():
    return temp_max

個人情報を含んでいるので、クエリパラメータは書き換えてあります。

これらを使って、GLCDに表示させます。

import RPi.GPIO as GPIO
import time
import datetime
import calendar
import GLCD
import AM2320
import Weather


def __main__():
    GLCD.PinsInit(20, 7, 8, 9, 18, 19, 10, 11, 12, 13, 14, 15, 16, 17)
    GLCD.GLCDInit()
    GLCD.GLCDDisplayClear()

    roop = 10 * 60 * 60
    try:
        while True:
            if roop >= 10 * 60 * 60:
                Weather.RequestAPI()
                weather = Weather.GetWeather()
                temp = Weather.GetTemp()
                roop = 0

            GLCD.GLCDPuts(1, 0, "Date :")
            GLCD.GLCDPuts(10, 8, datetime.datetime.now().strftime('%Y:%m:%d %A'))
            GLCD.GLCDPuts(1, 16, "Weather :")
            GLCD.GLCDPuts(10,24, weather)
            GLCD.GLCDPuts(10,32, "Temp : " + format(temp) + 'C')
            GLCD.GLCDPuts(1, 40, "Time : " + datetime.datetime.now().strftime('%H:%M:%S'))
            GLCD.GLCDPuts(1, 48, "Humidity    : " + AM2320.GetHum() + '%')
            GLCD.GLCDPuts(1, 56, "Temperature : " + AM2320.GetTemp() + 'C')

            roop += 1
            time.sleep(0.1)
    except KeyboardInterrupt:
        GLCD.GLCDDisplayClear()
        GPIO.cleanup()

__main__()

フーフーって聞こえているのは、AM2320に息を吹きかけています。

なんか良い感じだぞ。

配線の見た目をなんとかすれば、そのままインテリアとして使えるかもしれない。

【C#】【ピクロス】【ALTSEED】解析パターン14

前回までの状況はこちら。

最新ソースはこちら。(gitHub)

https://github.com/takishita2nd/Picross

次はここを処理します。

ここは縦の数字がすでに3が塗られているので、上の空いているマスに1マス、下の空いているマスに2マスを塗ることができます。

なので、赤く囲んだ部分は塗れると言うことですね。

これを実装します。

考え方としては、まだ確定していないマスと数字を抽出し、順序関係が一致かつ、数字とマスが一致した場合、そこを塗る、という感じでいきますか。

        // 解析パターンその14
        // 数字と空いているマスを照合して塗る
        private void pattern14()
        {
            // Row
            pattern14Row();
            // Col
            pattern14Col();
        }

        private void pattern14Row()
        {
            int row = 0;
            foreach (var rowlist in rowNumbers)
            {
                if (rowlist.IsAnalyzed())
                {
                    row++;
                    continue;
                }

                // 有効な数字を取り出す
                List<AnalyzeData> aData = new List<AnalyzeData>();
                foreach(var data in rowlist.AnalyzeDatas)
                {
                    if (data.IsAnalyzed())
                    {
                        continue;
                    }
                    aData.Add(data);
                }

                // 対象となるマスを抽出する
                List<List<BitmapData>> bitmapLists = extractTargetBitmapListsCol(row);
                bitmapLists.Reverse();

                // 数字とマスを照合する
                if (bitmapLists.Count != aData.Count)
                {
                    row++;
                    continue;
                }

                AnalyzeData maxData = null;
                int remi = 0;
                for(int i = 0; i < aData.Count; i++)
                {
                    if (maxData == null)
                    {
                        maxData = aData[i];
                    }
                    else
                    {
                        if(maxData.Value < aData[i].Value)
                        {
                            remi = i;
                        }
                    }
                }
                if(maxData != null)
                {
                    if (bitmapLists[remi].Count == maxData.Value)
                    {
                        foreach (var b in bitmapLists[remi])
                        {
                            b.Paint();
                        }
                        maxData.Analyzed();
                    }
                }
                row++;
            }
        }

extractTargetBitmapListsCol()の処理も少し修正しています。

実行結果はこうなりました。

ここまで複雑なロジックを組み合わせていくと、過去の問題が解けなくなっているとか十分あり得るので、その確認が大変です。

なんかもっといい確認方法を考えないといけないかもしれない。

何か方法を考えます。

【LARAVEL】【ダイエット支援】グラフのデータ間隔を指定する

前回までの状況はこちら。

最新ソースはこちら(gitHub)

https://github.com/takishita2nd/diet-mng

このプログラムはこちらのリンク先で運用中です。

https://taki-lab.site:8443

さて、こちらのグラフなんですが、

現状は最近の10日間のデータをグラフに表示させているのですが、

実際、もっと昔のデータもグラフに出したいじゃないですか。

なので、これをやります。

UIとしては、右下のところに日毎、週毎、月毎のリンクを作成して、それでグラフの切り替えをやっていこうと思います。

まずはフロント部分。

            <div class="command">
                <ul>
                    <li><a @click="onClickDay">day</a></li>
                    <li><a @click="onClickWeek">week</a></li>
                    <li><a @click="onClickMonth">month</a></li>
                </ul>
                <ul>
                    <li><a @click="onClickInput">クイック入力</a></li>
                    <li><a href="/weight">詳細</a></li>
                </ul>
            </div>

こんな感じでリンクを作ります。

フロントの処理はこちら。

        onClickDay: function() {
            this.contents.interval = 1;
            this.graphUpdate();
        },
        onClickWeek: function() {
            this.contents.interval = 7;
            this.graphUpdate();
        },
        onClickMonth: function() {
            this.contents.interval = 30;
            this.graphUpdate();
        },

クリックするリンクでデータ間隔を数字で設定して、APIのパラメータとして与えます。

ではAPIの処理。

    /**
     * グラフ用データを取得する
     */
    public function graph(Request $request)
    {
        return response()->json(['datas' => $this->weightManagement->getGraphData(Auth::user(), $request->contents["interval"])]);
    }
    public function getGraphData($user, $interval, $days = 10)
    {
        $datetimes = [];
        for($i = 0; $i < $days ; $i++) {
            $datetimes[] = date('Y-m-d', strtotime('today - '.($i * $interval).' day'));
        }

        return $user->WeightManagements()
                    ->whereIn(DB::raw('date_format(datetime, "%Y-%m-%d")'), $datetimes)
                    ->get();
    }

実行結果はこちら。

日毎

週毎

月毎

データが少ないからあまり違いがわかりませんが、表示はちゃんと変わってます。

【北海道大戦】人口データを作成・読み込ませる

前回までの状況はこちら。

最新ソースはこちら(gitHub)

https://github.com/takishita2nd/HokkaidoWar

北海道大戦では、人口がそのまま戦力値として使用したいと思っています。

なので、人口データを入力します。

こちらに掲載されている人口データを参照しました。

https://uub.jp/cty/hokkaido.html

EXCELマクロを修正して、出力Jsonに人口データを含めます。

あとは、プログラム本体側を修正し、人口データを読み込ませるようにします。

たいした修正では無いので、詳細はgitHubを参照してください。

実行結果はこんな感じになりました。

たぶん、一番人口が少ない音威子府。

そして、一番多いのは、言わずもがな札幌市。

ちなみに、一番人口の少ない市は歌志内市。

【ラズパイ】【温湿度計】温湿度計AM2320を使用する。

さて、GLCDもある程度やり尽くしたので、新しいデバイスを使用することにしました。

温湿度計AM2320です。

設置。

配線はこんな感じ。

このデバイスはI2Cバスを使用して温湿度を取得することができます。

I2Cバスってなんぞや?ということなんですが、SDL/SDAの2ピンを使ってデータを送受信できるみたいです。

具体的には、SDLにクロック信号と組み合わせてSDAにデータを送信して・・・

って難しいことを考えなくても、ラズパイにはI2Cに対応したモジュール・ライブラリがあるんです。

ちょっと設定を弄るんですけどね。

こちらのサイトを参考にさせて頂きました。

https://qiita.com/twinoze/items/c960eea23c57e342ea4b

先人の知恵を借りるのは大事。

sudo raspi-config

でコンフィグメニューが出るので、

これでI2Cが有効になります。

i2cdetect -y 1

5cと表示できれば認識しているとのことです。

が、100%認識できるかというと、大体50%ぐらいの確立で認識できないケースがありました。

バスリピータを使えば回避できるとのことですが、こう何度も発注を繰り返すと送料が高く付いてしまうので、プログラム側で回避することにしました。

このようにサンプルコードを作成しました。

import time
import smbus

i2c = smbus.SMBus(1)
address = 0x5c

loop = True
block = []
while loop:
    try:
        i2c.write_i2c_block_data(address, 0x00,[])
        i2c.write_i2c_block_data(address, 0x03,[0x00, 0x04])

        time.sleep(0.05)

        block = i2c.read_i2c_block_data(address, 0, 6)
        loop = False
    except IOError:
        pass

hum = block[2] << 8 | block[3]
temp = block[4] << 8 | block[5]

print('hum : ' + format( hum/10) + ' %Rh')
print('temp: ' + format(temp/10) + ' digC')

smbusというライブラリを使えば、I2Cバスへのアクセスが簡単になります。

タイミングチャートとか意識する必要なく、全部ライブラリでやってくれます。

やるべきことは、

  • 初期化
  • ファンクションコード0x03にスタートアドレスとレジスタ数を書き込み
  • データを読み取り

これだけ。

これはデータシートにある、

この部分に合致しています。

そして、I2Cにアクセスできない場合がある問題はtry/catch処理で回避させました。

エラーが発生したら、アクセスが成功するまで再試行を繰り返します。

これで100%アクセスに成功できます。

さて、次回はこれをライブラリ化させてGLCDに表示させましょうか。