Jquery Mobile

Argon · 06 apr 2014, 15:23

Hallo,

Heb met mijn Raspberry Pi een thermostaat programmaatje geschreven in Python wat momenteel goed blijkt te werken.
Ik had dit nu graag kunnen aansturen met mijn smartphone/tablet. Ik heb weinig tot geen kennis van HTML5 of Jquery Mobile. Ben dan ook op zoek gegaan naar een WYSIWYG programma om zoiets te maken. Ik kwam volgende tegen: https://01.org/rib/online/ (werkt enkel via

Is simpel drag&drop, maar het lukt mij niet op een Button te doen werken. Ik noem mijn eerste pagina "Home" en een tweede pagina "Thermostaat". Op de pagina "Home" zet ik dan een Button met als info bij Target: #Thermostaat

Als ik dan op "Preview" druk om mijn pagina te bekijken ziet alles er goed uit, maar als ik op de button druk dan gebeurt er niets. Iemand nog gewerkt met dit tooltje, of die weet wat ik verkeerd doen?

Andere WYSIWYG programma's voor HTML5 en Jquery Mobile zijn ook altijd welkom. Ben al enkele andere tegengekomen, maar bovenstaande vind ik echt wel simpel werken.

06 apr 2014, 23:13

Twitter Bootstrap gebruiken? Is HTML5/JQuery-gebaseerd, maar is eigenlijk al-bij-al zeer eenvoudige HTML.

Argon · 24 apr 2014, 18:27

Ben ondertussen al iets verder gekomen.

Ik ben een kleine website gemaakt met "Bottle" en Python om mijn GPIO's van de Raspberry Pi aan te sturen. De bedoeling is om een rolluik op en neer te laten gaan.

Momenteel heb ik een doodsimpel html bestandje aangemaakt met wat Jquery in. De webpagina bestaat uit een flipswitch (Rolluik Omhoog / Rolluik Omlaag). Als ik met mijn laptop naar de pagina surf en op "Rolluik Omhoog" druk dan brand er een ledje (tot hier toe alles goed). Als ik echter x minuten daarna met mijn smartphone ook naar die pagina surf dan staat de flipswitch nog altijd op "Rolluik Omlaag" terwijl de webpagina op mijn computer op "Rolluik Omhoog" staat.

Hoe kan ik dus maken dat de pagina bijvoorbeeld zichzelf herlaad en de laatste stand van de button doorgeeft als er meerdere devices aan het kijken zijn naar de pagina.

Indien dit niet lukt zit ik dus met een probleem. Want je kan dan wel naar de website surfen, maar de knop zal altijd op "Rolluik Omlaag" staan terwijl dit niet altijd het geval zal zijn.

Iemand tips voor mij ?

24 apr 2014, 22:42

Bij het laden van de pagina zal je de html-switch serverside-gewijs "checked" moeten toevoegen.
Op http://demos.jquerymobile.com/1.4.2/flipswitch/ zie ik deze code staan:

Code: Selecteer alles

<form>
    <label for="flip-checkbox-4">Flip toggle switch checkbox:</label>
    <input type="checkbox" data-role="flipswitch" name="flip-checkbox-4" id="flip-checkbox-4" checked="">
</form>

In PHP zou dit er zo kunnen uitzien:

Code: Selecteer alles

<form>
    <label for="flip-checkbox-4">Flip toggle switch checkbox:</label>
    <input type="checkbox" data-role="flipswitch" name="flip-checkbox-4" id="flip-checkbox-4" <?php if ($_SERVER['lampje'] == 1) echo "checked=\"\"" ?>>
</form>

Nu, ik weet niet hoe een Raspberry juist werkt op dat gebied, je zal de Python-tegenhanger hiervan moeten gebruiken, maar dit is het principe.
Let wel: als je 2 devices tegelijk op die pagina open hebt staan gaat de switch omzetten niet zomaar de switch op beide toestellen veranderen!
Da's dan de volgende uitdaging lijkt me

Argon · 30 apr 2014, 14:36

Ben ondertussen volledig opnieuw begonnen en deze keer zonder een Framework. Dus echt html/javascript/jquery Mobile/php.
Alles lijkt goed te werken uitgezonderd mijn Jquery Mobile Slider. Bij het wijzigen van de slider moet de waarde via een POST methode gestuurd worden naar een PHP pagina, die op zijn beurt die waarde wegschrijft in een .txt file.

Als ik dit test met deze code werkt het perfect:

