「Visuino」タグアーカイブ

Visuinoで小型有機ELディスプレイ表示テスト

SparkFun マイクロOLED(有機EL)モジュールを用いてビットマップ画像の目のアニメーションを作ってみました。
マイコンプログラミングにはVisuinoを使用しました。

構成

部品

  • マイコンArduino Uno
  • SparkFun マイクロOLEDモジュール

SparkFun マイクロOLEDモジュールの設定

本モジュールは64×48 ピクセルのOLED ディスプレイ SSD1306搭載しており、通信方式はI2CとSPIのいずれかを選択できます。

詳細は以下
 ・チュートリアル
 ・回路図

基板上のジャンパーの接続によって各種設定変更可能です。 

 

 

 

 

 

 

ここでは通信方式をI2C (BS1:1, BS2:0)、I2Cアドレスを0x3C (D/C:0)としました。

Arduino用ビジュアルプログラミングソフトVisuino

ここでは以前紹介したVisuinoを用いてOLEDモジュール制御プログラムを生成します。

Visuinoで小型有機ELディスプレイ表示テスト

Visuinoソフトは以下よりDLし解凍、インストールできます!
 https://www.visuino.com/download

インストール後Visuinoを起動すると初めにRegistration Keyを聞かれます。

以下で30日間の無料トライアル版か製品版ライセンスを購入しKeyをゲットし入力してください。
 https://www.visuino.com/orders

ライセンスはHacksterのポイントでもゲット可能です(100pt)。

“キング・オブ・ダークネス” EVIL の鎌を自作

ちなみにArduino IDEのインストールは必須です。

Visuinoの設定

OLEDモジュールを接続したArduinoをUSBでPCに接続しVisuinoを起動します。

Visuinoが起動するとデフォルトでArduino Unoコンポーネントが配置されています。マイコンの種類を変更する際には図の矢印にあるツールアイコンをクリックしマイコンを選択します。下部ウィンドウの[Port:]で接続しているマイコンのCOMを選択します。

SSD1306コンポーネントの配置・配線

右側のコンポーネントウィンドウ [Displays]-[SSD1306 OLED Display (I2C)]を選択し配置

SSD1306コンポーネントのResetをArduinoのD4ピン、I2C OutをI2C Inに接続します。

ビットマップ画像の設定

SSD1306コンポーネントをダブルクリックしてElementsウィンドウを開きます。Elementsウィンドウ内のDraw BitmapをダブルクリックしSSD1306でビットマップ画像を取り扱えるようにします。

Draw Bitmapを選択した状態で右側のPropertiesウィンドウのBitmapの[…]をクリックしTransparency Bitmap Editorを開きます。

Transparency Bitmap Editor内の[Load]をクリックし64×48ピクセルで作成した目玉の絵をロードします。

PropertiesウィンドウのFill Colorに”tmcBlack”を選択し、Xに32、Yに20と入力し、目玉が中心に表示するようにします。またXの左にある画鋲アイコンをクリックしInteger SinkPinを選択し、X値を外部入力できるようにします。

画像のアニメーション(X軸移動)設定

右側のコンポーネントウィンドウ [Integer]-[Sine Integer Generator]を選択し配置

Sine Integer Generatorコンポーネントを選択し、PropertiesウィンドウのAmplitudeに32、Offsetに32、Frequencyに0.2と入力

Sine Integer GeneratorコンポーネントのOutをSSD1306コンポーネントのClockとXに接続します。矢印の[Send to Arduino]アイコンをクリックでマイコンにプログラムが書き込まれます。これでサイン波で生成される整数(0~64)でビットマップ画像の表示位置が変わり目玉がX軸移動します。

 

OLEDディスプレイ テスト

Home Made Garbageさん(@homemadegarbage)がシェアした投稿 –

まぶたの追加

SSD1306コンポーネントをダブルクリックしてElementsウィンドウを開きます。Elementsウィンドウ内のDraw Bitmapをダブルクリックし目玉同様にまぶた画像をロードします。
まぶたは64×48ピクセル全黒画像ピットマップです。

まぶた画像のPropertiesウィンドウのColorに”tmcNon”をFill Colorに”tmcBlack”を選択し、Xに32と入力
またYの左にある画鋲アイコンをクリックしInteger SinkPinを選択しY値を外部入力できるようにします。

目玉同様にSine Integer Generatorコンポーネントを配置し、PropertiesウィンドウのAmplitudeに24、Offsetに-4、Frequencyに0.4と入力
Sine Integer GeneratorコンポーネントのOutをSSD1306コンポーネント内まぶたビットマップのClockとYに接続します。実行すると目がパチパチします。

 

