Interactive Image Processing demonstrations for the web

Author: Marcel Tella Amo

Advisors: Xavier Giró i Nieto Albert Gil Moreno

Terrassa Engineering School(E.E.T.)Spring 2011

2

Motivation

UPC Image and Video Processing Group

Motivation – Requirements – State of the Art – Design – Results - Conclusions

Context

ImagePlus

Software development platform

3

Motivation

● Showing the algorithms

● External Users

● Internal users

Motivation – Requirements – State of the Art – Design – Results - Conclusions

Index

4

Showing algorithmsExternal users

Motivation – Requirements – State of the Art – Design – Results - Conclusions

UPC image and video processing group need a way to show their algorithms in a comfortable way.

5

Internal Users

● Detecting possible bugs in the application

● Watching the results in a graphical way

Motivation – Requirements – State of the Art – Design – Results - Conclusions

6

Requirements

● Global access

● Minimum web technology

● No plug-ins in the client

● Easy for programmers

● Interactive demos

● Documentation

Motivation – Requirements – State of the Art – Design – Results - Conclusions

HOW COULD I FIND A TECHNOLOGY TO FULFILL ALL THIS?

Index

7

Global access

Internet is the best way to transmit information to everyone.The more people, the better

Motivation – Requirements – State of the Art – Design – Results - Conclusions

8

Minimum web technology

The more technology, the more to learn for developers

Motivation – Requirements – State of the Art – Design – Results - Conclusions

Avaliable Technology:

●HTML●DHTML●XHTML●JavaScript●PHP●AJAX●CSS●ASP.NET

●Ruby on rails●Java●C++●Python●[...]

9

No plug-ins in the client

Motivation – Requirements – State of the Art – Design – Results - Conclusions

10

Easy for programmers

● Simple way to create a web demonstration

● A whole web interface with a few lines of code

Motivation – Requirements – State of the Art – Design – Results - Conclusions

11

Interactive demos

Interactivity is very important to give a good feeling to the user.

Motivation – Requirements – State of the Art – Design – Results - Conclusions

12

Documentation● Afterwards, developers have to code web demonstrations...

● Getting started

● Commenting all the code

Motivation – Requirements – State of the Art – Design – Results - Conclusions

13

State of the art

● How to demonstrate image processing

● Exposing the source code

● Explaining with pictures

● Making videos

● 30 days trial

● Image Processing in the web

● Image Processing in the client side

Motivation – Requirements – State of the Art – Design – Results - Conclusions

Index

14

How to demonstrate image processingExposing the source code

Motivation – Requirements – State of the Art – Design – Results - Conclusions

15

How to demonstrate image processing

Motivation – Requirements – State of the Art – Design – Results - Conclusions

Explaining them step by step with pictures

16

How to demonstrate image processing

Motivation – Requirements – State of the Art – Design – Results - Conclusions

Making videos

17

How to demonstrate image processing

Motivation – Requirements – State of the Art – Design – Results - Conclusions

30 days trial

18

How to demonstrate image processing

Motivation – Requirements – State of the Art – Design – Results - Conclusions

Image Processing algorithms in the web

More examples: http://www.pixl.com/http://www.aviary.com/

19

Image Processing in the client side: Javascript

frameworks

● Just powerful computers

● No limited computers

● No tablets

● No mobile phones

Motivation – Requirements – State of the Art – Design – Results - Conclusions

20

Design

● Possible scheme

● Looking for the right technology

● Final scheme of the application

● Web Interface

● Wt basics vs HTML basics

● One application, one demo

Motivation – Requirements – State of the Art – Design – Results - Conclusions

Index

21

Possible scheme

ImagePlustools

ImagePlustools

ImagePlusImagePlus

WebWeb

Me+

Some techology?

Me+

Some techology?

Saving files in disc?It really is a way, but it is not optimal, saving files in disc, and

being dependent of ImagePlus tools

22

Motivation – Requirements – State of the Art – Design – Results - Conclusions

23