Code: Selecteer alles

    <html>
	<head>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
		<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
		<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
        <script>
		$(document).ready(function() {
   
    $("#tempslider").on("slidestop", function() {
      var graden = $(this).val();
          $.ajax({
        type: 'POST',
        url: 'text.php',
        data: {
                        'graden': graden
                },
        
    });
    });
    });
		</script>      
    </head>
    <body>
	<div data-role="page" id="thermostaat">
		<div data-role="header">
			<h1>Thermostaat</h1>
		</div>
		<div data-role="main">
			<form>
				<label for="tempslider">Temperatuur instellen op:</label>
				<input data-highlight="true" data-popup-enabled="true"
				data-show-value="true" id="tempslider" max="24" min="15" name="tempslider" step="0.5" type="range" value="<?php $onoff = file_get_contents('/var/www/thermostaat.txt'); echo $onoff; ?>">
			</form>
		</div>
		<div data-role="footer">
			<h1>Footer</h1>
		</div>
	</div>  
    </body>
    </html>

Als ik echter 2 bijkomende Jquery Mobile pages aan mijn code toevoeg (pagina Home en pagina Rolluik) dan werkt het plots niet meer:

Code: Selecteer alles

    <html>
	<head>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
		<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
		<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
        
        <script>
		$(document).ready(function() {
    $("#ledwhite").change(function () {
      var isChecked = $("#ledwhite").is(":checked") ? 1 : 0;
      if (isChecked) {
          $.ajax({
              url: 'rolluiken/white_on.php',
              type: 'POST',
          });
      } else {
          $.ajax({
              url: 'rolluiken/white_off.php',
              type: 'POST',
          });
      }

    });
  
    $("#ledred").change(function () {
      var isChecked = $("#ledred").is(":checked") ? 1 : 0;
      if (isChecked) {
          $.ajax({
              url: 'rolluiken/red_on.php',
              type: 'POST',
          });
      } else {
          $.ajax({
              url: 'rolluiken/red_off.php',
              type: 'POST',
          });
      }

    });
  
    $("#tempslider").on("slidestop", function() {
      var graden = $(this).val();
          $.ajax({
        type: 'POST',
        url: 'text.php',
        data: {
                        'graden': graden
                },  
    });
    });
    });
		</script>     
    </head>
    <body>
    <div data-role="page" id="home">
		<div data-role="header">
			<h1>Home</h1>
		</div>
		<div data-role="main">
			<a data-role="button" href="#rolluik" id="buttonrolluik">Rolluik</a>
            <a data-role="button" href="#thermostaat" id="buttonthermostaat">Thermostaat</a>
		</div>
		<div data-role="footer">
			<h1>Footer</h1>
		</div>
	</div>
    
	<div data-role="page" id="rolluik">
		<div data-role="header">
			<h1>Rolluiken</h1>
		</div>
		<div data-role="main">
			<form>
				<div>
					<div class="ui-field-contain">
						<label for="swhitechwhite">white LED Control</label>
						<input data-role="flipswitch" id="ledwhite" name="switchwhite" type="checkbox">
					</div>

					<div class="ui-field-contain">
						<label for="swhitechred">red LED Control</label>
						<input data-role="flipswitch" id="ledred" name="switchred" type="checkbox">
			</form>
					</div>
					<div data-role="footer">
						<h1>Footer</h1>
					</div>
				</div>
		</div>
	</div>

	<div data-role="page" id="thermostaat">
		<div data-role="header">
			<h1>Thermostaat</h1>
		</div>
		<div data-role="main">
			<form>
				<label for="tempslider">Temperatuur instellen op:</label>
				<input data-highlight="true" data-popup-enabled="true"
				data-show-value="true" id="tempslider" max="24" min="15" name="tempslider" step="0.5" type="range" value="<?php $onoff = file_get_contents('/var/www/thermostaat.txt'); echo $onoff; ?>">
			</form>
		</div>
		<div data-role="footer">
			<h1>Footer</h1>
		</div>
	</div>  
    </body>
    </html>

Iemand die op het eerste zicht iets fout ziet? In Apache zijn geen fouten terug te vinden. Wat ik wel zie aan de hand van Firebug is dat de POST methode bij het wijzigen van de slider niet uitgevoerd wordt, terwijl als ik op de Aan / Uit knop druk van de rolluiken ik de POST wel zie verschijnen in Firebug. Ik zit dus compleet vast

. Heb ook al gecheckt als al mijn <div>'s gesloten zijn, en voor zover ik kon zijn zag dit er ook goed uit.

Om het wat visueler voor te stellen heb ik een Fiddle gemaakt waarbij je kan zien wat er net gebeurt: http://jsfiddle.net/Argon007/JUZM9/