Schreiben von Software

A Java-applet to design workflow processes (drag and drop) must be rewritten in HTML/Javascript. - The existing applet reads a given XML file ([login to view URL]) that contains available plugins - Plugins are grouped into some categories (tabs) - These plugins can be dragged onto a canvas an can be connected. Each plugin has four connectors, two for input (north and west), and two act as output (east and south). So it is only possible to connect the east and south to north and west. - Each plugin can have up to 7 configurable options (four input fields, two drop-downs, one checkbox) - The workflow can be saved - It is possible to open existing workflows and edit/save them ----- Your task is to create a HTML5/Javascript implementation of the workflow designer, and a server function to read/store workflows files (can be PHP or JSP). ----- Here is a link to the existing applet with demo content that needs to be replaced: [login to view URL] ----- Here is a (partly-working) click dummy demo I have started: [login to view URL] This is just a dummy to vizualize what I need. You can use the design, or start from scratch. - The tabs on the left work - It is possible to drag icons, but they tend to disappear (needs to be redone) - Reading exsting workflows, saving does not work (needs to be done) - Editing properties does not work (needs to be done) - The icons should snap to a grid - Icons shall be removed from the grid if they are dragged to the left over the categories. The "Trashcan" is optional - "Last run: 0.00s" can be ignored (this is from the server process that executes this workflow - out of scope for this project). Some remarks: - Available Plugins are stored in a file called "[login to view URL]". The format is old. You can define a JSON-File instead of the xml file. - The created workflows are stored in separate files (for example "[login to view URL]"). You can come up with your own JSON format to store workflows, or keep the existing XML format given as an example. I would prefer JSON for this too, since the XML is old. ----- The created workflow definition file ([login to view URL]) ----- Each plugin that is placed on the workflow canvas has an entry in the xml file. Currently, a XML fomat is used, for example: <DATASET> <ID>2</ID> ---> Unique ID <NAME>M_RECEIVER?</NAME> ---> a name (varchar 255), Input Field 1 <X>26</X> --> position on the workflow canvas, a canvas has 50x50 squares, so a maximum of 2.500 icons can be placed <Y>19</Y> --> position on the workflow canvas, a canvas has 50x50 squares, so a maximum of 2.500 icons can be placed <TYPE>IfElse</TYPE> --> Type (which plugin) <NORTH>0</NORTH> --> if the plugins top connector is connected to another plugin, the ID of the connected plugin is stored here <EAST>6</EAST> --> if the plugins right connector is connected to another plugin, the ID of the connected plugin is stored here <SOUTH>19</SOUTH> --> if the is connected to another plugin on the bottom connector, the ID of the connected plugin is stored here <WEST>39</WEST> --> if the is connected to another plugin on the left connector, the ID of the connected plugin is stored here <KEY>M_RECEIVER</KEY> -> Input Field 2 <VAL></VAL> -> Input Field 3 <DUMMY></DUMMY> -> Input Field 4 <FIG1>9</FIG1> - Select Box #1, if an entry has been selected, it conains the number of the entry <FIG2>0</FIG2> - Select Box #1 <CHECKBOX>0</CHECKBOX> - Checkbox </DATASET> ----- Third Party Libraries You may use open source third party libraries such as JQUERY and other, but only libraries where commercial use is allowed (MIT License or Apache 2.0) ----- Applicants If you think you can do it, please include the Libraries you plan to use in your proposal.