Creating an HTML 5 web page to control LEDs
First, we will create a new HTML 5 file called home_automation.html
. The web page will also use a pure JavaScript color picker: JSColor. The main web page for JSColor is
http://jscolor.com
. The following lines show the code for the single web page for our web application. The code file for the sample is included in the mqtt_essentials_gaston_hillar_05
folder, in the home_automation.html
file:
<html>
<head">
<script src="paho.javascript-1.0.2/mqttws31.js"></script">
<script src="jscolor-2.0.4/jscolor.js""></script>
<script src="home_automation.js""></script>
<title">MQTT over WebSockets Sample</title>
</head>
<body>
<div id="status"">Not connected with MQTT Server</div>
<div id="led-1">
<span>
Select color for LED #1
</span>
<input class="jscolor" onchange="APP.HomeAutomation...