Snippets

Peter Scargill Websocket demo with side panel

Created by Peter Scargill
<html>

    <head>
		<meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Simple Controller</title>
        <link rel="stylesheet" href="themes/jquery.mobile.icons.min.css" />
		<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
        <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
		<link rel="stylesheet" href="themes/petes.min.css" />
		
    </head>
	
    <script type="text/javascript">
        var server = window.location.hostname;
        var topics = {};
        var wsUriC = "ws://"+server+":1880/myapp3";
		var ws;
        var toggle=0;
		
        function wsConnectC() {
	
            // Make the websocket connection
            ws = new WebSocket(wsUriC);
			
	
           ws.onmessage = function(msg) {
		   
					$("#sometext").html(msg.data); 
						toggle=toggle+1;
					    if (toggle&1)  $("#myimg").attr("src","http://things.bedrock.es:8180/app3/icons/heat0.png");  else  $("#myimg").attr("src","http://things.bedrock.es:8180/app3/icons/heat1.png"); 
            }	
			
            ws.onopen = function() {
				$("#stat").removeClass("ui_icon_alert").addClass("ui-icon-check");
            }
			
            ws.onclose = function() {
				$("#stat").removeClass("ui_icon_check").addClass("ui-icon-alert");
                setTimeout(wsConnectC,1000);
            }
        }
		
		
function send(topic,payload)
{
ws.send('{"topic":"'+topic+'","payload":"{'+payload+'}"}');
}	

