1. Principles and practices & Project management¶

This week I worked on defining my final project idea and started to getting used to the documentation process. To create the website, I set up mkdocs in a local environment and used git for version control.

Weekly Assignment Requirement¶

Principles and Practices
- Plan and sketch a potential final project.
Project Management
- Build a personal site describing you and your final project.
- Upload it to the class archive.
- Work through a git tutorial.

Have you answered these questions?

Principles and Practices
- Sketched your final project idea/s
- Described briefly what it will do and who will use it
Project Management
- Made a website and described how you did it
- Created a section about yourself on that website
- Added a page with a sketch and description of your final project idea(s)
- Documented steps for creating your Git repository and adding files to it
- Pushed to the class GitLab
- Signed and uploaded Student Agreement

What I’ve done this week¶

Sign up Student Agreement
Sketch the final project.
Build environment
Create a website

Sketch the final project.¶

This is my first idea for final project!

This is a trash box that automatically sort trash. I’m thinking of making a trash box for use at home or at Fablab Kuriyama.

WHY…you chose to do this project?
- As a requirement for taking the Fabacademy at Fablab Kuriyama, the goal of the final project is to find a problem in Kuriyama Town and solve it.
- Kuriyama Town has a very strict garbage separation policy.There are many types of garbage to be separated,
  - household trash segregation
    - Food Waste
    - Garbage that can be made into charcoal
    - Garbage that cannot be made into charcoal
    - Plastics
    - Cans, bottles and PET bottles
    - Paper
    - Iron, metal, aluminum foil
    - Wooden chopsticks
    - Glass
You can check this website to find out what type of garbage is covered by this site.

https://www.town.kuriyama.hokkaido.jp/site/trash/196.html

Even if it is the same plastic, there are different types of garbage depending on whether it has a mark on it or not.

If it is marked with this symbol, you can dispose of it in a plastic trash box.
HOW…you think you will make your Final Project (what sensors? Output? Etc)

I’m going to keep working on this project for three years after FabAcademy ends!

I would like to do image classification of all garbage in Kuriyama Town.

Due to the time schedule, I am thinking of creating each spiral.

In the first spiral, I would like to create a machine that recognizes trash with a camera and opens the lid of the target trash box according to the type of trash.

In the second spiral, I’m planning to make a trash box that uses a camera to recognize trash and a servo motor to dump the trash into the target trash box according to the type of trash.

In the third spiral I would like to improve the Second Spiral machine and make a machine using servo motors and stepper motors. Also, this mechanism is scalable, as you can put several trash boxes next to each other!

If there is enough time, I would like to install a meter on each trash box to show the amount of trash.

Also if time permits, I am thinking of installing other sensors along with camera image recognition. For example, a soil sensor can recognize wet garbage and prevent it from being thrown in the trash.

I’m considering the following flow.

ESP32 (self made board): Controlling servo motors and stepper motors

RaspberryPi & Pi camera: Use for image recognition

Soil sensor: measuring moisture content

Servo moter: putting the trash into the trash box

Stepper moter: putting the trash into the trash box.

Build environment¶

My laptop environment¶

The version of the tool I used this week is the one below.
- macOS Big Sur version 11.6 chip Apple M1
- zsh 5.8 (arm-apple-darwin20.2.0)
- iTerm2 Build 3.4.14
- Homebrew 3.3.11
- python3.9 / pip 21.2.4
- git version 2.32.0
- starship 0.57.0

Work efficiency setup¶

If you want to save the mac screenshot as jpg, you can change it from the default png format with the following command.👍

```
% defaults write com.apple.screencapture type jpg
```

Install as follows in Homebrew.

In order to install imagemagick, you need to install homebrew first

Homebrew

Paste this into a terminal on macOS.

% /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

After the installation is complete, check the version

% brew --version
Homebrew 3.3.11

When the version is displayed, the installation of homebrew is complete.👍

% brew install imagemagick

The following command compresses all the images in the directory under -path to 300x300 in a batch and uses the “-quality” option to determine the quality using a number between 1 and 100.

mogrify -path ./thm -resize 300x300 -quality 50 *.jpg

In Fabacademy, we need to process a large number of photos, so I would like to use the following commands to complete the processing in one shot.👍
If you want to process a single file directly, use the convert command.

convert -resize 300x300 -quality 100 ./sample1.jpg ./thm/sample1-300x300.jpg

Create a website¶

First, you need to install git and set up the ssh key for GitLab before creating the website.

install Git¶

Once homebrew is installed, install git.

