Principles, Practicals, and Project Management

Even from the first week the academy has challanges us with new different world. As an lecturer in electronics and stuffs, website design is totally new for me. I know little bit about HTML, but Markdown? Gitlab? No Idea!.

I once designed static website in localhost. I have never pushed my website online. But now, Neil and friends in fablab academy encourage me to step up! Okay!

Final Project

Tale to tell

As the institution where I am working plans to establish a fabrication lab aims to support three selected Research Group (RG), so that I am obligated to support one of them which is Smart Agriculture RG. One of the product that this RG working on is to producing high quality melon as shown below.

According to their experience, 3 days prior to harvesting (subject to regular schedule), melon should be regulary monitored as such a high quality melon can be produced. Usually, a farmer walks through the aisles and check the melon one by one. The farmer will see whether observed melon is ripe and ready to harvest or not. This activity includes monitoring to the plant conditions.

When a farmer do the monitoring, as can be seen from Figure below, the position of melon is far below. Hence, the farmer should position their body to reach melon’s position as shown below.

Even if this is a body position when harvesting, the thing is, they are similar when they conduct monitoring process. Imagine if there are hundreds of plant they should check. It will hurt them. Hence, I propose a solution to use Automatic Guided Robots that can check the plants one by one with the help of various components such as sensors, screen, motors, and magnetic tape as its guided trajectory.

The Sketch

The design is a result of intensive discussion with friend from Smart Agriculture Research Group, we made sketch of what the product will be. The sketch can be seen below.

This is just simple robot with height around 30 cm, because the position of melon is not too far from the ground. The robot will have 4 wheels (DC motor) controlled by microcontroller and drivers. The robot read data from RGB camera and color sensors. The data will be processed using simple Machine Learning algorithm. This robot will walk by following magnetic tapes on the floor. The reason why I choose this because it will be easier to control it than ordinary line follower. Magnetic tape can survive from water drops, stains, and small disturbance that ordinary line follower can’t tackle.

The criterias of melon are ready for harvesting based on papers and person from Smart Agriculture RG are:

1. Surface color is yellow-brownish.
2. A crack on the edge of the lemon.
3. No smell like other fruits.
4. “Web” network on the surface is dense.

In this case, we select indicators number (1), (2), and (4) to decide whether the melon ready to harvest. The “kinda” detail electronics part is shown on below image.

This robot comprises of 3 parts which are sensors, a screen, and motors. Table below shows components will be used in the future. The detection results alongwith other data will be displayed in free IoT platform like thingSpeak. This will help users or farmers to monitor the melon maturity detection.

I am planning also to add hands with lidar sensor attached on both hands to get exact boundaries of melon. It can be used for many purpose for example helping camera to measure dimensionality of the melon. One of Smart Agriculture RG member said that this data can also be used further to map weight of melon with their dimensionality. They are linear and possible to formularize.

Project Management

There are several project management explained by Neil and Our Instructor in Kamakura fablab. They are easy to understand. What I captured from their explanation is I should choose one best match to my condition and characteristic. After taking some time, I decide that I can walk along with Modular and Hierarchy style.

I complete this week task by establishing priorities. First of all, I make sure that I understand about Gitlab platform then continue to learn the editing in local repository. The editing happened in local repository along with the image and video captured for documentation. For my final project, I will make guided robot for smart agriculture. They can be separated into several parts like Brain, Legs, Sensors Systems, and can be further added with hands (additional feature if time is enough). For that to succeed, I plan to work on below plan designed using online gantt chart.

Develop Knowledge Regarding Git

What is Git?

According to wikipedia, Git was created by Linus Torvalds in 2005 for development of the Linux kernel, with other kernel developers contributing to its initial development. Git is a software for tracking changes in any set of files, usually used for coordinating work among programmers collaboratively developing source code during software development. Its goals include speed, data integrity, and support for distributed, non-linear workflows (thousands of parallel branches running on different systems).

What is Gitlab?

Gitlab is a version control software which aims to keep the historical record of all changes made to files and documents. By this definition, we can revert back to an earlier version whenever needed.

Gitbash

Quoting Atlassian, Git Bash is an application for Microsoft Windows environments which provides an emulation layer for a Git command line experience. Bash is a popular default shell on Linux and macOS. Git Bash is a package that installs Bash, some common bash utilities, and Git on a Windows operating system.

The installation of Git bash is pretty easy. All you need is solely following the instruction given in each steps. Normally Git bash comprises of two application, which are GUI and Command Line Interface (CLI). For novice, it is quite difficult to understand what can be done with CLI, but one should try because it is more convenient to do all activities in this application. Gitbash can be downloaded from this link.

Markdown Installation

Git installation is quite stressfull especially when you are not familiar with Unix instructions. The installation of Git on local computer is easy. The installation is fully based on command line, and we can find a lot of help available on the internet. Weapons that you already have in hand:

• Google
• Instructors
• Friends
• One and Only is the PYTHON

