From cfc97d433357f3eacd067e0e1a6a5f8fd3c82308 Mon Sep 17 00:00:00 2001 From: penfold42 <penfold42@users.noreply.github.com> Date: Sun, 6 Jan 2019 20:01:02 +1100 Subject: [PATCH] html cleanups --- html/index.html | 27 +++++++++++++-------------- html/script.js | 19 +++++++++++++++---- 2 files changed, 28 insertions(+), 18 deletions(-) diff --git a/html/index.html b/html/index.html index a156e66e1..09dd0284f 100644 --- a/html/index.html +++ b/html/index.html @@ -154,28 +154,27 @@ <label class="control-label col-sm-2" for="p_count">Physical Pixels</label> <div class="col-sm-10"><input type="text" class="form-control" id="p_count" name="p_count" placeholder="Enter number of pixels" onchange="refreshPixel()"></div> </div> - <div class="form-group"> - <label class="control-label col-sm-2" for="p_groupMode">Output Grouping</label> - <div class="col-sm-10"> - <select class="form-control" id="p_groupMode" name="p_groupMode"></select> - </div> - </div> - <div class="form-group"> - <label class="control-label col-sm-2" for="p_groupsize">Group Size</label> - <div class="col-sm-10"><input type="text" class="form-control" id="p_groupsize" name="p_groupsize" placeholder="Group size of pixels" onchange="refreshPixel()"></div> - </div> + <div class="form-group"> <label class="control-label col-sm-2" for="p_type">Pixel Type</label> - <div class="col-sm-10"> + <div class="col-sm-3"> <select class="form-control" id="p_type" name="p_type" onclick="refreshPixel()"></select> </div> - </div> - <div class="form-group"> <label class="control-label col-sm-2" for="p_color">Color Order</label> - <div class="col-sm-10"> + <div class="col-sm-3"> <select class="form-control" id="p_color" name="p_color"></select> </div> </div> + + <div class="form-group" id="o_grouping"> + <label class="control-label col-sm-2" for="p_groupMode">Output Grouping</label> + <div class="col-sm-3"> + <select class="form-control" id="p_groupMode" name="p_groupMode"></select> + </div> + <label class="control-label col-sm-2" for="p_groupSize">Group Size</label> + <div class="col-sm-3"><input type="text" class="form-control" id="p_groupSize" name="p_groupSize" placeholder="Group size of pixels" onchange="refreshPixel()"></div> + </div> + <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <div class="checkbox"><label><input type="checkbox" id="p_gamma" name="p_gamma"> Gamma Correction</label></div> diff --git a/html/script.js b/html/script.js index 369fe6621..8dff5cbba 100644 --- a/html/script.js +++ b/html/script.js @@ -157,12 +157,23 @@ $(function() { } }); + // Group type toggles + $('#p_groupMode').change(function() { + if ($('select[name=p_groupMode]').val() == '0') + $('#p_groupSize').prop('disabled', true); + else + $('#p_groupSize').prop('disabled', false); + }); + // Pixel type toggles $('#p_type').change(function() { - if ($('select[name_type]').val() == '1') + if ($('select[name=p_type]').val() == '1') { $('#p_color').prop('disabled', true); - else + $('#o_grouping').addClass('hidden'); + } else { $('#p_color').prop('disabled', false); + $('#o_grouping').removeClass('hidden'); + } }); // Serial protocol toggles @@ -527,10 +538,10 @@ function getConfig(data) { mode = 'pixel'; $('#o_pixel').removeClass('hidden'); $('#p_count').val(config.e131.channel_count / 3); - $('#p_groupsize').val(config.pixel.groupSize); $('#p_type').val(config.pixel.type); $('#p_color').val(config.pixel.color); $('#p_groupMode').val(config.pixel.groupMode); + $('#p_groupSize').val(config.pixel.groupSize); $('#p_gamma').prop('checked', config.pixel.gamma); $('#p_gammaVal').val(config.pixel.gammaVal); $('#p_briteVal').val(config.pixel.briteVal); @@ -725,8 +736,8 @@ function submitConfig() { 'pixel': { 'type': parseInt($('#p_type').val()), 'color': parseInt($('#p_color').val()), - 'groupSize': parseInt($('#p_groupsize').val()), 'groupMode': parseInt($('#p_groupMode').val()), + 'groupSize': parseInt($('#p_groupSize').val()), 'gamma': $('#p_gamma').prop('checked'), 'gammaVal': parseFloat($('#p_gammaVal').val()), 'briteVal': parseFloat($('#p_briteVal').val())