distinguish advanced and standard settings, cleanup checkboxes

domain-server/resources/describe-settings.json

@@ -56,64 +56,73 @@
         "type": "checkbox",
         "label": "Dynamic Jitter Buffers",
         "help": "Dynamically buffer client audio based on perceived jitter in packet receipt timing",
-        "default": false
+        "default": false,
+        "advanced": true
       },
       {
         "name": "static-desired-jitter-buffer-frames",
         "label": "Static Desired Jitter Buffer Frames",
         "help": "If dynamic jitter buffers is disabled, this determines the target number of frames maintained by the AudioMixer's jitter buffers",
         "placeholder": "1",
-        "default": "1"
+        "default": "1",
+        "advanced": true
       },
       {
         "name": "max-frames-over-desired",
         "label": "Max Frames Over Desired",
         "help": "The highest number of frames an AudioMixer's ringbuffer can exceed the desired jitter buffer frames by",
         "placeholder": "10",
-        "default": "10"
+        "default": "10",
+        "advanced": true
       },
       {
         "name": "use-stdev-for-desired-calc",
         "type": "checkbox",
         "label": "Use Stdev for Desired Jitter Frames Calc:",
         "help": "If checked, Philip's method (stdev of timegaps) is used to calculate desired jitter frames. Otherwise, Fred's method (max timegap) is used",
-        "default": false
+        "default": false,
+        "advanced": true
       },
       {
         "name": "window-starve-threshold",
         "label": "Window Starve Threshold",
         "help": "If this many starves occur in an N-second window (N is the number in the next field), then the desired jitter frames will be re-evaluated using Window A.",
         "placeholder": "3",
-        "default": "3"
+        "default": "3",
+        "advanced": true
       },
       {
         "name": "window-seconds-for-desired-calc-on-too-many-starves",
         "label": "Timegaps Window (A) Seconds:",
         "help": "Window A contains a history of timegaps. Its max timegap is used to re-evaluate the desired jitter frames when too many starves occur within it.",
         "placeholder": "50",
-        "default": "50"
+        "default": "50",
+        "advanced": true
       },
       {
         "name": "window-seconds-for-desired-reduction",
         "label": "Timegaps Window (B) Seconds:",
         "help": "Window B contains a history of timegaps. Its max timegap is used as a ceiling for the desired jitter frames value.",
         "placeholder": "10",
-        "default": "10"
+        "default": "10",
+        "advanced": true
       },
       {
         "name": "repetition-with-fade",
         "type": "checkbox",
         "label": "Repetition with Fade:",
         "help": "If enabled, dropped frames and mixing during starves will repeat the last frame, eventually fading to silence",
-        "default": false
+        "default": false,
+        "advanced": true
       },
       {
         "name": "I-print-stream-stats",
         "type": "checkbox",
         "label": "Print Stream Stats:",
         "help": "If enabled, audio upstream and downstream stats of each agent will be printed each second to stdout",
-        "default": false
+        "default": false,
-      }        
+        "advanced": true
+      }
     ]
   }
 ]

domain-server/resources/web/js/settings.js

@@ -1,5 +1,34 @@
 var Settings = {};
 
