Closed

HTML5 component - drag and drop canvas

This project received 17 bids from talented freelancers with an average bid price of $743 USD.

Get free quotes for a project like this
Employer working
Skills Required
Project Budget
$250 - $750 USD
Total Bids
17
Project Description

We're looking for a freelance web designer/developer w. strong HTML 5 skills to become part of our virtual team.

The first task is to develop a HTML5 based UI component for creating and editing simple processes. All backend code will be developed by gluu. This "blackbox" solution should scale when more diagram visualization options is required.

We require a visual presentation similar to a table where the user can add/edit/delete/drag and drop activity boxes to new predefined locations (similar to fields in a table). When switching to presentation mode, then arrows will link the different activity boxes sequentially. (See the attached spec).

The component should be build around [url removed, login to view] or using the principles of MVVM architecture in the needed javascript for this blackbox functionality. This allows us to easily integrate a REST API with this UI component. We have been advised that a good strategy may be to split this into separate components:

It is suggested that one component (widget) with three sub-components (roleEdit, activityEdit, diagram) be implemented. The activityEdit and diagram sub-components have the same size. but are on different layers. The diagram size is the component's size. The componet would expose APIs such as addRole, addActivity, previewDiagram as well as event APIs.

The buttons (addRole etc) and associated dialog boxes will not be included into the component. This is a common practice with its advangates. For example, a spreadsheet component will not have its add/delete/update buttons and dialog boxes. The integrator will implement the buttons and dialog boxes to accept user inputs and call the component's related APIs.

Stylesheet should be built so that colors and fonts can change easily.

Please write a few lines on how you would implement - and feel free to suggest small improvements in the user experience that you could do.

SUBMIT DATE

LAST UPDATED

Looking to make some money?

  • Set your budget and the timeframe
  • Outline your proposal
  • Get paid for your work

Hire Freelancers who also bid on this project

    • Forbes
    • The New York Times
    • Time
    • Wall Street Journal
    • Times Online