Jump to content

GSoC/2020/StatusReports/SaurabhKumar: Difference between revisions

From KDE Community Wiki
Line 1: Line 1:
==Storyboard Docker For Krita==
==Storyboard Docker For Krita==
A storyboard is a graphic organizer that consists of illustrations and comments displayed in
===Project Overview===
sequence for the purpose of pre-visualizing and planning of motion picture and animation.
A storyboard is a graphic organizer that consists of illustrations and comments displayed in sequence for the purpose of pre-visualizing and planning of motion picture and animation. The project was to implement a docker in Krita that would use the existing animation API in Krita to facilitate storyboarding. Qt's MVC classes are used for storing and displaying the storyboard.  


===Introduction===
===Project Goals===
[[File:Storyboard.png|thumb|center|Storyboard docker]]
The requirements of the project can be broken down into the following goals:
* Implementing the basic MVC classes for the docker.
* Integrating relevant parts of Krita, namely the timeline docker and canvas, with the storyboard docker.
* Implementing functionalities to export storyboard as PDF and SVG.
* User documentation.


The storyboard docker aims to facilitate storyboarding in Krita. It allows multiple images and associated text to be organized in the form of a storyboard. The arrangement can be tweaked using the mode and view options. Also different field's visibility can be toggled. The storyboard can be rendered as pdf or svg.
The mockups prepared for the project:
===Upper buttons===
[[File:Storyboard upper buttons.png|thumb|center]]


The buttons are :
* Export : A drop down menu which consists of the export option available for the storyboard.


* Comment : A drop down menu which consists of a list of comments for storyboard items, a Delete Comment button and an Add Comment button.
===Relevant Code and Technical Pre-requisites===
[[File:Storyboard comment.png|thumb|center|Comment menu]]
====MVC classes====
Talk about MVC classes, comment and storyboard.


* Lock : A lock icon. It is used to stop adding item when keyframes are added in the Timeline docker.
====Krita's Anamtion API====
Say about Keyframe and keyframe channels.  
Talk about ANimationInterface
Talk about the syncing and addition of keyframes.


