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:

1. Interactive Image Processing
demonstrations for the web
Terrassa Engineering School(E.E.T.)
Spring 2011
Author: Marcel Tella Amo
Advisors: Xavier Giró i Nieto
Albert Gil Moreno

2. Motivation – Requirements – State of the Art – Design – Results - Conclusions
Motivation
Context
UPC Image and Video
Processing Group
ImagePlus
Software development platform
2

3. Motivation – Requirements – State of the Art – Design – Results - Conclusions
Motivation
Index
●
Showing the algorithms
●
External Users
●
Internal users
3

4. Motivation – Requirements – State of the Art – Design – Results - Conclusions
Showing algorithms
External users
UPC image and video processing group need a way to show
their algorithms in a comfortable way.
4

5. Motivation – Requirements – State of the Art – Design – Results - Conclusions
Internal Users
●
Detecting possible bugs in the application
●
Watching the results in a graphical way
5

6. Motivation – Requirements – State of the Art – Design – Results - Conclusions
Requirements
Index
●
Global access
●
Minimum web technology
●
No plug-ins in the client
●
Easy for programmers
●
Interactive demos
●
Documentation
HOW COULD I FIND A TECHNOLOGY TO
FULFILL ALL THIS?
6

7. Motivation – Requirements – State of the Art – Design – Results - Conclusions
Global access
Internet is the best way to transmit information to everyone.
The more people, the better
7

8. Motivation – Requirements – State of the Art – Design – Results - Conclusions
Minimum web technology
The more technology, the more to learn for developers
Avaliable Technology:
HTML
DHTML
●XHTML
●JavaScript
●PHP
●AJAX
●CSS
●ASP.NET
●
●
Ruby on rails
●Java
●C++
●Python
●[...]
●
8

9. Motivation – Requirements – State of the Art – Design – Results - Conclusions
No plug-ins in the client
9

10. Motivation – Requirements – State of the Art – Design – Results - Conclusions
Easy for programmers
●
Simple way to create a web demonstration
●
A whole web interface with a few lines of code
10

11. Motivation – Requirements – State of the Art – Design – Results - Conclusions
Interactive demos
Interactivity is very important to give a good feeling to the
user.
11

12. Motivation – Requirements – State of the Art – Design – Results - Conclusions
Documentation
●
Afterwards, developers have to code web demonstrations...
●
Getting started
●
Commenting all the code
12

13. Motivation – Requirements – State of the Art – Design – Results - Conclusions
State of the art
Index
●
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
13

14. Motivation – Requirements – State of the Art – Design – Results - Conclusions
How to demonstrate image processing
Exposing the source code
14

15. Motivation – Requirements – State of the Art – Design – Results - Conclusions
How to demonstrate image processing
Explaining them step by step with pictures
15

16. Motivation – Requirements – State of the Art – Design – Results - Conclusions
How to demonstrate image processing
Making videos
16

17. Motivation – Requirements – State of the Art – Design – Results - Conclusions
How to demonstrate image processing
30 days trial
17

18. Motivation – Requirements – State of the Art – Design – Results - Conclusions
How to demonstrate image processing
Image Processing algorithms in the web
More examples:
http://www.pixl.com/
http://www.aviary.com/
18

19. Motivation – Requirements – State of the Art – Design – Results - Conclusions
Image Processing in the
client side: Javascript
frameworks
●
Just powerful computers
●
No limited computers
●
No tablets
●
No mobile phones
19

20. Motivation – Requirements – State of the Art – Design – Results - Conclusions
Design
Index
●
Possible scheme
●
Looking for the right technology
●
Final scheme of the application
●
Web Interface
●
Wt basics vs HTML basics
●
One application, one demo
20

21. Possible scheme
ImagePlus
ImagePlus
ImagePlus
ImagePlus
tools
tools
Saving
files in
disc?
Web
Web
It really is a way, but it is not optimal, saving files in disc, and
being dependent of ImagePlus tools
Me
Me
+
+
Some
Some
techology?
techology?
21

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

23. Motivation – Requirements – State of the Art – Design – Results - Conclusions
Looking for the right technology
Wt, 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++!
23

24. Motivation – Requirements – State of the Art – Design – Results - Conclusions
Wt main approach:
Breaking the Client-Server scheme
Programmer Side
●
Like Desktop
●
Web Side
●
Client-Sercer Scheme
No client-server
24

25. Motivation – Requirements – State of the Art – Design – Results - Conclusions
Final scheme of the application
HTML
Wt
Web Framework
&
Web Utilities
ImagePlus
25

26. Motivation – Requirements – State of the Art – Design – Results - Conclusions
Web Interface
26

27. Motivation – Requirements – State of the Art – Design – Results - Conclusions
Interface classes: Architecture
27

28. Motivation – Requirements – State of the Art – Design – Results - Conclusions
Wt basics vs HTML basics
HTML
Wt
<div>
WContainerWidget
<span>
WText
Qt
QDesignerContainer
Extension
QTextEdit
28

29. Motivation – Requirements – State of the Art – Design – Results - Conclusions
Interface classes: Hierarchy
29

30. Motivation – Requirements – State of the Art – Design – Results - Conclusions
One application, one demo
One demo
Tries per user
● ImagePlus structure
●
Multiple demos
More comfortable for
external users.
●
Imageplus
Tools
Web demos
Easy to make with some hiperlinks!
30

31. Motivation – Requirements – State of the Art – Design – Results - Conclusions
Desktop vs Web
Nowadays, with high connections, Internet is becoming more
and more important.
●
Applications on-line (cloud computing)
●
The server does everything
–
●
[Wt]
Mobile devices
Desktop applications.
[Qt]
31

32. Motivation – Requirements – State of the Art – Design – Results - Conclusions
Results
Index
●
Framework
●
Classes
●
Utilities
●
●
●
WebImage
WebBibliography
Demo
32

33. Motivation – Requirements – State of the Art – Design – Results - Conclusions
Framework
●
The main result of my project
●
Inheriting from “GPIapp” you get a void interface.
●
Title and description are also mandatory in each demo
class newapp : public GPIapp
{};
//Constructor
newapp::newapp(const WEnvironment& env)
: GPIapp(env,"Title","Description")
{}
33

34. Motivation – Requirements – State of the Art – Design – Results - Conclusions
Result of writting that little piece of code
34

35. Motivation – Requirements – State of the Art – Design – Results - Conclusions
Utilities: WebImage
WebImage ima(&getDemo());
ima.paintImage( ImageRGB );
35

36. Motivation – Requirements – State of the Art – Design – Results - Conclusions
Utilities: WebBibliography
●
New class to add a formatted bibliography
addBibliography(“author”,”title”,”publication”,”url”);
36

37. Motivation – Requirements – State of the Art – Design – Results - Conclusions
Demonstration
This is just a little example of what
could be done with Wt and the Web
Framework created in this project.
37

38. Motivation – Requirements – State of the Art – Design – Results - Conclusions
Conclusions
Index
●
Requirements fulfilled
●
Useful for the UPC image and video processing group
●
Future project about video demonstrations
38

39. Motivation – Requirements – State of the Art – Design – Results - Conclusions
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
Better resoults
than expected!
Everytihing is
in C++!
39

40. Motivation – Requirements – State of the Art – Design – Results - Conclusions
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
40

41. Motivation – Requirements – State of the Art – Design – Results - Conclusions
Video demonstrations
Wt works HTML 5 video tag
●
Future project:
GSTREAMER + WT + IMAGEPLUS
41

42. Questions?
All work done in a
Debian – Linux based environment
NX No-Machine
Eclipse IDE
Iceweasel & Google Chrome browsers
42