Kino.listen for custom kinos?

[germanftorres]

Hi,

I have followed the guide to create a custom Kino with Kino.JS.Live. It's a visualization made with svg.js of the Circle of Fifths (music notes ordered in fifth sequence). Whenever the user clicks one of the keys (C G D A B F#...) the svg.js powered wheel rotates to show that key at noon, and I would like to capture that event in the elixir side and show some details of the tonal key in a Kino.Frame. The code I would like to write in livebook is something like this.

circle =  KinoJazzy.CircleOfFifths.new() |> Kino.render()
frame = Kino.Frame.new() |> Kino.render()

circle
|> Kino.Listen(fn event -> 
   # append event info to frame
   Kino.Frame.append(frame, event...)
end)

I have no idea what's needed in the custom kino side to achieve this kind of code in a livebook cell. As I understand, broadcast_event/3 is for sending events from elixir to js and cts.pushEvent("topic", message) makes possible the communication in the other direction, from js to the custom Kino. What I would like to to is to be able to generate events from the custom kino that may be consumed directly in livebook. Is that possible?

Thanks

Germán

[josevalim]

It is not possible at the moment but maybe we can create our own Kino.Listenable protocol that folks could hook into? Maybe you can provide your own listen though… @jonatanklosko, is the detection/monitor API to know when you were removed from a cell public?

[jonatanklosko]

@josevalim wdym? I think the only related public API is start_child which is re-evaluatin aware.

[jonatanklosko]

There is currently no established way, although there are ways to do it. Here's a notebook to give some ideas.

[germanftorres]

@jonatanklosko Thanks for the code, I think it fits my current needs so I will use this approach in my current project. Maybe could be a great addition to all custom kinos if implemented directly in Kino.JS.Live.

[jonatanklosko]

@josevalim I think we could have an API in Kino.JS.Live that would stream events, and we would implement stream + enumerable for Kino.JS.Live itself.

[josevalim]

I like that approach. 👍