1. Write short markdown file for a new {PAPER} and {FIGURE}.

• If you save the markdown file to cycif.org/index.md, then the image will display at localhost:4000.
• If you save the markdown file to cycif.org/data/example.md, then the image will display at localhost:4000/data/example.
• The file should look like this:

---
layout: osd-exhibit
paper: {PAPER}
figure: {FIGURE}
---

2. Write a yaml file to _data/{PAPER}/{FIGURE}.yml. The file should have this structure:

Exhibit:
  Header: ***
  Footer: ***
  PixelsPerMicron: ***
  Images:
    - Name: i0
      Description: ***
      Path: ***
      Width: ***
      Height: ***
      MaxLevel: ***
  Layout:
    Grid:
      - [i0]
  Groups:
    - Path: ***
      Name: ***
      Colors:
        - ***
        - ***
        ...
      Channels:
        - ***
        - ***
        ...
    ...
  Masks:
    - Name: ***
      Path: ***
    ...
  Stories:
  - Name: ***
    Waypoints:
      - ***
      ...

You can add a Header for the table of contents page. You can add Footer text to appear at the bottom of each page. You can set PixelsPerMicron in order to have the viewer show a scale-bar. You need the keys Images, Layout, and Groups to connect an image pyramid to the viewer. Masks and Stories are optional.

Image Pyramids

• Your tiles for composite images must have URLs matching this format:

  • {image}/{group}/{level}_{x}_{y}.jpeg

• Your tiles for segmentation masks must have URLs matching this format:

  • {image}/{mask}/{level}_{x}_{y}.png

Each image Path must point to the image's root folder:

  Images:
    - Name: i0
      Description: Example Image
      Path: {image}
      Width: 16384
      Height: 16000
      MaxLevel: 4

Note: The viewer assumes the tiles measure 1024x1024 pixels unless specified by TileSize: [x,y].

Each {group} and {mask} must be a subfolder of {image}. The Groups must each specify channels and the corresponding colors used to render the channel group:

  Groups:
    - Path: {group}
      Name: Example Group
      Colors:
        - FF0000
        - 0000FF
      Channels:
        - Channel 1
        - Channel 2
  Masks:
    - Name: Example Mask
      Path: {mask}
    ...

Each channel group's configuration should match those used to render the channel group's composite image. In this case, the channel group describes a composite image that renders Channel 1 to red and Channel 2 to blue. The colors are given in hexadecimal RRGGBB.

Stories and Waypoints

In a web browser, enter your figure's url with ?edit added to the end of the page name. The interface should look similar to the below screenshot.

Fill out name with a few words and description with a multi-line narrative. You can fill out arrow text with a few words to accompany the arrow created with the arrow button. You can also select regions in the image with the region or rectangle buttons.

Below "select a marker group" or "add a data layer", you can select composite channel groups or segmentation layers to make available to the user at the waypoint. The editor will then show you separate lists below the white dropdown menu. You can use these lists to set one marker group or many data layers to be the defaults for your waypoint.

You should click COPY and then paste the snippet after Waypoints in the yml file. Here is an example of what that should look like:

  Stories:
  - Name: test
    Waypoints:
    - Zoom: 1.383
      Pan:
        - 0.6716
        - 0.3713
      Arrows:
        - Point:
            - -100
            - -100
          Text: Arrow
          HideArrow: false
      Polygon: Q
      Group: Group 1
      Description: >-
        Lorem ipsum dolor sit amet, consectetur
        adipiscing elit, sed do eiusmod tempor
        incididunt ut labore et dolore magna
        aliqua.
      Name: Example Waypoint
      Overlays:
        - x: -100
          y: -100
          width: 1
          height: 1
      Masks:
        - Cluster 1
        - Cluster 2
      ActiveMasks: []