<html5>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HAT Interface</title>
<link rel="stylesheet" type="text/css" href="/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="/css/bootstrap-theme.css">
<link rel="stylesheet" type="text/css" href="/css/style.css">
<link rel="stylesheet" type="text/css" href="/css/mqtthat.css">
<script type="text/javascript" src="/js/html5shiv.js"></script>
<script type="text/javascript" src="/js/respond.min.js"></script>
<![endif]-->
<script type="text/javascript" src="/js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="/js/jquery-ui-1.10.4.min.js"></script>
<script type="text/javascript" src="/js/bootstrap.js"></script>
<script type="text/javascript" src="/js/fullscreen.js"></script>
<script type="text/javascript" src="/js/jquery-cookie.js" charset="utf-8" ></script>
<script src="/js/jquery-lang.js" charset="utf-8" type="text/javascript"></script>
<script src="/js/utility.js" charset="utf-8" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.js" type="text/javascript"></script>
<script type="text/javascript" src="/js/mqtthat.js"></script>
<script>
// Create a client instance
var mqtt_domain = "test";
var mqtt_subdomain = "beaglebone";
var d= new Date();
var clientid = "test"+d.getTime();
var host = location.host.split(":");
var mqtthost = host[0];
var client = new Paho.MQTT.Client(mqtthost, 9001, clientid);
// set callback handlers
client.onConnectionLost = onConnectionLost;
client.onMessageArrived = onMessageArrived;
// connect the client
client.connect({onSuccess:onConnect});
</script>
</head>
<body>
<div id="allin" class="all">
<div id="header" class="header">
<b> Input </b>
</div>
<div class="holder">
<div class="meter"> IN0 <div id="IN0" class="measure">0</div> </div>
</div>
<div class="holder">
<div class="meter"> IN1 <div id="IN1" class="measure">0</div></div>
</div>
<div class="holder">
<div class="meter"> IN2 <div id="IN2" class="measure">0</div></div>
</div>
<div class="holder">
<div class="meter"> IN3 <div id="IN3" class="measure">0</div></div>
</div>
<div class="holder">
<div class="meter"> IN4 <div id="IN4" class="measure">0</div></div>
</div>
<div class="holder">
<div class="meter"> IN5 <div id="IN5" class="measure">0</div></div>
</div>
<div class="holder">
<div class="meter"> IN6 <div id="IN6" class="measure">0</div></div>
</div>
<div class="holder">
<div class="meter"> IN7 <div id="IN7" class="measure">0</div></div>
</div>
</div>
<div id="allout" class="all">
<div id="header1" class="header">
<b> Output </b>
</div>
<div class="bholder">
<button id="OUT0" class="switch" onclick='doClick("OUT0")'><img id="I_OUT0" src="/img/Button-Blank-Green-icon.png" class=button> OUT0 </button>
</div>
<div class="bholder">
<button id="OUT1" class="switch" onclick='doClick("OUT1")'><img id="I_OUT1" src="/img/Button-Blank-Green-icon.png" class=button> OUT1 </button>
</div>
<div class="bholder">
<button id="OUT2" class="switch" onclick='doClick("OUT2")'><img id="I_OUT2" src="/img/Button-Blank-Green-icon.png" class=button> OUT2 </button>
</div>
<div class="bholder">
<button id="OUT3" class="switch" onclick='doClick("OUT3")'><img id="I_OUT3" src="/img/Button-Blank-Green-icon.png" class=button> OUT3 </button>
</div>
<div class="bholder">
<button id="OUT4" class="switch" onclick='doClick("OUT4")'><img id="I_OUT4" src="/img/Button-Blank-Green-icon.png" class=button> OUT4 </button>
</div>
<div class="bholder">
<button id="OUT5" class="switch" onclick='doClick("OUT5")'><img id="I_OUT5" src="/img/Button-Blank-Green-icon.png" class=button> OUT5 </button>
</div>
<div class="bholder">
<button id="OUT6" class="switch" onclick='doClick("OUT6")'><img id="I_OUT6" src="/img/Button-Blank-Green-icon.png" class=button> OUT6 </button>
</div>
<div class="bholder">
<button id="OUT7" class="switch" onclick='doClick("OUT7")'><img id="I_OUT7" src="/img/Button-Blank-Green-icon.png" class=button> OUT7 </button>
</div>
</div>
</body>
</html5>