Snippets

Peter Scargill MyApp3 - code for the blog item at tech.scargill.net

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;
+		
+        function wsConnectC() {
+	
+            // Make the websocket connection
+            ws = new WebSocket(wsUriC);
+			
+	
+           ws.onmessage = function(msg) {
+						$("#sometext").html(msg.data); 
+            }	
+			
+            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">
+				<span id="stat" class="ui-btn ui_icon_alert ui-btn-icon-left">Cave Lighting System - Home </span>
+	
+          	<div data-role="controlgroup" data-type="horizontal" data-mini="true" >
+				<a href="#two" class="ui-shadow ui-btn ui-corner-all ui-btn-icon-left ui-icon-plus ui-btn-b">Page 2 </a> 
+				</div>				
+				   <br/>
+					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">
+				<span id="stat" class="ui-btn ui_icon_alert ui-btn-icon-left">Cave Lighting System  - Page 2 </span>
+				<div data-role="controlgroup" data-type="horizontal" data-mini="true">
+				<a href="#one" class="ui-shadow ui-btn ui-corner-all ui-btn-icon-left ui-icon-plus ui-btn-b">Home</a>
+				</div>	
+					 <br/>
+					 Coming soon
+			</div>
+		</div>	
+		
+    </body>
+</html>
HTTPS SSH

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