Fablabbombay | Sudarshan Kondgekar

Install Operating system to work on

You can select eiter Linux, Mac or Windows. My favourite is Ubuntu Mate (Linux). Still you need Windows because CAD softwares for Linux are still under developement. Hence to use CAD softwares I prefer to have Windows installed along side Ubuntu Mate.

I had a tough time installing Ubuntu Mate to run alongside windows. Hence I would like to share my experience.

There are 2 ways known to me to install Linux

Using Live USB (Dual Boot)
Using Oracle Virtual Machine

Since dual boot is faster than Virtual machine I choose to go with dual boot installation for Ubuntu Mate.

Making persistant usb drive

Persistant USB drive if a USB drive which you can plug in to your computer and boot from pendrive. Your linux distribution sits in your pendrive and you can work on linux.

Steps:

Grab a computer which has linux installed.
This is important as I found 'mkusb' program which can make persistant live USB for Ubuntu Mate. You can use windows computer to make non persistant USB drive
https://help.ubuntu.com/community/mkusb/persistent
Or Use follow below link to make live usb using windows https://www.ubuntu.com/download/desktop/create-a-usb-stick-on-windows
Boot from USB : https://www.lifewire.com/how-to-boot-from-a-usb-device-2626091
Ready to work on Linux
Alternatively you can install Ubuntu Mate in dual boot

Ubuntu Mate 16.04 Installed

Text Editor

Tried text editors

Pluma : Native Text editor for Ubuntu Mate.
This is very basic and may not be suitable for html.
Emacs : Very advanced. Runs within terminal. Steep learning curve.
Nano : Pretty basic. Runs within terminal. Ideal for quick code editing over ssh
Visual Studio Code : Open source Code editor. Good for code editing. User friendly
Komodo Edit : Open Source Code editor. Similar features as that of Visual Studio Code

After trying above text editors. I found Komodo Edit comparitively better. Because code completetion in Komodo Edit works great. For Javascript, HTML, jQuery it has best code completetion.

If code completetion didnt work for jQuery.
Got to Menu -> Edit -> Preferences -> Code Intelligence. And Check jQuery under Api Catalog section

Komodo Edit Installed

Creating folder structure for website

Creating clean folder structure is important while creating a website. I had planned to make html and javascript website. And folder structure is created as shown below

View your website

Its is okey to directly open your html files using browser. But better way is to use Simple python server.
Run terminal under your website foler and run following command

python -m SimpleHTTPServer

This will start python server. Then you can browser to http://localhost:8000 to see your website. Keep terminal window open to keep server running

Include Bootstrap, jQuery

Bootstrap and Jquery are easy to start making a website. Due to following advantages

Bootstrap makes your css styles consistant accross multiple browsers.
Jquery makes it easy to manipulate your html DOM (Document Object Model)

I have used maxcdn to include Bootstrap and jquery.
Added following code in header of my html

Find latest bootstrap cdn at https://www.bootstrapcdn.com/alpha/

and Jquery at https://code.jquery.com/

        
          <head>
            <title>
              Fablabbombay | Sudarshan Kondgekar
            </title>
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
            <link rel="stylesheet" href="css/styles.css" >
            <script src="http://code.jquery.com/jquery-3.1.1.min.js"  crossorigin="anonymous"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
            <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
          </head>

I have used

tag of html here to show html code inside browser

Introduction to Git

Click here to Open cheatsheet in new window

Git commands used

git add .

Adds all changes and ready to commit

git commit -m "commit message"

Local repository gets updated

git pull

Get latest repository from network

git push origin master

Pushes current files to git network repository

Signup and signin to fabacademy git repository

Navigate to http://git.fabacademy.org
Click on sign in with fablab
Following screen will be shown. Signup and sign in

Click on explore projects
Click on all
Search for your fablab name
Site will show all repositories under your fablab
Click on main repository naming fabacademy2017/[yourlabname]

Click on Fork

This will clone repository to your version of repository

How to push your repository to remote repository

git remote add origin [Repository Adddress]

This command will add remote repository address in your local repository

git push origin master

Will push all your local commits to remote repository

git pull origin master

Will pull all remote commits to local branch

How do I managed my archive

Documenting our work on website with timely git updates to repository is really nice way to track my work and progress without losing anything. Git records every incremental update.
This is how I have done it.

Listing Available Remotes

Pulling Updated Changes from remote repository

Adding changes to staging

This is about to commit stage

Local text editor nano will open where commit message is typed

Ctrl + O : Which will save message
Ctrl + X : Which will exit text editor and save commit

Committed Changes

Pushing local commited changes to remote repository

Compressing images

Photos taken using a mobile phone or any camera are initially very big. Approximately 2 to 3 MB is size for each. Technically there is no issue to put such image on your website but each time anyone opens your webpage browser will try to download entire image. Which obviously take time for such large image.

To improve loading time and to reduce download size of your webpage you need to optimise your images for web. Typically no screen is more than 1024px hence it it recommanded to scale your image size to a width of no more than 1024px unless you are specifically want to compress.

Imagemagick is a command line tool which you can use to convert your all images into compressed size. Following are some of the commands which you can use

mogrify -resize 1024x768 -format jpg -quality 75 *.png

Command will compress all images in place. Previous images will be replaced with compressed images.
Make sure you backup your original images before using this command.
Instead try using convert command

You can refer below links for Imagemagick options

http://www.imagemagick.org/script/command-line-processing.php

Files for download

For windows users I have made a zip file which consists of required software and other instructions to compress files on windows.
How to Compress images on windows.zip

Final project proposal

Collision detector sensor ring

Concept here is to find out if axis is perpendicular to surface below.
It will consist of 4 nos of ultrasonic distance sensors which will contineously detect for distance from surface. As soon as there is a significant change in distance detected by sensors system will alert that there is mis alignment