About me

Full Name: Ashutosh Kumar

Email: igniteeng000@gmail.com

Github Linkedin Publiclab

Affiliation: Indian Institute of Information Technology Vadodara

Student year: 3rd year

Field of study: Information Technology, B.Tech.

Location: Gujarat, India

Project: Mapknitter Image Management and Synchronous Editing

Potential Mentors: Jeff Warren, Emmanuel Hayford, Aman Jain

Project description

MapKnitter is based around the upload of images, the positioning of those images on a map, and the compositing of those images into map export formats. This project idea focuses on the systems for tracking changes on those images, collecting them into sets, storing image history, and other improvements which we hope will simplify and reconfigure the MapKnitter codebase.

Abstract/summary (<20 words):

Revamp mapknitter codebase and UI. Implement Version Control and Image Management System. Create an Image Overlay layer to show all images in a given region. Expand test coverage and add automation bots.

Problem

The aim of this project is to help users to have a better User experience and have better involvement while positioning images in mapknitter. The project aims to achieve the following milestones:-

Part 1

• Revamp image sidebar menu.
• Order Images in Sidebar.
• Apply filter with image sequencer and upload a new version.
• Save image instead of download.
• Version Control.
• Keyboard Shortcuts.
• Revamp image popover menu.
• Undo Redo changes.

Part 2

• Select multiple images to export.
• View all images for a given region in maps.
• Image timeline slider.
• Image upload speed optimization.
• Find nearby peoples.
• Get coordinates of the mouse pointer.
• Fork a map.
• Revamp Mapknitter UI.

Part 3 Synchronous Editing

• Create room, join room, link sharing.
• Real time image editing and placement.
• Undo redo changes.
• Lock and unlock editing.
• View and share mouse pointers.
• File change history.
• Increase test coverage.
• Addition of bots like codeclimate.

Implementation

• Revamp image sidebar menu.

Add the edit button to edit the image using image sequencer. Add place button which will place the image on map and unplace will remove from map. Currently, there is no unplace button so you cannot remove an image from the map. A expand button to expand the version history of an image.

• Order Images in Image Sidebar.

Drop down menu showing name, size and modified time to order them. Search bar to search image. Add Pagination.

• Apply filter with image sequencer and upload new version.

User can choose steps from drop down or enter steps separated by comma to apply image sequencer filters to Individual image or whole set of images. They can also save modified image.

• Version History.

Add save feature in Leaflet popup toolbar which save a copy of image instead of downloading.When save button is pressed it creates a image then it add that image to Image version history and mark that as active. on expanding version history user can see all version of image and choose the required version. We check for only image corners to reduce the size of our database because all other attributes remain same in other versions.

In this demo gif user can see version history, create new version and can rollback to desired version easily.

• Undo Redo.

User can easily undo changes using keyboard shortcuts which will improve the user experience a lot. Rollback to previous version of image from image history.

• Keyboard shortcuts.

Use mousetrap library to assign keyboard mapping to the leaflet popup toolbar. Examples: shift + s, shift+d to save and download the image.

• Expand Button.

Expand or minimize image history. Choose from image history to make it parent.

• Select multiple images to export.

All images have a status they are placed or not. So when user does not want to export that image it can simply change its status to unplace to remove that image from map. All image with status place will be exported. User can also simply select the desired images to export.

• View all images for a given region in maps.

Will use Leaflet Environmental Layers, which already has a MapKnitter API query to fetch maps in a given bounding box; then we'd just have to switch to displaying full images once you zoom in far enough. To display distortable images we need two things src file of the image and corner points of the image.

• Image timeline slider.

Add a slider view to display maps at that time period.Will use leaflet sliderControl.js

Demo

Pseudo Code

• Image upload speed optimization.

Use image compression libraries like tinypng to compress image.

• Find nearby peoples.

Find top contributors of that place and show that users on map

• Get coordinates of the mouse pointer.

Add feature which can tell coordinates of the mouse pointer on clicking.

• Fork a map.

Add option to freely experiment with changes without changing the original map.

• Revamp Mapknitter UI.

Will develop UI for the UI mockups created by Publiclab community after so much discussions and research. Publiclab Mockups

• Synchronous Editing.

"Last-write wins" isn't good enough for collaborative editors. To handle merge conflicts, there are 2 competing technologies: OTs and CRDTs. OTs require special handling for each & every command, so they are more error prone and adding features is a huge undertaking. CRDTs are simpler, at the expense of being more memory-intensive, which is usually an acceptable trade-off. Google docs uses diff-match pattern which is based on OT. However, Latest real time editors are built by using crdt.

Challenges in Real Time Content Sync

• Commutativity: Concurrent insert and delete operations converge to the same result regardless of the order in which they are applied.
• Idempotency: Repeated delete operations produce the same result.

Solution:

• Commutativity: Globally Ordered Characters. CRDT ensure commutativity by using fractional indices as opposed to numerical indices.
• Idempotency: Globally Unique Characters. CRDT ensure Idempotency by assigning Site ID and Site Counter properties whenever a new character is inserted.

