Interactive Image Processing demonstrations for the web · 39 Requirements fulfilled Going back to...
Transcript of Interactive Image Processing demonstrations for the web · 39 Requirements fulfilled Going back to...
![Page 1: Interactive Image Processing demonstrations for the web · 39 Requirements fulfilled Going back to the requirements we can see that all requirements are fulfilled. Global access One](https://reader034.fdocuments.us/reader034/viewer/2022050522/5fa5942e7415de13e6306ced/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 demonstrations for the web · 39 Requirements fulfilled Going back to the requirements we can see that all requirements are fulfilled. Global access One](https://reader034.fdocuments.us/reader034/viewer/2022050522/5fa5942e7415de13e6306ced/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 demonstrations for the web · 39 Requirements fulfilled Going back to the requirements we can see that all requirements are fulfilled. Global access One](https://reader034.fdocuments.us/reader034/viewer/2022050522/5fa5942e7415de13e6306ced/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 demonstrations for the web · 39 Requirements fulfilled Going back to the requirements we can see that all requirements are fulfilled. Global access One](https://reader034.fdocuments.us/reader034/viewer/2022050522/5fa5942e7415de13e6306ced/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 demonstrations for the web · 39 Requirements fulfilled Going back to the requirements we can see that all requirements are fulfilled. Global access One](https://reader034.fdocuments.us/reader034/viewer/2022050522/5fa5942e7415de13e6306ced/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 demonstrations for the web · 39 Requirements fulfilled Going back to the requirements we can see that all requirements are fulfilled. Global access One](https://reader034.fdocuments.us/reader034/viewer/2022050522/5fa5942e7415de13e6306ced/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 demonstrations for the web · 39 Requirements fulfilled Going back to the requirements we can see that all requirements are fulfilled. Global access One](https://reader034.fdocuments.us/reader034/viewer/2022050522/5fa5942e7415de13e6306ced/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 demonstrations for the web · 39 Requirements fulfilled Going back to the requirements we can see that all requirements are fulfilled. Global access One](https://reader034.fdocuments.us/reader034/viewer/2022050522/5fa5942e7415de13e6306ced/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 demonstrations for the web · 39 Requirements fulfilled Going back to the requirements we can see that all requirements are fulfilled. Global access One](https://reader034.fdocuments.us/reader034/viewer/2022050522/5fa5942e7415de13e6306ced/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 demonstrations for the web · 39 Requirements fulfilled Going back to the requirements we can see that all requirements are fulfilled. Global access One](https://reader034.fdocuments.us/reader034/viewer/2022050522/5fa5942e7415de13e6306ced/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 demonstrations for the web · 39 Requirements fulfilled Going back to the requirements we can see that all requirements are fulfilled. Global access One](https://reader034.fdocuments.us/reader034/viewer/2022050522/5fa5942e7415de13e6306ced/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 demonstrations for the web · 39 Requirements fulfilled Going back to the requirements we can see that all requirements are fulfilled. Global access One](https://reader034.fdocuments.us/reader034/viewer/2022050522/5fa5942e7415de13e6306ced/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 demonstrations for the web · 39 Requirements fulfilled Going back to the requirements we can see that all requirements are fulfilled. Global access One](https://reader034.fdocuments.us/reader034/viewer/2022050522/5fa5942e7415de13e6306ced/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 demonstrations for the web · 39 Requirements fulfilled Going back to the requirements we can see that all requirements are fulfilled. Global access One](https://reader034.fdocuments.us/reader034/viewer/2022050522/5fa5942e7415de13e6306ced/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 demonstrations for the web · 39 Requirements fulfilled Going back to the requirements we can see that all requirements are fulfilled. Global access One](https://reader034.fdocuments.us/reader034/viewer/2022050522/5fa5942e7415de13e6306ced/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 demonstrations for the web · 39 Requirements fulfilled Going back to the requirements we can see that all requirements are fulfilled. Global access One](https://reader034.fdocuments.us/reader034/viewer/2022050522/5fa5942e7415de13e6306ced/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 demonstrations for the web · 39 Requirements fulfilled Going back to the requirements we can see that all requirements are fulfilled. Global access One](https://reader034.fdocuments.us/reader034/viewer/2022050522/5fa5942e7415de13e6306ced/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 demonstrations for the web · 39 Requirements fulfilled Going back to the requirements we can see that all requirements are fulfilled. Global access One](https://reader034.fdocuments.us/reader034/viewer/2022050522/5fa5942e7415de13e6306ced/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 demonstrations for the web · 39 Requirements fulfilled Going back to the requirements we can see that all requirements are fulfilled. Global access One](https://reader034.fdocuments.us/reader034/viewer/2022050522/5fa5942e7415de13e6306ced/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 demonstrations for the web · 39 Requirements fulfilled Going back to the requirements we can see that all requirements are fulfilled. Global access One](https://reader034.fdocuments.us/reader034/viewer/2022050522/5fa5942e7415de13e6306ced/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 demonstrations for the web · 39 Requirements fulfilled Going back to the requirements we can see that all requirements are fulfilled. Global access One](https://reader034.fdocuments.us/reader034/viewer/2022050522/5fa5942e7415de13e6306ced/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 demonstrations for the web · 39 Requirements fulfilled Going back to the requirements we can see that all requirements are fulfilled. Global access One](https://reader034.fdocuments.us/reader034/viewer/2022050522/5fa5942e7415de13e6306ced/html5/thumbnails/22.jpg)
22
Motivation – Requirements – State of the Art – Design – Results - Conclusions
![Page 23: Interactive Image Processing demonstrations for the web · 39 Requirements fulfilled Going back to the requirements we can see that all requirements are fulfilled. Global access One](https://reader034.fdocuments.us/reader034/viewer/2022050522/5fa5942e7415de13e6306ced/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 demonstrations for the web · 39 Requirements fulfilled Going back to the requirements we can see that all requirements are fulfilled. Global access One](https://reader034.fdocuments.us/reader034/viewer/2022050522/5fa5942e7415de13e6306ced/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 demonstrations for the web · 39 Requirements fulfilled Going back to the requirements we can see that all requirements are fulfilled. Global access One](https://reader034.fdocuments.us/reader034/viewer/2022050522/5fa5942e7415de13e6306ced/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 demonstrations for the web · 39 Requirements fulfilled Going back to the requirements we can see that all requirements are fulfilled. Global access One](https://reader034.fdocuments.us/reader034/viewer/2022050522/5fa5942e7415de13e6306ced/html5/thumbnails/26.jpg)
26
Web Interface
Motivation – Requirements – State of the Art – Design – Results - Conclusions
![Page 27: Interactive Image Processing demonstrations for the web · 39 Requirements fulfilled Going back to the requirements we can see that all requirements are fulfilled. Global access One](https://reader034.fdocuments.us/reader034/viewer/2022050522/5fa5942e7415de13e6306ced/html5/thumbnails/27.jpg)
27
Interface classes: Architecture
Motivation – Requirements – State of the Art – Design – Results - Conclusions
![Page 28: Interactive Image Processing demonstrations for the web · 39 Requirements fulfilled Going back to the requirements we can see that all requirements are fulfilled. Global access One](https://reader034.fdocuments.us/reader034/viewer/2022050522/5fa5942e7415de13e6306ced/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 demonstrations for the web · 39 Requirements fulfilled Going back to the requirements we can see that all requirements are fulfilled. Global access One](https://reader034.fdocuments.us/reader034/viewer/2022050522/5fa5942e7415de13e6306ced/html5/thumbnails/29.jpg)
29
Interface classes: Hierarchy
Motivation – Requirements – State of the Art – Design – Results - Conclusions
![Page 30: Interactive Image Processing demonstrations for the web · 39 Requirements fulfilled Going back to the requirements we can see that all requirements are fulfilled. Global access One](https://reader034.fdocuments.us/reader034/viewer/2022050522/5fa5942e7415de13e6306ced/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 demonstrations for the web · 39 Requirements fulfilled Going back to the requirements we can see that all requirements are fulfilled. Global access One](https://reader034.fdocuments.us/reader034/viewer/2022050522/5fa5942e7415de13e6306ced/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 demonstrations for the web · 39 Requirements fulfilled Going back to the requirements we can see that all requirements are fulfilled. Global access One](https://reader034.fdocuments.us/reader034/viewer/2022050522/5fa5942e7415de13e6306ced/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 demonstrations for the web · 39 Requirements fulfilled Going back to the requirements we can see that all requirements are fulfilled. Global access One](https://reader034.fdocuments.us/reader034/viewer/2022050522/5fa5942e7415de13e6306ced/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 demonstrations for the web · 39 Requirements fulfilled Going back to the requirements we can see that all requirements are fulfilled. Global access One](https://reader034.fdocuments.us/reader034/viewer/2022050522/5fa5942e7415de13e6306ced/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 demonstrations for the web · 39 Requirements fulfilled Going back to the requirements we can see that all requirements are fulfilled. Global access One](https://reader034.fdocuments.us/reader034/viewer/2022050522/5fa5942e7415de13e6306ced/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 demonstrations for the web · 39 Requirements fulfilled Going back to the requirements we can see that all requirements are fulfilled. Global access One](https://reader034.fdocuments.us/reader034/viewer/2022050522/5fa5942e7415de13e6306ced/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 demonstrations for the web · 39 Requirements fulfilled Going back to the requirements we can see that all requirements are fulfilled. Global access One](https://reader034.fdocuments.us/reader034/viewer/2022050522/5fa5942e7415de13e6306ced/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 demonstrations for the web · 39 Requirements fulfilled Going back to the requirements we can see that all requirements are fulfilled. Global access One](https://reader034.fdocuments.us/reader034/viewer/2022050522/5fa5942e7415de13e6306ced/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 demonstrations for the web · 39 Requirements fulfilled Going back to the requirements we can see that all requirements are fulfilled. Global access One](https://reader034.fdocuments.us/reader034/viewer/2022050522/5fa5942e7415de13e6306ced/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 demonstrations for the web · 39 Requirements fulfilled Going back to the requirements we can see that all requirements are fulfilled. Global access One](https://reader034.fdocuments.us/reader034/viewer/2022050522/5fa5942e7415de13e6306ced/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 demonstrations for the web · 39 Requirements fulfilled Going back to the requirements we can see that all requirements are fulfilled. Global access One](https://reader034.fdocuments.us/reader034/viewer/2022050522/5fa5942e7415de13e6306ced/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 demonstrations for the web · 39 Requirements fulfilled Going back to the requirements we can see that all requirements are fulfilled. Global access One](https://reader034.fdocuments.us/reader034/viewer/2022050522/5fa5942e7415de13e6306ced/html5/thumbnails/42.jpg)
42
Questions?
All work done in a Debian – Linux based environment
NX No-MachineEclipse IDE
Iceweasel & Google Chrome browsers