+var viewHelpers = {
+  getFormGroup: function(groupName, setting, values){
+    setting_id = groupName + "." + setting.name
+    
+    var form_group = "<div class='form-group'>"
+    
+    
+    if (setting.type === 'checkbox') {
+      checked_box = _.has(values, groupName) ? values[groupName][setting.name] : setting.default
+      
+      form_group += "<label class='control-label'>" + setting.label + "</label>"
+      form_group += "<div class='checkbox'>"
+      form_group += "<label for='" + setting_id + "'>"
+      form_group += "<input type='checkbox' id='" + setting_id + "' " + (checked_box ? "checked" : "") + "/>"
+      form_group += " " + setting.help + "</label>";
+      form_group += "</div>"
+    } else {
+      form_group += "<label for='" + setting_id + "' class='control-label'>" + setting.label + "</label>";
+      form_group += "<input type='text' class='form-control' id='" + setting_id + 
+        "' placeholder='" + setting.placeholder + "' value='" + (values[groupName] || {})[setting.name] + "'/>"
+      form_group += "<span class='help-block'>" + setting.help + "</span>" 
+    }
+    
+    
+    form_group += "</div>"
+    return form_group
+  }
+}
+
 $(document).ready(function(){  
   /*
   * Clamped-width. 
@@ -22,28 +51,30 @@ $(document).ready(function(){
   });
   
   
-  var panelsSource = $('#panels-template').html();
+  var panelsSource = $('#panels-template').html()
-  Settings.panelsTemplate = _.template(panelsSource);
+  Settings.panelsTemplate = _.template(panelsSource)
   
-  var sidebarTemplate = $('#list-group-template').html();
+  var sidebarTemplate = $('#list-group-template').html()
-  Settings.sidebarTemplate = _.template(sidebarTemplate);
+  Settings.sidebarTemplate = _.template(sidebarTemplate)
   
-  $('body').scrollspy({ target: '#setup-sidebar', offset: 60 });
+  $('body').scrollspy({ target: '#setup-sidebar', offset: 60 })
   
-  reloadSettings();
+  reloadSettings()
 });
 
 function reloadSettings() {
   $.getJSON('/settings.json', function(data){
+    _.extend(data, viewHelpers)
+    
     $('.nav-stacked').html(Settings.sidebarTemplate(data))
-    $('#panels').html(Settings.panelsTemplate(data));
+    $('#panels').html(Settings.panelsTemplate(data))
     
     $('.nav-stacked li').each(function(){
-      $(this).removeClass('active');
+      $(this).removeClass('active')
     });
     
     $('.nav-stacked li:first-child').addClass('active');
-    $('body').scrollspy('refresh');
+    $('body').scrollspy('refresh')
   });
 }
 

domain-server/resources/web/settings/index.shtml

@@ -25,7 +25,7 @@
   </div>
   
   <div class="col-md-10 col-sm-10">
-    <form class="form-horizontal" id="settings-form" role="form">
+    <form id="settings-form" role="form">
   
       <script id="panels-template" type="text/template">
         <% _.each(descriptions, function(group){ %>
@@ -34,30 +34,8 @@
               <h3 class="panel-title"><%- group.label %></h3>
             </div>
             <div class="panel-body">
-              <% _.each(group.settings, function(setting){ %>
+              <% _.each(group.settings, function(setting) { %>
-                <div class="form-group">
+                <%= getFormGroup(group.name, setting, values) %>
-                  <% var setting_id = group.name + "." + setting.name %>
-                  <label for="<%- setting_id %>" class="col-sm-2 control-label"><%- setting.label %></label>
-                  <div class="col-sm-10">
-                    <% if (setting.type === "checkbox") { %>
-                    <% var checked_box = _.has(values, group.name) ? values[group.name][setting.name] : setting.default %>
-                      <input type="checkbox" id="<%- setting_id %>" <%- checked_box ? "checked" : "" %>>
-                    <% } else { %>
-                      <% if (setting.input_addon) { %>
-                        <div class="input-group">
-                          <div class="input-group-addon"><%- setting.input_addon %></div>
-                      <% } %>
-                      <input type="text" class="form-control" id="<%- setting_id %>" 
-                        placeholder="<%- setting.placeholder %>" 
-                        value="<%- (values[group.name] || {})[setting.name] %>">
-                  
-                      <% if (setting.input_addon) { %>
-                        </div>
-                      <% } %>
-                    <% } %>
-                  </div>
-                  <p class="help-block col-sm-offset-2 col-sm-10"><%= setting.help %></p>
-                </div>
               <% }); %>
             </div>
           </div>
@@ -70,7 +48,7 @@
 </div>
 
 <!--#include virtual="footer.html"-->
+<script src='/js/underscore-min.js'></script>
 <script src='/js/settings.js'></script>
 <script src='/js/form2js.min.js'></script>
-<script src='/js/underscore-min.js'></script>
 <!--#include virtual="page-end.html"-->