fhemweb_iconRadio.js: add a user defined class to svg icons by prefix class<classname>@, 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<classname>@, color numbers are now case insensitive
git-svn-id: https://svn.fhem.de/fhem/trunk@15386 2b470e98-0d58-463d-a4d8-8e2adae1ed80
This commit is contained in:
Ellert
@@ -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<classname>@, 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<classname>@, 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
|
||||
|
||||
@@ -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 = $("<div style='display:inline-block;'>").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 = $('<input type="checkbox">').uniqueId();
|
||||
var label = $('<label for="'+button.attr("id")+'" name="'+vArr[i+1]+'" title="'+vArr[i]+'" >'+vArr[i]+'</label>');
|
||||
var label = $('<label for="'+button.attr("id")+'" iconr=":'+((i-2)/ipar)+':" name="'+vArr[i+1]+'" title="'+vArr[i]+'" >'+vArr[i]+'</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){
|
||||
|
||||
@@ -24,6 +24,14 @@ FW_IconLabelCreate(elName, devName, vArr, currVal, set, params, cmd)
|
||||
var newEl = $("<div style='display:inline-block;'>").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("<svg") == -1 && data.indexOf("<img") == -1)
|
||||
@@ -74,9 +82,9 @@ FW_IconLabelCreate(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)
|
||||
|
||||
@@ -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 = $("<div style='display:inline-block;'>").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 = $('<input type="radio" name="radio">').uniqueId();
|
||||
var label = $('<label for="'+button.attr("id")+'" name="'+vArr[i+1]+'" title="'+vArr[i]+'" >'+vArr[i]+'</label>');
|
||||
var label = $('<label for="'+button.attr("id")+'" iconr=":'+((i-2)/ipar)+':" name="'+vArr[i+1]+'" title="'+vArr[i]+'" >'+vArr[i]+'</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<iend && !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==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<iend && !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==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)
|
||||
<u>To the icon.* widgets listed below applies:</u><br>
|
||||
<color> is specified by a color name or a color number without leading <b>#</b> e.g. FFA500 or orange. Depending on the context <b>@</b> has to be escaped <b>\@</b>.<br>
|
||||
<icon> is the icon name.<br>
|
||||
[class<classname>@] as prefix in front of the second parameter, assigns a css-class to the icons.<br>
|
||||
Examples for import with raw definition, will be found in <a href="https://wiki.fhem.de/wiki/FHEMWEB/Widgets">FHEMWEB-Widgets</a>
|
||||
<li>iconRadio,[use4icon@]<select color>,<value>,<icon>[@<color>][,<value>,<icon>[@<color>]]...
|
||||
- displays Icons as radio button and returns value if pushed.
|
||||
<value> return value.<br>
|
||||
<li>iconRadio,[class<classname>@][use4icon@]<select color>,<value>,<icon>[@<color>][,<value>,<icon>[@<color>]]...
|
||||
- displays Icons as radio button and returns value if pushed.<br>
|
||||
<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.<br>
|
||||
<u>Example:</u> <code>iconRadio,808080,<b>closed</b>,control_arrow_down,<b>10</b>,fts_shutter_10,<b>20</b>,fts_shutter_20,<b>30</b>,fts_shutter_30,<b>open</b>,control_arrow_up</code><br>
|
||||
<select color> the background color of the selected icon or the icon color if the prefix <i>use4icon@</i> is used.<br>
|
||||
The widget contains a CSS-class "iconRadio_widget".<br>
|
||||
</li>
|
||||
<li>
|
||||
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.<br>
|
||||
<value> return value.<br>
|
||||
<select color> the background color of the selected icon or the icon color if the prefix <i>use4icon@</i> is used.<br>
|
||||
The widget contains a CSS-class "iconButtons_widget".<br>
|
||||
</li>
|
||||
<li>iconLabel[,<reference value>,[<icon>][@<color>]][,<reference value>,[<icon>][@<color>]]...
|
||||
<li>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.<br>
|
||||
</li>
|
||||
<li>iconSwitch,<reference value>,[<icon>][@<color>][,<reference value>,[<icon>][@<color>]]...
|
||||
<li>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)
|
||||
<u>Für die folgenden icon.* Widgets gilt:</u><br>
|
||||
<color> kann ein Farbname oder eine Farbnummer ohne führende <b>#</b> sein, z.B. orange oder FFA500. Abhängig vom Kontext ist <b>@</b> zu escapen <b>\@</b>.<br>
|
||||
<icon> ist der Iconname.<br>
|
||||
[class<classname>@] als Prefix vor dem zweiten Parameter, weist den SVG-Icons eine CSS-Klasse zu.<br>
|
||||
Beispiele zum Import über Raw definition findet man im FHEM-Wiki unter <a href="https://wiki.fhem.de/wiki/FHEMWEB/Widgets">FHEMWEB-Widgets</a>
|
||||
<li>iconRadio,<select color>,<value>,<icon>[@<color>][,<value>,<icon>[@<color>]]...
|
||||
<li>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.<br>
|
||||
<value> ist der Rückgabewert.<br>
|
||||
<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.<br>
|
||||
<u>Beispiel:</u> <code>iconRadio,808080,<b>zu</b>,control_arrow_down,<b>10</b>,fts_shutter_10,<b>20</b>,fts_shutter_20,<b>30</b>,fts_shutter_30,<b>auf</b>,control_arrow_up</code><br>
|
||||
<select color> die Hintergrundfarbe des gewählten Icons oder die Farbe des Icons wenn der Prefix use4icon@ vorangestellt wird.<br>
|
||||
Das Widget enthält eine CSS-Klasse "iconRadio_widget".<br>
|
||||
</li>
|
||||
<li>iconButtons,<select color>,<value>,<icon>[@<color>][,<value>,<icon>[@<color>]]...
|
||||
<li>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.<br>
|
||||
<value> ist der Rückgabewert.<br>
|
||||
<select color> die Hintergrundfarbe des gewählten Icons oder die Farbe des Icons wenn der Prefix use4icon@ vorangestellt wird.<br>
|
||||
Das Widget enthält eine CSS-Klasse "iconButton_widget".<br>
|
||||
</li>
|
||||
<li>iconLabel[,<reference value>,[<icon>][@<color>]][,<reference value>,[<icon>][@<color>]]...
|
||||
<li>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.<br>
|
||||
</li>
|
||||
<li>iconSwitch,<reference value>,[<icon>][@<color>][,<reference value>,[<icon>][@<color>]]...
|
||||
<li>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.
|
||||
|
||||
@@ -24,6 +24,14 @@ FW_iconSwitchCreate(elName, devName, vArr, currVal, set, params, cmd)
|
||||
var newEl = $("<div style='display:inline-block;'>").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)
|
||||
|
||||
Reference in New Issue
Block a user