2019年04月27日

STM32CubeIDE

先日、STからSTM32CubeIDEという純正の開発環境が発表されました。
今回はSTM32CubeIDEを紹介させて頂きます。


今までSTM32の開発環境はSW4STM32、TrueStudioといったパートナー企業が開発したIDEを使用することが一般的でした。
STM32マイコンをワンストップで開発できるようにCubeMXにTrueStudioを統合したSTM32CubeIDEが開発されました。


cubeide1.jpg


SW4STM32、TrueStudioと比べると、
CubeMXで設定して生成したプロジェクトを開発環境にインポートする手間が減っています。

早速、ダウンロードして試食してみました。



cubeide2.jpg

起動するとワークスペース選択画面がでます。
デフォルトのままで「Launch」をクリックします。

cubeide3.jpg

起動するとプロジェクトの新規作成、or 開くボタンが表示されます。

今回は最初なので新規作成から行いました。
「Start new STM32 Project」をクリックします。

cubeide4.jpg

CbeMX同様にマイコン選択画面が表示されます。
今回は手持ちのSTM32F401Nucleoを選択しました。

cubeide5.jpg

続いてプロジェクト設定画面が表示されます。
ここでC,C++で記述するのかといった設定ができます。
プロジェクト名のみ設定して「Next」をクリック。

cubeide6.jpg

コード生成に際して、CubeMXのファームバージョン等の選択画面が表示されます。
デフォルトのままで「Finish」をクリック。


cubeide7.jpg

ピンアサイン、クロック、ペリフェラル設定の画面が表示されます。
一通り設定を行ったあとはコード生成を行います。


cubeide8.jpg

Project→Generate Codeをクリックしてコードを生成します。
CubeMXがすでにインストールされている場合、CubeMXのファームパッケージのディレクトリから自動で読み込まれるようです。
CubeMXのファームパッケージがない場合や古い場合は自動でダウンロードが開始されます。


cubeide9.jpg
コードが生成された後はCtrl+Bでプロジェクトのビルドをします。
デフォルトではデバッグ用のelfファイルのみ生成されます。
必要に応じてプロジェクトウインドウのプロジェクト名を右クリックして、プロパティからbin or hexファイルを生成するように設定します。
Alt+Enterでもプロパティを表示できます。

cubeide10.jpg

C/C++ Build→Settings→MCU Post Build outputsから「Convert to binary file/ Intel Hex file」にチェックを入れます。
これでビルドするとbinファイルが生成され、STLink UtilityやCube Programmer等から書き込みできます。


またデバッグ等を行う場合もこれまでのSW4STM32やTrue studio同様です。

cubeide11.jpg

Debug Configurationからデバッグ設定を行います。

cubeide12.jpg

Search Projectからelfファイルを選択してDebugボタンを押すことでオンラインデバッグが可能です。

SW4STM32やTrueStudioの開発環境にCubeMXのプラグインを予め導入したものがSTM32CubeIDEという感じです。

cubeide13.jpg

TrueStudioの機能かもしませんがビルド後にメモリの空きスペースが表示される機能は便利だと思いました。
今回のSTM32CubeIDE発表に伴い、残念ながらSW4STM32、TrueStudioの開発環境はNRND、つまり新規開発には非推奨になっています。
今後はSTM32CubeIDEがメインになるようです。
デフォルトでbin、hexが生成されない設定や通常の書き込みボタンやツールがないようなので初心者には少し戸惑う点があると思いました。

sw4stm32.jpg


SW4STM32ではデフォルトでbinが生成され、上記のような書き込みボタンがありました。
これからの発展に期待しましょう。
posted by Crescent at 00:00| Comment(0) | 電子工作 | このブログの読者になる | 更新情報をチェックする

2019年04月20日

Digital Video Shield 応用編

今回は以前に紹介したDigital Video Shieldの応用について紹介します。

Digital Video Shieldで使用しているビデオエンジンBT816はCo-Processorエンジンを搭載しており、コマンドで内蔵Widgetsを簡単に表示することができます。

