Poppy.io

Coming Christmas 2017 January February 2018 (hopefully)

Hey! I'm glad you're here.

Poppy.io isn't quite ready for public consumption yet.

Things planned for December:

  1. A cleaned up repository published to Github
  2. A technical guide for implementing Poppy.io on your website
  3. A cleaned up API and improved protocol
  4. An actual website instead of just this web page. :)

I hope to have that all done early by the end of December January.

Check back soon!

What is Poppy.io?

Poppy.io is an idea for making it easier for web applications to work together.

Today if a website wants to let you pick a photo from Instagram or save a document to Dropbox, it requires work on the website's part to specifically integrate with those services. And all that work doesn't help if you want to pick your photo from Google Photos or save your document to Amazon Drive.

Poppy.io is an experimental open protocol that lets any website allow you to work with files (or any other kind of data) on any service, as long as they both understand the Poppy.io protocol. It's entirely up to you, the user, which services to use for your data. You can even use your own service running on your own server.

If you're familiar with the old (and now dead) Web Intents or Web Activites proposals from Google and Mozilla, Poppy.io basically tries to do the same thing. One difference though is that Poppy.io is not envisioned as a new browser API. Rather, it's a protocol for using the existing functionality of modern Web browsers to fulfill many of the same use cases.

It does this using things called poppies.

A poppy is a special kind of popup window that opens up from a website. It's set up to let you open up an entirely different website inside of it. The two sites connect to each other using the Poppy.io protocol, letting you send files from one website to another.

So, for example, imagine this page let you edit photos, and you wanted to pick a photo from Flickr to use. You could open up a poppy and use it to go to Flickr and pick your photo. And then when you're done use another poppy to save it.

Actually, let's do just that.

Give it a try

Unfortunately, it appears your browser will not work with Poppy.io. Poppy.io requires JavaScript to be enabled and a browser that supports channel messaging.

This page is a demo for you to see how poppies work from a user perspective.

Here's what we're going to do:

  1. Use a poppy to pick a photo from the Flickr Commons.
  2. Do something interesting to the picture.
  3. Use a poppy to upload the edited picture to Imgur.

You won't need to sign up for anything.

The "interesting" thing we'll do in Part 2 is "glitch" the image with something called glitch-canvas. What that does is take a normal picture, like this one:

Normal Image

And semi-randomly corrupt the JPEG to mess with the image, adding "glitches" to turn it into something like this:

Gitched Image

(Source for that picture)

Note that is is all a work in progress so be prepared for things to not entirely work. If you have any questions or wish to report any problems feel free to send an email to paul@poppy.io.

Let's begin!

Part 1: Pick a Photo

We're going to start with an image from the Flickr Commons, a collection of free archival photos uploaded by a number of institutions to Flickr. All the images in the Flickr Commons have no known copyright restrictions so you should be able to do anything you want with them.

Here's how to do that:

  1. First you're going to open the poppy using the Pick with Poppy button. That's going to open up a new window you'll use to go to a different website to pick a photo from.
  2. Ideally we'd go straight to Flickr, but since Flickr isn't designed to work in a poppy that won't work (you can try). Instead we'll use a different site called Poppy.io f4r at f4r.poppy.io. To go there you can either select "Poppy.io f4r (for Flickr)" in the Suggested list, or type in "f4r.poppy.io" into the "Domain or Poppy.io Name" box and hit "Go"
  3. This will take you to Poppy.io f4r. To pick a photo, first search for something using the "Search" box, and select an interesting looking image, then pick a size. The "Small" size should be fine.

After that, you'll have a picture and we'll go to Step 2. Ready? Here's the button:

Part 2: Do Something Interesting

Now we're going to take the photo you picked, and "glitch" it with glitch-canvas.

Here's the photo you picked:

(You didn't open the poppy yet)

And here it is glitched:

(Pick an image first)

If you want to play around with how the glitching looks, here are a few adjustments you can make. I suppose doesn't really matter what each parameter means, but the readme for canvas-glitch does note "depending on the size, quality and contents of the source image and the number of iterations, the visual effect of the seed and amount parameters can be marginal or not even noticeable." So yeah.

(Also, sometimes you can end up with a blank image so just try adjusting again if that happens)

- this changes all the dials to random values.

Part 3: Save the Glitched Photo

Now let's save your glitched image with a poppy. This will work pretty much like picking a photo, except instead of saving it to Flickr we'll save it to the photo sharing site imgur because imgur allows you to upload photos anonymously.

Note that your upload to imgur will be public, so anybody will be able see it.

Here's how we'll upload the picture:

  1. First you're going to open the poppy using the Save with Poppy button.
  2. As with Flickr we can't go straight to imgur so instead we'll use Poppy.io i3r at i3r.poppy.io. To go there type in "i3r.poppy.io" into the "Domain or Poppy.io Name" box and hit "Go", or select it from the "Suggested" list.
  3. This will take you to Poppy.io i3r. To upload use the "upload to imgur button"—you can add a title and description first if you like.

Ready? Here's the button:

That's it for now

After you upload your picture, a link to it will be here: (not uploaded yet)

Soon there will be some techical information here about how the protocol works and how to add it to a website, but that isn't finished yet. Like I said, it's a work in progress.

For now though, thank you for your time. I hope all this made sense and you found it interesting. 🙂

If you have any questions, comments, or problems to report, or your feedback is greatly appreciated. Please email paul@poppy.io.

Last updated 17 January 2018