Online Demo

Download Sources

We have just released a new version that implements a feature requested on this blog

Now you can configure the Gantt editor to show always “today” even if not included in the project time-scope.

Moreover we introduced two new methods:

1) Ganttalendar.centerOnToday(),  that scroll the Gantt graph to “today”

2) Ganttalendar.fitGantt(), that will find the best-fitting scale

Enjoy this release, and let me know what you think about.

Online Demo

Download Sources

We worked on the strange behaviour when loading a project with invalid data/structure  and we released a new version

Bug fixed:

1. if project loading fails for invalid/incomplete data, you loose the control of the  application
2. you can restrict parent changing duration even if not allowed by constraints: e.g.: a larger child

Improvement:

1. better snap-to-grid moving tasks
2. better feedback if project loading fails

]]> http://roberto.open-lab.com/2012/08/31/jquery-gantt-editor-bugfix-invalid-project-handling/feed/ 0 rbicchierai jQuery Gantt editor demo http://roberto.open-lab.com/2012/08/30/jquery-gantt-editor-bugfix-released/ http://roberto.open-lab.com/2012/08/30/jquery-gantt-editor-bugfix-released/#comments Thu, 30 Aug 2012 15:49:37 +0000 Roberto Bicchierai http://roberto.open-lab.com/?p=887 ]]>

Online Demo

Download Sources

After few days of “massive debugging” we released an upgraded version of jQuery Gantt editor

(try it)

Bugs fixed:

1. an ugly bug when using the editor with a western time-zone: GMT-n (e.g: USA, Canada, South America etc.).
2. an invalid message call when a circular reference was created that force  js execution to stop
3. no detection for avoiding a parent depending on its descendant

New feature:

1. dependencies now supports lags: you can specify a dependency in the form of “7:3″ that means the task will start after three days task “7″ is completed

I’ve upgraded the component documentation: http://roberto.open-lab.com/2012/08/24/jquery-gantt-editor/

Try the demo here http://gantt.twproject.com/

Feedback welcome!

Online Demo

Download Sources

As promised in my last post, here I will try to explain how to use our jQuery Gantt editor, how it works and how to customize it for your needs.

(try it)

First let me list its key features:

• jQuery based
• MIT licensed: you can reuse it everywhere
• json import-export
• internationalizable
• manage task statuses –> sort of workflow handling
• manage dependecies
• manage assignements (resources, roles, efforts)
• server synchronization ready
• full undo-redo support
• cross browser (at least for recent versions)

Source codes are available on GitHub here: https://github.com/robicch/jQueryGantt

In order to better understand this component I will introduce some concepts below.

Genesis

This editor has been created mainly as part of our project management solution, Teamwork.

During the development we always kept in mind creating an open-source reusable “component”, while the focus was integration with Teamwork. This constraint gave us the opportunity to extend the standard Gantt behaviour by introducing key features like task’s statuses, or time buffers for parent tasks.

This is not the right place to discuss how these features make project modelling and management more flexible and closer to the real world: if you want go deeper have a look at Teamwork user guide.

If  Teamwork’s model influenced the behavior of the editor, the environment where Teamwork lives (Java Jsp Html5  jQuery internationalized server side multi-db cross-operating-system etc.) influenced the packaging and the libraries of our editor; this is the reason for so many dependencies.

Despite this facts, our Gantt editor can be easily customized and extended as Javascript component.

Main concepts

While a Gantt viewer (hence read-only) can be easily packed as a single component, a Gantt editor is a way more  complicated object; so I prefer to think of it as jQuery application and not just as a plugin.

Actually our Gantt editor is composed by three main sub parts/editors: the grid editor on the left, the Gantt editor on the right, and the detailed task editor in popup; actually the popup editor is used also for resources and assignments.

The goal of our editor is to generate a json file representing the full project state that could be sent to a server to store it. During editing there is no interaction with the server.

The distributed version uses local storage to save the project status, but examples of server calls are available in the source code.

How to use it

Download the component source code here, unzip the file: the “gantt.html” is already a working Gantt editor. If you open “gantt.html” with your preferred html editor: the source contains some comments so it should be readable .

To play with the code use Firefox with Firebug plugin installed or Chrome (as I do).

In the code first we defined a global variable for accessing the editor, called “ge”.

In your browser try to change something on the gantt and then from your js debugger execute

ge.saveProject()

This method returns the project in form of a json object. In the demo page we use local storage for saving the project (or a textarea if local storage is not available), but in a real environment you probably will need to send data to a server. I left a commented code for ajax communication with the server.

In order to load a project you must obviously supply a json object in the same format that has been saved on the server:

ge.loadProject( [yourJsonProject] )

The same json object can be used both ways: load or save, and in consequence client-to-server or server-to-client.

Project data structure

This is a project json object structure:

{
tasks:[…]
resources: […]
roles: […]
… more
}

here  tasks, resources and roles are arrays.

As it easy to guess, the “tasks” array contains a list of task in the Gantt, and this is the most relevant data to manage.

“Resources” and “roles” will be easy to understand by looking first to a task element in the “tasks” array:

{
“id”:”tmp_fk1345562123031″,
“name”:”approval”,
“code”:”APP”,
“level”:2,
“status”:”STATUS_SUSPENDED”,
“start”:1348696800000,
“duration”:10,
“end”:1349906399999,
“startIsMilestone”:false,
“endIsMilestone”:false,
“assigs”:[…],
“depends”:”7:3,8″,
“description”:”Approval of testing”,
“progress”:20
}

