Markdown source

webapp/acc2mqtt/index.php
<!DOCTYPE html>

<html>
<head>
<title>Page Title</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	
	<!-- Jquery.mobile -->
	<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>
	
	<!-- Client MQTT -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.min.js" type="text/javascript"></script>

	
	<script>
		//var broker="www.tanzolab.it";
		//var port=1884;
		
		var run=true;
		var broker="iot.eclipse.org";
		var port=80;
		
		var topic = "tanzolab/<? echo $_GET["client_id"]; ?>/acc";
		
		var randomString = function(length) {
		    var text = "";
		    var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
		    for(var i = 0; i < length; i++) {
		        text += possible.charAt(Math.floor(Math.random() * possible.length));
		    }
		    return text;
		}
		var clientId=randomString(20);
		
		
		client = new Paho.MQTT.Client(broker, Number(port), "/ws",clientId);
		
		// set callback handlers
		client.onConnectionLost = onConnectionLost;
		
		// connect the client
		client.connect({onSuccess:onConnect});
		
		// called when the client connects
		function onConnect() {
		}
		
		// called when the client loses its connection
		function onConnectionLost(responseObject) {
		  if (responseObject.errorCode !== 0) {
		    console.log("onConnectionLost:"+responseObject.errorMessage);
		  }
		}

		$(document).ready(function() {	
			setInterval(function(){ 
				if (run) { 
					jstring='{"x":"' + $("#x").val() + '","y":"' + $("#y").val() + '","z":"' + $("#z").val() + '"}';
					message = new Paho.MQTT.Message(jstring);
					message.destinationName = topic;
				} else {
					jstring='{"x":"' + 0 + '","y":"' + 0 + '","z":"' + 0 + '"}';
					message = new Paho.MQTT.Message(jstring);
				}
				message.destinationName = topic;
				client.send(message);
			}, 10);
		
			$("#stop").click(function() {
				run=false;
			});
		
			$("#go").click(function() {
				run=true;
			});
		
			window.ondevicemotion = function(event) {
				var x = event.accelerationIncludingGravity.x;  
				var y = event.accelerationIncludingGravity.y;  
				var z = event.accelerationIncludingGravity.z; 
			
				accX = Math.round(x*10) / 10;  
				accY = Math.round(y*10) / 10;  
				accZ = Math.round(z*10) / 10;  
			
				$("#x").val(accX);
				$("#y").val(accY);
				$("#z").val(accZ);
			}
		});
	</script>
</head>

<body>
	<!-- Prima pagina -->
	<div data-role="page" id="foo">
	
		<div data-role="header">
			<h1>acc2mqtt</h1>
		</div>
	
		<div role="main" class="ui-content">
			<fieldset class="ui-grid-b">
				<div class="ui-block-a">X</div>
				<div class="ui-block-b">Y</div>
				<div class="ui-block-c">Z</div>
			</fieldset>
			<fieldset class="ui-grid-b">
				<div class="ui-block-a"><input type="text" id="x" value="0"></div>
				<div class="ui-block-b"><input type="text" id="y" value="0"></div>
				<div class="ui-block-c"><input type="text" id="z" value="0"></div>
			</fieldset>
			<fieldset class="ui-grid-b">
				<div class="ui-block-a"><button  id="stop" class="ui-btn">Stop</button></div>
				<div class="ui-block-b"><button id="go" class="ui-btn">Go</button></div>
				<div class="ui-block-c"><button class="ui-btn">-</button></div>
			</fieldset>

		</div>
		
		<div data-role="footer">
			<h4>TanzoLab 2017</h4>
		</div>
	</div>
	
	<!-- Seconda pagina -->
	<div data-role="page" id="bar">
	
		<div data-role="header">
			<h1>Bar</h1>
		</div>
	
		<div role="main" class="ui-content">
			<p>I'm the second in the source order so I'm hidden when the page loads. I'm just shown if a link that references my id is beeing clicked.</p>
			<p><a href="#foo">Back to foo</a></p>
		</div><!-- /content -->
	
		<div data-role="footer">
			<h4>Page Footer</h4>
		</div><!-- /footer -->
	</div><!-- /page -->
</body>



Le attività del TanzoLab si svolgono ogni mercoledi sera, salvo casi speciali, dalle ore 18:30 presso i locali della Acme Systems srl e consistono in:

  • Talk monotematici a cura di professionisti in vari settori tecnologici
  • Workshop pratici su elettronica embedded, produzione e informatica
  • Progettazione e realizzazione di nuovi prodotti embedded per l'IT

Le attività vengono coordinate tramite questo sito, in cui vengono pubblicati tutti i lavori svolti o in via di sviluppo, e tramite un gruppo Telegram con cui per interagire direttamente via chat con gli altri membri.