antrikshmisri's Blog

Google Summer of Code Final Work Product

antrikshmisri
Published: 08/23/2021

gsoc fury

Google Summer of Code 2021 Final Work Product

Proposed Objectives

  • Add support for Layouts in UI elements
  • Add support for Horizontal Layout
  • Add support for Vertical Layout
  • Add support for Layout along X, Y, Z axes.
  • Stretch Goals:
    • Add Tree2D UI element to the UI sub-module
    • Add Accordion2D UI element to the UI sub-module
    • Add SpinBox2D UI element to the UI sub-module

Objectives Completed

  • Add support for Horizontal Layout

    Added support for Horizontal Layout in the layout module. This layout allows the user to stack actors in a horizontal fashion. Primarilty, should be used for laying out UI elements as there is no meaning of horizontal/vertical in 3D space.

    Pull Requests:

  • Add support for Vertical Layout

    Added support for Vertical Layout in the layout module. This layout allows the user to stack actors in a vertical fashion. Primarilty, should be used for laying out UI elements as there is no meaning of horizontal/vertical in 3D space.

    Pull Requests:

  • Add support for Layout along X, Y, Z axes

    Added support for Layout along x, y, z axes. Allows user to layout different actors along any given axes. Also allows users to switch the stacking order by passing a axis+ or axis- to the constructor.

    Pull Requests:

  • Add Tree2D UI element to the UI sub-module

    Added Tree2D UI element to the UI sub-module. This allows user to visualize some data in a hierarchical fashion. Each node inside the tree can have N child nodes and the depth can be infinite. Each node can be clicked to trigger a user defined callback to perform some action. Tests and two demos were added for this UI element. Below is a screenshot for reference:-

    tree2d

    Pull Requests:

  • Add Accordion2D UI element to the UI sub-module

    Added Accordion2D to the UI sub-module. This Ui element allows users to visulize data in a tree with depth of one. Each node has a title and a content panel. The children for each node can be N if and only if the children are not nodes themselves. The child UIs can be placed inside the content panel by passing some coordinates, which can be absolute or normalized w.r.t the node content panel size. Tests and two demos were added for this UI element. Below is a screenshot for reference:-

    accordion2d

    Pull Requests:

Objectives in Progress

  • Add support for Layout in UI elements

    Currently all the available layouts are only available for actors i.e. of type vtkActor2D. In order to add support for the layouts in UI elements there needs to be some tweaking in the base Layout class. Currently, the PR that adds these functionalities in stalling because of some circular imports. These will hopefully be fixed soon and as soon as the circular imports are fixed, the PR will be merged.

    Pull Requests:

  • Method to process and load sprite sheets

    This method adds support for loading and processing a sprite sheet. This will be very useful in playing animations from a n*m sprite sheet. This also has a flag to convert the processed chunks into vtkimageData which can be directly used to update the texture in some UI elements. The primary use of this method will in a tutorial for Card2D, wherein, the image panel of the card will play the animation directly from the sprite sheet.

    Pull Requests:

Other Objectives

  • Add Card2D UI element to UI sub-module

    Added Card2D UI element to the UI sub-module. A Card2D is generally divided into two parts i.e. the image content and the text content. This version of card has an image which can be fetched from a URL and the text content which is yet again divided into two parts i.e. the title and the body. The space distribution between the image and the text content is decided by a float between 0 and 1. A value of 0 means the image takes up no space and a value of 1 means the image consumes the whole space. Below is a demonstration:-

    Pull Requests:

  • Resize Panel2D with WindowResizeEvent or from corner placeholder

    Currently, the size of the Panel2D is static and cannot be changed dynamically. The size is passed in during the initialization and cannot be changed easily at runtime. This PR adds support for resizing the Panel2D dynamically by adding a placeholder icon at the bottom right corner of the panel. This icon canbe click and dragged on to change the size accordingly. Other than this, the panel also retains a specific size ratio when the window is resized. This means if the window is resized in any direction the panel adapts itself w.r.t the updated size. This is done by adding relevant observers for the WindowResizeEvent and binding the relevant callback to it. Below is a quick demonstration:-

    Pull Requests:

  • Added the watcher class to UI

    This PR adds support for a watcher class in the UI elements. The purpose of this class is to monitor a particular attribute from the UI element after it has been added to the scene. If the attribute changes in the real time, a user defined callback is triggered and the scene is force rendered. Below is the code example demonstrating how the wathcer works:-

    Pull Requests:

    • Added support for borders in Panel2D

      The Panel2D previously, didn't support any sort of effect, the main reason behind this is that, all UI elements are individual entities that are comprised of different actors. These are not the widgets provided by vtk and in order to have some effects provided by vtk shaders must be involved. This obviously makes the whole system very complicated. The border on the other hand uses 4 Rectangle2Ds to draw the 4 borders. This makes the whole process easier but makes the Panel2D very performance heavy as we are adding 5 actors to the scene. Future iterations will replace these rectangles by textures, that way we don't compromise performance and we can have different patterns in the border. Below is a demonstration:-

      Pull Requests:

    Timeline

    Date Description Blog Link
    Week 1
    (08-06-2021)    		 Welcome to my weekly Blogs! Weekly Check-in #1
    Week 2
    (14-06-2021)    		 Feature additions in UI and IO modules Weekly Check-in #2
    Week 3
    (21-06-2021)    		 Adapting GridLayout to work with UI Weekly Check-in #3
    Week 4
    (28-06-2020)    		 Adding Tree UI to the UI module Weekly Check-in #4
    Week 5
    (05-07-2021)    		 Rebasing all PR's w.r.t the UI restructuring, Tree2D, Bug Fixes Weekly Check-in #5
    Week 6
    (12-07-2020)    		 Bug fixes, Working on Tree2D UI Weekly Check-in #6
    Week 7
    (19-07-2020)    		 Finalizing the stalling PR's, finishing up Tree2D UI. Weekly Check-in #7
    Week 8
    (26-07-2020)    		 Code Cleanup, Finishing up open PR's, Continuing work on Tree2D Weekly Check-in #8
    Week 9
    (02-08-2020)    		 More Layouts! Weekly Check-in #9
    Week 10
    (09-08-2020)    		 Accordion UI, Support for sprite sheet animations Weekly Check-in #10
    Week 11
    (16-08-2020)    		 More tutorials for Accordion2D, Finalizing remaining PRs Weekly Check-in #11

    Detailed weekly tasks, progress and work done can be found here.

View Blog Post

Week#11

antrikshmisri
Published: 08/16/2021

What did I do this week?

Below are the tasks that I worked on:-
  1. Created PR for sprite sheet animation: This Pr adds support for playing animations from a sprite sheet. This feature will be used in Card2D to create a tutorial in which the card will show the animation in the image box. Previously, the utility functions for this were added directly inside the tutorial but now they are refactored to go in their respective modules.
  2. Finalized the x, y, z layouts: The Pr that adds these layouts needed some updates for it to work as intended. These changes were added and this Pr is ready to go.
  3. Resolved all conflicts in the GridLayout PR: As the Horizontal and Vertical layouts were merged this week the GridLayout PR had got some conflicts. These conflicts were resolved and the PR is almost ready.
  4. Continuing the work on custom font rendering In the last meeting, a few points were brought up. Firstly, to position each glyph to their respective location in the atlas a seperate module is used which is freetype-gl. The python bindings for this module are not available which means either we have to write the bindings ourselves or the freetype team will be emailed about this and they will add bindings for that. On the other hand, I looked how latex is rendered in matplotlib. This is the Text class that is used to represent the string that is to be drawn and This is the class that it inherits from. Everything is handled internally in matplotlib, to draw the rasterized text this function is used. The text can be rendered in two ways, the first one is by using the default renderer and the second way is by using PathEffectRenderer that is used to add effects like outlines, anti-aliasing etc. It is a very rigid way of rendering text and is designed to be used internally.
<

Did I get stuck anywhere?

No, I did not get stuck anywhere.

What is coming up next week?

Hopefully everything is resolved by the end of this week and next week I will hopefully submit my final code in a gist format.

View Blog Post

Week#10: Accordion UI, Support for sprite sheet animations

antrikshmisri
Published: 08/09/2021

What did I do this week?

Below are the tasks that I worked on:-
  1. Added Accordion2D to UI sub-module: This PR adds the Accordion UI to the UI sub-module. This UI inherits from the Tree2D UI and can only be merged once the Tree2D UI is in. Here's a screenshot for reference:
  2. Adding X, Y, Z Layouts: It was pointed out in last week's meeting that in 3D space horizontal/vertical means nothing. Instead X, Y, Z are used, so, these three layouts were added on top of horizontal/vertical layouts. They also have functionality of changing the direction i.e. reverse the stacking order.
  3. Added support of sprite sheet animation in Card2D: The image in Card2D was static in nature and wasn't very interesting. So, to make things a bit interesting support for animated images were added. These animations are played from a sprite sheet or a texture atlas. A buffer of processed sprite chunks is maintained and with the help of a timer callback the image in the card is updated after a certain delay which is dependent of the frame rate. Below is the demonstration:
  4. Researching more about Freetype/Freetype-GLApart from coding stuff, i did some more research on custom font using freetype and freetype-gl. I found some examples that used the python bindings of the c++ library and displayed custom fonts that were transformable i.e. can be rotated by some angle. Hopefully I can create a working example by this weeks meeting.

