summaryrefslogtreecommitdiffstats
path: root/sca-cpp/trunk/modules/edit/htdocs/graph
diff options
context:
space:
mode:
Diffstat (limited to '')
-rw-r--r--sca-cpp/trunk/modules/edit/htdocs/graph/graph.html89
-rw-r--r--sca-cpp/trunk/modules/edit/htdocs/graph/graph.js67
-rw-r--r--sca-cpp/trunk/modules/edit/htdocs/graph/index.html4
3 files changed, 124 insertions, 36 deletions
diff --git a/sca-cpp/trunk/modules/edit/htdocs/graph/graph.html b/sca-cpp/trunk/modules/edit/htdocs/graph/graph.html
index 4a973a1ed6..0e2a1bf2d2 100644
--- a/sca-cpp/trunk/modules/edit/htdocs/graph/graph.html
+++ b/sca-cpp/trunk/modules/edit/htdocs/graph/graph.html
@@ -37,19 +37,25 @@
<th class="thl" style="width: 225px; min-width: 225px;">Palette</th>
<th class="thr" style="padding-left: 4px; padding-top: 0px; padding-bottom: 0px;">
-<input id="compName" type="text" value="component name" style="position: relative; width: 200px;"/>
-<input id="propValue" type="text" value="property value" style="position: relative; width: 300px;"/>
-<span id="compValue" style="position: relative"></span>
+<input id="compName" type="text" value="component name" title="Component name" style="position: relative; width: 200px;"/>
+<input id="propValue" type="text" value="property value" title="Component property value" style="position: relative; width: 300px;"/>
+<input type="button" id="autoplayButton" title="Turn autoplay on/off" style="font-weight: bold;" Value="Autoplay is on"/>
+<span id="compValue" style="position: relative; font-weight: normal;"></span><br/>
</th>
<th class="thl thr" style="padding-top: 0px; padding-bottom: 0px; padding-right: 0px; text-align: right;">
-<input type="button" id="saveButton" style="font-weight: bold;" Value="Saved"/>
+<input type="button" id="saveButton" title="Save the app" style="font-weight: bold;" Value="Saved"/>
</th>
</tr>
-<tr style="height: 5000px;"><td class="tdl"></td><td class="tdr" colspan="2"></td></tr>
+<tr style="height: 5000px;"><td class="tdl"></td><td class="tdr" colspan="2">
+</td></tr>
</table>
+<div style="position:absolute; top: 40px; left: 240px; right: 0px; height: 5000px;">
+<iframe id="dataFrame" class="databg" style="position: relative; height: 5000px; width: 100%; border: 0px;" scrolling="no" frameborder="0"></iframe>
+</div>
+
</div>
<script type="text/javascript">
@@ -63,9 +69,10 @@ var apps = sca.reference(editWidget, "apps");
//rconsole = sca.defun(sca.reference(editWidget, "log"), "log");
/**
- * The current app name.
+ * The current app and component names.
*/
var appname = ui.queryParams()['app'];
+var compname = '';
/**
* The current app composite and corresponding saved XML content.
@@ -103,7 +110,7 @@ function getapp(name, g) {
'</composite>';
composite = readXML(mklist(x));
}
- graph.edit(name, composite, graph.composite(composite, graph.mkpath().move(palcx,0)), oncomposchange, g);
+ graph.edit(name, composite, graph.composite(composite, graph.mkpath().move(palcx,0)), oncomposchange, oncompselect, g);
// Track the saved composite XML
savedcomposxml = car(writeXML(composite, false));
@@ -164,7 +171,7 @@ function save() {
}
/**
- * Handle a composite change event
+ * Handle a composite change event.
*/
function oncomposchange() {
if (savedcomposxml == car(writeXML(composite, false)))
@@ -180,8 +187,72 @@ function oncomposchange() {
return true;
}
+/**
+ * Return the link to a component value.
+ */
+function compvaluelink(appname, cname) {
+ if (cname == '' || isNil(cname))
+ return '';
+ var protocol = window.location.protocol;
+ var host = window.location.hostname;
+ var port = ':' + window.location.port;
+ if (port == ':80' || port == ':443' || port == ':')
+ port = '';
+ var link = protocol + '//' + appname + '.' + host + port + '/data/?component=' + cname;
+ return link;
+}
+
+/**
+ * Track whether we're always showing the result data of the selected component.
+ */
+var autoplay = true;
+
+/**
+ * Show the result data of a component.
+ */
+function showData(cname) {
+ var rframe = $('dataFrame');
+ if (cname == '') {
+ rframe.src = '';
+ return true;
+ }
+ rframe.src = compvaluelink(appname, cname);
+ return true;
+}
+
+/**
+ * Handle a component select event.
+ */
+function oncompselect(appname, cname) {
+ if (cname == compname)
+ return true;
+ compname = cname;
+ var link = compvaluelink(appname, cname);
+ $('compValue').innerHTML = link != ''? '<a href="' + link + '" target="_blank">' + 'Results' + '</a>' : '';
+
+ if (autoplay)
+ return showData(cname);
+ return true;
+}
+
+/**
+ * Handle autoplay on/off click event.
+ */
+$('autoplayButton').onclick = function(e) {
+ if (autoplay) {
+ autoplay = false;
+ showData('');
+ $('autoplayButton').value = 'Autoplay is off';
+ return true;
+ }
+ autoplay = true;
+ showData(compname);
+ $('autoplayButton').value = 'Autoplay is on';
+ return true;
+};
+
// Create editor graph area
-var g = graph.mkgraph(graph.mkpath().move(0,40), $('compName'), $('propValue'), $('compValue'));
+var g = graph.mkgraph(graph.mkpath().move(0,40), $('compName'), $('propValue'));
var bg = graph.mkgroup(graph.mkpath());
// Install the palettes
diff --git a/sca-cpp/trunk/modules/edit/htdocs/graph/graph.js b/sca-cpp/trunk/modules/edit/htdocs/graph/graph.js
index 724720b19f..3535dce0df 100644
--- a/sca-cpp/trunk/modules/edit/htdocs/graph/graph.js
+++ b/sca-cpp/trunk/modules/edit/htdocs/graph/graph.js
@@ -114,7 +114,7 @@ if (ui.isIE()) {
/**
* Make a VML graph.
*/
- graph.mkgraph = function(pos, cname, pvalue, cvalue) {
+ graph.mkgraph = function(pos, cname, pvalue) {
// Create div element to host the graph
var div = document.createElement('div');
@@ -160,7 +160,9 @@ if (ui.isIE()) {
// Reset current selection
cname.value = '';
pvalue.value = '';
- cvalue.innerHTML = '';
+
+ // Trigger component select event
+ vmlg.oncompselect('');
return false;
}
@@ -186,7 +188,9 @@ if (ui.isIE()) {
// Update the component name and property value fields
cname.value = graph.selected.id;
pvalue.value = graph.property(graph.selected.comp);
- cvalue.innerHTML = graph.compvaluelink(vmlg.appname, graph.selected.id);
+
+ // Trigger component select event
+ vmlg.oncompselect(vmlg.appname, graph.selected.id);
return false;
};
@@ -234,7 +238,9 @@ if (ui.isIE()) {
graph.selected = null;
cname.value = '';
pvalue.value = '';
- cvalue.innerHTML = '';
+
+ // Trigger component select event
+ vmlg.oncompselect('');
}
// Trigger composite change event
@@ -287,9 +293,11 @@ if (ui.isIE()) {
var compos = scdl.composite(vmlg.compos);
cname.value = graph.ucid(cname.value, compos);
graph.selected.id = cname.value;
- cvalue.innerHTML = graph.compvaluelink(vmlg.appname, graph.selected.id);
setElement(compos, graph.renamecomp(graph.selected.comp, compos, cname.value));
+ // Trigger component select event
+ vmlg.oncompselect(vmlg.appname, graph.selected.id);
+
// Refresh the composite
graph.refresh(vmlg);
@@ -588,7 +596,7 @@ if (ui.isIE()) {
/**
* Make an SVG graph.
*/
- graph.mkgraph = function(pos, cname, pvalue, cvalue) {
+ graph.mkgraph = function(pos, cname, pvalue) {
// Create a div element to host the graph
var div = document.createElement('div');
@@ -637,7 +645,9 @@ if (ui.isIE()) {
// Reset current selection
cname.value = '';
pvalue.value = '';
- cvalue.innerHTML ='';
+
+ // Trigger component select event
+ svg.oncompselect('');
return false;
}
@@ -663,7 +673,9 @@ if (ui.isIE()) {
// Update the component name and property value fields
cname.value = graph.selected.id;
pvalue.value = graph.property(graph.selected.comp);
- cvalue.innerHTML = graph.compvaluelink(svg.appname, graph.selected.id);
+
+ // Trigger component select event
+ svg.oncompselect(svg.appname, graph.selected.id);
return false;
};
@@ -714,7 +726,9 @@ if (ui.isIE()) {
graph.selected = null;
cname.value = '';
pvalue.value = '';
- cvalue.innerHTML = '';
+
+ // Trigger component select event
+ svg.oncompselect('');
}
}
@@ -785,9 +799,11 @@ if (ui.isIE()) {
var compos = scdl.composite(svg.compos);
cname.value = graph.ucid(cname.value, compos);
graph.selected.id = cname.value;
- cvalue.innerHTML = graph.compvaluelink(svg.appname, graph.selected.id);
setElement(compos, graph.renamecomp(graph.selected.comp, compos, cname.value));
+ // Trigger component select event
+ svg.oncompselect(svg.appname, graph.selected.id);
+
// Refresh the composite
graph.refresh(svg);
@@ -946,6 +962,7 @@ if (ui.isIE()) {
var shape = document.createElementNS(graph.svgns, 'path');
shape.setAttribute('d', d);
shape.setAttribute('fill', graph.color(comp));
+ shape.setAttribute('fill-opacity', '0.60');
// Create an overlay contour shape
var contour = document.createElementNS(graph.svgns, 'path');
@@ -998,6 +1015,7 @@ if (ui.isIE()) {
var shape = document.createElementNS(graph.svgns, 'path');
shape.setAttribute('d', path);
shape.setAttribute('fill', graph.colors.lightgray);
+ shape.setAttribute('fill-opacity', '0.60');
// Create an overlay contour shape
var contour = document.createElementNS(graph.svgns, 'path');
@@ -1855,6 +1873,16 @@ graph.display = function(nodes, g) {
};
/**
+ * Hide a graph.
+ */
+graph.hide = function(g) {
+
+ // Remove nodes from the graph
+ map(function(n) { if (!isNil(n.comp) && n.id.substr(0, 8) != 'palette:') { g.removeChild(n); } return n; }, nodeList(g.childNodes));
+ return g;
+};
+
+/**
* Refresh a graph.
*/
graph.refresh = function(g) {
@@ -1869,28 +1897,17 @@ graph.refresh = function(g) {
* Display and enable editing of a composite and the graphical
* nodes that represent it.
*/
-graph.edit = function(appname, compos, nodes, onchange, g) {
+graph.edit = function(appname, compos, nodes, onchange, onselect, g) {
// Store the appname and composite in the graphical canvas
g.appname = appname;
g.compos = compos;
+
+ // Store event listeners
g.oncomposchange = onchange;
+ g.oncompselect = onselect;
// Display the composite nodes
return graph.display(nodes, g);
};
-/**
- * Return the link to a component value.
- */
-graph.compvaluelink = function(appname, cname) {
- var protocol = window.location.protocol;
- var host = window.location.hostname;
- var port = ':' + window.location.port;
- if (port == ':80' || port == ':443' || port == ':')
- port = '';
- var link = protocol + '//' + appname + '.' + host + port + '/components/' + cname;
- return '<a href="' + link + '">' + link + '</a>';
-
-};
-
diff --git a/sca-cpp/trunk/modules/edit/htdocs/graph/index.html b/sca-cpp/trunk/modules/edit/htdocs/graph/index.html
index ac9cf2f3b1..9484946f72 100644
--- a/sca-cpp/trunk/modules/edit/htdocs/graph/index.html
+++ b/sca-cpp/trunk/modules/edit/htdocs/graph/index.html
@@ -26,7 +26,7 @@
<script type="text/javascript" src="/util.js"></script>
<script type="text/javascript" src="/ui.js"></script>
</head>
-<body>
+<body class="delayed">
<div id="menu"></div>
<script type="text/javascript">
@@ -35,7 +35,7 @@
var appname = ui.queryParams()['app'];
// Load the menu bar
-ui.loadwidget('menu', '/menu.html?app=' + appname);
+ui.loadwidget('menu', '/menu.html?app=' + appname, ui.showbody);
</script>
<h1>App Edit <span id="appNameHeader" style="font-weight: normal;"></span></h1>
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-19 13:20:21 +0000