Menu
▾
▴
[Openautomation-svn] SF.net SVN: openautomation:[87] CometVisu/trunk
|
From: <net...@us...> - 2010-11-06 18:08:58
|
Revision: 87
http://openautomation.svn.sourceforge.net/openautomation/?rev=87&view=rev
Author: netzkind
Date: 2010-11-06 18:08:50 +0000 (Sat, 06 Nov 2010)
Log Message:
-----------
rewrite of editor-code, now auto-extensible; changed handling of creators in visudesign_pure; added automatic DPT and GA-dropdown; added validation for input-values
Modified Paths:
--------------
CometVisu/trunk/ChangeLog
CometVisu/trunk/visu/edit/save_config.php
CometVisu/trunk/visu/edit/style_edit.css
CometVisu/trunk/visu/edit/visuconfig_edit.js
CometVisu/trunk/visu/edit_config.html
CometVisu/trunk/visu/lib/templateengine.js
CometVisu/trunk/visu/lib/visudesign_custom.js
CometVisu/trunk/visu/lib/visudesign_pure.js
CometVisu/trunk/visu/visu_config.xsd
Added Paths:
-----------
CometVisu/trunk/visu/edit/get_addresses.php
Modified: CometVisu/trunk/ChangeLog
===================================================================
--- CometVisu/trunk/ChangeLog 2010-11-06 17:01:33 UTC (rev 86)
+++ CometVisu/trunk/ChangeLog 2010-11-06 18:08:50 UTC (rev 87)
@@ -1,7 +1,7 @@
HEAD
====
-- New Feature: editor
+- New Feature: editor (easily extensible)
- New Feature: generic slide widget
- New Feature: slide and dim widgets allow range and step attributes
- New Feature: ranges for mapping and style
@@ -10,6 +10,7 @@
- New Feature: <text> has new optional attribute "align"
- Added XML Schema / XSD to validate config-XML
- New Feature: tag for videos (HTML5 based)
+- changed procedures for creating new widgets
0.5.0
=====
Added: CometVisu/trunk/visu/edit/get_addresses.php
===================================================================
--- CometVisu/trunk/visu/edit/get_addresses.php (rev 0)
+++ CometVisu/trunk/visu/edit/get_addresses.php 2010-11-06 18:08:50 UTC (rev 87)
@@ -0,0 +1,35 @@
+<?php
+define('FILE_GA', "/etc/wiregate/eibga.conf");
+define('FILE_HG', "/etc/wiregate/eibga_hg.conf");
+define('FILE_MG', "/etc/wiregate/eibga_mg.conf");
+
+$arrGA = parse_ini_file(FILE_GA, true);
+$arrHG = parse_ini_file(FILE_HG, true);
+$arrMG = parse_ini_file(FILE_MG, true);
+
+
+$arrAdresses = array();
+foreach ($arrGA as $strGA => $arrData) {
+ $arrGAParts = explode("/", $strGA, 3);
+
+ $strHG = "";
+ if (true === isset($arrHG[$arrGAParts[0]])) {
+ $strHG = utf8_encode($arrHG[$arrGAParts[0]]['name']);
+ }
+
+ $strMG = "";
+ if (true === isset($arrMG[$arrGAParts[1]])) {
+ $strMG = utf8_encode($arrMG[$arrGAParts[1]]['name']);
+ }
+
+ $arrAdresses[$strHG][$strMG][] = array(
+ "address" => $strGA,
+ "name" => utf8_encode($arrData['name']),
+ "dpt" => $arrData['DPTSubId']
+ );
+}
+
+print json_encode($arrAdresses);
+exit;
+
+?>
Modified: CometVisu/trunk/visu/edit/save_config.php
===================================================================
--- CometVisu/trunk/visu/edit/save_config.php 2010-11-06 17:01:33 UTC (rev 86)
+++ CometVisu/trunk/visu/edit/save_config.php 2010-11-06 18:08:50 UTC (rev 87)
@@ -125,6 +125,11 @@
// Parameter die mit "_" beginnen sind special purpose
continue;
}
+
+ if ($strAttribute === "textContent") {
+ $objXML->nodeValue = $strValue;
+ continue;
+ }
$objXML->setAttribute($strAttribute, $strValue);
}
Modified: CometVisu/trunk/visu/edit/style_edit.css
===================================================================
--- CometVisu/trunk/visu/edit/style_edit.css 2010-11-06 17:01:33 UTC (rev 86)
+++ CometVisu/trunk/visu/edit/style_edit.css 2010-11-06 18:08:50 UTC (rev 87)
@@ -9,6 +9,8 @@
filter: alpha(opacity=50);
opacity: 0.5;
text-align: center;
+ float: none !important;
+ padding: 0 !important;
}
.editcontrol {
@@ -62,7 +64,7 @@
width: 1.5em;
}
-div#addDummy {
+div#addMaster {
border: 1px solid #444;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
Modified: CometVisu/trunk/visu/edit/visuconfig_edit.js
===================================================================
--- CometVisu/trunk/visu/edit/visuconfig_edit.js 2010-11-06 17:01:33 UTC (rev 86)
+++ CometVisu/trunk/visu/edit/visuconfig_edit.js 2010-11-06 18:08:50 UTC (rev 87)
@@ -4,7 +4,10 @@
confirm_save: "Save config?",
prompt_rename: "Rename page '%s' to ...",
save_good: "Config has been successfully saved.",
- save_bad: "Config not saved. Error: '%s'"
+ save_bad: "Config not saved. Error: '%s'",
+ value_required: "Field '%s' is required but empty. Please correct your input.",
+ value_invalid: "The value for field '%s' is invalid. Please correct your input.",
+ regexp_invalid: "There something wrong with the cable."
}
if (typeof texts[element] == "undefined") {
@@ -20,10 +23,12 @@
return myText;
}
+var addressesCache;
+
jQuery(document).ready(function() {
jQuery("div#addwidgetcontrol").bind("click", function() {
- jQuery("#addDummy").trigger("show").find("#add_type").triggerHandler("change");
+ jQuery("#addMaster").trigger("show").find("#add_type").triggerHandler("change");
});
$("#saveconfigcontrol").bind("click", function () {
@@ -33,7 +38,19 @@
}
});
+ // get all GA from the server
+ $.getJSON('edit/get_addresses.php', function(data) { addressesCache = data});
+
jQuery("#pages").bind("done", function() {
+ $("#pages hr, #pages br").each(function() {
+ if ($(this).closest(".widget").length == 0) {
+ $(this).wrap("<div class=\"widget line\" />");
+ var d = $.extend({}, $(this).data());
+ $(this).closest("div.widget").data(d);
+ }
+ });
+
+
jQuery(".page div").sortable({
handle: ".movecontrol",
items: '.widget',
@@ -54,13 +71,27 @@
jQuery(this).css("background-color", jQuery(this).data("background-color-old"));
jQuery(this).find("div.editcontrol, div.movecontrol, div.removecontrol").remove();
});
+
+ var options = {};
+ $("#addMaster").find("select#add_type").empty();
+ jQuery.each(design.creators, function (index, e) {
+ $("#addMaster").find("select#add_type").append(
+ $("<option />").attr("value", index).html(index)
+ );
+ });
});
jQuery(".removecontrol").live("click", function() {
var widget = $(this).parents("div.widget");
var data = getWidgetData(widget, true);
- var b = confirm(lingua("confirm_delete", data._text));
+ var t;
+ if (data._type == "page") {
+ t = data.name;
+ } else {
+ t = data.textContent;
+ }
+ var b = confirm(lingua("confirm_delete", t));
if (b) {
widget.remove();
}
@@ -68,6 +99,7 @@
jQuery(".editcontrol").live("click", function() {
+
var widget = $(this).parents("div.widget");
if (widget.is(".pagelink")) {
return renamePage(widget);
@@ -78,29 +110,21 @@
// kennzeichnen welches Element grade bearbeitet wird
widget.addClass("inedit");
- jQuery.each(data, function(i, element) {
- // alle bekannten Einstellungen in die Maske einfügen
- $("#addDummy").find("#add_" + i).val(element);
- });
+ $("#addMaster").data("widgetdata", data);
- if (typeof data._text != "undefined") {
- // text ist in einem Sonderfeld abgelegt
- $("#addDummy #add_text").val(data._text)
- }
+ $("#addMaster #add_type").find("option[value=" + data._type + "]").attr("selected", "selected");
- $("#addDummy #add_type").find("option[value=" + data._type + "]").attr("selected", "selected").trigger("change");
-
- $("#addDummy").triggerHandler("show");
+ $("#addMaster").triggerHandler("show");
});
jQuery("#pages").bind("done", function() {
// die Selectlisten vorbelegen
- $("#addDummy #add_mapping, #addDummy #add_style").empty().append($("<option />").attr("value", "").html("-"));
+ $("#addMaster #add_mapping, #addMaster #add_style").empty().append($("<option />").attr("value", "").html("-"));
jQuery.each(mappings, function(i, element) {
- $("#addDummy #add_mapping").append($("<option />").attr("value", i).html(i));
+ $("#addMaster #add_mapping").append($("<option />").attr("value", i).html(i));
});
jQuery.each(styles, function(i, element) {
- $("#addDummy #add_style").append($("<option />").attr("value", i).html(i));
+ $("#addMaster #add_style").append($("<option />").attr("value", i).html(i));
});
});
@@ -108,14 +132,21 @@
jQuery(function() {
- // dem AddDummy Leben einhauchen
- jQuery("#addDummy")
+ // dem addMaster Leben einhauchen
+ jQuery("#addMaster")
.bind("show", function() {
if ($("#pages .inedit").is(".widget")) {
$(this).find(".create").hide().end().find(".edit").show();
} else {
$(this).find(".create").show().end().find(".edit").hide();
}
+
+ // if we have widget-specific data, we must be in edit-mode
+ var widgetdata = $(this).data("widgetdata");
+ if (typeof widgetdata != "undefined") {
+ $(this).find("#add_type").find("option[value=" + widgetdata._type + "]").attr("selected", "selected").trigger("change");
+ }
+
$(this).show()
.find("#add_type").triggerHandler("change")
jQuery(".page div").sortable("destroy");
@@ -126,73 +157,162 @@
$("#pages").triggerHandler("done");
})
.bind("cleanup", function() {
+ $(this).removeData("widgetdata");
jQuery(this).find("input[type=text]").val("");
$("#pages").find(".inedit").removeClass("inedit");
})
.find("#add_cancel").click(function() {
- jQuery("#addDummy").trigger("hide").trigger("cleanup")
+ jQuery("#addMaster").trigger("hide").trigger("cleanup")
})
.end()
.find("#add_type").change(function() {
+ // the type has been changed
+ // we need to change the input-field accordingly to match
+ // what attributes we need
var val = jQuery(this).val();
- var divSelector = "";
- switch (val) {
- case 'switch':
- case 'toggle':
- divSelector = ".add_text, .add_address, .add_datatype, .add_response_address, .add_response_datatype, .add_pre, .add_post, .add_mapping, .add_style";
- break;
- case 'dim':
- case 'slide':
- divSelector = ".add_text, .add_address, .add_datatype, .add_response_address, .add_response_datatype, .add_pre, .add_post, .add_mapping, .add_style, .add_min, .add_max, .add_step";
- break;
- case 'trigger':
- divSelector = ".add_text, .add_address, .add_datatype, .add_pre, .add_post, .add_mapping, .add_style, .add_value";
- break;
- case 'line':
- divSelector = "";
- break;
- case 'shade':
- divSelector = "";
- break;
- case 'info':
- divSelector = ".add_text, .add_address, .add_datatype, .add_pre, .add_post, .add_mapping, .add_style";
- break;
- case 'text':
- divSelector = ".add_text";
- break;
- case 'page':
- divSelector = ".add_text";
- break;
+ var creator = design.getCreator(val);
+ var attributes = creator.attributes;
+ if (typeof attributes == "undefined") {
+ alert("there's something wrong with the cable");
+ return;
}
- jQuery("#addDummy").find("div.add_inputs")
- .not(divSelector).hide()
- .find("input[type=text]").val("")
- .end()
- .end()
- .filter(divSelector).show();
+ var container = $("#addMaster div.inputs");
+ var values = $.extend({}, $("#addMaster").data("widgetdata"));
+
+ // alte Werte zwischenspeichern
+ container.find(":input").each(function() {
+ if ($(this).val() != "") {
+ var name = $(this).data("name");
+ values[name] = $(this).val();
+ }
+ })
+ container.empty();
+
+ if (creator.content == "string") {
+ var element = $("<div />").addClass("add_input").addClass("content")
+ .append($("<label />").attr("for", "add_textContent").html("text-content"))
+ .append($("<input type=\"text\" id=\"add_textContent\"/>"));
+ if (typeof values["textContent"] != "undefined") {
+ element.find("input").val(values["textContent"]);
+ }
+
+ container.append(element);
+ delete element;
+ }
+
+ $.each(attributes, function (index, e) {
+ var element = $("<div />").addClass("add_input").addClass("attribute")
+ .append($("<label />").attr("for", "add_" + index).html(index));
+
+ switch (e.type) {
+ case "address":
+ element.append($("<select id=\"add_" + index + "\" />")
+ .append($("<option />").attr("value", "").html("-")));
+
+ element.find("select:first").append(getAddressesObject());
+
+ element.find("select").bind("change", function() {
+ // on changing the address, the coresponding datatype-field is
+ // automagically set
+ var name = $(this).attr("id");
+ var dptFieldName = name.replace(/_?address$/i, "_datatype");
+ var dpt = $(this).find("option:selected").attr("class").replace(/[^dpt_\d+\.\d+]*/, "").replace(/^dpt_/, "");
+ $("#addMaster div.inputs #" + dptFieldName).val(dpt);
+ });
+
+ if (typeof values[index] != "undefined") {
+ element.find("option[value=" + values[index] + "]").attr("selected", "selected");
+ }
+
+ break;
+
+ case "mapping":
+ element.append($("<select id=\"add_mapping\" />")
+ .append($("<option />").attr("value", "").html("-")));
+ jQuery.each(mappings, function(i, tmp) {
+ element.find("select#add_mapping").append($("<option />").attr("value", i).html(i));
+ });
+
+ if (typeof values[index] != "undefined") {
+ element.find("option[value=" + values[index] + "]").attr("selected", "selected");
+ }
+
+ break;
+
+ case "style":
+ element.append($("<select id=\"add_style\" />")
+ .append($("<option />").attr("value", "").html("-")));
+ jQuery.each(styles, function(i, tmp) {
+ element.find("select#add_style").append($("<option />").attr("value", i).html(i));
+ });
+
+ if (typeof values[index] != "undefined") {
+ element.find("option[value=" + values[index] + "]").attr("selected", "selected");
+ }
+
+ break;
+
+ default:
+ element.append($("<input type=\"text\" id=\"add_" + index + "\" />"));
+
+ if (typeof values[index] != "undefined") {
+ element.find("input").val(values[index]);
+ }
+
+ break;
+ }
+
+ element.find(":input")
+ .data("name", index)
+ .data("required", e.required)
+ .data("type", e.type);
+
+ container.append(element);
+ delete element;
+ });
})
.end()
.find("#add_submit").click(function() {
// Daten aus den Eingabefeldner übernehmen
- // einfach alle rein - das Design weiß schon welche Daten es benötigt
+ // einfach alle rein - wir haben ja nur die passenden Felder
+
+ var container = $("#addMaster div.inputs");
+
var dataObject = {
- value: jQuery("#addDummy input#add_value").val(),
- address: jQuery("#addDummy input#add_address").val(),
- datatype: jQuery("#addDummy input#add_datatype").val(),
- response_address: jQuery("#addDummy input#add_response_address").val(),
- response_datatype: jQuery("#addDummy input#add_response_datatype").val(),
- pre: jQuery("#addDummy input#add_pre").val(),
- post: jQuery("#addDummy input#add_post").val(),
- mapping: jQuery("#addDummy select#add_mapping").val(),
- design: jQuery("#addDummy select#add_style").val(),
- min: jQuery("#addDummy input#add_min").val(),
- max: jQuery("#addDummy input#add_max").val(),
- step: jQuery("#addDummy input#add_step").val(),
- textContent: jQuery("#addDummy input#add_text").val(),
- nodeName: jQuery("#addDummy #add_type").val(),
- name: jQuery("#addDummy input#add_text").val() // wird nur bei page benötigt
- };
+ nodeName: jQuery("#addMaster #add_type").val()
+ };
+
+ var error = false;
+
+ // alte Werte zwischenspeichern
+ container.find(":input").each(function() {
+ var name;
+ if ($(this).closest("div.add_input").hasClass("attribute")) {
+ name = $(this).data("name");
+ } else if ($(this).closest("div.add_input").hasClass("content")) {
+ name = "textContent";
+ }
+
+ if ($(this).val() != "") {
+ // validating
+ if (false === isInputValid($(this).val(), $(this).data("type"))) {
+ alert(lingua("value_invalid", name));
+ // do not save
+ error = true;
+ }
+ dataObject[name] = $(this).val();
+ } else if ($(this).data("required") === true) {
+ // do not save
+ alert(lingua("value_required", name));
+ error = true;
+ }
+ })
+
+ if (error !== false) {
+ return;
+ }
+
// als path verwenden wir einfach den aktuellen UNIX-Timestamp
// der wird nicht schon belegt sein
var path = $(".page:visible:last").attr("id");
@@ -210,12 +330,55 @@
jQuery("#pages").triggerHandler("done");
// und dann noch mich wieder verstecken
- jQuery("#addDummy").trigger("hide").trigger("cleanup");
+ jQuery("#addMaster").trigger("hide").trigger("cleanup");
})
.end();
});
+/**
+ * check whether a user-given value matches the type-criterias and thus is valid
+ */
+function isInputValid(val, type) {
+ if (typeof type == "undefined" || type == null) {
+ // nicht mit Geistern rumschlagen
+ return true;
+ }
+ if (typeof type == "object") {
+ // wohl ein regulärer Ausdruck
+ try {
+ if (val.match(type)) {
+ return true;
+ } else {
+ return false;
+ }
+
+ } catch (e) {
+ alert(lingua("regexp_invalid"));
+ return false;
+ }
+ }
+
+ switch (type) {
+ case "address":
+ return !Boolean(val.match(/^[0-9]{1,2}\/[0-9]{1,2}\/[0-9]{1,2}$/));
+ break;
+ case "numeric":
+ return Boolean(val.match(/^\d+([\.,]\d+)?$/g));
+ break;
+ case "string":
+ case "uri":
+ return Boolean(typeof val == "string");
+ break;
+ case "mapping":
+ return Boolean(typeof mappings[val] != "undefined");
+ break;
+ case "style":
+ return Boolean(typeof styles[val] != "undefined");
+ break;
+ }
+}
+
function saveConfig() {
var configData = createObjectFromPage("#0.page");
var configDataJSON = JSON.stringify(configData);
@@ -245,80 +408,17 @@
});
}
-function getWidgetData(element, nodive) {
+function getWidgetData(element) {
var myObj = {};
+
var e = $(element);
- var a = $(e).find(".actor");
- if (e.is("div.switch")) {
- // switch oder trigger
- if (a.data("type") == "trigger") {
- // trigger
- myObj = {
- address: a.data("GA"),
- datatype: a.data("datatype"),
- value: a.data("sendValue"),
- pre: e.data("pre"),
- post: e.data("post"),
- mapping: a.data("mapping"),
- style: a.data("style"),
- _text: e.find("div.label").text(),
- _type: "trigger"
- };
- } else {
- // switch
- myObj = {
- address: a.data("GA"),
- datatype: a.data("datatype"),
- pre: e.data("pre"),
- post: e.data("post"),
- mapping: a.data("mapping"),
- style: a.data("style"),
- response_address: e.data("response_address"),
- response_datatype: e.data("response_datatype"),
- _text: e.find("div.label").text(),
- _type: "switch"
- };
- }
- } else if (e.is("div.text")) {
- // text
- myObj = {
- _text: e.find("div.label").text(),
- _type: "text"
- };
- } else if (e.is("div.dim")) {
- // slider
- myObj = {
- address: a.data("GA"),
- datatype: a.data("datatype"),
- mapping: a.data("mapping"),
- style: a.data("style"),
- min: a.data("min"),
- max: a.data("max"),
- step: a.data("step"),
- response_address: e.data("response_address"),
- response_datatype: e.data("response_datatype"),
- _text: e.find("div.label").text(),
- _type: "dim"
- };
- } else if (e.is("div.info")) {
- // Info-Feld
- myObj = {
- address: a.data("GA"),
- datatype: a.data("datatype"),
- pre: e.data("pre"),
- post: e.data("post"),
- mapping: a.data("mapping"),
- style: a.data("style"),
- _text: e.find("div.label").text(),
- _type: "info"
- };
- } else if (e.is("div.line")) {
- // Trennlinie
- myObj = {
- _type: "line",
- _text: "line"
- }
- } else if (e.is(".pagelink")) {
+
+ myObj._type = e.data("nodeName");
+ myObj.textContent = e.data("textContent");
+ $.extend(myObj, e.data("attributes"));
+
+ if (e.is(".pagelink")) {
+ // it's a page, we need to dive in
// eine Sub-Seite
// versuchen die Seiten-Id durch den Link zu bekommen
var s = e.find("a");
@@ -334,19 +434,10 @@
if (subObject._elements.length > 0) {
myObj = subObject;
}
- } else if (nodive) {
- // wir sollen nicht rekursiv arbeiten,
- // aber dieses eine Objekt liefern wir zurück
- myObj = {
- _type: "page",
- _text: s.text(), // für edit-modus benötigt
- name: s.text()
- };
}
}
return myObj;
-
}
function createObjectFromPage(pageObject) {
@@ -378,7 +469,7 @@
function renamePage(widget) {
var data = getWidgetData(widget, true);
- var newText = prompt(lingua("prompt_rename", data._text), data._text);
+ var newText = prompt(lingua("prompt_rename", data.name), data.name);
if (!newText) {
return;
}
@@ -386,5 +477,35 @@
var path = widget.data("path");
widget.find("a").html(newText);
+ widget.data("name", newText);
$("#pages").find("#" + path + ".page").find("h1").html(newText);
+}
+
+var cachedAddressesObject;
+function getAddressesObject() {
+
+ if (typeof cachedAddressesObject == "object") {
+ return cachedAddressesObject.clone();
+ }
+
+ element = $("<select />");
+
+ $.each(addressesCache, function(hg, sub) {
+ $.each(sub, function(mg, addresses) {
+ element.append(
+ $("<optgroup />").attr("label", hg + " - " + mg)
+ );
+ $.each(addresses, function (i, address) {
+ element.find("optgroup:last")
+ .append($("<option />").attr("value", address.address)
+ .addClass("dpt_" + address.dpt)
+ .html(address.name)
+ )
+ });
+ });
+ });
+
+ cachedAddressesObject = element.children();
+
+ return cachedAddressesObject;
}
\ No newline at end of file
Modified: CometVisu/trunk/visu/edit_config.html
===================================================================
--- CometVisu/trunk/visu/edit_config.html 2010-11-06 17:01:33 UTC (rev 86)
+++ CometVisu/trunk/visu/edit_config.html 2010-11-06 18:08:50 UTC (rev 87)
@@ -13,7 +13,7 @@
<script src="lib/visuclient.js" type="text/javascript"></script>
<script src="lib/knx_decode.js" type="text/javascript"></script>
<script src="lib/visudesign_pure.js" type="text/javascript"></script>
- <script src="edit/visudesign_editmode.js" type="text/javascript"></script>
+ <script src="lib/visudesign_custom.js" type="text/javascript"></script>
<script src="lib/templateengine.js" type="text/javascript"></script>
<script src="edit/visuconfig_edit.js" type="text/javascript"></script>
<script src="edit/json2.js" type="text/javascript"></script>
@@ -35,7 +35,7 @@
</div>
</div>
- <div id="addDummy">
+ <div id="addMaster">
<form method="post" action="self">
<div class="addwidget">
<h2 class="create">Insert new widget</h2>
@@ -43,73 +43,13 @@
<div class="editcontrols">
<label for="add_type">Typ</label>
<select id="add_type">
- <option value="switch">switch</option>
- <option value="trigger">trigger</option>
- <option value="line">line</option>
- <option value="dim">slider/dimmer</option>
- <option value="shade">shade</option>
- <option value="info">info</option>
- <option value="text">text</option>
- <option value="page">page</option>
+ <option>-</option>
</select>
- <div class="add_inputs add_text">
- <label for="add_text">Text</label>
- <input type="text" id="add_text" />
- </div>
- <div class="add_inputs add_address">
- <label for="add_address">address</label>
- <input type="text" id="add_address" />
- </div>
- <div class="add_inputs add_datatype">
- <label for="add_datatype">DPT</label>
- <input type="text" id="add_datatype" />
- </div>
- <div class="add_inputs add_value">
- <label for="add_value">Value</label>
- <input type="text" id="add_value" />
- </div>
+ <div class="inputs">
- <div class="add_inputs add_response_address">
- <label for="add_response_address">response_address</label>
- <input type="text" id="add_response_address" />
</div>
- <div class="add_inputs add_response_datatype">
- <label for="add_response_datatype">response DPT</label>
- <input type="text" id="add_response_datatype" />
- </div>
- <div class="add_inputs add_min">
- <label for="add_min">mininmal value</label>
- <input type="text" id="add_min" />
- </div>
- <div class="add_inputs add_max">
- <label for="add_max">maximal value</label>
- <input type="text" id="add_max" />
- </div>
- <div class="add_inputs add_step">
- <label for="add_step">step size</label>
- <input type="text" id="add_step" />
- </div>
-
-
- <div class="add_inputs add_pre">
- <label for="add_pre">pre</label>
- <input type="text" id="add_pre" />
- </div>
- <div class="add_inputs add_post">
- <label for="add_post">post</label>
- <input type="text" id="add_post" />
- </div>
-
- <div class="add_inputs add_mapping">
- <label for="add_mapping">mapping</label>
- <select id="add_mapping"><option>-</option></select>
- </div>
- <div class="add_inputs add_style">
- <label for="add_style">style</label>
- <select id="add_style"><option>-</option></select>
- </div>
</div>
<input type="button" id="add_submit" value="OK"/>
Modified: CometVisu/trunk/visu/lib/templateengine.js
===================================================================
--- CometVisu/trunk/visu/lib/templateengine.js 2010-11-06 17:01:33 UTC (rev 86)
+++ CometVisu/trunk/visu/lib/templateengine.js 2010-11-06 18:08:50 UTC (rev 87)
@@ -215,9 +215,26 @@
function create_pages( page, path )
{
- if( design.creators[ page.nodeName ] )
- return design.creators[ page.nodeName ]( page, path );
- return design.creators.unknown( page );
+ var retval;
+ retval = design.creators[ page.nodeName ].create( page, path );
+
+ node = $(page).get(0);
+ var attributes = {};
+ if (typeof node.attributes != "undefined") {
+ for(var i=0; i<node.attributes.length; i++) {
+ if(node.attributes.item(i).specified) {
+ attributes[node.attributes.item(i).nodeName]=node.attributes.item(i).nodeValue
+ }
+ }
+ } else {
+ $.extend(attributes, node);
+ }
+
+ retval.data("attributes", attributes)
+ .data("path", path)
+ .data("nodeName", page.nodeName)
+ .data("textContent", page.textContent);
+ return retval;
}
function scrollToPage( page_id )
Modified: CometVisu/trunk/visu/lib/visudesign_custom.js
===================================================================
--- CometVisu/trunk/visu/lib/visudesign_custom.js 2010-11-06 17:01:33 UTC (rev 86)
+++ CometVisu/trunk/visu/lib/visudesign_custom.js 2010-11-06 18:08:50 UTC (rev 87)
@@ -24,12 +24,13 @@
/**
* Custom changes could go here and look e.g. like
****************************************
-VisuDesign_Custom.prototype.creators.text = function( page )
-{
- var ret_val = $('<div class="widget" />');
- ret_val.addClass( 'text' );
- ret_val.append( '<div class="label">[' + page.textContent + ']</div>' );
- return ret_val;
-}
+VisuDesign_Custom.prototype.addCreator("line", {
+ create: function( page, path ) {
+ return $( '<hr />' );
+ },
+ attributes: {
+ },
+ content: false
+});
****************************************
*/
Modified: CometVisu/trunk/visu/lib/visudesign_pure.js
===================================================================
--- CometVisu/trunk/visu/lib/visudesign_pure.js 2010-11-06 17:01:33 UTC (rev 86)
+++ CometVisu/trunk/visu/lib/visudesign_pure.js 2010-11-06 18:08:50 UTC (rev 87)
@@ -18,202 +18,300 @@
/**
* This class defines all the building blocks for a Visu in the "Pure" design
*/
-function VisuDesign()
-{
- /**
- * The creators object contians all widgets creators and their mappin to the
- * XML config file tags
- */
- this.creators = {};
- this.creators.page = function( page, path )
- {
- var ret_val = $('<div class="widget" />');
- var style = ( '0' != path ) ? 'display:none' : '';
- var name = $(page).attr('name'); //path += '_' + name;
- var type = $(page).attr('type'); //text, 2d or 3d
- ret_val.addClass( 'link' );
- ret_val.append( '<a href="javascript:scrollToPage(\''+path+'\')">' + name + '</a>' );
- var childs = $(page).children();
- var container = $( '<div class="clearfix"/>' );
+function VisuDesign() {
+ this.creators = {};
- container.append( '<h1>' + name + '</h1>' );
- $( childs ).each( function(i){
- container.append( create_pages(childs[i], path + '_' + i ) );
- } );
- $('#pages').prepend( $( '<div class="page" id="' + path + '" style="'+style+';"/>' ).append(container) );
- return ret_val;
- }
+ this.addCreator = function (name, object) {
+ this.creators[name] = object;
+ }
- this.creators.line = function()
- {
- return $( '<hr />' );
- }
+ this.getCreator = function(name) {
+ if (typeof this.creators[name] == undefined) {
+ return this.creators.unknown;
+ }
+ return this.creators[name];
+ }
- this.creators.break = function()
- {
- return $( '<br />' );
- }
+ /**
+ * The creators object contians all widgets creators and their mappin to the
+ * XML config file tags
+ */
+ this.addCreator("page", {
+ create: function( page, path ) {
+ var ret_val = $('<div class="widget" />');
+ var style = ( '0' != path ) ? 'display:none' : '';
+ var name = $(page).attr('name'); //path += '_' + name;
+ var type = $(page).attr('type'); //text, 2d or 3d
+ ret_val.addClass( 'link' ).addClass("pagelink");
+ ret_val.append( '<a href="javascript:scrollToPage(\''+path+'\')">' + name + '</a>' );
+ var childs = $(page).children();
+ var container = $( '<div class="clearfix"/>' );
- this.creators.text = function( page )
- {
- var ret_val = $('<div class="widget" />');
- ret_val.addClass( 'text' );
- var style = '';
- if( $(page).attr('align') ) style += 'text-align:' + $(page).attr('align') + ';';
- if( style != '' ) style = 'style="' + style + '"';
- ret_val.append( '<div ' + style + '>' + page.textContent + '</div>' );
- return ret_val;
- }
+ container.append( '<h1>' + name + '</h1>' );
+ $( childs ).each( function(i){
+ container.append( create_pages(childs[i], path + '_' + i ) );
+ } );
+ $('#pages').prepend( $( '<div class="page" id="' + path + '" style="'+style+';"/>' ).append(container) );
+ return ret_val;
+ },
+ attributes: {
+ name: {type: "string", required: true}
+ },
+ content: true
+ });
- this.creators.info =
- this.creators.shade = function( page )
- {
- var ret_val = $('<div class="widget" />');
- ret_val.addClass( 'info' );
- var label = '<div class="label">' + page.textContent + '</div>';
- ga_list.push( $(page).attr('address') );
- var actor = '<div class="actor GA' + $(page).attr('address').split('/').join('_') + '">';
- if( $(page).attr('pre') ) actor += '<div>' + $(page).attr('pre') + '</div>';
- actor += '<div class="value">-</div>';
- if( $(page).attr('post') ) actor += '<div>' + $(page).attr('post') + '</div>';
- actor += '</div>';
- ret_val.append( label ).append( $(actor).data( {
- 'GA': $(page).attr('address'),
- 'datatype': $(page).attr('datatype'),
- 'mapping' : $(page).attr('mapping'),
- 'style' : $(page).attr('style')
- } ) );
- return ret_val;
- }
+ this.addCreator("line", {
+ create: function( page, path ) {
+ return $( '<hr />' );
+ },
+ attributes: {
+ },
+ content: false
+ });
- this.creators.dim =
- this.creators.slide = function( page )
- {
- var ret_val = $('<div class="widget" />');
- ret_val.addClass( 'dim' );
- var label = '<div class="label">' + page.textContent + '</div>';
- ga_list.push( $(page).attr('address') );
- var actor = $('<div class="actor GA' + $(page).attr('address').split('/').join('_') + '" />');
- ret_val.append( label ).append( actor );
- var min = parseFloat( $(page).attr('min') || 0 );
- var max = parseFloat( $(page).attr('max') || 100 );
- var step = parseFloat( $(page).attr('step') || 0.5 );
- ret_val.find('.actor').data( {
- 'events': $(actor).data( 'events' ),
- 'GA': $(page).attr('address'),
- 'datatype': $(page).attr('datatype'),
- 'mapping' : $(page).attr('mapping'),
- 'style' : $(page).attr('style'),
- 'min' : min,
- 'max' : max,
- 'step' : step,
- 'type' : 'dim'
- }).slider({step:step,min:min,max:max, animate: true,start:slideStart,change:slideChange});//slide:slideAction});
+ this.addCreator("break", {
+ create: function( page, path ) {
+ return $( '<br />' );
+ },
+ attributes: {
+ },
+ content: false
+ });
- return ret_val;
- }
- this.creators.switch =
- this.creators.toggle = function( page )
- {
- var ret_val = $('<div class="widget" />');
- ret_val.addClass( 'switch' );
- var label = '<div class="label">' + page.textContent + '</div>';
- var response_address = $(page).attr('response_address');
- ga_list.push( response_address );
- var actor = '<div class="actor GA' + response_address.split('/').join('_') + ' switchUnpressed">';
- if( $(page).attr('pre') ) actor += $(page).attr('pre');
- actor += '<div class="value">-</div>';
- if( $(page).attr('post') ) actor += $(page).attr('post');
- actor += '</div>';
- ret_val.append( label ).append( $(actor).data( {
- 'GA': $(page).attr('address'),
- 'datatype': $(page).attr('datatype'),
- 'mapping' : $(page).attr('mapping'),
- 'style' : $(page).attr('style'),
- 'type' : 'toggle'
- } ).bind('click',switchAction) );
- return ret_val;
- }
+ this.addCreator("text", {
+ create: function( page, path ) {
+ var ret_val = $('<div class="widget" />');
+ ret_val.addClass( 'text' );
+ var style = '';
+ if( $(page).attr('align') ) style += 'text-align:' + $(page).attr('align') + ';';
+ if( style != '' ) style = 'style="' + style + '"';
+ ret_val.append( '<div ' + style + '>' + page.textContent + '</div>' );
+ return ret_val;
+ },
+ attributes: {
+ align: {type: "string", required: false}
+ },
+ content: "string"
+ });
+
+ this.addCreator("info", {
+ create: function( page, path ) {
+ var ret_val = $('<div class="widget" />');
+ ret_val.addClass( 'info' );
+ var label = '<div class="label">' + page.textContent + '</div>';
+ ga_list.push( $(page).attr('address') );
+ var actor = '<div class="actor GA' + $(page).attr('address').split('/').join('_') + '">';
+ if( $(page).attr('pre') ) actor += '<div>' + $(page).attr('pre') + '</div>';
+ actor += '<div class="value">-</div>';
+ if( $(page).attr('post') ) actor += '<div>' + $(page).attr('post') + '</div>';
+ actor += '</div>';
+ ret_val.append( label ).append( $(actor).data( {
+ 'GA': $(page).attr('address'),
+ 'datatype': $(page).attr('datatype'),
+ 'mapping' : $(page).attr('mapping'),
+ 'style' : $(page).attr('style')
+ } ) );
+ return ret_val;
+ },
+ attributes: {
+ address: {type: "address", required: true},
+ datatype: {type: "numeric", required: true},
+ pre: {type: "string", required: false},
+ post: {type: "string", required: false},
+ mapping: {type: "mapping", required: false},
+ style: {type: "style", required: false}
+ },
+ content: "string"
+ });
- this.creators.trigger = function( page )
- {
- var value = $(page).attr('value') ? $(page).attr('value') : 0;
- var ret_val = $('<div class="widget" />');
- ret_val.addClass( 'switch' );
- var label = '<div class="label">' + page.textContent + '</div>';
- var address = $(page).attr('address');
- var actor = '<div class="actor switchUnpressed">';
- if( $(page).attr('pre') ) actor += $(page).attr('pre');
- var map = $(page).attr('mapping');
- if( mappings[map] && mappings[map][value] )
- actor += '<div class="value">' + mappings[map][value] + '</div>';
- else
- actor += '<div class="value">' + value + '</div>';
- if( $(page).attr('post') ) actor += $(page).attr('post');
- actor += '</div>';
- ret_val.append( label ).append( $(actor).data( {
- 'GA': $(page).attr('address'),
- 'datatype': $(page).attr('datatype'),
- 'mapping' : $(page).attr('mapping'),
- 'style' : $(page).attr('style'),
- 'type' : 'trigger',
- 'sendValue': value
- } ).bind('click',triggerAction) );
+ this.addCreator("shade", this.getCreator("info"));
- return ret_val;
- }
- this.creators.image = function( page )
- {
- var ret_val = $('<div class="widget" />');
- ret_val.addClass( 'image' );
- ret_val.append( '<div class="label">' + page.textContent + '</div>' );
- var style = '';
- if( $(page).attr('width') ) style += 'width:' + $(page).attr('width') + ';';
- if( $(page).attr('height') ) style += 'height:' + $(page).attr('height') + ';';
- if( style != '' ) style = 'style="' + style + '"';
- var actor = '<div class="actor"><img src="' +$(page).attr('src') + '" ' + style + ' /></div>';
- var refresh = $(page).attr('refresh') ? $(page).attr('refresh')*1000 : 0;
- ret_val.append( $(actor).data( {
- 'refresh': refresh
- } ).each(setupRefreshAction) ); // abuse "each" to call in context...
- return ret_val;
- }
+ this.addCreator("dim", {
+ create: function( page, path ) {
+ var ret_val = $('<div class="widget" />');
+ ret_val.addClass( 'dim' );
+ var label = '<div class="label">' + page.textContent + '</div>';
+ ga_list.push( $(page).attr('address') );
+ var actor = $('<div class="actor GA' + $(page).attr('address').split('/').join('_') + '" />');
+ ret_val.append( label ).append( actor );
+ var min = parseFloat( $(page).attr('min') || 0 );
+ var max = parseFloat( $(page).attr('max') || 100 );
+ var step = parseFloat( $(page).attr('step') || 0.5 );
+ ret_val.find('.actor').data( {
+ 'events': $(actor).data( 'events' ),
+ 'GA': $(page).attr('address'),
+ 'datatype': $(page).attr('datatype'),
+ 'mapping' : $(page).attr('mapping'),
+ 'style' : $(page).attr('style'),
+ 'min' : min,
+ 'max' : max,
+ 'step' : step,
+ 'type' : 'dim'
+ }).slider({step:step,min:min,max:max, animate: true,start:slideStart,change:slideChange});//slide:slideAction});
- this.creators.video = function( page )
- {
- var ret_val = $('<div class="widget" />');
- ret_val.addClass( 'video' );
- ret_val.append( '<div class="label">' + page.textContent + '</div>' );
- var style = '';
- if( $(page).attr('width') ) style += 'width:' + $(page).attr('width') + ';';
- if( $(page).attr('height') ) style += 'height:' + $(page).attr('height') + ';';
- if( style != '' ) style = 'style="' + style + '"';
- var actor = '<div class="actor"><video src="' +$(page).attr('src') + '" ' + style + ' controls="controls" /></div>';
- var refresh = $(page).attr('refresh') ? $(page).attr('refresh')*1000 : 0;
- ret_val.append( $(actor).data( {
- 'refresh': refresh
- } ).each(setupRefreshAction) ); // abuse "each" to call in context...
- return ret_val;
- }
+ return ret_val;
+ },
+ attributes: {
+ address: {type: "address", required: true},
+ datatype: {type: "numeric", required: true},
+ response_address: {type: "address", required: true},
+ response_datatype: {type: "numeric", required: true},
+ min: {type: "numeric", required: false},
+ max: {type: "numeric", required: false},
+ step: {type: "numeric", required: false},
+ mapping: {type: "mapping", required: false},
+ style: {type: "style", required: false}
+ },
+ content: "string"
+ });
- this.creators.unknown = function( page )
- {
- var ret_val = $('<div class="widget" />');
- ret_val.append( '<pre>' + page.textContent + '</pre>' );
- return ret_val;
- }
+ this.addCreator("slide", this.getCreator("dim"));
- this.switchAction = function()
- {
+ this.addCreator("switch", {
+ create: function( page, path ) {
+ var ret_val = $('<div class="widget" />');
+ ret_val.addClass( 'switch' );
+ var label = '<div class="label">' + page.textContent + '</div>';
+ var response_address = $(page).attr('response_address');
+ ga_list.push( response_address );
+ var actor = '<div class="actor GA' + response_address.split('/').join('_') + ' switchUnpressed">';
+ if( $(page).attr('pre') ) actor += $(page).attr('pre');
+ actor += '<div class="value">-</div>';
+ if( $(page).attr('post') ) actor += $(page).attr('post');
+ actor += '</div>';
+ ret_val.append( label ).append( $(actor).data( {
+ 'GA': $(page).attr('address'),
+ 'datatype': $(page).attr('datatype'),
+ 'mapping' : $(page).attr('mapping'),
+ 'style' : $(page).attr('style'),
+ 'type' : 'toggle'
+ } ).bind('click',switchAction) );
+ return ret_val;
+ },
+ attributes: {
+ address: {type: "address", required: true},
+ datatype: {type: "numeric", required: true},
+ response_address: {type: "address", required: true},
+ response_datatype: {type: "numeric", required: true},
+ pre: {type: "string", required: false},
+ post: {type: "string", required: false},
+ mapping: {type: "mapping", required: false},
+ style: {type: "style", required: false}
+ },
+ content: "string"
+ });
+
+ this.addCreator("toggle", this.getCreator("switch"));
+
+ this.addCreator("trigger", {
+ create: function( page, path ) {
+ var value = $(page).attr('value') ? $(page).attr('value') : 0;
+ var ret_val = $('<div class="widget" />');
+ ret_val.addClass( 'switch' );
+ var label = '<div class="label">' + page.textContent + '</div>';
+ var address = $(page).attr('address');
+ var actor = '<div class="actor switchUnpressed">';
+ if( $(page).attr('pre') ) actor += $(page).attr('pre');
+ var map = $(page).attr('mapping');
+ if( mappings[map] && mappings[map][value] )
+ actor += '<div class="value">' + mappings[map][value] + '</div>';
+ else
+ actor += '<div class="value">' + value + '</div>';
+ if( $(page).attr('post') ) actor += $(page).attr('post');
+ actor += '</div>';
+ ret_val.append( label ).append( $(actor).data( {
+ 'GA': $(page).attr('address'),
+ 'datatype': $(page).attr('datatype'),
+ 'mapping' : $(page).attr('mapping'),
+ 'style' : $(page).attr('style'),
+ 'type' : 'trigger',
+ 'sendValue': value
+ } ).bind('click',triggerAction) );
+
+ return ret_val;
+ },
+ attributes: {
+ address: {type: "address", required: true},
+ datatype: {type: "numeric", required: true},
+ value: {type: "string", required: true},
+ pre: {type: "string", required: false},
+ post: {type: "string", required: false},
+ mapping: {type: "mapping", required: false},
+ style: {type: "style", required: false}
+ },
+ content: "string"
+ });
+
+ this.addCreator("image", {
+ create: function( page, path ) {
+ var ret_val = $('<div class="widget" />');
+ ret_val.addClass( 'image' );
+ ret_val.append( '<div class="label">' + page.textContent + '</div>' );
+ var style = '';
+ if( $(page).attr('width') ) style += 'width:' + $(page).attr('width') + ';';
+ if( $(page).attr('height') ) style += 'height:' + $(page).attr('height') + ';';
+ if( style != '' ) style = 'style="' + style + '"';
+ var actor = '<div class="actor"><img src="' +$(page).attr('src') + '" ' + style + ' /></div>';
+ var refresh = $(page).attr('refresh') ? $(page).attr('refresh')*1000 : 0;
+ ret_val.append( $(actor).data( {
+ 'refresh': refresh
+ } ).each(setupRefreshAction) ); // abuse "each" to call in context...
+ return ret_val;
+ },
+ attributes: {
+ src: {type: "uri", required: true},
+ width: {type: "string", required: false},
+ height: {type: "string", required: false},
+ refresh: {type: "numeric", required: false}
+ },
+ content: "string"
+ });
+
+ this.addCreator("video", {
+ create: function( page, path ) {
+ var ret_val = $('<div class="widget" />');
+ ret_val.addClass( 'video' );
+ ret_val.append( '<div class="label">' + page.textContent + '</div>' );
+ var style = '';
+ if( $(page).attr('width') ) style += 'width:' + $(page).attr('width') + ';';
+ if( $(page).attr('height') ) style += 'height:' + $(page).attr('height') + ';';
+ if( style != '' ) style = 'style="' + style + '"';
+ var actor = '<div class="actor"><video src="' +$(page).attr('src') + '" ' + style + ' controls="controls" /></div>';
+ var refresh = $(page).attr('refresh') ? $(page).attr('refresh')*1000 : 0;
+ ret_val.append( $(actor).data( {
+ 'refresh': refresh
+ } ).each(setupRefreshAction) ); // abuse "each" to call in context...
+ return ret_val;
+ },
+ attributes: {
+ src: {type: "uri", required: true},
+ width: {type: "string", required: false},
+ height: {type: "string", required: false},
+ refresh: {type: "numeric", required: false}
+ },
+ content: "string"
+ });
+
+ this.addCreator("unknown", {
+ create: function( page, path ) {
+ var ret_val = $('<div class="widget" />');
+ ret_val.append( '<pre>' + page.textContent + '</pre>' );
+ return ret_val;
+ },
+ attributes: {
+ },
+ content: "string"
+ });
+
+ this.switchAction = function() {
var data = $(this).data();
// alert( data.GA + ' = ' + data.value );
visu.write( data.GA, data.value=='1' ? '0' : '1', data.datatype );
}
- this.slideAction = function(event,ui)
- {
+ this.slideAction = function(event,ui) {
//alert(ui.value);
var now = new Date().getTime();
var data = $( '.actor', $(this).parent() ).data();
@@ -229,8 +327,7 @@
* Setup a refresh interval in seconds if the 'refresh' in the .data()
* ist bigger than 0
*/
- this.refreshAction = function(that)
- {
+ this.refreshAction = function(that) {
var data = $(this).data();
alert('this.refreshAction');
}
Modified: CometVisu/trunk/visu/visu_config.xsd
===================================================================
--- CometVisu/trunk/visu/visu_config.xsd 2010-11-06 17:01:33 UTC (rev 86)
+++ CometVisu/trunk/visu/visu_config.xsd 2010-11-06 18:08:50 UTC (rev 87)
@@ -178,7 +178,7 @@
<xsd:attribute name="src" type="uri" use="required" />
<xsd:attribute name="width" type="dimension" />
<xsd:attribute name="height" type="dimension" />
- <xsd:attribute name="refresh" type="xsd:decima" />
+ <xsd:attribute name="refresh" type="xsd:decimal" />
</xsd:extension>
</xsd:simpleContent>
</xsd:complexType>
This was sent by the SourceForge.net collaborative development platform, the world's largest Open Source development site.
|