% brew install git

After the installation is complete, check the version

% git --version
git version 2.32.0

When the version is displayed, the installation of Git is complete.👍

¶

As I have already setup my github account in my macbook, I decided to use existing account as it is. Follows are examples for confirming my account user.name and user.email.

% git config --global user.name
atsu

% git config --global user.email
mifutsua@gmail.com

Create an SSH Key¶

Enter the following command

% ssh-keygen -t rsa
Generating public/private rsa key pair.
Enter file in which to save the key() (/Users/atsu/.ssh/id_rsa)

If you do not want to set a password, press Enter three times

Enter passphrase (empty for no passphrase):
Enter same passphrase again:

Verify that the public key has been generated.

% ls ~/.ssh
id_rsa  id_rsa.pub

If these two files exist, the key has been generated. id_rsa is the private key and id_rsa.pub is the public key
Copy the contents of the public key with the following command.

% pbcopy < ~/.ssh/id_rsa.pub

Done with the terminal for now. The next step is to go to gitLab and set up the public key that you just created.

This is a screenshot of the repository where my fabacademy website is located.

Click the icon button in the upper right corner and select “Preference” => “SSH Keys”
Next, enter the public key and the name of the key

Once completed, you can see the key that has been set as shown below.

Now that I’ve registered my public key in gitlab, then go back to the terminal to work on it

Git management¶

Git is a version control tool.

Using Git, you can keep track of the version of the file you are editing.

Git Operation Flow¶

When using Git on your own PC (local environment), you need to remember that there are three main areas.

The working tree is the working area in a text editor such as VScode, and the files created and edited here are moved to the index by git add. When you are sure that you want to commit the file, use the git commit command to move it to the Repository.

working tree¶

The area where you are working. The actual files and directories.

index¶

The area for preparing to commit to the repository.

repository¶

The area for managing file version information.

If you want to share the contents of your local repository to a remote repository, use the git push command.

The following shows the process of changing the contents of the About page and pushing it to gitlab.

The process of pushing changes to gitlab¶

First, go to the page on gitLab where your website repository is located

Go to the terminal and enter the following command.

Command to create a directory

% mkdir fabAcademy

Command to move to the created directory

% cd fabAcademy

Command to display the directory hierarchy you are currently in.

% pwd
Users/atsu/fabAcademy

Paste the link you just copied after git clone and run the command

% git clone git@gitlab.fabcloud.org:academany/fabacademy/2022/labs/kamakura/students/atsufumi-suzuki.git
Cloning into 'atsufumi-suzuki'...
remote: Enumerating objects: 199, done.
remote: Counting objects: 100% (199/199), done.
remote: Compressing objects: 100% (83/83), done.
remote: Total 199 (delta 109), reused 191 (delta 104), pack-reused 0
Receiving objects: 100% (199/199), 410.36 KiB | 717.00 KiB/s, done.
Resolving deltas: 100% (109/109), done.

Command to check the contents of a directory

% ls
atsufumi-suzuki

Done cloned🔥

Next, go to the about page and modify index.md

% cd /fabAcademy/atsufumi-suzuki/docs/about
% ls
agreement.md    index.md

Use the text editor vim to update the contents of the file. You can open the index.md file in vim with the following command.

% vim index.md

You can view the contents of the file in a terminal as follows.
Make sure you are in normal mode in vim.If you are not in normal mode, press esc to enter normal mode.

Enter the following command, you can erase all the code written in the file.

:%d

All the contents of the file are deleted.

When you enter the i key in normal mode, you can enter insert mode.

Add the following text

# About me

![](../images/me.jpg)

Hi! I am Atsufumi Suzuki. I am a member of community-reactivating cooperator squad in Kuriyama Town.

:wq command is save and close Vim -> :wq (combination of :w and :q commands)

:wq

Set up Mkdocs¶

% python --version
Python 3.9.2

I’m using python 3.9, so I use pip3 to install mkdocs and the mkdocs plugin

% pip3 install mkdocs
% pip3 install mkdocs-material
% pip3 install mkdocs-git-revision-date-localized-plugin

I later realized that the require.txt file is in my website directory, so it is wiser to do a pip install in the following

% pip install -r requirements.txt

By entering the above command, you can install the items described in the file at once.
Here are the contents of the requirements.txt

mkdocs ~= 1.2.3
mkdocs-git-revision-date-localized-plugin ~= 0.11.0
mkdocs-material ~= 8.0

You can start the server with the following command

