Added: radio button implementation

examples/dummy-web-server.pl

@@ -12,7 +12,7 @@ my $ledLabel   : shared = "LED is turned off";
 my $ledFreq    : shared = 10;
 my @ledHistory : shared;
 my $startTime  : shared = time;
-
+my $pattern    : shared = "50_50";
 
 # auto-flush on socket
 $| = 1;
@@ -401,13 +401,21 @@ sub process_user_comm_led
     if( exists $http->{postArgs}{frequency} )
     {
       $ledFreq = $http->{postArgs}{frequency};
-      led_add_history("Set LED frequency to $ledFreq Hz");
+      led_add_history("Set frequency to $ledFreq Hz");
+    }
+    if( exists $http->{postArgs}{pattern} )
+    {
+      $pattern = $http->{postArgs}{pattern};
+      my $out = $pattern;
+      $out =~ s/_/\% - /;
+      $out .= "%";
+      led_add_history("Set pattern to $out");
     }
     return simple_response(204, "OK");
   }
   elsif( $http->{urlArgs}{reason} eq "load" )
   {
-    $loadData = ', "frequency": ' . $ledFreq; 
+    $loadData = ', "frequency": ' . $ledFreq . ', "pattern": "' . $pattern . '"'; 
   }
 
   my $list = ", \"led_history\": [" . join(", ", map { "\"$_\"" } @ledHistory ) . "]";

examples/web-server/LED.html

@@ -3,21 +3,32 @@
   </div>
 
   <div class="content">
-    <p>
-      <button id="btn_on" type="button">Turn on</button>
-      <button id="btn_blink" type="button">Start blinking</button>
-      <button id="btn_off" type="button">Turn off</button>
-    </p>
-    <p id="text"/>
-    <p>
-      <form>
-        Frequency:
-        <input type="range" name="frequency" min="1" max="25">
-        <input type="submit">
-      </form>
-    </p>
-    <p>
-      <ul id="led_history"/>
-    </p>
+    <div class="pure-g"><div class="pure-u-1 pure-u-md-1-2">
+      <div class="card">
+        <h1>Control</h1>
+        <button id="btn_on" type="button">Turn on</button>
+        <button id="btn_blink" type="button">Start blinking</button>
+        <button id="btn_off" type="button">Turn off</button>
+        <p id="text"/>
+      </div>
+      <div class="card">
+        <h1>Frequency and pattern</h1>
+        <form>
+          <b>Pattern:</b><br/>
+          <input type="radio" name="pattern" value="25_75">25% on 75% off</input><br/>
+          <input type="radio" name="pattern" value="50_50">50% on 50% off</input><br/>
+          <input type="radio" name="pattern" value="75_25">75% on 25% off</input><br/>
+        
+          <b>Frequency:</b><br/>
+          <input type="range" name="frequency" min="1" max="25"><br/>
+          <input type="submit">
+        </form>
+      </div></div>
+      <div class="pure-u-1 pure-u-md-1-2">
+      <div class="card" style="min-height: 400px">
+        <h1>Logs</h1>
+        <ul id="led_history"/>
+      </div>      
+    </div></div>
   </div>
 </body></html>

html/userpage.js

@@ -12,7 +12,14 @@ function notifyResponse( data )
       var el = elems[ndx];
       if(el.tagName == "INPUT")
       {
-        el.value = data[v];
+        if( el.type == "radio" )
+        {
+          el.checked = data[v] == el.value;
+        }
+        else
+        {
+          el.value = data[v];
+        }
       }
     }
     var elem = document.getElementById(v);
@@ -20,18 +27,18 @@ function notifyResponse( data )
     {
       if(elem.tagName == "P" || elem.tagName == "DIV")
       {
-	elem.innerHTML = data[v];
+        elem.innerHTML = data[v];
       }
       if(elem.tagName == "UL" || elem.tagName == "OL")
       {
-	var list = data[v];
-	var html = "";
+        var list = data[v];
+        var html = "";
 
-	for (var i=0; i<list.length; i++) {
+        for (var i=0; i<list.length; i++) {
           html = html.concat("<li>" + list[i] + "</li>");
         }
 
-	elem.innerHTML = html;
+        elem.innerHTML = html;
       }
     }
   });
@@ -49,8 +56,8 @@ function refreshFormData()
       notifyResponse(resp);
       if( loadCounter > 0 )
       {
-	loadCounter--;
-	refreshFormData();
+        loadCounter--;
+        refreshFormData();
       }
     } );
   } , 250);