YAF: added generic widget + minor fixes and enhancements

* generic widget allows all types of devices in a basic fashion
* several typos/formatting issues/dummy functions
* pressing "space" toggles menu
* save button in menu returns to fhem, executing "save" command


git-svn-id: https://svn.fhem.de/fhem/trunk@3560 2b470e98-0d58-463d-a4d8-8e2adae1ed80

fhem/contrib/YAF/FHEM/YAF/widgets/fht80/fht80.pm

@@ -71,6 +71,8 @@ sub fht80_get_widgetcss() {
 sub fht80_get_widgetjs() {
 
 	my $output = '
+		function fht80_on_click(view_id, widget_id) {
+		}
 		function fht80_update_widget(view_id, widget_id) {
             $.ajax({
 		 		type: "GET",

fhem/contrib/YAF/FHEM/YAF/widgets/fhttk/fhttk.pm

@@ -70,8 +70,10 @@ sub fhttk_get_widgetcss() {
 
 sub fhttk_get_widgetjs() {
 		my $output = '
-				function endsWith(str, suffix) {
+				function fhttk_endsWith(str, suffix) {
 					return str.indexOf(suffix, str.length - suffix.length) !== -1;
+				}
+						function fhttk_on_click(view_id, widget_id) {
 		}
 				function fhttk_update_widget(view_id, widget_id) {
 			$.ajax({
@@ -83,7 +85,7 @@ sub fhttk_get_widgetjs() {
 								success: function(get_state) {
 										var widget = $("#widget_"+view_id+"_"+widget_id);
 										$("#widget_"+view_id+"_"+widget_id).attr("title",get_state);
-										if (endsWith(get_state,"Open")) {
+										if (fhttk_endsWith(get_state,"Open")) {
 												if (widget.hasClass("widget_fhttk_closed")) {
 														widget.removeClass("widget_fhttk_closed");
 												}
@@ -92,7 +94,7 @@ sub fhttk_get_widgetjs() {
 												}
 												widget.html("<span />");
 										}
-										else if (endsWith(get_state,"Closed")) {
+										else if (fhttk_endsWith(get_state,"Closed")) {
 												if (!widget.hasClass("widget_fhttk_closed")) {
 														widget.addClass("widget_fhttk_closed");
 												}

fhem/contrib/YAF/FHEM/YAF/widgets/generic/generic.pm

@@ -0,0 +1,296 @@
+########################################################################################
+#
+# generic.pm
+#
+# YAF - Yet Another Floorplan
+# FHEM Projektgruppe Hochschule Karlsruhe, 2013
+# Markus Mangei, Daniel Weisensee, Prof. Dr. Peter A. Henning
+#
+# generic Widget: Marc Pro
+#
+########################################################################################
+#
+# This program is free software: you can redistribute it and/or modify
+# it under the terms of the GNU General Public License as published by
+# the Free Software Foundation, either version 3 of the License, or
+# (at your option) any later version.
+#
+# This program is distributed in the hope that it will be useful,
+# but WITHOUT ANY WARRANTY; without even the implied warranty of
+# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+# GNU General Public License for more details.
+#
+# You should have received a copy of the GNU General Public License
+# along with this program.  If not, see <http://www.gnu.org/licenses/>.
+#
+########################################################################################
+package main;
+
+use strict;
+use warnings;
+
+my $yaf_version = 0.41;
+
+use vars qw(%_GET);
+use vars qw(%defs);
+
+#######################################################################################
+#
+# generic_get_widgetcss - Create the CSS code for this widget
+#
+# no parameter
+#
+########################################################################################
+sub generic_get_widgetcss() {
+        my $output = "
+                .widget_generic {
+					width: 200px;
+					height: 50px;
+					background-repeat:no-repeat;
+					background-position:center center;
+					opacity:1 !important;
+					text-align: center;
+                }
+        ";
+        return $output;
+}
+
+########################################################################################
+#
+# generic_get_widgetjs - Create the javascript code for this widget
+#
+# no parameter
+#
+########################################################################################
+
+sub generic_get_widgetjs() {
+
+        my $output = '
+				function generic_endsWith(str, suffix) {
+					if(!str) {
+						return false;
+					}
+					return str.indexOf(suffix, str.length - suffix.length) !== -1;
+				}
+				function generic_on_click(view_id, widget_id) {
+				}
+                function generic_update_widget(view_id, widget_id) {
+					$.ajax({
+						type: "GET",
+						async: true,
+						url: "../../ajax/widget/generic/get_state",
+						data: "view_id="+view_id+"&widget_id="+widget_id,
+						context: document.body,
+						success: function(get_state) {
+							var data = jQuery.parseJSON(get_state);
+							var label = data[0];
+							var icon = data[1];
+							var statesave = $("#widget_generic_state_"+view_id+"_"+widget_id);
+							var state = data[2];
+							var statespan = data[3];
+							var fhemname = data[4];
+							var widget = $("#widget_"+view_id+"_"+widget_id);
+
+							if (!statesave.hasClass("widget_generic_"+state)) {
+								if(generic_endsWith(icon,"png")) {
+									var iconstring = label+"<br /><img src="+icon+" title="+label+"&nbsp;&#10;"+fhemname+"&nbsp;&#10;"+ state +" />"+statespan;
+									widget.html(iconstring);
+								} else {
+									var textstring = "<span title="+fhemname+" >"+label+"</span><br />" + state;
+									widget.html(textstring+" "+statespan);
+								}
+							}
+						}
+                    });
+                }';
+
+	# $output .='
+				# function generic_get_reading_keys() {
+					# $.ajax({
+						# type: "GET",
+						# async: true,
+						# url: "../../ajax/widget/generic/get_reading_keys",
+						# data: "fhemname="+$("#combobox").val(),
+						# context: document.body,
+						# success: function(dataarr) {
+							# var data = jQuery.parseJSON(dataarr);
+							# //alert(data[0]);
+							# var mySelect = $("#generic_combobox_readings");
+							# mySelect
+								# .find("option")
+								# .remove()
+								# .end()
+							# ;
+# ;
+							# $.each(data, function(val,text) {
+								# mySelect.append(
+									# $("<option></option>").val(text).html(text)
+								# );
+							# });
+						# }
+					# });
+				# }
+        # ';
+        return $output;
+}
+
+########################################################################################
+#
+# generic_getwidgethtml - HTML code for this widget
+#
+# no parameter
+#
+########################################################################################
+
+sub generic_get_widgethtml() {
+        my $output = " ";
+        return $output;
+}
+
+########################################################################################
+#
+# generic_get_addwidget_setup_html - Create the selection of devices for this widget
+#
+# no parameter
+#
+########################################################################################
+
+sub generic_get_addwidget_setup_html() {
+		my $output = "";
+        $output = "<script src='js/combobox.js'></script>";
+        $output .="<select name='generic_combobox' id='combobox' onClick=generic_get_reading_keys()>";
+        my @list = (keys %defs);
+
+        foreach my $d (sort @list) {
+            my $type  = $defs{$d}{TYPE};
+            my $name  = $defs{$d}{NAME};
+			if(defined $name) {
+				$output .= "<option value='$name'>$name</option>";
+			}
+        }
+
+        $output .= "</select>";
+		# $output .= "<br />Use Reading as state: <select name='generic_combobox_readings' id ='generic_combobox_readings' />";
+		# $output .= "<span onClick=generic_get_reading_keys('FHT_1b1b')>TEST</span>";
+        return $output;
+}
+
+# sub generic_get_reading_keys() {
+		# my $fhemname = $_GET{"fhemname"};
+
+		# my @ret = ();
+		# Log 3, "Loading Shit";
+		# foreach my $r (keys %{$defs{$fhemname}{READINGS}}) {
+			# Log 3,$r;
+			# push(@ret,$r);
+		# }
+
+		# return encode_json(\@ret);
+# }
+
+########################################################################################
+#
+# generic_get_addwidget_prepare_attributes -
+#
+#
+# no parameter
+#
+########################################################################################
+
+sub generic_get_addwidget_prepare_attributes() {
+        my $output = '
+                var temp_array = new Array();
+                temp_array[0] = "fhemname";
+                temp_array[1] = $("#combobox option:selected").val()
+                attributes_array[0] = temp_array;
+        ';
+        return $output;
+}
+
+########################################################################################
+#
+# generic_getwidget_html - HTML code for this widget. DO WE NEED THIS ? SEE ABOVE
+# DO WE NEED IT? WHO KNOWS. (It looks like this one fills the initial html of the
+#                            widget, so let's keep it for science.)
+#
+# no parameter
+#
+########################################################################################
+
+sub generic_getwidget_html() {
+        my $output = " ";
+        return $output;
+}
+
+########################################################################################
+#
+# generic_get_lamp_status - return the state of the lamp
+#
+# no parameter
+#
+########################################################################################
+
+sub generic_get_state() {
+        my $fhemname = YAF_getWidgetAttribute($_GET{"view_id"}, $_GET{"widget_id"}, "fhemname");
+		my $labeltype = YAF_getWidgetAttribute($_GET{"view_id"}, $_GET{"widget_id"}, "labeltype","");
+		my $statetype = YAF_getWidgetAttribute($_GET{"view_id"}, $_GET{"widget_id"}, "statetype","");
+		my $showlabel = YAF_getWidgetAttribute($_GET{"view_id"}, $_GET{"widget_id"}, "showlabel","1");
+		my $showicon = YAF_getWidgetAttribute($_GET{"view_id"}, $_GET{"widget_id"}, "showicon","1");
+
+		my $d = $defs{$fhemname};
+		my $state = $d->{STATE};
+		my $iconpath = "/fhem/images/default/";
+		my @ret = ();
+
+		if(!defined $state) {
+			$state = "no-state-defined";
+		}
+
+		if(defined $d) {
+			my $devStateIcon = AttrVal($fhemname,"devStateIcon",undef);
+			if(defined $devStateIcon) {
+				foreach my $entry (split (/ /,$devStateIcon)) {
+					my @keyval = split(/:/,$entry);
+					if($keyval[0] =~ $state) {
+						$iconpath .= $keyval[1] . ".png";
+					}
+				}
+				$ret[1] = $iconpath;
+			}
+
+			if($labeltype ne "") {
+				$ret[0] = AttrVal($fhemname,$labeltype,$fhemname);
+			} else {
+				$ret[0] = $fhemname;
+			}
+			$ret[0] =~ s/( )/&nbsp;/g;
+
+			if($statetype ne "") {
+				$ret[2] = generic_isdef($defs{$fhemname}{READINGS}{$statetype}{VAL}, "no-reading");
+			} else {
+				$ret[2] = $state;
+			}
+
+			$ret[3] = "<span id=widget_generic_state_".$_GET{"view_id"}."_".$_GET{"widget_id"}." class=widget_generic_".$ret[2]." />";
+
+			if($showlabel==0) {
+				$ret[0] = "";
+			}
+
+			if($showicon==0) {
+				$ret[1] = "";
+			}
+
+			$ret[4] = $fhemname;
+
+			return encode_json(\@ret);
+		} else {
+			return "Widget not found. Maybe reload this page?";
+		}
+}
+
+sub generic_isdef() {
+	return ((defined $_[0]) ? $_[0] : $_[1]);
+}
+1;
+

fhem/contrib/YAF/FHEM/YAF/www/js/yaf-basics.js

@@ -73,14 +73,14 @@ function init_RefreshWidgets() {
 // Läd die Sichten über AJAX vom Server.
 // callback: wird aufgerufen, wenn der Server geantwortet hat
 function load_views(callback) {
-    console.log("called load_views()");
+	//console.log("called load_views()");
 	$.ajax({
 		async: true,
 		url: "../../ajax/global/getViews",
 		context: document.body,
 		success: function (jsondata) {
 			views = jQuery.parseJSON(jsondata);
-            console.log(views);
+			//console.log(views);
 			if (callback) {
 				callback();
 			}
@@ -93,7 +93,7 @@ function load_views(callback) {
 // id: Id der Sicht
 // name: Name der Sicht
 function add_tab(id, name) {
-    console.log("called add_tab()");
+	//console.log("called add_tab()");
 	// Neues Div nur erzeugen, wenn es noch keins mit der entsprechenden Id gibt
 	if ($("#tabs-" + id).length <= 0) {
 		$("#tabs").append("<div id=\"tabs-" + id + "\" class=\"loaded tab\"></div>");
@@ -108,7 +108,7 @@ function add_tab(id, name) {
 // id: Id der zu löschenden Sicht
 function delete_tab(id) {
 	//	Kann noch optimiert werden!
-    console.log("called delete_tab()");
+	//console.log("called delete_tab()");
 	$("#tabs-" + id).remove();
 	$("#tabs_li-" + id).remove();
 	load_views(show_views);
@@ -118,7 +118,7 @@ function delete_tab(id) {
 // Zeigt alle Tabs neu an.
 // Zuerst werden alle Tabs gelöscht und anschließend neu anzeigen.
 function show_views() {
-    console.log("called show_views()");
+	//console.log("called show_views()");
 	$("#views").html("");
 
 	if (views.length == 0) {
@@ -159,7 +159,7 @@ function add_background_image(view_id, file, x_pos, y_pos) {
 }
 
 function update_widget(name, view_id, widget_id) {
-    console.log("update_widget " + name);
+	//console.log("update_widget " + name);
 	try {
 		eval(name + "_update_widget(" + view_id + ", " + widget_id + ")");
 	}
@@ -236,7 +236,7 @@ function add_widget(view_id, widget_id, name, x_pos, y_pos, attr_array) {
 			y_pos = parseInt(ui.position.top);
 			widget_id = $(event.target).attr("id").split("_")[2];
 			view_id = $(event.target).attr("id").split("_")[1];
-            console.log("view-id: " + get_current_view_id() + " widget-id: " + widget_id + " x-pos: " + x_pos + " y-pos: " + y_pos);
+			//console.log("view-id: " + get_current_view_id() + " widget-id: " + widget_id + " x-pos: " + x_pos + " y-pos: " + y_pos);
 			$.ajax({
 				type: "GET",
 				async: true,
@@ -244,7 +244,7 @@ function add_widget(view_id, widget_id, name, x_pos, y_pos, attr_array) {
 				data: "view_id=" + view_id + "&widget_id=" + widget_id + "&x_pos=" + x_pos + "&y_pos=" + y_pos,
 				context: document.body,
 				success: function (jsondata) {
-                    console.log("Widget Position geändert: " + jsondata)
+					//console.log("Widget Position geändert: " + jsondata)
 				}
 			});
 		}
@@ -261,8 +261,8 @@ function add_widget(view_id, widget_id, name, x_pos, y_pos, attr_array) {
 function activate_tab(view_id) {
 	if (! $("#tabs-" + view_id).hasClass("isLoaded")) {
 		current_view_id = view_id;
-        console.log("activate tab: " + view_id);
+		//console.log("activate tab: " + view_id);
-        console.log("load widgets");
+		//console.log("load widgets");
 		$("#tabs-" + view_id).html("");
 		// Speichern, dass view bereits geladen wurde
 		$("#tabs-" + view_id).addClass("isLoaded");
@@ -294,13 +294,13 @@ function activate_tab(view_id) {
 					// Aktueller View Mode für alle Widgets aktualisiert
 					switch_mode(view_mode);
 				} else {
-                    console.log("keine widgets vorhanden!");
+					console.log("keine Widgets vorhanden!");
 				}
 			}
 		});
 	} else {
 		current_view_id = view_id;
-        console.log("switch to activated tab: " + view_id);
+		//console.log("switch to activated tab: " + view_id);
 	}
 
 	return;
@@ -374,6 +374,12 @@ function init_menue() {
 	});
 
 	$("#button_editview").buttonset();
+
+	$("#button_saveconfig").button({
+		icons: {
+			secondary: "ui-icon-pencil"
+		}
+	});
 }
 
 // Initialisiert die Handler
@@ -415,6 +421,11 @@ function init_handlers() {
 		}
 	});
 
+	$("#button_saveconfig").click(function () {
+		window.location.href = "../../../../fhem?cmd=save";
+		return false;
+	});
+
 	$("#widget_menue_delete").click(function () {
 		$("#label_deletewidget").html(get_current_widget_id());
 		$("#dialog_deletewidget").dialog("open");

fhem/contrib/YAF/FHEM/YAF/www/js/yaf-dialogs.js

@@ -34,7 +34,7 @@ function init_dialogs() {
 		modal: true,
 		buttons: {
 			"Hinzufügen": function (event) {
-                console.log("before: " + views);
+				//console.log("before: " + views);
 				$("#dialog_addview_loading").show();
 				$.ajax({
 					type: "GET",
@@ -46,7 +46,7 @@ function init_dialogs() {
 						$("#dialog_addview").dialog("close");
 						load_views(show_views);
 						$("#dialog_addview_loading").hide();
-                        console.log("after: " + views);
+						//console.log("after: " + views);
 					}
 				});
 				$(this).dialog("close");
@@ -93,7 +93,7 @@ function init_dialogs() {
 		modal: true,
 		buttons: {
 			"Speichern": function (ui) {
-                console.log("before: " + views);
+				//console.log("before: " + views);
 				$("#dialog_editview_loading").show();
 				$.ajax({
 					type: "GET",
@@ -167,7 +167,7 @@ function init_dialogs() {
 									$("#dialog_addwidget_setup_loading").hide();
 								}
 							});
-                            console.log("widget hinzufügen: " + add_widget_name)
+							//console.log("widget hinzufügen: " + add_widget_name)
 							return false;
 						});
 					} else {
@@ -203,7 +203,7 @@ function init_dialogs() {
 						}
 					}
 				});
-                console.log(JSON.stringify(attributes_array));
+				//console.log(JSON.stringify(attributes_array));
 				$.ajax({
 					type: "GET",
 					async: false,
@@ -226,7 +226,7 @@ function init_dialogs() {
 			}
 		},
 		open: function (event, ui) {
-            console.log("dialog widget hinzufügen geöffnet => inhalt laden");
+			//console.log("dialog widget hinzufügen geöffnet => inhalt laden");
 		}
 	});
 
@@ -240,7 +240,7 @@ function init_dialogs() {
 			"Löschen": function (ui) {
 				var view_id = get_current_view_id();
 				var widget_id = get_current_widget_id();
-                console.log("delete view " + view_id + " widget " + widget_id);
+				//console.log("delete view " + view_id + " widget " + widget_id);
 				$.ajax({
 					type: "GET",
 					async: false,
@@ -248,7 +248,7 @@ function init_dialogs() {
 					data: "view_id=" + view_id + "&widget_id=" + widget_id,
 					context: document.body,
 					success: function (jsondata) {
-                        console.log("widget deleted");
+						//console.log("widget deleted");
 						$("#dialog_deletewidget").dialog("close");
 						$("#widget_menue").hide();
 						$("#widget_" + view_id + "_" + widget_id).remove();
@@ -333,7 +333,7 @@ function init_dialogs() {
 		buttons: {
 			"Speichern": function () {
 				$("#dialog_settings_loading").show();
-                console.log("update widget refresh interval");
+				//console.log("update widget refresh interval");
 				$.ajax({
 					type: "GET",
 					async: true,
@@ -353,7 +353,7 @@ function init_dialogs() {
 			}
 		},
 		open: function (event, ui) {
-            console.log("dialog settings opened");
+			//console.log("dialog settings opened");
 			$("#dialog_settings_loading").show();
 			$.ajax({
 				type: "GET",

fhem/contrib/YAF/FHEM/YAF/www/yaf.htm

@@ -73,6 +73,9 @@
 				init_handlers();
 				load_views(show_views);
 				init_RefreshWidgets();
+				if(window.location != window.parent.location) {
+					$('#menue').toggle();
+				}				
 				return;
 			}
 		
@@ -82,6 +85,13 @@
 			$(document).ready(function() {	
 				init();
 			});
+			
+			$(document).keydown(function(e){				
+				if (e.keyCode == 32) { 
+				   $('#menue').toggle();
+				   return false;
+				}
+			});			
 		</script>
 		<style>
 	 		###widget_css###
@@ -108,6 +118,9 @@
 		                <input type="radio" id="button_switchmode_0" name="radio" checked="checked"/><label for="button_switchmode_0" style="width: 118px;">Live</label>
 		                <input type="radio" id="button_switchmode_1" name="radio"/><label for="button_switchmode_1" style="width: 118px;">Bearbeiten</label>
 		            </div>
+	            </div>
+				<div class="menue_block">
+		            <button id="button_saveconfig" class="menue_button">Config speichern</button>
 	            </div>
 	        </div>
 	        <div id="content">
@@ -176,6 +189,5 @@
 	    	<p>Einstellungen</p>
 	    	<label>Refresh-Intervall: </label><input id="dialog_settings_intervall" name="dialog_settings_intervall" value="" />
 		</div>
-		
 	</body>
 </html>

fhem/contrib/YAF/controls_yaf.txt

@@ -8,6 +8,8 @@ DIR FHEM/YAF/widgets/fht80
 DIR FHEM/YAF/widgets/fht80/www
 DIR FHEM/YAF/widgets/fhttk
 DIR FHEM/YAF/widgets/fhttk/www
+DIR FHEM/YAF/widgets/generic
+DIR FHEM/YAF/widgets/generic/www
 DIR FHEM/YAF/www
 DIR FHEM/YAF/www/css
 DIR FHEM/YAF/www/smoothness
@@ -17,19 +19,20 @@ DIR FHEM/YAF/www/js
 DIR FHEM/YAF/xml
 UPD 2013-07-23_20:45:00 11477 FHEM/01_YAF.pm
 UPD 2013-05-15_20:00:00 6590 FHEM/YAF/widgets/fs20st/fs20st.pm
-UPD 2013-07-28_17:00:00 7498 FHEM/YAF/widgets/fht80/fht80.pm
+UPD 2013-07-31_15:30:00 7548 FHEM/YAF/widgets/fht80/fht80.pm
-UPD 2013-07-28_17:00:00 6460 FHEM/YAF/widgets/fhttk/fhttk.pm
+UPD 2013-07-31_15:30:00 6534 FHEM/YAF/widgets/fhttk/fhttk.pm
+UPD 2013-07-31_15:30:00 8834 FHEM/YAF/widgets/generic/generic.pm
 UPD 2013-05-15_20:00:00 6617 FHEM/YAF/widgets/fs20easylamp/fs20easylamp.pm
 UPD 2013-05-15_20:00:00 2608 FHEM/YAF/www/img/loading.gif
 UPD 2013-05-15_20:00:00 766 FHEM/YAF/www/img/lamp_off.png
 UPD 2013-05-15_20:00:00 19226 FHEM/YAF/www/img/background.png
 UPD 2013-05-15_20:00:00 831 FHEM/YAF/www/img/lamp_on.png
-UPD 2013-05-15_20:00:00 7146 FHEM/YAF/www/yaf.htm
+UPD 2013-07-31_15:30:00 11957 FHEM/YAF/www/js/yaf-basics.js
-UPD 2013-07-20_16:00:00 14672 FHEM/YAF/www/js/yaf-dialogs.js
+UPD 2013-07-31_15:30:00 10727 FHEM/YAF/www/js/yaf-dialogs.js
+UPD 2013-07-31_15:30:00 7512 FHEM/YAF/www/yaf.htm
 UPD 2013-05-15_20:00:00 3433 FHEM/YAF/www/js/combobox.js
 UPD 2013-05-15_20:00:00 4593 FHEM/YAF/www/js/jquery.ui.touch-punch.min.js
 UPD 2013-05-15_20:00:00 237176 FHEM/YAF/www/js/jquery-ui-1.9.1.custom.min.js
-UPD 2013-07-20_16:00:00 13913 FHEM/YAF/www/js/yaf-basics.js
 UPD 2013-05-15_20:00:00 448301 FHEM/YAF/www/js/jquery-ui-1.9.1.custom.js
 UPD 2013-05-15_20:00:00 265218 FHEM/YAF/www/js/jquery-1.8.2.js
 UPD 2013-05-15_24:00:00 2313 FHEM/YAF/www/css/yaf.css