Week 01. Principles and Practices / Project Management

Assignments for this week

plan and sketch a potential final project
work through a git tutorial
build a personal site in the class archive describing you and your final project

What I've done this week

Setting up PC enviroments
- Visual Studio Code (VScode)
- Git
- MkDocs
Create a website
- Choose a style
- Customize website
Plan a final project
- I want to make somethng to do with lights!
- Making images of my lamp
- How it would look like

1. Setting up PC enviroments

The First thing I did this week was Setting up my PC enviroment.

Here are the version of tools I use.

MacBook Air (M1, 2020)
macOS Monterey 12.3.1
VSCode 1.74.3
zsh 5.8 (x86_64-apple-darwin21.0)
Homebrew 3.6.20
python 3.10.8 / pip 22.3.1
git 2.39.1
mkdocs 1.4.2

I changed my mac screenshot setting from the default(PNG) to JPG with the following command.

defaults write com.apple.screencapture type jpg

Choose Text Editor

Tex Editors are software where you write your codes in.

I chose VScode for my text editor.

VScode has wide range of extensions that help you code, debug and visualise your work. Here are the extensions I installed for Fab Academy:

Git History
HTML CSS Support
Markdown All in One

Getting started with Git

I followed this tutorial of Git.

Step 1. Download Git

brew install git

Step 2. Identify user

git config --global user.name "sosuke"
git config --global user.email "sosuke.kanegae@mat.eng.osaka-u.ac.jp"

Step 3. Check if there is any SSH-Key existing

(check)
cat ~/.ssh/id_rsa.pub

If not generate SSH-Key.

(generate)
ssh-keygen -t rsa -C "sosuke.kaneage@mat.eng.osaka-u.ac.jp"

Step 4. Check the public key you just created

cat ~/.ssh/id_rsa.pub

Clone my repository from GitLab to a local workspace

Now so that I got Git ready, I prepaired a new directory to store everything I do with Fab Academy.

cd ~/FabAcademy/
mkdir workspace

In new workspace, I first cloned my repo on GitLab

git clone https://gitlab.fabcloud.org/academany/fabacademy/2023/labs/kitakagaya/students/sosuke-kanegae.git

Now, I have a newly cloned directory "sosuke-kaneage" in my workspace. And, I am ready to edit my website.

Setting up MkDocs

Using MkDocs, you can easily create documentatoin websites. You will have to code in HTML, CSS and JavaScript to create a website. However, in MkDocs all you have to edit is Markdowns, which is easy to use.

Step 1. Install MkDocs

pip install mkdocs

Step 2. Create new Mkdocs project in workspace

cd ~/FabAcademy/workspace
mkdocs new fabacademy-docs

Step 3. Launch test server

mkdocs serve

Now, I have a MkDocs project with the default settings in ~/FabAcademy/workspace/fabacademy-docs. And, I can check how the website will look in my browser(http://127.0.0.1:8000/).

Build, Commit and Push

After editing MkDocs project, I have to convert the markdowns to HTML files.

cd ~/FabAcademy/workspace/fabacademy-docs
mkdocs build

The build commmand creates HTML files in ~/FabAcademy/workspace/fabacademy-docs/site/

To build directly into the git directory, add the following line to ~/FabAcademy/workspace/fabacademy-docs/mkdocs.yml

% mkdocs.yml site_dir: ../sosuke-kanegae/public/

Finaly commit changes in local git repo and push to remote GitLab repo.

git commit -a -m 'Comments about changes'
git push

Instead of commit and push in the command line, you can also commit and push from the Git tab in VScode.

You can find the Git tab in the left column of the window. Click the tab and you will see a blue "Commit" button. Underneath the button, you can check the changes you made from last time. If you're good with the changes you can just simply press the "Commit" button. Or, you can select "Commit & Push" in the option of the "Commit" button.

commit in VScode

When everything is up to date in your local repo, the blue button will turn into a sync button. The number written on the button indicates how many times you commit since you last push git. To push you can simply press the sync button.

push in VScode

Finally, when you have pushed and everything is up to date, the blue button will return into "Commit" and will be deativated

2. Create my website

Choose a style

There are several optional styles available for MkDocs. third party themes

I chose Bootswatch Theme, because the menu interface was very useful.

You can access to every page on my website easily.
There is a content on every page, so you can jump to any h2 tag.

Customize website

I customize my website by editting: ~/FabAcademy/workspace/fabacademy-docs/mkdocs.yml

I add Copyrights by adding the following line.

copyright: Copyright 2023 Sosuke Kanegae - Creative Commons Attribution Non Commercial

I made a link to the source code in GitLab by adding:

repo_url: https://gitlab.fabcloud.org/academany/fabacademy/2023/labs/kitakagaya/students/sosuke-kanegae

3. Plan a final project

I want to make something to do with lights!

I'd like to make a lamp that changes its appearance depending on the situation for my final project. Just putting a lamp in a room changes the atmosphere of the room. Every lighting equipment has its own mood.

Among lighting equipments used n the daytime, my favorite is a projector with streaming devices. Streaming devices like AppleTV and Chromecast show pictues and landscape movies when they are at screensaver mode. I love the way pictures and landscape moving slowly on my wall. So, I want to make a lamp with silhouettes moving around the lamp shade.

I love watching candles before bedtime. It makes me relax and feel calm. But, fire is dangerous. especially if you fell asleep with your candels on. I want to make a bedroom lamp that glows and flicker like a candle.

These two are the concept of the lamp I want to make. It's not just I want to make both type of lamps, but I want to make a lamp that switches between the two.

The lamp will change mode like:

Turns ON with sunlight silhouettes (birds, butterflies and flowers) moving around the lampshade. (Senses enviormantal light)
Changes to candle mode at bedtime. (Senses enviormantal light going low)
Turns OFF when everybody is asleep. (Timer or acoustic sensor)

Making images of my lamp

I visualized the concept above using 3D CAD, graphic editor and AI art generator.

3D CAD: Fusion360
graphic editor: Affinity Designer
AI art generator: wonder

Step 1. Modeling the outline of my lamp

The first thing I made is a 3D model of the outline of my lamp. I modeled a lamp that is shaped like a large snowdome. I inserted a lightbulb in the lamp.

lamp_sketch1 lamp_sketch2