Example slides for Kjera

Example Slides Using Kjera for Interactive slides

Example Name

Date / Time

Affiliation

Affiliation2

Outline

1. Overall slide arrangement

2. Source modules and style sheets

3. Image insertion

4. Inline \(\LaTeX\) functions

5. View 3D objects via Three.js

6. View 3D molecules via 3Dmol.js

7. Other applets

8. Summary

Overall slide arrangement

This is the box for page title (class: slide-title)

Left boundary box (class: box_style_leftbound)

1. Use div plus a box style as text box to display slides contents

2. Attach p tags to itemize the slides (class: slide_item_style1)

<div class="box_style_leftbound">
<p class="slide_item_style1">1. Contents A</p>

</div>

3. The default text-align property for this box type is left

This is an example box with
inset: 60% 60% 10% 10%

Change the "inset" property (shortcut to top, right, bottom, left properties) for new box styles

Right boundary box (class: box_style_rightbound)

1. It is advisable to attach images into text boxes for enhanced control over image styling

2. Images requires manual change on width or height properties to fit to the size of the slide or text box

3. The default text-align property for this box type is center

Fig: The example image is 50% of its parent box's width. The figure caption is using the class: content_subtitle

This is the box for potential references (class: reference_style)

More box style examples

Upper left corner (class: box_style_ulc)

Upper right corner (class: box_style_urc)

Lower left corner (class: box_style_llc)

Lower right corner (class: box_style_lrc)

More box style examples

Main body box (class: box_style_mainbody)

Lower boundary box (class: box_style_lowerbound)

Full-height right boundary box (class: box_style_fullrightbound)

The major different between this box type and box_style_rightbound is the height (5%-95% VS 20%-95% of the slide background)

Source modules and style sheets

JSDelivr CDN + Github

Advantages:

Free, ideal for lightweighted deployment

Disadvantages:

Cache update delays; Requires public repository;

Compose the URL in the following way:

https://cdn.jsdelivr.net/{type}/{user}/{repo}@{branch}/{file}
type: gh(Github); user: Github user name; repo: Repo name;
branch: Branch name or tag; file: File path;
https://cdn.jsdelivr.net/gh/miemiemmmm/Kjera@main/styles.css // for the style sheet
https://cdn.jsdelivr.net/gh/miemiemmmm/Kjera@main/modules.js // for the modules

To source style sheet (in head part):

To source JS modules (in script part):

import * as kjera from "https://cdn.jsdelivr.net/gh/miemiemmmm/Kjera@main/modules.js"

Commercial CDN

Advantages:

Higher stability and controllability; No constraints on visibility;

Disadvantages:

Additional setup required; Requires extra fees;

To source style sheet (in head part):

To source JS modules (in script part):

import * as kjera from "https://miemiemmmm.b-cdn.net/Kjera/modules.js"

Image insertion

CDN-based image insertion

1. Just define the src attribute to the URL of the image

2. The image might overflow the text box, requires manually setup for the width or height of the image

3. Add extra style/class to realize more effect/interactions

4. To match the width of the caption and image, add the caption to a div with class caption_container and manually adjust the width of the caption (Fig 1)

Fig 1. Image from JSdelivr with a constrained width (60% of its parent box). Applied an extra filter: grayscale(100%); The width of caption is explicitly set to 60% for width alignment; Added class onhover-top effect.

Fig 2. Image from commercial CDN with a constrained height (90% of its parent box). Applied an extra filter: contrast(15%); The width of caption is by default inherited from its parent box without explicit width alignment.

Fetch from Github API

Asynchronous Image Fetching

1. Assign an id attribute to the image for element selection

2. Use JS callback functions to fetch and configure the image

// When displaying the slide, fetch and setup the image
const github_api_url = "https://api.github.com/repos/miemiemmmm/Kjera/contents/";
kjera.set_repo(github_api_url);
kjera.setupImage("fetch_img_1", "Example_Image2.png");
// This example used filepath in Github repo, also supports base64 (as in Fig 2) or URL of the image

3. Set the styles of image in its HTML style or in JS callback

Fig 1: Asynchronous fetch from Github; The id of the image is "fetch_img_1" and the desired image is "Example_Image2.png"; Applied class: image-gray for the on-hover-removal of the gray-scale filter.

Batch Image Fetching

1. Retrieve all image data from the repository

