Connecting to RPi via Ethernet Cable

There are a lot of how-to’s online describing ways to set up a Raspberry Pi without a monitor or keyboard, but none of them are simple or straightforward. This will be.

I’m going to walk through how to do this on a Mac, but something like this should also work on Windows using internet connection sharing and the Event Viewer.

1. Connect an unpowered raspberry pi to your Mac via an ethernet cable.

rpi-ethernet

2. Enable internet connection sharing.

  • Open “Sharing” in system preferences. (You can just type “Sharing” into spotlight.)
  • Click on “Internet sharing.”
  • In the “To computers using:” box, select the adapter you have the ethernet cable from the Raspberry Pi connected to. In my case this is “Thunderbolt ethernet.” Beware: if you are using a USB ethernet adapter, the generically named “USB Ethernet” is probably not what you want. Your USB adapter is will probably have a different name in this list.
  • Check the “On” checkbox for “Internet sharing.”

Screen-Shot-2015-06-17-at-4.30.56-PM

3. Open Console.

You can just type “Console” into spotlight.

Screen-Shot-2015-06-25-at-12.10.44-PM

4. Power-On your Raspberry Pi.

Screen-Shot-2015-06-25-at-12.31.20-PM

5. Watch Console output for DHCP ACK.

Screen_Shot_2015-06-17_at_4_31_57_PM

6. Log on to your Pi.

You can now log onto your Raspberry Pi via ssh using the ip address acquired in the previous step:

Remote SSH Login

To log into your Raspberry Pi using SSH try the following steps:

In a terminal window in your Mac, type “ssh pi@xxx.xxx.xxx.xxx”, where “xxx.xxx.xxx.xxx” is the IP address you discovered in the previous step.

It will then prompt for your password. Type in the default password raspberry and type return. (Note that this will not echo on the screen.)
It will look something like this:


$ ssh pi@192.168.1.8
pi@192.168.1.8's password:
Linux raspberrypi 3.10.25+ #622 PREEMPT Fri Jan 3 18:41:00 GMT 2014 armv6l