First important consideration: the order of tasks in the array is the same of the editor. The index of the array is used as reference for dependencies.

Attributes like name, code and description require no explanation, but some do:

• id: used to synch data with the server. If the id is supplied by the server it will untouched. Tasks created client side will acquire a temporary id starting with  “tmp_”
• level: it is the depth (the indentation) of a task in the Gantt structure. The root task is at level 0 (zero), its children at level 1 (one) and so on. Levels must be consistent with the project structure: you can’t have a task of level n+1 if you don’t have a task of level n above on the array
• start, end: are expressed in milliseconds. “start” is set to the first millisecond of the day, “end” is set to the last millisecond of the day.
• duration: is always in working days. If there are holidays on the calendar (see below for  holydays configuration) the end date will take it into account. Actually the end date is always recomputed using “start” and “duration”, and it is supplied for comfort  
• startIsMilestone, endIsMilestone: booleans. Once set to true, task’ start/end can’t move accidentally. You always can change dates directly on the task, but not by acting on children or predecessors.
• depends: a string comma delimited containing indexes of tasks on which this task depends. Multiple dependencies are supported. Only the finish-to-start dependency type is supported (other types can be workarounded by introducing intermediary brother tasks or children). It is possible to specify a “lag” in days by using a “:”. E.g.: 7:3,8 means that the task will start 3 days after task 7 is completed and task 8 is completed.
• status: this is a string representing the status of the task. Allowed statuses are: STATUS_ACTIVE, STATUS_DONE, STATUS_FAILED, STATUS_SUSPENDED, STATUS_UNDEFINED. As stated before, task statuses allow to use your project like a sort of workflow: e.g.: if “task b” depends on “task a”, “task b” will remain in “STATUS_SUSPENDED” until “task a” will pass from “STATUS_ACTIVE” to “STATUS_DONE”. For the complete status transition rules see below.
• progress: a number that specifies progress: 0%  none 50% half way and so on. For Teamwork in some case 123% can be a meaningful value for progress, so there are no constraints.
• assigs: array of  assignment. Each assignment has the following structure:
  

  {
  “resourceId”:”tmp_1″,
  “id”:”tmp_1345560373990″,
  “roleId”:”tmp_1″,
  “effort”:36000000
  }

mainly assignments are structured for carrying server-side  data:

• resourceId: is the unique id for the resource. Refers to the “resources” array
• id: is the unique identifier of this assignment
• roleId: is the unique identifier of this assignment. Refers to the “roles” array
• effort: is the estimated effort in milliseconds

The “resources” array contains elements in the following form:

{
“id”:”tmp_1″,
“name”:”Resource 1″
}

The “roles”  array contains elements in the following form:

{
“id”:”tmp_1″,
“name”:”Project Manager”
}

You must remember that this editor is the client part of something that manages persistence, alerts, interaction with other systems server-side; so we have to handle a few more attributes:

deletedTaskIds:[…]
selectedRow: 7
canWrite: true
canWriteOnParent: true
minEditableDate:1349906300000
maxEditableDate:3499063999999

where

• deletedTaskIds: is an array containing the ids of the tasks removed client side. Only tasks with a “real” id will be notified to the server (so not those starting with “tmp_”), locally generated ones will be removed silently.
• selectedRow: is the line currently in edit
• canWrite: is a boolean stating if you have permission to write/change/create/delete tasks on this project or not. Set it to true for a basic usage.
• canWriteOnParent: this is a little bit obscure. It is used in case you are editing only a small part of a complex project. For instance  you are a PM of  sub-task but not of the top-project: maybe some changes you made on dates may affect the top-project schedule.
  Setting this boolean to false you will stop propagation to top project/s. Set it to true for a basic usage.
• minEditableDate, maxEditableDate: are the boundaries used in case you can’t  write on parent

Here is an example a the project json object:

{
    "tasks":[
      {
        "id":"tmp_fk1345624806538",
        "name":"Gantt editor ",
        "code":"",
        "level":0,
        "status":"STATUS_ACTIVE",
        "start":1346623200000,
        "duration":5,
        "end":1347055199999,
        "startIsMilestone":false,
        "endIsMilestone":false,
        "assigs":[
          {
            "resourceId":"tmp_3",
            "id":"tmp_1345625008213",
            "roleId":"tmp_1",
            "effort":7200000
          }
        ],
        "depends":"",
        "description":"",
        "progress":0
      },
      {
        "id":"tmp_fk1345624806539",
        "name":"phase 1",
        "code":"",
        "level":1,
        "status":"STATUS_ACTIVE",
        "start":1346623200000,
        "duration":2,
        "end":1346795999999,
        "startIsMilestone":false,
        "endIsMilestone":false,
        "assigs":[
          {
            "resourceId":"tmp_1",
            "id":"tmp_1345624980735",
            "roleId":"tmp_1",
            "effort":36000000
          }
        ],
        "depends":"",
        "description":"",
        "progress":0
      },
      {
        "id":"tmp_fk1345624789530",
        "name":"phase 2",
        "code":"",
        "level":1,
        "status":"STATUS_SUSPENDED",
        "start":1346796000000,
        "duration":3,
        "end":1347055199999,
        "startIsMilestone":false,
        "endIsMilestone":false,
        "assigs":[
          {
            "resourceId":"tmp_2",
            "id":"tmp_1345624993405",
            "roleId":"tmp_2",
            "effort":36000000
          }
        ],
        "depends":"2",
        "description":"",
        "progress":0
      }
    ],
    "resources":[
      {
        "id":"tmp_1",
        "name":"Resource 1"
      },
      {
        "id":"tmp_2",
        "name":"Resource 2"
      },
      {
        "id":"tmp_3",
        "name":"Resource 3"
      }
    ],"roles":[
    {
      "id":"tmp_1",
      "name":"Project Manager"
    },
    {
      "id":"tmp_2",
      "name":"Worker"
    }
  ],
    "canWrite":true,
    "canWriteOnParent":true,
    "selectedRow":0,
    "deletedTaskIds":[],
  }

