Tweet

Androidアプリ「GUI Maker for ESP8266 & ESP32 – Python Inst. Panel」を使って、プッシュスイッチの状態を非同期に取得します。最後に載せてあるXMLをAndroidのブラウザでコピーしてアプリにペーストすることでインストールできます。

タイマーで繰り返し状態を問い合わせるのではなく、プッシュスイッチの状態が変化したときにESP8266またはESP32から文字列が送信されます。それをイベントハンドラで処理します。プッシュスイッチを押している間、赤色の四角が青色になります。同時にプッシュスイッチの状態が変化をグラフに表示します。

先ずは、ESP8266またはESP32のArduinoスケッチを変更します。

スケッチ全体は「Python Instrument Panel（２）Arduinoスケッチ」を見てください。最後にある mySetup()とmyLoop() を変更します。pinModeをINPUT_PULLUPにしてプルアップ抵抗を省略します。buttonStateにプッシュスイッチの状態を覚えておき、変化したとき文字列”HIGH”または”LOW”を送信します。

const int buttonPin = 5;
int buttonState = HIGH;

void mySetup() {
  pinMode(buttonPin, INPUT_PULLUP);
}

void myLoop() {
  int newState = digitalRead(buttonPin);
  if (newState != buttonState) {
    buttonState = newState;
    String str = buttonState ? "HIGH" : "LOW";
    Serial.println(str);
    client.println(str);
  }
}

では、パネルを作りましょう。

をタップして編集モードにして、をタップして新規パネルを表示します。

パネルに名前を付けておきます。

ExecCodeアイテムを使ってArduinoスケッチの動作を確認しておきます。をタップしてESP8266またはESP32と接続します。下記のPythonコードをExecCodeアイテムに入力してAndroid入力画面から抜けると、イベントハンドラ lineReceived() が登録され、有効になります。

プッシュスイッチを操作して、ログに”HIGH”、”LOW”が表示されることを確認します。

次に、パネルにTextアイテム、PlotViewアイテムを配置します。

Panel setup scriptです。事前にExecCodeアイテムで使ったコードに、表示のためのコードを追加しています。PlotViewの横軸に時刻を表示するため、現在時刻とデータを渡しています。

Items[2].StringFormat = 'HH:mm:ss'
Items[2].ClearData()
Items[2].Invalidate()

def lineReceived(text):
	print text
	if text == 'HIGH':
		Items[1].B = 0xFF0000FF
		Items[2].AddData(DateTime.Now, 1)
	else:
		Items[1].B = 0x0000FFFF
		Items[2].AddData(DateTime.Now, 0)
	Items[2].Invalidate()

Remote.RaiseEvents = True

完成したパネルのPanel contextは次のようになります。Androidのブラウザでコピーして、で追加した新規パネルのPanel context でペースト、さらにで新規パネルが”Push Switch”パネルになります。

<?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>62ef9aa8-03fb-4b14-8e91-7dbe8442b397</Id>
  <PredefinedId>00000000-0000-0000-0000-000000000000</PredefinedId>
  <Name>Push Switch</Name>
  <ItemList>
    <ItemContext>
      <Id>2107a561-1f6e-48b6-9724-a55e522038c0</Id>
      <Index>1</Index>
      <ItemType>3</ItemType>
      <X>210</X>
      <Y>-60</Y>
      <TextW>200</TextW>
      <TextH>100</TextH>
      <TextText />
      <TextFontSize>50</TextFontSize>
      <TextTextAlignment>1</TextTextAlignment>
      <TextF>255</TextF>
      <TextB>4278190335</TextB>
      <TextScript />
      <V1_0_5 />
    </ItemContext>
    <ItemContext>
      <Id>1646e413-ff97-45e2-80e5-b70b41a16199</Id>
      <Index>2</Index>
      <ItemType>6</ItemType>
      <X>0</X>
      <Y>0</Y>
      <PlotViewH>200</PlotViewH>
      <PlotViewText>Push Switch</PlotViewText>
      <PlotViewScript />
      <V1_0_5 />
    </ItemContext>
  </ItemList>
  <CurrentItemId>1646e413-ff97-45e2-80e5-b70b41a16199</CurrentItemId>
  <SetupScript>Items[2].StringFormat = 'HH:mm:ss'
Items[2].ClearData()
Items[2].Invalidate()

def lineReceived(text):
	print text
	if text == 'HIGH':
		Items[1].B = 0xFF0000FF
		Items[2].AddData(DateTime.Now, 1)
	else:
		Items[1].B = 0x0000FFFF
		Items[2].AddData(DateTime.Now, 0)
	Items[2].Invalidate()

Remote.RaiseEvents = True</SetupScript>
  <TeardownScript />
</PanelContext>