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>

The TanzoLab Project

Il TanzoLab è una iniziativa senza fini di lucro, nata da un'idea di Sergio Tanzilli socio fondatore di Acme Systems srl nel Novembre 2015, per trasferire ad appassionati di elettronica e informatica, professionisti e aziende nel settore, le conoscenze necessarie per poter creare prodotti embedded adatti per la produzione industriale.

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.