Specialized Export (Plug-In?) for Hama/Perler/Beads

[sopelt]

Enhancement request/proposal

Piskel is great! It is regularly used to design/set/print Hama/Perler/bead patterns. My current workflow looks like that:

• draw in piskel
• export to png
• open in GIMP
• extend canvas
• scale
• render grid
• (scale some more)
• print

I am aware that I could probably automate most of the GIMP-manipulations but I would also prefer to print more economic (and closer to reality which is preferred by many children) by generating circles or even rings instead of filled out pixels in a grid.

I know this is probably a niche requirement ... how would you propose to tackle this?

Would you except such a feature as a new, standard exporter? Is there infrastructure to have plugins? Or should I build that externally just as a conversion tool/script/... and maybe embed piskel?

[juliandescottes]

Hi!

What I usually suggest for uncommon export formats is to write a script and convert it to a bookmarklet to make it easy to use with piskel.

In this case I'm not sure we can leverage a lot of the existing APIs in Piskel, I guess we have to read the pixel grid and output a custom canvas with grid lines and rings for each pixel. So I would say:

• assume 1 frame
• flatten all layers to a frame
  • flatten all layers as a rendered image
  • convert rendered image to frame
• create custom renderer that draws grid + rings

Is there infrastructure to have plugins?

It's a shame but no, there's nothing like that. I think it would be pretty easy to allow plugins for tools, palettes and export features but I haven't managed to work on that.

I know this is probably a niche requirement ... how would you propose to tackle this?

It's not that uncommon actually, I've had other similar requests. The other requirement that was frequently mentioned was to get the count of "perls" for each colour (10 red, 32 green etc...). I wouldn't be against adding a button in the "other" exports categories.

I'll be happy to review a PR for this, but I don't have much time for Piskel so I can't take on the implementation at the moment. If you prefer to go the external script route, as I said bookmarklets are an option. All the APIs of piskel are easily accessible from window.piskelapp, window.piskelapp.piskelController etc...

[sopelt]

Hey @juliandescottes , thank you for your reply. I have started prototyping a Beadsprite export using Tampermonkey/Userscripts and jsPDF for generating a vectorized, printable result. I guess the result of having a userscript should be similar to using a bookmarklet. I found window.pskl as my main entry point. I saw where a frame's pixels are and how the uints map to rgba.

Do you happen to have any pointers (function names etc.) on the following use-cases:

• getting a merged frame from all layers
• attaching to any kind of event when the export tab is opened (in order to add some stuff to the view that seems to be attached to the DOM when the tab expands)

Thanks, Simon

[juliandescottes]

Great!

getting a merged frame from all layers

Will have to do that in 2 steps. First merge everything to a single rendered image, then convert to a frame.

var mergedImage = pskl.app.piskelController.renderFrameAt(0, true); // 0 is the index of the frame
var mergedFrame = pskl.utils.FrameUtils.createFromImage(mergedImage);

attaching to any kind of event when the export tab is opened (in order to add some stuff to the view that seems to be attached to the DOM when the tab expands)

Hummm that's going to be more tricky. I don't think we fire any generic event when opening the export panel. Also a new instance of ExportController is re-created everytime the export panel is opened.

Let's say you want to know when the UI of the MiscExportController is ready. You could make your way to its prototype at pskl.controller.settings.exportimage.MiscExportController and there override the init method.

  var miscProto = pskl.controller.settings.exportimage.MiscExportController.prototype;
  var bkpInit = miscProto.init;
  miscProto.init = function () {
    bkpInit.apply(this, arguments);
    $.publish("MISC-PANEL-INITIALIZED");
  }

Somewhere else in your code you would listen to that with

  $.subscribe("MISC-PANEL-INITIALIZED", function () { console.log("do some stuff") })

That's going to be pretty hacky, but it should allow you to get started. You could also try to override the template and controller used to render the MiscExportController, but that's a bit more involved.

Again if you have something that works nicely, I'll be happy to add an official button in the panel :)

(Edit: Forgot to mention, but the MiscExportCtrl is responsible for the "Other" tab of the export panel)

[sopelt]

Thank you for your pointers. I have come up with a (indeed hackish) basic userscript implementing the basic use-cases I am currently aware/in need of.

I plan on improving the code a bit and adding some features and minor fixes and ask around in some related communities if there are other things that could be useful.

The code currently resides at https://github.com/sopelt/piskel-beadsprite and the installable script at https://openuserjs.org/scripts/sopelt/Piskel_Beadsprite_Export

I guess in a few weeks we'll see if there is an audience for it and think about whether its worth reworking and integrating or keeping it as a userscript.