interactive image processing demos for the web
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:TRANSCRIPT
![Page 1: Interactive Image Processing Demos for the Web](https://reader034.vdocument.in/reader034/viewer/2022052601/559628d51a28aba05a8b47a3/html5/thumbnails/1.jpg)
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](https://reader034.vdocument.in/reader034/viewer/2022052601/559628d51a28aba05a8b47a3/html5/thumbnails/2.jpg)
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](https://reader034.vdocument.in/reader034/viewer/2022052601/559628d51a28aba05a8b47a3/html5/thumbnails/3.jpg)
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](https://reader034.vdocument.in/reader034/viewer/2022052601/559628d51a28aba05a8b47a3/html5/thumbnails/4.jpg)
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](https://reader034.vdocument.in/reader034/viewer/2022052601/559628d51a28aba05a8b47a3/html5/thumbnails/5.jpg)
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](https://reader034.vdocument.in/reader034/viewer/2022052601/559628d51a28aba05a8b47a3/html5/thumbnails/6.jpg)
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](https://reader034.vdocument.in/reader034/viewer/2022052601/559628d51a28aba05a8b47a3/html5/thumbnails/7.jpg)
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](https://reader034.vdocument.in/reader034/viewer/2022052601/559628d51a28aba05a8b47a3/html5/thumbnails/8.jpg)
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](https://reader034.vdocument.in/reader034/viewer/2022052601/559628d51a28aba05a8b47a3/html5/thumbnails/9.jpg)
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](https://reader034.vdocument.in/reader034/viewer/2022052601/559628d51a28aba05a8b47a3/html5/thumbnails/10.jpg)
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](https://reader034.vdocument.in/reader034/viewer/2022052601/559628d51a28aba05a8b47a3/html5/thumbnails/11.jpg)
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](https://reader034.vdocument.in/reader034/viewer/2022052601/559628d51a28aba05a8b47a3/html5/thumbnails/12.jpg)
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](https://reader034.vdocument.in/reader034/viewer/2022052601/559628d51a28aba05a8b47a3/html5/thumbnails/13.jpg)
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](https://reader034.vdocument.in/reader034/viewer/2022052601/559628d51a28aba05a8b47a3/html5/thumbnails/14.jpg)
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](https://reader034.vdocument.in/reader034/viewer/2022052601/559628d51a28aba05a8b47a3/html5/thumbnails/15.jpg)
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](https://reader034.vdocument.in/reader034/viewer/2022052601/559628d51a28aba05a8b47a3/html5/thumbnails/16.jpg)
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](https://reader034.vdocument.in/reader034/viewer/2022052601/559628d51a28aba05a8b47a3/html5/thumbnails/17.jpg)
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](https://reader034.vdocument.in/reader034/viewer/2022052601/559628d51a28aba05a8b47a3/html5/thumbnails/18.jpg)
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](https://reader034.vdocument.in/reader034/viewer/2022052601/559628d51a28aba05a8b47a3/html5/thumbnails/19.jpg)
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](https://reader034.vdocument.in/reader034/viewer/2022052601/559628d51a28aba05a8b47a3/html5/thumbnails/20.jpg)
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](https://reader034.vdocument.in/reader034/viewer/2022052601/559628d51a28aba05a8b47a3/html5/thumbnails/21.jpg)
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](https://reader034.vdocument.in/reader034/viewer/2022052601/559628d51a28aba05a8b47a3/html5/thumbnails/22.jpg)
22
Motivation – Requirements – State of the Art – Design – Results - Conclusions
![Page 23: Interactive Image Processing Demos for the Web](https://reader034.vdocument.in/reader034/viewer/2022052601/559628d51a28aba05a8b47a3/html5/thumbnails/23.jpg)
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](https://reader034.vdocument.in/reader034/viewer/2022052601/559628d51a28aba05a8b47a3/html5/thumbnails/24.jpg)
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](https://reader034.vdocument.in/reader034/viewer/2022052601/559628d51a28aba05a8b47a3/html5/thumbnails/25.jpg)
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](https://reader034.vdocument.in/reader034/viewer/2022052601/559628d51a28aba05a8b47a3/html5/thumbnails/26.jpg)
26
Web Interface
Motivation – Requirements – State of the Art – Design – Results - Conclusions
![Page 27: Interactive Image Processing Demos for the Web](https://reader034.vdocument.in/reader034/viewer/2022052601/559628d51a28aba05a8b47a3/html5/thumbnails/27.jpg)
27
Interface classes: Architecture
Motivation – Requirements – State of the Art – Design – Results - Conclusions
![Page 28: Interactive Image Processing Demos for the Web](https://reader034.vdocument.in/reader034/viewer/2022052601/559628d51a28aba05a8b47a3/html5/thumbnails/28.jpg)
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](https://reader034.vdocument.in/reader034/viewer/2022052601/559628d51a28aba05a8b47a3/html5/thumbnails/29.jpg)
29
Interface classes: Hierarchy
Motivation – Requirements – State of the Art – Design – Results - Conclusions
![Page 30: Interactive Image Processing Demos for the Web](https://reader034.vdocument.in/reader034/viewer/2022052601/559628d51a28aba05a8b47a3/html5/thumbnails/30.jpg)
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](https://reader034.vdocument.in/reader034/viewer/2022052601/559628d51a28aba05a8b47a3/html5/thumbnails/31.jpg)
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](https://reader034.vdocument.in/reader034/viewer/2022052601/559628d51a28aba05a8b47a3/html5/thumbnails/32.jpg)
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](https://reader034.vdocument.in/reader034/viewer/2022052601/559628d51a28aba05a8b47a3/html5/thumbnails/33.jpg)
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](https://reader034.vdocument.in/reader034/viewer/2022052601/559628d51a28aba05a8b47a3/html5/thumbnails/34.jpg)
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](https://reader034.vdocument.in/reader034/viewer/2022052601/559628d51a28aba05a8b47a3/html5/thumbnails/35.jpg)
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](https://reader034.vdocument.in/reader034/viewer/2022052601/559628d51a28aba05a8b47a3/html5/thumbnails/36.jpg)
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](https://reader034.vdocument.in/reader034/viewer/2022052601/559628d51a28aba05a8b47a3/html5/thumbnails/37.jpg)
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](https://reader034.vdocument.in/reader034/viewer/2022052601/559628d51a28aba05a8b47a3/html5/thumbnails/38.jpg)
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](https://reader034.vdocument.in/reader034/viewer/2022052601/559628d51a28aba05a8b47a3/html5/thumbnails/39.jpg)
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](https://reader034.vdocument.in/reader034/viewer/2022052601/559628d51a28aba05a8b47a3/html5/thumbnails/40.jpg)
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](https://reader034.vdocument.in/reader034/viewer/2022052601/559628d51a28aba05a8b47a3/html5/thumbnails/41.jpg)
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](https://reader034.vdocument.in/reader034/viewer/2022052601/559628d51a28aba05a8b47a3/html5/thumbnails/42.jpg)
42
Questions?
All work done in a Debian – Linux based environment
NX No-MachineEclipse IDE
Iceweasel & Google Chrome browsers