Skip to content

dream
dream
Commit e153bf6d authored by Sebastien Robin's avatar Sebastien Robin
Browse files
Options

gui prototype: allow to configure elements instead of hardcoding their setup

parent ec1b4a70
Hide whitespace changes
Inline Side-by-side
Showing with 38 additions and 283 deletions
DREAM/dream/dream/platform/static/src/dream.js
View file @ e153bf6d
(function (scope, $, jsPlumb, console, _) {
"use strict";
var dream = function (model) {
var dream = function (configuration) {
var that = {}, priv = {};
priv.onError = function(error) {
......@@ -11,62 +11,6 @@
return "/";
};
priv.initJsPlumb = function () {
jsPlumb.setRenderMode(jsPlumb.SVG);
jsPlumb.importDefaults({
// default drag options
DragOptions : { cursor: 'pointer', zIndex:2000 },
EndpointStyles : [{ fillStyle:'#225588' }, { fillStyle:'#558822' }],
PaintStyle : {strokeStyle:"#736AFF", lineWidth:2 },
HoverPaintStyle : {strokeStyle:"#42a62c", lineWidth:2 },
Endpoint : [ "Dot", {radius:2} ],
ConnectionOverlays : [
[ "Arrow", {
location:1,
id:"arrow",
length:14,
foldback:0.8
} ],
],
Anchor: "Continuous",
Connector: ["StateMachine", { curviness:20 }],
});
var init = function(connection) {
connection.bind("editCompleted", function(o) {
});
};
// listen for new connections; initialise them the same way we initialise the connections at startup.
jsPlumb.bind("jsPlumbConnection", function(connInfo, originalEvent) {
init(connInfo.connection);
});
// make all the window divs draggable
jsPlumb.draggable(jsPlumb.getSelector(".window"), { grid: [20, 20] });
// listen for clicks on connections, and offer to change values on click.
jsPlumb.bind("click", function(conn, originalEvent) {
console.log("user click connection", conn);
priv.dialog_connection = conn;
$( "#dialog-form" ).dialog( "open" );
});
jsPlumb.bind("connectionDrag", function(connection) {
console.log("connection " + connection.id + " is being dragged");
});
jsPlumb.bind("connectionDragStop", function(connection) {
console.log("connection " + connection.id + " was dragged");
});
jsPlumb.makeTarget(jsPlumb.getSelector(".w"), {
dropOptions:{ hoverClass:"dragHover" },
anchor:"Continuous"
});
};
priv.initDialog = function() {
// code to allow changing values on connections. For now we assume
// that it is throughput. But we will need more generic code
......@@ -145,67 +89,6 @@
return e.keyCode !== 13;
});
priv.displayGraph = function () {
var render_element, i, i_length, box, style_string, j, j_length, line;
// Add boxes in the render div
render_element = $("[id=render]");
i_length = model.box_list.length;
for (i=0; i < i_length; i++) {
box = model.box_list[i];
style_string = ""
if (box.coordinate !== undefined) {
_.each(box.coordinate, function(value, key, list) {
style_string = style_string + key + ':' + value + 'em;';
})
}
if (box.style !== undefined) {
_.each(box.style, function(value, key, list) {
style_string = style_string + key + ':' + value + ';';
})
}
if (style_string.length > 0) {
style_string = 'style="' + style_string + '"';
}
render_element.append('<div class="window" id="' +
box.id + '" ' + style_string + '">'
+ '</div>');
}
// Now that we have all boxes, connect them
for (i=0; i < i_length; i++) {
box = model.box_list[i];
if (box.target_list !== undefined) {
j_length = box.target_list.length;
for (j=0; j < j_length; j++) {
console.log("in dream, jsPlumb.connect", box.id, box.target_list[j]);
line = jsPlumb.connect({source:box.id, target: box.target_list[j],
labelStyle : { cssClass:"component label" }});
// Example to change line color
// line.setPaintStyle({strokeStyle:"#42a62c", lineWidth:2 });
}
}
}
// Initial DEMO code : make all the window divs draggable
jsPlumb.draggable(jsPlumb.getSelector(".window"), { grid: [20, 20] });
};
priv.setSimulationParameters = function (simulation_parameters) {
$.ajax({
url: priv.getUrl() + "setSimulationParameters",
type: 'POST',
data: JSON.stringify(simulation_parameters),
contentType: "application/json",
success: function(response) {
console.log("got json response",response);
},
error: function(xhr, textStatus, error) {
priv.onError(error);
}
});
};
// Utility function to update the style of a box
priv.updateBoxStyle = function (box_id, style) {
var box;
......@@ -227,113 +110,23 @@
box.html(html_string);
};
priv.getModel = function (success) {
$.ajax({
url: priv.getUrl() + "getModel",
type: 'GET',
success: success,
error: function(xhr, textStatus, error) {
priv.onError(error);
}
});
};
priv.setModel = function () {
// Now communicate our model to the simulation server
$.ajax({
url: priv.getUrl() + "setModel",
type: 'POST',
data: JSON.stringify(model),
contentType: "application/json",
success: function(response) {
console.log("got json response",response);
},
error: function(xhr, textStatus, error) {
priv.onError(error);
}
});
};
priv.updateModel = function () {
// Now communicate our model to the simulation server
$.ajax({
url: priv.getUrl() + "updateModel",
type: 'POST',
data: JSON.stringify(model),
contentType: "application/json",
success: function(response) {
console.log("got json response",response);
},
error: function(xhr, textStatus, error) {
priv.onError(error);
}
});
};
priv.updateConnectionLabel = function (source_id, target_id, title) {
var connection_array, i, i_length, connection;
connection_array = jsPlumb.getConnections({source: source_id, target: target_id});
i_length = connection_array.length;
for (i = 0; i < i_length; i++) {
connection = connection_array[i];
if (connection.getLabel() !== title) {
connection.setLabel(title);
}
Object.defineProperty(that, "newElement", {
configurable: false,
enumerable: false,
writable: false,
value: function (element) {
var element_id = "Dream." + element.id.split('_')[0];
priv.plumb.newElement(element, configuration[element_id]);
}
};
priv.refreshModel = function (success) {
var refreshGraph = function(model) {
var i, i_length, box, box_list, box, box_id;
i_length = model.box_list.length;
for (i = 0; i < i_length; i++) {
//, style: {"background-color":"#FF0000"}
box = model.box_list[i];
if (box.enabled) {
priv.updateBoxStyle(box.id, {"background-color": "#5EFB6E"});
} else {
priv.updateBoxStyle(box.id, {"background-color": "#FF0000"});
}
// Update content of the box
priv.updateBoxContent(box.id, box.title, box.throughput, box.worker);
}
// Refresh total throughput value
$("#total_throughput h2").text(model.throughput.toString());
box_list = $(".window");
// prevent click event listener to open dialog on every box
i_length = box_list.length;
for (i = 0; i < i_length; i++) {
box = box_list[i];
box_id = box.id;
$("#" + box_id).click(function (box_id) {
return function () {
priv.box_id = box_id;
$( "#dialog-form" ).dialog( "open" );
}
}(box_id));
}
};
priv.getModel(refreshGraph);
};
priv.refreshModelRegularly = function () {
var refreshRegularly = function() {
priv.refreshModel();
setTimeout(refreshRegularly, 1000);
};
setTimeout(refreshRegularly, 1000);
};
});
Object.defineProperty(that, "start", {
configurable: false,
enumerable: false,
writable: false,
value: function () {
priv.setModel();
priv.initJsPlumb();
priv.initDialog();
priv.displayGraph();
priv.refreshModelRegularly();
priv.plumb = jsonPlumb.newJsonPlumb();
priv.plumb.start();
}
});
......@@ -361,8 +154,8 @@
configurable: false,
enumerable: false,
writable: false,
value: function (model) {
var instance = dream(model);
value: function (configuration) {
var instance = dream(configuration);
return instance;
}
});
......
DREAM/dream/dream/platform/static/src/dream_launcher.js
View file @ e153bf6d
......@@ -46,7 +46,16 @@
},
}
);
dream_instance = jsonPlumb.newJsonPlumb();
//dream_instance = jsonPlumb.newJsonPlumb();
//dream_instance.start();
var configuration = {
"Dream.Source": { anchor: {RightMiddle: {}}},
"Dream.Machine": { anchor: {RightMiddle: {}, LeftMiddle: {}, TopCenter: {}, BottomCenter: {}}},
"Dream.Queue": { anchor: {RightMiddle: {}, LeftMiddle: {}}},
"Dream.Exit": { anchor: {LeftMiddle: {}}},
"Dream.Repairman": { anchor: {TopCenter: {}, BottomCenter: {}}},
}
dream_instance = DREAM.newDream(configuration)
dream_instance.start();
})
......
DREAM/dream/dream/platform/static/src/jsonPlumb.js
View file @ e153bf6d
......@@ -63,17 +63,10 @@
var updateConnectionData = function(connection, remove) {
console.log("updateConnectionData is being called");
var i, core_length=priv.graph_data.coreObject.length,
source_element, destination_element;
var source_element;
source_element = priv.element_container[connection.sourceId];
destination_element = priv.element_container[connection.targetId];
console.log('destination_element._class', destination_element._class);
if (destination_element._class === "Dream.Repairman") {
source_element.repairman = destination_element.id;
} else {
source_element.successorList = source_element.successorList || [];
source_element.successorList.push(connection.targetId);
}
source_element.successorList = source_element.successorList || [];
source_element.successorList.push(connection.targetId);
priv.updateJsonOutput();
};
......@@ -88,27 +81,17 @@
priv.updateJsonOutput = function() {
//temporary method to display json on the screen (for debugging)
$("#json_output")[0].value = JSON.stringify(priv.graph_data, null, " ");
$("#json_output")[0].value = JSON.stringify(priv.element_container, null, " ");
};
priv.addModelResourceToGraphData = function(element) {
priv.addElementToGraphData = function(element, option) {
// Now update the container of elements
var element_data = {_class: element.class,
id: element.id,
name: element.id,
capacity: "1",
option: option
};
priv.element_container[element.id] = element_data;
priv.graph_data.modelResource.push(element_data);
priv.updateJsonOutput();
};
priv.addElementToGraphData = function(element) {
// Now update the graph_data
var element_data = {_class: element.class,
id: element.id,
name: element.id};
priv.element_container[element.id] = element_data;
priv.graph_data.coreObject.push(element_data);
priv.updateJsonOutput();
};
......@@ -116,6 +99,7 @@
jsPlumb.removeAllEndpoints($("#" + element_id));
$("#" + element_id).remove();
delete(priv.element_container[element_id]);
priv.updateJsonOutput();
};
priv.initDialog = function(title, element_id) {
......@@ -179,22 +163,9 @@
writable: false,
value: function () {
priv.element_container = {};
priv.graph_data = {coreObject: [],
modelResource: [],
_class: "Dream.Simulation",
general: {
"_class": "Dream.Configuration",
"numberOfReplications": "1",
"maxSimTime": "1440",
"trace": "Yes",
"confidenceLevel": "0.95"
},
};
priv.graph_selection = {};
priv.initJsPlumb();
priv.initDialog();
//priv.displayGraph();
//priv.refreshModelRegularly();
}
});
......@@ -212,7 +183,7 @@
configurable: false,
enumerable: false,
writable: false,
value: function (element) {
value: function (element, option) {
var render_element, style_string="";
render_element = $("[id=render]");
if (element.coordinate !== undefined) {
......@@ -237,10 +208,6 @@
priv.initDialog(element.id, element.id);
$( "#dialog-form" ).dialog( "open" );
});
/*container.find('.vmail').bind('click', function() {
var id = $(this).attr('id').replace("pm_","");
getPM(id);
}); */
// Add endPoint to allow drawing connections
var color = "#00f";
......@@ -266,26 +233,12 @@
isTarget:true,
//dropOptions : exampleDropOptions
};
var resource_type_list = ["Dream.Repairman"];
var right_end_point_list = ["Dream.Machine", "Dream.Queue", "Dream.Source"];
if (right_end_point_list.indexOf(element.class) !== -1) {
jsPlumb.addEndpoint(element.id, { anchor: "RightMiddle" }, endpoint);
}
var left_end_point_list = ["Dream.Machine", "Dream.Queue", "Dream.Exit"];
if (left_end_point_list.indexOf(element.class) !== -1) {
jsPlumb.addEndpoint(element.id, { anchor: "LeftMiddle" }, endpoint);
}
var repair_point_list = ["Dream.Repairman", "Dream.Machine"]
if (repair_point_list.indexOf(element.class) !== -1) {
jsPlumb.addEndpoint(element.id, { anchor: "TopCenter" }, endpoint);
jsPlumb.addEndpoint(element.id, { anchor: "BottomCenter" }, endpoint);
};
if (resource_type_list.indexOf(element.class) === -1) {
priv.addElementToGraphData(element);
} else {
priv.addModelResourceToGraphData(element);
}
_.each(_.pairs(option.anchor), function(value, key, list) {
var anchor = value[0],
endpoint_configuration = value[1];
jsPlumb.addEndpoint(element.id, { anchor: anchor }, endpoint);
})
priv.addElementToGraphData(element, option);
}
});
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7