1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

ブラウザーから MQTT Publish でブザーを鳴らす

Last updated at Posted at 2021-08-13

次のページで、ブザーをオン、オフさせます。
mqtt_buzzer_aug13.png

IMG_20210813_144936.jpg

WioLTE のプログラム

フォルダー構造

$ tree mqtt_buzzer/
mqtt_buzzer/
├── mqtt_buzzer.ino
├── setupLTE.ino
└── setup_mqtt.ino
mqtt_buzzer.ino
// ---------------------------------------------------------------
/*
	mqtt_buzzer.ino

					Aug/20/2021
*/
// ---------------------------------------------------------------
#include <WioLTEforArduino.h>
#include <WioLTEClient.h>
#include <PubSubClient.h>
#include <ArduinoJson.h>
#include <stdio.h>

#define MQTT_SERVER_HOST  "example.com"
#define MQTT_SERVER_PORT  (1883)

#define ID                "WioLTE"
#define OUT_TOPIC         "sample/imageTopic"
#define IN_TOPIC          "sample/imageTopic"

#define BUZZER_PIN      (WIOLTE_D38)
#define BUZZER_ON_TIME  (100)

WioLTE Wio;
WioLTEClient WioClient(&Wio);
PubSubClient MqttClient;

int icount = 0;
// ---------------------------------------------------------------
void callback(char* topic, byte* payload, unsigned int length)
{
	DynamicJsonDocument doc(1024);
	SerialUSB.println("");
	payload[length] = '\0';
	String msg = String((char*) payload);
	SerialUSB.println(msg);
	deserializeJson(doc, msg);

	const char* buzzer = doc["buzzer"];

	if (strstr(buzzer,"on"))
		{
		char str_out[] = "*** callback *** on ***";
		SerialUSB.println(str_out);
		MqttClient.publish(OUT_TOPIC, str_out);
		Wio.LedSetRGB(0, 1, 0);
		digitalWrite(BUZZER_PIN, HIGH);
		delay(BUZZER_ON_TIME);
		digitalWrite(BUZZER_PIN, LOW);
		}
	else if (strstr(buzzer,"off"))
		{	
		char str_out[] = "*** callback *** off ***";
		SerialUSB.println(str_out);
		MqttClient.publish(OUT_TOPIC, str_out);
		Wio.LedSetRGB(1, 0, 0);
		digitalWrite(BUZZER_PIN, LOW);
		}
}

// ---------------------------------------------------------------
void setup()
{
	setupLTE();

	pinMode(BUZZER_PIN, OUTPUT);

	setup_mqtt_proc();

	Wio.LedSetRGB(1, 1, 1);

	SerialUSB.println("*** Setup completed *** Aug/20/2021 PM 18:00 ***");
}

// ---------------------------------------------------------------
void loop()
{
	DynamicJsonDocument doc(1024);
	char data_json[128];

	if ((icount % 500) == 0)
		{
		doc["icount"] = icount;
		doc["uptime"] = millis() / 1000;
		serializeJson(doc, data_json);

		SerialUSB.println(data_json);
		}

	MqttClient.loop();

	icount++;
}

// ---------------------------------------------------------------
setup_mqtt.ino
// ---------------------------------------------------------------
/*
	setup_mqtt.ino

					Aug/20/2021
*/
// ---------------------------------------------------------------
void setup_mqtt_proc()
{
	SerialUSB.println("### Connecting to MQTT server \""MQTT_SERVER_HOST"\"");
	MqttClient.setServer(MQTT_SERVER_HOST, MQTT_SERVER_PORT);
	MqttClient.setCallback(callback);
	MqttClient.setClient(WioClient);
	if (!MqttClient.connect(ID))
		{
		SerialUSB.println("### ERROR! connect ###");
		}
	else
		{
		MqttClient.subscribe(IN_TOPIC);
		SerialUSB.println("*** subscribe ***");
		}
}

// ---------------------------------------------------------------

setupLTE.ino はこちら
UDP で温度と湿度を Harvest に送る

Web ページ

index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="CONTENT-TYPE" content="text/html; charset=utf-8" />
<title>JavaScript MQTT WebSocket Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.js"></script>
<script src="mqtt_buzzer.js"></script>
</head>
<body>
<div class="contents">


<blockquote>
	<button id="on">on</button>
	<button id="off">off</button>
</blockquote>

</div>
<hr />
<div id="outarea_aa">outarea_aa</div>
<div id="outarea_bb">outarea_bb</div>
<div id="outarea_cc">outarea_cc</div>
<div id="outarea_dd">outarea_dd</div>
<div id="outarea_ee">outarea_ee</div>
<div id="outarea_ff">outarea_ff</div>
<div id="outarea_gg">outarea_gg</div>
<div id="outarea_hh">outarea_hh</div>
<hr />
<br />
<blockquote>
Version: Aug/13/2021<br />
</blockquote>
</body>	
</html>
mqtt_buzzer.js
// ---------------------------------------------------------------
//	mqtt_publish.js
//
//						Aug/13/2021
//
// ---------------------------------------------------------------
var mqtt;
const reconnectTimeout = 2000;
const host="example.com"
const topic = "sample/imageTopic"
const port=8080
		
// ---------------------------------------------------------------
jQuery  (function ()
{
	jQuery("#outarea_aa").text("*** mqtt_publish.js *** start ***")

	MQTTconnect()

	jQuery ("button").click (function ()
		{
		const buzzer = this.id
		jQuery ("button").css ("color","black")
		jQuery ("#" + this.id).css ("color","blue")

		buzzer_send_proc(buzzer)
		})

	jQuery("#outarea_hh").text("*** mqtt_publish.js *** end ***")
})

// ---------------------------------------------------------------
function onFailure(message)
{
	console.log("Connection Attempt to Host "+host+"Failed");
	setTimeout(MQTTconnect, reconnectTimeout);
}

// ---------------------------------------------------------------
function onMessageArrived(msg)
{
	var out_msg="Message received "+msg.payloadString+"<br>"
	out_msg=out_msg+"Message received Topic "+msg.destinationName
	console.log(out_msg)

	const str_out = msg.payloadString
	jQuery("#outarea_cc").text(str_out)
}
		
// ---------------------------------------------------------------
function onConnect()
{
	  // Once a connection has been made, make a subscription and send a message.
	
	jQuery("#outarea_bb").text("*** Connected ***")
	console.log("Connected ")
	mqtt.subscribe(topic)
}

// ---------------------------------------------------------------
function MQTTconnect()
{
	console.log("connecting to "+ host +" "+ port)
	var x=Math.floor(Math.random() * 10000) 
	var cname="orderform-"+x
	mqtt = new Paho.MQTT.Client(host,port,cname)
		//document.write("connecting to "+ host)
	var options = {
			timeout: 3,
			onSuccess: onConnect,
			onFailure: onFailure,
			 }
	mqtt.onMessageArrived = onMessageArrived
		
	mqtt.connect(options) //connect
}
	 
// ---------------------------------------------------------------
function buzzer_send_proc(buzzer)
{
	jQuery("#outarea_dd").text("*** buzzer_send_proc *** " + buzzer)

	var unit_aa = {}
	unit_aa["buzzer"] = buzzer
	const json_str = JSON.stringify(unit_aa)
	message = new Paho.MQTT.Message(json_str)
	message.destinationName = topic
	message.retained=true
	mqtt.send(message)
}

// ---------------------------------------------------------------
1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?