Art Gallery

A small and cozy art gallery for you to create your own multimedia-rich art exhibitions, furnish it with your content, and invite others to experience your creation!

To get started

Select the "Art Gallery" stage from the main UI dropdown menu. Once it loads, walk over to the "Please Stand Here" sign on the floor to begin.

Viewing artworks through the Art Gallery

To bring the 14 virtual canvases in the gallery to life, each needs a media source to display its content. You can easily set this up by creating a list of the desired media and providing it to OMPR Quest for loading. For generating this list, we’ll use the free text-hosting service Pastebin.com.

Why Pastebin?

With Pastebin, sharing your Art Gallery creations has never been easier! Simply share your Pastebin ID of your artwork list, and anyone around the world with an OMPR Quest app can experience your gallery firsthand. Showcase your creativity and let others immerse themselves in your masterpiece, wherever they are.

What content can I display in the gallery?

At the moment (01/06/2025):

• Display any image (PNG,JPG,JFIF, GIF) , video (MP4 , WEBM) and Webpage to the canvases in the gallery.

• Webpage is fully interactable (left-click, right-click,drag/drop,scrolling, double clicking)

• Attach volumetric audio (MP3, OGG, WAV) to the canvases

Coming soon:

• Display animated/static 3D model (GLB) on various gallery model placement points.

• Attach volumetric audio (MP3, OGG, WAV) to 3D Model

• Virtual pamphlet (PDF, CBR, CBZ, CB7) located next to the canvases in the gallery

How to Load Media onto the Art Canvas

Step 1: Create a Pastebin Media List

1. Compile Your Media URLs: Include supported media formats (JPG, PNG, GIF, WEBM, and MP4) in your list. Each URL should be on a separate line. Example of a basic valid list:

https://i.pinimg.com/564x/fd/9d/73/fd9d73d2086235b5e19678bc8b0a8da7.jpg
https://i.imgur.com/hEvUzyi.mp4
https://i.pinimg.com/564x/70/eb/78/70eb78e46eba7a11e0014bdc5e2abbcb.jpg
https://media1.tenor.com/m/YqdDgsN-a44AAAAd/van-gogh-art.gif
https://i.imgur.com/1aupG5h.mp4
https://drive.google.com/file/d/1OXo8it5U3GUYUA5DGZyu6xxv66WTxEzU/view?usp=sharing
https://sketchfab.com/3d-models/tyrannosaurus-rex-31-f1bd8fcd553241a695712edab73ad81f
https://www.youtube.com/watch?v=iA6sczoAvjM
.....

1. Save the Pastebin List: Ensure your list is set to public visibility.

2. Note Down the Unique ID: The unique ID is the last part of the Pastebin URL. Example: For https://pastebin.com/CtU32Ksg, the unique ID is CtU32Ksg.

Step 2: Load Your Media List

1. Open the gallery interface.

2. Enter the unique Pastebin ID (e.g., CtU32Ksg) into the Custom Pastebin Code input field.

3. Click the Load button to populate the gallery with your media.

How to save your unique Pastebin codes for future use

• From the Add to dropdown, select the group where you'd like to save the Pastebin code.

• Enter your Pastebin code in the Custom Pastebin Code input field.

• Click the Add button to save it for easy access later.

How to create your group

• Go to the Group Manager section.

• Enter your desired group name in the New Group Name input field.

• Click the Plus (+) button to create and add the group.

Adding context to your Media List for display on the Stage UI (Optional):

To provide context for your media that will be visible to the target audience on the Stage UI, start the first line of your list in Pastebin with the following details, all in one line with the following format:

<title>; <description>; <thumbnail image URL>

For example:

Masterpieces Through Time; An Iconic Collection of Art; https://ompr.net/Gallery/thumbnails/FamousPaintings.jpg

Adding title and description notes to your Media

To include a description note that appears next to your media in the Art Gallery, format each media entry on a single line with the following details:

<Media URL>;<volume(0 to 1)>;<title>;<description>;<placement(0 or 1)>

Like so:

https://myawesomeimage.jpg; 0; Awesome title; Awesome description;0
https://myawesomevideoclip.mp4; 1; Video clip title; Video clip description;1

Field Explanation:

• Media URL: The URL to your media (image, video, etc.).

• Volume (0 to 1): Adjusts the playback volume for media files:

  • 0 = silent

  • 1 = maximum volume

  • Use values like 0.5 for a moderate volume level.

• Title: A custom title for your media.

• Description: A descriptive note for your media.

• Placement (0 or 1): Determines where the title and description will appear relative to the media:

  • 0 = Left of the media

  • 1 = Right of the media

By following this format, your titles and descriptions will be displayed alongside the respective media in the Art Gallery.

Can OMPR Quest make the process of creating the Pastebin list easier?

You can use the web-based Art Gallery Pastebin Text Generator tool to make it easier to create the list. It is accessible from here -> https://ompr.net/Gallery/Utility/GalleryMediaGenerator.html

Adding audio clips to your media (Optional)

You can easily add an accompanying audio to your images or videos, for example, to add narration or background music. Here is how you can add it to your media.

