Building interactive elements with HTML and javascript: Drag and Drop

{ Repost from my personal blog @ https://blog.codezero.xyz/building-interactive-elements-with-html-and-javascript-drag-and-drop }

Traditionally, all interactions in a website has been mostly via form inputs or clicking on links/button. The introduction of native Drag-and-drop as a part of the HTML5 spec, opened developers to a new way of Graphical input. So, how could this be implemented ?

Making any HTML element draggable is as simple as adding draggable="true" as an attribute.

<div id="a-draggable-div" draggable=true>  
    <h4>Drag me</h4>
</div>  

This will allow the user to drag div#a-draggable-div. Next, we need to designate a dropzone, into which the user can drop the div.

<div id="dropzone" ondragover="onDragOver(event)">  
</div>  
function onDragOver(e) {  
    // This function is called everytime 
    // an element is dragged over div#dropzone
    var dropzone = ev.target;

}

Now, the user will be able to drag the element. But, nothing will happen when the user drops it into the dropzone. We’ll need to define and handle that event. HTML5 provides ondrop attribute to bind to the drop event.

When the user drops the div into the drop zone, we’ll have to move the div from it’s original position into the drop zone. This has to be done in the drop event.

<div id="dropzone"  
ondrop="onDrop(event)"  
ondragover="onDragOver(event)"> </div>  
function onDrop(e) {  
    e.preventDefault();
    var draggableDiv = document.getElementById("a-draggable-div");
    draggableDiv.setAttribute("draggable", "false");
    e.target.appendChild(draggableDiv);
}

So, when the user drops the div into the drop zone, we’re disabling the draggable property of the div and appending it into the drop zone.

This is a very basic drag and drop implementation. It gets the job done. But, HTML5 provides us with more events to make the user’s experience even better 1.

Event Description
drag Fired when an element or text selection is being dragged.
dragend Fired when a drag operation is being ended (for example, by releasing a mouse button or hitting the escape key).
dragenter Fired when a dragged element or text selection enters a valid drop target.
dragexit Fired when an element is no longer the drag operation’s immediate selection target.
dragleave Fired when a dragged element or text selection leaves a valid drop target.
dragover Fired when an element or text selection is being dragged over a valid drop target
dragstart Fired when the user starts dragging an element or text selection.
drop Fired when an element or text selection is dropped on a valid drop target.

With these events a little bit of css magic a more user friendly experience can be created like highlighting the drop zones when the user starts to drag an element or changing the element’s text based on its state.

Demo:

https://jsfiddle.net/niranjan94/tkbcv3md/16/embedded/

External Resources:
Continue Reading Building interactive elements with HTML and javascript: Drag and Drop

SASS for the theme based concept

Until yesterday, I was exploring all around the internet, to find the best possible way for the theme concept in the web app. The theme concept allows an organizer to choose the theme for the web app from the set of provided themes.

After some time, I realised that this awesomeness to the web app can be added by using Syntactically Awesome Stylesheets.

How SASS supports the theme concept?

 

In the web app, a folder name _scss is added which has the directory structure as shown

tree
_scss folder directory structure

There is a file _config.scss inside the _base folder that includes the SASS variables which are used in all the files after importing it.

Each of the SASS variables uses a flag !default at the end, which means it can be overwritten in any other file. This property of SASS leads to the theme concept.

//_.config.scss

@charset "UTF-8";
 
// Colors
$black: #000;
$white: #fff;
$red: #e2061c;
$gray-light: #c9c8c8;
$gray: #838282;
$gray-dark: #333333;
$blue: #253652;
 
// Corp-Colors
$corp-color: $white !default;
$corp-color-dark: darken($corp-color, 15%) !default;
$corp-color-second: $red !default;
$corp-color-second-dark: darken($corp-color-second, 15%) !default;
 
// Fontbasic
$base-font-size: 1.8 !default;
$base-font-family: Helvetica, Arial, Sans-Serif !default;
$base-font-color: $gray-dark !default;
 
// Border
$base-border-radius: 2px !default;
$rounded-border-radius: 50% !default;
$base-border-color: $gray !default;

The main file that includes all the required style is the application.scss. Here, $corp-color takes default value from  _config.scss. It can be overwritten by the themes.

//application.scss

@charset 'UTF-8';

// 1.Base
@import '_base/_config.scss';

/* Offsets for fixed navbar */
body {
 margin-top: 50px;
 background-color:$corp-color !important;
}

Making a light theme 

 

The light theme will overwrite the $corp-color value to $gray-light which is defined in _config.scss. This will change the background-color defined in application.scss to #c9c8c8. So, in this way a light theme is generated. The similar approach can be followed to generate the dark theme.

//_light.scss

@charset 'UTF-8';
@import '../../_base/config';
// 1.Overwrite stuff
$corp-color: $gray-light;

@import '../../application';

Making a dark theme 

 

//_dark.scss

@charset 'UTF-8';
@import '../../_base/config';
// 1.Overwrite stuff
$corp-color: $gray;

@import '../../application';

How to compile the CSS from SASS files ?

 

  1. We can easily compile these SASS files by using command
    sass /path/application.scss /path/schedule.css

    For generating light theme and dark theme:

    sass /path/_light.scss  /path/schedule.css
    sass /path/_dark.scss  /path/schedule.css

Optimization of Code

 

SASS is very powerful for optimizing the code. It allows the concepts such as nesting, mixins which reduce the line of code. I have rewritten schedule.css into application.scss to make it more optimized.

/* Adjustments for smaller screens */

@media (min-width: 450px) {
 body {
 font-size: 14px
 }
 .session {
   &-list{
     .label{
         font-size: 90%;
         padding: .2em .6em .3em;
           }
         }
    &-title {
         float:left;
         width: 75%;
         }
    &-location {
         float: right;
         width: 25%;
         text-align: right;
        }
  }
}

Further Exploration

 

This is one of the ways to deal with the SASS structure, but there are other resources that can be helpful in dealing with SASS projects.

Also, check out, Jeremy Hexon article here.

Continue Reading SASS for the theme based concept

steam-shell: Two processes in one terminal

Community bonding period turned out to be quite fruitful I got to know my community really well and not only that I also solved quite a number of issues which helped me understand the code base. Daily scrum meetings played a very important role in making us work professionally and cover some substantial work. Official coding period began on 23rd May and I was all set for the challenges and the sleepless nights to come. Here I will be discussing the tasks I covered in my first week.

As suggested by my mentors I had changed my plans a bit by moving the work on edit command before implementing the TLS layer on COAL. I started small by fixing the edit command. The edit command opens the specified file in vi/vim/emac. In vi and vim the editor was misbehaving and not letting us work on the file. I took up this as my first task for Google Summer of Code 2016. This helped me understand steam-shell and applauncher, which is used to load the editor, in detail. Vi and vim editors have an advantage of letting the user edit the file in the same terminal window.

Looking at the issue itself it was not possible to do any kind of backtracking. The vi editor was just throwing rubbish on the screen when the user attempted to type anything.

overlapping process
vi editor showing the garbage and the steam-shell command

At first I was under the impression that it was a problem with the editor itself. I even tried approaching the vi.stackexchange.com , where the vi developers could help me. However all this was in vain. After a lot more forensics and re-reading the code multiple number of times I realized two process were active and sharing the same terminal space. How did I come to this conclusion? Well it was a very minute detail that I noticed. While in the vi editor window, with the document open and the editor throwing garbage at you when you press the up arrow the editor clears some area and show the commands executed on the steam-shell. This can be seen in the above image

This simply meant that both the process for steam-shell and the vi editor was running and sharing the same terminal space. The solution was quite simple. Just called editor→wait() to suspend the calling the process till the called process was over.

Continue Reading steam-shell: Two processes in one terminal

Swagger

Swagger is a specification for describing REST APIs. The main aim of Swagger is to provide a REST API definition format that is readable by both machines and humans.

You can think of two entities in a REST API: One the provider of API, and another the client using the API. Swagger essentially covers the gap between them by providing a format that is easy to use by the client and easy for the provider to define.

If not using Swagger, one would most certainly be creating the API first, writing the documentation (human-readable) with it. The client developer would read the documentation and use APIs as required. With Swagger, the specification can be considered as the document itself, helping both the client developer and the provider.

Here’s an example spec I wrote for our GET APIs at Organizer Server: https://gist.github.com/shivamMg/dacada0b45585bcd9cd0fbe4a722eddf

The format, although readable doesn’t really look what a client developer would be asking for.

Remember that the format is machine readable? What does it mean exactly?

Since the Swagger spec is a defined format, the provider can document it and people can write programs that understand the Swagger specification. Swagger itself comes with a set of tools (http://swagger.io/tools/) that use Swagger definitions created by the API provider to create SDKs for the clients to use.

Swagger-UI

One of our most used tools at our server is the Swagger UI (http://swagger.io/swagger-ui/).

It reads an API spec written in Swagger to generate corresponding UI that people can use to explore the APIs. Every API endpoint can have responses and parameters associated with it. For instance our Event endpoint at Server (“/events/:event_id”).

You can see how the UI displays the Model Schema, required parameters and possible response message.

Screenshot from 2016-06-07 19:08:21

Apart from documentation, Swagger UI provides the “Try it out!” tool that lets you make requests to the server for the corresponding API. This feature is incredibly useful for POST requests. No need for long curl commands in the terminal.

Here’s the Swagger config from our demo application: https://open-event.herokuapp.com/api/v2/swagger.json

The Swagger UI for this config can be found at https://open-event.herokuapp.com/api/v2

The UI for the example spec (gist) I linked before can be browsed here.

Swagger-js

https://github.com/swagger-api/swagger-js

Swagger-js is JS library that reads an API spec written in Swagger and provides an interface to the client developer to interact with the API. We will be using Swagger-js for Open Event Webapp.

Here’s an example to show you how it works. Let’s say the following endpoint returns (json) a list of events.

/events

The client developer can create a GET request and render the list with HTML.

$.getJSON("http://example.com/api/v2/events", function(data) {

  var events = "";
  $.each(data, function(i, event) {
    events += "<li id='event_" + i + "'>" + event.name + "</li>";
  });

  $("ul#events").html(events);
});

What if the provider moves the endpoint to “/event/all”? The client developer would need to change every instance of the URL to http://example.com/event/all.

Let’s now take the case of Swagger-js. With Swagger-js the client developer would essentially be writing programs to interact with the API Swagger spec defined by the provider, instead of directly consuming the API.

window.client = new SwaggerClient({
    url: "http://example.com/api/v2/swagger.json",
    success: function() {
      client.event.getEvents({
        responseContentType: 'application/json'
      }, function(data) {

        /* Create `events` string same as before */

        $("ul#events").html(events);
      });
    }
  });

 

The APIs at the Organizer server are getting more complex. Swagger helps in keeping the spec well defined.

That’s all for now. Hope you enjoyed the read.

Continue Reading Swagger

REST API Authentication in Flask

Recently I had the challenge of restricting unauthorized personnel from accessing some views in Flask. Sure the naive way will be asking the username and password in the json itself and checking the records in the database. The request will be something like this-

{
	"username": "open_event_user",
	"password": "password"
}

But I wanted to do something better. So I looked up around the Internet and found that it is possible to accept Basic authorization credentials in Flask (sadly it isn’t documented). For those who don’t know what Basic authorization is a way to send plain username:password combo as header in a request after obscuring them with base64 encoding. So for the above username and password, the corresponding header will be –

{
	"Authorization": "Basic b3Blbl9ldmVudF91c2VyOnBhc3N3b3Jk"
}

where the hashed string is base64 encoded form of string “open_event_user:password”.

Now back to the topic, so the next job is to validate the views by checking the Basic auth credentials in header and call abort() if credentials are missing or wrong. For this, we can easily create a helper function that aborts a view if there is something wrong with the credentials.

from flask import request, Flask, abort
from models import UserModel

app = Flask(__name__)

def validate_auth():
	auth = request.authorization
	if not auth:  # no header set
		abort(401)
	user = UserModel.query.filter_by(username=auth.username).first()
	if user is None or user.password != auth.password:
		abort(401)

@app.route('/view')
def my_view():
	validate_auth()
	# stuff on success
	# more stuff

This works but wouldn’t it be nice if we could specify validate_auth function as a decorator. This will give us the advantage of only having to set it once in a model view with all auth-required methods. Right ? So here we go

def requires_auth(f):
	@wraps(f)
	def decorated(*args, **kwargs):
		auth = request.authorization
		if not auth:  # no header set
			abort(401)
		user = UserModel.query.filter_by(username=auth.username).first()
		if user is None or user.password != auth.password:
			abort(401)
		return f(*args, **kwargs)
	return decorated

@app.route('/view')
@requires_auth
def my_view():
	# stuff on success
	# more stuff

I renamed the function from validate_auth to requires_auth because it suits the context better.

At this point, the above code may look perfect but it doesn’t work when you are accessing the API through Swagger web UI. This is because it is not possible to set base64 encoded authorization header from the swagger UI. For those who are wondering “what the hell is swagger”, I will define Swagger as a tool for API based projects which creates a nice web UI to live-test the API and also exports a schema of the API that can be used to understand API definitions.

Now how do we get requires_auth to work when a request is sent through swagger UI ? It was a little tricky and took me a couple of hours but I finally got it. The trick therefore is to check for active sessions when there are no authorization headers set (as in the case of swagger UI). If an active session is found, it means that the user is authenticated. Here I would like to suggest using Flask-Login extension which makes session and login management a child’s play. Always use it if your flask project deals with login, user accounts and stuff.

Now back to the task in hand, here is how we can set the requires_auth function to check for existing sessions.

from flask import request, abort, g
from flask.ext import login

def requires_auth(f):
	@wraps(f)
	def decorated(*args, **kwargs):
		auth = request.authorization
		if not auth:  # no header set
			if login.current_user.is_authenticated:  # check active session
				g.user = login.current_user
				return f(*args, **kwargs)
			else:
				abort(401)
		user = UserModel.query.filter_by(username=auth.username).first()
		if user is None or user.password != auth.password:
			abort(401)
		g.user = user
		return f(*args, **kwargs)
	return decorated

Pretty easy right !! Also notice that I am saving the user who was currently authenticated in flask’s global variable g. Now the authenticated user can be accessed from views as g.user. Cool, isn’t it ? Now if there is a need to add a more secure form of authorization like ‘Token’ based, you can easily update therequires_auth decorator to get the same results.

I hope this article provided valuable insight into managing REST API authorizations in Flask. I will keep posting more awesome things I learn in my GSoC journey.

That’s it. Sayonara.

 

{{ Repost from my personal blog http://aviaryan.in/blog/gsoc/auth-flask-done-right.html }}

Continue Reading REST API Authentication in Flask

Webapp: The generator for making schedule pages

Why a static HTML generator

 

Before we start working on more advanced features like push notifications and iCal exports etc, we have been working on getting a generator (a simple node.js script) up, that can take data for an event either in form of json files, or from a given API in open-event data format, and generate a schedule page.

It has been used to generate the programm page of OpenTechSummit 2016 (http://2016.opentechsummit.net/programm/)

It is based on the open-event-scraper   project of FOSSASIA, and some more features had been added when developing it for OTS16. Some of the new features include –

  • Ability to define copyright and license in the API/Json, and generator adds it in the footer
  • Ability to define sponsors (support for upto 3 levels are there), and the generator adds sponsor logos with links at the bottom of the page.
  • Ability to embed audio, slides and videos into the session cards.

How the process works

Right now if you take a look at the open-event-scraper project under opentechsummit (which is a fork from the FOSSASIA repo, and being used to develop the new features) , you’ll see the process goes like this –

  1. The scraper.py file scrapes data about sessions and speakers from an internal Google Sheet we have. Then the event.py file gets data about the event itself (copyright, links to social channels).

    This step is not needed if we are using a JSON API endpoint. This is needed only if the data source is a Google Sheet, then local JSON files are created.

  2. Once we have an endpoint or JSON files locally downloaded, there a node.js script – generator.js   which generates a static HTML page.
  3. The generated HTML page is based on a handelbars template – schedule.tpl where all the required markup is there.
  4. And finally there is our own stylesheet which is called schedule.css  and is a very lightweight styling addition, on top of what is majorly a vanilla bootstrap layout.

The road ahead

Going forward we will pull back in this source code to our main repo https://github.com/fossasia/open-event-webapp .

Then we’ll add some parameters that can be fed to generator.js when calling it, like  –

  • Name of event
  • Color scheme
  • URL of endpoints

This will have a minimal form-like frontend

We can host this on heroku then, where filling the form, will run the generator.js and the generated HTML and associated CSS files will be available as a zip.

Continue Reading Webapp: The generator for making schedule pages

Self-Contained Folder For Webapp

The first version of Open-event-webapp will be a generator that will create the web app.

This week I have worked on various OTS issues that will become the basis for the web app. The OpenTechSummit web app works along with Open-event-scraper.

The web app can be generated in any empty repository and can be hosted with gh-pages by just running build.sh  file from the Open-event-scraper. This is the build.sh file I have written for doing this.

build file
build.sh

 

How can you create the webapp from scraper in your repository ?

 

1 . Replace the URL of the repository in git clone command.

git clone – – depth=1 < destination repo url > ots-repo

2 . Run the file build.sh from  Open-event-scraper.

./build.sh

 

Utility for transferring content using build.sh

 

The build.sh file is written to make a folder that is self-sufficient. It means it can be taken anywhere and it should work on its own.

The build.sh file first creates a clone of the destination repository in the local Open-event-scraper. It itself make the required folders inside the cloned repository and runs generator.js which provides index.html file according to the template schedule.tpl. The resync command that is known as remote sync is used to transfer the files remotely. A programm folder is created automatically that includes all the CSS, JS,  JSON and other important files used to run the web app.

Finally, the programm folder along with all necessary files is pushed to gh-pages branch of the destination repository.

Working Example

 

To create the web app I have replaced the destination URL as shown in the image.

4

After running the build.sh we will get the output as shown :

1 .

8
Programm folder ( self-sufficient)

2.

9
Sub folders inside Programm folder

That’s how a folder is generated which contains all the necessary files needed to run the web app.

Continue Reading Self-Contained Folder For Webapp

FOSSASIA Summit 2016 Science Centre Singapore – Wrap Up

FOSSASIA 2016 took place from 18th -20th March in Singapore. Hong Phuc DangMario BehlingHarish Pillay, and Roland Turner were leading the organization efforts for the 2016 summit supported by many volunteers, speakers and the community. With a good mix of 37 nationalities, we are proud to be one of most international developer events in Asia.

We would like to especialy thank our host venue and the wonderful team of the Science Centre Singapore, our partner UNESCO Youth Mobile and our sponsors Red Hat, Google, GitHub, MySQL, Hewlett-Packard Enterprise, gandi.net, General Assembly and the Internet Society Singapore for their support and participation. Thanks to everyone who helped to make FOSSASIA 2016 in Singapore possible!

FOSSASIA 2016 Group Photo at Science Centre Singapore by Michael Cannon

FOSSASIA’16 NUMBERS & FACTS

  • We reached the number of 2,917 attendees over 3 days including 230 speakers and 72 volunteers.
  • With a good mix of 37 nationalities, we are proud to be one of most international developer events in Asia.
  • There were 201 scheduled sessions and lightning talks, and more 50 exhibitors.
  • This was the first year we organised Tech Kids program with 14 hands-on workshops that covered Mobile Development, Electronics, Digital Fabrication, Pocket Science and 3D Modeling.
  • Dozens of talks are already available as videos. Thousands of photos have been uploaded to social networks. 1500+ tweets with the FOSSASIA hashtag were posted during the event.
  • A trend analysis of FOSSASIA shows that web technologies, data analytics and Internet of Things have a huge momentum. The attention of developers is also increasingly turning to open hardware.

Opening HallMario Behling the superman behind our programCat Allman

Happy Volunteers

Day 1 Opening of FOSSASIA

The first day started at the OpenTech and IoT track with a warm welcome message from Mr. Lim Tit Meng, the director of Science Centre, follow by some of our keynotes including Cat Allman with her inspiring story on Science & Education Program at Google; Harish Pillay with his intriguing title ‘A Funny Thing Happened On My Way To The Science Centre’ revealing the history of Internet and Open Source; Bernard Leong caught a huge attention on ‘Rethinking Drone Delivery with Open Source’; and Davide Storti introduced the exciting MobileYouth Program at UNESCO. The day continued with many other interesting talks/discussions and five other tracks were opened that afternoon of the same day namely Tech Kids, Hardware and IoT, DevOps, Big Data, Internet Society and Community.

More Photos: [Photo 1], [Photo 2], [Photo 3] – Tech Kids Track

Day 2 Intensive day of workshops and more discussion

Stephanie Taylor opened the second day of FOSSASIA with her informative presentation on Google Summer of Code Program and Google Code-In. Many GSoC and GCI students from Asia attended this year FOSSASIA. The day continued with series of workshops and discussions on Hardware, IoT, and DevOps. Four new tracks were added into the program including OpenTech Workshop, Python, WebTech and Databases.

Popular DevOps Track

Harish Pillay proudly presenting his first computer

Day 3 Hack Sunday and the closing notes

At the last day, we opened another three new tracks: Privacy and Security, Linux and MiniDebConf, Design VR and 3D. More hacking activities took place on Sunday. Participants formed in-depth discussion groups.

People gathering at the closing

Exhibition

More than 50 project booths and hand-on demos were set up in the Science Centre’s public space where participants could hang out, chat, discuss, share, learn, and hack.

Nanyang Polytechnic teacher and students presenting their Student Enrich ProgramExhibition hallUNESCO YouthMobile InitiativeSnapshot of Red Hat booth – Developers ChatGitHub corner

FOSSASIA – a place of friendship and joy.

As always thanks to our photographer Michael Cannon and his team for capturing some of the very best moment of us. You can search for more photos by typing #fossasia on Twitter or Flickr. If you also want to share some photos you took during FOSSASIA with us, please get in touch with me [email protected]

Excited developers from across Asia
Baby Py with her parents at the social event

What’s next in 2016?

  • FOSSASIA will again participate at Google Summer of Code
  • Call for collaboration: We welcome new contributors to FOSSASIA current projects
  • A number of new releases of FOSSASIA software projects and our event planning applications are planned. Please check out http://github.com/fossasia and http://github.com/loklak
  • Many people in the FOSSASIA community organize developer meetups throughout the year. Please join our meetups in Singapore, in Dubai and many other cities in Asia.

Blog Posts

Many participants at FOSSASIA have blogged about the event. Some links here:

Kushal Das – kushaldas.in
Fedora Community Blog – p96.io
Anwesha Das – anweshadas.in
Garvit Delhi – garvitdelhi.blogspot.com
Ankit Ashukla – ankitashukla707.wordpress.com
Sundeep Anand – sundeep.co.in
Jigyasa Grover – jigyasagrover.wordpress.com
Michael Downey – talk.openmrs.org
Owais Zahid – eleventhlane.wordpress.com
Woo Hui Ren – woohuiren.me
Daniel Pocock – danielpocock.com
Tobias Mueller – blogs.gnome.org/muelli
Menghsuan Tsai – facebook.com/notes/

Links

FOSSASIA Photos: https://www.flickr.com/photos/fossasia/

FOSSASIA Videos: Youtube FOSSASIA 

FOSSASIA on Twitter: https://twitter.com/fossasia

FOSSASIA Sg Meetup: http://www.meetup.com/FOSSASIA

Continue Reading FOSSASIA Summit 2016 Science Centre Singapore – Wrap Up

Enhancement of steam-shell plugin and Import from git

(ˢᵒᶜⁱᵉᵗʸserver) aims to be a platform for developing collaborative applications.
sTeam server project repository: sTeam.

Indentation of output made independent of the screen-width.

There were errors encountered in the pull request. These needed to be modified. The notable one’s were the Indentation of the output displayed by the look command in the steam-shell. The earlier display was taken into consideration that the default size of the linux terminal is 80 char long. However this can differ from individual to individual terminal settings. Therefore the module reference of pike was studied and a method to display the contents in the output of ls command format was written down. Thus,  now the output is independent of the screen width of an individual.

Issue. Github Issue Github PR
Indentation of output in steal-shell. Issue-24 PR-42

Indentation

Also there were minor errors in the edit.pike script. These were resolved too. The edit.pike was not able to exit the program. Therefore an exit(0) call was made. This resulted in the edit.pike being able to exit successfully but a new error was introduced in the steam-shell.pike. When the edit.pike command was called inside it, the steam-shell.pike would exit on successfully completing the edit command. The steam-shell should not exit in this case. There were changes made in the VisTeam.pike, edit.pike and applauncher.pike in order to get the utility working correctly.

Issue. Github Issue Github PR
Edit.pike hangs on closing Issue-29 PR-44
Edit command closes the steam-shell abruptly Issue-43 PR-44

The steam-shell vim plugin was modified and the support for multi line commands was added. Now the user can type the commands in multipe lines, format them and then execute them. The output will be displayed in a new tab.

Issue. Github Issue Github PR
Integrate sTeam-shell into Vi. Issue-37 PR-41

An example of it can be seen below:-

ListGates
Output:

OutputMult

The import-from-git.pike script is used to import contents from a normal git repository into the steam directory. The import from git script was studied and understood initially. The issue’s listed were replicated in the system and a possible solution for them was found out.

The script has support for importing multiple documents at the same time. Also the objects imported supported only text mime type. The script was modified to support other mime types by initially detecting them through an external process. However later in the server/factories/Document_factory.pike file the auto detecting of mime type was found out and used in the code. Now the mime types are detected and updated successfully for documents of other mime types like MP3, jpg, png etc

Issue. Github Issue Github PR
Auto-detect Mime type. Issue-18 PR-45

ImportMimeType

The contents of objects of types other than text mime type were not been read by the existing process. As a result this resulted into creation of empty objects with the set mime type. The process to read the contents was modified and the contents of objects of other types were set accordingly. The content is read in the form of a string. Since every object can be read as a string.

However in the import-from-git an issue was encountered. Indexing over Null value with set_contents for every object created by the script. On running the script again the earlier object is successfully imported but the same error is encountered over the next object to be imported. This issue would be looked down and tried to be solved. Also support for importing single objects will be provided.

Error1

 

Checkout the FOSSASIA Idea’s page for more information on projects supported by FOSSASIA.

Continue Reading Enhancement of steam-shell plugin and Import from git

Towards a unified digital aproach to knitting

Our idea is to create a knitting library for a format that allows conversion of knitting projects, patterns and tutorials. Usually, communities will only focus on the knitting format for their machines. Our approach should be different and be able to support any knitting communities efforts.

Here is our strategy to achieve this:

  • We connect to different communities to get a broader view on what their needs are.
  • Our knitting format is based on knitting instructions like knit, purl, yarn over, skp. We found a comprehensive list on Wikipedia.

Other Communities

From time to time we meet with other people who also knit and could use our software.

First, we met with Viktoria from ETIB Berlin. She taught us a lot about knitting, how she does it, that almost everything could be created from one peace with the machine. Also, that AYAB is used for lace patterns. We saw examples where she let meshes fall so that larger holes were created. Our goal is to support laces in the file format.  Color patterns should be possible across sewing edges.

We are also in touch with Valentina Project. With their software we would be able to connect to yet another community and use their sewing patterns for custom-fit clothes.

We got in touch with Kniterate. They and we share a lot of goals. Because they create a startup, they are very cautious what they release. They focus on their open-source knitting machine first and later on the software. They already created an editor much like we imagined ours to be, but as a web application. A way of collaboration could be that we understand their file format and see how we can support it.

Only talking about our GSoC project is worth it as other people may have seen alike at Maker Faires and other hacky places. We have the chance to bring communities and efforts together.

Knitting Format

A universal knitting format has many concerns:

  • Languages of users differ
  • It should be possible to knit by hand
  • Mesh sizes and wool differ
  • Different knitting machines with different abilities
  • A knitting format for exchange is never complete. A knitting format for machines must be complete.

In contrast to a knitting format for a automatic machine, it is possible, to have machines operate in semi-automatic modes or just to knit by hand. In both cases, meshes could be changed in a way that was never foreseen. This is why we did not base it on meshes and mesh types but rather on instructions – closer to the mental model of the knitters who perform instructions with their hand.

Some of the instructions are understood by the machines, some could be adapted a bit so the machine can do it automatically or faster and some are still necessary to be done by hand. We created a Python module for that, “knittingpattern“. We work on it in a test-driven way.

 

Continue Reading Towards a unified digital aproach to knitting
Close Menu