2024-02-22

Week 1 Recording

2024-02-20

Week 1

Welcome to Week 1!

0. Intro: what are we doing here?

This is a weekly meetup to teach students skills to make interactive prototypes and to help them learn how to engage in research. In my mind these things are deeply linked; whenever you build something you should understand what else has come before and improve upon it. Much is inspired by Seymour Papert and constructivist learning, innovation-through-play. I’m here to (1) help teach you skills to build anything, (2) help mentor you toward research publication.

This is loosely based on MIT’s How to Make Almost Anything.

Meet David and learn about his research.

1. Familiarize yourself with what is possible and what you can do!

MAKING:

When it comes to this get-together:

Familiarize yourself with what others have made as final projects.
Check out some of the other projects, like machine week, and the overall curriculum.
Take a look at what other students have done here. This is a goldmine!

In general, good places to start are:

Hack-a-day - consider entering a contest!
Make Magazine
Hackster.io
Adafruit - parts and tutorials!
Sparkfun - parts and tutorials!
Seeed Studio - parts and tutorials!
Hacker News - read this for your news!

RESEARCH:

When you build something, do something new! You might as well take a quick look at what others have done, and try to tweak it in at least one way that makes it new in some way that matters– something uniquely yours. This takes a fun project and makes it something you can use in your portfolio, publish in a peer-reviewed venue, and accelerate your career. Here are some examples of what that could look like for you:

New Interfaces for Musical Expression - You can publish here; just build something new!
Computer Human Interaction - You can publish here! Take a look at extended abstracts (pdf) and/or browse the publications that correspond to each of these projects.
IMWUT - What makes a pair of glasses a ‘distinguished paper’ at a major journal? Look at the paper to understand its research justification.

TOOLS:

These are my preferred tools:

3D Parametric Design: Fusion 360, OnShape (Both free)
PCB Design: Altium, KiCAD (Both free)
Coding: Python (high-level, AI, etc), Javascript (Web, Mobile App, Backend - Node, React, React-Native, Firebase), C (embedded, low-level)
Microcontrollers: Atmel AVR, STM32
Vector Graphics: Illustrator, Inkscape, CorelDRAW

2. Register with gitlab; set up a website.

Get set up with our gitlab and create a basic website: https://gitlab.depaulhacks.com.

The guide for this is here

(1) introduce yourself and (2) describe/visualize a project you’d like to build! Check out project ideas if you’re interested in deeper mentorship on research, or propose something yourself!

For more help, check out this, this, and this. This page is the example hexo pages project (source code); This is a Pelican example, (source).

3. Let’s get started with Embedded programming.

A basic introduction from Arduino.

Today we’ll jump into a basic ESP32 example. You will need to connect to IoT_IRL network with password DePaulIRL. The slides and the basic sketches are here

This is your introduction to the world of programming microcontrollers. Check out the ESP32 Guide to Libraries.

4. What does the future hold?

Next week we’ll start to dig into electronics theory fundamentals in a rapid fire way; we’ll cover roughly (in order)

basic firmware (today).
basic analog components, using test equipment, hooking up analog/digital components, AVR and microcontroller basics.
advanced plug-and-play; tutorials, parts, toolchains, gotchas. Batteries, etc
signals and basic signal conditioning, buffering, filtering, sampling theory.
basic input devices you might use, shopping for them.
basic output devices you might use, shopping for them.
practical tips for building physical systems. McMaster, 3D printing, NEMA motors, rails, delran, threaded inserts, safety, tolerances, choosing a material and process.
intro to PCB concepts data sheets, picking parts. Development lifecycles. Options for ordering and making.
advanced PCB - intro to PCB design software and making a custom board.
advanced firmware– threading, RTOS, semaphores, memory management.
an introduction to networking and linux.
advanced networking: ble, wifi, coap, lora, zigbee, thread, matter, uwb, gps.
sensor fusion, control systems, and advanced topics in data.
build an app to work with your device.
advanced apps: backends and third-party APIs.
machines: laser and vinyl cutter
machines: 3D printer and plastics
machines: shopbot
building machines: motors, rails, machining, tolerances, ideas.
projection mapping, cueing, and system design. ROS, MQTT, pub-sub, Qlab, madmapper

2024-02-20

Getting Started - Make a Website and Edit it with Git

STEP 1. Register and make a project for yourself.

1.A Go to `gitlab.depaulhacks.com`.

1.B Register.

It will only allow you to register with a `YOURNAME@depaul.edu` address. Don’t forget to confirm with your email, it will only allow you to log in for three days unless you confirm. Check your spam, it almost certainly went there!

Email You'll Recieve

1.C Request access to the group ‘original_hackers’.

Click Groups (left menu) > Explore Groups (top right) > original_hackers > ... (top right) > Request Access.

1.D After you’ve been added, initialize a website.

Go to Groups (left menu) > original_hackers > New Project > Create from Template.

We suggest using either Pages/Plain HTML, Pages/Hexo, or Pages/Pelican.

Pages/Plain HTML will work out of the box and is the simplest.
Pages/Hexo will require a local copy to alter the template and some basic modifications to work. I’ve had some issues changing the theme, so you might be stuck with default (bonus points if you can fix this!) To see the templates you can use, check out Hexo Themes. This page is made with the Hexo default theme.
Pages/Pelican will require slightly more modification to work out of the box, but is lighter weight than Hexo. Check out Pelican Templates to see what you can make. This page is an example with a new theme.

