Hello everyone, If you have the need for authoring slides with embedded code and/or animated HTML, I wrote a DSL wrapper for the revealjs.com framework that you might find useful. It is also great for presenting Kotlin Playgrounds. I am a big fan of using reveal-js for doing slides, but using Kotlin for authoring slides is far superior to drowning in pages of JS and HTML tags. You can see a demo at: https://kslides.com I would appreciate any feedback. Cheers, Paul

Thanks, looks very interesting. We are working on several similar projects and maybe will integrate your wrapper into it as well.

I love it! Let me add an option so you can specify where the script is loaded. In general, using plotly with the HTML DSL would be a winner.

We have much larger VisionForge project (https://github.com/mipt-npm/visionforge), it allows solving initialization problem and have wider range of visualization plugins, but I am not sure it makes sense to bring heavier frameworks into slides. Plots seem to cover most uses.

Let me ask you a question: in the case of kotlin playgrounds, I saw weird css interference between reveal.js and playground.js, so I solved the issue by loading the playground content via an iframe and kept the two separate. Do you think that would be a wise approach in this case?

JS/CSS interference is a huge problem. I do not think IFrame approach is recommended for anything but embedded content, but it you can't access the source code of libraries you use, it could be the only solution. With access to the sources, I've just added a prefix to all CSS selectors so they work only inside some class. Another solution is to dynamically load CSS vis JS for given nodes.

Let me give the iframe approach a try and we can see what you think.

I had a lot of problems with iframes in Jupyter because they prevent sharing JS scripts between cells.

Hi Alexander, Using iframes is better, but for it to be acceptable, we need to be able to specify the dimensions of the plotly output — and I do not know how to do that. To try it yourself, add these two slides: https://gist.github.com/pambrose/ca2b82a5a5c7981c5f25aef203704af2 and change the version of kslides to 344a56b You will see a new plotlyConfig{} block in the DslSlide, where you can control the iframe characteristics. If we could control the dimensions of the plotly output, we would be in good shape. You can see the contents of the iframes in the docs/plotly dir. The other weird thing is if you refresh the page, you will see the iframe changing sizes. I am not sure what is causing that.

There are two ways to adjust size. There is a flag that allows automatic resize of the plot and there are layout parameters that could be adjusted to fixed size in pixels. I will write a comment to your gist, but we can move to #science channel or other channel that better suits you for detailed discussion.

Have a look at https://plotly-integration--kslides.netlify.app/#/9 and see what you think, You can arrow down to see the slide definitions and other examples. The only bit of ugliness is getting the plotly layout dimensions right and then matching the iframe dimensions to the layout dimensions. I would love to hide it, but I do not see any pattern to the sizing. Doing it manually usually takes 4 or 5 quick iterations, so it is not too bad, The iframe-related config details are be specified globally or on a plotly() call with a config arg, which matches the approach taken by plot(). I have an open mind to better approaches. If you want to try it locally, use version 4cff04e. This is the Slides.kt file: https://github.com/kslides/kslides/blob/plotly-integration/kslides-examples/src/main/kotlin/Slides.kt

Looks nice. I will try to attach full VisionForge later.

I reread your gist comment about collapsing plotly{} and plot{} into a single call. Let me give that a try and see if it cleans things up a bit.

Looks very interesting! Did you consider implementing markdown DSL too?

What do you mean by markdown dsl? There is a Kotlin Markdown parser we use <http://"""%20%20%20%20%20%20%20%20%20%20%20%20%20#%20VisionForge%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20This%20is%20a%20demo%20for%20current%20VisionForge%20features.%20This%20text%20is%20written%20in%20[MarkDown](https://github.com/JetBrains/markdown)%20%20%20%20%20%20%20%20%20""".trimIndent()|in VisionForge>, but it is not a DSL.

I just don't like huge string literals with markdown inside. I would prefer to compose it

The kotlinx-html would be more effective for that. Markdown is for large text blocks.

kotlinx-html requires you to use html, while mardown doesnt 🙂

Yeah. Markdown requires raw strings... and produces html.

I'm not sure if I'm ready for something SO serious