One should pay attention to the existance of Python in the system. It is better to have Python 3 installed on your computer instead of Python 2. Markdown is developed based on Python, hence you should install it first where you can download it form here.

Let’s start the How To steps:

1. Fire up your Git bash

   There a lot of supporting libraries for MarkDown. Only install what you need for your website. For default theme used in Academy, all you need has been provided in a file called requirements.txt which is an ordinary text file that you can open using any text editor, for example notepad.

   Type below command singly to open the text file.

   $ touch requirements.txt
   $ notepad requirements.txt
                                               

2. Write command below

   $ pip install mkdocs==1.2.3
                                               

   This statement will install mkdocs version 1.2.3 in your computer. Perhaps you would be asking why the version is written with == differs to what inside the *.txt. Just to let you know that this is the valid way to write version in Python installation process.

3. Write command below

   $ pip install mkdocs-git-revision-date-localized-plugin==0.11.0
                                               

   This is a plugin that we need for our website.

4. Write command below

   $ pip install mkdocs-material==8.0
                                               

   It will install material in your computer, needed by our website as well.

The installation process runs automatically. So that, once you push [ENTER], you should let it working itself.

Working in Local Repository

Working directly on gitlab repository is exhausting. So that, I encourage myself to work on local repository. Luckily, this can be done easily using Git bash. First of all, we should download whole repository using below command

$ git clone git@gitlab.fabcloud.org:<your git>
                                            

When succeeded, it will display some lines that indicate 100%. Remember where you store all the files locally. When you try to clone in the same directory, it will alert a message: Destination path already exists and is not an empty directory.

SSH-Key Generation

SSH-Key plays important role. It will be the identity that online and local repository should have. It is needed when the first time connection is made. Here are the steps to generate SSH-Key on your local machine prior to storing them to Git lab.

1. Fire up your Git bash.

2. Generate SSH-Key by entering

   $ ssh-keygen -t ed25519 -C "write-your-email"
                                               

   Tips

   Normally, based on the explanation in Git, filename of ssh-key is ed25519. When the snippet is executed, it will create ~./ssh folder in your computer. You would find two files which are id_ed25519 and id_ed25519.pub. While statement “write-your-email” can be anything. I just write what people usually writes which is email address. In the generating process, you will be asked with some questions, you can just push [ENTER] on your keyboard.

   For example:

   

3. Copy your keygen by entering

   $ cat id_ed25519.pub
                                               

   You will get something like this

   

4. Open your Git on browser then go to Preferences then SSH Key. Then do: fill in ssh-key, title, and expires date. To finalize, click Add key button. Don’t worry about the expires date, I read somewhere in the forum that connection still can hold when it passed.

5. To synchronize ssh-key on your local repository and cloud (Gitlab), in Git bash, type below

   $ ssh -T <git@gitlab.fabcloud.org>
                                               

   You will be informed that the authenticity of host can’t be established. It happens because this is your first time connects to Gitlab. Do not be afraid! All you have to do is to type yes then [ENTER]. Then your local and cloud have been connected. Remember that you only need to do this once unless you change your SSH-KEY again. When you type that statement again after the confirmation, you will get

   

   Tips

   If you skip step 5 and proceed to git clone you will get similar confirmation. Just do the suggestion in that step.

Script Editor

There are a lot of script editor available to use. One should choose what convenient to them. You can choose VIM, Sublime, Visual Studio Code, Atom, Bracket, so on. As I used to use Visual Studio Code (VS Code) for Single Board Computer based on Python programming, I decided to use it.

The benefits of using VS Code are it can open full folder of local repository complete with the tree. It also generates HTML version of your website automatically. The most interesting from this software is it is linked to windows store where we can install an application to review the result of MKdocs editing. By having this review application program, we can directly see the effects of editing locally without using browser.

$ mkdocs serve
                                            

Publish!

There is a cycle, which is simple, that we can remember easily when developing website from local repository using Gitlab. Here is an image from our instructors in Kamakura fablab.

Here are the complete steps of how to publish your designed website from local repository to the cloud:

1. If this is the first time you open try to connect with Git lab in cloud, you should provide your user name and email.

   $ git config --global user.name <your_username>
   $ git config --global user.email <your_email>
                                               

   You will only do that once. Do it line by line as shown below. You should also notice that when you already in correct local directory (the one that contains Gitlab tree), there is written your status as Master.

   

2. Normally, when you start from empty folder, you should initialize the local directory to create .git file. But, we already have cloned version of our Gitlab. So, we don’t need this.

   $ git init
                                               

3. If you did some editing to your local repository and want to publish them then you can follow the cycle on the image. It is better to you to check what files that you have modified. You can do this using git status.

   $ git status
                                               

   

   You can see that there are 3 files have been modified. The modification can be adding files, removing files, updating files.

4. After that, we should complete the pending action. If there are files have been removed from local repository, we should confirm them. If there are files have been added, we should confim them as well. To cut the story short, we can just use git add . to complete all those tasks.

   $ git add .
                                               

   or, we can do one by one:

   $ git add /images/week01/bla-bla-bla.jpg (for example)
                                               

   

   When there is no [ERROR] message, then you are good to go.