We have two types of changes local and remote.

Remote change: insertion

• Get index of the preceding character in the CRDT
• Insert character in the CRDT
• Create a local change inserting a character at that index

Remote change: deletion

• Get the index of a character with the same position identifier in the CRDT
• Delete that character in the CRDT
• Create a local change deleting a character at that index

Local change: insertion at position n

• Find the nth and (n+1)th character in the CRDT
• Create a position identifier between character n and n + 1 and insert character in the CRDT
• Send out a remote insert change for that character

Local change: deletion at position n

• Find the nth character in the CRDT
• Delete that character in the CRDT
• Send out a remote delete change for that character

Please read this case study for a deep understanding.

Check this link for awesome-crdt resources.

I have prior experience of builting collaborating editors.I have built two text editor apps using CRDT.

• https://reator.herokuapp.com
• https://coderelayy.herokuapp.com

I have used Yjs framework to build these projects. Yjs is a framework for offline-first p2p shared editing on structured data like text, richtext, json, or XML. It is fairly easy to get started, as Yjs hides most of the complexity of concurrent editing.

Yjs offers multiple type of object.

But now challenge is to implement that for image editor. I have made a demo app for collaborative image editor. Right now Upload image, delete image, real time resize, replace, undo redo are implemented and working in real time.

Please check the video.

Timeline/milestones

Needs

I would need all the guidance and feedback from the community to ensure the project is heading in a desirable direction. I might also need the help of previous contributors of the project to understand the implementation of certain aspects of the project.

First-time contribution

At the time of writing this down, my contributions have been as follows.

• Pull Requests (10 total, 9 closed, 1 open): Navigate
• Issues (14 total, 9 closed, 5 open): Navigate
• Comments (on 39 issues): Navigate
• Review Requests (15 closed, 1 open): Navigate

---

Experience

I started my engineering journey from competitive coding. I usually take part in weekly and monthly contests held on codechef and hackerrank. I was selected for ACM ICPC onsite round in 2017 that was a proud moment because I was representing my institute for the first time at ICPC. I gradually moved toward software development.I am good at problem solving and solved 400+ questions on various competitive sites (stopstalk) I am a Full Stack Developer with more than 1.5 years of Experience.I have done programming in python , java, ruby, cpp. I have experience of software developement in ruby and rails, mern (Mongo db, express, react, node js)stack, lamp (linux, apache, mysql, php) stack. I have also experience of artificial intelligence and voice technologies. One of my voice assistant app mind games is in top 10 of the Google action store in games category.

I have been contributing to PublicLab from more than six months now and have also worked with PublicLab in GCI 2018 as a Google Code In mentor. In which I created and mentored 20+ tasks. I am a Google India Scholar who get an exclusive Android Developer Nanodegree traning program for 9 months. I am a certified android developer by Udacity and Google.

Projects:

• Readit: The user subscribes to a large number of subreddits, finds it hard to keep up with them.The Readit is an andorid app which will show you the top posts from all your favourite subreddits so you'll always be up to date.
• Reator: Reator is a decentralized code editor with real-time collaborative editing for browser with communication features. Reator uses Conflict-Free Replicated Data Types(CRDT) to make sure all users stay in-sync and WebRTC to allow users to send messages directly to one another. Inspired by google docs.
• EasyGst: Accounting Software for Small businesses in India.
• KnowQuest: Question Bank for our Institute.

Certifications:

• 2019, Google and Coursera, Advanced Machine Learning with TensorFlow on GCP.
• 2018, Google and Udacity, Android Developer Nanodegree.
• 2018, Google and Coursera, IT support Professional Certificate.
• 2017, ACM ICPC onsite round.
• 2017, IIITV hackathon runner up.
• 2017, Coursera, Programming for Everybody

Teamwork

I lead my team into ACM ICPC from our institute for the first time. I was also a slack moderator in Google Udacity Scholarship program. I have done various group projects. In my previous semester, we had a software engineering group project of 5 peoples. The project which we decide to work on requires a lot of new skills and challenges. However, we tackle all the problems and complete the project on time. I am also a Placement Cell Coordinator of my institute and coordinate placement activities. I have also volunteered for 1 month at a child NGO Sarthi to understand their real life problems and provide a technological solution to them.

Passion

I am inspired by the motive of Public Labs to learn how to investigate environmental concerns on your own. I love the idea of using inexpensive DIY techniques to make this planet a better place to live. It's everyone responsibility to take care of the environment. Improving workflow and user experience of mapknitter would encourage better participation and promote a wonderful community to unite and discuss problems and make a change to this world.

Audience

The target audience of this project are the users of these maps and the website. Improving UI,UX, and workflow of the maps will help users to understand the workflow easily and they can utilize the platform well. As a big fan of Open Source technologies, I intend to use only free software and technologies that are accessible to the community.

Commitment

I understand this is a serious commitment and equivalent to a full time summer job. I have a semester break from 8 May - 25 July. So I can give up to 8 hrs a day easily during this duration to this project. I have no further commitment this summer.