feat: Add viewers for images and 3D models#210
feat: Add viewers for images and 3D models#210jedsundwall merged 3 commits intosource-cooperative:mainfrom
Conversation
|
@cmsetzer is attempting to deploy a commit to the Radiant Earth Team on Vercel. A member of the Team first needs to authorize it. |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
These viewers look awesome, but I can't yet preview it on the site. I'm inclined to just accept this, but it would be cool if we could load this URL in order to see it first: https://source-cooperative-git-fork-cmsetzer-featur-9c275c-radiantearth.vercel.app/harvard-lil/smithsonian-open-access/3d/009463d3-6f58-4f5b-8e60-915805a876ee/USNM_91201-150k-2048-medium-100k-2048_draco.glb @alukach any ideas of if/how we should be able to access data from the main site on previews like this? |
I've gone ahead and done this. https://source-cooperative-git-fork-cmsetzer-featur-9c275c-radiantearth.vercel.app/harvard-lil/smithsonian-open-access/3d/009463d3-6f58-4f5b-8e60-915805a876ee/USNM_91201-150k-2048-medium-100k-2048_draco.glb now works (and looks very slick) |
| case "jpg": | ||
| case "jpeg": | ||
| case "svg": | ||
| case "tiff": |
There was a problem hiding this comment.
| case "tiff": | |
| case "tif": | |
| case "tiff": |
Also, this is going to make things complicated when we get a COG viewer integrated (#169) but we can cross that bridge when we can get to it.
## What I'm changing This change enables the ObjectPreview `iframe` element to launch full screen mode for viewers that request it, such as the image and 3D model viewers from #210. ## How I did it I've added the permissions policy `allow="fullscreen"` to the `iframe` in ObjectPreview. This enables any current or future viewer to launch full screen mode. An alternative approach would be to make `allow` a custom per-format attribute like `style`, but this seems simpler. ## How you can test it On a preview branch where this feature is active, navigate to the following pages and click the "Toggle full screen" button within the preview `iframe`: * https://source.coop/harvard-lil/smithsonian-open-access/media/nmnh/NMNH-00000406-000001.jpg * https://source.coop/harvard-lil/smithsonian-open-access/3d/009463d3-6f58-4f5b-8e60-915805a876ee/USNM_91201-150k-1024-low.glb Co-authored-by: Anthony Lukach <anthonylukach@gmail.com>
3 participants
What I'm changing
This adds
ObjectPreviewmappings for image and 3D model files.How I did it
I've transferred the image-viewer and model-viewer repos to the Source organization. Each app is deployed as a static GitHub Pages site that accepts a
urlparameter representing the file to preview.How you can test it
For image-viewer, pass an image file URL via the
urlparameter. Supported formats: JPEG, PNG, GIF, SVG, WebP, TIFF, AVIF, BMP. Examples:Likewise, for model-viewer, pass a 3D model file URL via the
urlparameter. Supported formats: GLB, GLTF, OBJ, STL. Examples: