Functionality of KnitWeb Application

Hi Everyone,

In this blog post I will show what are the functionalities implemented in KnitWeb application. First of all let us look into why there is a web application to get a knitting job done. It’s simple. Going for a web application is the best way to acheive platform independence among all the knit app firmware. So the if the hardware level functionality can be abstracted out to a separate library then the web application can use that and provide a common interface to all different knitting application platforms. This is what we have been doing in this GSoC, to provide a common platform and interface for all open source knit app solutions.

So let’s look at the KnitWeb Functionality. KnitWeb consists of two major components, KnitWeb front end and KnitWeb back end logic. KnitWeb front end consists of a pattern editor for edit loaded patterns to workspace, Simulator for show knitting progress and a drawing tool for draw a pattern from scratch. Therefore Pattern editor component is used for easily edit the pattern before send for knitting.

Knitting Simulator is used for render knitting progress to the user with a enhanced user experience. It also consists of main controls for knitting job which user can start/pause/stop a job while knitting.

KnitWeb Drawing tool is used to generate a pattern from a scratch. It provides basic drawing tools including pencil, line, basic shapes and color palette. It also used for replicate a pattern from a existing pattern or a image. Then user can export it to the workspace to continue knitting job.

Pattern Editor Usage

Pattern editor gives following functionality to the users

  • Loads the pattern according to number of rows and columns(stitches) to the editor. Pattern is pixelated as the defined number of rows and columns.

Screenshot from 2015-08-25 08:42:41

  • Select pattern area using square/free hand tools. Then edit colour values of selected area.

Screenshot from 2015-08-25 08:57:28Screenshot from 2015-08-25 08:59:53

  • Show colour regions of selected area/whole pattern and easily edit their colour values.

Screenshot from 2015-08-25 09:08:03

  • Configure machine type and Available ports before creating a knit job. In this step knit web client is communicating with the knit lib server to get those information. After that user can click proceed knitting button to create a knit job.

Knitting Simulator Usage

Screenshot from 2015-08-25 12:14:40

  • Knitting simulator provides knitting progress to the user with enhanced user experience. Current knitting progress is shown to the user as above and also with a progress bar.
  • Knitting simulator window consists of other meta data input needed for configure knitting pattern(knitpat) file such as Start Line, Start Needle, Stop Needle, Number of colours used etc.

Screenshot from 2015-08-25 12:19:33

Drawing Tool

Screenshot from 2015-08-25 12:25:19

  • Drawing tool is used to generate a pattern from scratch or design patterns by replicating image or a texture.
  • After editing finished pattern can be exported to the workspace.

Apart from the above mentioned components edited patterns at the pattern editor can be downloaded as a image file. Also multi-language translation is added by @shiluka to the knit web interface. following is the translation for german language

.Screenshot from 2015-08-25 09:36:08

This sums up the most critical functionalities of knitweb application. I would like to continuously contribute to FashionTec as this inspired me to research and do things that I have not done before. :).

Also here is a little demo on the functionality of knit web. demo link

Thank You 🙂

Importance of a pattern editor for knitting applications

Hi Everyone, I am Sameera Gunarathne who is a participant for GSoC ’15 for FossAsia under fashion and technology. I am developing web based GUI for knitting applications. Today I am going to talk about importance of integrating a pattern editor inside knitting applications and little bit about my work on the pattern editor implementation.

Why knitting application should have a pattern editor? It’s to simply give the user capability of doing all the editing work on the pattern before it is sent for knitting. Therefore user will be able to proceed the whole knitting process using one application. User doesn’t have to use a separate application to edit the pattern and then import the pattern to the knitting software to get knitting done. Also most these pattern editor applications are commercially available which means user has to pay for the application and its updates. So that’s extra money. Some examples for available pattern editor softwares are knitbird , envisioknit , stitchmastery  etc.

KnitBird application
KnitBird application

So what about open source knitting machine software with a feature rich pattern editor? Cool right. I am working on integrating feature rich pattern editor for the knitting web application that I am developing for FossAsia this GSoC. Following features are already added to the pattern editor implementation.

  • Getting a loaded pattern to a pixelated grid to give user a easily editable interface.[1]
  • Pixelated pattern can be generated from available yarn colours that used for knitting.[2]
  • Cropping tool for load necessary parts from the pattern.[3]
  • Rectangular/Free Hand selection of loaded pattern.[4]
  • Editing colour details of a selected area of the pattern.[5]
  • Drawing tool for the loaded pattern. [6]

User is given capability to regenerate the pattern according to the available yarn colours for the knitting. This functionality allows user to understand how the actual knitting output will be there with the available yarn colours. Below are the some of screen shots of current implementation.

Loaded pattern in pixelated grid
[1] Loaded pattern in pixelated grid
Pixelated pattern can be generated from available yarn colours
[2] Pixelated pattern can be generated from available yarn colours
Cropping tool
[3]Cropping tool
Rectangular selection
[4]Rectangular selection
Free Hand selection
[4]Free Hand selection
Editing colour details of a selected area
[5]Editing colour details of a selected area
Drawing tool
[6]Drawing tool
I am very much enthusiastic on the project and working hard to get a good outcome for the knitting web application implementation. See you with the next blog post update. Thanks :).

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 :).