Knitting Web App FrontEnd with Pattern Editor Knitting Simulator

Hi everyone, I am Sameera Gunarathne and I am a computer science undergraduate of University of Moratuwa, Sri Lanka. This is the first time I have applied for the GSoC and FossAsia and I am quite excited to  give my contribution to FashionTec as it’s a whole nice new experience that programming is applied with real world applications in fashion and technology paradigm. I have selected for developing a Graphical User Interface which runs as a web application which is intended to provide a common platform to give input for the knitting machine firmware.

As the first step I had to research on the existing knitting applications that are available online commercially and what they provide as features that still need to be included in open source knitting applications. I have looked into both knitting pattern design softwares and knitting machine embedded softwares including knitbird, EnvisioKnit ,Stoll knitting software, ShimaSeiki SDS One Knit. The most significant feature I have noticed is the feature rich pattern editor provided with the software. They provide features like loading patterns from different formats(jpeg, png,gif,pdf), transform patterns(crop,replicate etc) to create new patterns, drawing tools to create a pattern from scratch, Provide colour palette with available yarn carrier colours, Saving and loading the work done by the user in the application storage etc.

Therefore in this GSoC period I am developing the assigned Web User Interface with consisting of following components.

Web App FrontEnd

  • Work Space + Pattern Editor
  • Knitting Simulator
  • Project Manager

Web App Back End

  • Web Client Server component(REST Api to communicate with knitlib interface)
  • Request Handler for back end logic
Screenshot from 2015-06-02 09:37:09
Logical Architecture Diagram

Knitting Simulator is used to simulate the knitting process through the user interface while the knitting is going on. It will display the carriage details, current knitting progress and a graphical simulation of the current knitting position of the pattern with row details. Project Manager component is to save knitting works as projects and load them later as the user preference.

The selected technologies for the project implementations are mainly JavaScript(node js for back end and angular js for front end implementations), HTML & CSS (render static content). REST Api for communicating with knit lib interface will be implemented in node js. The offline usage of the app will be implemented using Electron Framework.

This project consists of 4 milestones and under the first milestone I am working on the pattern editor features. Currently I have implemented loading different types of patterns into the workspace and pixelate them according to the number of rows and stitches allowed for the knitting. Following tasks will completed end of this week.

  • Identifying individual pixel in the grid as a stitch and add operations such as change colour, size etc.
  • Adding pattern editor tools for selecting pattern area, colour picker, crop-cut-paste tools for pattern replicating.
Screenshot from 2015-06-05 11:41:15
Current Implementation of Pattern Editor

I hope this GSoC will be a fruitful one to spend with a successful implementation of the knit web app and looking forward to provide a competitive open source knitting software at the end of the development :).