From a9a051bdcc19546d6142e81447ab44bc560740cb Mon Sep 17 00:00:00 2001 From: Ellert Date: Fri, 3 Nov 2017 19:16:10 +0000 Subject: [PATCH] fhemweb_iconRadio.js: add a user defined class to svg icons by prefix class@, improved matching for a numeric sequence of compare values, color numbers are now case insensitive, fhemweb_iconButtons.js, fhemweb_iconLabel.js, fhemweb_iconSwitch.js: add a user defined class to svg icons by prefix class@, color numbers are now case insensitive git-svn-id: https://svn.fhem.de/fhem/trunk@15386 2b470e98-0d58-463d-a4d8-8e2adae1ed80 --- fhem/CHANGED | 6 ++ fhem/www/pgm2/fhemweb_iconButtons.js | 47 ++++---- fhem/www/pgm2/fhemweb_iconLabel.js | 16 ++- fhem/www/pgm2/fhemweb_iconRadio.js | 154 ++++++++++++++++++++------- fhem/www/pgm2/fhemweb_iconSwitch.js | 16 ++- 5 files changed, 170 insertions(+), 69 deletions(-) diff --git a/fhem/CHANGED b/fhem/CHANGED index 89f04a83a..d3477a36e 100644 --- a/fhem/CHANGED +++ b/fhem/CHANGED @@ -1,5 +1,11 @@ # 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: add a user defined class to svg icons by + prefix class@, improved matching for a numeric sequence + of compare values, color numbers are now case insensitive + - feature: fhemweb_iconButtons.js, fhemweb_iconLabel.js, + fhemweb_iconSwitch.js: add a user defined class to svg icons by + prefix class@, color numbers are now case insensitive - bugfix: 31_Nello: updated MQTT IP - feature: save writes a copy into restoreDirs (Forum #78769) - feature: WMBus: preliminary support for SML payload diff --git a/fhem/www/pgm2/fhemweb_iconButtons.js b/fhem/www/pgm2/fhemweb_iconButtons.js index a7be41eee..5e70d3b49 100644 --- a/fhem/www/pgm2/fhemweb_iconButtons.js +++ b/fhem/www/pgm2/fhemweb_iconButtons.js @@ -23,13 +23,20 @@ FW_iconButtonsCreate(elName, devName, vArr, currVal, set, params, cmd) return undefined; var ipar = 2; + var iconclass = ""; + if(vArr[1].match(/class.*?@/)) { + var m = vArr[1].match(/class(.*?)@/); + iconclass = m && m[1] ? m[1] : ""; + vArr[1] = vArr[1].replace(/class.*?@/,""); + } + var use4icon = false; if(vArr[1].match(/^use4icon@|^@/)) { use4icon = true; vArr[1] = vArr[1].replace(/^use4icon@|^@/,""); } - if( vArr[1].match(/^[A-F0-9]{6}$/)) + if( vArr[1].match(/^[A-F0-9]{6}$/,"i")) vArr[1] = "#"+vArr[1]; var newEl = $("
").get(0); @@ -49,7 +56,7 @@ FW_iconButtonsCreate(elName, devName, vArr, currVal, set, params, cmd) var buttons = []; for( var i = 2; i < (vArr.length); i+=ipar ) { var button = $('').uniqueId(); - var label = $(''); + var label = $(''); buttons.push(button); $(newEl).append(button); @@ -74,35 +81,33 @@ FW_iconButtonsCreate(elName, devName, vArr, currVal, set, params, cmd) var ico = vArr[ind*ipar+3]; var m = ico.match(/.*@(.*)/); var uscol = m && m[1] ? m[1] : "none"; - if( uscol.match(/^[A-F0-9]{6}$/)) + if( uscol.match(/^[A-F0-9]{6}$/,"i")) uscol = "#"+uscol; if(uscol == 'none') ico += "@none"; $(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){ + FW_cmd(FW_root+"?cmd={FW_makeImage('"+ico+"','"+ico+"',':"+ind+": "+(iconclass.length > 0 ? iconclass :'')+"')}&XHR=1",function(data){ + data = data.replace(/\n$/,''); + var m = $(data).attr("class").match(/(:\d+?:)/); + var iconr = m && m[1] ? m[1] : "error"; + $(newEl).find("label[iconr='"+iconr+"']").each(function(ind,val){ var span = $(val).find("span"); var sc = $(span).attr("selectcolor"); var usc = $(span).attr("unselectcolor") == "none" ? "" : $(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+';'); - } + 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; } + $(span).addClass("iconButtons_widget").html(data); }); }); @@ -140,7 +145,7 @@ FW_iconButtonsCreate(elName, devName, vArr, currVal, set, params, cmd) var span = button.next().find("span"); var sc = $(span).attr("selectcolor"); var usc = $(span).attr("unselectcolor") == "none" ? "" : $(span).attr("unselectcolor"); - if( usc.match(/^[A-F0-9]{6}$/)) + if( usc.match(/^[A-F0-9]{6}$/,"i")) usc = "#"+usc; button.prop("checked", arg.match(new RegExp('(^|,)'+vArr[i*ipar+2]+'($|,)') ) ); if (button.prop("checked")==true){ diff --git a/fhem/www/pgm2/fhemweb_iconLabel.js b/fhem/www/pgm2/fhemweb_iconLabel.js index d828f50ea..dbd69d822 100644 --- a/fhem/www/pgm2/fhemweb_iconLabel.js +++ b/fhem/www/pgm2/fhemweb_iconLabel.js @@ -24,6 +24,14 @@ FW_IconLabelCreate(elName, devName, vArr, currVal, set, params, cmd) var newEl = $("
").get(0); var ipar = 2; + + var iconclass = ""; + if(vArr[1].match(/class.*?@/)) { + var m = vArr[1].match(/class(.*?)@/); + iconclass = m && m[1] ? m[1] : ""; + vArr[1] = vArr[1].replace(/class.*?@/,""); + } + for( var i = 1; i < (vArr.length); i+=ipar ) { vArr[i] = vArr[i].replace(/#/g," "); } @@ -58,7 +66,7 @@ FW_IconLabelCreate(elName, devName, vArr, currVal, set, params, cmd) if(ilast > 0) { //text only with color if (vArr[i+1] && vArr[i+1].indexOf("@") == 0) { col = vArr[i+1].replace(/@/,''); - if( col.match(/^[A-F0-9]{6}$/)) + if( col.match(/^[A-F0-9]{6}$/,"i")) col = "#"+col; $(newEl).find("span").html(arg+"") .attr("style","color: "+col+" !important; padding:0.0em 0.3em ") @@ -66,7 +74,7 @@ FW_IconLabelCreate(elName, devName, vArr, currVal, set, params, cmd) $(newEl).find("label").attr("style","border-style:solid; background-color:#f6f6f6; background-image:none; font-size: inherit;"); } else if( vArr[i+1] && vArr[i+1].indexOf("@") == -1) { //text or image no color ico = vArr[i+1]; - FW_cmd(FW_root+"?cmd={FW_makeImage('"+ico+"','"+arg+"')}&XHR=1",function(data){ + FW_cmd(FW_root+"?cmd={FW_makeImage('"+ico+"','"+arg+"',"+(iconclass.length > 0 ? "'"+iconclass+"'" :'')+")}&XHR=1",function(data){ data = data.replace(/\n$/,''); $(newEl).find("span").html(data+""); if (data.indexOf(" 0) { //text or image with color ico = vArr[i+1].split("@"); - if( ico[1] && ico[1].match(/^[A-F0-9]{6}$/)) + if( ico[1] && ico[1].match(/^[A-F0-9]{6}$/,"i")) ico[1] = "#"+ico[1]; - FW_cmd(FW_root+"?cmd={FW_makeImage('"+vArr[i+1]+"','"+arg+"')}&XHR=1",function(data){ + FW_cmd(FW_root+"?cmd={FW_makeImage('"+vArr[i+1]+"','"+arg+"',"+(iconclass.length > 0 ? "'"+iconclass+"'" :'')+")}&XHR=1",function(data){ data = data.replace(/\n$/,''); $(newEl).find("span").html((vArr[i+1] == data ? ico[0] : data )+"") .attr("title",arg) diff --git a/fhem/www/pgm2/fhemweb_iconRadio.js b/fhem/www/pgm2/fhemweb_iconRadio.js index c61507b9e..fc7217b85 100644 --- a/fhem/www/pgm2/fhemweb_iconRadio.js +++ b/fhem/www/pgm2/fhemweb_iconRadio.js @@ -23,13 +23,20 @@ FW_iconRadioCreate(elName, devName, vArr, currVal, set, params, cmd) return undefined; var ipar = 2; + var iconclass = ""; + if(vArr[1].match(/class.*?@/)) { + var m = vArr[1].match(/class(.*?)@/); + iconclass = m && m[1] ? m[1] : ""; + vArr[1] = vArr[1].replace(/class.*?@/,""); + } + var use4icon = false; if(vArr[1].match(/^use4icon@|^@/)) { use4icon = true; vArr[1] = vArr[1].replace(/^use4icon@|^@/,""); } - if( vArr[1].match(/^[A-F0-9]{6}$/)) + if( vArr[1].match(/^[A-F0-9]{6}$/,"i")) vArr[1] = "#"+vArr[1]; var newEl = $("
").get(0); @@ -47,9 +54,28 @@ FW_iconRadioCreate(elName, devName, vArr, currVal, set, params, cmd) }; var buttons = []; + var istart = 2; + for( var i = 2; i < (vArr.length-1); i+=ipar ) { + if(!isNaN(parseFloat(vArr[i]))) { + istart = i; + break; + } + } + var iend = vArr.length-ipar; + for( var i = istart+ipar; i < (vArr.length-1); i+=ipar ) { + if(isNaN(parseFloat(vArr[i]))) { + iend = i-ipar; + break; + } + } + var ascd = true; + if(!isNaN(parseFloat(vArr[istart+ipar])) && parseFloat(vArr[istart]) > parseFloat(vArr[istart+ipar])) + ascd = false; + for( var i = 2; i < (vArr.length); i+=ipar ) { + var button = $('').uniqueId(); - var label = $(''); + var label = $(''); buttons.push(button); $(newEl).append(button); @@ -58,8 +84,21 @@ 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] ); + if( currVal ) { + // console.log("FW_cmd, i:",i,"ascd:",ascd,"istart:",istart,"iend:",iend); + // console.log("FW_cmd, parseFloat(currVal):", parseFloat(currVal),"i+ipar:",i+ipar,"parseFloat(vArr[i+ipar]):",parseFloat(vArr[i+ipar]),"i:",i,"parseFloat(vArr[i]):",parseFloat(vArr[i])); + if(ascd && i>istart && !isNaN(parseFloat(vArr[i-ipar])) && !isNaN(parseFloat(currVal)) && !isNaN(parseFloat(vArr[i]))){ + button.prop("checked", parseFloat(currVal) > parseFloat(vArr[i-ipar]) && parseFloat(currVal) <= parseFloat(vArr[i])); + } else if(!ascd && i parseFloat(vArr[i+ipar]) && parseFloat(currVal) <= parseFloat(vArr[i])); + } else if(ascd && i==istart && !isNaN(parseFloat(currVal)) && !isNaN(parseFloat(vArr[i]))) { + button.prop("checked", parseFloat(currVal) <= parseFloat(vArr[i])); + } else if(!ascd && i==iend && !isNaN(parseFloat(currVal)) && !isNaN(parseFloat(vArr[i]))) { + button.prop("checked", parseFloat(currVal) <= parseFloat(vArr[i])); + } else { + button.prop("checked", currVal == vArr[i]); + } + } } $(newEl).buttonset(); @@ -76,39 +115,38 @@ FW_iconRadioCreate(elName, devName, vArr, currVal, set, params, cmd) var ico = vArr[ind*ipar+3]; var m = ico.match(/.*@(.*)/); var uscol = m && m[1] ? m[1] : "none"; - if( uscol.match(/^[A-F0-9]{6}$/)) + if( uscol.match(/^[A-F0-9]{6}$/,"i")) uscol = "#"+uscol; if(uscol == 'none') ico += "@none"; $(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){ + FW_cmd(FW_root+"?cmd={FW_makeImage('"+ico+"','"+ico+"',':"+ind+": "+(iconclass.length > 0 ? iconclass :'')+"')}&XHR=1",function(data){ + data = data.replace(/\n$/,''); + // console.log($(data).attr("class")); + var m = $(data).attr("class").match(/(:\d+?:)/); + var iconr = m && m[1] ? m[1] : "error"; + $(newEl).find("label[iconr='"+iconr+"']").each(function(ind,val){ var span = $(val).find("span"); var sc = $(span).attr("selectcolor"); var usc = $(span).attr("unselectcolor") == "none" ? "" : $(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); - } + // 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; } + $(span).addClass("iconRadio_widget").html(data); }); }); @@ -132,10 +170,12 @@ FW_iconRadioCreate(elName, devName, vArr, currVal, set, params, cmd) } else { button.next().css({"background-color":vArr[1]}); } + // console.log("getFn new_val: ",new_val) if( new_val ) new_val += ','; new_val += $(button).button( "option", "label") } } + if( !new_val ) return ','; return new_val; }; @@ -143,15 +183,45 @@ FW_iconRadioCreate(elName, devName, vArr, currVal, set, params, cmd) newEl.setValueFn = function(arg){ if( !arg ) arg = ','; if( hidden ) hidden.attr("value", arg); + var istart = 0; + for( var i = 0; i < buttons.length; i++ ) { + if(!isNaN(parseFloat(vArr[i*ipar+2]))) { + istart = i; + break; + } + } + var iend = buttons.length-1; + for( var i = istart+1; i < buttons.length; i++ ) { + if(isNaN(parseFloat(vArr[i*ipar+2]))) { + iend = i-1; + break; + } + } + var ascd = true; + if(!isNaN(parseFloat(vArr[(istart+1)*ipar+2])) && parseFloat(vArr[istart*ipar+2]) > parseFloat(vArr[(istart+1)*ipar+2])) + ascd = false; 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") == "none" ? "" : $(span).attr("unselectcolor"); - if( usc.match(/^[A-F0-9]{6}$/)) + if( usc.match(/^[A-F0-9]{6}$/,"i")) usc = "#"+usc; - // console.log("setFn usc_"+i+": "+usc+" sc_"+i+": "+sc); - button.prop("checked", (arg == vArr[i*ipar+2]) ); + // console.log("setFn usc_"+i+": "+usc+": sc_"+i+": "+sc+", arg: "+arg); + // console.log("setFn, i:",i,"ascd:",ascd,"istart:",istart,"iend:",iend); + // console.log("setFn, parseFloat(arg):", parseFloat(arg),"(i+1)*ipar+2:",(i+1)*ipar+2,"parseFloat(vArr[(i+1)*ipar+2]):",parseFloat(vArr[(i+1)*ipar+2]),"i*ipar+2:",i*ipar+2,"parseFloat(vArr[i*ipar+2]):",parseFloat(vArr[i*ipar+2])); + if(ascd && i>istart && !isNaN(parseFloat(vArr[(i-1)*ipar+2])) && !isNaN(parseFloat(arg)) && !isNaN(parseFloat(vArr[i*ipar+2]))){ + button.prop("checked", parseFloat(arg) > parseFloat(vArr[(i-1)*ipar+2]) && parseFloat(arg) <= parseFloat(vArr[i*ipar+2])); + } else if(!ascd && i parseFloat(vArr[(i+1)*ipar+2]) && parseFloat(arg) <= parseFloat(vArr[i*ipar+2])); + } else if(ascd && i==istart && !isNaN(parseFloat(arg)) && !isNaN(parseFloat(vArr[i*ipar+2]))) { + button.prop("checked", parseFloat(arg) <= parseFloat(vArr[i*ipar+2])); + } else if(!ascd && i==iend && !isNaN(parseFloat(arg)) && !isNaN(parseFloat(vArr[i*ipar+2]))) { + button.prop("checked", parseFloat(arg) <= parseFloat(vArr[i*ipar+2])); + } else { + button.prop("checked", arg == vArr[i*ipar+2]); + } + if (button.prop("checked") == true){ if(sc.length > 0) { var html = $(span).html().replace(/fill=\".*?\"/,"fill=\""+sc+"\"") @@ -186,21 +256,23 @@ FW_iconRadioCreate(elName, devName, vArr, currVal, set, params, cmd) To the icon.* widgets listed below applies:
<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.
+ [class<classname>@] as prefix in front of the second parameter, assigns a css-class to the icons.
Examples for import with raw definition, will be found in FHEMWEB-Widgets -
  • iconRadio,[use4icon@]<select color>,<value>,<icon>[@<color>][,<value>,<icon>[@<color>]]... - - displays Icons as radio button and returns value if pushed. - <value> return value.
    +
  • iconRadio,[class<classname>@][use4icon@]<select color>,<value>,<icon>[@<color>][,<value>,<icon>[@<color>]]... + - displays Icons as radio button and returns value if pushed.
    + <value> return or compare value. If a numerical sequence of <value> is specified, the current value will match the next higher <value>. It is allowed to place non numerical <value> in front of or after the sequence but not in between. The numerical sequence has to be ascendind or descending.
    + Example: iconRadio,808080,closed,control_arrow_down,10,fts_shutter_10,20,fts_shutter_20,30,fts_shutter_30,open,control_arrow_up
    <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,[use4icon@]<select color>,<value>,<icon>[@<color>][,<value>,<icon>[@<color>]]... - - displays Icons as button bar and returns comma separated values of pushed buttons. + iconButtons,[class<classname>@][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 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>]]... +
  • iconLabel[,[class<classname>@]<reference value>,[<icon>][@<color>]][,<reference value>,[<icon>][@<color>]]... - displays states by colorized values, labels and icons, if the current value fits to the reference value. A state is described by a parameter peer. The number of peers is arbitrarily. A peer consists of a <reference @@ -209,7 +281,7 @@ FW_iconRadioCreate(elName, devName, vArr, currVal, set, params, cmd) If <icon> is no icon name, the text will be displayed, otherwise the icon. If nothing is specified, the current value will be displayed.
    • -
  • iconSwitch,<reference value>,[<icon>][@<color>][,<reference value>,[<icon>][@<color>]]... +
  • iconSwitch,[class<classname>@]<reference value>,[<icon>][@<color>][,<reference value>,[<icon>][@<color>]]... - switches cyclic after actuation to the diplayed state and the actual value is set to the reference Value. A state is described by a parameter peer. The number of peers is arbitrarily. A peer consists @@ -227,20 +299,22 @@ FW_iconRadioCreate(elName, devName, vArr, currVal, set, params, cmd) Für die folgenden icon.* Widgets gilt:
    <color> kann ein Farbname oder eine Farbnummer ohne führende # sein, z.B. orange oder FFA500. Abhängig vom Kontext ist @ zu escapen \@.
    <icon> ist der Iconname.
    + [class<classname>@] als Prefix vor dem zweiten Parameter, weist den SVG-Icons eine CSS-Klasse zu.
    Beispiele zum Import über Raw definition findet man im FHEM-Wiki unter FHEMWEB-Widgets -
  • iconRadio,<select color>,<value>,<icon>[@<color>][,<value>,<icon>[@<color>]]... +
  • iconRadio,[class<classname>@][use4icon@]<select color>,<value>,<icon>[@<color>][,<value>,<icon>[@<color>]]... - zeigt Icons als Radiobutton an und gibt Value bei Betätigung zurück.
    - <value> ist der Rückgabewert.
    + <value> ist der Rückgabe- u.Vergleichswert. Wenn eine numerische Folge von <value> angegeben wird, dann passt der laufende Wert zum nächsten höheren Vergleichswert. Vor und hinter der numerischen Folge dürfen nicht numerische Werte angegeben werden, dazwischen nicht. Die numerische Folge muss auf- oder absteigend sein.
    + Beispiel: iconRadio,808080,zu,control_arrow_down,10,fts_shutter_10,20,fts_shutter_20,30,fts_shutter_30,auf,control_arrow_up
    <select color> die Hintergrundfarbe des gewählten Icons oder die Farbe des Icons wenn der Prefix use4icon@ vorangestellt wird.
    Das Widget enthält eine CSS-Klasse "iconRadio_widget".
    • -
  • iconButtons,<select color>,<value>,<icon>[@<color>][,<value>,<icon>[@<color>]]... +
  • iconButtons,[class<classname>@][use4icon@]<select color>,<value>,<icon>[@<color>][,<value>,<icon>[@<color>]]... - zeigt Icons als Tastenleiste an und gibt durch Komma getrennte Werte der betätigten Tasten zurück.
    <value> ist der Rückgabewert.
    <select color> die Hintergrundfarbe des gewählten Icons oder die Farbe des Icons wenn der Prefix use4icon@ vorangestellt wird.
    Das Widget enthält eine CSS-Klasse "iconButton_widget".
    • -
  • iconLabel[,<reference value>,[<icon>][@<color>]][,<reference value>,[<icon>][@<color>]]... +
  • iconLabel[,[class<classname>@]<reference value>,[<icon>][@<color>]][,<reference value>,[<icon>][@<color>]]... - zeigt Zustände durch colorierte Werte, Beschriftungen und Icons an, wenn der aktuelle Wert zum Vergleichswert passt. Ein Zustand wird durch ein Parameterpaar beschrieben. Es können beliebig viele Paare angegeben @@ -252,7 +326,7 @@ FW_iconRadioCreate(elName, devName, vArr, currVal, set, params, cmd) sonst das Icon. Wird <icon> nicht angegeben, wird der aktuelle Wert angezeigt.
    • -
  • iconSwitch,<reference value>,[<icon>][@<color>][,<reference value>,[<icon>][@<color>]]... +
  • iconSwitch,[class<classname>@]<reference value>,[<icon>][@<color>][,<reference value>,[<icon>][@<color>]]... - schaltet zyklisch nach jeder Betätigung in den angezeigten Zustand, dabei wird der aktuelle Wert auf den Vergleichswert gesetzt. Ein Zustand wird durch ein Parameterpaar beschrieben. diff --git a/fhem/www/pgm2/fhemweb_iconSwitch.js b/fhem/www/pgm2/fhemweb_iconSwitch.js index f3b617846..b85d7d76d 100644 --- a/fhem/www/pgm2/fhemweb_iconSwitch.js +++ b/fhem/www/pgm2/fhemweb_iconSwitch.js @@ -24,6 +24,14 @@ FW_iconSwitchCreate(elName, devName, vArr, currVal, set, params, cmd) var newEl = $("
    ").get(0); var ipar = 2; + + var iconclass = ""; + if(vArr[1].match(/class.*?@/)) { + var m = vArr[1].match(/class(.*?)@/); + iconclass = m && m[1] ? m[1] : ""; + vArr[1] = vArr[1].replace(/class.*?@/,""); + } + for( var i = 1; i < (vArr.length); i+=ipar ) { vArr[i] = vArr[i].replace(/#/g," "); } @@ -92,7 +100,7 @@ FW_iconSwitchCreate(elName, devName, vArr, currVal, set, params, cmd) } if (vArr[i+1] && vArr[i+1].indexOf("@") == 0) { //text only with color col = vArr[i+1].replace(/@/,''); - if( col.match(/^[A-F0-9]{6}$/)) + if( col.match(/^[A-F0-9]{6}$/,"i")) col = "#"+col; $(newEl).find("span").html(vArr[i]+"") .attr("style","color: "+col+" !important; padding:0.0em 0.3em ") @@ -100,7 +108,7 @@ FW_iconSwitchCreate(elName, devName, vArr, currVal, set, params, cmd) $(newEl).find("label").attr("style","border-style:solid; background-color:#f6f6f6; background-image:none; font-size: inherit;"); } else if( vArr[i+1] && vArr[i+1].indexOf("@") == -1) { //text or image no color ico = vArr[i+1]; - FW_cmd(FW_root+"?cmd={FW_makeImage('"+ico+"','"+arg+"')}&XHR=1",function(data){ + FW_cmd(FW_root+"?cmd={FW_makeImage('"+ico+"','"+arg+"',"+(iconclass.length > 0 ? "'"+iconclass+"'" :'')+")}&XHR=1",function(data){ data = data.replace(/\n$/,''); $(newEl).find("span").html(data+"") .attr("title",arg); @@ -109,9 +117,9 @@ FW_iconSwitchCreate(elName, devName, vArr, currVal, set, params, cmd) }); } else if (vArr[i+1] && vArr[i+1].indexOf("@") > 0) { //text or image with color ico = vArr[i+1].split("@"); - if( ico[1] && ico[1].match(/^[A-F0-9]{6}$/)) + if( ico[1] && ico[1].match(/^[A-F0-9]{6}$/,"i")) ico[1] = "#"+ico[1]; - FW_cmd(FW_root+"?cmd={FW_makeImage('"+vArr[i+1]+"','"+arg+"')}&XHR=1",function(data){ + FW_cmd(FW_root+"?cmd={FW_makeImage('"+vArr[i+1]+"','"+arg+"',"+(iconclass.length > 0 ? "'"+iconclass+"'" :'')+")}&XHR=1",function(data){ data = data.replace(/\n$/,''); $(newEl).find("span").html((vArr[i+1] == data ? ico[0] : data )+"") .attr("title",arg)