OLEDディスプレイ テスト2

Home Made Garbageさん(@homemadegarbage)がシェアした投稿 –

ビジュアルプログラミングソフトVisuinoで簡単に画像のアニメーションが作成できました!これ普通のArduino IDEではかなり大変な作業になるますから。。。

Visuinoの使用頻度 今後増えそうです!

参考

Micro OLED Display Test Using Visuino

I tried animating the eye of a bitmap image using the Micro OLED module and Visuino.

Configuration

Parts

  • Microcomputer Arduino uno

     
  • SparkFun Micro OLED module

Setting the SparkFun Micro OLED module

This module has 64×48 pixels OLED screen and an SPI or I2C interface. Details are below:

Various settings are possible by connecting the jumper on the board.

 

 

 

 

 

 

I set the communication method to I2C (BS1: 1, BS2: 0) and the I2C address to 0x3C (D/C: 0).

Setting the Visuino

Connect Arduino with OLED module to PC with USB and start Visuino.

Arduino Uno components are deployed when Visuino starts up. To change the type of microcomputer click on the tool icon and select the microcomputer. Select the COM of the microcontroller connected at [Port:].

Placement and wiring of SSD 1306 components

Select the component on the right side Window [Displays] – [SSD 1306 OLED Display (I2C)] and place it.

onnect Reset of SSD1306 component to Arduino’s D4 pin and I2C Out to I2C In.

Bitmap Image Settings

Double-click the SSD1306 component to open the Elements window. Double click on Draw Bitmap in the Elements window so that bitmap image can be handled with SSD1306.

Select the Draw Bitmap, click […] in Bitmap in the Properties window on the right to open Transparency Bitmap Editor.

Click [Load] in the Transparency Bitmap Editor and load the picture of the eyeball created with 64 x 48 pixels.

Select “tmcBlack” as the fill color in the Property window, enter 32 in X and 20 in Y so that eyeballs are displayed centrally. Also click on the thumbtack icon on the left of X to select Integer SinkPin so that X value can be entered externally.

Setting the Animation of image (X axis movement)

Select the component window on the right side [Integer] – [Sine Integer Generator] and place it.

Select Sine Integer Generator component, enter 32 in Amplitude, 32 in Offset and 0.2 in Frequency in the Properties window.

Connect Out of Sine Integer Generator component to Clock and X of SSD1306 component. The program is written to the microcomputer by clicking the [Send to Arduino]. With Position of the bitmap image changes with the integer (0 to 64) generated by the sine wave, then the eyeball moves in the X axis.

 

OLED display test

Posts shared by Home made garbage (@homemadegarbage)-

Add eyelid

Double-click the SSD1306 component to open the Elements window. Double click the Draw Bitmap in the Elements window and load the eyelid image as well as the eyeball.

Eyelids are 64 x 48 pixels all black image.

Select “tmcNon” for Color in the Properties window of eyelid image and “tmcBlack” for Fill Color and enter 32 for X Also click on the thumbtack icon on the left of Y to select Integer SinkPin so that Y value can be entered externally.

Place the Sine Integer Generator component as well as the eyeball, enter 24 in Amplitude, -4 in Offset and 0.4 in Frequency in the Properties window Connect the Out of the Sine Integer Generator component to Clock and Y of the eyelid bitmap within the SSD1306 component.

 

OLED display Test 2

Posts shared by Home made garbage (@homemadegarbage)-

You can easily create an image animation with visual programming software Visuino!This is going to be a pretty hard task in an ordinary Arduino IDE…

Frequency of use of Visuino is likely to increase in the future!

Reference

使用 visuino 的微型 oled 显示测试

我尝试使用微型 oled 模块和 visuino 对位图图像的眼睛进行动画处理

配置

部分

  • 微电脑 arduino uno

     
  • sparkfun 微型 oled 模块

设置迷你微 oled 模块

该模块有64×48 像素的 oled 屏幕和 spi 或 i2c 接口。详情如下:

通过连接电路板上的跳线, 可以进行各种设置。

 

 

 

 

 

 

我将通信方法设置为 i2c (bs1:1, bs2:0), 将 i2c 地址设置为 0x3c (dc:0)。

设置 visuino

使用 oled 模块将 arduino 连接到 pc, 并使用 usb 启动 visuino。

当 visuino 启动时, 将部署 arduino uno 组件。要更改微型计算机的类型, 请单击工具图标, 然后选择微型计算机。选择在 [端口:] 连接的微控制器的 com。

ssd 1306 组件的放置和布线

选择右侧窗口 [显示器]-[ssd 1306 oled 显示器 (i2c)] 上的组件并将其放置。

将 ssd1306 组件重置为 arduino 的 d4 引脚和 i2c 输出到 i2c in。

位图图像设置

双击 ssd1306 组件以打开 “元素” 窗口。双击 “元素” 窗口中的 “绘制位图”, 以便使用 ssd1306 处理位图图像。

选择 “绘制位图”, 单击右侧 “属性” 窗口中的 “位图” 中的 […] 以打开 “透明度位图编辑器”。

单击透明度位图编辑器中的 [加载], 并加载使用 64 x 48 像素创建的眼球的图片。

选择 “tmcblack” 作为 “属性” 窗口中的填充颜色, 在 x 中输入 32, 在 y 中输入 20, 以便集中显示眼球。还可以单击 x 左侧的图钉图标, 选择 “整数辛金”, 以便可以在外部输入 x 值。

设置图像的动画 (x 轴移动)

选择右侧 [整数]-[ine 整数生成器] 的组件窗口并将其放置。

选择 “罪整数生成器” 组件, 在 “振幅” 中输入 32, 在 “偏移” 中输入 32, 在 “属性” 窗口中的 “频率” 中输入0.2。

将精整数发生器组件连接到 ssd1306 组件的时钟和 x。该程序通过单击 [发送到 arduino] 写入微型计算机。随着正弦波生成的整数 (0 到 64) 的位图图像的位置发生变化, 则眼球将在 x 轴中移动。

 

oled 显示测试

家庭共用的垃圾 (@homemadegarbage)-

添加眼睑

双击 ssd1306 组件以打开 “元素” 窗口。双击 “元素” 窗口中的 “绘制位图”, 加载眼睑图像以及眼球。

眼睑是 64 x 48 像素的所有黑色图像。

在眼睑图像的 “属性” 窗口中选择 “颜色的 tmcnon”, 为 “填充颜色” 选择 “tmcNon”, 然后输入 32 “x 也请单击 y 左侧的缩略图图标, 选择” 整数辛克平 “, 以便可以从外部输入 y 值。

放置三线整数生成器组件以及眼球, 在 “振幅” 中输入 24, 在 “偏移” 中输入-4, 在 “属性” 窗口中输入 “频率” 0.4, 将 “从精件生成器” 组件连接到 ssd1306 组件中的时钟和眼样图 y。

 

oled 显示测试2

家庭共用的垃圾 (@homemadegarbage)-

您可以轻松地创建图像动画与可视化编程软件 visuoin!在普通的 arduino ide 中, 这将是一项相当艰巨的任务…..。

在未来使用 visuino 的频率可能会增加!

引用

Arduino用ビジュアルプログラミングソフトVisuino

hackster.ioにてLED目ん玉を公開したところVisuinoというソフトウェアを開発者の方に
薦めていただきサックリと使用してみましたので、紹介させていただきます。

ダウンロード・インストール

以下よりDLし解凍、インストールします。
 https://www.visuino.com/download

インストール後Visuinoを起動すると初めにRegistration Keyを聞かれます。以下で30日間の無料トライアル版か製品版ライセンスを購入しKeyをゲットし入力してください。
 https://www.visuino.com/orders

ちなみにArduino IDEのインストールは必須です。

基本使用法

Visuino起動するとデフォルトではArduino Unoが表示されピンに演算やデバイスなど各ガジェットを接続できるようになっています。ダブルクリックするとボード選択ウィンドウが開きその他のマイコンが各種選択できます。
Portで接続しているマイコンのCOM指定します。

マイコンアップロード方法

結線した後にマイコンに書き込む際には以下の2種の方法があるようです。

  • Send to Arduino IDEアイコンをクリックしArduino IDEを起動して通常通りアップロード
    Arduino IDEに結線に準じたプログラムが自動生成されます。
  • VisuinoのConnectボタンをクリックしてマイコンと接続しSend to Arduinoアイコンをクリックすると直接書き込めます。

動作テスト

デモプログラムで動作確認実施しました。
[File] – [Open Demo] – NeoPixelフォルダ内 NeoPixelsMeasurementBar.owarduinoを実施

これなら簡単にLEDテープも取り扱えそうです 🙂 。
今後LED目ん玉向けの機能も追加してくださるとのことなので非常に楽しみ♪
Visuinoを用いてガンガンにアニメーションする目ん玉に改良できそうです!

 

あー楽しみ♪
ビジュアルプログラミングって冗長になりそうなイメージあったけどLEDアニメーションとかには有用かもしれないなぁ

追記(17/3/17)

Visuinoで有機ELディスプレイ表示のテスト実施しました!

“キング・オブ・ダークネス” EVIL の鎌を自作