Status transition rules (aka project workflow)

Task statuses are a key feature of Teamwork, and our Gantt editor supports them in full.

Use the demo page and try to close some tasks (change status to “completed”); you will see how dependent tasks/children will change their status according to the following rules:

• any status-> STATUS_DONE:  may activate dependent tasks, both suspended and undefined. Will set to done all descendants.
• STATUS_FAILED -> STATUS_DONE:  do nothing if not forced by hand.
• STATUS_UNDEFINED -> STATUS_ACTIVE: all children become active, if they have no dependencies.
• STATUS_SUSPENDED -> STATUS_ACTIVE : sets to active all children and their descendants that have no inhibiting dependencies.
• STATUS_DONE -> STATUS_ACTIVE: all those that have dependencies must be set to suspended.
• STATUS_FAILED -> STATUS_ACTIVE: nothing happens: child statuses must be reset by hand.
• any status-> STATUS_SUSPENDED: all active children and their active descendants become suspended. when not failed or forced
• any status-> STATUS_UNDEFINED: all active children and their active descendants become suspended. when not failed or forced.
• any status-> STATUS_FAILED: children and dependants are set to failed.

A basic minimal implementation

The demo example is quite simple and commented, it should the right point to start.

Here I’ll sum-up what you’ll need to use our Gantt editor in your application:

first include javascript dependencies

<script src="/jquery/1.7/jquery.min.js"></script>
<script src="/jquery-ui.min.js"></script>

<script src="libs/jquery.livequery.min.js"></script>
<script src="libs/jquery.timers.js"></script>
<script src="libs/platform.js"></script>
<script src="libs/date.js"></script>
<script src="libs/i18nJs.js"></script>
<script src="libs/dateField/jquery.dateField.js"></script>
<script src="libs/JST/jquery.JST.js"></script>

<script src="ganttUtilities.js"></script>
<script src="ganttTask.js"></script>
<script src="ganttDrawer.js"></script>
<script src="ganttGridEditor.js"></script>
<script src="ganttMaster.js"></script>

then some css

 <link rel=stylesheet href="platform.css" type="text/css">
 <link rel=stylesheet href="libs/dateField/jquery.dateField.css" type="text/css">
 <link rel=stylesheet href="gantt.css" type="text/css">

then you need a div where to place the editor, something like:

<div id="workSpace" style="padding:0px; overflow-y:auto; overflow-x:hidden; border:1px solid #e5e5e5; position:relative; margin:0 5px; width:1024px; height:800px;"></div>

now create the Gant editor and bind it to your div

var ge = new GanttMaster();
ge.init($("#workSpace"));

your editor its ready to use.

If you want to know how our Gantt editor works, go in depth by reading next chapter…

How it is built

Environment first!

Libraries

Our Gantt editor is based on jQuery and use some jQuery UI components like draggable, sortable etc.

Other jQuery related libraries are used here like livequery and timers.

For data selection I used one of  my components (I have not yet published it but I will…; anyway its included here):

It supports date shortcuts like “t” (today), “y” (yesterday), “lm” (last month), “lq” (last quarter), “-4w” (4 week ago)  and so on. See files on “/libs/dateField” folder for details. This component is MIT licensed so use it!

Another key component is a javascript template library called “JST” that I wrote some years ago and discussed in a previous post “Easy going JavaScript templates”.

It is used for creating editor side rows and Gantt task elements. The library is in “/libs/JST” folder; it is very powerful and I used it in several products.

Our Gantt editor uses extensively date computation and formatting.

I used Matt Kruse’s date library with some extensions for managing holidays in date computation and with some changes for more comprehensive support of Java date formats and internationalization.

Our Gantt editor supports internationalization, but only English is implemented. Have a look at “/libs/i18n.js” file. Here you will find all the internationalization defaults, including the definition of a sample holidays calendar.

The last library used is “/libs/platform.js” that is a sort of toolbox for input validation, feedback management, extension of js objects (String, Array, Date) for cross-browser compatibility and other tricks.

I’m not very proud of this library and I cleaned it up many times with the secret hope to remove it completely, but it is very tightly linked to our “historic” development environment; if I had to fork the Gantt from our platform it would become difficult to maintain.

Core objects

We have now arrived at the application’s core.

We divided the editor in three parts:

1. the GridEditor object that manages the left part of the editor. Data editing is managed here.
2. the Ganttalendar (sorry for the ugly name!) object that manages the right part of the editor with Gantt drawing, calendar scale, task date movement
3. the GantMaster object that is responsible for the coordination of both sides, transactional management, event management and persistence.
   Your code should “talk” only with this object.

These objects are in the gridEditor.js, gantDrawer.js and gantMaster.js files respectively.

The entities managed are: Task, Link, Resource, Role, Assignment, and are defined in ganttTask.js file.

Events

Once the Gantt Editor has been initialized