* Arrange : A properties icon. It consists of View and Mode options which can be used to change the arrangement of items in the docker.
===Work Report===
[[File:Arrange menu.png|thumb|center|Arrange menu]]
====Implementing the MVC classes for the docker====
=====Week -1 =====
I started a few weeks early, to cover up for any unprecedented events due to ongoing COVID-19 crisis. This week I added the storyboard docker to Krita's plugin system and implemented the tool-buttons at the top of the docker and the menu related to those buttons. I implemented the CommentModel class to manage the comment tool-button's menu. The memebers of this menu would be part of the storyboard items that would be part of the storyboard model. I also started implemented the StoryboardModel class. (Commits :[https://invent.kde.org/graphics/krita/-/merge_requests/392/diffs?commit_id=8736fd9f3b5c9d718534b41171bcba9d581688e8 1])


===Storyboard Item===
[https://confifu.wordpress.com/2020/05/25/week-1-gsoc-project-report/ Blog post]
A Storyboard Item corresponds to a single panel in the storyboard. You can edit fields such as name, duration and comments.  You can select the active item. You can add and delete storyboard items before or after any item. You can change the order of items using Drag and Drop.


Components of the storyboard item :
=====Week 0=====
* Frame Number : This shows the frame number for this item in the timeline docker. This field is uneditable.
I implemented the delegate class for the CommentModel. I also added a visibility property to members of the CommentModel. This property is shown as an eye icon which can be toggled by clicking. I also implemented the StoryboardItem class that makes up the data of the StoryboardModel and implemented functions in StoryboardModel to manage that data. (Commits : [https://invent.kde.org/graphics/krita/-/merge_requests/379/diffs?commit_id=b40df7599478cf6d4e40dcb31ee8533fd8761193 2], [https://invent.kde.org/graphics/krita/-/merge_requests/379/diffs?commit_id=35118443147f2d5d0e08bc738a706099ca3cba74 6])


* Name : The item name, just do double- mouseleft to make it editable, and press the Enter key to finish editing.
Also I implemented unit-tests for the CommentModel, StoryboardModel and the interactions between those classes.(Commits: [https://invent.kde.org/graphics/krita/-/merge_requests/379/diffs?commit_id=ef7901228522ef2f188c038a7a3d32c4f465f034 3],  
[https://invent.kde.org/graphics/krita/-/merge_requests/379/diffs?commit_id=d2d9a16b12f515018f5d9aa1382da22204545d35 4], [https://invent.kde.org/graphics/krita/-/merge_requests/379/diffs?commit_id=df876054e3031237d7cc5b7c2ad614951d756470 5])


* Duration in second : A spin-box. This will set the duration of the storyboard item in seconds.
[https://confifu.wordpress.com/2020/06/02/week-0-gsoc-project-report/ Blog post]


* Duration in frame : A spin-box. This will set the duration of the storyboard item in seconds.
=====Week 1=====


* Thumbnail : A thumbnail version of the canvas. Unlike the comments it cannot be edited inside, it show the changes made to the canvas with some delay.


* Add Item : A plus icon on the lower left corner of the thumbnail. It Adds a storyboard item after the duration of the current item. The new item will have the minimal possible duration, i.e. 0s1f.


* Delete Item : A bin icon on the lower right corner of the thumbnail. It Deletes the current storyboard item. Although it does not delete the keyframes at the item's frame.
===Introduction===
[[File:Storyboard.png|thumb|center|Storyboard docker]]


* Comment Name : Name of the comment field. This field is not editable directly but can be edited from the Comment menu.
The storyboard docker aims to facilitate storyboarding in Krita. It allows multiple images and associated text to be organized in the form of a storyboard. The arrangement can be tweaked using the mode and view options. Also different field's visibility can be toggled. The storyboard can be rendered as pdf or svg.


* Comment Field : The comment's content. It can be edited by double clicking.
[[File:Storyboard upper buttons.png|thumb|center]]


===Storyboard View and Modes===
[[File:Storyboard comment.png|thumb|center|Comment menu]]


The View and Mode options are available in storyboard docker in the Arrange menu. These options allow you to arrange the panels in the storyboard.
[[File:Arrange menu.png|thumb|center|Arrange menu]]


====View====
These options allow you to choose which parts of the panel to show in the docker.
* Thumbnail Only : Only the thumbnail part of the panel is visible.
[[File:Storyboard thumbnail only view.png|thumb|center]]
[[File:Storyboard thumbnail only view.png|thumb|center]]


* Comments Only : Only the comments part of the panel are visible.
[[File:Storyboard comment only view.png|thumb|center]]
[[File:Storyboard comment only view.png|thumb|center]]


* All : All of the panel is visible.
[[File:Storyboard grid mode.png|thumb|center]]
[[File:Storyboard grid mode.png|thumb|center]]


====Mode====
These options allow you to choose the orientation of the items in the docker.
* Row : Panels are arranged in a row-wise fashion. The panels’ orientation is horizontal in this mode. That means panels are on the sides of thumbnails rather than below.
[[File:Storyboard row mode.png|thumb|center]]
[[File:Storyboard row mode.png|thumb|center]]


* Column : Panels are arranged in column-wise fashion. The panels’ orientation is vertical.
[[File:Storyboard column mode.png|thumb|center]]
[[File:Storyboard column mode.png|thumb|center]]


* Grid : Panels are arranged in a grid. Also if you change the size of the docker, the grid is rearranged to accomodate more panels in the docker.
[[File:Storyboard grid mode.png|thumb|center]]
[[File:Storyboard grid mode.png|thumb|center]]
===Exporting Storyboard===
The storyboard created using the docker can be exported to PDF or SVG documents. The Export menu offers options to export storyboard. It has options to export as either PDF or SVG document. Choosing any of the option will take you to the Export Dialog where you can choose the layout, that is, how panels of the storyboard are arranged in the exported document. The Export dialog lets you choose the panels to export and offers some options to specify the layout. You can either choose the layout using custom options provided or using an SVG file.
You can choose the range using the frame number of storyboard panel. The first two options in the dialog let you choose the first and last frame to export. All panels that have frame number in that range(inclusive of both the first and last) would be exported. There is also an option to choose the font size of any text on the document, such as panels’ name, duration or the comments.
====Specifying layout using custom options====
The following options are provided to specify layout :
* Rows per page
* Columns per page
* Page Size
* Page Orientation


[[File:Storyboard custom options.png|center]]
[[File:Storyboard custom options.png|center]]
====Specifying Layout using SVG file====
For specifying layout using an SVG file you have to upload an SVG file. The file should have one or more non-overlapping rectangles.


[[File:Storyboard SVG layout.png|center]]
[[File:Storyboard SVG layout.png|center]]


====File name for Export document====
* PDF : Choose the filename of the export document.
* SVG : Choose the directory where you want to save the exported files and a base name. The exported files will be named baseName followed by a numerical suffix. e.g. base0, base1 etc.
[[File:Storyboard export file.png|center]]
[[File:Storyboard export file.png|center]]



Revision as of 13:06, 25 August 2020

Storyboard Docker For Krita

Project Overview

A storyboard is a graphic organizer that consists of illustrations and comments displayed in sequence for the purpose of pre-visualizing and planning of motion picture and animation. The project was to implement a docker in Krita that would use the existing animation API in Krita to facilitate storyboarding. Qt's MVC classes are used for storing and displaying the storyboard.

Project Goals

The requirements of the project can be broken down into the following goals:

  • Implementing the basic MVC classes for the docker.
  • Integrating relevant parts of Krita, namely the timeline docker and canvas, with the storyboard docker.
  • Implementing functionalities to export storyboard as PDF and SVG.
  • User documentation.

The mockups prepared for the project:


Relevant Code and Technical Pre-requisites

MVC classes

Talk about MVC classes, comment and storyboard.

Krita's Anamtion API

Say about Keyframe and keyframe channels. Talk about ANimationInterface Talk about the syncing and addition of keyframes.

Work Report

Implementing the MVC classes for the docker

Week -1

I started a few weeks early, to cover up for any unprecedented events due to ongoing COVID-19 crisis. This week I added the storyboard docker to Krita's plugin system and implemented the tool-buttons at the top of the docker and the menu related to those buttons. I implemented the CommentModel class to manage the comment tool-button's menu. The memebers of this menu would be part of the storyboard items that would be part of the storyboard model. I also started implemented the StoryboardModel class. (Commits :1)

Blog post

Week 0

I implemented the delegate class for the CommentModel. I also added a visibility property to members of the CommentModel. This property is shown as an eye icon which can be toggled by clicking. I also implemented the StoryboardItem class that makes up the data of the StoryboardModel and implemented functions in StoryboardModel to manage that data. (Commits : 2, 6)

Also I implemented unit-tests for the CommentModel, StoryboardModel and the interactions between those classes.(Commits: 3, 4, 5)

Blog post

Week 1

Introduction

Storyboard docker

The storyboard docker aims to facilitate storyboarding in Krita. It allows multiple images and associated text to be organized in the form of a storyboard. The arrangement can be tweaked using the mode and view options. Also different field's visibility can be toggled. The storyboard can be rendered as pdf or svg.

Comment menu
Arrange menu


Deliverables