Snippets

Peter Scargill Websocket demo with side panel

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
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<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 (1)

HTTPS SSH

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