Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Interactive Image Processing
demonstrations for the web

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

Author: Marcel T...
Motivation – Requirements – State of the Art – Design – Results - Conclusions

Motivation
Context

UPC Image and Video
Pro...
Motivation – Requirements – State of the Art – Design – Results - Conclusions

Motivation
Index
●

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

Showing algorithms
External users
UPC image...
Motivation – Requirements – State of the Art – Design – Results - Conclusions

Internal Users
●

Detecting possible bugs i...
Motivation – Requirements – State of the Art – Design – Results - Conclusions

Requirements
Index
●

Global access

●

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

Global access
Internet is the best way to t...
Motivation – Requirements – State of the Art – Design – Results - Conclusions

Minimum web technology
The more technology,...
Motivation – Requirements – State of the Art – Design – Results - Conclusions

No plug-ins in the client

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

Easy for programmers
●

Simple way to creat...
Motivation – Requirements – State of the Art – Design – Results - Conclusions

Interactive demos
Interactivity is very imp...
Motivation – Requirements – State of the Art – Design – Results - Conclusions

Documentation
●

Afterwards, developers hav...
Motivation – Requirements – State of the Art – Design – Results - Conclusions

State of the art
Index
●

How to demonstrat...
Motivation – Requirements – State of the Art – Design – Results - Conclusions

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

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

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

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

How to demonstrate image processing
Image P...
Motivation – Requirements – State of the Art – Design – Results - Conclusions

Image Processing in the
client side: Javasc...
Motivation – Requirements – State of the Art – Design – Results - Conclusions

Design
Index
●

Possible scheme

●

Looking...
Possible scheme
ImagePlus
ImagePlus

ImagePlus
ImagePlus
tools
tools

Saving
files in
disc?

Web
Web

It really is a way, ...
Motivation – Requirements – State of the Art – Design – Results - Conclusions

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

Looking for the right technology
Wt, the wi...
Motivation – Requirements – State of the Art – Design – Results - Conclusions

Wt main approach:
Breaking the Client-Serve...
Motivation – Requirements – State of the Art – Design – Results - Conclusions

Final scheme of the application

HTML

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

Web Interface

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

Interface classes: Architecture

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

Wt basics vs HTML basics
HTML

Wt

<div>

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

Interface classes: Hierarchy

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

One application, one demo
One demo
Tries pe...
Motivation – Requirements – State of the Art – Design – Results - Conclusions

Desktop vs Web
Nowadays, with high connecti...
Motivation – Requirements – State of the Art – Design – Results - Conclusions

Results
Index
●

Framework
●

Classes

●

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

Framework
●

The main result of my project
...
Motivation – Requirements – State of the Art – Design – Results - Conclusions

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

Utilities: WebImage

WebImage ima(&getDemo(...
Motivation – Requirements – State of the Art – Design – Results - Conclusions

Utilities: WebBibliography
●

New class to ...
Motivation – Requirements – State of the Art – Design – Results - Conclusions

Demonstration

This is just a little exampl...
Motivation – Requirements – State of the Art – Design – Results - Conclusions

Conclusions
Index
●

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

Requirements fulfilled
Going back to the re...
Motivation – Requirements – State of the Art – Design – Results - Conclusions

Useful for the UPC image and
video processi...
Motivation – Requirements – State of the Art – Design – Results - Conclusions

Video demonstrations
Wt works HTML 5 video ...
Questions?
All work done in a
Debian – Linux based environment
NX No-Machine
Eclipse IDE
Iceweasel & Google Chrome browser...
Upcoming SlideShare
Loading in …5
×

Interactive Image Processing Demos for the Web

604 views

Published on

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:

Published in: Technology
  • Be the first to comment

Interactive Image Processing Demos for the Web

  1. 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. 2. Motivation – Requirements – State of the Art – Design – Results - Conclusions Motivation Context UPC Image and Video Processing Group ImagePlus Software development platform 2
  3. 3. Motivation – Requirements – State of the Art – Design – Results - Conclusions Motivation Index ● Showing the algorithms ● External Users ● Internal users 3
  4. 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. 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. 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. 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. 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. 9. Motivation – Requirements – State of the Art – Design – Results - Conclusions No plug-ins in the client 9
  10. 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. 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. 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. 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. 14. Motivation – Requirements – State of the Art – Design – Results - Conclusions How to demonstrate image processing Exposing the source code 14
  15. 15. Motivation – Requirements – State of the Art – Design – Results - Conclusions How to demonstrate image processing Explaining them step by step with pictures 15
  16. 16. Motivation – Requirements – State of the Art – Design – Results - Conclusions How to demonstrate image processing Making videos 16
  17. 17. Motivation – Requirements – State of the Art – Design – Results - Conclusions How to demonstrate image processing 30 days trial 17
  18. 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. 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. 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. 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. 22. Motivation – Requirements – State of the Art – Design – Results - Conclusions 22
  23. 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. 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. 25. Motivation – Requirements – State of the Art – Design – Results - Conclusions Final scheme of the application HTML Wt Web Framework & Web Utilities ImagePlus 25
  26. 26. Motivation – Requirements – State of the Art – Design – Results - Conclusions Web Interface 26
  27. 27. Motivation – Requirements – State of the Art – Design – Results - Conclusions Interface classes: Architecture 27
  28. 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. 29. Motivation – Requirements – State of the Art – Design – Results - Conclusions Interface classes: Hierarchy 29
  30. 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. 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. 32. Motivation – Requirements – State of the Art – Design – Results - Conclusions Results Index ● Framework ● Classes ● Utilities ● ● ● WebImage WebBibliography Demo 32
  33. 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. 34. Motivation – Requirements – State of the Art – Design – Results - Conclusions Result of writting that little piece of code 34
  35. 35. Motivation – Requirements – State of the Art – Design – Results - Conclusions Utilities: WebImage WebImage ima(&getDemo()); ima.paintImage( ImageRGB ); 35
  36. 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. 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. 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. 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. 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. 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. 42. Questions? All work done in a Debian – Linux based environment NX No-Machine Eclipse IDE Iceweasel & Google Chrome browsers 42

×