diff --git a/fhem/CHANGED b/fhem/CHANGED index f8a350e96..8a02c6b08 100644 --- a/fhem/CHANGED +++ b/fhem/CHANGED @@ -1,5 +1,9 @@ # Add changes at the top of the list. Keep it in ASCII, and 80-char wide. # Do not insert empty lines here, update check depends on it. + - feature: fhemweb_iconRadio.js: optionally colorize selected icons instead + of its background by prefix use4icon@ + - feature: fhemweb_iconButtons.js: optionally colorize selected icons instead + of its background by prefix use4icon@ - feature: 93_DbRep: V5.8.5, attr device can be a devspec, attr reading can be a list (pls. see commandref), minor fixes - update: 46_TeslaPowerwall2AC.pm: new formula to calculate batteryPower diff --git a/fhem/www/pgm2/fhemweb_iconButtons.js b/fhem/www/pgm2/fhemweb_iconButtons.js index a0676e867..bc09606fe 100644 --- a/fhem/www/pgm2/fhemweb_iconButtons.js +++ b/fhem/www/pgm2/fhemweb_iconButtons.js @@ -23,6 +23,12 @@ FW_iconButtonsCreate(elName, devName, vArr, currVal, set, params, cmd) return undefined; var ipar = 2; + var use4icon = false; + if(vArr[1].match(/^use4icon@/)) { + use4icon = true; + vArr[1] = vArr[1].replace(/^use4icon@/,""); + } + if( vArr[1].match(/^[A-F0-9]{6}$/)) vArr[1] = "#"+vArr[1]; @@ -50,21 +56,48 @@ FW_iconButtonsCreate(elName, devName, vArr, currVal, set, params, cmd) $(newEl).append(label); $(button).change(clicked); + + if( currVal ) + button.prop("checked", currVal.match(new RegExp('(^|,)'+vArr[i]+'($|,)') ) ); } $(newEl).buttonset(); $(newEl).find("label").css({"margin":"0","border":"0","border-radius":"4px","background":"inherit"}); - $(newEl).find("span").css({"padding":"0.0em 0.3em"}); - - $(newEl).find("label").each(function(ind,val){ - $(val).addClass("iconButtons_widget"); + $(newEl).find("span").css({"padding":"0.0em 0.3em"}) + .attr( "selectcolor",use4icon ? vArr[1] : ""); + $(newEl).find("input").each(function(ind,val){ + $(val).next().find("span").attr("ischecked",$(val).prop("checked")); + }); + $(newEl).find("Label").each(function(ind,val){ + $(val).addClass("iconButtons_widget") var ico = vArr[ind*ipar+3]; + var m = ico.match(/.*@(.*)/); + var uscol = m[1]; + if( uscol.match(/^[A-F0-9]{6}$/)) + uscol = "#"+uscol; + $(val).find("span").attr( "unselectcolor",uscol); + FW_cmd(FW_root+"?cmd={FW_makeImage('"+ico+"')}&XHR=1",function(data){ data = data.replace(/\n$/,''); $(newEl).find("label").each(function(ind,val){ + var span = $(val).find("span"); + var sc = $(span).attr("selectcolor"); + var usc = $(span).attr("unselectcolor"); + var isc = $(span).attr("ischecked"); var re = new RegExp("\"\s?"+$(val).attr("name")+"(\s?|\")","i"); if (!(data.match(re) === null) && ($(val).find("span").html().match(re) === null)) { + if(isc == "true") { + if(sc.length > 0) { + data = data.replace(/fill=\".*?\"/,'fill="'+sc+'"') + .replace(/fill:.*?[;\s]/,'fill:'+sc+';'); + } + } else { + if(sc.length > 0) { + data = data.replace(/fill=\".*?\"/,'fill="'+usc+'"') + .replace(/fill:.*?[;\s]/,'fill:'+usc+';'); + } + } $(val).find("span").addClass("iconButtons_widget").html(data); return false; } @@ -79,26 +112,52 @@ FW_iconButtonsCreate(elName, devName, vArr, currVal, set, params, cmd) newEl.getValueFn = function(arg) { var new_val=""; for( var i = 0; i < buttons.length; ++i ) { var button = buttons[i]; + var span = button.next().find("span"); + var sc = $(span).attr("selectcolor"); if( $(button).prop("checked") ) { + if(sc.length > 0) { + var html = $(span).html().replace(/fill=\".*?\"/,"fill=\""+sc+"\"") + .replace(/fill:.*?[;\s]/,"fill:"+sc+";"); + $(span).html(html); + } else { button.next().css({"background-color":vArr[1]}); + } if( new_val ) new_val += ','; new_val += $(button).button( "option", "label") } } - if( !new_val ) return ','; - return new_val; + if( !new_val ) return ','; + return new_val; }; - newEl.setValueFn = function(arg){ if( !arg ) arg = ','; + newEl.setValueFn = function(arg){ if( !arg ) arg = ','; if( hidden ) hidden.attr("value", arg); for( var i = 0; i < buttons.length; ++i ) { var button = buttons[i]; + var span = button.next().find("span"); + var sc = $(span).attr("selectcolor"); + var usc = $(span).attr("unselectcolor"); + if( usc.match(/^[A-F0-9]{6}$/)) + usc = "#"+usc; button.prop("checked", arg.match(new RegExp('(^|,)'+vArr[i*ipar+2]+'($|,)') ) ); if (button.prop("checked")==true){ - button.next().css({"background-color":vArr[1]}); + if(sc.length > 0) { + var html = $(span).html().replace(/fill=\".*?\"/,"fill=\""+sc+"\"") + .replace(/fill:.*?[;\s]/,"fill:"+sc+";"); + $(span).html(html); + } else { + button.next().css({"background-color":vArr[1]}); + } } else { - button.next().css({"background-color":"inherit"}); + if(sc.length > 0) { + var html = $(span).html().replace(/fill=\".*?\"/,'fill="'+usc+'"') + .replace(/fill:.*?[;\s]/,'fill:'+usc+';'); + $(span).html(html); + + } else { + button.next().css({"background-color":"inherit"}); + } } button.button("refresh"); } diff --git a/fhem/www/pgm2/fhemweb_iconRadio.js b/fhem/www/pgm2/fhemweb_iconRadio.js index ae5b8bb6d..0a9a27a53 100644 --- a/fhem/www/pgm2/fhemweb_iconRadio.js +++ b/fhem/www/pgm2/fhemweb_iconRadio.js @@ -23,8 +23,15 @@ FW_iconRadioCreate(elName, devName, vArr, currVal, set, params, cmd) return undefined; var ipar = 2; + var use4icon = false; + if(vArr[1].match(/^use4icon@/)) { + use4icon = true; + vArr[1] = vArr[1].replace(/^use4icon@/,""); + } + if( vArr[1].match(/^[A-F0-9]{6}$/)) vArr[1] = "#"+vArr[1]; + var newEl = $("
").get(0); $(newEl).addClass(vArr[0]); @@ -41,7 +48,6 @@ FW_iconRadioCreate(elName, devName, vArr, currVal, set, params, cmd) var buttons = []; for( var i = 2; i < (vArr.length); i+=ipar ) { - vArr[i] = vArr[i].replace(/#/g," "); var button = $('').uniqueId(); var label = $(''); buttons.push(button); @@ -51,23 +57,53 @@ FW_iconRadioCreate(elName, devName, vArr, currVal, set, params, cmd) $(button).change(clicked); + // console.log("currVal: "+currVal+", vArr["+i+"]: "+vArr[i]+", is: "+ (currVal == vArr[i])); if( currVal ) button.prop("checked", currVal == vArr[i] ); } $(newEl).buttonset(); $(newEl).find("label").css({"margin":"0","border":"0","border-radius":"4px","background":"inherit"}); - $(newEl).find("span").css({"padding":"0.0em 0.3em"}); - + $(newEl).find("span").css({"padding":"0.0em 0.3em"}) + .attr( "selectcolor",use4icon ? vArr[1] : ""); + $(newEl).find("input").each(function(ind,val){ + $(val).next().find("span").attr("ischecked",$(val).prop("checked")); +// console.log("input checked("+ind+"): "+$(val).prop("checked")); + }); $(newEl).find("label").each(function(ind,val){ - $(val).addClass("iconRadio_widget"); + $(val).addClass("iconRadio_widget") var ico = vArr[ind*ipar+3]; + var m = ico.match(/.*@(.*)/); + var uscol = m[1]; + if( uscol.match(/^[A-F0-9]{6}$/)) + uscol = "#"+uscol; + $(val).find("span").attr( "unselectcolor",uscol); + FW_cmd(FW_root+"?cmd={FW_makeImage('"+ico+"')}&XHR=1",function(data){ data = data.replace(/\n$/,''); $(newEl).find("label").each(function(ind,val){ + var span = $(val).find("span"); + var sc = $(span).attr("selectcolor"); + var usc = $(span).attr("unselectcolor"); + var isc = $(span).attr("ischecked"); + // console.log("span usc_"+ind+": "+usc+", sc_"+ind+": "+sc); var re = new RegExp("\"\s?"+$(val).attr("name")+"(\s?|\")","i"); if (!(data.match(re) === null) && ($(val).find("span").html().match(re) === null)) { + // console.log("Fw_cmd checked: "+ind+": "+isc); + if(isc == "true") { + if(sc.length > 0) { + data = data.replace(/fill=\".*?\"/,'fill="'+sc+'"') + .replace(/fill:.*?[;\s]/,'fill:'+sc+';'); + // console.log("Fw_cmd sc_ind: "+ind+": "+sc+", isc:"+isc+"\n"+data); + } + } else { + if(sc.length > 0) { + data = data.replace(/fill=\".*?\"/,'fill="'+usc+'"') + .replace(/fill:.*?[;\s]/,'fill:'+usc+';'); + // console.log("Fw_cmd usc_ind: "+ind+": "+usc+", isc:"+isc+"\n"+data); + } + } $(val).find("span").addClass("iconRadio_widget").html(data); return false; } @@ -82,14 +118,24 @@ FW_iconRadioCreate(elName, devName, vArr, currVal, set, params, cmd) newEl.getValueFn = function(arg) { var new_val=""; for( var i = 0; i < buttons.length; ++i ) { var button = buttons[i]; - if( $(button).prop("checked") ) { + var span = button.next().find("span"); + var sc = $(span).attr("selectcolor"); + // var usc = $(span).attr("unselectcolor"); + if( $(button).prop("checked") == true) { + if(sc.length > 0) { + var html = $(span).html().replace(/fill=\".*?\"/,"fill=\""+sc+"\"") + .replace(/fill:.*?[;\s]/,"fill:"+sc+";"); + // console.log("getFn sc_i:"+i+": "+sc+"\n"+html); + $(span).html(html); + } else { button.next().css({"background-color":vArr[1]}); + } if( new_val ) new_val += ','; new_val += $(button).button( "option", "label") } } - if( !new_val ) return ','; - return new_val; + if( !new_val ) return ','; + return new_val; }; newEl.setValueFn = function(arg){ if( !arg ) arg = ','; @@ -97,18 +143,36 @@ FW_iconRadioCreate(elName, devName, vArr, currVal, set, params, cmd) hidden.attr("value", arg); for( var i = 0; i < buttons.length; ++i ) { var button = buttons[i]; + var span = button.next().find("span"); + var sc = $(span).attr("selectcolor"); + var usc = $(span).attr("unselectcolor"); + if( usc.match(/^[A-F0-9]{6}$/)) + usc = "#"+usc; + // console.log("setFn usc_"+i+": "+usc+" sc_"+i+": "+sc); button.prop("checked", (arg == vArr[i*ipar+2]) ); - if (button.prop("checked")==true){ - button.next().css({"background-color":vArr[1]}); + if (button.prop("checked") == true){ + if(sc.length > 0) { + var html = $(span).html().replace(/fill=\".*?\"/,"fill=\""+sc+"\"") + .replace(/fill:.*?[;\s]/,"fill:"+sc+";"); + $(span).html(html); + } else { + button.next().css({"background-color":vArr[1]}); + } } else { - button.next().css({"background-color":"inherit"}); + if(sc.length > 0) { + var html = $(span).html().replace(/fill=\".*?\"/,'fill="'+usc+'"') + .replace(/fill:.*?[;\s]/,'fill:'+usc+';'); + $(span).html(html); + + } else { + button.next().css({"background-color":"inherit"}); + } } button.button("refresh"); } }; newEl.setValueFn( currVal ); - return newEl; } @@ -121,17 +185,17 @@ FW_iconRadioCreate(elName, devName, vArr, currVal, set, params, cmd) <color> is specified by a color name or a color number without leading # e.g. FFA500 or orange. Depending on the context @ has to be escaped \@.
<icon> is the icon name.
Examples for import with raw definition, will be found in FHEMWEB-Widgets -
  • iconRadio,<select color>,<value>,<icon>[@<color>][,<value>,<icon>[@<color>]]... +
  • iconRadio,[use4icon@]<select color>,<value>,<icon>[@<color>][,<value>,<icon>[@<color>]]... - displays Icons as radio button and returns value if pushed. <value> return value.
    - <select color> the background color of the selected icon.
    + <select color> the background color of the selected icon or the icon color if the prefix use4icon@ is used.
    The widget contains a CSS-class "iconRadio_widget".
  • - iconButtons,<select color>,<value>,<icon>[@<color>][,<value>,<icon>[@<color>]]... + iconButtons,[use4icon@]<select color>,<value>,<icon>[@<color>][,<value>,<icon>[@<color>]]... - displays Icons as button bar and returns comma separated values of pushed buttons. <value> return value.
    - <select color> the background color of the selected icon.
    + <select color> the background color of the selected icon or the icon color if the prefix use4icon@ is used.
    The widget contains a CSS-class "iconButtons_widget".
  • iconLabel[,<reference value>,[<icon>][@<color>]][,<reference value>,[<icon>][@<color>]]...