var ge = new GanttMaster();
ge.init($(“#workSpace”));

it binds some events on the DOM object, in this case the DIV “workspace”.

Events bound are:

• refreshTasks.gantt: perform a redraw of all tasks
• refreshTask.gantt: accepts a task as parameter. Redraw the passed task:
• deleteCurrentTask.gantt: delete the current selected task
• addAboveCurrentTask.gantt: add a task above the current ones. The task inserted will be a brother of the current one
• addBelowCurrentTask.gantt: add a task below the current ones. The task inserted will be a child of the current one
• indentCurrentTask.gantt: the current task will become a child of the task above
• outdentCurrentTask.gantt: the current task will become a brother of the task above
• moveUpCurrentTask.gantt: the current task (and its own children) will be moved up
• moveDownCurrentTask.gantt: the current task (and its own children) will be moved down
• zoomPlus.gantt: restrict  the time scale of the Gantt side (more detail)
• zoomMinus.gantt: enlarge the time scale of the Gantt side (less detail)
• undo.gantt: undo the last actions performed
• redo.gantt: redo last actions

A basic usage for triggering an event will look like:

$(‘#workSpace’).trigger(‘zoomMinus.gantt’);

When you perform an action in the project tree, the action could propagate along the tree. There are many constraints that must be respected like milestones, statuses, dependencies, boundaries and so on. Every constrain could make it impossible to complete the operation so we decided to wrap tree operations with a  “transaction”; in case of constraint violation we rollback all the changes already done.

Events are transaction-safe, so you don’t need to worry about them.

Methods

The GanttMaster object exposes some useful methods you may need for your application.

Be careful: unlike events, methods exposed are “low-level”, so you are responsible for managing transactions correctly; transactions are not managed unless otherwise specified.

Here is a list of most important methods:

init (jQueryDomObject)

description: creates the Gantt editor, initializes project arrays, binds events.

jQueryDomObject: is a jQuery proxy for a DOM object tipically a <div> where you want to create the Gantt editor

return: nothing

createTask (id, name, code, level, start, duration)

description: creates a Task object. The task created is not added to project, just created

id: task id
name: task name
code: task code
level: task indentation level. Root task is 0 (zero)
start: the task start date in millisecond
duration: task duration in days

return: the task created

createResource (id, name)

description: creates a Resource object. The resource created is not added to resource list, just created

id: resource id
name: resource name

return: the resource created

addTask (task, row)

description: adds a task to the project at the specified row

task: a Task object
row: row where to add the object, zero based

return: the task added

loadProject(project)

description: loads a project on the editor. This method is transaction safe.

project: a project in json format as above defined in “Project Data Format” section.

return: nothing

saveProject()

description: gets the project in json format as above defined in “Project Data Format” section

return: the json object

loadTasks(tasks,row)

description: adds tasks to the current project from the specified row on

tasks: an array of Task object
row: row where to start adding tasks, zero based

return: nothing

getTask(taskId)

description: retrieves a task by id

tasksId: the id of the task you want

return: a Task object

getResource(resourceId)

description: retrieves a resource by id

respurceId: the id of the resource you want

return: a Resource object

changeTaskDates (task, start, end)

description: changes scheduling for a task in the project

task: task you want to change
start: the task start date in millisecond
end: task end in milliseconds

return: true if changing was performed, false if changes required are invalid. Error codes are set on current transaction.

moveTask (task,newStart)

description: moves a task to a new starting date

task: task you want to move
start: the task start date in millisecond

return: true if changing was performed, false if changes required are invalid. Error codes are set on current transaction.

updateLinks(task)

description: updates project link structure as defined in “task.depends” property

task: task you want to change

return: true if changing was performed, false if changes required are invalid. Error codes are set on current transaction.

taskIsChanged ()

description: notifies GanttMaster that a task has been changed and enqueues a request for redrawing both sides. Redraw is executed asynchronously and only once after 50 milliseconds

return: nothing

redraw()

description: redraw both sides. Redraw is executed immediately

return: nothing

reset()

description: starts a new project and empties both sides

return: nothing

showTaskEditor(taskId)

desciption: shows the complete task editor in popup

taskId: the id of the task you want to edit

return: nothing

undo()

description: undoes the last operation performed. There is no limit to the number of operations (the limit is just the memory of your browser)

return: nothing

redo()

description: redoes last operation undo-ed

return: nothing

beginTransaction()

description: saves the current state of the project in memory. Transactions cannot be nested

return: nothing

endTransaction()

description: closes the current transaction by making changes performed active. If there are errors set on the transaction, it rollbacks to previous state

return: true in case of  successful commit, false if a rollback was performed

setErrorOnTransaction(errorMessage, task))

description: sets an error message related to a Task object in the current transaction. If no transaction is started the message is displayed on console instead.

errorMessage: a string containing the error message

task: the Task object that generates the error

return: nothing

Customization

The Gantt editor uses CSS so you can play customizing your Gantt editor look-and-feel.

Regarding internationalization, the question is a little bit complicated. As I’ve already said, actually only the English version is available.

The file “libs/i18n.js” is used for managing generic language/country specific data.  There you can change the values for month names, day names, currency format, date format and some default message strings. Actually in our real environment (Teamwork) this file is server-side generated in base of user’s language settings.

In the same file you can/must change the implementation of the method isHoliday(date) that is used for taking care of  working days. The current implementation supports both fixed holydays (like Christmas) and mobile ones (like Easter), but you can refine the implementation for your needs.

Gantt specific string are set on GanttMaster.messages object, and by default its values are in English: you can implement you own language.

Recycling

There are lots of “tools” that can be reused; here is a list of some that I think may save a lot of time to developers:

JST: a javascript templating system, see here previous post “Easy going JavaScript templates”, but the version in Gantt is the updated ones (read until my last comment in the post linked!)

DateField: a jQuery calendar input component. No frills!

Date/Time: lots of functions that support multiple formats, relative dates, shortcuts etc. The changes from Matt Kruse’s date library should be really useful for Java developers, and in general my version is a little bit more complete, even if the original its great by itself!

Gridify: a jQuery component that transforms a <table> making columns resizable. See it at work on the left side of Gantt editor

Splittify: a jQuery component that creates a splitter in a specified dom element. Used for splitting the editor from the Gantt part

Transaction, undo-redo:  the idea and the implementation is very basic, so it can be used in many contexts

Profiler: a helpful tool for monitoring your javascript code performance

Field validation: validation function for email, url, date, time, integer, double, currency etc.

Everything is MIT!

I’m not sure if anyone can be interested on this stuff so for the moment that’s all, but in case someone is interested I’ll be pleased to publish a new post about them.

Every feedback will be really appreciated.

I cant believe it; I did it again!

I promised, but can’t resist……. I should have known it!

But let’ start from the beginning.

O course all of you know very well (at least you should!) Teamwork, the wonderful project management software that Open Lab is developing since 2003, which is about to celebrate its fifth major release; finally I can confirm that we will be out at the end of June.

One of the major new features for version 5  is a full Gantt editor, browser based.

I was in charge to select a JavaScript component that we could embed in our product – in order to save time.

So this post is firstly a selection of available components, but …….. read until the end.
(no thanks! I’m in a hurry)

My ideal component should be based on  jQuery, be LGPL (or an equivalent free-free license), be easy to configure, skinnable, multi-browser.

Unlike in my previous articles, when I was looking for grid components, tag inputs,  calendar, JavaScript templates,  confirm etc., for Gantt editors the market offers few opportunities.

Here is what I found:

DHX Editable JavaScript Gantt Chart

This component is very easy to use, simple and well documented.

It supports drag&drop and edit.

In my case the problem was that this component is tightly linked with the DHTMLX library and this is not my choice.

But if you are not already “linked” to a “framework” (like jQuery) maybe this could be your choice.

Regarding licensing, its both under GPL or commercial license. A fee of $699 for an enterprise license may be worth it.

Brynthum EXT Gantt

I think this is the best component I found ever.

The user interface is smooth, responsive and well designed. It supports editing in place, zooming, buffering for large Gantt (what could be the meaning of a project with 1000 tasks? ) drag&drop etc.

The documentation is well done and complete…… sigh! it is based on EXTJs!

The second negative point is the licensing that doesn’t fit our needs. Only a commercial license is provided.

But if this component fits you, give it a try as it is a great component.

A little sad about leaving EXT gannt, I found

jsGantt

this component developed by Shlomy Gantz and Brian Twidt seems a little bit “rude” when compared with the two above, but undoubtedly it has the value of  being built from scratch. No libraries! 100% sweat of the brow!

This component is written for data display, so if you want to drag&drop, edit, interact in some way, you must to write your code.

Documentation is…. concise, but complete.  The license model is BSD.

The lack of the editing ability convinced me to pass over.

jquery.ganttView

Finally a jQuery one!

As the name suggests it is only a viewer. Even the data model is a little weak, missing support for dependencies, but is one of the few components I found built upon jQuery. The project seems to be dying and the author Frank Grubbs did not release updates since 2 years ago.

There is an interesting work started from this project http://mbielanczuk.com/2011/06/jquery-gantt-chart/

but it still lacks some features.

I was scraping the bottom of the barrel, when I found this Japanese component

jquery.gantt

Done by Maro, this is a very light Gantt viewer; it doesn’t support dependencies, editing or other advanced features, but it can be used as a starting point.

I was really desperate at this point! What I was looking for was something like the component used on

Gantter

Gantter is an online service, so not a part of this family of components, but I used it to set my requirements.

They don’t sell their component.

But searching for something similar I found interesting stuff in the far east:

Sunflower 向日葵任务甘特图

If you are fluent with Chinese, maybe you’ll find working with this component easier than I did.

But Chinese apart this is a really full featured component, and I work with it for a while. It supports editing, drag&drop, dependencies, zooming, etc.

I didn’t understand the license type very well, but a free version seems available.

Documentation is available in Chinese only, and Google Translate can help you only partially.

It doesn’t use jQuery.

What I found really incredible is how Sunflower component is similar to the one used by the above online service…

And last but not least I found

TreeGrid Gantt Char

This component is awesome! really! it can do everything.

Supports every kind of  actions, notation, dependencies, colors, really everything.

There are lots of examples and the online documentation is complete and effective.

Maybe someone can argue that the readability of this kind of Gantt is not ideal, but the component can be used in a simpler way.

Scalability is not an issue at all for this component, there is an example with 1000000 rows and 1000 columns!

Also compatibility is wider than any marketer requirement could ever be (runs even on IE6).

Ok it is not based on jQuery, and the commercial license cannot fit every wallet, but a component like this requires years for developing it.

dojox.gantt

I have to cite the dojo library for completeness, but I didn’t play with this component.

Seems quite complete and the documentation is well done. Based on Dojo, not on jQuery.

Our solution

If you reached this point maybe you are asking what component did I choose?

I told you at the beginning:

I did it again!

I developed my own component!

Why?

1. because none of the component mentioned above is LGPL/MIT
2. none is built in jQuery
3. I need to actively manage the data model because a Teamwork task/project’ one is more flexible than one representable with a Gantt

but mainly because I love to write code!

In this case the work seemed really hard so I  worked in pair with Silvia, and this is actually a nice experience by itself!

Here’s the result of our efforts:

Even if the layout is clean and may seem barebones it actually supports a lot of features:

• in-place editing
• drag&drop
• zooming
• do/undo
• multiple dependencies
• full editing
• dates shortcuts
• css skin
• multiple browser
• resources editing
• multiple assignment
• milestones
• export data in JSON format
• resize & scroll

and

• tasks status!

the last point is the mayor difference introduced in Teamwork task management  model.

Teamwork focus is capturing work done in real time. To do this we built a tool that can model real time situations and easily change in time. This is in contrast with traditional project management methodology where projects are defined in advance in all details – not realistic for most work situations.
So Teamwork’s model of project, task trees, dates and task states is different from that of classical Gantts: tasks can be open beyond their due dates, task can be suspended inside their time scope, and so on. Also the automation due to dependencies has been somewhat simplified with respect to classical Gantt tools.

The introduction of task’s states lets our Gantt act as a sort of workflow.  Let’s see what happens when you close a phase with dependencies:

here the first phase is open (second row: green-> open)

here I closed the first phase (all subtasks become blue->closed : rows 3 and 4 ) so the second phase can start and become green->open and its dependants become orange->suspended

This is the task full editor

and the resource quick editor

You can try our component online here on http://gantt.twproject.com/

Source code is available on GitHub here. This component is release under MIT license.

In the next post I’ll describe in detail how to use the component code, stay tuned.

The complete link collection for this article is in a Licorize booklet: http://licorize.com/projects/rbicchierai/JS-Gantt-editor

I’m re-writing some components for our  world-wide selling Teamwork, and I was in the need to have a nicer way to confirm some “dangerous” user actions.

The standard JavaScript solution is something like

if (confirm(“do you want to destroy everything?”)) 
  … <em>here the code for destroying</em> 

While the code is very simple, the popup alert is unfashionable and old-smelling.

The best solution I found is the Nadia Alramli’s jQuery confirm plugin that I have already used massively in Licorize.

The first great idea in the Nadia’s plugin is that the confirm question is shown exactly where you clicked for the action.

The second idea is that the “confirm” is just “applied after” your code behavior.

Let se the simplest example (from Nadias’ blog):

// The action.
$('a').click(function() {
  alert('click');
  return false;
});
 
// The most simple use.
$('a').confirm();

As you can see, first you bind the event normally, then you will apply the confirm.

This approach is very nice, but its is very “javascript oriented”; what I mean is that you need a js piece of code for setting up the confirm, and this is a little bit rigid for an inline usage.

Example:

<button onclick=”destroyAll()”>

where “destroyAll” is your function.

So I wrote this little jQuery plugin that can be used like this:

<button onclick=”$(this).confirm(destroyAll)>

Here the code:

 $.fn.confirm = function(action, message) {
    if (typeof(action) != "function")
      return;
    this.each(function() {
      var el = $(this);
      var div = $("<div>").addClass("confirmBox").
              html(message ? message : i18n.DO_YOU_CONFIRM);
      div.css({"min-width":el.outerWidth(),"min-height":el.outerHeight()});
      div.oneTime(5000, "autoHide", function() {
        $(this).fadeOut(100, function() {
          el.show();
          $(this).remove();
        });
      });
      var no = $("<span>").addClass("confirmNo")
              .html(i18n.NO).click(function() {
        $(this).parent().fadeOut(100, function() {
          el.show();
          $(this).remove();
        }).stopTime("autoHide");
      });
      var yes = $("<span>").addClass("confirmYes")
              .html(i18n.YES).click(function() {
        $(this).parent().fadeOut(100, function() {
          el.show().oneTime(1, "doaction", action);
          $(this).remove();
        }).stopTime("autoHide");
      });

      div.append("&nbsp;&nbsp;")
              .append(yes)
              .append("&nbsp;/&nbsp;")
              .append(no);
      el.hide().after(div);

    });

    return this;
  };

few lines of CSS for the sake of completeness:

.confirmBox{
    display:inline-block;
    z-index:10000;
    vertical-align:middle;
    text-align:center;
    font-size:larger;
    font-style:italic;
    color:#a0a0a0;
  }
  .confirmBox .confirmNo{
    color:#e06060;
    cursor:pointer;
    font-weight:bolder;
  }
  .confirmBox .confirmYes{
  color:#60e060;
  cursor:pointer;
    font-weight:bolder;
  }

and two lines for internationalization:

var i18n = {
    YES:"Yes",
    NO:"No",
    DO_YOU_CONFIRM:"Do you confirm?"
  };

See a Demo page here

This component is released under MIT license.

Your feedback will be appreciated.

Last week my collegue Matteo (aka pupunzi) was porting an iPad application (booo!) to HTML5 (yeah!).

The iPad application was a virtual museum that was using a sqlite dabatase for reading data relative to rooms, biography, history and so on.

Even if sqlite is internally supported by some browsers (e.g. Chrome) the easiest way to read data in javascript is to have a JSON object.

I wrote a simple java code to dump the whole database into a JSON object.

import net.sf.json.JSONObject;
import net.sf.json.JSONArray;
import java.sql.*;
import java.util.List;
import java.util.ArrayList;
import java.io.FileOutputStream;
public class DB2JSON {

  public static void main(String[] args) {

    if (args.length<1)
      return;
    Connection conn = null;

    try {
      String dbFile = args[0];
      JSONObject ret = new JSONObject();
      Class.forName("org.sqlite.JDBC");
      conn = DriverManager.getConnection("jdbc:sqlite:" + dbFile);
      Statement stat = conn.createStatement();

      ResultSet tables = stat.executeQuery("SELECT name 
         FROM sqlite_master 
         WHERE type='table' ORDER BY name;");
      List tableNames = new ArrayList();
      while (tables.next()) {
        tableNames.add(tables.getString("name"));
      }
      tables.close();

      for (String tableName : tableNames) {
        JSONArray jsa = new JSONArray();

        ResultSet rows = stat.executeQuery("select * from " + 
           tableName + ";");

        while (rows.next()) {
          JSONObject row = new JSONObject();
          ResultSetMetaData meta = rows.getMetaData();
          for (int i = 1; i <= meta.getColumnCount(); i++) {
            row.element(meta.getColumnName(i), rows.getObject(i));
          }
          jsa.add(row);
        }

        rows.close();
        ret.element(tableName, jsa);
      }

      conn.close();

      // result on console
      System.out.println(ret.toString());

      //result on file
      FileOutputStream fos = new FileOutputStream(dbFile+".json");
      fos.write(ret.toString().getBytes());
      fos.close();     

    } catch (Throwable e) {
      try {
        if (conn != null)
          conn.close();
      } catch (SQLException s) {
      }
      e.printStackTrace();
    }
  }
}

The resulting JSON object will have a property for each table containing an array of records. Different types of properties are supported (String, int, long, dates etc.)

There are two dependencies to external libraries:

1.  http://json-lib.sourceforge.net/
2. http://www.zentus.com/sqlitejdbc/

Enjoy.

P.S.: the pupunzi’s porting result is an HTML5 application that runs everywhere and it is looks even more beautiful than the iOS one !

Yesterday while I was biking my dog  across Cascine park in Florence mumbling about a new product idea, my eyes was attracted by some strange orange points in the autumnal yellow carpets. I got off the bike to have a closer look. WOW! there was thousand of alkekengi fruits on the ground.

Alkekengi (Physalis alkekengi L.) is a plant from the same family of tomatoes, it is  invasive and an alien specimen in Italy, it is something negative!

Let me explain how to “eradicate” this evil presence:

1) pick-up some dozens of alkekengi fruits with their orange “lanterns”

2) pop the lanterns and get the balls “naked”, but without removing the ”leaves”

3) prepare a “bain marie” for dark chocolate. If you don’t have the right pot you can stack a metal bowl on a boiling water pot

