Interactive Image Processing Demos for the Web
2 likes785 views
The document outlines a project from the Terrassa Engineering School focused on creating interactive image processing demonstrations for the web using the 'ImagePlus' software development platform. It details the motivation, requirements, and design choices made to ensure global access without client-side plug-ins, while easy programming and interactivity were emphasized. The results included a functional web framework meeting the project's goals, with a future plan for video demonstrations.
![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](https://image.slidesharecdn.com/presentaciopfc-131129111756-phpapp02/85/Interactive-Image-Processing-Demos-for-the-Web-8-320.jpg)
![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](https://image.slidesharecdn.com/presentaciopfc-131129111756-phpapp02/85/Interactive-Image-Processing-Demos-for-the-Web-31-320.jpg)
Interactive Image Processing Demos for the Web
- 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