Articles on antrikshmisri's Bloghttps://blogs.python-gsoc.orgUpdates on different articles published on antrikshmisri's BlogenMon, 23 Aug 2021 13:18:35 +0000Google Summer of Code Final Work Producthttps://blogs.python-gsoc.org/en/antrikshmisris-blog/google-summer-of-code-final-work-product-2/<a href="https://summerofcode.withgoogle.com/projects/#6653942668197888"><img alt="gsoc" height="50" src="https://developers.google.com/open-source/gsoc/resources/downloads/GSoC-logo-horizontal.svg"></a> <a href="https://summerofcode.withgoogle.com/projects/#6653942668197888"><img height="45" src="https://www.python.org/static/community_logos/python-logo.png"></a> <a href="https://fury.gl/latest/community.html"><img alt="fury" height="45" src="https://python-gsoc.org/logos/FURY.png"></a> <h1>Google Summer of Code 2021 Final Work Product</h1> <ul> <li><strong>Name:</strong> Antriksh Misri</li> <li><strong>Organisation:</strong> Python Software Foundation</li> <li><strong>Sub-Organisation:</strong> FURY</li> <li><strong>Project:</strong> <a href="https://github.com/fury-gl/fury/wiki/Google-Summer-of-Code-2021#project-3-create-new-user-interface-widget">FURY: Create new user interface widget</a></li> </ul> <h2>Proposed Objectives</h2> <ul> <li>Add support for Layouts in UI elements</li> <li>Add support for Horizontal Layout</li> <li>Add support for Vertical Layout</li> <li>Add support for Layout along <code>X</code>, <code>Y</code>, <code>Z</code> axes.</li> <li>Stretch Goals:<ul> <li>Add <code>Tree2D</code> UI element to the <code>UI</code> sub-module</li> <li>Add <code>Accordion2D</code> UI element to the <code>UI</code> sub-module </li> <li>Add <code>SpinBox2D</code> UI element to the <code>UI</code> sub-module</li> </ul> </li> </ul> <h2>Objectives Completed</h2> <ul> <li><h3>Add support for Horizontal Layout</h3> <p>Added support for Horizontal Layout in the <code>layout</code> 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.</p> <p><em>Pull Requests:</em></p> <ul> <li><strong>Horizontal Layout:</strong> <a href="https://github.com/fury-gl/fury/pull/480">https://github.com/fury-gl/fury/pull/480</a></li> <li><strong>Horizontal Layout demo:</strong> <a href="https://github.com/fury-gl/fury/pull/480">https://github.com/fury-gl/fury/pull/480</a></li> </ul> </li> <li><h3>Add support for Vertical Layout</h3> <p>Added support for Vertical Layout in the <code>layout</code> 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.</p> <p><em>Pull Requests:</em></p> <ul> <li><strong>Vertical Layout:</strong> <a href="https://github.com/fury-gl/fury/pull/479">https://github.com/fury-gl/fury/pull/479</a></li> <li><strong>Vertical Layout demo:</strong> <a href="https://github.com/fury-gl/fury/pull/479">https://github.com/fury-gl/fury/pull/479</a></li> </ul> </li> <li><h3>Add support for Layout along <code>X</code>, <code>Y</code>, <code>Z</code> axes</h3> <p>Added support for Layout along <code>x</code>, <code>y</code>, <code>z</code> axes. Allows user to layout different actors along any given axes. Also allows users to switch the stacking order by passing a <code>axis+</code> or <code>axis-</code> to the constructor.</p> <p><em>Pull Requests:</em></p> <ul> <li><strong>X, Y, Z axes Layout:</strong> <a href="https://github.com/fury-gl/fury/pull/486">https://github.com/fury-gl/fury/pull/486</a></li> <li><strong>X, Y, Z axes Layout demo:</strong> <a href="https://github.com/fury-gl/fury/pull/486">https://github.com/fury-gl/fury/pull/486</a></li> </ul> </li> <li><h3>Add <code>Tree2D</code> UI element to the <code>UI</code> sub-module</h3> <p>Added <code>Tree2D</code> UI element to the <code>UI</code> sub-module. This allows user to visualize some data in a hierarchical fashion. Each node inside the tree can have <code>N</code> 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:-</p> <img alt="tree2d" height="200" src="https://i.imgur.com/NI3Hstl.png"> <p><em>Pull Requests:</em></p> <ul> <li><strong>Tree2D UI element:</strong> <a href="https://github.com/fury-gl/fury/pull/460">https://github.com/fury-gl/fury/pull/460</a></li> <li><strong>Tree2D UI element demo:</strong> <a href="https://github.com/fury-gl/fury/pull/460">https://github.com/fury-gl/fury/pull/460</a></li> </ul> </li> <li><h3>Add <code>Accordion2D</code> UI element to the <code>UI</code> sub-module</h3> <p>Added <code>Accordion2D</code> to the <code>UI</code> 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 <code>N</code> 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:-</p> <img alt="accordion2d" height="200" src="https://i.imgur.com/xTuOdZt.png"> <p><em>Pull Requests:</em></p> <ul> <li><strong>Accordion2D UI element:</strong> <a href="https://github.com/fury-gl/fury/pull/487">https://github.com/fury-gl/fury/pull/487</a></li> <li><strong>Accordion2D UI element demo:</strong> <a href="https://github.com/fury-gl/fury/pull/487">https://github.com/fury-gl/fury/pull/487</a></li> </ul> </li> </ul> <h2>Objectives in Progress</h2> <ul> <li><h3>Add support for <code>Layout</code> in UI elements</h3> <p>Currently all the available layouts are only available for actors i.e. of type <code>vtkActor2D</code>. 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.</p> <p><em>Pull Requests:</em></p> <ul> <li><strong>Add support for <code>Layout</code> in UI elements:</strong> <a href="https://github.com/fury-gl/fury/pull/443">https://github.com/fury-gl/fury/pull/443</a></li> </ul> </li> <li><h3>Method to process and load sprite sheets</h3> <p>This method adds support for loading and processing a sprite sheet. This will be very useful in playing animations from a <code>n*m</code> sprite sheet. This also has a flag to convert the processed chunks into <code>vtkimageData</code> which can be directly used to update the texture in some UI elements. The primary use of this method will in a tutorial for <code>Card2D</code>, wherein, the image panel of the card will play the animation directly from the sprite sheet.</p> <p><em>Pull Requests:</em></p> <ul> <li><strong>Method to process and load sprite sheets :</strong> <a href="https://github.com/fury-gl/fury/pull/491">https://github.com/fury-gl/fury/pull/491</a></li> </ul> </li> </ul> <h2>Other Objectives</h2> <ul> <li><h3>Add <code>Card2D</code> UI element to <code>UI</code> sub-module</h3> <p> Added <code>Card2D</code> UI element to the <code>UI</code> sub-module. A <code>Card2D</code> 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 <code>title</code> and the <code>body</code>. 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:-</p> <img height="200" src="https://i.imgur.com/DliSpf0.gif"> <p><em>Pull Requests:</em></p> <ul> <li><strong>Add <code>Card2D</code> UI element to <code>UI</code> sub-module:</strong> <a href="https://github.com/fury-gl/fury/pull/398">https://github.com/fury-gl/fury/pull/398</a> </li> </ul> </li> <li><h3>Resize <code>Panel2D</code> with <code>WindowResizeEvent</code> or from corner placeholder</h3> <p> Currently, the size of the <code>Panel2D</code> 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 <code>Panel2D</code> 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 <code>WindowResizeEvent</code> and binding the relevant callback to it. Below is a quick demonstration:-</p> <img height="200" src="https://i.imgur.com/87PN7TQ.gif"> <p><em>Pull Requests:</em></p> <ul> <li><strong> Resize <code>Panel2D</code> with <code>WindowResizeEvent</code> or from corner placeholder:</strong> <a href="https://github.com/fury-gl/fury/pull/446">https://github.com/fury-gl/fury/pull/446</a></li> </ul> </li> <li><h3>Added the watcher class to UI</h3> <p> 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:-</p> <p> <em>Pull Requests:</em></p> <ul> <li><strong> Added wathcer class to the UI sub-module:</strong> <a href="https://github.com/fury-gl/fury/pull/448">https://github.com/fury-gl/fury/pull/448</a></li> </ul> <ul> <li><h3>Added support for borders in <code>Panel2D</code></h3> <p> The <code>Panel2D</code> 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 <code>vtk</code> and in order to have some effects provided by <code>vtk</code> shaders must be involved. This obviously makes the whole system very complicated. The border on the other hand uses 4 <code>Rectangle2D</code>s to draw the 4 borders. This makes the whole process easier but makes the <code>Panel2D</code> 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:-</p> <img height="200" src="https://user-images.githubusercontent.com/54466356/121709989-bd340280-caf6-11eb-9b8a-81c65260d277.png"> <p><em>Pull Requests:</em></p> <ul> <li><strong> Added support for borders in <code>Panel2D</code>:</strong> <a href="https://github.com/fury-gl/fury/pull/441">https://github.com/fury-gl/fury/pull/441</a></li> </ul> </li> </ul> <ul> <li><h3>GSoC weekly Blogs</h3> <p>Weekly blogs were added for FURY's Website.</p> <p><em>Pull Requests:</em></p> <ul> <li><strong>First Evaluation:</strong> <a href="https://github.com/fury-gl/fury/pull/477">https://github.com/fury-gl/fury/pull/477</a></li> <li><strong>Second Evaluation:</strong> TBD</li> </ul> </li> </ul> <h2>Timeline</h2> <table><tbody><tr> <th>Date</th> <th>Description</th> <th>Blog Link</th> </tr></tbody><tbody> <tr> <td>Week 1<br>(08-06-2021)</td> <td>Welcome to my weekly Blogs!</td> <td><a href="https://blogs.python-gsoc.org/en/antrikshmisris-blog/week-1-welcome-to-my-weekly-blogs/">Weekly Check-in #1</a></td> </tr> <tr> <td>Week 2<br>(14-06-2021)</td> <td>Feature additions in UI and IO modules</td> <td><a href="https://blogs.python-gsoc.org/en/antrikshmisris-blog/week-2-feature-additions-in-ui-and-io-modules/">Weekly Check-in #2</a></td> </tr> <tr> <td>Week 3<br>(21-06-2021)</td> <td>Adapting GridLayout to work with UI</td> <td><a href="https://blogs.python-gsoc.org/en/antrikshmisris-blog/week-3-adapting-gridlayout-to-work-with-ui/">Weekly Check-in #3</a></td> </tr> <tr> <td>Week 4<br>(28-06-2020)</td> <td>Adding Tree UI to the UI module</td> <td><a href="https://blogs.python-gsoc.org/en/antrikshmisris-blog/week-4-adding-tree-ui-to-the-ui-module/">Weekly Check-in #4</a></td> </tr> <tr> <td>Week 5<br>(05-07-2021)</td> <td>Rebasing all PR's w.r.t the UI restructuring, Tree2D, Bug Fixes</td> <td><a href="https://blogs.python-gsoc.org/en/antrikshmisris-blog/week-5-rebasing-all-pr-s-w-r-t-the-ui-restructuring-tree2d-bug-fixes/">Weekly Check-in #5</a></td> </tr> <tr> <td>Week 6<br>(12-07-2020)</td> <td>Bug fixes, Working on Tree2D UI</td> <td><a href="https://blogs.python-gsoc.org/en/antrikshmisris-blog/week-6-bug-fixes-working-on-tree2d-ui/">Weekly Check-in #6</a></td> </tr> <tr> <td>Week 7<br>(19-07-2020)</td> <td>Finalizing the stalling PR's, finishing up Tree2D UI.</td> <td><a href="https://blogs.python-gsoc.org/en/antrikshmisris-blog/week-7-finalizing-the-stalling-pr-s-finishing-up-tree2d-ui/">Weekly Check-in #7</a></td> </tr> <tr> <td>Week 8<br>(26-07-2020)</td> <td>Code Cleanup, Finishing up open PR's, Continuing work on Tree2D</td> <td><a href="https://blogs.python-gsoc.org/en/antrikshmisris-blog/week-8-code-cleanup-finishing-up-open-pr-s-continuing-work-on-tree2d/">Weekly Check-in #8</a></td> </tr> <tr> <td>Week 9<br>(02-08-2020)</td> <td>More Layouts!</td> <td><a href="https://blogs.python-gsoc.org/en/antrikshmisris-blog/week-9-more-layouts/">Weekly Check-in #9</a></td> </tr> <tr> <td>Week 10<br>(09-08-2020)</td> <td>Accordion UI, Support for sprite sheet animations</td> <td><a href="https://blogs.python-gsoc.org/en/antrikshmisris-blog/week-10-accordion-ui-support-for-sprite-sheet-animations/">Weekly Check-in #10</a></td> </tr> <tr> <td>Week 11<br>(16-08-2020)</td> <td>More tutorials for Accordion2D, Finalizing remaining PRs</td> <td><a href="https://blogs.python-gsoc.org/en/antrikshmisris-blog/week-11-2/">Weekly Check-in #11</a></td> </tr> </tbody> </table> <p>Detailed weekly tasks, progress and work done can be found <a href="https://blogs.python-gsoc.org/en/antrikshmisris-blog/">here</a>.</p></li></ul>antrikshmisri@gmail.com (antrikshmisri)Mon, 23 Aug 2021 13:18:35 +0000https://blogs.python-gsoc.org/en/antrikshmisris-blog/google-summer-of-code-final-work-product-2/Week#11https://blogs.python-gsoc.org/en/antrikshmisris-blog/week-11-2/<h2>What did I do this week?</h2> Below are the tasks that I worked on:- <ol> <li><span><a href="https://github.com/fury-gl/fury/pull/491">Created PR for sprite sheet animation</a></span>: 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.</li> <li><span><a href="https://github.com/fury-gl/fury/pull/486">Finalized the x, y, z layouts</a></span>: 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.</li> <li><span><a href="https://github.com/fury-gl/fury/pull/443 ">Resolved all conflicts in the GridLayout PR</a></span>: 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.</li> <li><span>Continuing the work on custom font rendering</span> 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. <a href="https://github.com/matplotlib/matplotlib/blob/3a4fdea8d23207d67431973fe5df1811605c4132/lib/matplotlib/text.py#L106">This</a> is the Text class that is used to represent the string that is to be drawn and <a href="https://github.com/matplotlib/matplotlib/blob/3a4fdea8d23207d67431973fe5df1811605c4132/lib/matplotlib/artist.py#L94">This</a> is the class that it inherits from. Everything is handled internally in matplotlib, to draw the rasterized text <a href="https://github.com/matplotlib/matplotlib/blob/3a4fdea8d23207d67431973fe5df1811605c4132/lib/matplotlib/text.py#L672">this</a> 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.</li> </ol> &lt; <h2>Did I get stuck anywhere?</h2> No, I did not get stuck anywhere. <h2>What is coming up next week?</h2> Hopefully everything is resolved by the end of this week and next week I will hopefully submit my final code in a gist format. <br> <br>antrikshmisri@gmail.com (antrikshmisri)Mon, 16 Aug 2021 13:58:39 +0000https://blogs.python-gsoc.org/en/antrikshmisris-blog/week-11-2/Week#10: Accordion UI, Support for sprite sheet animationshttps://blogs.python-gsoc.org/en/antrikshmisris-blog/week-10-accordion-ui-support-for-sprite-sheet-animations/<h2>What did I do this week?</h2> Below are the tasks that I worked on:- <ol> <li><span><a href="https://github.com/fury-gl/fury/pull/487">Added Accordion2D to UI sub-module</a></span>: 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: <br> <img height="200px" src="https://i.imgur.com/klI4Tb5.png" width="200px"></li> <li><span><a href="https://github.com/fury-gl/fury/pull/486">Adding X, Y, Z Layouts</a></span>: 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.</li> <li><span><a href="https://github.com/fury-gl/fury/pull/398">Added support of sprite sheet animation in Card2D</a></span>: 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: <br> <iframe height="315" src="https://www.youtube.com/embed/nhmuZokFSFU" width="560"></iframe></li> <li><span>Researching more about Freetype/Freetype-GL<span>Apart 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.</span></span></li> </ol> <h2>Did I get stuck anywhere?</h2> No, I did not get stuck anywhere. <h2>What is coming up next week?</h2> Next week I will finish up my remaining work. Which includes addressing all PR reviews and adding some more features. <br> <br> <b>See you guys next week!</b>antrikshmisri@gmail.com (antrikshmisri)Mon, 09 Aug 2021 13:13:28 +0000https://blogs.python-gsoc.org/en/antrikshmisris-blog/week-10-accordion-ui-support-for-sprite-sheet-animations/Week #9: More Layouts!https://blogs.python-gsoc.org/en/antrikshmisris-blog/week-9-more-layouts/<h2>What did I do this week?</h2> Below are the tasks that I worked on:- <ol> <li><span><a href="https://github.com/fury-gl/fury/pull/480">AAdded Horizontal/Vertical Layout to the layout module</a></span>: These PRs add support for Horizontal/Vertical layouts. These layouts allow the actors to be placed in a horizontal/vertical stack. <br> <img height="200px" src="https://user-images.githubusercontent.com/54466356/127688192-8412b604-d6c7-4da9-87c4-dfae044a136e.png" width="200px"><img height="200px" src="https://user-images.githubusercontent.com/54466356/127620054-7e14f86e-1579-46ac-b4a6-ac98c109094a.png" width="200px"></li> <li><span><a href="https://github.com/fury-gl/fury/pull/398">Finalizing Card2D UI element</a></span>: As panel border, wrap overflow PRs were merged this week I updated the Card2D UI to take advantage of these features.</li> <li><span><a href="https://github.com/fury-gl/fury/pull/477">Added GSoC blog posts</a></span>: Added GSoC blog posts in .rst format for the FURY's blog website. Also reviewed the blog posts of other members.</li> <li><span><a href="https://github.com/fury-gl/fury/pull/460">Added support for dragging by label text/icon in Tree2D UI</a></span>: Added support for dragging TreeNode2D by the label text/icon. This will help making the Tree2D as well as TreeNode2D UIs more mobile.</li> </ol> <h2>Did I get stuck anywhere?</h2> For now I am not stuck anywhere but I have yet to start my work on freetype this could pose some trouble. <h2>What is coming up next week?</h2> Next week I will finish the remaining UI elements which includes Accordion2D, SpinBox2D. <br> <br> <b>See you guys next week!</b>antrikshmisri@gmail.com (antrikshmisri)Mon, 02 Aug 2021 16:04:55 +0000https://blogs.python-gsoc.org/en/antrikshmisris-blog/week-9-more-layouts/Week #8: Code Cleanup, Finishing up open PR's, Continuing work on Tree2Dhttps://blogs.python-gsoc.org/en/antrikshmisris-blog/week-8-code-cleanup-finishing-up-open-pr-s-continuing-work-on-tree2d/<h2>What did I do this week?</h2> 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:- <ol> <li><span><a href="https://github.com/fury-gl/fury/pull/460">Added new tutorial, code clean-up, bug fixes</a></span>: 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. </li> <li><span><a href="https://github.com/fury-gl/fury/pull/446">Adding tests for corner resize callback</a></span>: 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</li> <li><span><a href="https://github.com/fury-gl/fury/pull/443">Fixing the failing CI's for #443</a></span>: 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.</li> <li><span><a href="https://github.com/fury-gl/fury/pull/442">Addressing all comments regarding #442</a></span>: 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</li> <li><span><a href="https://github.com/fury-gl/fury/pull/441">Addressing some minor comments</a></span>: 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.</li> <li><span>Using different fonts using FreeType python API</span>: 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.</li> <li><span>Strting working on Vertical Layout</span>: 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.</li> </ol> <h2>Did I get stuck anywhere?</h2> 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. <h2>What is coming up next week?</h2> Next week I will continue my work on some other UI's and the remaining Layouts. <br> <br> <b>See you guys next week!</b>antrikshmisri@gmail.com (antrikshmisri)Mon, 26 Jul 2021 13:57:36 +0000https://blogs.python-gsoc.org/en/antrikshmisris-blog/week-8-code-cleanup-finishing-up-open-pr-s-continuing-work-on-tree2d/Week #7: Finalizing the stalling PR's, finishing up Tree2D UI.https://blogs.python-gsoc.org/en/antrikshmisris-blog/week-7-finalizing-the-stalling-pr-s-finishing-up-tree2d-ui/<h2>What did I do this week?</h2> This week I had limited tasks to do, mostly tasks related to existing PR's. Other than some minor fixes I had to implement some more things in Tree2D which included some minor UI fixes, some changes in tutorial, adding tests. Below is the detailed description:- <ol> <li><span><a href="https://github.com/fury-gl/fury/pull/460">Tests, tutorial changes, UI fixes for Tree2D</a></span>: The Tree2D lacked some things like proper UI resizing, relative indentation, tests for the UI class. These were added with this PR. Currently, the indentation, resizing needs some improvement, which will be fixed after feedback from this week's meeting. Also, tests for Tree2D, TreeNode2D were added as well. </li> <li><span><a href="https://github.com/fury-gl/fury/pull/446">Updating Panel2D tests, re-recording the events</a></span>: This PR is almost done with just some tests blocking the PR. The tests were added this week, but tests for some callbacks that are associated with window event are still not added. This is because there is no way to count the WindowResizeEvent without actually using the API of the window provided by the OS. This can become very complicated very soon so, these tests may be added in the future. </li> <li><span><a href="https://github.com/fury-gl/fury/pull/443">Fixing the failing CI's for #443</a></span>: The CI was failing on this PR and needed some fixing which was done this week. This PR still needs some refactoring before the all CI's pass. This will hopefully be fixed before this week's meeting. </li> <li><span><a href="https://github.com/fury-gl/fury/pull/442">Addressing all comments regarding #442</a></span>: Previously, it was pointed out that the some code can be extracted into a function and can be reused in other methods. So, this week the extracted method was updated to reuse even more code and now almost no code is repeated </li> <li><span><a href="https://github.com/fury-gl/fury/pull/441">Adding has_border flag in Panel2D</a></span>: Adding a has_border flag in Panel2D: Previously, to create the borders 4 Rectangle2D's were used and they were created everytime even when border_width was set to 0. This would take a lot of wasted system resources. To fix this, a flag is added in the the constructor which is by default set to False. If false, the borders are not initialized and the resources are saved. </li></ol> <h2>Did I get stuck anywhere?</h2> Fortunately, this week I didn't get stuck anywhere. <br> <br> <b>See you guys next week!</b>antrikshmisri@gmail.com (antrikshmisri)Mon, 19 Jul 2021 11:27:49 +0000https://blogs.python-gsoc.org/en/antrikshmisris-blog/week-7-finalizing-the-stalling-pr-s-finishing-up-tree2d-ui/Week #6: Bug fixes, Working on Tree2D UIhttps://blogs.python-gsoc.org/en/antrikshmisris-blog/week-6-bug-fixes-working-on-tree2d-ui/<h2>What did I do this week?</h2> This week I had relatively few tasks and most of them were to fix some bugs/design flaws that were discussed in last week's meeting. Other than that, I had to implement a few things in the Tree2D UI element that will be discussed in detail below. I also had to update some existing PR's in order to make things work well. Below are the list of things I worked on this week:- <ol> <li><span><a href="https://github.com/fury-gl/fury/pull/459">Extracted Button2D class from elements to core</a></span>: Button2D was placed in elements during the UI restructuring. The problem with that was that Button2D was needed in other UI elements outside UI elements present in elements in Panel2D. SO, it was decided to create a rule that only the UI elements that do not depend on any other UI element are allowed to be placed in core UI elements. Button2D does not depend on any other UI element so it was extracted from elements to core.</li> <li><span><a href="https://github.com/fury-gl/fury/pull/443">Adapting GridLayout to work with UI elements</a></span>: This was a PR that aimed to add support for UI elements to be placed in a grid fashion. the problem was that there still some circular imports even after UI restructuring, primarily because UI was being imported in the layout module that in turn indirectly imported some UI elements making them circularly dependent. To remove the circular imports, it was decided to determine the UI element by checking for a add_to_scene method attribute in the instance. I updated the existing PR to implement the same.</li> <li><span>Continuing my work on Tree2D</span>The Tree2D lacked some important things related to design and visual aspect of it. Before, if the children of any node exceeded its height they would just overflow. To prevent this I came up with a few solutions two of which were to either add a scrollbar on the overflowing node or to simply auto resize the parent node. Currently, there is no global API for the scrollbar and it has to be manually setup in a UI element, this will be hopefully implemented in the near future probably using layout management. Till then the auto resizing has been implemented for the nodes. In future, an option for scrollbar will be added.</li> </ol> <h2>Did I get stuck anywhere?</h2> I am still stuck with adding tests for panel resizing PR. As it needs windows events to be recorded as well. I tried to propagate the event to the interactor first but that just lead to that particular event being registered multiple times. I will try to find a workaround for it. <h2>What is coming up next?</h2> If the Tree2D gets merged by this week then I'll probably work on other UI elements. Other tasks will be decided in the next meeting <br> <br> <b>See you guys next week!</b>antrikshmisri@gmail.com (antrikshmisri)Mon, 12 Jul 2021 13:22:03 +0000https://blogs.python-gsoc.org/en/antrikshmisris-blog/week-6-bug-fixes-working-on-tree2d-ui/Week #5: Rebasing all PR's w.r.t the UI restructuring, Tree2D, Bug Fixeshttps://blogs.python-gsoc.org/en/antrikshmisris-blog/week-5-rebasing-all-pr-s-w-r-t-the-ui-restructuring-tree2d-bug-fixes/<h2>What did I do this week?</h2> The UI restructuring was finally merged this week. This means UI is now a submodule in itself and provides different UI elements based on their types which are, core, elements, containers and some helper methods/classes. So, this week my main tasks were to rebase and fix merge conflicts of my open PR's. Other than that, I had to continue my work on Tree2D UI element and finish the remaining aspects of it. Also, I had to create an example demonstrating how to use the newly added UI element. Many use cases were discussed in the open meeting like, an image gallery which displays preview image on the title and when expanded reveals the full scale image. I am thinking of adding multiple examples for the Tree2D to brainstorm on its certain features. Also, I had this annoying bug in Panel2D which didn't allow it to be resized from the bottom right corner. It was resizing from the top right corner. I had to address this bug as well. Below are the tasks in detail:- <ol> <li><span><a href="https://github.com/fury-gl/fury/pulls/antrikshmisri">Rebasing all PR's w.r.t the UI restructuring</a></span>: As discussed in the earlier blogs, due to circular imports and large size of the UI module, a bit of restructuring was required. This week the PR that converts the UI into a sub module was finally merged. This meant I had to fix all the merge conflicts and rebase all UI related PR's. So, I rebased all the UI related PR's and fixed the merge conflicts. Currently, there are still some PR's that need some attention as still some of the imports are circular in nature. This means if the issue is correct then some more restructuring is required, which will be hopefully done in the near furture</li> <li><span><a href="https://github.com/antrikshmisri/fury/blob/86b16ba3f74c3bdcf9aab58f546b37b919254cd1/fury/ui/elements.py#L3278">Continuing the work on Tree2D</a></span>: This week I continued my work on Tree2D, TreeNode2D. I had to fix/add multiple features on both the classes but my priority was to fix the looks of the UI element as well as make it easier for the user to manipulate the UI element. The first thing that I fixed was node offsetting, when a node is collapsed and expanded the nodes below the current node should also offset. Previously, only the child nodes within the same parents were offset and not the nodes/parent beyond that. With some minor adjusting, now the nodes are offset recursively and all child/parent nodes below the current nodes are offset. Secondly, before only a node could be added to a node which meant it wasn't any easy way to add any other UI element to a node but with some updates/fixes any UI element can be added to a node. Also, the Tree2D lacked some properties/methods to easily manipulate it. So, i added some properties/methods that allow to easily/efficiently manipulate individual node inside the Tree2D. Below is the current state of the Tree2D. In the below tree, two panels are added to a child node after the tree has been initialized. Also, the coordinated of the child elements are totally fluid i.e they can be placed anywhere inside the content panel by passing normalized or absolute coordinates. <img src="https://i.imgur.com/rQQvLqs.png"></li> <li><span>Fixed Panel2D bottom corner resizing</span>Previously, the panel would not resize from the bottom left corner but it would resize from top right corner. I didn't understand what was going wrong and was stuck on this for a long time. But I finally figured out the problem, I was calculating the Y-offset wrong as well as the panel resized from the top side instead of bottom. With some minor tweaking the bug was gone and the panel resizes correctly from the bottom right corner.</li> </ol> <h2>Did I get stuck anywhere?</h2> I got stuck on recording events for the updated panel UI element. The panel updates w.r.t the window size but I couldn't figure out how to record the events invoked by the window. Unfortunately, I still haven't figure out how this will be done. My guess is that I have to propagate the event first to the interactor and then to the UI element. <h2>What is coming up next?</h2> I will probably finish up the GridLayout, Tree2D UI along side some other UI's. This will be decided in the next meeting <br> <br> <b>See you guys next week!</b>antrikshmisri@gmail.com (antrikshmisri)Mon, 05 Jul 2021 13:15:13 +0000https://blogs.python-gsoc.org/en/antrikshmisris-blog/week-5-rebasing-all-pr-s-w-r-t-the-ui-restructuring-tree2d-bug-fixes/Week #4: Adding Tree UI to the UI modulehttps://blogs.python-gsoc.org/en/antrikshmisris-blog/week-4-adding-tree-ui-to-the-ui-module/<h2>What did I do this week?</h2> This week I had very few tasks to do, almost all of them revolved around UI elements and adding stuff to the UI module. Earlier, it was pointed out that due to some design issues, importing certain modules into others caused circular imports which led to importing the specific modules inside a class/method which is not the best approach. This will be resolved as soon as the PR that fixes this issue is reviewed/merged in the codebase. In the meantime, all the PR's related to UI will be on hold, which is why this I had few tasks this week. The tasks are described below in detail:- <ol> <li><span><a href="https://github.com/fury-gl/fury/pull/448">Addition of watcher class in UI</a></span>:This is finally done, as described in the previous blogs this was something that was on hold for a long time. Primarily, due to other tasks I couldn't work on this but this week due to less tasks I was able to complete the watcher class and create a PR. 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. Currently, if any attribute of the UI element changes after it is added to the scene it does not get updated accordingly. The only way to update the UI element would be to add a custom user hook that will be triggered when a particular event that can change the attribute is invoked. This is highly ambiguous as some unmonitored event can easily change many attributes of the UI element. Also it would be really hard to add user hooks for so many events. The watcher class does this automatically, it monitors the attribute for changes and if the attribute changes, a user defined callback is triggered. If this is something that is required in the UI module, then in the future a good addition would be to monitor the UI element instance as a whole instead of a single attribute .</li> <li><span><a href="https://github.com/antrikshmisri/fury/blob/bb45d1c5b6fc0495dfe4d7814fab9aefbf9f7727/fury/ui.py#L5249">Addition of Tree UI in the UI module</a></span>: Another task for this week was to work on either Tree UI or the Accordion UI. I chose to work on Tree UI as it is very interesting to implement and the logic for Tree is almost similar to that of an Accordion. So far, I have managed to implement TreeNode2D. The Tree UI contains several nodes and each node can have its own sub-nodes/children. Also, each node has an expand/collapse button which can be used to chow/hide the underlying children. The Tree UI would take some sort of data structure that contains nodes/sub-nodes and convert each node to TreeNode2D and add all the processed node to the main Panel. So far this the result I have achieved: <img src="https://i.imgur.com/WIMWsrp.png"> <img src="https://i.imgur.com/u33D7Qi.png"> </li> <li><span><a href="https://github.com/fury-gl/fury/pull/446">Resize Panel2D on window resizing</a></span>This PR adds support for resizing Panel2D on WindowResizeEvent. This means that the Panle2D resizes itself with respect to the chnaged window size. It also retains its maximum possible size and does not overflow. Also, this PR adds support for resizing the Panel2D for the bottom right corner. A placeholder button is placed at the bottom right corner of the Panel2D and when it is dragged by the placeholder the Panel2D resize accrdingly. Below is an example:- <img src="https://i.imgur.com/87PN7TQ.gif"></li> <li><span>Also, I did some testing of GridLayout when placed inside a resizable Panel2D. This will need to be worked on before advancing any further. Currently the elements present in the Panel2D do not resize properly w.r.t the changed panel size. Hopefully, this will be fixed in the future PRs.</span></li> </ol> <h2>Did I get stuck anywhere?</h2> Fortunately, I did not get stuck this week. <h2>What is coming up next?</h2> The tasks for the next week will be decided in this weeks meeting. <br> <br> <b>See you guys next week!</b>antrikshmisri@gmail.com (antrikshmisri)Mon, 28 Jun 2021 11:36:32 +0000https://blogs.python-gsoc.org/en/antrikshmisris-blog/week-4-adding-tree-ui-to-the-ui-module/Week #3: Adapting GridLayout to work with UIhttps://blogs.python-gsoc.org/en/antrikshmisris-blog/week-3-adapting-gridlayout-to-work-with-ui/<h2>What did I do this week?</h2> This week my tasks revolved around layout and UI elements. The primary goal for this week was to adapt the GridLayout to work with different UI elements. Currently, GridLayout just supports vtk actors and not UI elements, my task was to modify the class to support UI elements. The other tasks for this week are described below in detail:- <ol> <li><span><a href="https://github.com/fury-gl/fury/pull/443">Adapt GridLayout to support UI elements</a></span>: This was the main task for the week and the aim for this was to actually modify GridLayout to support UI elements. This was not possible before because GridLayout only supported vtk actors (because of certain methods only being provided by vtk actors). I modified the main class itself along with some utility functions. The problem that I faced during this was circular imports. Currently, the structure of FURY doesn't allow certain modules to be imported into other modules because of circular imports. A way to get around this was to actually import the modules inside the methods but this is not ideal always. This will be fixed in the future PRs where the UI module will be redesigned. I also added support for grid position offsetting, which basically means that the position of the UI elements that are placed in the Grid can be offset by a global offset passed in the constructor of GridLayout class. Below is an example showing the current state of GridLayout with different UI elements:- <img src="https://i.imgur.com/EX2cN1i.png">. I also created a brief example to demonstrate how to use GridLayout of different cellshapes with UI elements link to which is <a href="https://github.com/fury-gl/fury/pull/443/files#diff-853d17c3134e7d22de88523bb787dc05d52ec798dc2111aa0419dfd5d634350a">here</a></li> <li><span><a href="https://github.com/fury-gl/fury/pull/294"> Reviewed the FileDialog2D PR</a></span>: This PR added support for FileDialog2D in the UI module. The PR needed to be reviewed in order to merge it as soon as other required PRs were merged. One of the mentors already reviewed the PR briefly my job was to review the PR for any remaining bugs.</li> <li><span><a href="https://github.com/fury-gl/fury/pull/422">Study #422 PR to understand contours around the drawn markers</a></span>: In my previous week's tasks I created a PR to add support for borders in Panel2D. The borders were individually customizable just like in CSS which meant 4 Rectangle2D objects were needed to represent border in each direction. This is not ideal for a scenario where a lot of Panel2D are present in the scene as it can be performance taxing. A possible solution for this was to actually look how this was implemented in the #422. This PR allowed drawing millions of markers in one call that too from the GPU. Interestingly, each marker had a contour surrounding it which is exactly what we needed for Panle2D. This is something that can be considered in the future for border implementation in other complex UI elements.</li> <li>I also continued my work on the watcher class that I mentioned in the previous week's blog. The work for this is almost done and just needs some tests implemented, which should be done soon</li> </ol> <h2>Did I get stuck anywhere?</h2> Fortunately, I did not get stuck this week. <h2>What is coming up next?</h2> Next week I would probably continue to work on GridLayout and possibly other layouts as well, other tasks will be decided in the next meeting. <br> <br> <b>See you guys next week!</b>antrikshmisri@gmail.com (antrikshmisri)Mon, 21 Jun 2021 05:39:07 +0000https://blogs.python-gsoc.org/en/antrikshmisris-blog/week-3-adapting-gridlayout-to-work-with-ui/Week #2: Feature additions in UI and IO moduleshttps://blogs.python-gsoc.org/en/antrikshmisris-blog/week-2-feature-additions-in-ui-and-io-modules/<h2>What did I do this week?</h2> This week I had to work on 3 PR's as well as some documentation. I really enjoyed this week's work as the tasks were really interesting. The aim for these PR's were to actually add a couple of features in the UI as well as the IO module, which includes, adding support for border in <code style="background: #999; color: #fff;">Panel2D</code>, adding support for network/URL images in <code style="background: #999; color: #fff;">load_image</code> method in IO module, adding resizing <code style="background: #999; color: #fff;">Panel2D</code> from bottom right corner, completing the document with layout solutions provided by Unity/Unreal engine. Below are the PR's that I worked on:- <ol> <li><span><a href="https://github.com/fury-gl/fury/pull/440">Added support for URL image in load_image</a></span>: The load_image of IO module didn't support network /URL images, so I made this PR to add support for the same. </li> <li><span><a href="https://github.com/fury-gl/fury/pull/441"> Added support for border in Panel2D</a></span>: This PR was made in association with the Card2D PR. This PR adds support for border in Panel2D. The borders are individually customizable just like in CSS. This PR needs a little tweaking in terms of getters/setters. The same support needs to be added in Rectangle2D</li> <li><span><a href="https://docs.google.com/document/d/1zo981_cyXZUgMDA9QdkVQKAHTuMmKaixDRudkQi4zlc/edit?usp=sharing">Complete the document with layout solutions provided by Unity/Unreal engine</a></span>: Completed the document with layout solutions provided by Unity/Unreal Engine</li> <li>Behind the scenes I also worked on a Watcher class for the UI elements. The purpose of the watcher would be to monitor the UI elements for any changes after they have been added to the scene. A PR should be up by 2-3 days.</li> </ol> <h2>Did I get stuck anywhere?</h2> I had a minor issue with the tests for the IO module. When running the tests for IO module using pytest 5.0.0 resulted in Window fatal error, this was a sideeffect of pytest 5.0.0 wherein support for faulthandler was added. This error was suppressed by using certain flags while running the tests. <h2>What is coming up next?</h2> Next week I would probably work on adapting the GridLayout with UI elements, some other tasks that will be decided in the next meeting. <br> <br> <b>See you guys next week!</b>antrikshmisri@gmail.com (antrikshmisri)Sun, 13 Jun 2021 16:30:25 +0000https://blogs.python-gsoc.org/en/antrikshmisris-blog/week-2-feature-additions-in-ui-and-io-modules/Week #1: Welcome to my weekly Blogs!https://blogs.python-gsoc.org/en/antrikshmisris-blog/week-1-welcome-to-my-weekly-blogs/Hi everyone! I am Antriksh Misri. I am a Pre-Final year student at MIT Pune. This summer, I will be working on Layout Management under FURY's UI module as my primary goal. This includes addition of different classes under Layout Management to provide different layouts/arrangements in which the UI elements can be arranged. As my stretch goals, I will be working on a couple of UI components for FURY’s UI module. These 2D and 3D components will be sci-fi like as seen in the movie “Guardians of The Galaxy”. My objective for the stretch goals would be to develop these UI components with their respective test and tutorials such that it adds on to the UI module of FURY and doesn’t hinder existing functionalities/performance. <h2>What did I do this week?</h2> During the community bonding period I got to know the mentors as well as other participants. We had an introductory meeting, in which the rules and code of conduct was explained. Also, my proposal was reviewed and modified slightly. Initially, I had to develop UI elements as my primary goal and I had to work on layout management as my stretch goals but the tasks were switched. Now I have to work on Layout Management as my primary task and develop UI in the stretch goals period. I also started coding before hand to actually make use of this free period. I worked on different PR's which are described below:- <ol> <li><span><a href="https://github.com/fury-gl/fury/pull/434">Added tests for Layout module</a></span>: The layout module of FURY didn't had any tests implemented, so I made this PR to add tests for <code style="background: #999; color: #fff;">Layout</code> &amp; <code style="background: #999; color: #fff;">GridLayout</code> class.</li> <li><span><a href="https://docs.google.com/document/d/1zo981_cyXZUgMDA9QdkVQKAHTuMmKaixDRudkQi4zlc/edit">Complied available classes for Layout Management in different libraries</a></span>: In order to decide the behavior and functionality of Layout Management in FURY, I made a document that has all classes available in different libraries to manage layout of UI elements. This document also contains code snippets for these classes</li> <li><span><a href="https://github.com/antrikshmisri/fury/tree/panel-resize">Resize Panel2D UI on WindowResizeEvent</a></span>: Currently, the <code style="background: #999; color: #fff;">Panel2D</code> UI is not responsive to window resizing which means its size is static. In this branch I implemented this feature.</li> </ol> <h2>Did I get stuck anywhere?</h2> I got stuck at Panel resizing feature. I couldn't figure out how to propagate the window invoked events to a specific actor. Fortunately, the mentors helped me to solve this problem by using partial from functools <h2>What is coming up next?</h2> The next tasks will be decided in this week's open meeting with the mentors. <br> <b>See you guys next week!</b>antrikshmisri@gmail.com (antrikshmisri)Tue, 08 Jun 2021 08:41:49 +0000https://blogs.python-gsoc.org/en/antrikshmisris-blog/week-1-welcome-to-my-weekly-blogs/