5. We can check again the status of modification by using git status.

   

   When everything is just green and white, then the action is succeed. You are good to go.

6. Then we use git commit prior to pushing to the cloud.

   $ git commit -m "Say_Anything"
                                               

   Please write only informative phrase in “Say_Anything”. Let people know what update you just pushed into it. Here is the result.

   

   Tips

   You should not forget this line. When you push local content wihout this statement, you might get something like this, where it thought you already have up to date data in the cloud. Something that we should avoid.

   

7. Last step to push local content to the cloud is using git push.

   $ git push -u origin master
                                               

   It is all working fine when you have something like below image.

   

$ git pull
                                            

Markdown or HTML, what do you choose?

HTML is developed for the first time by Tim Berners-Lee in 1990. HTML which is abbreviated from Hypertext Markup Language is normally used to create documents that are published in WWW (world wide web). Usage of HTML is pretty easy. Website created solely on HTML is said to be static website. Markdown, abbreviated with MD, in a nutshell is a simple form of HTML. With this, we are no longer need to write HTML commands when building our static website. In many case, we can replace their commands with symbols. Basically, HTML code is shown below

<!DOCTYPE html>
<html>
<head>
<title>Fab Academy 2022</title>
</head>
<body>
<p class="bla-bla">Hello World.</p>
</body>
</html>
                                            

An example of how Markdown can simpify the usage of HTML in developing static website is shown in table below.

Image Insertion and Manipulation

There are a lot of options for free image manipulation software, either based on GUI or CLI. In this task, I use frequently CLI software to help me creating images to display in this website whatsocalled ImageMagick. The developer provides software for Linux, MacOs, and Windows Operating System. As I am a Windows user, I chose binary (executable) file that can be installed with GUI in my computer. This software can be downloaded from here.

This software comes with many features that we can get from professional photo editing software, even if it does not as complex as others. The benefits that we can get from this software are

1. Resizing
2. Format conversion
3. Animation
4. Image identification
5. Image calculator
6. Other interesting digital image processing method.

In this weekly task, I utilize this software mostly for image resizing and quality reducing (for now).

Image Resizing

Generally, the steps for image resizing are

1. Start Git bash and direct to image sources

2. Type commands below

   $ magick <source_image> -resize Value_in_% <dest_image>
                                               

   or

   $ convert -resize Value_in_% <source_image> <dest_image>
                                               

   Basically, ImageMagick has registered itself to windows path, so that we can call any of its commands anywhere. Hence, when using its functionalities, we can type either magickin front of real instructions or directly the function like convert then followed by other statements.

For example: As I want to put 4 images in one raw without using certain formatting, then I just make their dimensional proportional to browser width. I did not change its extension and quality. Then I did:

The differences between before and after action are shown below

It is clear that image after conversion is down-resized into 70% of original dimensional.

Image Quality

The aim of this feature is to reduce quality of source image without changing its dimensional. In order to do this, you can simply type

$ magick <source_image> -quality Value_in_Int <dest_image>
                                            

In my machine it is

Then, the results are

As can be seen, even if their dimensionality is exactly the same, the image after action has smaller size in Byte.

Video Insertion and Manipulation

For video manipulation, I prefer to use CLI ffmpeg. This utility comes with ImageMagick as an option when installing the software as can be seen below.

This video is a 12 seconds video with high definition with the resolution is 1920x1080. The video was recorded using OBS Studio which can be downloaded here.

You can ask for properties that a video has using command below

$ ffmpeg -i <source_video>
                                            

According to FFMpeg, size of the video is 11.62 seconds with bitrate 1381 kb/s as depicted by image below.

The example of instructions set to reduce the dimensional of a video is

$ ffmpeg -i fab-test-video.mp4 -vcodec libx265 -crf 28 fab-test-video-red.mp4
                                            

After compression, the video becomes

The comparison of original video and compressed version is

It can be seen that original video with size 1.959 KB has been reduced to 990 KB, the compression rate is 50.54%. By using FFMpeg, you also can record your screen by below statement. It will record screen with high definition (1920x1080) starting from top-left corner (0, 0).

$ ffmpeg -video_size 1920x1080 -framerate 30 -f x11grab 
                                                -i :0.0+0,0 -c:v libx264rgb -crf 0 -preset <dest_video>
                                                

There are many actions we can do with ffmpeg as well as ImageMagick.

Table of Contents

• Head
• Final Project
• Tale to Tell
• The Sketch
• Project Management
• Develop Knowledge Regarding Git
• What is Git?
• What is Gitlab?
• Gitbash
• Markdown Installation
• Working in Local Repository
• SSH-Key Generation
• Script Editor
• Publish!
• Markdown or HTML, what do you choose?
• Image Insertion and Manipulation
• Image Resizing
• Image Quality
• Video Insertion and Manipulation