Snippets

Peter Scargill Websocket demo with side panel

Created by Peter Scargill
View revision

File snippet.html Added

  • Ignore whitespace
  • Hide word diff 
+<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>
HTTPS SSH

You can clone a snippet to your computer for local editing. Learn more.