42
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

Interactive Image Processing Demos for the Web

Embed Size (px)

DESCRIPTION

BSc thesis by Marcel Tella-Amo at the Telecommunications Engineering studies in the School of Engineering of Terrassa (EET), Universitat Politècnica de Cataluna (UPC). Co-advised by Xavier Giró-i-Nieto and Albert Gil. This diploma thesis aims to provide a framework for developing web applications for ImagePlus, the software develpment platform in C++ of the Image Processing Group of the Technical University of Catalonia (UPC). These web applications are to demonstrate the functionality of the image processing algorithms to any visitor to the group website. Developers are also benefited from this graphical user interface because they can easily create Graphical User Interfaces (GUIs) for the processing algorithms. More information:

Citation preview

Page 1: Interactive Image Processing Demos for the Web

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

Page 2: Interactive Image Processing Demos for the Web

2

Motivation

UPC Image and Video Processing Group

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

Context

ImagePlus

Software development platform

Page 3: Interactive Image Processing Demos for the Web

3

Motivation

● Showing the algorithms

● External Users

● Internal users

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

Index

Page 4: Interactive Image Processing Demos for the Web

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.

Page 5: Interactive Image Processing Demos for the Web

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

Page 6: Interactive Image Processing Demos for the Web

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

Page 7: Interactive Image Processing Demos for the Web

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

Page 8: Interactive Image Processing Demos for the Web

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●[...]

Page 9: Interactive Image Processing Demos for the Web

9

No plug-ins in the client

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

Page 10: Interactive Image Processing Demos for the Web

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

Page 11: Interactive Image Processing Demos for the Web

11

Interactive demos

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

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

Page 12: Interactive Image Processing Demos for the Web

12

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

● Getting started

● Commenting all the code

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

Page 13: Interactive Image Processing Demos for the Web

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

Page 14: Interactive Image Processing Demos for the Web

14

How to demonstrate image processingExposing the source code

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

Page 15: Interactive Image Processing Demos for the Web

15

How to demonstrate image processing

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

Explaining them step by step with pictures

Page 16: Interactive Image Processing Demos for the Web

16

How to demonstrate image processing

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

Making videos

Page 17: Interactive Image Processing Demos for the Web

17

How to demonstrate image processing

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

30 days trial

Page 18: Interactive Image Processing Demos for the Web

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/

Page 19: Interactive Image Processing Demos for the Web

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

Page 20: Interactive Image Processing Demos for the Web

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

Page 21: Interactive Image Processing Demos for the Web

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

Page 22: Interactive Image Processing Demos for the Web

22

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

Page 23: Interactive Image Processing Demos for the Web

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

Page 24: Interactive Image Processing Demos for the Web

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

Page 25: Interactive Image Processing Demos for the Web

25

Final scheme of the application

ImagePlus

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

Web Framework&

Web Utilities

Wt

HTML

Page 26: Interactive Image Processing Demos for the Web

26

Web Interface

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

Page 27: Interactive Image Processing Demos for the Web

27

Interface classes: Architecture

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

Page 28: Interactive Image Processing Demos for the Web

28

Wt basics vs HTML basics

Wt

WContainerWidget

WText

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

HTML

<div>

<span>

Qt

QDesignerContainerExtension

QTextEdit

Page 29: Interactive Image Processing Demos for the Web

29

Interface classes: Hierarchy

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

Page 30: Interactive Image Processing Demos for the Web

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

Page 31: Interactive Image Processing Demos for the Web

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

Page 32: Interactive Image Processing Demos for the Web

32

Results

● Framework

● Classes● Utilities

● WebImage● WebBibliography

● Demo

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

Index

Page 33: Interactive Image Processing Demos for the Web

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"){}

Page 34: Interactive Image Processing Demos for the Web

34

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

Result of writting that little piece of code

Page 35: Interactive Image Processing Demos for the Web

35

Utilities: WebImage

WebImage ima(&getDemo());

ima.paintImage( ImageRGB );

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

Page 36: Interactive Image Processing Demos for the Web

36

Utilities: WebBibliography● New class to add a formatted bibliography

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

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

Page 37: Interactive Image Processing Demos for the Web

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.

Page 38: Interactive Image Processing Demos for the Web

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

Page 39: Interactive Image Processing Demos for the Web

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++!

Page 40: Interactive Image Processing Demos for the Web

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

Page 41: Interactive Image Processing Demos for the Web

41

Video demonstrations

Wt works HTML 5 video tag

● Future project:

GSTREAMER + WT + IMAGEPLUS

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

Page 42: Interactive Image Processing Demos for the Web

42

Questions?

All work done in a Debian – Linux based environment

NX No-MachineEclipse IDE

Iceweasel & Google Chrome browsers