Skip to content

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

reorganize and clean the code

parent 92b31cc9
Hide whitespace changes
Inline Side-by-side
Showing with 374 additions and 353 deletions
ui/index.html
View file @ b174b9b8
......@@ -83,11 +83,12 @@
<!-- /JS -->
<!-- demo code -->
<script src="src/flowchartConnectorsDemo.js"></script>
<script src="src/dream.js"></script>
<script src="src/dream_launcher.js"></script>
<!-- demo helper code -->
<!--script src="src/demo-list.js"></script-->
<script src="src/demo-helper-jquery.js"></script>
<!--script src="src/demo-helper-jquery.js"></script-->
</body>
</html>
ui/src/demo-helper-jquery.js deleted 100644 → 0
View file @ 92b31cc9
/*
* This file contains the JS that handles the first init of each jQuery demonstration, and also switching
* between render modes.
*/
jsPlumb.bind("ready", function() {
//jsPlumb.DemoList.init();
// chrome fix.
document.onselectstart = function () { return false; };
// render mode
var resetRenderMode = function(desiredMode) {
var newMode = jsPlumb.setRenderMode(desiredMode);
$(".rmode").removeClass("selected");
$(".rmode[mode='" + newMode + "']").addClass("selected");
$(".rmode[mode='canvas']").attr("disabled", !jsPlumb.isCanvasAvailable());
$(".rmode[mode='svg']").attr("disabled", !jsPlumb.isSVGAvailable());
$(".rmode[mode='vml']").attr("disabled", !jsPlumb.isVMLAvailable());
jsPlumbDemo.init();
};
$(".rmode").bind("click", function() {
var desiredMode = $(this).attr("mode");
if (jsPlumbDemo.reset) jsPlumbDemo.reset();
jsPlumb.reset();
resetRenderMode(desiredMode);
});
resetRenderMode(jsPlumb.SVG);
});
\ No newline at end of file
ui/src/dream.js 0 → 100644
View file @ b174b9b8
(function (scope, $, jsPlumb, console, _) {
"use strict";
var dream = function (model) {
var that = {}, priv = {};
priv.onError = function(error) {
console.log("Error", error);
};
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);
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() {
var throughput = $( "#throughput" ),
allFields = $( [] ).add( throughput ),
tips = $( ".validateTips" ),
dialog_connection;
function updateTips( t ) {
tips
.text( t )
.addClass( "ui-state-highlight" );
setTimeout(function() {
tips.removeClass( "ui-state-highlight", 1500 );
}, 500 );
}
function checkLength( o, n, min, max ) {
if ( o.val().length > max || o.val().length < min ) {
o.addClass( "ui-state-error" );
updateTips( "Length of " + n + " must be between " +
min + " and " + max + "." );
return false;
} else {
return true;
}
}
function checkRegexp( o, regexp, n ) {
if ( !( regexp.test( o.val() ) ) ) {
o.addClass( "ui-state-error" );
updateTips( n );
return false;
} else {
return true;
}
}
$( "#dialog-form" ).dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true,
buttons: {
"Validate": function() {
var bValid = true;
allFields.removeClass( "ui-state-error" );
console.log("going to check troughput val", throughput.val());
bValid = bValid && checkRegexp( throughput, /^([0-9])+$/, "Througput must be integer." );
if ( bValid ) {
console.log("new value is ok...", throughput.val());
console.log("dialog_connection", dialog_connection);
$( this ).dialog( "close" );
}
},
Cancel: function() {
$( this ).dialog( "close" );
}
},
close: function() {
allFields.val( "" ).removeClass( "ui-state-error" );
}
});
};
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], label: "foo"});
// 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: "http://localhost:5000/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;
box = $("#" + box_id);
_.each(style, function(value, key, list) {
box.css(key, value);
})
};
// Utility function to update the content of the box
priv.updateBoxContent = function (box_id, title, worker) {
var box, html_string;
box = $("#" + box_id);
html_string = "<strong>" + title + "</strong>";
if (worker !== undefined && worker !== null) {
html_string += "<br> (" + worker + ")";
}
box.html(html_string);
};
priv.getModel = function (success) {
$.ajax({
url: "http://localhost:5000/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: "http://localhost:5000/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 (success) {
var refreshGraph = function(model) {
//console.log("model", model);
var i, i_length, box;
//console.log("before i_length");
//console.log("model", model);
//console.log(typeof(model));
//console.log("model.box_list", model["box_list"]);
i_length = model.box_list.length;
//console.log("after i_length");
//console.log("model", model);
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"});
}
priv.updateBoxContent(box.id, box.title, box.worker);
}
};
priv.getModel(refreshGraph);
};
priv.updateModelRegularly = function () {
var updateRegularly = function() {
priv.updateModel();
setTimeout(updateRegularly, 1000);
};
setTimeout(updateRegularly, 1000);
};
Object.defineProperty(that, "start", {
configurable: false,
enumerable: false,
writable: false,
value: function () {
priv.setModel();
priv.initJsPlumb();
priv.initDialog();
priv.displayGraph();
priv.updateModelRegularly();
}
});
Object.defineProperty(that, "setSimulationParameters", {
configurable: false,
enumerable: false,
writable: false,
value: function (simulation_parameters) {
priv.setSimulationParameters(simulation_parameters);
}
});
return that;
};
var DreamNamespace = (function () {
var that = {};
/**
* Creates a new dream instance.
* @method newDream
* @param {object} model The model definition
* @return {object} The new Dream instance.
*/
Object.defineProperty(that, "newDream", {
configurable: false,
enumerable: false,
writable: false,
value: function (model) {
var instance = dream(model);
return instance;
}
});
return that;
})();
Object.defineProperty(scope, "DREAM", {
configurable: false,
enumerable: false,
writable: false,
value: DreamNamespace
});
}(window, jQuery, jsPlumb, console, _));
\ No newline at end of file
ui/src/dream_launcher.js 0 → 100644
View file @ b174b9b8
(function($) {
jsPlumb.bind("ready", function() {
var graph_data = {}, dream_instance, available_people = {}, people_list,
i, i_length;
graph_data.box_list = [
{id: 'window1', title: 'attach1', target_list: ['window2'], coordinate: {top: 5, left: 5}},
{id: 'window2', title: 'attach2', target_list: ['window3'], coordinate: {top: 5, left: 15}},
{id: 'window3', title: 'attach3', target_list: ['window7'], coordinate: {top: 5, left: 25}},
{id: 'window4', title: 'attach1', target_list: ['window5'], coordinate: {top: 20, left: 5}},
{id: 'window5', title: 'attach2', target_list: ['window6'], coordinate: {top: 20, left: 15}},
{id: 'window6', title: 'attach3', target_list: ['window7'], coordinate: {top: 20, left: 25}},
{id: 'window7', title: 'Moulding', target_list: ['window8', 'window10'], coordinate: {top: 12, left: 35}},
{id: 'window8', title: 'tests', target_list: ['window9'], coordinate: {top: 5, left: 45}},
{id: 'window9', title: 'packaging', coordinate: {top: 5, left: 55}},
{id: 'window10', title: 'tests', target_list: ['window11'], coordinate: {top: 20, left: 45}},
{id: 'window11', title: 'packaging', coordinate: {top: 20, left: 55}},
];
dream_instance = DREAM.newDream(graph_data);
dream_instance.start();
//Fill list of people
people_list = ["Seb", "Jerome", "Jean-Paul", "Anna", "George", "Ivor", "Dipo", "Stephan"];
i_length = people_list.length;
for (i = 0; i < i_length; i++) {
$("#not_available ul").append('<li class="ui-state-default">' + people_list[i] + "</li>");
}
// 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);
}
});
$("#not_available").droppable({
drop: function(event, ui) {
available_people[ui.draggable.text()] = false;
dream_instance.setSimulationParameters(available_people);
}
});
})
})(jQuery);
\ No newline at end of file
ui/src/flowchartConnectorsDemo.js deleted 100644 → 0
View file @ 92b31cc9
;(function() {
var throughput = $( "#throughput" ),
allFields = $( [] ).add( throughput ),
tips = $( ".validateTips" ),
dialog_connection;
function updateTips( t ) {
tips
.text( t )
.addClass( "ui-state-highlight" );
setTimeout(function() {
tips.removeClass( "ui-state-highlight", 1500 );
}, 500 );
}
function checkLength( o, n, min, max ) {
if ( o.val().length > max || o.val().length < min ) {
o.addClass( "ui-state-error" );
updateTips( "Length of " + n + " must be between " +
min + " and " + max + "." );
return false;
} else {
return true;
}
}
function checkRegexp( o, regexp, n ) {
if ( !( regexp.test( o.val() ) ) ) {
o.addClass( "ui-state-error" );
updateTips( n );
return false;
} else {
return true;
}
}
$( "#dialog-form" ).dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true,
buttons: {
"Validate": function() {
var bValid = true;
allFields.removeClass( "ui-state-error" );
console.log("going to check troughput val", throughput.val());
bValid = bValid && checkRegexp( throughput, /^([0-9])+$/, "Througput must be integer." );
if ( bValid ) {
console.log("new value is ok...", throughput.val());
console.log("dialog_connection", dialog_connection);
$( this ).dialog( "close" );
}
},
Cancel: function() {
$( this ).dialog( "close" );
}
},
close: function() {
allFields.val( "" ).removeClass( "ui-state-error" );
}
});
window.jsPlumbDemo = {
init : function() {
jsPlumb.importDefaults({
// default drag options
DragOptions : { cursor: 'pointer', zIndex:2000 },
// default to blue at one end and green at the other
EndpointStyles : [{ fillStyle:'#225588' }, { fillStyle:'#558822' }],
// blue endpoints 7 px; green endpoints 11.
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
} ],
//[ "Label", { label:"FOO", id:"label" }]
],
Anchor: "Continuous",
Connector: ["StateMachine", { curviness:20 }],
});
init = function(connection) {
//connection.getOverlay("label").setLabel(connection.sourceId.substring(6) + "-" + connection.targetId.substring(6));
connection.bind("editCompleted", function(o) {
if (typeof console != "undefined")
console.log("connection edited. path is now ", o.path);
});
};
// 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 delete connections on click.
//
jsPlumb.bind("click", function(conn, originalEvent) {
//if (confirm("Delete connection from " + conn.sourceId + " to " + conn.targetId + "?"))
// jsPlumb.detach(conn);
console.log("user click connection", conn);
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"
});
}
};
})();
(function() {
function displayGraph() {
// So instead of having html filled with data, we will use
// a structure (like if we got it from json) and we will render it
var graph_data = {}, i, i_length, render_dom, box, j, j_length,
style_string, line, people_list, setSimulationParameters,
available_people = {}, onError;
var onError = function(error) {
console.log("Error", error);
};
graph_data.box_list = [
{id: 'window1', title: 'attach1', target_list: ['window2'], coordinate: {top: 5, left: 5}},
{id: 'window2', title: 'attach2', target_list: ['window3'], coordinate: {top: 5, left: 15}},
{id: 'window3', title: 'attach3', target_list: ['window7'], coordinate: {top: 5, left: 25}},
{id: 'window4', title: 'attach1', target_list: ['window5'], coordinate: {top: 20, left: 5}},
{id: 'window5', title: 'attach2', target_list: ['window6'], coordinate: {top: 20, left: 15}},
{id: 'window6', title: 'attach3', target_list: ['window7'], coordinate: {top: 20, left: 25}},
{id: 'window7', title: 'Moulding', target_list: ['window8', 'window10'], coordinate: {top: 12, left: 35}},
{id: 'window8', title: 'tests', target_list: ['window9'], coordinate: {top: 5, left: 45}},
{id: 'window9', title: 'packaging', coordinate: {top: 5, left: 55}},
{id: 'window10', title: 'tests', target_list: ['window11'], coordinate: {top: 20, left: 45}},
{id: 'window11', title: 'packaging', coordinate: {top: 20, left: 55}},
];
// Add boxes in the render div
render_dom = $("[id=render]");
i_length = graph_data.box_list.length;
for (i=0; i < i_length; i++) {
box = graph_data.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_dom.append('<div class="window" id="' +
box.id + '" ' + style_string + '">'
//+ '<strong>' + box.title
//+ '</strong><br/><br/>'
+ '</div>');
}
// Now that we have all boxes, connect them
for (i=0; i < i_length; i++) {
box = graph_data.box_list[i];
if (box.target_list !== undefined) {
j_length = box.target_list.length;
for (j=0; j < j_length; j++) {
line = jsPlumb.connect({source:box.id, target: box.target_list[j], label: "foo"});
// Example to change line color
// line.setPaintStyle({strokeStyle:"#42a62c", lineWidth:2 });
}
}
}
//Fill list of people
people_list = ["Seb", "Jerome", "Jean-Paul", "Anna", "George", "Ivor", "Dipo", "Stephan"];
i_length = people_list.length;
for (i = 0; i < i_length; i++) {
$("#not_available ul").append('<li class="ui-state-default">' + people_list[i] + "</li>");
}
// Define ajax call to update list of available people
setSimulationParameters = function(parameters) {
$.ajax({
url: "http://localhost:5000/setSimulationParameters",
type: 'POST',
data: JSON.stringify(parameters),
contentType: "application/json",
success: function(response) {
console.log("got json response",response);
},
error: function(xhr, textStatus, error) {
onError(error);
}
});
};
// 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;
setSimulationParameters(available_people);
}
});
$("#not_available").droppable({
drop: function(event, ui) {
available_people[ui.draggable.text()] = false;
setSimulationParameters(available_people);
}
});
// Initial DEMO code : make all the window divs draggable
jsPlumb.draggable(jsPlumb.getSelector(".window"), { grid: [20, 20] });
// Now communicate our model to the simulation server
$.ajax({
url: "http://localhost:5000/setModel",
type: 'POST',
data: JSON.stringify(graph_data),
contentType: "application/json",
success: function(response) {
console.log("got json response",response);
},
error: function(xhr, textStatus, error) {
onError(error);
}
});
// Utility function to update the style of a box
var updateBoxStyle = function (box_id, style) {
var box;
box = $("#" + box_id);
_.each(style, function(value, key, list) {
box.css(key, value);
})
};
// Utility function to update the content of the box
var updateBoxContent = function (box_id, title, worker) {
var box, html_string;
box = $("#" + box_id);
html_string = "<strong>" + title + "</strong>";
if (worker !== undefined && worker !== null) {
html_string += "<br> (" + worker + ")";
}
box.html(html_string);
};
// Then ask the server from time to time for an update of graph based
// on the result of some simulation
var getModel = function () {
var refreshGraph = function(model) {
//console.log("model", model);
var i, i_length, box;
//console.log("before i_length");
//console.log("model", model);
//console.log(typeof(model));
//console.log("model.box_list", model["box_list"]);
i_length = model.box_list.length;
//console.log("after i_length");
//console.log("model", model);
for (i = 0; i < i_length; i++) {
//, style: {"background-color":"#FF0000"}
box = model.box_list[i];
if (box.enabled) {
updateBoxStyle(box.id, {"background-color": "#5EFB6E"});
} else {
updateBoxStyle(box.id, {"background-color": "#FF0000"});
}
updateBoxContent(box.id, box.title, box.worker);
}
};
$.ajax({
url: "http://localhost:5000/getModel",
type: 'GET',
success: function(response) {
refreshGraph(response);
},
error: function(xhr, textStatus, error) {
onError(error);
}
});
setTimeout(getModel, 1000);
};
setTimeout(getModel, 1000);
}
setTimeout(function () {
console.log("in timeout");
displayGraph()
}, 500);
})();
\ No newline at end of file
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