Toggle-Buttons for Component Remote Control (#677) (#778)

* Toggle-Buttons for Component Remote Control (#677)

* Update remote.js

* Handle Component Updates individually

* Avoid unnecessary updates

Co-authored-by: brindosch <edeltraud70@gmx.de>
This commit is contained in:
LordGrey 2020-05-12 19:56:06 +02:00 committed by GitHub
parent 9e149308f4
commit 9472860868
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 120 additions and 28 deletions

View File

@ -18,7 +18,7 @@
performTranslation(); performTranslation();
var si = sysInfo.hyperion; var si = sysInfo.hyperion;
var libs = { "Bootstrap 3": "http://getbootstrap.com/", "JQuery": "https://jquery.com/", "Bootstrap Colorpicker": "https://itsjavi.com/bootstrap-colorpicker/", "JSON-Editor": "http://jeremydorn.com/json-editor/", "jQuery.i18n": "https://github.com/wikimedia/jquery.i18n", "metisMenu": "http://mm.onokumus.com/index.html", "download.js": "http://danml.com/download.html", "gijgo": "http://gijgo.com/" }; var libs = { "Bootstrap 3": "http://getbootstrap.com/", "JQuery": "https://jquery.com/", "Bootstrap Colorpicker": "https://itsjavi.com/bootstrap-colorpicker/", "Bootstrap Toggle": "https://www.bootstraptoggle.com/", "JSON-Editor": "http://jeremydorn.com/json-editor/", "jQuery.i18n": "https://github.com/wikimedia/jquery.i18n", "metisMenu": "http://mm.onokumus.com/index.html", "download.js": "http://danml.com/download.html", "gijgo": "http://gijgo.com/" };
var libh = ""; var libh = "";
var lang = []; var lang = [];
var dcount = 0; var dcount = 0;

View File

@ -0,0 +1,28 @@
/*! ========================================================================
* Bootstrap Toggle: bootstrap-toggle.css v2.2.0
* http://www.bootstraptoggle.com
* ========================================================================
* Copyright 2014 Min Hur, The New York Times Company
* Licensed under MIT
* ======================================================================== */
.checkbox label .toggle,.checkbox-inline .toggle{margin-left:-20px;margin-right:5px}
.toggle{position:relative;overflow:hidden}
.toggle input[type=checkbox]{display:none}
.toggle-group{position:absolute;width:200%;top:0;bottom:0;left:0;transition:left .35s;-webkit-transition:left .35s;-moz-user-select:none;-webkit-user-select:none}
.toggle.off .toggle-group{left:-100%}
.toggle-on{position:absolute;top:0;bottom:0;left:0;right:50%;margin:0;border:0;border-radius:0}
.toggle-off{position:absolute;top:0;bottom:0;left:50%;right:0;margin:0;border:0;border-radius:0}
.toggle-handle{position:relative;margin:0 auto;padding-top:0;padding-bottom:0;height:100%;width:0;border-width:0 1px}
.toggle.btn{min-width:59px;min-height:34px}
.toggle-on.btn{padding-right:24px}
.toggle-off.btn{padding-left:24px}
.toggle.btn-lg{min-width:79px;min-height:45px}
.toggle-on.btn-lg{padding-right:31px}
.toggle-off.btn-lg{padding-left:31px}
.toggle-handle.btn-lg{width:40px}
.toggle.btn-sm{min-width:50px;min-height:30px}
.toggle-on.btn-sm{padding-right:20px}
.toggle-off.btn-sm{padding-left:20px}
.toggle.btn-xs{min-width:35px;min-height:22px}
.toggle-on.btn-xs{padding-right:12px}
.toggle-off.btn-xs{padding-left:12px}

View File

@ -12,7 +12,6 @@ body{font-family:Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:15
body{ body{
overflow-y: scroll; overflow-y: scroll;
} }
.btn{margin: 2px 0;}
/* /*
#page-wrapper a[target=_blank]::after { #page-wrapper a[target=_blank]::after {
content:"\f08e"; content:"\f08e";
@ -217,6 +216,8 @@ table label{margin:0}
} }
/*simple ripple effect for li a and btn*/ /*simple ripple effect for li a and btn*/
/* Breaks Bootstrap toggle; position: relative */
/*
.btn, li a{ .btn, li a{
position: relative; position: relative;
overflow: hidden; overflow: hidden;
@ -264,6 +265,7 @@ li a:active:after {
opacity: .2; opacity: .2;
transition: 0s; transition: 0s;
} }
*/
/*Bootstrap callouts*/ /*Bootstrap callouts*/
.bs-callout { .bs-callout {

View File

@ -36,7 +36,6 @@
<!-- Colorpicker --> <!-- Colorpicker -->
<script src="js/lib/bootstrap-colorpicker.min.js"></script> <script src="js/lib/bootstrap-colorpicker.min.js"></script>
<link href="css/bootstrap-colorpicker.min.css" rel="stylesheet">
<!-- BS Notfiy --> <!-- BS Notfiy -->
<script src="js/lib/bootstrap-notify.min.js"></script> <script src="js/lib/bootstrap-notify.min.js"></script>
@ -54,6 +53,11 @@
<!-- Bootstrap Core CSS --> <!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-colorpicker.min.css" rel="stylesheet">
<!-- BSToggle -->
<script src="js/lib/bootstrap-toggle.min.js"></script>
<link href="css/bootstrap-toggle.min.css" rel="stylesheet">
<!-- MetisMenu CSS --> <!-- MetisMenu CSS -->
<link href="css/metisMenu.css" rel="stylesheet"> <link href="css/metisMenu.css" rel="stylesheet">

View File

@ -221,7 +221,7 @@ $(document).ready(function () {
} }
}); });
// notify the update // notify the update
$(window.hyperion).trigger("components-updated"); $(window.hyperion).trigger("components-updated", event.response.data);
}); });
$(window.hyperion).on("cmd-instance-update", function (event) { $(window.hyperion).on("cmd-instance-update", function (event) {

View File

@ -203,7 +203,7 @@ $(document).ready(function() {
} }
} }
function updateComponents() function initComponents()
{ {
var components = window.comps; var components = window.comps;
var hyperionEnabled = true; var hyperionEnabled = true;
@ -214,32 +214,77 @@ $(document).ready(function() {
} }
}); });
// create buttons for (const comp of components)
$('#componentsbutton').html("");
for (var idx=0; idx<components.length;idx++)
{ {
if(components[idx].name == "ALL") if(comp.name === "ALL")
continue; continue;
var enable_style = (components[idx].enabled? "btn-success" : "btn-danger"); const enable_style = (comp.enabled? "checked" : "");
var enable_icon = (components[idx].enabled? "fa-play" : "fa-stop"); const comp_btn_id = "comp_btn_"+comp.name;
var comp_name = components[idx].name;
var comp_btn_id = "comp_btn_"+comp_name;
var comp_goff = hyperionEnabled? "enabled" : "disabled";
// create btn if not there if ($("#"+comp_btn_id).length === 0)
if ($("#"+comp_btn_id).length == 0)
{ {
var d='<span style="display:block;margin:3px"><button type="button" '+comp_goff+' id="'+comp_btn_id+'" class="btn '+enable_style var d='<span style="display:block;margin:3px">'
+'" onclick="requestSetComponentState(\''+comp_name+'\','+(!components[idx].enabled) +'<input id="'+comp_btn_id+'"'+enable_style+' type="checkbox"'
+')"><i id="'+comp_btn_id+'_icon" class="fa '+enable_icon+'"></i></button> '+$.i18n('general_comp_'+components[idx].name)+'</span>'; +'data-toggle="toggle" data-onstyle="success" data-on="'+$.i18n('general_btn_on')+'" data-off="'+$.i18n('general_btn_off')+'">'
+'&nbsp;&nbsp;&nbsp;<label>'+$.i18n('general_comp_'+comp.name)+'</label>'
+'</span>';
$('#componentsbutton').append(d); $('#componentsbutton').append(d);
$(`#${comp_btn_id}`).bootstrapToggle();
$(`#${comp_btn_id}`).bootstrapToggle(hyperionEnabled ? "enable" : "disable")
$(`#${comp_btn_id}`).change(e => {
requestSetComponentState(e.currentTarget.id.split('_').pop(), e.currentTarget.checked)
//console.log(e.currentTarget.checked)
});
} }
else // already create, update state }
}
function updateComponent( component )
{ {
setClassByBool( $('#'+comp_btn_id) , components[idx].enabled, "btn-danger", "btn-success" ); if (component.name == "ALL")
setClassByBool( $('#'+comp_btn_id+"_icon"), components[idx].enabled, "fa-stop" , "fa-play" ); {
$('#'+comp_btn_id).attr("onclick",'requestSetComponentState(\''+comp_name+'\','+(!components[idx].enabled)+')').attr(comp_goff); var components = window.comps;
hyperionEnabled = component.enabled
for (const comp of components)
{
if(comp.name === "ALL")
continue;
const comp_btn_id = "comp_btn_"+comp.name;
if ( !hyperionEnabled )
{
$(`#${comp_btn_id}`).bootstrapToggle('off');
$(`#${comp_btn_id}`).bootstrapToggle("disable");
}
else
{
$(`#${comp_btn_id}`).bootstrapToggle("enable");
if ( comp.enabled !== $(`#${comp_btn_id}`).prop("checked") )
{
$(`#${comp_btn_id}`).bootstrapToggle().prop('checked', comp.enabled).change();
}
}
}
}
else
{
const comp_btn_id = "comp_btn_"+component.name;
//console.log ("updateComponent: ", component.name, "Current Checked: ", $(`#${comp_btn_id}`).prop("checked"), "New Checked: ", component.enabled, );
// In case Buttons were disabled before, status may be different to component status
if ( component.enabled != $(`#${comp_btn_id}`).prop("checked") )
{
// console.log ("Update status to Checked = ", component.enabled);
if ( component.enabled )
$(`#${comp_btn_id}`).bootstrapToggle("on");
else
$(`#${comp_btn_id}`).bootstrapToggle("off");
} }
} }
} }
@ -345,14 +390,18 @@ $(document).ready(function() {
}); });
//force first update //force first update
updateComponents(); initComponents();
updateInputSelect(); updateInputSelect();
updateLedMapping(); updateLedMapping();
updateVideoMode(); updateVideoMode();
updateEffectlist(); updateEffectlist();
// interval updates // interval updates
$(window.hyperion).on("components-updated",updateComponents);
$(window.hyperion).on('components-updated', function(e, comp){
//console.log ("components-updated", e, comp);
updateComponent (comp);
});
$(window.hyperion).on("cmd-priorities-update", function(event){ $(window.hyperion).on("cmd-priorities-update", function(event){
window.serverInfo.priorities = event.response.data.priorities; window.serverInfo.priorities = event.response.data.priorities;

View File

@ -0,0 +1,9 @@
/*! ========================================================================
* Bootstrap Toggle: bootstrap-toggle.js v2.2.0
* http://www.bootstraptoggle.com
* ========================================================================
* Copyright 2014 Min Hur, The New York Times Company
* Licensed under MIT
* ======================================================================== */
+function(a){"use strict";function b(b){return this.each(function(){var d=a(this),e=d.data("bs.toggle"),f="object"==typeof b&&b;e||d.data("bs.toggle",e=new c(this,f)),"string"==typeof b&&e[b]&&e[b]()})}var c=function(b,c){this.$element=a(b),this.options=a.extend({},this.defaults(),c),this.render()};c.VERSION="2.2.0",c.DEFAULTS={on:"On",off:"Off",onstyle:"primary",offstyle:"default",size:"normal",style:"",width:null,height:null},c.prototype.defaults=function(){return{on:this.$element.attr("data-on")||c.DEFAULTS.on,off:this.$element.attr("data-off")||c.DEFAULTS.off,onstyle:this.$element.attr("data-onstyle")||c.DEFAULTS.onstyle,offstyle:this.$element.attr("data-offstyle")||c.DEFAULTS.offstyle,size:this.$element.attr("data-size")||c.DEFAULTS.size,style:this.$element.attr("data-style")||c.DEFAULTS.style,width:this.$element.attr("data-width")||c.DEFAULTS.width,height:this.$element.attr("data-height")||c.DEFAULTS.height}},c.prototype.render=function(){this._onstyle="btn-"+this.options.onstyle,this._offstyle="btn-"+this.options.offstyle;var b="large"===this.options.size?"btn-lg":"small"===this.options.size?"btn-sm":"mini"===this.options.size?"btn-xs":"",c=a('<label class="btn">').html(this.options.on).addClass(this._onstyle+" "+b),d=a('<label class="btn">').html(this.options.off).addClass(this._offstyle+" "+b+" active"),e=a('<span class="toggle-handle btn btn-default">').addClass(b),f=a('<div class="toggle-group">').append(c,d,e),g=a('<div class="toggle btn" data-toggle="toggle">').addClass(this.$element.prop("checked")?this._onstyle:this._offstyle+" off").addClass(b).addClass(this.options.style);this.$element.wrap(g),a.extend(this,{$toggle:this.$element.parent(),$toggleOn:c,$toggleOff:d,$toggleGroup:f}),this.$toggle.append(f);var h=this.options.width||Math.max(c.outerWidth(),d.outerWidth())+e.outerWidth()/2,i=this.options.height||Math.max(c.outerHeight(),d.outerHeight());c.addClass("toggle-on"),d.addClass("toggle-off"),this.$toggle.css({width:h,height:i}),this.options.height&&(c.css("line-height",c.height()+"px"),d.css("line-height",d.height()+"px")),this.update(!0),this.trigger(!0)},c.prototype.toggle=function(){this.$element.prop("checked")?this.off():this.on()},c.prototype.on=function(a){return this.$element.prop("disabled")?!1:(this.$toggle.removeClass(this._offstyle+" off").addClass(this._onstyle),this.$element.prop("checked",!0),void(a||this.trigger()))},c.prototype.off=function(a){return this.$element.prop("disabled")?!1:(this.$toggle.removeClass(this._onstyle).addClass(this._offstyle+" off"),this.$element.prop("checked",!1),void(a||this.trigger()))},c.prototype.enable=function(){this.$toggle.removeAttr("disabled"),this.$element.prop("disabled",!1)},c.prototype.disable=function(){this.$toggle.attr("disabled","disabled"),this.$element.prop("disabled",!0)},c.prototype.update=function(a){this.$element.prop("disabled")?this.disable():this.enable(),this.$element.prop("checked")?this.on(a):this.off(a)},c.prototype.trigger=function(b){this.$element.off("change.bs.toggle"),b||this.$element.change(),this.$element.on("change.bs.toggle",a.proxy(function(){this.update()},this))},c.prototype.destroy=function(){this.$element.off("change.bs.toggle"),this.$toggleGroup.remove(),this.$element.removeData("bs.toggle"),this.$element.unwrap()};var d=a.fn.bootstrapToggle;a.fn.bootstrapToggle=b,a.fn.bootstrapToggle.Constructor=c,a.fn.toggle.noConflict=function(){return a.fn.bootstrapToggle=d,this},a(function(){a("input[type=checkbox][data-toggle^=toggle]").bootstrapToggle()}),a(document).on("click.bs.toggle","div[data-toggle^=toggle]",function(b){var c=a(this).find("input[type=checkbox]");c.bootstrapToggle("toggle"),b.preventDefault()})}(jQuery);
//# sourceMappingURL=bootstrap-toggle.min.js.map