内蔵Widgetsの種類としては、テキスト、ボタン、時計、プログレスバー、スライダー、トグルボタンなどがあります。
数行のC/C++コードの記述で任意の表示をすることができます。
なお、ボタン、スライダー等の入力イベントを使用する場合はDigital Video Shieldの基板上のピンと抵抗膜方式パネルの配線、タッチパネルキャリブレーション、入力イベント設定が必要になります。


・色を変更する場合
EveSendCmd(COLOR_RGB(180, 180, 240));

・数字を表示する場合
 文字位置、フォント、フォントオプション、数字を設定します。
EveWriteNumberData(220,200,EVE_FONT_B_size6,0,120);

・時計を表示する場合
 位置、サイズ(半径)、何時何分何秒か設定します。
EveWriteClock(120,120,100,0,10,10,20,3);

・文字列を表示する場合
 文字位置、フォント、フォントオプション、文字列
EveWriteStringData(200,350,EVE_FONT_B_size6,0,"Digital Video Shield");

・ゲージを表示する場合
 位置、サイズ(半径)、最大値、最小値、現在値等を設定します。
EveWriteGauge(400,120,100,0,80,0,10,100);

・ボタン/トグルボタンを表示する場合
 文字位置、フォント、フォントオプション、文字列
EveWriteButton(550,50,80,40,EVE_FONT_B_size4,0,"ON");
EveWriteToggle(550,120,50,EVE_FONT_B_size4,0,1,"ON");

・プログレスバー
 位置、サイズ、最大、最小、現在値等を設定します。
EveWriteProgress(550,200,50,30,0,20,100);

・スピナー(処理待ち等の表示)
 位置、オプション等を設定します。
EveWriteSpinner(700, 150, 0, 0);


実際に800x480のディスプレイに表示してみました。

img4.JPG

予めよく使う表示についてWidgetsとして内蔵しているため、数行で任意の表示をすることができます。
フォントや各WidgetsはBT816内に内蔵されているため、一般的なTFT液晶をピクセル毎に処理する場合に比べてマイコンのメモリ消費を大幅に抑えることができます。
上記サンプルはArduinoUNOで実装しています。
Githubに上がっているコードをアップデートし、内蔵Widgetsのコードを追加しました。
Digital Video Shieldを活用してArduino、センサを組み合わせてIoTディスプレイといったことも簡単に実現可能です。
posted by Crescent at 00:00| Comment(0) | 電子部品 | このブログの読者になる | 更新情報をチェックする

2019年04月13日

Node-Red Dashboardテンプレート

今回はNode-Red Dashboardテンプレートの使用方法について紹介します。


Node-Red Dashboardテンプレートを使用すると標準で用意されているUIよりもリッチで多彩なUIを実現することができます。
テンプレートはAngularJSベースで実装されているため、Angularのスクリプトやhtml記述を利用することができます。
Node-Red上でmsg.payloadの値を受けて表示を変えたり、ボタンを押してmsg.payloadへ値を渡すこともできます。



■要素紹介
・ボタン

ui5-4.jpg

<md-button ng-click="send({payload: {index_name:model_name}})" layout-align="start center" >
登録
</md-button>

model_nameには送りたい情報のモデルを入れて使用する

・トグルボタン
ui5-5.jpg
<md-switch ng-model="model_enable" ng-change="send({payload: {enable:model_enable}})" layout-align="start center" >
トグルボタン1
</md-switch >

ng-changeを指定することでボタン操作でmsg.payloadに情報が渡される

・数字入力

ui5-2.jpg

<input type="number" ng-model="model_id" />


・テキスト入力

ui5-3.jpg

<input type="text" ng-model="model_name" />

・日付選択

ui5-1.jpg

<input type="date" ng-model="mydate" ng-change="send({payload: mydate})">


■msg.payload受け取り方


ui1-2.jpg


・手前のfunctionノード
var nowDate=new Date();
msg.payload=nowDate.toLocaleString("ja-JP",{hour12:false});
return msg;

・テンプレートノード
<div>
更新日時:{{msg.payload}}
</div>

ui1-1.jpg

timestampボタンを押すと更新日時が表示されます。

■mas.payload送り方

ui2-3.jpg