3) when chocolate melts, start dipping alkekengi balls one at a time.
Use folded leaves for holding them

4) then place the hot ball on a baking paper sheet to let them cooling down

5) in the meanwhile get some hot chilies (I used real small ones that decide to happily colonize a lemon vase), smash them in a mortar and then add them to hot chocolate. Stir to amalgamate.

6) now you are ready for the last chocolate passage.

7) let chocolate solidify and eventually repeat last passage.

The chilled dark chocolate is in perfect balance with the sour flavor of alkekengi.

Now  you are ready to destroy this evil presence!

P.S.: I forgot for the rest of the week-end the fu$#£!…. idea on the new product.

Power of chocolate.

(test demo here)

Now I’m playing on a component that I’d like to use as replacement for the current “weekly review” game on Licorize. If you are wondering about a “game” on a GTD operation like “weekly review”, have a look at Game mechanics for thinking users article by Pietro Polsinelli.

The goal is to transmit the idea of having something to be “cleared”; a picture covered with black pieces should work fine!

The requirement is that the number of pieces covering the image must be pre-determined.

First of all I need an algorithm to “tassellate” the image with random shaped triangles. Actually the triangles are not overlaying, so I divide recursively the space available.

Go have a simple algorithm, first I split the image in two triangles, then I apply to both the recursive splitting.

