Skip to content

dream
dream
Commit 8c64377d authored by Kazuhiko Shiozaki's avatar Kazuhiko Shiozaki
Browse files
Options

Merge branch 'master' into jerome_jqs_for_wip 

Conflicts:
	dream/platform/static/index.html
	dream/platform/static/src/dream_launcher.js
parents 5cc2cfc6 f3d4ab48
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 326 additions and 211 deletions
dream/platform/static/css/demo-new.css
View file @ 8c64377d
...@@ -242,20 +242,20 @@ path, ._jsPlumb_endpoint { cursor:pointer; } ...@@ -242,20 +242,20 @@ path, ._jsPlumb_endpoint { cursor:pointer; }
background-color:#ffe; background-color:#ffe;
} }
.Dream-Machine { .Dream-Machine, .Dream-MachineJobShop {
background-color:#fef; background-color:#fef;
} }
.Dream-Queue { .Dream-Queue, .Dream-QueueJobShop {
background-color:#eff; background-color:#eff;
} }
.Dream-Exit { .Dream-Exit, .Dream-ExitJobShop {
background-color:#fee; background-color:#eef;
} }
.Dream-Repairman { .Dream-Repairman {
background-color:#eef; background-color:#fdd;
} }
.window { .window {
...@@ -269,3 +269,7 @@ path, ._jsPlumb_endpoint { cursor:pointer; } ...@@ -269,3 +269,7 @@ path, ._jsPlumb_endpoint { cursor:pointer; }
padding-top:0.9em; padding-top:0.9em;
font-size:0.9em; font-size:0.9em;
} }
#debug textarea {
width:100%;
}
dream/platform/static/index.html
View file @ 8c64377d
...@@ -12,106 +12,102 @@ ...@@ -12,106 +12,102 @@
</head> </head>
<body data-demo-id="flowchartConnectorsDemo" data-library="jquery"> <body data-demo-id="flowchartConnectorsDemo" data-library="jquery">
<div class="container"> <div class="container">
<div id="headerWrapper"> <div id="headerWrapper">
<div id="header"></div> <div id="header"></div>
</div> </div>
<div class="four columns">
<div id="tools">
<h4>Tools</h4>
<div id="tools-container"></div>
<a id="clear_all">Clear All</a>
<a id="layout_graph">Layout Graph</a>
<a id="zoom_in">Zoom +</a>
<a id="zoom_out">Zoom -</a>
</div>
</div>
<div class="twelve columns">
<div id="main">
<div id="render"></div>
</div>
</div>
</div> <div class="four columns">
<div class="container"> <div id="tools">
<h4>Tools</h4>
<div id="tools-container"></div>
<a id="clear_all">Clear All</a>
<a id="layout_graph">Layout Graph</a>
<a id="zoom_in">Zoom +</a>
<a id="zoom_out">Zoom -</a>
</div>
</div>
<div class="four columns"> <div class="twelve columns">
<div id="simulation_controls"> <div id="main">
<h4>Simulation Parameters</h4> <div id="render"></div>
<div title="Configure"> </div>
<form>
<fieldset id="general-fieldset">
</fieldset>
<a id="run_simulation">Run Simulation</a>
</form>
</div> </div>
</div> </div>
</div> <div class="container">
<div class="twelve columns">
<div id="graph_zone">
<div>Stations Utilization</div>
<div id="graph"></div>
</div>
<div id="debug"> <div class="four columns">
<div class="five columns"> <div id="simulation_controls">
<div>Input</div> <h4>Simulation Parameters</h4>
<textarea rows="20" cols="47" id="json_output" style="align:left; width:100%"> <div title="Configure">
</textarea> <form>
<fieldset id="general-fieldset">
</fieldset>
<a id="run_simulation">Run Simulation</a>
</form>
</div>
</div> </div>
</div> </div>
<div class="five columns"> <div class="twelve columns">
<div>Result</div> <div id="graph_zone">
<textarea rows="20" cols="47" id="json_result" style="align:left; width:100%"> <div>Stations Utilization</div>
</textarea> <div id="graph"></div>
<td></td> </div>
<div id="debug">
<div class="six columns alpha">
<div>Input</div>
<textarea rows="20" cols="47" id="json_output"></textarea>
<a id="load_json">Load JSON</a>
</div>
<div class="six columns alpha">
<div>Result</div>
<textarea rows="20" cols="47" id="json_result"></textarea>
</div>
</div> </div>
</div> </div>
</div> <div class="twelve columns">
</div> <div id="wip">
<h4>WIP</h4>
<div class="jQuerySheet"></div>
</div>
</div>
<div class="twelve columns"> <!-- DEP -->
<div id="wip"> <script type="text/javascript" src="lib/jquery-1.8.1-min.js"></script>
<h4>WIP</h4> <script type="text/javascript" src="lib/jquery-ui-1.8.23-min.js"></script>
<div class="jQuerySheet"></div> <script type="text/javascript" src="lib/jquery.ui.touch-punch.min.js"></script>
</div> <script type="text/javascript" src="lib/md5.js"></script>
</div> <script type="text/javascript" src="lib/jio.js"></script>
<script type="text/javascript" src="lib/jio.localstorage.js"></script>
<script type="text/javascript" src="lib/pubsub.js"></script>
<script type="text/javascript" src="lib/jquery.jsPlumb-1.5.4-min.js"></script>
<!-- /DEP -->
<!-- DEP --> <!-- flot -->
<script type="text/javascript" src="lib/jquery-1.8.1-min.js"></script> <script type="text/javascript" src="lib/jquery.flot.js"></script>
<script type="text/javascript" src="lib/jquery-ui-1.8.23-min.js"></script> <script type="text/javascript" src="lib/jquery.flot.stack.js"></script>
<script type="text/javascript" src="lib/jquery.ui.touch-punch.min.js"></script> <script type="text/javascript" src="lib/jquery.jsoneditor.js"></script>
<script type="text/javascript" src="lib/md5.js"></script>
<script type="text/javascript" src="lib/jio.js"></script>
<script type="text/javascript" src="lib/jio.localstorage.js"></script>
<script type="text/javascript" src="lib/pubsub.js"></script>
<script type="text/javascript" src="lib/jquery.jsPlumb-1.5.4-min.js"></script>
<!-- /DEP -->
<!-- flot --> <!-- jqs -->
<script type="text/javascript" src="lib/jquery.flot.js"></script> <script type="text/javascript" src="lib/jquery.sheet-2.0.0/parser.js""></script>
<script type="text/javascript" src="lib/jquery.flot.stack.js"></script> <script type="text/javascript" src="lib/jquery.sheet-2.0.0/jquery.sheet.min.js""></script>
<script type="text/javascript" src="lib/jquery.jsoneditor.js"></script>
<!-- jqs --> <div id="dialog-form" title="Configure">
<script type="text/javascript" src="lib/jquery.sheet-2.0.0/parser.js""></script> <form>
<script type="text/javascript" src="lib/jquery.sheet-2.0.0/jquery.sheet.min.js""></script> <fieldset id="dialog-fieldset">
</fieldset>
</form>
</div>
<div id="dialog-form" title="Configure"> <!-- demo code -->
<form> <script type="text/javascript" src="src/dream.js"></script>
<fieldset id="dialog-fieldset"> <script type="text/javascript" src="src/jsonPlumb.js"></script>
</fieldset> <script type="text/javascript" src="src/dream_launcher.js"></script>
</form>
</div> </div>
<!-- demo code -->
<script type="text/javascript" src="src/dream.js"></script>
<script type="text/javascript" src="src/jsonPlumb.js"></script>
<script type="text/javascript" src="src/dream_launcher.js"></script>
</div>
</body> </body>
</html> </html>
dream/platform/static/src/dream.js
View file @ 8c64377d
...@@ -25,29 +25,8 @@ ...@@ -25,29 +25,8 @@
var that = jsonPlumb(), var that = jsonPlumb(),
priv = {}; priv = {};
// Utility function to update the style of a box
priv.updateBoxStyle = function (box_id, style) {
var box;
box = $("#" + box_id);
$.each(style, function (key, value) {
box.css(key, value);
});
};
// Utility function to update the content of the box
priv.updateBoxContent = function (box_id, title, throughput, worker) {
var box, html_string;
box = $("#" + box_id);
html_string = "<strong>" + title + "</strong>";
if (worker !== undefined && worker !== null) {
html_string += "<br> (" + worker + ")";
}
html_string += "<br><strong>througput: " + throughput + "</strong>";
box.html(html_string);
};
priv.displayTool = function () { priv.displayTool = function () {
var render_element = $("[id=tools-container]"); var render_element = $("#tools-container");
for (var key in configuration) { for (var key in configuration) {
if (key !== 'Dream-Configuration') { if (key !== 'Dream-Configuration') {
render_element.append('<div id="' + key + '" class="tool ' + key + '">' + render_element.append('<div id="' + key + '" class="tool ' + key + '">' +
...@@ -98,11 +77,14 @@ ...@@ -98,11 +77,14 @@
// Render fields for that particular element // Render fields for that particular element
var fieldset = $("#dialog-fieldset"); var fieldset = $("#dialog-fieldset");
$("#dialog-fieldset").children().remove();
var element_id_prefix = element_id.split("_")[0];
var property_list = configuration[element_id_prefix].property_list || [];
var previous_data = that.getData()["nodes"]; var previous_data = that.getData()["nodes"];
$("#dialog-fieldset").children().remove();
var element_type = previous_data[element_id]._class.replace('.', '-');
var property_list = configuration[element_type].property_list || [];
fieldset.append(
'<label>ID</label><input type="text" name="id" id="id" value="' +
element_id + '" class="text ui-widget-content ui-corner-all"/>');
var element_name = previous_data[element_id]['name'] || element_id; var element_name = previous_data[element_id]['name'] || element_id;
fieldset.append( fieldset.append(
'<label>Name</label><input type="text" name="name" id="name" value="' + '<label>Name</label><input type="text" name="name" id="name" value="' +
...@@ -138,7 +120,6 @@ ...@@ -138,7 +120,6 @@
$("#dialog-form").dialog({ $("#dialog-form").dialog({
autoOpen: false, autoOpen: false,
height: 300,
width: 350, width: 350,
modal: true, modal: true,
title: title || "", title: title || "",
...@@ -154,6 +135,11 @@ ...@@ -154,6 +135,11 @@
$(this).dialog("close"); $(this).dialog("close");
}, },
Validate: function () { Validate: function () {
var new_id = $("#id").val();
if (new_id !== element_id && $('#' + new_id).length > 0) {
alert('This ID is already used.');
return;
};
var data = {}, prefixed_property_id, property_element; var data = {}, prefixed_property_id, property_element;
var updateDataPropertyList = function (property_list, data, var updateDataPropertyList = function (property_list, data,
prefix) { prefix) {
...@@ -178,7 +164,8 @@ ...@@ -178,7 +164,8 @@
updateDataPropertyList(property_list, data); updateDataPropertyList(property_list, data);
that.updateElementData(element_id, { that.updateElementData(element_id, {
data: data, data: data,
name: $("#name").val() || element_id name: $("#name").val() || element_id,
id: $("#id").val() || element_id
}); });
$(this).dialog("close"); $(this).dialog("close");
...@@ -192,15 +179,15 @@ ...@@ -192,15 +179,15 @@
priv.super_newElement = that.newElement; priv.super_newElement = that.newElement;
that.newElement = function (element) { that.newElement = function (element) {
var element_prefix = element.id.split('_')[0]; var element_type = element._class.replace('.', '-');
priv.super_newElement(element, configuration[element_prefix]); priv.super_newElement(element, configuration[element_type]);
$("#" + element.id).bind('click', function () { $("#" + element.id).bind('click', function () {
$("#dialog-form").dialog("destroy"); $("#dialog-form").dialog("destroy");
priv.prepareDialogForElement(element.id, element.id); priv.prepareDialogForElement(element.id, element.id);
$("#dialog-form").dialog("open"); $("#dialog-form").dialog("open");
}); });
// Store default values // Store default values
var data = {}, property_list = configuration[element_prefix][ var data = {}, property_list = configuration[element_type][
"property_list" "property_list"
] || []; ] || [];
var updateDefaultData = function (data, property_list) { var updateDefaultData = function (data, property_list) {
......
dream/platform/static/src/dream_launcher.js
View file @ 8c64377d
...@@ -27,7 +27,6 @@ ...@@ -27,7 +27,6 @@
applicationname: "dream" applicationname: "dream"
}); });
var window_id = 1;
var id_container = {}; // to allow generating next ids, like Machine_1, Machine_2, etc var id_container = {}; // to allow generating next ids, like Machine_1, Machine_2, etc
var property_container = { var property_container = {
entity: { entity: {
...@@ -190,6 +189,33 @@ ...@@ -190,6 +189,33 @@
}, },
_class: 'Dream.Exit' _class: 'Dream.Exit'
}, },
"Dream-MachineJobShop": {
anchor: {
RightMiddle: {},
LeftMiddle: {},
TopCenter: {},
BottomCenter: {}
},
property_list: [property_container["processingTime"],
property_container["failures"]
],
_class: 'Dream.MachineJobShop'
},
"Dream-QueueJobShop": {
anchor: {
RightMiddle: {},
LeftMiddle: {}
},
property_list: [property_container["capacity"], property_container[
"isDummy"]],
_class: 'Dream.QueueJobShop'
},
"Dream-ExitJobShop": {
anchor: {
LeftMiddle: {}
},
_class: 'Dream.ExitJobShop'
},
"Dream-Repairman": { "Dream-Repairman": {
anchor: { anchor: {
TopCenter: {}, TopCenter: {},
...@@ -215,65 +241,74 @@ ...@@ -215,65 +241,74 @@
helper: "clone", helper: "clone",
stop: function (tool) { stop: function (tool) {
var box_top, box_left, _class; var box_top, box_left, _class;
var offset = $("[id=render]").offset(); var offset = $("#render").offset();
box_top = tool.clientY - offset.top + "px"; box_top = tool.clientY - offset.top + "px";
box_left = tool.clientX - offset.left + "px"; box_left = tool.clientX - offset.left + "px";
var relative_position = dream_instance.convertToRelativePosition(
box_left, box_top);
id_container[tool.target.id] = (id_container[tool.target.id] || 0) + id_container[tool.target.id] = (id_container[tool.target.id] || 0) +
1; 1;
_class = tool.target.id.replace('-', '.'); // XXX - vs . _class = tool.target.id.replace('-', '.'); // XXX - vs .
dream_instance.newElement({ dream_instance.newElement({
id: tool.target.id + "_" + id_container[tool.target.id], id: tool.target.id + "_" + id_container[tool.target.id],
coordinate: { coordinate: {
top: box_top, top: relative_position[1],
left: box_left left: relative_position[0]
}, },
_class: _class _class: _class
}); });
window_id += 1;
} }
}); });
var loadData = function(data) {
var preference = data.preference !== undefined ?
data.preference : {};
dream_instance.setPreferences(preference);
// Add all elements
$.each(data.nodes, function (key, value) {
var coordinates = preference['coordinates'] || {};
var coordinate = coordinates[key] || {};
value['coordinate'] = {};
$.each(coordinate || {}, function (k, v) {
value['coordinate'][k] = v;
});
dream_instance.newElement(value);
dream_instance.updateElementData(key, {
data: value.data || {}
});
});
$.each(data.edges, function (key, value) {
dream_instance.connect(value[0], value[1]);
});
// Now update id_container
$.each(data.nodes, function (key, value) {
var element_id = value.id,
prefix, suffix, splitted_element_id;
splitted_element_id = element_id.split("_");
prefix = splitted_element_id[0];
suffix = splitted_element_id[1];
id_container[prefix] = Math.max((id_container[prefix] || 0),
parseInt(suffix, 10));
});
dream_instance.setGeneralProperties(data.general);
dream_instance.initGeneralProperties(); // XXX
dream_instance.redraw()
$("#json_output").val(JSON.stringify(dream_instance.getData(),
undefined, " "));
};
// Check if there is already data when we first load the page, if yes, then build graph from it // Check if there is already data when we first load the page, if yes, then build graph from it
jio.get({ jio.get({
_id: "dream_demo" _id: "dream_demo"
}, function (err, response) { }, function (err, response) {
if (response !== undefined && response.data !== undefined) { if (response !== undefined && response.data !== undefined) {
// Add all elements loadData(response.data);
$.each(response.data.nodes, function (key, value) {
var preference_data = response.data.preference !== undefined ?
response.data.preference[key] : {};
$.each(preference_data, function (preference_key,
preference_value) {
value[preference_key] = preference_value;
});
dream_instance.newElement(value);
dream_instance.updateElementData(key, {
data: value.data || {}
});
});
$.each(response.data.edges, function (key, value) {
dream_instance.connect(value[0], value[1]);
});
// Now update id_container
$.each(response.data.nodes, function (key, value) {
var element_id = value.id,
prefix, suffix, splitted_element_id;
splitted_element_id = element_id.split("_");
prefix = splitted_element_id[0];
suffix = splitted_element_id[1];
id_container[prefix] = Math.max((id_container[prefix] || 0),
parseInt(suffix, 10));
});
dream_instance.setGeneralProperties(response.data.general);
dream_instance.initGeneralProperties(); // XXX
$("#json_output").text(JSON.stringify(dream_instance.getData(),
undefined, " "));
} }
// once the data is read, we can subscribe to every changes // once the data is read, we can subscribe to every changes
$.subscribe("Dream.Gui.onDataChange", function (event, data) { $.subscribe("Dream.Gui.onDataChange", function (event, data) {
$("#json_output").text(JSON.stringify(data, undefined, " ")); $("#json_output").val(JSON.stringify(data, undefined, " "));
jio.put({ jio.put({
_id: "dream_demo", _id: "dream_demo",
data: data data: data
...@@ -295,7 +330,7 @@ ...@@ -295,7 +330,7 @@
dream_instance.runSimulation( dream_instance.runSimulation(
function (data) { function (data) {
if (data['success']) { if (data['success']) {
$("#json_result").text(JSON.stringify(data['success'], $("#json_result").val(JSON.stringify(data['success'],
undefined, " ")); undefined, " "));
// display demo graph. // display demo graph.
...@@ -370,7 +405,7 @@ ...@@ -370,7 +405,7 @@
$.plot("#graph", series, options); $.plot("#graph", series, options);
} else { } else {
$("#json_result").effect('shake', 50).text(data['error']); $("#json_result").effect('shake', 50).val(data['error']);
} }
}); });
e.preventDefault(); e.preventDefault();
...@@ -404,8 +439,22 @@ ...@@ -404,8 +439,22 @@
dream_instance.zoom_out(); dream_instance.zoom_out();
}); });
// Redraw if the graph area or the window is resized
$('#main').resizable().resize(function () {
dream_instance.redraw();
});
$(window).resize(function () {
dream_instance.redraw();
});
// Load JSON button for debugging
$("#load_json").button().click(function () {
dream_instance.clearAll();
loadData(JSON.parse($("#json_output").val()));
});
$("#graph_zone").hide(); $("#graph_zone").hide();
// spreadsheet // spreadsheet
var default_config = { var default_config = {
id: "jquerysheet-div", id: "jquerysheet-div",
......
dream/platform/static/src/jsonPlumb.js
View file @ 8c64377d
This diff is collapsed.
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