IMS - Interactive Media Spots

A lightweight collection of web components for interactive media visualization.

Features

• Responsive Design: All components automatically adapt to container size
• Modern Web Standards: Built using native web components
• Lightweight: Minimal dependencies and optimized performance
• Easy Integration: Simple HTML markup for implementation

Components

ims-diff

An image comparison widget with slider control. Perfect for before/after visualizations.

<ims-diff src-data="./diff-data.json"></ims-diff>

Configuration example:

{
  "imsType": "diff",
  "baseUrl": "https://your-cdn.com/",
  "variants": ["320", "640", "860", "1024"],
  "cdnIdList": ["image1-id", "image2-id"],
  "filters": ["grayscale(100%)", "none"]
}

ims-gallery

An interactive image gallery with touch support and fullscreen capabilities.

<ims-gallery src-data="./gallery-data.json"></ims-gallery>

ims-pano

A 360° panorama viewer with touch/mouse controls and zoom functionality.

<ims-pano src-data="./pano-data.json"></ims-pano>

Configuration example:

{
  "imsType": "pano",
  "autoplay": false,
  "baseUrl": "https://your-cdn.com/",
  "variants": ["640", "1024", "2048"],
  "cdnIdList": ["panorama-image-id"]
}

ims-spinner

A 360° object viewer that supports sequence animation and interactive rotation.

<ims-spinner src-data="./spinner-data.json"></ims-spinner>

Configuration example:

{
  "imsType": "spinner",
  "autoplay": true,
  "speed": 50,
  "showCover": true,
  "baseUrl": "https://your-cdn.com/",
  "variants": ["320", "640", "1024"],
  "cdnIdList": ["frame1-id", "frame2-id", "..."]
}

ims-viewer

Universal component, that loads dependencies dynamically using CDN with the certain application version support.

<ims-viewer src-data="./spinner-data.json"></ims-viewer>

Installation

1. Include the components via CDN or local files:

<script type="importmap">
  {
    "imports": {
      "@symbiotejs/symbiote": "https://esm.run/@symbiotejs/symbiote"
    }
  }
</script>

2. Import the desired component:

<script type="module" src="path/to/component.js"></script>

Common Features

All our widgets support:

• Adaptive content loading to optimize traffic and enhance page loading speed
• Adaptive DPI support
• Full-screen display mode
• Mobile device compatibility
• Image filters
• Alpha channel support for transparent backgrounds and background settings
• Easy universal integration using a custom HTML tag, without the need for JavaScript
• On-demand dynamic loading of necessary dependencies
• Simple and effective version management for widgets and required data
• Direct data encoding within images for use with specialized CDNs
• JSON for data and configuration transfer, both as static files and via API
• Ability to override settings for each specific embed using HTML tag attributes
• Flexible UI customization via standard CSS
• Compatibility with all popular modern frameworks
• Autogenerated URLs for used images to facilitate working with CDNs
• Watermarking for copyright protection (coming soon)
• Interactive hot spots for linking to other content, enabling the creation of more intricate and complex hypermedia stories (coming soon)
• Audio accompaniment (coming soon)

IMS is supported by all current versions of popular browsers.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT