Light ring
  • 3 Minutes to read

Light ring


Article summary

Light ring overview

In this section you will find an explanation about the design and purpose of the light ring, a description and code for existing atoms and tips for designing your own atoms.

  • The light ring is located around the button and relays simple operational messages.
  • Each LED on the strip is numbered and programmed accordingly.
  • Notice that the motion doesn't have to be circular (like in example 1 below).
  • Parameters are assigned to describe each light ring atom:
    • Repeat- number of times the motion repeats. This can be a specific number or loop (till next).
    • Duration- this is relevant if there is one repetition, and it represents how long a specific motion will be presented. The time can be defined in milliseconds, or be linked to a task. For example, the "loading" motion is linked to the actual loading time.
  • Below are existing atoms. Some are available for you to use and some are not. This is meant for you to see what is available and give ideas for atoms you can create on your own.
Example 1

The motion doesn't have to be circular. it can be "moving" up, from side to side or another option your imagination (and app needs) allows.
motion-5.gif

Light ring atoms


static pose

This is a static pose, no motion, and it is the default state of the light ring- fully on all in the same color.
Repeat: static
Duration: -
What can you do with it: display it when Gary is performing your app, or in any case when you are not sure what to do with the light ring.
Code:
image.png


Loading

This motion is displayed when Gary is loading new information or a new task.
Repeat: X1
Duration: linked to actual loading time
What can you do with it: display it when Gary is loading your app and when it is loading new information within your app flow.
Code:
motion-1.gif


Waiting

This motion is displayed when Gary is waiting for a specific input from the user.
Repeat: loop
What can you do with it: place in your app flow whenever Gary is waiting for input from the user. For example, if Gary is waiting for the user to place a finger on the finger sensor.
Code:
motion-2.gif


Searching

This motion is displayed when Gary is searching for a WIFI connection.
Repeat: loop
What can you do with it: this particular atom is not available for you to use. Gary cannot function without WIFI, and therefore if WIFI connection is lost this will override the running app.
Code:
motion-4.gif


Alerting

This motion, two fast-paced blinks, is displayed when Gary needs to alert the user of something and draw their attention.
Repeat: X1
Duration: 1666 milliseconds
What can you do with it: display it when you wish to alert and notify the user about something.
Code:
motion-7.gif

Button pressed

This change of color of light happens while the button is pressed as an indication of it being pressed. The button's functionality changes according to how long it is pressed, and this visual indication of pressed\ not pressed is designed to help users execute the action they wish to execute.
Repeat: X1
Duration: 1666 milliseconds
What can you do with it: this particular atom is not available for you to use in a different context. If you develop an excellent app and users choose to make this app a shortcut (long press on the button), then think of designing an atom that follows this one, after the shortcut is selected and as your app opens.
Code:

What does the button do?

A short press on Gary's button will open a menu on the touchscreen, allowing the user to perform many types of actions, including selecting a task for Gary to do.

motion-8.gif


Charging

This motion is displayed when Gary is charging at the docking station.
Repeat: X1
Duration: linked to charging time and charge level
What can you do with it: this particular atom is not available for you to use, it will display automatically when Gary is charging. However, it is a good example of how an interaction can build up and change over time in order to convey a message.
Code:
motion-6.gif


Designing new atoms for the light ring

  • This output is a secondary output, completing the message that is for the most part conveyed through the interaction with the head LEDs.
  • Think of how it can complement the other outputs Gary is showing. Below are some examples to open your mind.
    How would Gary wish Merry Christmas?

motion-9-exp-1.gif

motion-9-exp-2.gif

How would Gary express excitement?
motion-10-exp.gif

Remember you can control the motion, the color (not all LEDs have to be the same shade), the pace, duration, repetition and trigger.


Was this article helpful?

What's Next