<MediaURL>;<volume>;<title>;<description>;<placement>;<AudioFileURL>;<audioVolume (0 to 1)>;<Looping(0 or 1)>

Example

https://myawesomeimage.jpg; 0.5; Stunning Sunset; A beautiful sunset over the ocean; 0; https://myaudiofile.mp3; 0.8; 1  
https://myawesomevideoclip.mp4; 1; Adventure Time; A thrilling adventure awaits!; 1; https://backgroundmusic.mp3; 0.3; 0  

Field Explanation:

1. MediaURL: The URL to your primary media (image, video, etc.).

2. Volume (0 to 1): Adjusts the playback volume for the primary media:

   • 0 = silent

   • 1 = maximum volume

   • Use values like 0.5 for a moderate volume level.

3. Title: A custom title for your media.

4. Description: A descriptive note for your media.

5. Placement (0 or 1): Determines where the title and description will appear relative to the media:

   • 0 = Left of the media

   • 1 = Right of the media

6. AudioFileURL: The URL to the audio file you want to associate with the media.

7. AudioVolume (0 to 1): Adjusts the playback volume for the audio clip:

   • 0 = silent

   • 1 = maximum volume

   • Use values like 0.8 for a higher volume or 0.3 for background-level audio.

8. Looping (0 or 1): Determines whether the audio will loop:

   • 0 = No looping

   • 1 = Loop the audio continuously

By following this format, your media can feature custom audio enhancements, such as narration or background music, tailored to your Art Gallery experience.

Are there any examples of working Pastebin list files that I can look at?

Sure here are a few that you can inspect and replicate. https://pastebin.com/raw/CtU32Ksg https://pastebin.com/raw/6JKVmE9w

Using Google Drive-hosted files

You can easily use your Google Drive files instead of a direct URL file to load your media and audio. All you need to do is copy the publicly shared link and place it in the <MediaURL> or <AudioFileURL> For example

// Direct url link 
https://myawesomeimage.jpg; 0.5; Stunning Sunset; A beautiful sunset over the ocean; 0; https://myaudiofile.mp3; 0.8; 1  https://myawesomevideoclip.mp4; 1; Adventure Time; A thrilling adventure awaits!; 1; https://backgroundmusic.mp3; 0.3; 0  

//Google Drive url link
https://drive.google.com/file/d/1OXo8it5U3GUYUA5DGZyu6xxv66WTxEzU/view?usp=sharing; 0.5; Stunning Sunset; A beautiful sunset over the ocean; 0; https://drive.google.com/file/d/17oq3qI0cKXI6VB80dvv9cB2Il4lxMWok/view?usp=sharing; 0.8; 1  

Are there any existing Art Gallery content that I can quickly view without creating my own?

Absolutely! The Art Gallery stage comes preloaded with curated content for you to enjoy right away. By default, you’ll find a special group in the Group List starting with "OMPR"—these are the curated galleries.

If you ever need to update the curated list or it is missing, simply press the cloud icon at the top of the Group List to refresh it manually. Dive in and explore the world of curated art without creating your own gallery just yet!

Adding Webpage Extra Variables (Optional)

If you want advanced control over how an embedded webpage is displayed (for example, adjusting width, height, or applying JavaScript), you can include up to five extra variables at the end of each media entry line. Your media line can look like this:

<MediaURL>;<volume>;<title>;<description>;<placement>;<AudioFileURL>;<audioVolume>;<Looping>;<webwidth>;<webheight>;<webresolution>;<webvolume>;<webjavascriptarray>

So in total, you can have up to 13 pieces of data for each entry. For example:

https://myawesomewebpage.com;1.0; Interactive Demo; This is a fully interactive web app;0; ; ; ;1080;768;1300;1;DTSKfTF5,Y5G3GAKM

Where the new parameters are:

1. webwidth (int)

   • The target width (in pixels) for the embedded webpage.

   • Typically defaults to 1080 if not specified or if set to 0.

   • maximum value for width is 2000

2. webheight (int)

   • The target height (in pixels) for the embedded webpage.

   • Typically defaults to 768 if not specified or if set to 0.

   • maximum value for height is 1000

3. webresolution (int)

   • The “resolution” or “scaling” factor for the webpage rendering. DPI density.

   • Typically defaults to 1300.

   • maximum value is 2000.

4. webvolume (float, 0 to 1)

   • If your embedded webpage includes audio, this sets its playback volume.

   • 0 = silent, 1 = maximum volume, with typical values like 1.0 or 0.5.

5. webjavascriptarray (string)

   • A custom string field to pass JavaScript parameters, function names, or other advanced options to your web embed.

   • Use javascript in text format hosted on Pastebin by providing the Pastebin ID

   • You can chain multiple Pastebin javascript by using a comma in between, for example: Y5G3GAKM, DTSKfTF5

   • The specified script will be triggered every time you are in front of the respective webpage canvas.

   • Leave blank if not used.

How to interact with the webpage canvas?

• Point the right-hand controller toward the webpage using the laser pointer.

• Index Trigger (Right Hand Controller): Acts as a left-click.

• Grip Trigger (Right Hand Controller): Acts as a right-click.

• Thumbstick (Right Hand Controller): Scrolls up or down when pointing toward the webpage.