2. Store all images in a global object, using file names as keys and their base64-encoded strings as values, for later access

3. Perform this operation during slide initialization to minimize repetitive fetching and enable advanced effects

// Already setup repo's url as in Fig 1 demo.
const FIGURES = {};
kjera.getAllImages(FIGURES).then(function(ret){
// Figures are by queried, named, and put to the FIGURES object
// Do something with the images in FIGURES
});

Fig 2: After quering all of images in the repository, swtich to the next image every 0.8 seconds.

Inline \(\LaTeX\) functions

Use MathJax for formula insertion

1. To interpret LaTeX, use a backslash followed by parentheses: \( \backslash( \) LaTeX expressions \(\backslash) \)

2. Use a <p> tag for standalone formulas

3. Embed inline formulas directly within the text

<p> \(\backslash(\)f(x)=\exp(-x^{2})\(\backslash)\) </p>
arbitrary real constants \(\backslash(\)a\(\backslash)\), \(\backslash(\)b\(\backslash)\) and non-zero \(\backslash(\)c\(\backslash)\).

An example sentences from Wiki:

In mathematics, a Gaussian function, often simply referred to as a Gaussian, is a function of the base form

\( f(x)=\exp(-x^{2}) \)

and with parametric extension

\( f(x)=a\exp \left(-{\frac {(x-b)^{2}}{2c^{2}}}\right) \)

for arbitrary real constants \(a\), \(b\) and non-zero \(c\).

View 3D objects via Three.js

1. Reserve a <div> for further rendering of the 3D object

2. Prevent duplicate canvas addition upon slide replay

if (document.getElementById("model_1").querySelector("canvas") == null){
// Render the 3D object only if the object is not initialized
}

3. Initializing a PLY object will return scene, renderer, camera and light for further operations

kjera.set_bgcolor("#FFF9DE") // change the background color
kjera.initPLYObject("model_1", "https://miemiemmmm.b-cdn.net/GM_Feb2024/ViewExample_THR.ply").then(function(ret){
  // Return is an array of object: [scene, renderer, camera, light]
  var scene = ret[0]
  var renderer = ret[1]
  var camera = ret[2]
  var light = ret[3]
  // Do something with the scene, renderer, camera, and light
})

Stage 1: Voxelized feature of Thr

View 3D molecules via 3Dmol.js

1. Similar to PLY object display, reserve a <div> and a canvas will be attached after stage initialization

2. Remove the existing canvas before Initializing the molecule (Due to some implicit reason in 3Dmol)

var thecanvas = document.getElementById("3dmol_viewer").querySelector("canvas");
if (thecanvas){ thecanvas.remove(); }

3. Kjera provides basic wrappers for molecule initialization and the viewer is returned for further operations

kjera.set_bgcolor("#F85F73") // change the background color
kjera.add3DMolObject("3dmol_viewer", "https://miemiemmmm.b-cdn.net/Kjera/protein.pdb").then(ret=>{
// Do something with the viewer
})

Stage 1. An example structure with protein as ribbon and ligand as sticks. A \(16\times16\times16\) grid is aligned to the center of the ligand with a transprent light green box.

Other applets

1. Click number 1 to activate the laster pointer.

2. On-hover display (class: onhover_show) and on-click fixation.

3. On-hover zoom (class: an img tag inside a gallery item: gallery-item, gallery-item2, gallery-item3) (Fig 1)

4. On-hover gray-scale filter (Fig 1)

This slide does not delve into the DOM element interactions and animations. However, you may explore and create your custom animations or applets.

Fig 1: On-hover zoom and gray-scale filter

Summary

Kjera provides a template for interactive slides with 3D objects and molecules.

For further technical problems, you might need to refer to the original API references for solutions.

Packages used in this project:

Reveal.js: Presentation framework
Three.js: 3D object rendering
3Dmol.js: 3D molecule rendering
MathJax: LaTeX rendering
jQuery: DOM element manipulation

Kind suggestions:

Choose an intelligent IDE (such as VSCode) or an AI assistant to streamline the repetitive aspects of HTML coding

The GitHub API imposes limitation on anonymous file requests. Consider providing an access token (READ-ONLY) or using a server to fetch contents directly to overcome this constraint.

Adjust zoom levels for varying screen resolutions (for instance, this slide set is optimized for a 2K monitor but may require ~80% zoom on 1080p monitors and ~150% for 4K monitors).

Good luck and have fun!