Menu Close

JSImpress

Form my first real post I want to present a screen casts of web applications that I’ve made for my master’s thesis. The system is called JSImpress(stands form JavaScript Image Presenatation System), I’ve focused mostly on interface, witch is completely JavaScript-based, inspired by Photoshop’s interface. Generally it was an attempt to achieve PS-like user experience in web standards based application(no canvas element used).

What JSImpress does? It lets you create and publish a document presenting images-based content in a new, interactive way. For example it can be used to show phases of image painting process, end-user(viewer) can easily see how scratch has been filled up witch colors and then details, focusing on particular area of interest. See for yourself.

[yframe url=’http://www.youtube.com/watch?v=ElXoHNJQcmk’]

System itself consists of 3 components:

  • JSICreator – JS application, as name indicates it can be used to create a document.
  • JSIViewer – smaller JS application to explore published documents. It’a also embeded in JSICreator to make preview possible.
  • JSIServer – server side application, build in PHP/Zend Framwork to store documents.

All the communication is done using AJAX. JS parts of the system are coded using MooTools library(slightly modified and extended), witch is my JS library of choice.

Layers stack is element that took most work. User is able to select multiple layers at once using Shift or Ctrl (Shift lets you to select range of layers, while with Ctrl selected layers doesn’t have to be next to each others) – just like in Photoshop. Also moving layers is performed in PS-like matter. I focused on this piece because all free graphic programs lacks this simple functionality (witch – in my opinion – lets users improve their working performance significantly), and I wonted to see if it is hard to code. I’ll try to post another movie illustrating this features in a while.

[Edit] movie added:

[yframe url=’http://www.youtube.com/watch?v=8TjPxiXOacc’]

Leave a Reply

Your email address will not be published. Required fields are marked *

*