Looking for the right technologyWt, the winner one!

● Render webs

● Interactivity

● Support HTML 5

● Allows PUSH

● Open Source

● and more...

And the most important, Wt is created to join all web technology in just C++!

Motivation – Requirements – State of the Art – Design – Results - Conclusions

24

Wt main approach:Breaking the Client-Server scheme

Programmer Side

● Like Desktop

● No client-server

Web Side

● Client-Sercer Scheme

Motivation – Requirements – State of the Art – Design – Results - Conclusions

25

Final scheme of the application

ImagePlus

Motivation – Requirements – State of the Art – Design – Results - Conclusions

Web Framework&

Web Utilities

Wt

HTML

26

Web Interface

Motivation – Requirements – State of the Art – Design – Results - Conclusions

27

Interface classes: Architecture

Motivation – Requirements – State of the Art – Design – Results - Conclusions

28

Wt basics vs HTML basics

Wt

WContainerWidget

WText

Motivation – Requirements – State of the Art – Design – Results - Conclusions

HTML

<div>

<span>

Qt

QDesignerContainerExtension

QTextEdit

29

Interface classes: Hierarchy

Motivation – Requirements – State of the Art – Design – Results - Conclusions

30

One application, one demo

One demo

● Tries per user● ImagePlus structure

Imageplus Tools Web demos

Multiple demos

● More comfortable for external users.

Easy to make with some hiperlinks!

Motivation – Requirements – State of the Art – Design – Results - Conclusions

31

Desktop vs Web

Nowadays, with high connections, Internet is becoming more and more important.

● Applications on-line (cloud computing) [Wt]

● The server does everything– Mobile devices

● Desktop applications. [Qt]

Motivation – Requirements – State of the Art – Design – Results - Conclusions

32

Results

● Framework

● Classes● Utilities

● WebImage● WebBibliography

● Demo

Motivation – Requirements – State of the Art – Design – Results - Conclusions

Index

33

Framework● The main result of my project

● Inheriting from “GPIapp” you get a void interface.

● Title and description are also mandatory in each demo

Motivation – Requirements – State of the Art – Design – Results - Conclusions

class newapp : public GPIapp{};

//Constructornewapp::newapp(const WEnvironment& env) : GPIapp(env,"Title","Description"){}

34

Motivation – Requirements – State of the Art – Design – Results - Conclusions

Result of writting that little piece of code

35

Utilities: WebImage

WebImage ima(&getDemo());

ima.paintImage( ImageRGB );

Motivation – Requirements – State of the Art – Design – Results - Conclusions

36

Utilities: WebBibliography● New class to add a formatted bibliography

addBibliography(“author”,”title”,”publication”,”url”);

Motivation – Requirements – State of the Art – Design – Results - Conclusions

37

Demonstration

Motivation – Requirements – State of the Art – Design – Results - Conclusions

This is just a little example of what could be done with Wt and the Web Framework created in this project.

38

Conclusions

● Requirements fulfilled

● Useful for the UPC image and video processing group

● Future project about video demonstrations

Motivation – Requirements – State of the Art – Design – Results - Conclusions

Index

39

Requirements fulfilled

Going back to the requirements we can see that all requirements are fulfilled.

● Global access

● One application, one demo

● No plug-ins in the client

● Easy for programmers

● Interactive demos

● Minimum web technology

Motivation – Requirements – State of the Art – Design – Results - Conclusions

Better resoults than expected! Everytihing is in C++!

40

Useful for the UPC image and video processing group

There is something to show now!

Click here to go to the demonstration:

Binary partition tree web demonstration

Motivation – Requirements – State of the Art – Design – Results - Conclusions

41

Video demonstrations

Wt works HTML 5 video tag

● Future project:

GSTREAMER + WT + IMAGEPLUS

Motivation – Requirements – State of the Art – Design – Results - Conclusions

42

Questions?

All work done in a Debian – Linux based environment

NX No-MachineEclipse IDE

Iceweasel & Google Chrome browsers