Feel free to explore other options as well, as long as they work with Gitlab Pages.

Make your website public. Name your website first initial + last name.

Setting up Your Website

If you get an error that you cannot import a project, it’s because the administrator set you as ‘Developer’ for a group and not ‘Maintainer’. Ask for a refund.

Welcome to gitlab, you’ve successfully created a project!

At this stage, your website will not be visible. However, if you push a change to the code, it will deploy. If you have an HTML site, you can make a trivial change and it should appear.

Demo in class: Make an html website. Add it to the group and name it dramsay (so we get …/2024/dramsay as the url). Add this in the online editor:

In the navbar:

<a href="https://people.depaulhacks.com/dramsay/getting-started/">Getting Started Instructions (and a Hexo Site Example).</a>
<a href="https://people.depaulhacks.com/2024/project-ideas/">Project Ideas (and a Pelican Site Example).</a>

In the header:
<h1>Welcome from David Ramsay!</h1>

Add to the <p>:
Check out the repo <a href="https://gitlab.depaulhacks.com/2024/dramsay">here</a>.

Check out BUILD > JOBS to see it process.

https://gitlab.depaulhacks.com/2024/dramsay is the gitlab repo and it appears at https://people.depaulhacks.com/2024/dramsay.

Step 2. Set yourself up to work on your gitlab project locally.

Now we want to set ourselves up to work on this locally. (This is especially true for Hexo and Pelican projects). We need to add SSH keys.

2.A Install GIT.

Follow this guide.

Time to add an SSH key

2.B Generate an SSH key if you don’t have one.

Check ~/.ssh/config to see if you have something in there for git. You should potentially see an IdentityFile. If not ssh-keygen -t ed25519 -C "<your_email>@depaul.edu".

2.C Add SSH key to Gitlab:

Copy the key (if you have an existing file, open it and copy it); i.e., cat ~/.ssh/id_ed25519.pub (pub is public, the non-pub is private).

Go to gitlab, Your Face > Preferences > SSH Keys > Add New Key and paste it. Hit the ‘X’ in the date so it doesn’t expire.

Add an SSH Key

2.D Add new config to your local `~/.ssh/config`:

Host gitlab.com-<USERNAME>
    HostName gitlab.depaulhacks.com
    User git
    IdentityFile ~/.ssh/id_ed25519
    IdentitiesOnly yes

Your .ssh/config file

2.E Now we’re ready to work! Go to a new directory and clone your project with `git clone <Your-Repo>`.

For example, I’ll open a terminal, go to my documents folder (cd Documents) and clone my repo git clone https://gitlab.depaulhacks.com/dramsay/getting-started.

2.F Modify your code! (use a code editor like Sublime or Atom, or start to learn VIM or EMACS!)

For HEXO PAGES, now is the time to add a theme and fix things up. We need to edit _config.yaml; we can edit the title, description and author. For the url, make it 'https://people.depaulhacks.com/2024/<YOURUSERNAME>' and for the root make it "/2024/<YOURUSERNAME>". If you get these wrong, the page won’t load the stylesheets.

I still haven’t had luck changing the theme; if you can get this to work that’s great, please share how! They are available from hexo themes. You likely need to nest their theme repo in your project repo; to do this you probably need to use submodules instead of cloning their repo directly. In my case (using ‘light’), I need to run git submodule add https://github.com/hexojs/hexo-theme-light themes/light from the root directory of the project, and make sure that’s reflected in the theme line of the _config file (theme: light). We also need to change our .gitlab_ci file to add - git submodule init and - git submodule update to our before_scipt section.

This page is the example hexo pages project; compare your code to its source code.

For PELICAN PAGES, now we need to make some big changes, especially to the .gitlab_ci file. Take a look at this example. You need to completely redo your .gitlab-ci.yml file as shown:

image: python:3.10-alpine

pages:
  stage: deploy
  rules:
    - if: $CI_COMMIT_REF_NAME == $CI_DEFAULT_BRANCH
  before_script:
    - apk add --update --no-cache git
    - pip install -r requirements.txt
    - git clone https://github.com/getpelican/pelican-themes.git .themes
  script:
    - pelican content -s publishconf.py -D
  artifacts:
    paths:
      - output/
  publish: output

Then you can change the theme in pelicanconf.py (THEME = '.themes/basic') and modify the URL (to SITEURL = '/2024/YOURNAME') in publishconf.py.`

2.G Push your code!

Now that you’ve made modifications, you have to stage them using git add . (this adds all modified files to your staged changes). Check the status of your staged changes with git status– if something looks wrong, you can git reset and add files one by one again (i.e. git add file1.py).

Now we commit them locally with a description git commit -m 'added a basic theme' and push them to the server git push.

(If you messed up your SSH, this may not work. A hack to work-around this is to change your remote to include your username, and then it will ask you for your password. If your push fails, try this from your project directory: git remote set-url origin https://<YOUR-GITLAB-USERNAME>@gitlab.depaulhacks.com/2024/<YOUR-USERNAME>.git and push again; or you can simply push this way directly (no change to remote) with git push https://USERNAME@gitlab.com/path/to/repository.git.

You’re Done, now customize it!