Androidアプリ「GUI Maker for ESP8266 & ESP32 – Python Inst. Panel」を使って、Color LEDの色を操作します。最後に載せてあるXMLをAndroidのブラウザでコピーしてアプリにペーストすることでインストールできます。
先ずは、ESP8266またはESP32のArduinoスケッチを変更します。
スケッチ全体は「Python Instrument Panel(2)Arduinoスケッチ」を見てください。最後にある process() を変更します。Androidアプリから”R:255″等の文字列を送るとColor LEDに加わる電圧が変化します(PWMですが)。
String process(String str) {
Serial.println(str);
if (str.startsWith("R:")) {
int r = str.substring(2).toInt();
analogWrite(12, r * 4);
}
else if (str.startsWith("G:")) {
int r = str.substring(2).toInt();
analogWrite(13, r * 4);
}
else if (str.startsWith("B:")) {
int r = str.substring(2).toInt();
analogWrite(14, r * 4);
}
return "";
}
では、パネルを作りましょう。
パネルに名前を付けておきます。
ExecCodeアイテムを使ってArduinoスケッチの動作を確認しておきます。
ExecCodeアイテムのPythonコードを変更して、緑色単色、青色単色にできることを確認します。
次に、パネルにTextアイテム、Sliderアイテム、InputFieldアイテム、Buttonアイテムを配置します。
赤色用SliderのScriptです。変数valueに0~1の実数が渡されるので255を掛けて0~255の整数に変換しています。赤色用InputFieldにその整数を表示しています。また”R:<整数>”形式の文字列にしてESP8266またはESP32に送信しています。
r = int(value * 255) Items[7].Text = str(r) msg = 'R:%d' % r print msg if Remote.Writer != None: Remote.Writer.WriteLine(msg) Remote.Writer.Flush()
InputFieldのScriptには数値を入力したときの処理を書いておきます。
r = int(text) Items[4].Value = r / 255
ButtonのScriptには三色のSliderの値を0にする処理を書いておきます。
Items[4].Value = 0 Items[5].Value = 0 Items[6].Value = 0
三色のSliderの値で色を変化させたいItems[10]のTextアイテムのために、Panel setup scriptに関数UpdateColor()を用意します。
各色のSliderのScriptから呼びます。
完成したパネルのPanel contextは次のようになります。Androidのブラウザでコピーして、
<?xml version="1.0" encoding="utf-8"?>
<PanelContext xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema">
<Id>a0cb7781-65d4-460d-b48b-966ade1a5244</Id>
<Name>Color LED</Name>
<ItemList>
<ItemContext>
<Id>65419806-cb21-461c-879e-bed5465dd3e2</Id>
<Index>1</Index>
<ItemType>3</ItemType>
<X>20</X>
<Y>-30</Y>
<TextW>45</TextW>
<TextH>45</TextH>
<TextText>R</TextText>
<TextFontSize>24</TextFontSize>
<TextTextAlignment>1</TextTextAlignment>
<TextF>4294967295</TextF>
<TextB>4278190335</TextB>
<TextScript />
<V1_0_5 />
</ItemContext>
<ItemContext>
<Id>99ba1caf-39f8-4216-ac4d-6d97a79a94b6</Id>
<Index>2</Index>
<ItemType>3</ItemType>
<X>20</X>
<Y>-90</Y>
<TextW>45</TextW>
<TextH>45</TextH>
<TextText>G</TextText>
<TextFontSize>24</TextFontSize>
<TextTextAlignment>1</TextTextAlignment>
<TextF>4294967295</TextF>
<TextB>16711935</TextB>
<TextScript />
<V1_0_5 />
</ItemContext>
<ItemContext>
<Id>579657ca-e0c6-4f93-8c35-8af662b275c6</Id>
<Index>3</Index>
<ItemType>3</ItemType>
<X>20</X>
<Y>-150</Y>
<TextW>45</TextW>
<TextH>45</TextH>
<TextText>B</TextText>
<TextFontSize>24</TextFontSize>
<TextTextAlignment>1</TextTextAlignment>
<TextF>4294967295</TextF>
<TextB>65535</TextB>
<TextScript />
<V1_0_5 />
</ItemContext>
<ItemContext>
<Id>7f7c43a0-b0c9-4e5b-8610-28f582bddce3</Id>
<Index>4</Index>
<ItemType>2</ItemType>
<X>70</X>
<Y>-30</Y>
<SliderW>300</SliderW>
<SliderH>45</SliderH>
<SliderValue>0.34117648</SliderValue>
<SliderInterval>0.1</SliderInterval>
<SliderScript>r = int(value * 255)
Items[7].Text = str(r)
UpdateColor()
msg = 'R:%d' % r
print msg
if Remote.Writer != None:
Remote.Writer.WriteLine(msg)
Remote.Writer.Flush()
</SliderScript>
<V1_0_5 />
</ItemContext>
<ItemContext>
<Id>611400e1-2389-458f-a583-bb7bac6154e8</Id>
<Index>5</Index>
<ItemType>2</ItemType>
<X>70</X>
<Y>-90</Y>
<SliderW>300</SliderW>
<SliderH>45</SliderH>
<SliderValue>1</SliderValue>
<SliderInterval>0.1</SliderInterval>
<SliderScript>g = int(value * 255)
Items[8].Text = str(g)
UpdateColor()
msg = 'G:%d' % g
print msg
if Remote.Writer != None:
Remote.Writer.WriteLine(msg)
Remote.Writer.Flush()
</SliderScript>
<V1_0_5 />
</ItemContext>
<ItemContext>
<Id>e283ef11-7a7a-4e45-ac0e-6c3abed54ca1</Id>
<Index>6</Index>
<ItemType>2</ItemType>
<X>70</X>
<Y>-150</Y>
<SliderW>300</SliderW>
<SliderH>45</SliderH>
<SliderValue>0</SliderValue>
<SliderInterval>0.1</SliderInterval>
<SliderScript>b = int(value * 255)
Items[9].Text = str(b)
UpdateColor()
msg = 'B:%d' % b
print msg
if Remote.Writer != None:
Remote.Writer.WriteLine(msg)
Remote.Writer.Flush()
</SliderScript>
<V1_0_5 />
</ItemContext>
<ItemContext>
<Id>92ad5805-dc45-4e3d-9290-336888ed499c</Id>
<Index>7</Index>
<ItemType>1</ItemType>
<X>380</X>
<Y>-30</Y>
<InputFieldW>70</InputFieldW>
<InputFieldH>45</InputFieldH>
<InputFieldText>87</InputFieldText>
<InputFieldFontSize>24</InputFieldFontSize>
<InputFieldScript>r = float(text)
Items[4].Value = r / 255</InputFieldScript>
<V1_0_5 />
</ItemContext>
<ItemContext>
<Id>9b3b8dc9-6368-4e2f-ab7a-d6ac7d442128</Id>
<Index>8</Index>
<ItemType>1</ItemType>
<X>380</X>
<Y>-90</Y>
<InputFieldW>70</InputFieldW>
<InputFieldH>45</InputFieldH>
<InputFieldText>255</InputFieldText>
<InputFieldFontSize>24</InputFieldFontSize>
<InputFieldScript>g = float(text)
Items[5].Value = g / 255</InputFieldScript>
<V1_0_5 />
</ItemContext>
<ItemContext>
<Id>50a61200-382e-43b7-85ff-6cc96ed00696</Id>
<Index>9</Index>
<ItemType>1</ItemType>
<X>380</X>
<Y>-150</Y>
<InputFieldW>70</InputFieldW>
<InputFieldH>45</InputFieldH>
<InputFieldText>0</InputFieldText>
<InputFieldFontSize>24</InputFieldFontSize>
<InputFieldScript>b = float(text)
Items[6].Value = b / 255</InputFieldScript>
<V1_0_5 />
</ItemContext>
<ItemContext>
<Id>fee38201-2fd2-4a55-8011-ebeba3608dfa</Id>
<Index>10</Index>
<ItemType>3</ItemType>
<X>460</X>
<Y>-30</Y>
<TextW>160</TextW>
<TextH>165</TextH>
<TextText />
<TextFontSize>24</TextFontSize>
<TextTextAlignment>0</TextTextAlignment>
<TextF>255</TextF>
<TextB>1476329727</TextB>
<TextScript />
<V1_0_5 />
</ItemContext>
<ItemContext>
<Id>d588b751-e2a0-46bc-a756-0dc7f73897c7</Id>
<Index>11</Index>
<ItemType>0</ItemType>
<X>460</X>
<Y>-210</Y>
<ButtonW>160</ButtonW>
<ButtonH>60</ButtonH>
<ButtonText>Reset</ButtonText>
<ButtonFontSize>24</ButtonFontSize>
<ButtonTextAlignment>1</ButtonTextAlignment>
<ButtonScript>Items[4].Value = 0
Items[5].Value = 0
Items[6].Value = 0</ButtonScript>
<V1_0_5 />
</ItemContext>
</ItemList>
<CurrentItemId>92ad5805-dc45-4e3d-9290-336888ed499c</CurrentItemId>
<SetupScript>def UpdateColor():
r = int(Items[4].Value * 255)
g = int(Items[5].Value * 255)
b = int(Items[6].Value * 255)
Items[10].B = (r << 24) + (g << 16) + (b << 8) + 0xff
</SetupScript>
</PanelContext>