Summer of Code/2015/ImageViewerJSshrey - Revision history

Shrey at 09:34, 10 April 2015

2015-04-10T09:34:11Z

← Older revision		Revision as of 05:34, 10 April 2015
Line 219:		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.

Shrey at 18:30, 27 March 2015

2015-03-27T18:30:03Z

← Older revision		Revision as of 14:30, 27 March 2015
Line 258:		Line 258:
	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 265:		Line 264:
	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?'''

Shrey at 15:00, 27 March 2015

2015-03-27T15:00:24Z

← Older revision		Revision as of 11:00, 27 March 2015
Line 1:		Line 1:
	i
	== '''About Me''' ==		== '''About Me''' ==

Line 233:		Line 232:
	* 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

Shrey: /* About Me */

2015-03-27T14:59:23Z

About Me

← Older revision		Revision as of 10:59, 27 March 2015
Line 1:		Line 1:
			i
	== '''About Me''' ==		== '''About Me''' ==

Line 81:		Line 82:

	* 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 132:
	\|		\|
	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

	\|-		\|-

Shrey: /* About Me */

2015-03-27T14:00:18Z

About Me

← Older revision		Revision as of 10:00, 27 March 2015
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

Shrey at 21:55, 26 March 2015

2015-03-26T21:55:58Z

← Older revision		Revision as of 17:55, 26 March 2015
Line 275:		Line 275:

	Getting stuck is not an option, If a problem occurs and my mentor isn’t around then		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		# I'm sure there will always be willing developers from the sugar community who can help
	~~help~~
	# IRC and mailing lists of sugar are a great way of asking doubts		# IRC and mailing lists of sugar are a great way of asking doubts
	# Internet is always a nonperishable source		# Internet is always a nonperishable source

Shrey at 21:54, 26 March 2015

2015-03-26T21:54:15Z

← Older revision		Revision as of 17:54, 26 March 2015
Line 1:		Line 1:
	a

	i
	== '''About Me''' ==		== '''About Me''' ==

Line 23:		Line 20:
	'''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.		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.)'''
Line 137:		Line 134:
	\|		\|
	Add basic features -		Add basic features -
	# ~~fullscreen~~, orginal view		# Fullscreen, orginal view
	# ~~crop~~, resize, rotate		# Crop, resize, rotate
	# ~~start~~ working on UI		# Start working on UI
	# ~~mouse and key~~ events		# Key events

	\|-		\|-
Line 148:		Line 145:
	\|		\|
	Add advance features, filters-		Add advance features, filters-
	# ~~grayscale~~		# Grayscale
	# ~~brightness~~		# Brightness
	# ~~blur~~,sharpen		# Blur,sharpen
	# ~~vintage~~,lomo etc		# Vintage,lomo etc
	# ~~remove~~ red eye		# Remove red eye
	# ~~initiate~~ tutorials		# Initiate tutorials

	\|-		\|-
Line 162:		Line 159:
	* Implement		* Implement
	# Plug in mechanism,		# Plug in mechanism,
	# ~~touch~~ interface,		# Touch interface,
	# ~~drag~~ drop option,		# Drag drop option,
	# ~~save~~ image		# Save image
	* Functioning application with almost all features will be ready.		* Functioning application with almost all features will be ready.

Line 278:		Line 275:

	Getting stuck is not an option, If a problem occurs and my mentor isn’t around then		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
	1) I'm sure there will always be willing developers from the sugar community who can
	help		help
			# IRC and mailing lists of sugar are a great way of asking doubts
	2) IRC and mailing lists of sugar are a great way of asking doubts		# Internet is always a nonperishable source
			# I’ve subscription to libraries if needed
	3) Internet is always a nonperishable source		# I’ve friends and teachers in college who’ll be ready to help whenever I need it.

	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
	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?'''

Shrey: /* About Me */

2015-03-26T21:48:33Z

About Me

← Older revision		Revision as of 17:48, 26 March 2015
Line 1:		Line 1:
			a

			i
	== '''About Me''' ==		== '''About Me''' ==

Line 55:		Line 57:
	* 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
	1) Crop, resize		# Crop, resize
			# Control brightness, contrast, sharpness, noise etc.
	2) 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.
	3) ~~Apply effects like sepia~~ ,~~grayscale~~ ,~~vintage~~, ~~removing red eye, lomo etc~~.		# 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.
	~~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.
	* 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 have both mouse and key events. Example: zoom in can be achieved by clicking on icon and '+' key on the keyboard. Similarly others.

Line 73:		Line 72:
	* 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 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)
	* Documentation		* Documentation

Shrey at 15:58, 26 March 2015

2015-03-26T15:58:04Z

← Older revision		Revision as of 11:58, 26 March 2015
Line 76:		Line 76:
	* 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''' ===
Line 257:		Line 257:
	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.		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 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 how they can create their own effects. Creativity has no bounds and when given the right tools one can create unimaginable art work.		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'''		'''Walter Bender'''

Shrey at 11:36, 26 March 2015

2015-03-26T11:36:51Z

← Older revision		Revision as of 07:36, 26 March 2015
Line 59:		Line 59:
	2) Control brightness, contrast, sharpness, noise etc.		2) Control brightness, contrast, sharpness, noise etc.

	3) Apply effects like sepia ,grayscale ,vintage, lomo etc.		3) Apply effects like sepia ,grayscale ,vintage, removing red eye, 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.		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.		5) 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
Line 140:		Line 141:
	# crop, resize, rotate		# crop, resize, rotate
	# start working on UI		# start working on UI
			# mouse and key events

	\|-		\|-
Line 151:		Line 153:
	# blur,sharpen		# blur,sharpen
	# vintage,lomo etc		# vintage,lomo etc
			# remove red eye
	# initiate tutorials		# initiate tutorials

Line 177:		Line 180:

	\|		\|
	# ~~Add more~~ features ~~if required~~		# If required we can add extra features like framing an image, adding watermarks.
			# Demo plugins
	# Check the code in multiple browsers, cross browser compatibility		# Check the code in multiple browsers, cross browser compatibility
	# Testing		# Testing