Options
All
  • Public
  • Public/Protected
  • All
Menu

Namespace ImageCultureData

Image content data

The image content ImageCultureData JSON object, which is accessible as MicrioImage.data as the Writable store, and MicrioImage.$data for its current value.

This JSON data includes:

  • Markers
  • Marker tours
  • Video tours
  • Background audio
  • Positional audio
  • Custom menu screens and content pages

This file is most likely created in the Micrio editor and this file is published separately per language. By default this is English, data.en.json.

To access the data of the current viewed image, use:

// The current shown image value of the .data store Writable
const data = micrio.$current.$data;

if(data) console.log(`The current image has ${data.markers.length} markers!`);
else console.warn('The current image has no data set.');

To subscribe to any data changes:

micrio.$current.data.subscribe(data => {
    console.log('Image has new or updated data!', data);
})

To set your own custom data:

micrio.$current.data.set({
    "markers": [
        {
            "title": "This is a test marker!",
            "x": .5,
            "y": .5
        }
    ]
})

Or to update an existing loaded data object:

micrio.$current.data.update(data => {
    data.markers.push({
        "title": "This is a newly added marker",
        "x": .5,
        "y": .5
    });
    return data;
})

Index

Type aliases

Type aliases

ImageCultureData

ImageCultureData: { markers: Marker[]; markerTours: MarkerTour[]; tours: VideoTour[]; pages: Menu[]; audio?: { playlist: { items: Audio[]; loop: boolean }; locations: AudioLocation[] }; description?: string; copyright?: string; sourceUrl?: string }

The main data JSON structure

Type declaration

  • markers: Marker[]

    Markers

  • markerTours: MarkerTour[]

    Marker tours

  • tours: VideoTour[]

    Video tours

  • pages: Menu[]

    Custom menu pages

  • Optional audio?: { playlist: { items: Audio[]; loop: boolean }; locations: AudioLocation[] }

    Image audio data

    • playlist: { items: Audio[]; loop: boolean }

      Music playlist

      • items: Audio[]

        The audio assets

      • loop: boolean

        Loop the playlist

    • locations: AudioLocation[]

      Positional audio asset items

  • Optional description?: string

    Optional lang-specific image description

  • Optional copyright?: string

    Image copyright information

  • Optional sourceUrl?: string

    Original source URI

Marker

Marker: { id: string; x: number; y: number; view?: View; title?: string; slug?: string; body?: string; html?: string; bodySecondary?: string; class?: string; audio?: Audio; audioAutoPlay?: boolean; noMarker?: boolean; htmlElement?: HTMLElement; embedImages?: Embed[]; embedUrl?: string; embedDescription?: string; embedInPopover?: boolean; embedMutesAudio?: boolean; embedInEmbed?: boolean; embedInEmbedImmediate?: boolean; images?: Models.Assets.Image[]; videoTour?: VideoTour; data?: { icon?: Models.Assets.Image; micrioLink?: ImageInfo; micrioSplitLink?: string; noAnimate?: boolean; showTitle?: boolean; noPopup?: boolean; staticPopup?: boolean; preventImageOpen?: boolean; embedsAreMarker?: boolean; keepEmbedsOpen?: boolean; notEmpty?: boolean; doJump?: boolean; alwaysOpen?: boolean; scales?: boolean; _meta?: {} } }

A Marker

