Hello everyone, If you have the need for authorin...

# feed

[pambrose]

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

[altavir]

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

[altavir]

Here it is. https://github.com/altavir/kslides-plotly/blob/528b102ec2cfaf4a11ec6b6022c7cc83cbc8b9a7/src/main/kotlin/Slides.kt#L80.

I've encountered a minor problem. Plotly script has to be loaded before rendering (it is fixed in VisionForge implementation), so I had to manually load the script instead of adding it to scripts builder. Because scripts builders a loaded in the footer.

[pambrose]

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.

[altavir]

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.

[pambrose]

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?

[altavir]

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.

[pambrose]

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

[altavir]

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

[pambrose]

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.

[altavir]

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.

[pambrose]

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

[altavir]

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

[altavir]

And of course we can try to use lets-plot. It generates images.

[pambrose]

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.

[pambrose]

VisionForge integration would be very cool.

[pambrose]

Hi Alexander. Your gist suggestion of folding plot{} into plotly{} was brilliant. The code is much cleaner. It acts as yet another reason why I love Kotlin so much.

Here is the new usage: https://plotly-integration--kslides.netlify.app/#/9/1

If you do not have any objections, I will push out the plotly integration in a new release.

Thanks so much for your help.

[Pasha Finkelshteyn]

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

[altavir]

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.

[altavir]

By the way, Kotlin-markdown seems to requires some additional work both on bugs and API

[Pasha Finkelshteyn]

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

[altavir]

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

[Pasha Finkelshteyn]

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

[altavir]

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

[altavir]

By the way, you could be interested in our SNARK project. One of the aims is to provide DSL for making content blocks for interactive documents. It has a prototype already, but not public yet. Tag me if you are.

[Pasha Finkelshteyn]

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