Changes

Jump to navigation Jump to search
no edit summary
Line 44: Line 44:  
'''What is the name of your project?'''
 
'''What is the name of your project?'''
   −
ImageViewer JS (port of ImageViewer activity)
+
Image Viewer/Processor JS
    
'''Describe your project in 10-20 sentences. What are you making? Who are you making it for, and why do they need it? What technologies (programming languages, etc.) will you be using?'''
 
'''Describe your project in 10-20 sentences. What are you making? Who are you making it for, and why do they need it? What technologies (programming languages, etc.) will you be using?'''
Line 69: Line 69:  
* It will have touch interface for the devices supporting touch technology.
 
* It will have touch interface for the devices supporting touch technology.
 
* The application will have a Plugin mechanism for adding further effects and features.
 
* The application will have a Plugin mechanism for adding further effects and features.
* The application will have a  “'''fun facts”''' or “ '''tutorial'''” section. In this section children will be introduced to the world of pixels. How pixels make an image and how they can be manipulated using the ImageViewer application. Each filter will be explained through description/ images/ animations.  This will encourage them to think out of the box and if their effects created through RGB data manipulation  are good enough they can create their own plugin!  The RGB/HSV controllers can explain how pixels values can be changed in an image. Incresing all RGB values with the same amount increases the brightness, taking average of RGB values can give grayscale effect, for advance filters like blur,sharpness, edge detection which use convolution filters, an input matrix (3*3)  will be made so that students can enter different weights and see the consequent result. All these will be accompanied by live examples explained thoroughly in the tutorial section. Reference links for further advance study will also be given. ( A demo of this can be seen in the prototype mentioned below)  
+
* The application will have a  “'''fun facts”''' or “ '''tutorial'''” section. In this section children will be introduced to the world of pixels. How pixels make an image and how they can be manipulated using the Image Viewer/Processor  application. Each filter will be explained through description/ images/ animations.  This will encourage them to think out of the box and if their effects created through RGB data manipulation  are good enough they can create their own plugin!  The RGB/HSV controllers can explain how pixels values can be changed in an image. Incresing all RGB values with the same amount increases the brightness, taking average of RGB values can give grayscale effect, for advance filters like blur,sharpness, edge detection which use convolution filters, an input matrix (3*3)  will be made so that students can enter different weights and see the consequent result. All these will be accompanied by live examples explained thoroughly in the tutorial section. Reference links for further advance study will also be given. ( A demo of this can be seen in the prototype mentioned below)  
 
* Documentation
 
* Documentation
   Line 81: Line 81:     
* The application will use HTML5, CSS and JavaScript
 
* The application will use HTML5, CSS and JavaScript
 +
* Most filters will be written from scratch  in javaScript so that they can be explained easily to the users.
 
* In JavaScript two libraries will be used –
 
* In JavaScript two libraries will be used –
 
+
# JQuery- for transitions ,and other events
1) JQuery- for transitions ,and other events
+
# Caman.JS- It is a predefined library for effects, It’ll be used only for much advanced effects and filters.
 
  −
2) Most filters will be written from scratch  in javaScript so that they can be explained easily to the users.
  −
 
  −
3) Caman.JS- It is a predefined library for effects, It’ll be used only for much advanced effects and filters.  
   
* The application will use Canvas 2d and not traditional SVG because canvas is best for pixel manipulation. Source (http://blogs.msdn.com/b/ie/archive/2011/04/22/thoughts-on-when-to-use-canvas-and-svg.aspx)                                                                                                                              <gallery>usecanvas.png  
 
* The application will use Canvas 2d and not traditional SVG because canvas is best for pixel manipulation. Source (http://blogs.msdn.com/b/ie/archive/2011/04/22/thoughts-on-when-to-use-canvas-and-svg.aspx)                                                                                                                              <gallery>usecanvas.png  
   Line 134: Line 131:  
   |
 
   |
 
Add  basic features -   
 
Add  basic features -   
# Fullscreen, orginal view   
+
# Fullscreen, original view   
 
# Crop, resize, rotate   
 
# Crop, resize, rotate   
 
# Start working on UI   
 
# Start working on UI   
# Key events   
+
# Keyboard events   
 
   
 
   
 
  |-
 
  |-
Line 222: Line 219:  
* I joined sugar labs a month back and from then I’m only concentrating on ImageViewer activity, I was considering to improve the original python imageviewer as a project but  since this time focus was on JavaScript and a port of imageviewer was required, I learned JavaScript and am determined to make a well designed, structured ImageViewer.
 
* I joined sugar labs a month back and from then I’m only concentrating on ImageViewer activity, I was considering to improve the original python imageviewer as a project but  since this time focus was on JavaScript and a port of imageviewer was required, I learned JavaScript and am determined to make a well designed, structured ImageViewer.
   −
* I have developed a '''prototype''' to show how the application flow will be and how its interface can look like.
+
* I have developed a '''prototype''' with '''two templates''' to show how the application flow will be and how its interface can look like.
 +
 
 +
    1)  http://github.com/Shreyanand/ImageViewerJS0
 +
        http://rawgit.com/Shreyanand/ImageViewerJS0/master/index.html
 +
   
 +
    2)  https://github.com/Shreyanand/ImageViewerJS
 +
        http://rawgit.com/Shreyanand/ImageViewerJS/master/index.html
 +
 
   −
      https://github.com/Shreyanand/ImageViewerJS
   
* Creativity- The project focuses on both the working code as well as the interface of the application equally, so like in my prototype the UI of the application can be made more attractive and child friendly.
 
* Creativity- The project focuses on both the working code as well as the interface of the application equally, so like in my prototype the UI of the application can be made more attractive and child friendly.
   Line 235: Line 238:  
* I’m familiar with submission, review, Github process
 
* I’m familiar with submission, review, Github process
   −
* I'm familiar with sugar environment, source code, activites
+
* I'm familiar with sugar environment, source code, activities
    
* I enjoy working with C,C++,java,Python, and JavaScript, HTML, CSS
 
* I enjoy working with C,C++,java,Python, and JavaScript, HTML, CSS
Line 261: Line 264:  
of the project. But taking it a step further, we have an opportunity to engage
 
of the project. But taking it a step further, we have an opportunity to engage
 
the learning in some powerful ideas as they engage in expression with images: exposing
 
the learning in some powerful ideas as they engage in expression with images: exposing
them to the inner workings of image processing, not just doing the work for them,
+
them to the inner workings of image processing, not just doing the work for them, can make the application of the tool a learning moment.
can make the application of the tool a learning moment.
      
'''Gonzalo Odiard'''
 
'''Gonzalo Odiard'''
Line 268: Line 270:  
The impact on SugarLabs community would be to have better tools to understand how the images are processed by the computer, and increase the possibilities of expression of kids.
 
The impact on SugarLabs community would be to have better tools to understand how the images are processed by the computer, and increase the possibilities of expression of kids.
   −
'''Tch'''
+
Email id: godiard@sugarlabs.org
 +
 
 +
'''Martin Abente Lahaye (tch)'''
    
The more quality tools we provide the better, image processing can be an interesting tool for expression, it has been proven with many commercial tools for the general public, why would it be different for kids  
 
The more quality tools we provide the better, image processing can be an interesting tool for expression, it has been proven with many commercial tools for the general public, why would it be different for kids  
 +
 +
Email id: tch@sugarlabs.org
    
'''What will you do if you get stuck on your project and your mentor isn't around?'''
 
'''What will you do if you get stuck on your project and your mentor isn't around?'''
44

edits

Navigation menu