Embed the painter

Put Oeee Cafe's NEO painter on your website. Visitors draw, your page gets the picture, and they can post it to Oeee Cafe too. No sign-up, no key.

Your page receives

Draw something, then press Save.

Getting started

<div id="painter"></div>
<script src="https://oeee.cafe/embed.js"></script>
<script>
  OeeeCafe.painter("#painter", {
    width: 400,
    height: 400,
    card: true,
    onSave: function (drawing) {
      var form = new FormData();
      form.append("image", drawing.png, "drawing.png");
      form.append("replay", drawing.replay, "drawing.pch");
      fetch("/your-upload-endpoint", { method: "POST", body: form });
    },
  });
</script>

onSave gets the PNG and the .pch replay as Blobs, with the size, the time taken and the stroke count. Where they go is up to you.

Options

`width`, `height`	The canvas size: 300 to 1024 wide and 300 to 800 high. 300 × 300 if left out.
`card`	Show a card with a Draw button first, and load the painter only when it is pressed. Takes title, text, images (up to three picture addresses) and button.
`community`	A public Oeee Cafe community's handle, without the @. A drawing posted to Oeee Cafe goes there, and a two-colour community's painter opens in its colours.
`lang`	ko, ja, en or zh. The visitor's own language if left out.
`frameHeight`	The painter's height, in pixels or as CSS. The canvas height plus 200px by default, and at least 520px.
`onSave(drawing)`	Called each time the visitor presses Save, with the drawing.
`onReady()`	Called once the painter is ready.

card: {
  title: "Leave a drawing",
  text: "12 visitors drew here",
  images: ["/drawings/1.png", "/drawings/2.png", "/drawings/3.png"],
}

Styling the card

Each part of the card has a class, and its default look uses only selectors with no specificity, so your page's CSS always wins. Set the variables to change only its colours, or pass style: false (or data-card-style="none") to start from nothing.

.oeee-cafe-card {
  --oeee-cafe-card-accent: hotpink;      /* the button */
  --oeee-cafe-card-accent-ink: white;   /* its words and outer ring */
  --oeee-cafe-card-line: currentColor;   /* the border */
  --oeee-cafe-card-background: transparent;
}
.oeee-cafe-card         { border-radius: 0; }
.oeee-cafe-card-images  { }  .oeee-cafe-card-image { }
.oeee-cafe-card-label   { }
.oeee-cafe-card-title   { }  .oeee-cafe-card-text  { }
.oeee-cafe-card-button  { }

Without writing a script

<div data-oeee-cafe-painter data-width="400" data-height="400" data-card></div>
<script src="https://oeee.cafe/embed.js"></script>
<script>
  document.addEventListener("oeee-cafe:save", function (event) {
    var drawing = event.detail;
  });
</script>

Posting to Oeee Cafe

After saving, the painter offers to post to Oeee Cafe as well, in a Oeee Cafe window: signed in, the visitor goes to the publish form; otherwise it waits in their Oeee Cafe drafts. The post says which site it was drawn on.

Good to know

The painter's Float button lifts it over your whole page, as NEO's does, and pressing it again puts it back.
If you sandbox the iframe, it needs: allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox
A browser that blocks pop-ups, or a browser inside some apps, may not open the Oeee Cafe window. The painter says so, and the visitor can download the PNG instead.
On a naru.pub site, a template does all of this and keeps visitors' drawings on your site: oekaki.naru.pub