A single splitting step:

1) choose a random side

2) find a point (x) on that side, nearly in the middle

3) link the point (x) with the opposite corner and generate two triangles

4) apply splitting on both triangles

here is the code:

Then the recursive function: notice that I have to use a queue to “balance” the recursion on both splitted parts, otherwise I will divide only the first triangle reaching the exit condition (x pieces reaced).

Then I used my simple Stage object to manage canvas interactions (read lenscape a canvas interaction tutorial for details) as click on triangles, mouse over, etc…

I’ve also added a sound on “remove piece” button, but dealing with the <AUDIO> tag is another history…

(see example and bookmarks)

I approached html drawing far in the past when svg was a weak light in the darkness of browser graphics. Mainly due to the lack of IE support for svg at the time I chose to create my own graphic library emulating  pixel drawing with thousands of lilliputian <div>.

In the following years I had only sparse contacts with html graphics but always having in mind the svg approach, where a line, a circle or whatever is a solid xml tag.

e.g: <ellipse cx=”300″ cy=”150″ rx=”200″ ry=”80″ style=”fill:rgb(200,100,50);”/>

this is really “natural” for me, html-writer: every single element has its own tag, and we are all happy!

Last month here, in Open Lab, we decided to start developing our first game (first for the company but not for the people working in it) and we decided to develop it using HTML5!

It’s time for me to resurrect dormant skills, and have a look at what is happening in the world of html gaming.

Surprise! Nobody is using svg for gaming, the main road is deeply tracked through <canvas> fields;  so then I started studying it.

First of all I got a punch in the stomach learning that a canvas is, as the word says, only a place where to “draw” something, not a place where to “store” something. That means that once you have put something in a canvas, there is no way to recall  it, or even worst to detect its presence.

This implies that if you want, for instance, to do something when clicking on a “circle” you cannot “bind” an event on that circle, simply because that “circle” doesn’t exist.  So if you need to interact with objects in the scene you need to work around it.

Actually this tutorial will explain how to approach canvas interaction,  so this will result as a shortcut for avoiding the pain and getting only the fun part!

Disclaimer: I know there are lots of html gaming engines as Aves recently acquired by Zinga, CAAT by HyperAndroid, Strikedisplay by Josh Strike or Impact by Dominic Szablewski (this list is far from complete). So if you are not interested in going in depth in canvas technicalities, this is a good point where to stop reading.

If you are interested in going deeper, first of all I suggest you to have a look at what is happening in the canvas world:  canvasdemos is a great source of inspiration. Then have a look to the canvas element reference, just to taste the complexity…

I chose as final destination of this short trip in the canvas world the construction of a simple application,that emulates a lens moving on a picture. In the meantime I’d like to lay the foundations of my own canvas animation(?) library.

