Snippets

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

Created by Peter Scargill
snippet.html
Raw 
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
<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>

Comments (0)

HTTPS SSH

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