The programs included with the Debian GNU/Linux system are free software;
the exact distribution terms for each program are described in the
individual files in /usr/share/doc/*/copyright.

Debian GNU/Linux comes with ABSOLUTELY NO WARRANTY, to the extent
permitted by applicable law.
Last login: Tue Apr  8 18:42:58 2014 from mbp.home

Booting up Raspberry Pi

Once you’ve formatted a Raspian SD Card you’re ready to boot up your Raspberry Pi (RPi). You have a few options:

  1. Plug a keyboard, mouse and monitor to your RPi to get the full affect.
  2. Run RPi ‘headless’ without monitor or keyboard.

    Either way you’ll need to plug an ethernet cable to RPi and your network router.

Once RPi is up and running, you’ll need to find its IP address, this is easy if you’ve got a monitor installed, just run “ifconfig” in the terminal window and you’ll get the following listing with your IP address:

raspberry-pi-ip-ifconfig

If you’re running RPi headless, you’ll need to find the IP address by scanning the network to find the IP address. Here’s a handy free OS X tool for scanning networks called Fing.

Preparing Raspian SD Card

You can use the Raspberry Pi for all sorts of different things—some of which may require their own special operating systems—but to start out, it’s a good idea to get acquainted with the Pi by installing Raspbian, a Raspberry Pi-focused version of Linux. Here’s what you need to do.

Step One: Prepare Your SD Card

First things first, we need to prepare your SD card for the Raspberry Pi. This involves formatting it properly and putting Raspbian, the standard Raspberry Pi operating system, on it. The steps vary depending on whether or not you’re on a Mac, Linux, or Windows PC, I’ve included the instructions for a Mac below.

  1. Download the lastest version of Raspbian and unzip the .img file inside. (It’s almost 500MB so it may take a little while to download.)
  2. Download RPi-sd card builder (be sure to pick the appropriate version for your installed version of OS X) and unzip the application.
  3. Insert your SD card into your Mac using a card reader.
  4. Open RPi-sd card builder. You’ll immediately be asked to choose a Raspbian image. Choose the .img file you downloaded earlier.
  5. You’ll be asked if your SD card is connected. Since we inserted it earlier, it is, so go ahead and click Continue. You’ll be presented with SD card options. If you only have one inserted, you won’t see anything else in the list and it’ll be checked. If not, just check only the card you want to use and click OK.
  6. Enter your administrator password and click OK.
  7. You’ll be asked if the SD card was ejected. This is supposed to happen, as the application needs to unmount it so it can perform a direct copy. Double-check that your SD card is no longer available in the Finder. DO NOTremove it from your USB port. When you’re sure, click Continue.
  8. RPi-sd card builder finishes prepping your SD card, safely eject it and insert it into your Raspberry Pi unit.

RPi-sd card builder isn’t an app so much as it’s an Automator action that acts like one. Some people have reported issues using it, so if you run into problems just open up the Terminal app (Your Hard Drive → Applications → Utilities → Terminal) and follow the instructions for Linux.

Linux

  1. Download the lastest version of Raspbian and unzip the .img file inside. (It’s almost 500MB so it may take a little while to download.)
  2. Open up your Linux terminal emulator of choice. If you don’t have one, try our favorite.
  3. Insert your SD card. If it mounts automatically, unmount it but make note of its location (e.g. /dev/disk2s1). Even though the card is unmounted, do not remove it from the reader
  4. In the command line, you’re going to need to type a single line to copy the contents of the Raspbian .img file to your SD card. It’ll look like this:sudo dd if=PATH_TO_IMG_FILE of=PATH_TO_SD_CARD_MOUNT_POINT bs=1m

    You’ll need to replace PATH_TO_IMG_FILE with the path to the .img file and PATH_TO_SD_CARD_MOUNT_POINT with the path to the SD card mount point. (The bs=1m just specifies the byte size and you don’t need to mess with it.) When you’re done, the command should look something like this:

    sudo dd if=/Users/adachis/Downloads/2012-12-16-wheezy-raspbian.img of=/dev/disk2s1 bs=1m

    It’s very important that you do not get this information wrong or you could end up writing Raspbian to the wrong disk and cause serious data loss. Be careful! When you’re sure you’ve got everything right, press enter.

  5. You will be prompted for the root password (or your administrator password for those of you on OS X who are using this method). Type it and press enter.
  6. It’ll take some time for the dd command to copy everything over to your SD card. While that happens, it’ll probably look like the Terminal froze up. Don’t worry, it’s still working and will likely take longer than an average 2GB copy to an SD card (so be patient). When it finishes, the command prompt will return and your SD card will be ready. Eject it safely and stick it in your Raspberry Pi.

Raspberry Pi Basics

The Raspberry Pi is a wonderful little computer that fits in the palm of your hand, yet packs enough power to run your home media center, a VPN, and a lot more. This article attempts to cover the basics of this great little prototyping tool.

rpi-hero-shot

The Raspberry Pi may be a computer all on its own, but you’ll still need a lot of other things to make it work:

A monitor: For the purposes of our course we’ll be working with an HDMI-capable monitor because it offers better resolution and built-in sound. But you could however use any composite video-capable television.

HDMI cable: You’ll need this cable to connect your Raspberry Pi to your monitor or alternatively composite video cable if you’re using a television.

SD card: RPi uses an SD card for its hard drive. Almost all cards will work, but some aren’t compatible and will therefore cause issues. You can find out which cards are compatible, or locate a place to buy a compatible card with an operating system pre-installed here.

A keyboard and mouse: Any standard USB keyboard or mouse will do. Wireless (non-Bluetooth) peripherals worked for me, but I had to unplug them and plug them back in after the Raspberry Pi booted. You’ll have fewer issues with fully wired keyboards and mouses.

An ethernet cable: Any standard ethernet cable will do. You only need this to connect to your network and the internet, however, so you can leave this item out if desired.

A power supply: Most micro USB smartphone chargers supply 700mA at 5V, but not all do. Check the bottom of your charger and look for a block of text. You’ll see its output values in that text which may read 0.7A instead of 700mA). If it offers at least that much power, you’re probably good to go.

Now that you’ve got all the hardware, it’s time to create the operating system for RaspberryPi on your SD card.

Check out the following articles on setting up Raspberry Pi:
1. Preparing Raspian SD Card

2. Booting up Raspberry Pi

3. Connecting to RPi with Ethernet Cable

Command Line Cheatsheet

This handy cheatsheet will help us with getting Raspberry Pi going. If you find commands that you think will be useful to add, please add them to the comment thread.

CTRL + T
check the status of ‘dd’ in progress (OS X)

Scan Network for IP address:
Open a terminal window on your Mac
“arp -a”

Remote Login (Command Line)
ssh pi@192.168.1.8 (IP address is your Raspberry Pi’s IP address)

ScreenSharing
vnc://192.168.1.8 (IP address is your Raspberry Pi’s IP address)

CSS Transitions & Animations

There are a number of ways of achieving animations with CSS3:
1. Transitions
2. Animations

Similarities
If you’re not looking too closely both transitions and animations look similar. They both allow you to:

  • Specify which CSS properties to listen for changes on
  • Set timing (easing) functions to alter the rate of going from a one property value to another
  • Specify a duration to control how long the animation or transition will take
  • Programmatically listen to animation and transition-specific events that you can then do with as you wish
  • Visualize CSS property changes.

Differences

Once you understand the differences it becomes easier to decide which technique to use as each excels at different things.

Triggering

One of the major differences between animations and transitions can be seen in how you trigger them to start playing.

A transition only plays as a reaction to a CSS property that has changed. A common scenario is one where you use the :hover pseudo class to change the value of a CSS property:

example of hovering to make something larger

To use the example visualized here, if a transition is defined, you would be able to see the circle growing from its normal size to its hover size. Another way of triggering a transition is to use JavaScript to programmatically add or remove CSS classes to simulate a CSS property change. Rounding out our ways of making a property change, you can use JavaScript to set an inline style that changes a property your transition is listening for.

Animations, on the other hand, don’t require any explicit triggering. Once you define the animation, it will start playing automatically. Yep, that’s how animations roll!

Looping

This is pretty simple. Animations can be easily made to loop by setting the animation-iteration-count property. You can specify a fixed number of times you want your animation to repeat:

animation-iteration-count: 5;
If you just want your animation to loop forever, you can do that as well:

animation-iteration-count: infinite;
Transitions, on the other hand, don’t have a property that specifies how many times they can run. When triggered, a transition runs only once. You can make a transition loop by fiddling with the transitionEnd event, but that isn’t particularly straightforward – especially when compared with animations.

Defining Intermediate Points / Keyframes
With an animation, you have the ability to define keyframes which give you more control over your CSS property values beyond just the start and the end:

animations FTW

You can set as many keyframes as you want, and when your animation plays, each keyframe will be hit with the specified property changes reflected. This allows you to create the kinds of involved animations that help HTML5 compete with more established animation technologies like Flash more effectively.

With a transition, you don’t have much control over anything beyond the end result:

transitions are linear

A transition simply goes from an initial state to the final state. You cannot specify any points in-between like you can with an animation, so a transition might not be a good choice if you are trying to create the next Teen Girl Squad sensation or a complex animation.

Specifying Properties Up-Front

The next thing I will describe is how formal animations and transitions are when it comes to defining a transition between CSS property values.

On the formal side, you have transitions. Every CSS property you want recognized by your transition must be explicitly represented.

For example, let’s say you have something like the following:

#mainContent {
background-color: #CC0000;
transition:background-color .5s ease-in;
}
#mainContent:hover {
cursor: pointer;
background-color: #000000;
width:500px;
}
Upon hover, I specify a different value for both background-color as well as width. My transition specifies only background-color though. This means your browser is only listening for changes on the background-color property.

If I wanted my transition to affect both the background-color and width properties, I will need to explicitly add another transition entry for width:

#mainContent {
background-color: #CC0000;
transition:background-color .5s ease-in, width .5s ease-in
}
#mainContent:hover {
cursor: pointer;
background-color: #000000;
width: 500px;
}

Resources

Here’s some examples we went over:

 8 Simple Transitions
Transitions vs Animations
25 CSS3 Animation techniques

Kathleen’s CSS Animation Click Here

CSS Animatable
http://www.cssanimate.com/

Designing Meta Products

Download Project Description PDF

Designing the Internet of Things

A computer processor such as Intel’s i486 used to cost around the same as a small car. Nowadays a chip with similar power is the price of a chocolate bar. As sensors, actuators and the technologies that let them talk to each other become smaller and less expensive, more and more objects will be embedded with electronics and network enabled. This evolution of making products more intelligent is changing our relationship to computers and information.

We can make these objects aware, think and communicate. Pundits have dubbed this “physical computing”, “the Internet of Things”, or “Meta Products”, these intelligent devices are physical objects that combine network connectivity with sensors, controls and actuators to make information more meaningful and perhaps change behaviours in positive ways. We’re already beginning to see an increase in the number of connected objects dedicated to one purpose. These objects are custom fit to do a specific thing better and more conveniently than a smartphone app.

But what does it mean to “connect an object to the Internet”? Clearly, sticking an Ethernet socket into a chair or a 3G modem into a sewing machine doesn’t suddenly imbue the object with mysterious properties. The goal is to pull all of the data back into a human sphere where people can add value.

Steps
Research & problem definition
Brainstorming & ideation
Sketching & interaction articulation
Produce a prototype & presentation

Project Due: October 16th

Prototype, Presentation & Documentation

Links:
Read Chapter 1-2 of Meta Products book
http://www.metaproducts.nl/book/chapter-1/3-what-is-a-metaproduct

Possible Domains

  • Health Care
  • Transportation
  • Energy
  • Entertainment
  • Play/Fun
  • Fitness

about-surroundings

aboutmyself

aboutothers

Interaction Design Principles

Download the Lecture Slides PDF

1. IxD Principles

a. Design Values:

Ethical: It does no harm, and hopefully improves situations
Purposeful: It helps people accomplish goals. It is appropriate o
the user’s context
Pragmatic: it achieves business goals and fits within constraints
Elegant: It provides the simplest complete solution
It engages the emotions appropriately

b. Conceptual Principles:

How do we address the needs of both beginning users and expert users with a single, coherent interface?

Optimize for intermediates
Encourage users to skip beginner phase

c. Behavioural Principles:

Optimize the experience by clarifying information and minimizing work in the following areas:

  • Cognitive Work
  • Memory Work
  • Visual Work
  • Physical Work

d. Interface-level Principles:

  • Don’t think of your product as a computer
  • Integrate your hardware and software design
  • Let context drive the design
  • Use modes judiciously, if at all
  • Limit the scope
  • Balance navigation with display density
  • Customize for your platform

2. GUI metaphors

gui-metaphors

3. Design Patterns

design-patterns

4. Best Practices

  • Design based on user scenarios
  • Interfaces should anticipate user behaviour
  • Guide but do not dictate user experience
  • Navigation should indicate where the user is
  • Progress from simple to complex (Undesired complexity confuses user)
  • Prevent users from making errors (ex. electrical sockets)
  • Provide affordances for interactive elements
    (Elements should look like what they are)
  • Focus should be on content, not format or navigation
  • Don’t make users wait, wondering
  • Give the user control over the pace of the interaction
  • Let the user decide their needs, accommodate the user