mirror of
https://github.com/fhem/fhem-mirror.git
synced 2025-01-31 06:39:11 +00:00
fhemweb_iconButtons.js, fhemweb_iconRadio.js: optionally colorize selected icons instead of its background by prefix use4icon@
git-svn-id: https://svn.fhem.de/fhem/trunk@15314 2b470e98-0d58-463d-a4d8-8e2adae1ed80
This commit is contained in:
parent
49481aaa73
commit
3a873d3615
@ -1,5 +1,9 @@
|
|||||||
# Add changes at the top of the list. Keep it in ASCII, and 80-char wide.
|
# 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.
|
# 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
|
- feature: 93_DbRep: V5.8.5, attr device can be a devspec, attr reading can
|
||||||
be a list (pls. see commandref), minor fixes
|
be a list (pls. see commandref), minor fixes
|
||||||
- update: 46_TeslaPowerwall2AC.pm: new formula to calculate batteryPower
|
- update: 46_TeslaPowerwall2AC.pm: new formula to calculate batteryPower
|
||||||
|
@ -23,6 +23,12 @@ FW_iconButtonsCreate(elName, devName, vArr, currVal, set, params, cmd)
|
|||||||
return undefined;
|
return undefined;
|
||||||
var ipar = 2;
|
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}$/))
|
if( vArr[1].match(/^[A-F0-9]{6}$/))
|
||||||
vArr[1] = "#"+vArr[1];
|
vArr[1] = "#"+vArr[1];
|
||||||
|
|
||||||
@ -50,21 +56,48 @@ FW_iconButtonsCreate(elName, devName, vArr, currVal, set, params, cmd)
|
|||||||
$(newEl).append(label);
|
$(newEl).append(label);
|
||||||
|
|
||||||
$(button).change(clicked);
|
$(button).change(clicked);
|
||||||
|
|
||||||
|
if( currVal )
|
||||||
|
button.prop("checked", currVal.match(new RegExp('(^|,)'+vArr[i]+'($|,)') ) );
|
||||||
}
|
}
|
||||||
|
|
||||||
$(newEl).buttonset();
|
$(newEl).buttonset();
|
||||||
$(newEl).find("label").css({"margin":"0","border":"0","border-radius":"4px","background":"inherit"});
|
$(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("label").each(function(ind,val){
|
$(newEl).find("input").each(function(ind,val){
|
||||||
$(val).addClass("iconButtons_widget");
|
$(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 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){
|
FW_cmd(FW_root+"?cmd={FW_makeImage('"+ico+"')}&XHR=1",function(data){
|
||||||
data = data.replace(/\n$/,'');
|
data = data.replace(/\n$/,'');
|
||||||
$(newEl).find("label").each(function(ind,val){
|
$(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");
|
var re = new RegExp("\"\s?"+$(val).attr("name")+"(\s?|\")","i");
|
||||||
if (!(data.match(re) === null) && ($(val).find("span").html().match(re) === null)) {
|
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);
|
$(val).find("span").addClass("iconButtons_widget").html(data);
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
@ -79,26 +112,52 @@ FW_iconButtonsCreate(elName, devName, vArr, currVal, set, params, cmd)
|
|||||||
newEl.getValueFn = function(arg) { var new_val="";
|
newEl.getValueFn = function(arg) { var new_val="";
|
||||||
for( var i = 0; i < buttons.length; ++i ) {
|
for( var i = 0; i < buttons.length; ++i ) {
|
||||||
var button = buttons[i];
|
var button = buttons[i];
|
||||||
|
var span = button.next().find("span");
|
||||||
|
var sc = $(span).attr("selectcolor");
|
||||||
if( $(button).prop("checked") ) {
|
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]});
|
button.next().css({"background-color":vArr[1]});
|
||||||
|
}
|
||||||
if( new_val ) new_val += ',';
|
if( new_val ) new_val += ',';
|
||||||
new_val += $(button).button( "option", "label")
|
new_val += $(button).button( "option", "label")
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
if( !new_val ) return ',';
|
if( !new_val ) return ',';
|
||||||
return new_val;
|
return new_val;
|
||||||
};
|
};
|
||||||
|
|
||||||
newEl.setValueFn = function(arg){ if( !arg ) arg = ',';
|
newEl.setValueFn = function(arg){ if( !arg ) arg = ',';
|
||||||
if( hidden )
|
if( hidden )
|
||||||
hidden.attr("value", arg);
|
hidden.attr("value", arg);
|
||||||
for( var i = 0; i < buttons.length; ++i ) {
|
for( var i = 0; i < buttons.length; ++i ) {
|
||||||
var button = buttons[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]+'($|,)') ) );
|
button.prop("checked", arg.match(new RegExp('(^|,)'+vArr[i*ipar+2]+'($|,)') ) );
|
||||||
if (button.prop("checked")==true){
|
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 {
|
} 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");
|
button.button("refresh");
|
||||||
}
|
}
|
||||||
|
@ -23,8 +23,15 @@ FW_iconRadioCreate(elName, devName, vArr, currVal, set, params, cmd)
|
|||||||
return undefined;
|
return undefined;
|
||||||
var ipar = 2;
|
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}$/))
|
if( vArr[1].match(/^[A-F0-9]{6}$/))
|
||||||
vArr[1] = "#"+vArr[1];
|
vArr[1] = "#"+vArr[1];
|
||||||
|
|
||||||
var newEl = $("<div style='display:inline-block;'>").get(0);
|
var newEl = $("<div style='display:inline-block;'>").get(0);
|
||||||
$(newEl).addClass(vArr[0]);
|
$(newEl).addClass(vArr[0]);
|
||||||
|
|
||||||
@ -41,7 +48,6 @@ FW_iconRadioCreate(elName, devName, vArr, currVal, set, params, cmd)
|
|||||||
|
|
||||||
var buttons = [];
|
var buttons = [];
|
||||||
for( var i = 2; i < (vArr.length); i+=ipar ) {
|
for( var i = 2; i < (vArr.length); i+=ipar ) {
|
||||||
vArr[i] = vArr[i].replace(/#/g," ");
|
|
||||||
var button = $('<input type="radio" name="radio">').uniqueId();
|
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")+'" name="'+vArr[i+1]+'" title="'+vArr[i]+'" >'+vArr[i]+'</label>');
|
||||||
buttons.push(button);
|
buttons.push(button);
|
||||||
@ -51,23 +57,53 @@ FW_iconRadioCreate(elName, devName, vArr, currVal, set, params, cmd)
|
|||||||
|
|
||||||
$(button).change(clicked);
|
$(button).change(clicked);
|
||||||
|
|
||||||
|
// console.log("currVal: "+currVal+", vArr["+i+"]: "+vArr[i]+", is: "+ (currVal == vArr[i]));
|
||||||
if( currVal )
|
if( currVal )
|
||||||
button.prop("checked", currVal == vArr[i] );
|
button.prop("checked", currVal == vArr[i] );
|
||||||
}
|
}
|
||||||
|
|
||||||
$(newEl).buttonset();
|
$(newEl).buttonset();
|
||||||
$(newEl).find("label").css({"margin":"0","border":"0","border-radius":"4px","background":"inherit"});
|
$(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){
|
$(newEl).find("label").each(function(ind,val){
|
||||||
$(val).addClass("iconRadio_widget");
|
$(val).addClass("iconRadio_widget")
|
||||||
|
|
||||||
var ico = vArr[ind*ipar+3];
|
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){
|
FW_cmd(FW_root+"?cmd={FW_makeImage('"+ico+"')}&XHR=1",function(data){
|
||||||
data = data.replace(/\n$/,'');
|
data = data.replace(/\n$/,'');
|
||||||
$(newEl).find("label").each(function(ind,val){
|
$(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");
|
var re = new RegExp("\"\s?"+$(val).attr("name")+"(\s?|\")","i");
|
||||||
if (!(data.match(re) === null) && ($(val).find("span").html().match(re) === null)) {
|
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);
|
$(val).find("span").addClass("iconRadio_widget").html(data);
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
@ -82,14 +118,24 @@ FW_iconRadioCreate(elName, devName, vArr, currVal, set, params, cmd)
|
|||||||
newEl.getValueFn = function(arg) { var new_val="";
|
newEl.getValueFn = function(arg) { var new_val="";
|
||||||
for( var i = 0; i < buttons.length; ++i ) {
|
for( var i = 0; i < buttons.length; ++i ) {
|
||||||
var button = buttons[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]});
|
button.next().css({"background-color":vArr[1]});
|
||||||
|
}
|
||||||
if( new_val ) new_val += ',';
|
if( new_val ) new_val += ',';
|
||||||
new_val += $(button).button( "option", "label")
|
new_val += $(button).button( "option", "label")
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
if( !new_val ) return ',';
|
if( !new_val ) return ',';
|
||||||
return new_val;
|
return new_val;
|
||||||
};
|
};
|
||||||
|
|
||||||
newEl.setValueFn = function(arg){ if( !arg ) arg = ',';
|
newEl.setValueFn = function(arg){ if( !arg ) arg = ',';
|
||||||
@ -97,18 +143,36 @@ FW_iconRadioCreate(elName, devName, vArr, currVal, set, params, cmd)
|
|||||||
hidden.attr("value", arg);
|
hidden.attr("value", arg);
|
||||||
for( var i = 0; i < buttons.length; ++i ) {
|
for( var i = 0; i < buttons.length; ++i ) {
|
||||||
var button = buttons[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]) );
|
button.prop("checked", (arg == vArr[i*ipar+2]) );
|
||||||
if (button.prop("checked")==true){
|
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 {
|
} 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");
|
button.button("refresh");
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
newEl.setValueFn( currVal );
|
newEl.setValueFn( currVal );
|
||||||
|
|
||||||
return newEl;
|
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 <b>#</b> e.g. FFA500 or orange. Depending on the context <b>@</b> has to be escaped <b>\@</b>.<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>
|
<icon> is the icon name.<br>
|
||||||
Examples for import with raw definition, will be found in <a href="https://wiki.fhem.de/wiki/FHEMWEB/Widgets">FHEMWEB-Widgets</a>
|
Examples for import with raw definition, will be found in <a href="https://wiki.fhem.de/wiki/FHEMWEB/Widgets">FHEMWEB-Widgets</a>
|
||||||
<li>iconRadio,<select color>,<value>,<icon>[@<color>][,<value>,<icon>[@<color>]]...
|
<li>iconRadio,[use4icon@]<select color>,<value>,<icon>[@<color>][,<value>,<icon>[@<color>]]...
|
||||||
- displays Icons as radio button and returns value if pushed.
|
- displays Icons as radio button and returns value if pushed.
|
||||||
<value> return value.<br>
|
<value> return value.<br>
|
||||||
<select color> the background color of the selected icon.<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>
|
The widget contains a CSS-class "iconRadio_widget".<br>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
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.
|
- displays Icons as button bar and returns comma separated values of pushed buttons.
|
||||||
<value> return value.<br>
|
<value> return value.<br>
|
||||||
<select color> the background color of the selected icon.<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>
|
The widget contains a CSS-class "iconButtons_widget".<br>
|
||||||
</li>
|
</li>
|
||||||
<li>iconLabel[,<reference value>,[<icon>][@<color>]][,<reference value>,[<icon>][@<color>]]...
|
<li>iconLabel[,<reference value>,[<icon>][@<color>]][,<reference value>,[<icon>][@<color>]]...
|
||||||
|
Loading…
Reference in New Issue
Block a user