Skip to content

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

extend prototype : allow to build a schema with machines, queues, etc

parent 2b3df904
Hide whitespace changes
Inline Side-by-side
Showing with 209 additions and 147 deletions
DREAM/dream/dream/platform/static/css/demo-new.css
View file @ 2ec8c5b0
...@@ -66,56 +66,6 @@ body { ...@@ -66,56 +66,6 @@ body {
background-color:#eaedef; background-color:#eaedef;
} }
#available {
position: absolute;
width: 200px;
height: 200px;
border: 2px solid;
margin-top: 350px;
margin-left: 150px;
border-radius: 10px;
}
#tools {
position: absolute;
width: 200px;
height: 500px;
border: 2px solid;
margin-top: 20px;
margin-left: 35px;
border-radius: 10px;
}
#not_available {
position: absolute;
width: 200px;
height: 200px;
border: 2px solid;
margin-top: 350px;
margin-left: 500px;
border-radius: 10px;
}
#total_workers {
position: absolute;
width: 100px;
height: 80px;
border: 2px solid;
margin-top: 80px;
margin-left: 720px;
border-radius: 10px;
}
#total_throughput {
position: absolute;
width: 100px;
height: 80px;
border: 2px solid;
margin-top: 200px;
margin-left: 720px;
border-radius: 10px;
}
/* Setting for dialog */ /* Setting for dialog */
label, input { display:block; } label, input { display:block; }
...@@ -238,3 +188,74 @@ path, ._jsPlumb_endpoint { cursor:pointer; } ...@@ -238,3 +188,74 @@ path, ._jsPlumb_endpoint { cursor:pointer; }
font-family:helvetica; font-family:helvetica;
padding:0.5em; padding:0.5em;
} }
/* DREAM specific css */
#available {
position: absolute;
width: 200px;
height: 200px;
border: 2px solid;
margin-top: 350px;
margin-left: 150px;
border-radius: 10px;
}
#tools {
position: absolute;
width: 200px;
height: 500px;
border: 2px solid;
margin-top: 20px;
margin-left: 35px;
border-radius: 10px;
}
.tool {
border: 1px dotted gray;
/*margin-top: 20px;
margin-left: 35px;*/
width:4em;
height:2em;
z-index: 10001;
border-radius: 10px;
color: gray;
font-family:serif;
font-style:italic;
padding-top:0.9em;
font-size:0.9em;
margin-top: 1em;
margin-left: 1em;
}
#not_available {
position: absolute;
width: 200px;
height: 200px;
border: 2px solid;
margin-top: 350px;
margin-left: 500px;
border-radius: 10px;
}
#total_workers {
position: absolute;
width: 100px;
height: 80px;
border: 2px solid;
margin-top: 80px;
margin-left: 720px;
border-radius: 10px;
}
#total_throughput {
position: absolute;
width: 100px;
height: 80px;
border: 2px solid;
margin-top: 200px;
margin-left: 720px;
border-radius: 10px;
}
DREAM/dream/dream/platform/static/css/flowchartDemo.css
View file @ 2ec8c5b0
.window { border:1px solid #346789; #window1 { top:6em;left:15%; }
box-shadow: 2px 2px 19px #aaa; #window2 { top:6em; right:25%; }
-o-box-shadow: 2px 2px 19px #aaa; #window3 { top:30em; left:15%; }
-webkit-box-shadow: 2px 2px 19px #aaa; #window4 { top:30em; right:25%}
-moz-box-shadow: 2px 2px 19px #aaa; .window {
-moz-border-radius:0.5em; border:1px dotted gray;
border-radius:0.5em; width:9.7em;
opacity:0.8; height:8em;
filter:alpha(opacity=80); position:absolute;
width:5em; height:5em; color:gray;
/*line-height:5em;*/ font-family:serif;
text-align:center; font-style:italic;
z-index:20; position:absolute; padding-top:0.9em;
background-color:#eeeeef; font-size:0.9em;
color:black;
font-family:helvetica;padding:0.5em;
font-size:0.9em;}
.window:hover {
box-shadow: 2px 2px 19px #444;
-o-box-shadow: 2px 2px 19px #444;
-webkit-box-shadow: 2px 2px 19px #444;
-moz-box-shadow: 2px 2px 19px #444;
opacity:0.6;
filter:alpha(opacity=60);
} }
.demo { position:relative; }
.drag-locked { border:1px solid red; }
.active { .dragActive { border:2px dotted orange; }
border:1px dotted green; .dropHover { border:1px dotted red; }
}
.hover {
border:1px dotted red;
}
._jsPlumb_connector { z-index:3; } /*
._jsPlumb_endpoint, .endpointTargetLabel, .endpointSourceLabel{ z-index:21;cursor:pointer; } ._jsPlumb_endpoint._jsPlumb_dragging { border:2px solid green; }
.hl { border:3px solid red; } ._jsPlumb_endpoint_full { border:3px solid #606; }
#debug { position:absolute; background-color:black; color:red; z-index:5000 } ._jsPlumb_endpoint_connected { border:4px solid black; }
._jsPlumb_endpoint_drop_allowed { border:5px solid #935; }
._jsPlumb_endpoint_drop_forbidden { border:5px solid #539; }
*/
.aLabel { .cmdLink { font-size:0.80em;}
background-color:white; #clear { padding:0.3em; }
padding:0.4em; #clear:hover { background-color:yellow; }
font:12px sans-serif; #list {
color:#444; text-align:center;
z-index:10; display:none;
border:1px dotted gray; font-size:90%;
opacity:0.8; position:absolute;
filter:alpha(opacity=80); width:250px;
} left:30%;
\ No newline at end of file top:100px;
background-color:white;
padding:5px;
border:1px solid #456;
opacity:0.8;
}
#list table { width:100%; text-align:left;}
#explanation { text-align:center; }
\ No newline at end of file
DREAM/dream/dream/platform/static/index.html
View file @ 2ec8c5b0
...@@ -11,29 +11,29 @@ ...@@ -11,29 +11,29 @@
<div id="headerWrapper"><div id="header"></div></div> <div id="headerWrapper"><div id="header"></div></div>
<div id="tools"> <div id="tools">
Tools Tools
<div id="Dream.Source" class="tool">
Source
<ul> <ul>
</ul> </ul>
</div> </div>
<div id="main"> <div id="Dream.Machine" class="tool">
<div id="render"></div> Machine
<div id="available">
Available
<ul> <ul>
</ul> </ul>
</div> </div>
<div id="not_available"> <div id="Dream.Queue" class="tool">
Not Available Queue
<ul> <ul>
</ul> </ul>
</div> </div>
<div id="total_workers"> <div id="Dream.Exit" class="tool">
Workers Exit
<h2>0</h2> <ul>
</ul>
</div> </div>
<div id="total_throughput">
Throughput
<h2></h2>
</div> </div>
<div id="main">
<div id="render"></div>
</div> </div>
<div id="sidebar"> <div id="sidebar">
<div id="explanation"> <div id="explanation">
......
DREAM/dream/dream/platform/static/src/dream_launcher.js
View file @ 2ec8c5b0
...@@ -20,45 +20,38 @@ ...@@ -20,45 +20,38 @@
//dream_instance = DREAM.newDream(graph_data); //dream_instance = DREAM.newDream(graph_data);
//dream_instance.start(); //dream_instance.start();
dream_instance = jsonPlumb.newJsonPlumb(); var main_div_offset = $("#main").offset();
dream_instance.newElement({id : 'foo'}) var window_id = 1;
var element_id;
//Fill list of people var id_container = {};
people_list = ["Worker1", "Worker2", "Worker3", "Worker4", "Worker5", "Worker6", "Worker7", "Worker8"]; $( ".tool" ).draggable({ opacity: 0.7, helper: "clone",
i_length = people_list.length; stop: function(tool) {
for (i = 0; i < i_length; i++) { console.log("stop event of tool", tool);
$("#not_available ul").append('<li class="ui-state-default">' + people_list[i] + "</li>"); console.log("target id", tool.target.id);
} var box_top, box_left;
console.log("tool.clientX", tool.clientX);
updateWorkerCount = function () { console.log("main_div_offset.left", main_div_offset.left);
var available_worker_length = 0, console.log("tool.clientY", tool.clientY);
available_worker_values = _.values(available_people); console.log("main_div_offset.top", main_div_offset.top);
_.each(available_worker_values, function(value) { box_top = (tool.clientY - main_div_offset.top);
if (value === true) { box_left = (tool.clientX - main_div_offset.left);
available_worker_length += 1; console.log("top, left", box_top, box_left);
} console.log("id_container before", id_container);
}); console.log("id_container target before", id_container[tool.target.id]);
$("#total_workers h2").text(available_worker_length.toString()); id_container[tool.target.id] = (id_container[tool.target.id] || 0) + 1
console.log("id_container target after", id_container[tool.target.id]);
console.log("id_container after", id_container);
dream_instance.newElement({id : tool.target.id.split(".")[1] + "_" + id_container[tool.target.id],
coordinate: {top: box_top, left: box_left},
class: tool.target.id,
});
window_id += 1;
},
} }
);
dream_instance = jsonPlumb.newJsonPlumb();
dream_instance.start();
// Make list of people draggable, update list of people depending
// to make them available or not
$("#available li").draggable({appendTo: "body"});
$("#not_available li").draggable({appendTo: "body"});
$("#available").droppable({
drop: function(event, ui) {
available_people[ui.draggable.text()] = true;
dream_instance.setSimulationParameters(available_people);
updateWorkerCount();
}
});
$("#not_available").droppable({
drop: function(event, ui) {
available_people[ui.draggable.text()] = false;
dream_instance.setSimulationParameters(available_people);
updateWorkerCount();
}
});
}) })
})(jQuery, _); })(jQuery, _);
DREAM/dream/dream/platform/static/src/jsonPlumb.js
View file @ 2ec8c5b0
...@@ -61,6 +61,15 @@ ...@@ -61,6 +61,15 @@
anchor:"Continuous" anchor:"Continuous"
}); });
// bind to connection/connectionDetached events, and update the list of connections on screen.
jsPlumb.bind("connection", function(info, originalEvent) {
updateConnectionData(info.connection);
});
jsPlumb.bind("connectionDetached", function(info, originalEvent) {
updateConnectionData(info.connection, true);
});
}; };
Object.defineProperty(that, "start", { Object.defineProperty(that, "start", {
...@@ -70,6 +79,7 @@ ...@@ -70,6 +79,7 @@
value: function () { value: function () {
//priv.setModel(); //priv.setModel();
priv.element_list = []; priv.element_list = [];
priv.graph_data = {};
priv.initJsPlumb(); priv.initJsPlumb();
//priv.initDialog(); //priv.initDialog();
//priv.displayGraph(); //priv.displayGraph();
...@@ -82,12 +92,52 @@ ...@@ -82,12 +92,52 @@
enumerable: false, enumerable: false,
writable: false, writable: false,
value: function (element) { value: function (element) {
var render_element, style_string; var render_element, style_string="";
render_element = $("[id=render]"); render_element = $("[id=render]");
if (element.coordinate !== undefined) {
_.each(element.coordinate, function(value, key, list) {
style_string = style_string + key + ':' + value + 'px;';
})
}
if (style_string.length > 0) {
style_string = 'style="' + style_string + '"';
}
render_element.append('<div class="window" id="' + render_element.append('<div class="window" id="' +
element.id + '" ' + style_string + '">' element.id + '" ' + style_string + '">'
+ '</div>'); + element.id + '</div>');
priv.element_list.push(element); priv.element_list.push(element);
// Initial DEMO code : make all the window divs draggable
jsPlumb.draggable(jsPlumb.getSelector(".window"), { grid: [20, 20] });
// Add endPoint to allow drawing connections
var color = "#00f";
var endpoint = {
endpoint: "Rectangle",
paintStyle:{ width:25, height:21, fillStyle:color },
isSource:true,
scope:"blue rectangle",
connectorStyle : {
gradient:{stops:[[0, color], [0.5, "#09098e"], [1, color]]},
lineWidth:5,
strokeStyle:color,
dashstyle:"2 2"
},
//connector: ["Bezier", { curviness:63 } ],
maxConnections:3,
isTarget:true,
//dropOptions : exampleDropOptions
};
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);
}
} }
}); });
......
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