RevealJS: Draw Shapes (Rectangle, Circle) in Slide at Absolute Positions

[RoyiAvital]

Description

In Slides one can draw some shapes in the slide (Rectangles, Circles, etc...).

Is there a way, native or by a plug in, to draw shapes in Quarto as well?

[mcanouil]

You mean like these: https://duckduckgo.com/?q=draw+shapes+in+revealjs?

[RoyiAvital]

I am not sure what you mean.

But Slides has some shapes to add to the slides.
Since it is based on RevealJS I assume it is something can be done in Quarto as well.

To make it more concrete:

Shapes in the left, then I could easily draw the red rectangle.

[RoyiAvital]

I was looking for a solution within Quarto.
I have no experience with RevealJS.

Also, the first project is using RevealJS but for explaining about HTML5 element.
The 2nd one is about drawing on top of the slides in viewing mode.

[mcanouil]

Well Quarto cannot and will not include every Reveal.js plug-ins.
The only way for you to get this kind of features is: to do it yourself or wait for someone in the community to do it.

Note that Quarto documentation is pretty much exhaustive on what it can "natively" do, see https://quarto.org/docs/presentations/revealjs/ and https://quarto.org/docs/reference/formats/presentations/revealjs.html.

[mcanouil]

FYI, see the Reveal.js Quarto extension: https://quarto.org/docs/extensions/listing-revealjs.html

[RoyiAvital]

I am aware of those. Just thought there will be a quick / simple way to get away with this.
Let's see if there are other ideas.

[mcanouil]

Just thought there will be a quick / simple way to get away with this.

If there is a Plugin that does what you want it's not embedded as a Quarto extension or completely unknown to me.
If it exists, you won't find it here but by looking on the internet.
Finally, if by "quick / simple way" you mean to wait for someone else to do it, I am afraid, it's not a very likely outcome.

Let's see if there are other ideas.

I am not sure what other ideas you expect here ...

[jimjam-slam]

My guess is that the shapes buttons on slides.com probably draw SVG shapes. You could definitely include those SVG shapes in a Quarto revealjs presentation if you're willing to write the SVG yourself! Just put it inside an {=html} code block.

If you're looking for a visual interface to draw the shapes so that you don't have to write the SVG code yourself, you could use an SVG image editor like Boxy! You just need it to give you the code to copy-and-paste into your Quarto doc—or, if it gives you an SVG file, open that file in Notepad, TextEdit or a code editor and copy-and-paste the code from there.

[RoyiAvital]

Great! I am using draw.io but its generated SVG looks bloated.
I will try Boxy!.

I wonder if there could be simple templates so it will be available easily for starters as well.

[RoyiAvital]

I found some kind of a solution for rectangles and circles (And whatever is in between) based on a demo in the documentation: RevealJS - Auto Animate - Element Matching.

Basically, this becomes a constructor of a rectangle:

::: {data-id="box1" style="background: #2780e3; width: 200px; height: 150px; margin: 10px;"}
Text inside
:::

I need to experiment to see if:

1. I can put it in arbitrary location using the .absolute class.
2. I can manipulate the text within it (Vertical alignment, Horizontal alignment, etc...).

[egavazzi]

If someone is looking for the same thing and find that discussion (like me): arbitrary position does work with @RoyiAvital solution.

As an example:

::: {data-id="box1" style="background: #2780e3; width: 200px; height: 150px; margin: 10px; position: absolute; top: 400px; left: 200px"}
Text inside
:::

[00113844]

any other ways to add other shapes?