% mkdocs serve
INFO     -  Building documentation...
INFO     -  Cleaning site directory
INFO     -  Documentation built in 0.28 seconds
INFO     -  [20:54:27] Serving on
            http://127.0.0.1:8000/2022/labs/kamakura/students/atsufumi-suzuki/

Now that the local server is up and running, open the following URL in your browser

http://127.0.0.1:8000/2022/labs/kamakura/students/atsufumi-suzuki/about

When you want to quit mkdocs server, press the control key and the c key at the same time.

Next, Add the edited content to the local repository.

git pull beforehand, since someone may have made changes to my remote repository.

% git pull
Already up to date.

You can use the git status command to see the following
- List of files that have been git added but not yet git committed
- A list of files that have been edited, modified, or deleted, but not yet git added
- A list of files that are not Git-managed and not excluded from management by .gitignore

% git status
On branch master
Your branch is up to date with 'origin/master'.

Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)
  (use "git restore <file>..." to discard changes in working directory)
    modified:   docs/about/index.md

Untracked files:
  (use "git add <file>..." to include in what will be committed)
    docs/images/me.jpg

Add all files under working tree to index.

% git add .

Add all files placed in index to the local repository.

% git commit -m 'first commit'
[master 0c5b43f] first commit
 2 files changed, 1 insertion(+), 1 deletion(-)
 create mode 100644 docs/images/me.jpg

Next, push the information I’ve edited locally to the remote repository
Reflecting files in the local repository to the remote repository

% git push
Enumerating objects: 12, done.
Counting objects: 100% (12/12), done.
Delta compression using up to 8 threads
Compressing objects: 100% (7/7), done.
Writing objects: 100% (7/7), 17.44 KiB | 17.44 MiB/s, done.
Total 7 (delta 3), reused 0 (delta 0), pack-reused 0
To gitlab.fabcloud.org:academany/fabacademy/2022/labs/kamakura/students/atsufumi-suzuki.git
   7913691..0c5b43f  master -> master

Next, let’s check if the push was done and uploaded server properly in gitlab.

When you check CICD => Pipeline, you can see that the commit you pushed is marked as passed!

You can check the about page from this URL👍

https://fabacademy.org/2022/labs/kamakura/students/atsufumi-suzuki/about/

Done🔥

mkdocs yml configuration¶

I changed the color of the header and footer to black, and added extra.css to center the photos with #center added.

mkdocs.yml

theme:
  name: material
  palette:
    primary: black


extra_css:
  - css/extra.css

extra.css

img[src*='#center'] { 
    display: block;
    margin: auto;
}

You can center the image by adding #center after the image file path as follows

![](../images/week01/sample/sample.jpg#center)

Text Editor¶

I will be using vscode and vim as my main text editors in FabAcademy.

Visual Studio Code¶

Visual Studio Code is the most powerful editor that I know 🔥
You can download from here

Vim¶

I will leave the little fixes to Vim!!
Vim can be launched from the command line in an instant, allowing you to edit your code immediately
If you master Vim, you will be able to code faster. I’ve been using vim a little bit for two years now, but I’m still not very good at it. I will use Vim a lot in FabAcademy!

Visual Studio Code × Vim = 🔥🔥🔥¶

This is a plugin that allows vscode to use vim keybind.

You can install it by following these steps
- Extensions => Type “vim” in the textbox => click “install” button
Other plugins can be installed in the same way 👍
- My favorite plugin is Power Mode!
- While you are typing code in the editor, you can add any effect you want🔥

command Line Tool¶

iTerm2¶

iTerm2 is a replacement for Terminal and the successor to iTerm. It works on Macs with macOS 10.14 or newer. iTerm2 brings the terminal into the modern age with features you never knew you always wanted.

starship¶

The minimal, blazing-fast, and infinitely customizable prompt for any shell!
My configuration file starship.toml has the following settings

  add_newline = false

  [character]
  success_symbol = "🚀 "
  error_symbol = "🥺 "

  [git_branch]
  symbol = "🌍 "

  [git_status]
  conflicted = "💥"
  deleted = "🗑 "

  [package]
  disabled = true

What I Learned¶

Documentation will take time. I’ll try to make notes as I work.
The task of naming the large number of images was the most time-consuming because it could not be automated. It takes a long time to come up with names for images.😂
I had worked as a web engineer before, so I had no problem with this week’s assignment. From the next week, I would like to learn a lot as this is a new field for me.

Links to Files and Code¶

Personal Site

Appendix¶

Last update: February 19, 2022