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>
+    <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>
         <p id="text"/>
-    <p>
+      </div>
+      <div class="card">
+        <h1>Frequency and pattern</h1>
         <form>
-        Frequency:
-        <input type="range" name="frequency" min="1" max="25">
+          <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>
-    </p>
-    <p>
+      </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"/>
-    </p>
+      </div>      
+    </div></div>
   </div>
 </body></html>

html/userpage.js

@@ -11,10 +11,17 @@ function notifyResponse( data )
     {
       var el = elems[ndx];
       if(el.tagName == "INPUT")
+      {
+        if( el.type == "radio" )
+        {
+          el.checked = data[v] == el.value;
+        }
+        else
         {
           el.value = data[v];
         }
       }
+    }
     var elem = document.getElementById(v);
     if( elem != null )
     {