More than 3 years have passed since last update.

リモートカメラシステム　（Web ページ部分）

Last updated at 2021-08-22Posted at 2021-08-16

次のシステムを構成するサブシステムです。
Grove IoT スターターキット for SORACOM で作るリモートカメラシステム

制作開始日

2021年8月16日
システムを構築している様子を報告していきます。
必要な技術については見通しが立っているので、それを組み合わせていきます。

完成日

2021年8月23日

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="CONTENT-TYPE" content="text/html; charset=utf-8" />
<title>MQTT over WebSocket</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_jpg.js"></script>
</head>
<body>
<h2>MQTT over WebSocket</h2>
<div class="contents">
****
</div>
<blockquote>
<div class="area_time">***</div>
</blockquote>
<button id="shutter">Shutter</button>
<hr />
<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/19/2021 AM 08:06<br />
</blockquote>
</body>	
</html>

mqtt_jpg.js

// ---------------------------------------------------------------
//	mqtt_jpg.js
//
//						Aug/19/2021
//
// ---------------------------------------------------------------
var mqtt;
const reconnectTimeout = 2000;
const host="example.com"
const port=8080
		
// ---------------------------------------------------------------
jQuery  (function ()
{
	jQuery("#outarea_aa").text("*** mqtt_jpg.js *** start ***")

	MQTTconnect()

	jQuery ("button#shutter").click (function ()
		{
		jQuery ("#" + this.id).css ("color","blue")
		jQuery("#outarea_cc").text("*** shutter clicked ***")
		jQuery("#outarea_dd").text("")

		shutter_send_proc("on")

		setTimeout(function()
			{
			jQuery("#outarea_cc").text("")
			jQuery("#outarea_dd").text("*** shutter cleared ***")
			jQuery ("button").css ("color","black")
			shutter_send_proc("off")
			},2000)	
		})

	jQuery("#outarea_hh").text("*** mqtt_jpg.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)

	display_proc(msg.payloadString)

//	const str_out = "<h2>" + msg.payloadString + "</h2>"
//	jQuery("#outarea_cc").html(str_out)

	const nowx = new Date()
	jQuery("#outarea_ff").text("check aaa")

	const Year = nowx.getFullYear()

	const Month = nowx.getMonth()+1
	const Datex = nowx.getDate()
	const Hour = nowx.getHours()
	const Min = nowx.getMinutes()
	const Sec = nowx.getSeconds()

	const ddx = Year + "年" + Month + "月" + Datex + "日" + Hour + ":" + Min + ":" + Sec

	jQuery(".area_time").text(ddx)

}
		
// ---------------------------------------------------------------
function display_proc(str_payload)
{
	const json_str = str_payload
	const unit_aa = JSON.parse(json_str)

	if ("base64" in unit_aa)
		{
		jQuery("#outarea_ee").text("base64 exist ***")

		var str_out = '<img src="data:image/png;base64,'
		str_out += unit_aa["base64"] + '">'

		jQuery(".contents").html(str_out)
		}
	else
		{
		jQuery("#outarea_ee").text("base64 does'nt exist ***")
		}
}

// ---------------------------------------------------------------
function onConnect() {
	  // Once a connection has been made, make a subscription and send a message.
	
	jQuery("#outarea_bb").text("*** Connected ***")
	console.log("Connected ")
	const topic = "sample/imageTopic"

		mqtt.subscribe(topic)
//		message = new Paho.MQTT.Message("Hello World")
//		message.destinationName = "sensor2"
//		message.retained=true
//		mqtt.send(message)
	  }

// ---------------------------------------------------------------
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 shutter_send_proc(on_off)
{
	jQuery("#outarea_ee").text("*** shutter_send_proc ***")

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

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

シャッターオンを確認するスクリプト

go_subscribe.sh

BROKER="example.com"
TOPIC="sample/imageTopic"
#
mosquitto_sub -d -t orz -h ${BROKER} --topic ${TOPIC}
#

実行結果

$ ./go_subscribe.sh 
Client (null) sending CONNECT
Client (null) received CONNACK (0)
Client (null) sending SUBSCRIBE (Mid: 1, Topic: orz, QoS: 0, Options: 0x00)
Client (null) sending SUBSCRIBE (Mid: 1, Topic: sample/imageTopic, QoS: 0, Options: 0x00)
Client (null) received SUBACK
Subscribed (mid: 1): 0, 0
Client (null) received PUBLISH (d0, q0, r1, m0, 'sample/imageTopic', ... (17 bytes))
{"shutter":"off"}
Client (null) received PUBLISH (d0, q0, r0, m0, 'sample/imageTopic', ... (16 bytes))
{"shutter":"on"}
Client (null) received PUBLISH (d0, q0, r0, m0, 'sample/imageTopic', ... (17 bytes))
{"shutter":"off"}

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

リモートカメラシステム （Web ページ部分）

リモートカメラシステム　（Web ページ部分）