Summing up I’m going to realize a lens, that will enlarge a part of an underlying background image.

The lens can be moved over the image, to get a detailed view, using drag&drop.

The first step is to have a large image, larger than the screen (e.g.: 4000 x 2000) with full resolution, and use it as canvas background.

In order to have a canvas background you can use at least two different approaches:

1) using CSS background-image. This is an interesting approach as the background is not in the canvas itself, so you do not need to redraw it once you clear the canvas. In my case this solution doesn’t fit as I need to stretch the image, and moreover this feature is not supported by all browsers, actually even canvas is not supported….

2) coping “bits” from an existing image to the canvas. I choose this approach even if this requires to redraw the background after each “clear” action, as this approach is supported by all browser canvas implementations.

First two rows of code: a general style for canvas and the “large” image

As the image is “large” everything starts at the “onload” event on the image, that may happen seconds after the page is loaded.

Just a couple of global variables to refer to the image, the stage, and the context.

img variable is used only for shortening code and is a jQuery proxy for the <img>. I used jQuery only because I’m used to use it, but it isn’t a requirement.

ctx is the canvas context and is the main entry point for canvas operation (have a look at the complete reference of 2d context); here context is reached via a global variable only for shortening code but the right place (“right” in terms of object modeling) should be in the “stage” object.

stage is the “object model” of our environment, this supplies the lack of state of canvas itself, it holds all the objects of our “world” in an array.

First setup fills variables and then initializes the stage:

We are creating a canvas with the same aspect ratio of the original image. The Canvas object is our model for html  canvas, it exposes two methods: init and draw.

Init method is responsible for canvas creation, context acquisition, and events binding:

…

Draw method is called every time you need to refresh the scene (really often during interactions) and, in our example, is here only to repaint the background:

so, just clear and use the drawImage function to perform a bulk copy from our “large” off-screen  image to the canvas. This is a sort of powerful bitBlit operation that supports crop, translate and resize operations.

Then the Lens object: it is responsible for holding the lens position and magnification. It exposes three methods: draw, moveTo, setMagnification.

The Lens constructor:

A little complication here is the fact that we are zooming over an image off-screen while we are moving over the canvas, so we need some scaling factor to calculate the position of the underlying point in the “large” image.

Then lens drawing.

The lens effect is rendered by copying a part of the “large” image, eventually magnified, by cropping the image in a round shape, and applying a radial gradient on an alpha channel.

Note once again the usage of drawImage method to copy and enlarge the image and the  clip method for creating a circular clipping region. Then we will apply the radial gradient using color with an alpha channel.

The lens modeled using a js object makes it comfortable to have one or more instances of the same object:

Here you see two lenses with different sizes and different magnification factors.

Now everything is working but there is no interaction with the user.

Lets try to add drag&drop capability.

I have to cite html5canvastutorials that helped me understand the first steps in managing interactions.

In order to start dragging we have to intercept the mouseDown event on the lens, but as I told you before, canvas do not retain the state of the object you’ve drawn on, so you cannot bind any event on the circle containing the lens: you can only bind events on the whole canvas, so if the user clicks the mouse on the lens you will receive the event on the canvas, not on the circle.

How to determine if there is your lens under the mouse? A simple, mathematical solution is to calculate the distance between the mouse and the lens center (you have all you need, mouse x-y coordinates from the js event, and the lens center from our Lens object), then if distance is  lower than the lens radius the click was inside, out otherwise.

This approach will work fine mainly for rectangles and circles, but how to manage a complex shape like the one in the picture? (yes, I know that this sucks!)

In this case the “math” approach is definitively more complex.

Hopefully canvas can answer the question “is this point in path?”. The “sole” limitation is that you can ask this question “only while” your are drawing, that in terms of canvas context is only between context.beginPath() and context.closePath() calls; so we have to store somewhere the mouse coordinates, then ask isPointInPath(mouseX, mouseY) and store the result on the Lens object.

Summing up: all events are binded to the canvas object, the stage redrawing is called on mouse move, and the “over” state is recorded on the Lens object. Mousedown, mouseup, and mouseleave only perform simple operations.

Stage holds the object currently in drag status.

Note that we move the object that is first dragged on top of the stage.stageObjects list; this will act as a z-order operation, bringing the object to the front.

The running example is here, and source code here under MIT licence, so feel free to change and reuse.

All the material referred in this post is in my Licorize booklet for canvas related material: http://licorize.com/projects/rbicchierai/blogmaterial/canvas

I took the photos used as examples in my travels.