Background

Up until now we’ve used just Particle.io’s cloud based platform. This studio will introduce another popular platform as well as review a common design tool, Sequence Diagrams.

Objectives

The objectives of today’s Studio are:

  • To Use Sequence Diagrams as a tool to help design and understand the behavior of complex systems (like IoT projects)
  • Investigate the use of cloud services and platforms besides Particle’s platform

1. Studio Setup

1.1. Find a Group & Get Roll Assignments

Please take your role seriously. When you get your role, review the responsibilities and make sure you follow through on them.

Role Reminders
  • Common Roles
    • Participate in discussion and work
    • Review & revise the final report for the studio
  • Manager
    • GitHub: Create group (following the naming convention) & Verify that everyone else joins it
    • Time management: Ensure the group is making progress, is on-task, and asks for help when stuck
    • Human Resources: Ensures civil conduct of all members
    • Submission management: Ensure the group completes and submits all parts of the studio on-time
    • Hardware / Wiring Review: Review any circuitry for safe operation
  • Recorder
    • Record who will be taking on each role (complete process/Roles.md)
    • Compose answers to questions in README.md
    • Record details of the studio session (complete process/SessionNotes.md):
      • Notes on the session (what was said, order of work, etc.)
      • Summarize important findings or techniques
      • Summarize outstanding questions or issues
  • Spokesperson
    • Enter the group’s answers for the questions in process/Debrief.md
    • Report out the results of the Studio at checkout
    • Coordinate and schedule out-of-class meetings if necessary.
    • Organize parts for circuits
  • Technician
    • Create project code
    • Assemble any circuits
    • Enter/modify code
Special Circumstances: Groups of three

Groups of three will be allowed if:

  • You plan to work with someone who is absent and all members of the group agree to work as a group of three for this studio.
  • There aren’t enough people present to form groups of four.

In groups of three the Manager must also take on the responsibilities of the Spokesperson.

1.2. Studio Distribution

As in the previous studios, all group members will need to be in a GitHub group (and repository)

  • The group’s Manager should create the repository. The GitHub group name should include the surnames of all group members.
  • All other members should join the group.

The link for this studio is: https://classroom.github.com/g/m8duwSBD

Today the Recorder, Technician, and the Spokesperson will want to be able to work with the repository (i.e., it should be on at least two computers). The Technician will be working with the Photon (C++).

1.3. Recorder

The Recorder should update process/Roles.md to record everyone’s roles for this studio (use full names). In addition, the Recorder should take notes about the interaction of the overall session. Be sure to pull/merge/commit/push at the end of the day!

1.4. Spokesperson

Today you will be doing the bulk of recording answers to questions. Read the questions in process/Debrief.md to the group and the group should come to a consensus for each. Be sure to enter the responses. Be sure to pull/merge/commit/push at the end of the day!

1.5. Technician

The Technician will be programming the Photon and the UI. Consequently their computer will need to be logged into the account for the Photon being used for testing. (Particle Desktop will need to be logged in)

You will be managing the code for today’s studio. Download the repository and open it in Particle Dev. Be sure to pull/merge/commit/push at the end of the day!

2. Studio: Hardware Setup: LEDs, buttons, concepts, and code

  • Hardware: Your RGB LED and a button should both be connected to your Photon.

2.1. Tool Prep

Today we’ll use a web-based tool to make sequence diagrams. Visit: https://www.websequencediagrams.com/. (There’s no need to create an account or sign-in. You won’t be able to save work on-line, but you can copy/paste the descriptions of the diagram to “save” your work)

Websequencediagrams uses a text-based description of a sequence of interactions to create a sequence diagram. There notation and approach makes it particularly easy to modify sequence diagrams.

  • Review the Getting Started documentation.
  • In the editor you can also click on the example sequence buttons on the left of the window to see the syntax needed to generate the example.

We are using sequence diagrams informally, so we won’t use all the special notations available. Mainly we want to capture the sequence of messages being exchanged during interactions between devices.

2.2. Tool practice

The following diagram corresponds to a usage scenario where:

  • The lamp is on
  • A user is watching the App on a phone
  • The user clicks the physical button on the Lamp
  • The lamp turns off
  • The app updates

Lamp Off Sequence

Recreate the diagram exactly as shown. (Hints: Look at the use of title, participant, and note as aspects of the diagram)

Complete README.md Q1

2.3. Cloud Connected Light: Review

Review your solution for the previous studio (Cloud Connected Lamp). Ideally it will:

  • When the user clicks Set Color is will send a message to the Photon
  • The Photon will start a fade of the color, which will take 5 seconds
  • The app will continually show the latest color every 1s

Create a sequence diagram corresponding to this usage scenario.

  • Include the User’s interaction with the App
  • The previous example used just Particle’s streams, which are used for group communication. Most solutions to this part also use Particle’s Functions. A Function is called on a specific device. Please use the following notation as the “message” being sent when calling a particle function: functionName() [to DeviceName]. For example, setColor() [to lamp].

Complete README.md Q2

2.4. Speaking of Clouds…

As described on Cheerlights.com: “CheerLights is an “Internet of Things” project created by Hans Scharler that allows people’s lights all across the world to synchronize to one color set by Twitter. This is a way to connect physical things with social networking experiences.”

Basically it allows all Cheer Light participants to see an the same color at the same time and also allows anyone to control the color. Cheer Lights utilizes the ThingSpeak cloud platform. The ThingSpeak platform allows you to easily post and retrieve data from a cloud service as well as do analysis and respond to data in the cloud. Review the ThingSpeak platform.

Complete README.md Q3.1-3.2

2.5. Cloud-based Development

Particle.io also offers a cloud-based environment for development. Today we will use it rather than Particle Dev for code.

  1. Ensure your RGB LED and button are connected to your Photon
  2. Have person who’s credentials are associated with the Photon open a browser to https://build.particle.io (Log in if necessary).
  3. Click on the Libraries button on the left toolbar (it looks like a ribbon) Enter ThingSpeak in the search box
  4. Select the official ThingSpeak library (just the name ThingSpeak)
  5. Select the CheerLights.ino in the examples menu at the bottom.
  6. Scroll to the bottom and select the Use This Example button.
  7. The sketch defines pins for three buttons, but doesn’t currently use them. Update the defined pins to correspond to your RGB LED.
  8. Update the setup() to be appropriate for your LED.
  9. Review the loop(). Complete README.md Q4.1
  10. The setColor() function uses the RGB LED built into the Photon (the one used to indicate the Photon’s status). This could make it difficult to see if your Photon is connected to the network or not. Remove all references to the RGB object from setColor() and update it to work correctly with your RGB LED.
  11. Plug in a Photon and once it’s connected to the network use the Devices icon (circle/cross hairs) to select the Photon.
  12. Program the Photon and Test your work! (The “Flash” button) Does the LED light? Will tweets control it?
  13. ThingSpeak uses the concepts of “channels” and “fields”. A channel, as you may guess, is a stream of information about a particular topic. Fields just a way to subdivide the information within the stream. Complete README.md Q4.2
  14. Review the ThingSpeak page for the Channel (Fill in the channel number in place of CHANNELNUMBER in the URL: https://thingspeak.com/channels/CHANNELNUMBER/. Complete README.md Q4.3
  15. CheerLights use two fields as described at http://cheerlights.com/. Complete README.md Q4.4

2.6. Writing to ThingSpeak

Now that you can read data from ThingSpeak, let’s write something to it.

  1. Create an account on http://ThingSpeak.com.
  2. After logging in, select Channels>My Channels from the top menu. Create a new channel. Name the channel anything you like and the first field Random Value. You can leave all other data empty. Hit the Save Channel button at the bottom of the page.
  3. On the channel page click the API Keys tab. You will need the Write API Key for the Photon to be able to post data to the channel.
  4. Update your sketch to count the number of button clicks that happen every 5s (you can either continue to act as a cheer light or remove that code). Every 5s it should post the data your newly created ThingSpeak channel. The signature of the ThingSpeak method used to post data is: writeField(int ChannelNumber, int Field, float Value, String API Key)
  5. Click the button and verify that the graph on your channel page is updating as expected.

Complete README.md Q5.1

3. In-Class Checkout

Commit your work to GitHub:

  • The Spokesperson should complete changes, save them, commit them locally, then push to GitHub using GitHub desktop.
  • The Recorder should save any changes, commit them locally, use GitHub desktop to Pull and merge any changes to the repo, and finally Commit/Push the additions back to GitHub.
  • The Technician will be using the cloud-based IDE today, but code will still need to be merged into the repo locally.
  • Verify your commits from the Recorder, an Spokesperson, and Technician are on GitHub.
  • Show a TA your progress

4. Post-Class Checkout

Complete any unfinished work and commit it to your repo by 11:59pm Sunday, March 25th.