44
edits
Changes
Jump to navigation
Jump to search
Line 1:
Line 1: − a Line 21:
Line 20: − '''My first language''' is Hindi. I’m fluent in English.+ Line 45:
Line 44: − ImageViewer JS (port of ImageViewer activity)+ Line 55:
Line 54: − 1) Crop, resize+ − + − 2) Control brightness, contrast, sharpness, noise etc.+ − + − 3) Apply effects like sepia ,grayscale ,vintage, lomo etc.+ − + − 4) RGB controllers. Three sliders for R, G, B, with which students can increase or decrease respective values of the pixels of the image. + − − 5) For convolution filters, we can have an input matrix(3*3) in which weights can be adjusted by the students. Line 72:
Line 69: − + − + − + − ''''''+ − + + + + + − 1) JQuery- for transitions ,and other events+ − − 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. Line 96:
Line 93: − + − + − − | Line 110:
Line 105: − + − + Line 119:
Line 114: − + Line 127:
Line 122: − + + Line 134:
Line 130: − Create the basic JavaScript to+ − <nowiki> </nowiki> load images ,basic features and UI + + + + Line 142:
Line 141: − + − <nowiki> </nowiki> advance, tutorials initiation + + + + + + Line 150:
Line 154: − + + + + + + Line 157:
Line 166: − + Line 164:
Line 173: − + − <nowiki> </nowiki> browsers, testing + + + Line 172:
Line 183: − + − <nowiki> </nowiki> and teachers, note the challenges faced and collect their feedback, enhance+ − <nowiki> </nowiki> tutorials. + Line 181:
Line 192: − + − <nowiki> </nowiki> the feedback, finalize + + + Line 189:
Line 202: − Clean up UI, Fix bugs, Write documentation + + Line 197:
Line 211: − + − Line 204:
Line 217: − + + + + + + + + + + + + + + + − + + − https://github.com/Shreyanand/ImageViewerJS+ − + − + + + − * I’m familiar with submission, review, Github process+ − * I’ve no prior experience with projects like this but I’m an enthusiastic programmer and I enjoy coding.+ − * I was rank 28 in my country in a programming competition organized by Institute of Electrical and Electronics Engineers ('''IEEE''') called IEEExtreme+ + + + + − * I enjoy working with C,C++,java,Python, and JavaScript+ + − == '''You and the community''' ==+ − '''If your project is successfully completed, what will its impact be on the Sugar Labs community? Give 3 answers, each 1-3 paragraphs in length. The first one should be yours. The other two should be answers from members of the Sugar Labs community, at least one of whom should be a Sugar Labs GSoC mentor. Provide email contact information for non-GSoC mentors.''' − + + + + + + + − ImageViewer activity is an important cog in the sugar labs machine, It provides a graphic visualization of content. No educational material is complete without Images and Imageviewer is an essential program to view them. Sugarlabs is creating web support for children who can’t afford a OLPC laptop, so Imageviewer in javascript running in any browser will help out to reach many more children who can benefit from sugar.This ImageViewer will have new child-friendly UI and many new exciting features.One of the most important benefits of this activity is that it will induce learning. Image processing is a vast field and many creative things can be done through it. My application will also '''focus on how children can understand pixel manipulation'''. Through this they can learn how filters actually work and they can create their own effects through RGB colour manipulation of pixels.+ − ______________________ mentor’s+ − thoughts______________________________________ − + − Getting stuck is not an option, If a problem occurs and my mentor isn’t around then+ − − 1)I'm sure there will always be willing developers from the sugar community who can − help − 2)IRCand mailing lists of sugar are a great way of asking doubts+ − 3)Internet is always a nonperishable source+ − 4)I’ve subscription to libraries if needed+ + − 5)I’ve friends and teachers in college who’ll be ready to help whenever I need+ − + + + Line 265:
Line 304: − === ===+ − + + + + + + + + + + + + +
Summer of Code/2015/ImageViewerJSshrey (view source)
Revision as of 05:34, 10 April 2015
, 05:34, 10 April 2015no edit summary
== '''About Me''' ==
== '''About Me''' ==
'''What is your first language? (We have mentors who speak multiple languages and can match you with one of them if you'd prefer.)'''
'''What is your first language? (We have mentors who speak multiple languages and can match you with one of them if you'd prefer.)'''
My first language is Hindi. I’m fluent in English.
'''Where are you located, and what hours (UTC) do you tend to work? (We also try to match mentors by general time zone if possible.)'''
'''Where are you located, and what hours (UTC) do you tend to work? (We also try to match mentors by general time zone if possible.)'''
'''What is the name of your project?'''
'''What is the name of your project?'''
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?'''
* It will be able to edit images, rotate, scale them.
* It will be able to edit images, rotate, scale them.
* It will have advanced image processing features such as
* It will have advanced image processing features such as
# Crop, resize
# Control brightness, contrast, sharpness, noise etc.
# RGB controllers. Three sliders for R, G, B, with which students can increase or decrease respective values of the pixels of the image.
# HSV controllers. Three sliders for H,S,V with which students can increase or decrease respective values of the pixels of the image.
# Apply effects like sepia ,grayscale ,vintage, removing red eye, lomo etc.
# For convolution filters, we can have an input matrix(3*3) in which weights can be adjusted by the students.
* It will have both mouse and key events. Example: zoom in can be achieved by clicking on icon and '+' key on the keyboard. Similarly others.
* It will support Slide show of images
* It will support Slide show of images
* 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 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
'''USER INTERFACE'''
'''LEARNER INTERFACE ( UI )'''
* The UI designed will be different from existing Python Imageviewer activity and will have '''Pedagogical significance. '''Children''' of ages young (3–5), mid-range (6–8), and older (9–12+) have different likings of UI of web apps as shown by studies. (source '''http://www.nngroup.com/articles/childrens-websites-usability-issues/ ) '''
* The learner interface designed will be different from existing Python Imageviewer activity and will have '''Pedagogical significance. '''Children''' of ages young (3–5), mid-range (6–8), and older (9–12+) have different likings of UI of web apps as shown by studies. (source '''http://www.nngroup.com/articles/childrens-websites-usability-issues/ ) '''
'''''
* '''A User Interface with bright colors, medium-large font will be designed appealing to the minds of all children belonging to all age group. '''
* '''A Learner Interface with bright colors, medium-large font will be designed appealing to the minds of all children belonging to all age group. '''
=== '''APPLICATION FRAMEWORK/LIBRARIES USED''' ===
=== '''APPLICATION FRAMEWORK/LIBRARIES USED''' ===
* 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
# 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
</gallery>
* The application will not use Webgl, instead it will use canvas 2D because for a small number of objects the difference is not much whereas canvas 2D is supported by more number of browsers. Source( https://developer.tizen.org/dev-guide/2.2.0/org.tizen.web.appprogramming/html/guide/w3c_guide/graphics_guide/performance_comparison.htm)
* The application will not use Webgl, instead it will use canvas 2D because for a small number of objects the difference is not much whereas canvas 2D is supported by more number of browsers. Source( https://developer.tizen.org/dev-guide/2.2.0/org.tizen.web.appprogramming/html/guide/w3c_guide/graphics_guide/performance_comparison.htm)
<br>
<br>
'''What is the timeline for development of your project? The Summer of Code work period is from May 25 - August 21 tell us what you will be working on each week. (As the summer goes on, you and your mentor will adjust your schedule, but it's good to have a plan at the beginning so you have an idea of where you're headed.) Note that you should probably plan to have something "working and 90% done" by the midterm evaluation (27 June); the last steps always take longer than you think, and we will consider cancelling projects which are not mostly working by then'''
'''What is the timeline for development of your project? The Summer of Code work period is from May 25 - August 21 tell us what you will be working on each week. (As the summer goes on, you and your mentor will adjust your schedule, but it's good to have a plan at the beginning so you have an idea of where you're headed.) Note that you should probably plan to have something "working and 90% done" by the midterm evaluation (27 June); the last steps always take longer than you think, and we will consider cancelling projects which are not mostly working by then'''
{| class="wikitable"
{|
|
'''WEEK'''
'''WEEK'''
|
|
Pre program week 1 – Discuss the
Pre program week 1 – Discuss the final
<nowiki> </nowiki> features required, libraries to be used, information to be shared
<nowiki> </nowiki> features required with my mentor walter, libraries to be used, any other information that is needed pertaining to the project
|-
|-
|
|
Work and Plan out the design of
Work and Plan out the design of
<nowiki> </nowiki> the application
<nowiki> </nowiki> the application, Cross browser compatible design and solutions
|-
|-
|
|
Create the structure
Create the structure
<nowiki> </nowiki> HTML,CSS (semester exams in college).
<nowiki> </nowiki> HTML,CSS ,Create JavaScript to
<nowiki> </nowiki> load images (semester exams in college).
|-
|-
|
|
Add basic features -
# Fullscreen, original view
# Crop, resize, rotate
# Start working on UI
# Keyboard events
|-
|-
|
|
Add features both basic and
Add advance features, filters-
# Grayscale
# Brightness
# Blur,sharpen
# Vintage,lomo etc
# Remove red eye
# Initiate tutorials
|-
|-
|
|
Plug in mechanism, touch interface
* Implement
# Plug in mechanism,
# Touch interface,
# Drag drop option,
# Save image
* Functioning application with almost all features will be ready.
|-
|-
|
|
Mid term Evaluation Buffer week
Mid term Evaluation Buffer week,
|-
|-
|
|
Check the code in multiple
# If required we can add extra features like framing an image, adding watermarks.
# Demo plugins
# Check the code in multiple browsers, cross browser compatibility
# Testing
|-
|-
|
|
Present the code in front of kids
# Enhance tutorials.
# Present the code in front of kids and teachers,
# Note the challenges faced and collect their feedback,
|-
|-
|
|
Make changes to code according to
# Make changes to code according to the feedback,
# Clean up UI,
# Fix bugs,
* Finalize
|-
|-
|
|
# Polish tutorials,
# Write documentation
|-
|-
|
|
Wrap up the complete work and
Wrap up the complete work and
<nowiki> </nowiki> submit the code for Final Evaluations
<nowiki> </nowiki> submit the code for Final Evaluations
|}
|}
* 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 ImgeViewer.
* 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''' 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
* 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.
* Optimization – I believe in creating code that is optimized to its best. A simple example: preloading images using image object of JavaScript instead of creating HTML image object. This helps in speeding up. Source( http://www.techrepublic.com/article/preloading-and-the-javascript-image-object). Small differences like these can go a long way. If such care is taken before
writing every line of code, a robust application can be created.
* I have developed a '''prototype''' to show how the application flow will be and how its interface can look like.
* I was rank 393 worldwide and 31 in my country in a programming competition organized by Institute of Electrical and Electronics Engineers ('''IEEE''') called IEEExtreme 2014. source ([http://www.ieee.org/membership_services/membership/students/competitions/xtreme/xtreme8ranking_country.pdf country India, name Bughunters])
* GSOC is top priority in summers, will work for around 45-50 hours a week and more if required.
* I’m familiar with submission, review, Github process
* 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.
* I'm familiar with sugar environment, source code, activities
* Optimization – I believe in creating code that is optimized to its best. A simple example : preloading images using image object of javascript instead of creating HTML img. This helps in speeding up. Source( http://www.techrepublic.com/article/preloading-and-the-javascript-image-object)
* I enjoy working with C,C++,java,Python, and JavaScript, HTML, CSS
== '''Me and the community''' ==
'''If your project is successfully completed, what will its impact be on the Sugar Labs community? Give 3 answers, each 1-3 paragraphs in length. The first one should be yours. The other two should be answers from members of the Sugar Labs community, at least one of whom should be a Sugar Labs GSoC mentor. Provide email contact information for non-GSoC mentors. '''
'''My thoughts:'''
The project will be completed successfully.
ImageViewer activity is an important cog in the sugar labs machine, It provides a graphical visualization of study material which reduces cognitive load and helps learners in managing their ideas and making connections between the information resources. Our brain defaults to images for words, when it can. We remember
images. We forget words. When kids first start to read, their brain tries to
<nowiki> </nowiki>interpret letters as images. Put several letters together and their brain
<nowiki> </nowiki>has to think through each individual letter as an image. At some point,
<nowiki> </nowiki>it reads combined letters and thinks of the image, instead of the word!
No educational material is complete without Images and Imageviewer is an essential program to view them. Sugarlabs is creating web support for children who can’t afford an OLPC laptop, so Imageviewer in javascript running in any browser will help out to reach many more children who can benefit from sugar.
This ImageViewer in JavaScript will have a new child-friendly learner interface and many new exciting features.One of the most important benefits of this activity is that it will induce learning. Image processing is a vast field and many creative things can be done through it. My application will '''also''' '''focus on how children can understand pixel manipulation'''. Through this they can learn how filters actually work and how they can create their own effects. Creativity has no bounds and when given the right tools one can create unimaginable art work.
'''Walter Bender'''
'''My thoughts:'''
Image is a core modality of human expression. But we have
few tools within Sugar to let the user manipulate images. Thus the importance
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
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.
'''Gonzalo Odiard'''
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.
Email id: godiard@sugarlabs.org
'''What will you do if you get stuck on your project and your mentor isn't around?'''
'''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
Email id: tch@sugarlabs.org
'''What will you do if you get stuck on your project and your mentor isn't around?'''
Getting stuck is not an option, If a problem occurs and my mentor isn’t around then
# I'm sure there will always be willing developers from the sugar community who can help
# IRC and mailing lists of sugar are a great way of asking doubts
it.
# Internet is always a nonperishable source
# I’ve subscription to libraries if needed
# I’ve friends and teachers in college who’ll be ready to help whenever I need it.
'''How do you propose you will be keeping the community informed of your progress and any problems or questions you might have over the course of the project?'''
'''How do you propose you will be keeping the community informed of your progress and any problems or questions you might have over the course of the project?'''
I’ve always been a keen learner . I like to explore new things. As a child I was always fascinated by how laws of nature worked in rhythm explained by simple mathematical formulas, Later in my life when I started coding, I realized it is nothing but a structure of logical statements just like how nature works. The fact that I can create anything in this virtual world encourages me to code.
I’ve always been a keen learner . I like to explore new things. As a child I was always fascinated by how laws of nature worked in rhythm explained by simple mathematical formulas, Later in my life when I started coding, I realized it is nothing but a structure of logical statements just like how nature works. The fact that I can create anything in this virtual world encourages me to code.
'''Is there anything else we should have asked you or anything else that we
[[Category:2015 GSoC applications]]
'''should know that might make us like you or your project more?'''''
I believe that educating children is
the most effective way in which one can make a difference in someone’s life and
from personal experience I find that teaching is a great way of clearing my own
concepts. While developing the prototype and demo tutorials of
this project a lot of my own doubts got cleared.
The whole process of preparing , researching and then making the GSOC project fosters so
much understanding and creativity and if the end product of the project is itself
a tool for learning then there’s nothing better than that. One of the reasons
for joining Sugar Labs was so that I could be a part of this learning
environment.[[Category:2015 GSoC applications]]
[[Category:ImageViewerJS]]
[[Category:ImageViewerJS]]