Team GodFather's Paint With Shapes

Slides | Demo | Artistic Demo

JS UI&DOM TeamWork

Telerik Academy by Progress

Team Godfather Members

Name	TILS	GitHub
Антонио Димитров	Antonio.Dimitrov	AntonioDimitrov7
Ивайло Андонов	ivail0	ivailoAndonov
Мартин Йотов	martinyotov	MartinYotov
Миглена Петрова	Miglena_Petrova	MiglenaPetrova
Силвия Ботева	sboteva1	silweto7
Тодор Георгиев	Toshe7o	georgievtodor
Христо Тодоров	todorovh	shakuu

GitHub graphics

General Project Info

Paint With Shapes

• What's it all about ?

  • Shapes
  • sHaPes
  • SHapeS

• Project is split into a lot of different files to avoid commit conflicts

• Documentation .mds

  • Features
  • Shapes list todo
  • List of implemented functions by files
  • Utilizing GitHub's Issues

Used JS libraries

• Kinetic.js

  • layer management
  • shapes management

• JQuery

  • DOM manipulations
  • .animate()

• JQuery UI

  • .draggable()
  • .resizeable()

Layer Manager Screenshot

Layer Manager Features

• LayersManager

  • Each Kinetic.Layer() ( canvas ) is wrapped in an object with ID and Layer
  • Stored in an Array for ease of management

• Add new layer on top

  • Creates a new generic Layer
  • ID genererator function assigns unique ID
  • Updates List

• Remove any layer

  • Remove from Kinetic.Stage()
  • Remove from LayersManager

More Layer Manager Features

• Select current layer

  • Shapes are added to the currently active layer
  • Layers above the selected layer are invisible

• Flatten all layers - save as a single image

  • Move all existing shapes to bottom layer
  • Remove all existing layers ( except for the bottom one )

• Insert background layer from url

  • Loads an image from input url
  • Inserts it on a new layer
  • Inserts the new layer as a bottom layer

Shapes Screenshot

Shapes Features

• Create

  • Factory returns the correct shape
  • Each shape has a separate creation function
  • Assigns the currently selected fill color
  • Assigns a stroke color to differentiate the active shape from the already existing shapes
  • New shape exist in a temporary layer until it is committed to an existing layer

• Move

  • Arrow keys - 4 directions/ 5px step
  • Arrow UI buttons - 8 directions/ 5px step
  • Drag with mouse - free form

More Shapes Features

• Rotate

  • A/ D keys
  • Rotate UI buttons

• Scale

  • W/ S keys
  • -/ + UI buttons

• Alpha

  • Q/ E keys
  • -/ + UI buttons

Emoticons Screenshot

Emoticons

Color Picker Screenshot

Color Picker

Controls UI Screenshot

Controls UI Features

• Takes advantage of JQuery .animate()

• Scraps the need for a keyboard