Did I get stuck anywhere?

No, I did not get stuck anywhere.

What is coming up next week?

Next week I will finish up my remaining work. Which includes addressing all PR reviews and adding some more features.

See you guys next week!
View Blog Post

Week #9: More Layouts!

antrikshmisri
Published: 08/02/2021

What did I do this week?

Below are the tasks that I worked on:-
  1. AAdded Horizontal/Vertical Layout to the layout module: These PRs add support for Horizontal/Vertical layouts. These layouts allow the actors to be placed in a horizontal/vertical stack.
  2. Finalizing Card2D UI element: As panel border, wrap overflow PRs were merged this week I updated the Card2D UI to take advantage of these features.
  3. Added GSoC blog posts: Added GSoC blog posts in .rst format for the FURY's blog website. Also reviewed the blog posts of other members.
  4. Added support for dragging by label text/icon in Tree2D UI: Added support for dragging TreeNode2D by the label text/icon. This will help making the Tree2D as well as TreeNode2D UIs more mobile.

Did I get stuck anywhere?

For now I am not stuck anywhere but I have yet to start my work on freetype this could pose some trouble.

What is coming up next week?

Next week I will finish the remaining UI elements which includes Accordion2D, SpinBox2D.

See you guys next week!
View Blog Post

Week #8: Code Cleanup, Finishing up open PR's, Continuing work on Tree2D

antrikshmisri
Published: 07/26/2021

What did I do this week?

This week I had to work on the open PR's specifically work on the bugs that were pointed out in last week's meeting. Along side the bugs I had to continue the work on Tree2D UI element. Below is the detailed description:-
  1. Added new tutorial, code clean-up, bug fixes: The Tree2D had some issues with its resizing of child nodes. The size for the nodes was calculated automatically based on the vertical size occupied by its children but this could be problematic when working with sliders or UI elements that take up a lot of vertical size. To avoid this the children sizes are calculated relative to each other and the vertical size is calculated such that all children fit in perfectly. Besides this, a multiselection flag has been added that decides whether multiple child nodes can be selected or not.
  2. Adding tests for corner resize callback: This PR is almost done as it was decided that WindowsResizeEvent will be ignored for now. Which leaves us with corner resizing, the callback for corner resizing didn't have any tests so the recording was redone and tests for the corner resize callback was added
  3. Fixing the failing CI's for #443: The solution that ended up working was creating custom objects for testing of is_ui method. With this update there will be no circular dependencies and no failing CI's.
  4. Addressing all comments regarding #442: In the last meeting, a bug was pointed out wherein the text wouldn't wrap as expected. The reason for this was some minor calculation mistakes. The whole wrap_overflow method was redone and now everything works as expected. Hopefully, no bugs pop up during this week's meeting
  5. Addressing some minor comments: This PR is almost done too, there were some minor changes that were required to be addressed before this could be merged. So, these comments were fixed and hopefully this will be merged soon.
  6. Using different fonts using FreeType python API: A major thing that FURY needs right now is using different fonts on the fly. This is more complicated than it seems, in case of browser environment this is not a problem as browsers can support and render all fonts using various techniques. In case of a desktop environment, we need to generate the bitmap for the fonts and then use them in form of textures. For now I have created a small example that generates these bitmaps from a python API called freetype-py, the fonts are fetched from google fonts and then they are displayed as textures.
  7. Strting working on Vertical Layout: As majority of PR's are almost done, I started working on Vertical Layout. This will be hihgly inspired from the Grid Layout with obvious differences. The same techniques are being used in the Tree2D so this shouldn't be difficult to implement.

Did I get stuck anywhere?

The failing CI's for Grid Layout Pr needed some custom objects to remove circular dependencies. I couldn't figure out where should these custom objects go but fortunaltely the mentors showed me a quick example of where it should go.

What is coming up next week?

Next week I will continue my work on some other UI's and the remaining Layouts.

See you guys next week!
View Blog Post
DJDT

Versions

Time

Settings from gsoc.settings

Headers

Request

SQL queries from 1 connection

Static files (2312 found, 3 used)

Templates (28 rendered)

Cache calls from 1 backend

Signals

Log messages