・テンプレートノード
<body>
 <input type="number" ng-model="model_id" />
 <input type="text" ng-model="model_name" />
 <md-button ng-click="send({payload: {index_id:model_id, index_name: model_name}})" layout-align="start center" >
 登録
 </md-button>
</body>

ui2-1.jpg


ui2-2.jpg

登録ボタンの際に、数字入力と文字入力のモデルから情報を受け取ってpayloadに格納しています。


■応用編
・表に要素を並べる例

ui3-2.jpg


・手前のfunctionノード
var source_array = new Array();
source_array.push({ enable:true, id:1, name:"Name1"});
source_array.push({ enable:false, id:2, name:"Name2"});
msg.payload = source_array;
return msg;


・テンプレートノード
<table id="table" border="1" align="center">
 <tr>
  <th>無効/有効</th>
  <th>番号</th>
  <th>名</th>
  <th>テキスト</th>
  <td align="center" colspan="2">
   ボタン
  </td>
 </tr>
<tbody>
 <tr ng-repeat="row in msg.payload" align="center">
 <td align="center">
 <md-switch tr ng-model="row.enable" ng-change="send({payload: {row}})">
   </md-switch>
 </td>
 <td>{{row.id}}</td>
 <td>{{row.name}}</td>
 <td>
 <input tr type="text" ng-model="row.text1" />
 </td>
 <td>
 <md-button tr ng-click="send({payload:[{row},{update:1,delete:0}]})">更新
 </md-button>
 </td>
 <td>
 <md-button tr ng-click="send({payload:[{row},{update:0,delete:1}]})">削除
 </md-button>
 </td>
 </tr>
</tbody>
</table>



ui3-1.jpg

受け取った配列を表として表示することができます。
配列の数に応じて表の行が自動的に変化します。
例えば、データベースやセンサから受け取った情報を並べて表示するといったことができます。
また、表の中のボタンを押すことでボタンを押した行の情報をmsg.payloadとして次のノードに渡すことができます。

Node-Red Dashboardテンプレートを使用するとこのように動的なUIを実現することができます。
今回紹介したNode-Redのフローをこちらから利用できます。


posted by Crescent at 00:00| Comment(0) | ナレッジ | このブログの読者になる | 更新情報をチェックする

2019年04月06日

シリアルBLE5モジュール

今回は簡単に使用できるBLE5のモジュールを紹介します。


Bluetoothを使った通信をマイコン等で行う場合は電波法等の関係から技適取得済モジュールを使用することが多いと思います。
一般的なBluetoothモジュールはベースとなるファームを書き換えて、任意のプログラムを書き込んで使用します。

この場合、Bluetoothモジュール単体でセンサ情報を処理して送信するといったことができるため、他のマイコン等が不要で消費電力を抑えて低コストでBluetoothセンサを実現することができます。
ただ、この方法の場合はBluetoothモジュール毎に専用の開発環境を構築する必要やファームの開発、書き込みが必要なため、敷居が高いのが問題です。


世の中にはこのような問題に対して、予めファーム書き込み済でUARTシリアルからコマンドを送ることで設定変更できるBluetoothモジュールが販売されています。
例えば、Bluetooth2.1、BLE4などではシリアルで設定変更できるモジュール(RN42,RN4020)が売られています。
ただ、UARTシリアルで設定変更できる、かつ最近のBLE5のモジュールはほとんどありませんでした。


今回紹介するのはBLE5に対応したUARTシリアルで設定変更できるBLE5のモジュール、Silicon Labs製 BGX13P です。
なお、似たシリーズにBGM13がありますが、こちらは別途ファーム書き込みが必要なタイプです。

アンテナ内蔵でUSBの幅程度のサイズです。


IMG_0042.JPG

BGX13Pは様々なプロファイルに変更可能なファームが予め書き込まれているため、STM32マイコンやArduinoといったマイコンのUARTシリアルからコマンドを送ることで簡単にBLE5通信をすることができます。
いくつかマクニカのサイトでも事例が紹介されていました。

UARTシリアルで設定変更できるため、マイコン側のファーム書き換えのみで様々な機能を実現できるというのは魅力的です。
時間を見つけて試食してみたいと思います。

posted by Crescent at 00:00| Comment(0) | 電子部品 | このブログの読者になる | 更新情報をチェックする