[GSoC] Code display or editing widget across platforms

[anirudhkannanvp]

GSoC Proposal for BeeWare

ANIRUDH KANNAN V P

(https://github.com/anirudhkannanvp) (https://www.linkedin.com/in/anirudh-kannan-v-p-951189140/)

Toga

Code display or editing widget across platforms.

Technical Skills, Education and Motivation

_Hello, I am ANIRUDH KANNAN V P, a Cheerful, Hardworking and a motivated young guy who is often unable to sleep early and often ends up staying late till my code is error free_. I study at Indian Institute of Information Technology (IIITS), which is one of the premier institutes in India for studying computer science.I am aactive competitive coder and an open source contributor.I won a limited edition T-shirt by Hacktoberfest 2017 (by DIGITAL OCEAN) recently for supporting open source contribution and getting successful pull requests.Starting from September 2017 till now I have made 350+ contributions to various organizations, projects in 60+ repositories (https://github.com/anirudhkannanvp) Recently in 2018 I became Winner of Open Tech Nights Of FOSSASIA which is also a mentor organization in GSoC 2018 and have won a free ticket to the FOSSASIA Summit in Singapore from March 22-25 2018 as well as free accommodation for the event. The summit is sponsored by Daimler, Google, Microsoft, Indeed, Oracle, MySql, FreeBSD, Open Source Initiative etc. I am an active competitive coder and code regularly in Various websites like Hackerrank, Codechef, HackerEarth, Codeforces, SPOJ,csacademy.com, UVA-OJ, etc.I actively take part in Codechef competitions (HIGHEST RATING:- 1879 4 STARS DIV 1)(USER ID: https://www.codechef.com/users/anirudhjarvis). I am also active on Codechef discuss and have been awarded a few reputation points. I like to help and answer others questions as well as take help from others when required.I am really really active on Hackerrank and have won 1 gold medal, 2 silver medals and 5 bronze medals in various Hackerrank coding competitions rating of 2138 (USER ID: https://www.hackerrank.com/anirudhkannan_v1), apart from solving a variety of domains.I am really active in Helping others, as well as actively participating in the discussion section and have around 24 followers.I also finished a research internship in IIT Madras, one of the premier institutes in India and worked a part on developing an efficient facial recognition algorithm.I got 3RD RANK IN INTERNATIONAL INFORMATICS OLYMPIAD IN TAMIL-NADU STATE 2011.I have also won many other coding competitions and have done a variety of projects(sorry no place to include all, please see my resume( https://drive.google.com/file/d/1vcTQSXE_fxVeQ5P9K0RhrG-xKA32bhLa/view ) or Linkedin profile (https://www.linkedin.com/in/anirudh-kannan-v-p-951189140/)). Apart from coding I love solving Mathematics puzzles, watching movies and playing chess.I am also a NATIONAL LEVEL Chess Player and have Won CBSE CHESS NATIONALS TWICE during school time and also participated in the Parsvnath Commonwealth Chess Championship 2010 and was placed 174th.

My primary Proposal

I Plan on Basically working on creating a code editing and a code display widget for Toga that supports syntax highlighting. My Basic Plan is to to implement initially in Linux followed by Mac and then expand it to other platforms if possible even after the program ends and make it one of the strong native widgets of Toga.I believe in letting my work speak for itself.Rather than making a lot of commitments and doing less,I always commit less and end up doing more . That’s why in this proposal I plan on basically implementing the Code display widget that supports syntax highlighting to Linux(toga-gtk) first,and finish it perfectly and then code it in other platforms(if time exists for (toga-cocoa)Mac OSx,Android,iOS followed by winforms) as it will make the work faster.As a regular Python developer and I am interested in developing tools for cross platform application development for easy development of apps across various platforms.That is my main motivation behind choosing the BeeWare organisation.

Code display or editing widget Implementation expanded:-

toga gtk API’s planned on using:-

Core widgets Component Class
Application    toga.app.App Box    toga.widgets.box.Box Font    toga.font.Font Widget    toga.widgets.base.Widget Window    toga.window.Window

Layout widgets Component Class

1. Scroll Container    toga.widgets.scrollcontainer.ScrollContainer
2. Split Container    toga.widgets.splitcontainer.splitcontainer

The application widget should be used as it is the main entry point and container for the toga api.The box is a generic container for any widget that will be used in the text editor if needed.Since the font class is used for abstracting the platforms implementation of fonts, it can be used in syntax highlighting feature of the text editor, and the widget class can be used as the base class for all widgets as and when needed. The label component of toga can be used to annotating the text editor interfaces if needed.

There are two layout widgets I am considering for the text editor.Scroll container and Splitcontainer.The scroll container must be used for long codes to scroll between sections. The Split container can be used to do a split screen and type two codes simultaneously by creating two text editors in split screen.

MENU’ S AND FEATURES CONSIDERED

1.Provide automatic line numbers in the text editor. 2.Provide Syntax highlighting using different fonts in Python followed by c++. 3.Provide Drag and drop editing 4.Provide Paragraph alignment

• Reformat paragraph
• Left,right,center etc
  5. Provide code folding that allows the user to selectively hide and display sections of a currently edited file.
  6. Provide Line change Indicator
     • Save changes indicated in one color say green
     • Unsaved changes in another color say red
  7. Provide Zoom in or out on text written in the text editor with Ctrl + Mouse button or provide any other shortcut
  8. Provide Text selection features
     • Ability to select the entire line, word or even entire file
       • Ability to select the whole line by triple-clicking
       • Select the whole line by clicking the number on the margin.
  9. Provide an ability to visualize large files that is provide Disk-based file editing
  10. Provide contextual menus by clicking the mouse button
      • An option to save the file.
        • An option to Rename current file
        • An option to open another file
  11. Provide text auto-completion by using existing dictionary and ability to add words to that dictionary.
  12. Provide menu options such as Save, rename, open file.
  13. Provide edit options such as Find, Replace, Find and replace etc.

IMPLEMENTATION DETAILS :- THE DATA STRUCTURES, ALGORITHMS AND API's PLANNED ON USING

• Number Input Use Toga’s API for creating number input as well as use inbuilt methods in Python numpy module Syntax Highlighting Use Pygments Python library as well as Font module of Toga ‘s API to provide automatic Syntax Highlighting.

• Drag and Drop Editing Use some of Python s inbuilt Python tkinter which is for GUI and use canvas(),Frame() and pack() Paragraph Alignment WordprocessingML supports a variety of paragraph formatting attributes to control layout characteristics such as justification, indentation, line spacing, space before and after, and widow/orphan control.

  paragraph = body.add_paragraph() paragraph.alignment None paragraph.alignment = WD_ALIGN_PARAGRAPH.RIGHT paragraph.alignment RIGHT (2) paragraph.alignment = None paragraph.alignment None Etc.

• Code Folding Use python Pycharm library,Numpy module,Itertools and collections library to allow the user to selectively hide and display – "fold" – sections of a currently-edited file as a part of routine edit operations.

• Line Change Indicator Use Toga’s API for creating number input as well as use inbuilt methods in Python numpy module. Moreover Use Use Pygments Python library as well as Font module of Toga ‘s API to change colour between green and red to show line change indication.

• Zoom in or out on text written,contextual menus upon clicking mouse button,menu options such as Save,rename,open file,edit options such as Find,Replace,Find and replace etc,Text selection features The Python libraries such as Tkinter,numpy,Collections,Itertools,Errors and exceptions and Built ins , been considered and It’ll be done using a mixture of various functions from all of these. Moreover other Text tool kits like Krita,Blender,Idle Has also been considered which will provide such Menu options , Shell options, edit and run options.

• Provide text auto-completion by using existing dictionary and ability to add words to that dictionary

  I am planning on storing the keywords in a Python Dictionary and in a BINARY SEARCH TREE DATA Structure or Trie Data Structure and Easily Provide autocomplete. Trie is an efficient information reTrieval data structure. Using Trie, search complexities can be brought to optimal limit (key length). If we store keys in binary search tree, a well balanced BST will need time proportional to M * log N, where M is maximum string length and N is number of keys in tree. Using Trie, we can search the key in O(M) time.  Binary Search algorithm can be used to search the keywords and it is O(log(n)) is used for searching the words since they will be arranged in ascending order.I will chose on one data structure during implementation by comparing the efficiency

import toga-12 week plan for GSoC

What have I done till now for toga = toga.button(‘Starting from 07-March-2018(Seeing the organization for the first time) to the time of submittal of this proposal’, on_press = read below)

• Read about the motto of BEEWARE , getting to know the community, follow the BEEWARE projects across various media, watch in GITHUB, read about the mentors their work, join GITTER channel and have become an active part of the community.
• Fork the TOGA repository in GITHUB, go through the code and tried to find any issues.
• Finished setting up the development environment(in all three platforms WINDOWS, MAC OS-X and LINUX, though I’ll mostly be developing using LINUX) and installed most of the dependencies.
• Ran coverage tests and tried to improve coverage percentage.
• Go through the documentation (Went through the documentation fully and tried to understand how each and everything works as much as possible. Have to mention that the story behind why YAK Mascot was chosen was really interesting.)
• Finished the official tutorials and have built my own simple apps using TOGA
• 1. A Simple calculator which can calculate almost any equation
  2. Built a CODER-SOCIAL-NETWORKER-FRIENDLY BROWSER using TOGA which makes it easier for coders(Competitive Coders especially), social network users to navigate between their favorite pages easily, stores history of the user and can navigate back between pages. PROJECT LINK:- https://github.com/anirudhkannanvp/PYTHON-GUI-APPS
• Did a lot of research on implementing automatic syntax highlighting in text editors such as emacs, sublime and tried to browse through how they were implemented using Python Libraries. Started learning about PYTHON libraries like Pygments (python syntax highlighter library), Tkinter libraries, how to integrate them etc

Precoding period = toga.button(‘Till coding period starts’, on_press = read below)

• Start reading about the project in detail and do some more research on how to do automatic syntax highlighting on how to clear any doubts regarding the project if any with the mentor.
• Participate in the community discuss, clear any doubts or learn things and try solving issues.
• Wireframe my ideas beforehand, Have a neat plan ready(down to minute details) on how to implement the project during the 12 weeks.
• Read about the libraries(like Pygments) required for the project, go through the documentation again and finish any tutorial if required.
• Get approval from the mentor and make any changes as instructed by the mentor.

week 1 and week 2 = toga.button(‘14-20 May and 21-27 May’, on_press = read below)

• Start Building the code display or editing widget according to the approved wireframe.
• Start building the text editor toga core and make a rough text editor Scratch for toga-gtk (Linux).
• Add a few basic menu options listed above for the text editor like automatic line numbers and paragraph alignment.
• Write tests and documentation for the code implemented.

week 3 and week 4 = toga.button(‘28 May- 3 June and 4-10 June’, on_press = read below)

• Improve the interface of the text editor.
• Add a few more menu options listed above like drag and drop editing, Line changing indicator, zoom in or zoom out.
• Start learning about Syntax highlighting in first for a Language like Python.
• Get comments from the mentor, make any appropriate changes as instructed by the mentor and get ready for the first evaluation.
• Write tests and documentation for the code implemented.

week 5 and week 6 = toga.button(‘11-17 June and 18-24 June’, on_press = read below)

• First evaluation - 11-15 June. Get first phase evaluation done by the mentor
• Start Providing Syntax highlighting in a first for a language like Python, keeping in mind the suggestions said by the mentor in phase 1 evaluation. -Add Syntax highlighting to other languages (c++ initially then expand as much as possible as time permits), in toga-gtk.
• Also, start with text selection features.
• Also, start with text auto-completion features.
• Write tests and documentation for the code implemented.

week 7 and week 8 = toga.button(‘25 June - 1 July and 2 - 8 July’, on_press = read below)

• Improve the interface of the editor by fully completing some menus like text selection features.
• Add some menu options like save, open etc
• Test toga-gtk and make any changes if any.
• Add on to text autocompletion
• Write tests and documentation for the code implemented.

week 9 and week 10 = toga.button(‘9 -15 July and 16-22 July’, on_press = read below)

• Second evaluation 9-13 July. Get the evaluation done by the mentor and
• Provide contextual menus, menu options, and edit options.
• Do tests, and get feedback from mentor and make any changes if required
• Write tests and documentation for the code implemented.

week 11 and week 12 = toga.button(‘23 -29 July and 30 July - 5 August’, on_press = read below)

• Provide code folding that allows the user to selectively hide and display sections of a currently edited file.
• Do Final Testing and make the documentation fully ready, and correct any errors if possible
• Do any changes suggested by the mentor.
• Submit the final Project and do the final evaluation.

Post GSoC = toga.button(‘After 5 August’, on_press = read below)

• Continue development of toga text editing widget for other platforms.
• Be part of other developments of BeeWare as well.

Possible Problems that I may face in the 12-week plan

After some research I found some possible problems which I may face.Syntax highlighting libraries have some differences in implementing for Python2 and Python3, and some problems were faced while implementing with GUI.I believe I may possible face some Sync problems between Toga libraries and Pygments libraries or any other libraries used .Moreover I may face some errors while text auto completion and adding words to dictionary..In addition to this errors may arise in code folding and while selecting and replacing some words in the document.Moreover I am also worried about the build errors I may face while developing the text editor that may turn up unexpected during the actual implementation.Python library Pygments has been considered for syntax highlighting after some explorations and integrating it with toga fonts is a difficulty.This may lead to performance issues on what fonts I should use. Moreover performance issue will exist while using automatic text highlighting in Splitcontainer Text editor.Furthermore i have limited experience working with toga codebase, so that I may face difficulties in correcting any unexpected errors. Moreover i may face some merging errors while merging Python s File,menus,numpy,collections,itertools etc with Toga ‘s API or with one another. Care must be taken care to make sure this doesn't happen.I am also not familiar with Toga’s integration with API’s to provide contextual menus, menu,edit and file options.

Other Commitments

        I do not have any other commitments during the summer as of this moment of writing the proposal and plan on working the GSoc for the whole time putting in my whole effort , apart from the occasional relaxing and going out for dinner.I plan on working on 7-8 hours daily dedicated efforts to make sure that the project goes as planned. 

PS:- PLEASE VISIT THE LINK FOR THE ORIGINAL DOCUMENTATION https://docs.google.com/document/d/1Tiag_jp9ZFlQY18I8wM7_7EY8KvMdAVU3m2QoNzFbYc/edit?usp=sharing

[freakboy3742]

@anirudhkannanvp Ok... so... No.

This needs a lot less cute, and a lot more actual detail.

Based on this proposal, I have no confidence that you actually understand the problem you're proposing to solve.

Do you have a design in mind? What GTK or Cocoa APIs will you be using? What API will you expose to end users? What performance issues will exist? How will you manage them? These are the sort of details that we need to see.

[anirudhkannanvp]

I have updated as much as possible I guess with a separate new section display or editing widget Implementation expanded:- as per the previous comment. Please look through it and comment any changes required.This is just a version of it. I 'll change it as per the comments given.

[freakboy3742]

@anirudhkannanvp I think you have massively misunderstood what is being asked for here.

Toga already has a Multiline text area. Compiling three of four pre-existing widgets into an app is a task for an idle weekend, not a GSoC.

This problem isn't just a matter of "put a multiline text area on a page". A code editing widget has complex needs that are way beyond a multiline text area. Syntax highlighting is one of the requirements (one that some multiline text areas might be able to handle); but so are line numbers, code folding, the ability to visualise huge files, code autocompletion, contextual menus,... the list goes on. This won't be a simple widget. It's a very complex undertaking. I wouldn't even expect a GSoC student to complete a "code display/edit widget" in the time allotted by the GSoC.

You need to go back to the drawing board on this one.

[anirudhkannanvp]

@freakboy3742 Actually I didn't want to expand upon the menu and feature options considered in the initial proposal and thought I could expand on the fly, during coding period but now I have expanded as asked by you,I have dropped the development for toga-cocoa MacOs in the 12 week plan as compared the previous proposal as the number of features I have proposed require a lot of time to implement. I would be even happy to cut down some before submitting my final proposal if u wish. Please let me know. Kindly do the needful and comment any changes required.

[freakboy3742]

@anirudhkannanvp You haven't addressed any of the issues I raised.

Again - this task isn't "write an editor app". It's to write the widget on which an editor would be based. Any reference to MultilineTextInput in your proposal immediately marks the proposal as a non-starter.

[anirudhkannanvp]

@freakboy3742 I have updated implementation details such as what data structures, Python Libraries, and Algorithms I'll be using for the above-mentioned features. That s the final Proposal I submitted.Okay. Thanks a lot for Your reviews. I have corrected as much as possible as per your reviews.Since today is the last day, I can't make any more changes. I am submitting my proposal. Kindly do the needful. Thanks for your guidance @freakboy3742 . It was wonderful working with BeeWare. Ill continue to be a part of the community and contribute.Thank You

[freakboy3742]

Unfortunately, this project was not selected for the 2018 GSoC. Thanks for applying!