</script>

	<body onload="wsConnectC();" onunload="ws.disconnect;">
	   
		<div data-role="page" id="one" data-theme="b">
			<div data-role="content" data-theme="b">

				<div data-role="panel" id="menupanel" data-position="left" data-display="overlay" data-theme="g">
					<h3>Page Menu</h3>
					<ul data-role="listview" >
						<li><a  class="ui-state-disabled" href="#one">Home</a></li>
						<li><a href="#two">Page 2</a></li>
					</ul>
				</div><!-- /menupanel -->

			<a href="#menupanel" id="stat" class="ui-btn ui_icon_alert ui-btn-icon-left">Cave Lighting System - Home </a>

				Office RGB Controls
					<div class="ui-grid-c">	
						<div class="ui-block-a"><a href="#" data-role="button" data-mini="true" data-theme="a" onClick='send("red1","rgb:0,255,0,0,70,1")'>red</a></div>
						<div class="ui-block-b"><a href="#" data-role="button" data-mini="true" data-theme="b" onClick='send("red1","rgb:0,0,255,0,70,1")'>grn</a></div>							
						<div class="ui-block-c"><a href="#" data-role="button" data-mini="true" data-theme="c" onClick='send("red1","rgb:0,0,0,255,70,1")'>blue</a></div>
					    <div class="ui-block-d"><a href="#" data-role="button" data-mini="true" data-theme="d" onClick='send("red1","rgb:0,255,0,255,70,1")'>ppl</a></div>
	                </div>
					<div class="ui-grid-c">	
						<div class="ui-block-a"><a href="#" data-role="button" data-mini="true" data-theme="j"  onClick='send("red1","rgb:0,255,100,100,70,1")'>pink</a></div>
						<div class="ui-block-b"><a href="#" data-role="button" data-mini="true" data-theme="f"  onClick='send("red1","rgb:0,0,255,255,70,1")'>cyan</a></div>
					    <div class="ui-block-c"><a href="#" data-role="button" data-mini="true" data-theme="e" onClick='send("red1","rgb:0,255,140,40,70,1")'>hot</a></div>
						<div class="ui-block-d"><a href="#" data-role="button" data-mini="true" data-theme="g" onClick='send("red1","rgb:0,255,200,120,70,1")'>wrm</a></div>
						</div>
					<div class="ui-grid-a">	
						<div class="ui-block-a"><a href="#" data-role="button" data-mini="true"  data-theme="g" onClick='send("red1","rgb:0,255,255,255,70,1")' >white</a></div>
						<div class="ui-block-b"><a href="#" data-role="button" data-mini="true"  data-theme="h" onClick='send("red1","rgb:0,0,0,0,70,1")'>off</a></div>
					</div>
					Pergola PWM Light
					<div class="ui-grid-c">
						<div class="ui-block-a"><a href="#" data-role="button" data-mini="true" data-theme="j"  onClick='send("pergola","pwm:99,0,0,10")'>red</a></div>
						<div class="ui-block-b"><a href="#" data-role="button" data-mini="true" data-theme="f"  onClick='send("pergola","pwm:0,99,0,10")'>grn</a></div>
					    <div class="ui-block-c"><a href="#" data-role="button" data-mini="true" data-theme="e" onClick='send("pergola","pwm:0,0,99,10")'>blue</a></div>
						<div class="ui-block-d"><a href="#" data-role="button" data-mini="true" data-theme="g" onClick='send("pergola","pwm:0,0,0,10")'>off</a></div>
						</div>
					<div class="ui-grid-a">	
					    <div class="ui-block-a"><a href="#" data-role="button" data-mini="true" data-theme="g" onClick='send("pergola","out0:1")' >pergola on</a></div>
						<div class="ui-block-b"><a href="#" data-role="button" data-mini="true" data-theme="h" onClick='send("pergola","out0:0")'>pergola off</a></div>
					</div>							
					<div class="ui-grid-a">	
					    <div class="ui-block-a"><a href="#" data-role="button" data-mini="true" data-theme="g" onClick='send("floods","out0:1")' >floods on</a></div>
						<div class="ui-block-b"><a href="#" data-role="button" data-mini="true" data-theme="h" onClick='send("floods","out0:0")'>floods off</a></div>
					</div>			
					Time: <span id="sometext"></span>
				</div>
		</div>	
	

		<div data-role="page" id="two" data-theme="b">
			<div data-role="content" data-theme="b">

				<div data-role="panel" id="menupanel2" data-position="left" data-display="overlay" data-theme="g">
					<h3>Page Menu</h3>
					<ul data-role="listview" >
						<li><a  href="#one">Home</a></li>
						<li><a class="ui-state-disabled" href="#two">Page 2</a></li>
					</ul>
				</div><!-- /menupanel -->
				
			<a href="#menupanel2" id="stat" class="ui-btn ui_icon_alert ui-btn-icon-left">Cave Lighting System  - Page 2 </a>

					 <br/>
					 	<div class="ui-grid-a">	
					    <div class="ui-block-a"><a href="#" data-role="button" data-mini="true" data-theme="g" onClick='send("floods","out4:0")' >Int Win on</a></div>
						<div class="ui-block-b"><a href="#" data-role="button" data-mini="true" data-theme="h" onClick='send("floods","out4:1")'>Int win off</a></div>
						</div>	
					 	<div class="ui-grid-a">	
					    <div class="ui-block-a"><a href="#" data-role="button" data-mini="true" data-theme="g" onClick='send("watering","out4:0")' >Kit Win on</a></div>
						<div class="ui-block-b"><a href="#" data-role="button" data-mini="true" data-theme="h" onClick='send("watering","out4:1")'>Kit win off</a></div>
						</div>	
				 	   <div class="ui-grid-a">	
					    <div class="ui-block-a"><a href="#" data-role="button" data-mini="true" data-theme="g" onClick='send("sidewall","out0:1")' >Side on</a></div>
						<div class="ui-block-b"><a href="#" data-role="button" data-mini="true" data-theme="h" onClick='send("sidewall","out0:0")'>Side off</a></div>
						</div>	
				 	   <div class="ui-grid-a">	
					    <div class="ui-block-a"><a href="#" data-role="button" data-mini="true" data-theme="g" onClick='send("sidewall","out5:1")' >Side5 on</a></div>
						<div class="ui-block-b"><a href="#" data-role="button" data-mini="true" data-theme="h" onClick='send("sidewall","out5:0")'>Side5 off</a></div>
						</div>	
				 
			</div>
		</div>	

    </body>
</html>

Comments (0)