mirror of
https://github.com/fhem/fhem-mirror.git
synced 2025-03-06 12:46:57 +00:00
270 lines
13 KiB
JavaScript
270 lines
13 KiB
JavaScript
|
|
FW_version["fhemweb_iconRadio.js"] = "$Id$";
|
|
|
|
FW_widgets['iconRadio'] = {
|
|
createFn:FW_iconRadioCreate,
|
|
};
|
|
|
|
/********* iconRadio *********/
|
|
function
|
|
FW_iconRadioCreate(elName, devName, vArr, currVal, set, params, cmd)
|
|
{
|
|
if( 0 ) {
|
|
console.log( "elName: "+elName );
|
|
console.log( "devName: "+devName );
|
|
console.log( "vArr: "+vArr );
|
|
console.log( "currVal: "+currVal );
|
|
console.log( "set: "+set );
|
|
console.log( "params: "+params );
|
|
console.log( "cmd: "+cmd );
|
|
}
|
|
|
|
if(!vArr.length || vArr[0] != "iconRadio")
|
|
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 = $("<div style='display:inline-block;'>").get(0);
|
|
$(newEl).addClass(vArr[0]);
|
|
|
|
var hidden;
|
|
if(elName)
|
|
hidden = $('<input type="hidden" name="'+elName+'" value="'+currVal+'">');
|
|
$(newEl).append(hidden);
|
|
|
|
var clicked = function(arg) { var new_val=newEl.getValueFn(arg);
|
|
newEl.setValueFn( new_val );
|
|
if( cmd )
|
|
cmd(new_val);
|
|
};
|
|
|
|
var buttons = [];
|
|
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>');
|
|
buttons.push(button);
|
|
|
|
$(newEl).append(button);
|
|
$(newEl).append(label);
|
|
|
|
$(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"})
|
|
.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")
|
|
|
|
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;
|
|
}
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
if( !currVal )
|
|
currVal = ",";
|
|
|
|
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");
|
|
// 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;
|
|
};
|
|
|
|
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;
|
|
// console.log("setFn usc_"+i+": "+usc+" sc_"+i+": "+sc);
|
|
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+"\"")
|
|
.replace(/fill:.*?[;\s]/,"fill:"+sc+";");
|
|
$(span).html(html);
|
|
} else {
|
|
button.next().css({"background-color":vArr[1]});
|
|
}
|
|
} else {
|
|
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;
|
|
}
|
|
|
|
/*
|
|
=pod
|
|
=begin html
|
|
|
|
<br>
|
|
<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>
|
|
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>
|
|
<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.
|
|
<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>]]...
|
|
- 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
|
|
value> and an optional display value with an optional color value
|
|
<reference value> is a number or a regular expression.<br>
|
|
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>]]...
|
|
- 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
|
|
of a <reference value> and an optional display value with an
|
|
optional color value [<icon>][@<color>].<br>
|
|
<reference value> is a number or a string.<br>
|
|
If <icon> is no icon name, the text will be displayed, otherwise
|
|
the icon. If nothing is specified, the reference value will be displayed.<br>
|
|
</li>
|
|
<br>
|
|
=end html
|
|
=begin html_DE
|
|
|
|
<br>
|
|
<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>
|
|
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>]]...
|
|
- zeigt Icons als Radiobutton an und gibt Value bei Betätigung zurück.<br>
|
|
<value> ist der Rückgabewert.<br>
|
|
<select color> die Hintergrundfarbe des gewählten Icons.<br>
|
|
Das Widget enthält eine CSS-Klasse "iconRadio_widget".<br>
|
|
</li>
|
|
<li>iconButtons,<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.<br>
|
|
Das Widget enthält eine CSS-Klasse "iconButton_widget".<br>
|
|
</li>
|
|
<li>iconLabel[,<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
|
|
werden. Ein Paar besteht aus einem Vergleichswert <reference
|
|
value> und einem optionalen Anzeigewert mit optionaler mit
|
|
Farbangabe [,<reference value>,[<icon>][@<color>]].<br>
|
|
<reference value> kann eine Zahl oder ein regulärer Ausdruck sein.<br>
|
|
Wenn <icon> keinem Iconnamen entspricht, wird der Text angezeigt,
|
|
sonst das Icon. Wird <icon> nicht angegeben, wird der aktuelle
|
|
Wert angezeigt.<br>
|
|
</li>
|
|
<li>iconSwitch,<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.
|
|
Es können beliebig viele Paare angegeben werden. Ein Paar
|
|
besteht aus einem Vergleichswert <reference value> und einem
|
|
optionalen Anzeigewert mit optionaler mit Farbangabe [,<reference
|
|
value>,[<icon>][@<color>]].<br>
|
|
<reference value> kann eine Zahl oder eine Zeichenkette sein.<br>
|
|
Wenn <icon> keinem Iconnamen entspricht, wird der Text
|
|
angezeigt, sonst das Icon. Wird <icon> nicht angegeben,
|
|
wird der Vergleichwert angezeigt.<br>
|
|
</li>
|
|
<br>
|
|
=end html_DE
|
|
=cut
|
|
*/
|