Type declaration

  • id: string

    The marker ID

  • x: number

    The relative marker X coordinate [0-1]

  • y: number

    The relative marker Y coordinate [0-1]

  • Optional view?: View

    The viewport to zoom to when the marker is opened

  • Optional title?: string

    The marker title

  • Optional slug?: string

    The marker url slug

  • Optional body?: string

    Marker main body text

  • Optional html?: string

    Marker markdown markdown rendered body (autogenerated)

  • Optional bodySecondary?: string

    Marker secondary body text

  • Optional class?: string

    Marker classnames

  • Optional audio?: Audio

    Audio asset

  • Optional audioAutoPlay?: boolean

    Autoplay the audio asset when the marker is opened

  • Optional noMarker?: boolean

    Don't draw a marker element

  • Optional htmlElement?: HTMLElement

    A custom HTML element instead of the default

  • Optional embedImages?: Embed[]

    Embedded images into main image

  • Optional embedUrl?: string

    An optional iframe embed url

  • Optional embedDescription?: string

    Embed description

  • Optional embedInPopover?: boolean

    Open the iframe embed in a full-window popover overlay

  • Optional embedMutesAudio?: boolean

    Having the embed iframe printed mutes audio

  • Optional embedInEmbed?: boolean

    Put the iframe embed as the first image embed

  • Optional embedInEmbedImmediate?: boolean

    Put the iframe embed into the image embed on image load

  • Optional images?: Models.Assets.Image[]

    Images inside marker popup

  • Optional videoTour?: VideoTour

    Video tour which plays when the marker is opened

  • Optional data?: { icon?: Models.Assets.Image; micrioLink?: ImageInfo; micrioSplitLink?: string; noAnimate?: boolean; showTitle?: boolean; noPopup?: boolean; staticPopup?: boolean; preventImageOpen?: boolean; embedsAreMarker?: boolean; keepEmbedsOpen?: boolean; notEmpty?: boolean; doJump?: boolean; alwaysOpen?: boolean; scales?: boolean; _meta?: {} }

    Optional marker settings

    • Optional icon?: Models.Assets.Image

      A custom marker icon image

    • Optional micrioLink?: ImageInfo

      This marker links to this image

    • Optional micrioSplitLink?: string

      This marker opens secondary split image with id

    • Optional noAnimate?: boolean

      Don't animate the camera when opening this marker

    • Optional showTitle?: boolean

      Show the title below the marker

    • Optional noPopup?: boolean

      Prevent opening the marker popup

    • Optional staticPopup?: boolean

      This marker has a static popup instead of being placed relative to the marker

    • Optional preventImageOpen?: boolean

      Don't open a large image viewer/gallery on image click

    • Optional embedsAreMarker?: boolean

      The marker in-image embeds are the marker trigger instead of a regular marker button

    • Optional keepEmbedsOpen?: boolean

      The marker in-image embeds stay visible after closing the marker

    • Optional notEmpty?: boolean

      Force a marker popup no matter what

    • Optional doJump?: boolean

      Jump the camera when opening this marker

    • Optional alwaysOpen?: boolean

      This marker is not closeable

    • Optional scales?: boolean

      The marker scales with the zooming image

    • Optional _meta?: {}

      Optional custom settings. This is the "Custom JSON" field in the marker editor

    Embed

    Embed: MicrioImage & { area: View; fileUrl: string; frameSrc: string; scale: number; rotX: number; rotY: number; rotZ: number; micrioId?: string; width?: number; height?: number; isPng?: boolean }

    An embedded element inside the main image. This could be an image, or possible iframe embed. This is created in the Micrio editor.

    Tour

    Tour: { id: string; title: string; description: string; slug: string; autostart?: boolean }

    The MicrioTour abstract shared class for both MarkerTour and VideoTour

    abstract

    Type declaration

    • id: string

      The tour id

    • title: string

      The tour title

    • description: string

      The tour description

    • slug: string

      The tour url slug

    • Optional autostart?: boolean

      Autostart this tour on image load

    VideoTour

    VideoTour: Tour & { duration: number; timeline: { start: number; end: number; rect: View }[]; events?: Event[]; audio?: Audio; keepMarkers?: boolean; keepInteraction?: boolean; subtitle?: Subtitle }

    A Micrio video tour -- a timed sequence of viewport, with optional audio file. This is created in the Micrio editor.

    Event

    Event: { start: number; end: number; action?: string; data?: string; id?: string }

    Timed events inside a [[MicrioVideoTour]]

    Type declaration

    • start: number

      Start time in seconds

    • end: number

      End time in seconds

    • Optional action?: string

      Custom event name

    • Optional data?: string

      Custom event data

    • Optional id?: string

      Optional ID to hook to

    MarkerTour

    MarkerTour: Tour & { steps: string[]; cannotClose?: boolean; controls?: boolean; image?: Models.Assets.Image; hideMarkers?: boolean; scrollable?: boolean; keepLastStep?: boolean; duration?: number; currentStep?: number }

    A Micrio marker tour -- a sequence of markers, which the user can navigate through. This is created in the Micrio editor.

    Menu

    Menu: { title: string; children?: Menu[]; markerId?: string; link?: string; action?: Function; embed?: string; image?: string; content?: string; markdown?: string }

    A custom pop-out menu containing content pages or direct external links to websites, or direct links to opening a marker. This is created in the Micrio editor.

    Type declaration

    • title: string

      The menu title

    • Optional children?: Menu[]

      Child menu elements

    • Optional markerId?: string

      Open this marker when clicking menu

    • Optional link?: string

      Direct link url for menu button

    • Optional action?: Function

      Optional direct action function when clicked

    • Optional embed?: string

      For page: iframe embed

    • Optional image?: string

      For page: page image

    • Optional content?: string

      For page: content HTML

    • Optional markdown?: string

      For page: content markdown

    Generated using TypeDoc