serhii.net

• Diagrams

  • A Quarto tip a day - Diagrams

• This shows how to use fragments inside code/diagram segments: Fragment Layout Elements in Reveal.JS · quarto-dev/quarto-cli · Discussion #3685

• Non-quarto solutions:

  • Using code to generate graphs: GraphViz as figure when generated by R code · quarto-dev/quarto-cli · Discussion #5949
  • mapio/GraphvizAnim: A tool to create animated graph visualizations, based on graphviz.

Simplest way possible

• Multiple fragments one after the other with less and less invisible graph parts
  • style=invis: sum [label="∑", fillcolor="#27ae60", shape=circle, style=invis];¹

This makes everything invisible by default, uncommenting the lines makes the parts visible

digraph G {
    rankdir=LR;
    node [shape=circle, style=invis, fontcolor=white, fontsize=18, fillcolor="white", color="white"];
    edge [color="white", fontcolor="white"];
    graph [color="white"];
  
    
  subgraph cluster_1 {
    #label = "Inputs";
    // uncomment for visibility:
    node [fillcolor="#2c3e50", style="filled"]
    
    n0 [label=<1>];
    n1 [label=<x<SUB>1</SUB>>];
    n2 [label=<x<SUB>2</SUB>>];
    n3 [label=<x<SUB>n</SUB>>];

    { rank=same; n0; n1; n2; n3; }
  }
  
  subgraph arrows {
    // uncomment for visibility of arrows:
    edge [color="black", fontcolor="black"];
    node [style="filled", fillcolor="#27ae60"];
    
    
    n0 -> sum [label=<w<SUB>0</SUB>>];
    n1 -> sum [label=<w<SUB>1</SUB>>];
    n2 -> sum [label=<w<SUB>2</SUB>>];
    n3 -> sum [label=<w<SUB>n</SUB>>];
 
    sum [label="∑"];
  }
    
  subgraph end {
    // uncomment for visibility
    edge [color="black", fontcolor="black"];
    node [style="filled", fillcolor="#27ae60"];

    activation [label="∫", fillcolor="#f39c12", shape=circle];

    // Output node
    output [label="y", fillcolor="#8e44ad"];

    // Other edges
    sum -> activation;
    activation -> output;

   }

}

• The very best QR code generator is https://hovercode.com/
• DuckDuckGo can generate simple ones as well: qr https://www.eff.org/ at DuckDuckGo

• To get images, rename the pptx to .zip¹ and just copy them from the archive
  • zipinfo lists everything

• ssine/pptx2md: a pptx to markdown converter does this automatically!

  • --qmd
  • Had to install deps manually
  • In LibreOffice could delete the footer and header in the master slide, giving me clean slides.
    • LibreOffice could delete header only, but not the footer — had to use MS Office for this

• // Ha: [Falk358/quarto_translator: A python project for translating quarto markdown files using the openai API](https://github.com/Falk358/quarto_translator+

  • Tested it on a small file, it actually works nicely

LaTeX

Colorful equations

How do I write LaTeX with colors in quarto presentations? · quarto-dev/quarto-cli · Discussion #4429

$$\begin{aligned}
\color{green}{\bf{Net Benefit}} = \frac{\color{green}{\bf{TP}}}{\text{N}} - \frac{\color{red}{\bf{FP}}}{\text{N}} * {\frac{{p_{t}}}{{1 - p_{t}}}}
\end{aligned}$$

$$\color{red}{w_0} + x_1*w_1 + x_2*w_2 + x_1*w_1$$  

It uses the usual names: LaTeX Color Definitions

Actually² these: MathJax-src/ts/input/tex/color/ColorConstants.ts at master · mathjax/MathJax-src

HA, it can even do usual RGB hex colors!

The useful to me are Cardinal/Carmine and Cerulean/Blue?..

Size of formulas

• Modifying the MathJax size · quarto-dev/quarto-cli · Discussion #2392 only global

• Mathjax supports things like \tiny{w_..}! (Changing mathjax’s font size - Stack Overflow)

Quarto align stuff right

Quarto: How to right justify text in PDF and HTML - Stack Overflow:

\`\`\`{=html}
<style>
.flushright {
   text-align: right;
}
</style>

::: {.flushright}

But actually,

::: {style="text-align: right;"}
$\small{E(W) = \frac{1}{n} \sum_{i=1}^{n} \mathcal{L} \left( \color{blue}{f(x^{(i)}; W)}, \color{red}{y_{true}^{(i)}} \right)}$
:::

Height and aspect ratios

Preview in a long/high browser window to see what the actual width of the presentation is. PDF export also uses the actual width

Misc

• ✕ aka MULTIPLICATION X is a really nice cross mark to use in random pictures.³
  • \times in latex
• ⮕ is a good arrow.
  • → is better (→)
  • more: HTML Unicode UTF-8

Closing the window with the kitty terminal through qtile/OS means often asks you whether you really want to, as sth is running there.

Kitty has Ctrl+Shift+W which closes the terminal no questions asked.

Used Apps/Dia - GNOME Wiki! all my life and love it, but

News! 2011-Dec-18: Version 0.97.2 has been released.

Depends on python 2.7 and is very problematic to install now. I’ll miss it.

I hear https://draw.io is a good alternative.

I’ll add a list of options here next time I need this.

(But for older dia files I’ll have to edit maybe later: it could be installed on a Windows machine and export a broken .SVG which I could then edit in Inkscape.)

Context: in a paper, using PDF graphics is much better than e.g. PNG, because antialiasing (230628-1313 Saving plots matplotlib seaborn plotly PDF). Assume you need to crop one, and taking a PNG screenshot won’t cut it, because it would defeat the entire purpose.

LaTeX

TL;DR: in \includegraphics, trim=left bottom right top (in cm)

positioning - How can I crop included PDF documents? - TeX - LaTeX Stack Exchange:

includegraphics[clip, trim=0.5cm 11cm 0.5cm 11cm, width=1.00\textwidth]{PDFFILE.pdf}

BUT! If I’m ever in this situation, inkscape can really nicely open a PDF and export only the selected things, also as PDF.

Inkscape (much better)

1. When importing, “Replace text with closest available font”
   • e.g. OpenSans gets matched to Open Sans and it works out usually
   • the full list of fonts is shown in the import window
2. Select the part I want to crop
   1. or create a shape over it and select that shape or something
3. Export selection only as PDF; play with export settings as well if needed but for me the defaults worked this time

And either way

… test the results by downloading the PDF from overleaf and opening it locally, because antialiasing w/ imported vector pictures can be broken from within the preview window.

Usual:

format: 
  revealjs:
    logo: logo.png
    theme: [default, custom.scss]

Adding after the first one, so no !important needed¹:

format: 
  revealjs:
    logo: logo.png
    header-includes: |
      <link href="custom.css" rel="stylesheet">      

Inline w/o declaring classes²:

Some [red words]{style="color:#cc0000"}

or:

::: {style="font-size: 1.5em; text-align: center"}
styling an entire div
:::

• Main Quarto Reveal SCSS: quarto-cli/src/resources/formats/revealjs/reveal/css/reveal.scss at 303c4bc9f52ea0b0c36c5eb5dfbade9cece2b100 · quarto-dev/quarto-cli
• Quarto footer css: quarto-cli/src/resources/formats/revealjs/plugins/support/footer.css at main · quarto-dev/quarto-cli

For yay, the cache is in

$HOME/.cache/yay/

If the package is there, then: sudo pacman -U ./quarto-cli-1.4.555-1-x86_64.pkg.tar.zst

Then pin the package in /etc/pacman.conf:

# Pacman won't upgrade packages listed in IgnorePkg and members of IgnoreGroup
IgnorePkg   = quarto-cli
#IgnoreGroup =

Then yay -Syu will ignore it as well:

:: Synchronizing package databases...
 endeavouros is up to date
 core is up to date
 extra is up to date
 multilib is up to date
:: Searching AUR for updates...
 -> quarto-cli: ignoring package upgrade (1.4.555-1 => 1.5.52-1)
:: Searching databases for updates...
 there is nothing to do

Refs: How do you downgrade an AUR package? : r/archlinux

For not-AUR, there’s the downgrade command: archlinux-downgrade/downgrade: Downgrade packages in Arch Linux

References

• Refs:
  • Revealjs Options – Quarto¹
  • Advanced Reveal – Quarto
  • Revealjs – Quarto
• Previously:
  • 240424-1923 Presentations with Quarto and Reveal.js has my list of tricks
• Code
  • Quarto reveal.scss: quarto-cli/src/resources/formats/revealjs/reveal/css/reveal.scss at 303c4bc9f52ea0b0c36c5eb5dfbade9cece2b100 · quarto-dev/quarto-cli
  • Quarto Reveal footer CSS: quarto-cli/src/resources/formats/revealjs/plugins/support/footer.css at main · quarto-dev/quarto-cli

Misc

Better preview at a specific port, handy for restarting after editing CSS. Similar to quarto project frontmatter preview: port: 4444 browser: false.

quarto preview slides.qmd --port 4444 --no-browser

Supported by default

In frontmatter:

• logo is in bottom-right+
  • footer-logo-link
• footer for all slides
  • overwrite with div of class footer
• Likely relevant for me: Numbering reveajs options for dynamic bits, shift-heading-level-by, number-offset, number-section, number-depth — will touch if I need this.

Headers

• Extension: shafayetShafee/reveal-header: A Quarto filter extension that helps to add header text and header logo in all pages of RevealJs slide²
  • Has absolutely awesome documentation!

In front matter:

• header: one header text for all presentation
• title-as-header,subtitle-as-header: if true, place the presentation frontmatter’s title/subtitle as header if one not provided (overwriting the header value)
  • use-case: I same repeating text everywhere w/o specifying it every time.
• hide-from-titleSlide: all/text/logo to hide it from title slide
• sc-sb-title: if true, h1/h2 slide titles will appear in the slide header automatically when slide-level is 2 or 3

Divs with classes:

• .header: slide-specific header

• Excellent example from its docu of dynamic per-(sub-)section headers:

  • code: reveal-header/example_all.qmd at main · shafayetShafee/reveal-header
  • demo: Quarto Presentations

Left/right/center blocks of text in header

³

• If one uses section/subsection titles, they go in the left third and right third of the header, with the normal header text in the middle. This is neat to have in general, w/o the section/subsection titles.
  • sc-title, on the left, is section title
  • sb-title, on the right, is subsection title
• How do I add arbitrary text there? And what would be a good interface for it?

The right way — extension code

• I could look at the extension, maybe fork it, and find a way to put text in these divs
• Relevant code:
  • This JS populates them in each slide: reveal-header/_extensions/reveal-header/resources/js/sc_sb_title.js at main · shafayetShafee/reveal-header
  • add_header js: reveal-header/_extensions/reveal-header/resources/js/add_header.js at main · shafayetShafee/reveal-header
  • Main lua: reveal-header/_extensions/reveal-header/reveal-header.lua at main · shafayetShafee/reveal-header

Ugly CSS hack

• (Learn sass in Y Minutes)
• CSS for the header bits: reveal-header/_extensions/reveal-header/resources/css/add_header.css at main · shafayetShafee/reveal-header

Since .s[c|b]-title is present always, text added that way will be present on the title slide regardless of settings. … and — adding text to a presentation through CSS is, well, ..

.reveal-header .sc-title {
  background-color: red;

	&::before {
		content: 'sc-title header content';
  }

}

Slightly better ugly hack: main header text split in three, with two aligned l/r correspondingly.

.header-right {
  // text-align: left;
  float: right;
  background-color: pink;
  display: inline-block;
}

.header-left {
  // text-align: left;
  float: left;
  background-color: yellow;
  display: inline-block;
}

::: header 
[left]{.header-left} and not left [and right]{.header-right}
:::

Result:

Extended ugly SCSS hack

Improved the above to support both footer and headers I have a hammer and everything is a nail SCSS can do mixins let’s use them

// L/R margins of the footer — if logo is wider than this, it may overlap right footer text.
// By default, logo max-height is 2.2em, width auto based on this.
$footer-margin: 5em;

// left or right column bits
%hfcol {
  display: inline-block;
}


/* L/R columns in header */
.reveal .reveal-header .rightcol {
  @extend %hfcol;
  float: right;
}

.reveal .reveal-header .leftcol {
  @extend %hfcol;
  float: left;
}

/* L/R columns in footer */
.reveal .footer .leftcol {
  @extend %hfcol;
  float: left;
  margin-left: $footer-margin;
}

.reveal .footer .rightcol {
  @extend %hfcol;
  float: right;
  margin-right: $footer-margin;
}

Usage:

## I am a slide  with custom headers

And With content 

::: footer 
[Left footer]{.leftcol} Center footer [Right footer]{.rightcol}
:::

::: header 
[Left header]{.leftcol} Center header [Right header]{.rightcol}
:::

Frontmatter usage works only for footer, likely header doesn’t support markup.

    footer: "Center footer [right]{.rightcol} [left]{.leftcol}"  # CHANGEME

Result:

PROBLEMS:

• asymmetrical if only one of the two is present. Likely fixable, but I don’t want to force any center div.

Footers through qmd cols

This works almost perfectly, including missing values:

::: footer 

::: {.columns}
:::: {.column width="20%"}
left
::::
:::: {.column width="50%"}
Center footer
::::
:::: {.column width="20%"}
right
::::
:::

:::

It even works inside frontmatter as multiline string (not that it’s a good idea):

    footer: | 
      ::: {.columns}
      :::: {.column width="20%"}
      left
      ::::
      :::: {.column width="50%"}
      FB5 – Informatik und Sprachen: Deep Learning (MDS)
      ::::
      :::: {.column width="20%"}

      ::::
      :::

This removes the margin placing it exactly in the same place as a normal footer:

.reveal .footer p {
  margin: 0 !important;
}

(but headers don’t work)

What is a good interface?

A filter that parses frontmatter and puts things in the correct places.

Misc

• Down the front-end rabbit hole | quartoand.me

For later.

• SenteraLLC/ulabel: A browser-based tool for image annotation is used by the KiTS23 | The 2023 Kidney Tumor Segmentation Challenge for annotation.