Skip to content

Use SVG animations for RGB LED demonstrations #255

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 1 commit into from
Jan 4, 2016
Merged

Use SVG animations for RGB LED demonstrations #255

merged 1 commit into from
Jan 4, 2016

Conversation

monkbroc
Copy link
Member

Here's an easier way to add RGB LED demonstrations to the docs. This will come in handy when the docs are updated for the Electron.

As a first step I converted the animations in the getting started section, but I think that page should only contain the 3-4 most common patterns with the advanced ones like DFU and SOS moved to a reference page.

Demo

device-anim2

Features

  • Includes the Core and Photon image by @technobly (Electron soon to follow? 😉)
  • Supports breathing, blinking, SOS and arbitrary patterns
  • Add device animations in any docs page
  • Device image and patterns are easy to customize

Usage

Add a line like this to the markdown docs {{{device-animation device "breathe" "cyan" }}}

Changes

  • Add Handlebar helper device-animation
  • Add browser JS to implement device animation
  • Add SVG.js to create SVG canvas and animate LED
  • Add device variable to Handlebar template so that {{device}} inserts Photon/Core
  • Correct weird spelling in titleize helper

Browser compatibility

  • Chrome
  • Firefox
  • IE11
  • Android
  • I don't currently have access to old IE or Apple browsers

@andyw-lala
Copy link

Excellent stuff.

Minor comment - with sequence animations like the "typical pattern of a
Photon after power up", a delimiter showing when the sequence starts and
stops, a progress bar or something similar would be good. After a while,
you scroll up to the animation and it's just looping with no obvious
beginning or end (unless you already knew the pattern.)

On Wed, Dec 30, 2015 at 2:33 PM, Julien Vanier notifications@github.com
wrote:

Here's an easier way to add RGB LED demonstrations to the docs. This will
come in handy when the docs are updated for the Electron.

As a first step I converted the animations in the getting started section,
but I think that page should only contain the 3-4 most common patterns with
the advanced ones like DFU and SOS moved to a reference page.

[image: device-anim2]
https://cloud.githubusercontent.com/assets/1919681/12056934/2ec27bde-af0a-11e5-98df-0601a4bd59f0.gif
Features

  • Supports breathing, blinking, SOS and arbitrary patterns
  • Add device animations in any docs page
  • Device image and patterns are easy to customize

Usage

Add to the docs markdown {{{device-animation device "breathe" "cyan" }}}
Changes

  • Add helper for device-animation
  • Add JS to implement device animation
  • Add SVG.js to create SVG canvas and animate LED
  • Add device variable to template so that {{device}} inserts
    Photon/Core
  • Correct weird spelling in titleize helper

You can view, comment on, or merge this pull request online at:

#255
Commit Summary

  • Use SVG animations for RGB LED demonstrations

File Changes

Patch Links:

—
Reply to this email directly or view it on GitHub
#255.

Andy

@monkbroc
Copy link
Member Author

Good idea to add an optional progress bar below the animation Andy.

@andyw-lala
Copy link

And did I mention these rock ?

On Wed, Dec 30, 2015 at 2:59 PM, Julien Vanier notifications@github.com
wrote:

Good idea to add an optional progress bar below the animation Andy.

—
Reply to this email directly or view it on GitHub
#255 (comment).

Andy

@chobberoni
Copy link
Contributor

these are stellar!

@monkbroc
Copy link
Member Author

Another side effect of this PR: You can now use {{device}} in a docs markdown template to insert Photon, Core or Electron (when those pages are added).

So no more {{#if photon}}Photon{{else}}Core{{/if}} which will break when the Electron is added...

@monkbroc monkbroc force-pushed the feature/device-animation branch 5 times, most recently from 4334c9c to 0e7cf0d Compare December 31, 2015 01:07
@monkbroc
Use SVG animations for RGB LED demonstrations
1b2fd8b 
## Features

- Supports breathing, blinking, SOS and arbitrary patterns
- Add device animations in any docs page
- Device image and patterns are easy to customize

## Changes

- Add helper for `device-animation`
- Add JS to implement device animation
- Add SVG.js to create SVG canvas and animate LED
- Add `device` variable to template so that {{device}} inserts Photon/Core
- Correct weird spelling in titleize helper
@monkbroc monkbroc force-pushed the feature/device-animation branch from 0e7cf0d to 1b2fd8b Compare December 31, 2015 01:14
@mohitbhoite
Copy link
Contributor

BEAUTIFUL!!

@chobberoni
Copy link
Contributor

hey @monkbroc can you make/change this PR to the staging branch? i want to test some stuff out without breaking out master branch. thanks!

@chobberoni chobberoni self-assigned this Jan 4, 2016
chobberoni added a commit that referenced this pull request Jan 4, 2016
@chobberoni
Merge pull request #255 from monkbroc/feature/device-animation
87af8db 
Use SVG animations for RGB LED demonstrations
@chobberoni chobberoni merged commit 87af8db into particle-iot:master Jan 4, 2016
@monkbroc
Copy link
Member Author

monkbroc commented Jan 4, 2016

Thanks @chobberoni!

@technobly
Copy link
Member

Excellent work @monkbroc !

@monkbroc
Copy link
Member Author

monkbroc commented Jan 5, 2016

Thanks Brett 👌
On Jan 4, 2016 7:05 PM, "Technobly" notifications@github.com wrote:

Excellent work @monkbroc https://github.com/monkbroc !

—
Reply to this email directly or view it on GitHub
#255 (comment).

@monkbroc monkbroc deleted the feature/device-animation branch January 12, 2016 14:47
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees

@chobberoni chobberoni

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
5 participants
@monkbroc @andyw-lala @chobberoni @mohitbhoite @technobly