From ac7ae9fade4a3f8a0de1e58eef9a0067bfd5ce18 Mon Sep 17 00:00:00 2001
From: patnorris
Date: Tue, 15 Aug 2023 23:41:09 +0200
Subject: [PATCH 01/17] Add option for space environment
---
.../components/EnvironmentLibrary.svelte | 69 ++++++++++++++++
.../components/EnvironmentPreview.svelte | 28 +++++++
.../helpers/space_helpers.js | 18 ++++
.../pages/Space.svelte | 82 ++++++++++++++++++-
4 files changed, 196 insertions(+), 1 deletion(-)
create mode 100644 src/PersonalWebSpace_frontend/components/EnvironmentLibrary.svelte
create mode 100644 src/PersonalWebSpace_frontend/components/EnvironmentPreview.svelte
diff --git a/src/PersonalWebSpace_frontend/components/EnvironmentLibrary.svelte b/src/PersonalWebSpace_frontend/components/EnvironmentLibrary.svelte
new file mode 100644
index 0000000..a33a862
--- /dev/null
+++ b/src/PersonalWebSpace_frontend/components/EnvironmentLibrary.svelte
@@ -0,0 +1,69 @@
+
+
+
+ {#each environments as item (item.name)}
+
+ {item.name}
+
+
+ {/each}
+
+
+
+
+
+
+
+
diff --git a/src/PersonalWebSpace_frontend/components/EnvironmentPreview.svelte b/src/PersonalWebSpace_frontend/components/EnvironmentPreview.svelte
new file mode 100644
index 0000000..6c07316
--- /dev/null
+++ b/src/PersonalWebSpace_frontend/components/EnvironmentPreview.svelte
@@ -0,0 +1,28 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/PersonalWebSpace_frontend/helpers/space_helpers.js b/src/PersonalWebSpace_frontend/helpers/space_helpers.js
index 28cdbdb..7e9b840 100644
--- a/src/PersonalWebSpace_frontend/helpers/space_helpers.js
+++ b/src/PersonalWebSpace_frontend/helpers/space_helpers.js
@@ -63,6 +63,24 @@ export const initiateCollapsibles = () => {
};
};
+export const getStringForSpaceWithEnvironment = (envToPreview) => {
+ return `
+
+
+
+
+
+
+
+
+
+
+
+
+
+ `;
+};
+
export const getStringForSpaceFromModel = (modelUrl) => {
return `
diff --git a/src/PersonalWebSpace_frontend/pages/Space.svelte b/src/PersonalWebSpace_frontend/pages/Space.svelte
index 1f7153c..11bdac8 100644
--- a/src/PersonalWebSpace_frontend/pages/Space.svelte
+++ b/src/PersonalWebSpace_frontend/pages/Space.svelte
@@ -14,7 +14,9 @@
import SpaceInfo from "../components/SpaceInfo.svelte";
import GlbModelPreview from "../components/GlbModelPreview.svelte";
import ItemLibrary from "../components/ItemLibrary.svelte";
+ import EnvironmentLibrary from "../components/EnvironmentLibrary.svelte";
import MediaContentPreview from "../components/MediaContentPreview.svelte";
+ import EnvironmentPreview from "../components/EnvironmentPreview.svelte";
import { getEntityClipboardRepresentation } from '../helpers/entity.js';
import { extractSpaceMetadata } from '../helpers/space_helpers.js';
@@ -244,6 +246,8 @@
// Close all option popups
openUploadModelFilePopup = false;
openItemsToAddLibraryPopup = false;
+ openAddMediaContentPopup = false;
+ openEnvironmentOptionPopup = false;
// Toggle whether the Edit Mode popup is open
openEditModelPopup = !openEditModelPopup;
resetUploadVariables();
@@ -395,7 +399,7 @@
aScene.appendChild(imageEntity);
} else {
aScene.replaceChild(imageEntity, aScene.querySelector('#imageFromUserFile'));
- }
+ };
} else {
aScene.addEventListener('loaded', function () {
// Create a new A-Frame entity for the image
@@ -609,6 +613,37 @@
};
};
+// Add environment option
+ let openEnvironmentOptionPopup = false;
+ let userSelectedEnvironmentOption = "default";
+ let isAddingEnvironmentInProgress = false;
+ let wasEnvironmentAddedSuccessfully = false;
+
+ const addEnvironmentToSpace = () => {
+ if (!isAddingEnvironmentInProgress) {
+ isAddingEnvironmentInProgress = true;
+ wasEnvironmentAddedSuccessfully = false;
+ try {
+ let scene = document.querySelector('a-scene');
+ var environmentEntity = scene.ownerDocument.createElement('a-entity');
+ environmentEntity.setAttribute('environment', `preset: ${userSelectedEnvironmentOption}`);
+ environmentEntity.setAttribute('id', 'presetEnvironmentSelectedByUser');
+ // Ensure that only one environment is added to the scene
+ var existingEnvironment = document.body.querySelector("#presetEnvironmentSelectedByUser");
+ if (existingEnvironment) {
+ scene.replaceChild(environmentEntity, existingEnvironment);
+ } else {
+ scene.appendChild(environmentEntity);
+ };
+ } catch (error) {
+ console.error("Adding Environment to Space Error:", error);
+ };
+ wasEnvironmentAddedSuccessfully = true;
+ isAddingEnvironmentInProgress = false;
+ };
+ };
+
+// Prepare dropdown menu
const addDropdownMenuForNewElements = () => {
var elements = document.body.getElementsByClassName("button fa fa-plus");
var addEntityButton = elements.item(0);
@@ -699,6 +734,21 @@
}, 1000);
};
+ // Create "Environment" option
+ const addEnvironmentOption = document.createElement("a");
+ addEnvironmentOption.href = "javascript:;"; // "empty" behavior, i.e. shouldn't do anything
+ addEnvironmentOption.id = "addEnvironment";
+ addEnvironmentOption.classList.add("dropdownOption");
+ addEnvironmentOption.innerHTML = "Environment";
+ addEnvironmentOption.onclick = function() {
+ toggleOpenEditModePopup();
+ // Handle add environment action
+ openEnvironmentOptionPopup = true;
+ setTimeout(() => {
+ window.addEventListener("click", closePopupsOnClickOutside , false);
+ }, 1000);
+ };
+
// Create "Add New Entity" option (from the + button ("Add Entity"), i.e. it keeps the onclick behavior of adding a new a-entity)
const addNewEntityOption = addEntityButton;
// @ts-ignore
@@ -714,6 +764,7 @@
dropdownMenuContent.appendChild(libraryOption);
dropdownMenuContent.appendChild(mediaContentOption);
dropdownMenuContent.appendChild(uploadFileOption);
+ dropdownMenuContent.appendChild(addEnvironmentOption);
dropdownMenuContent.appendChild(addNewEntityOption);
// Add button and dropdown menu to div
@@ -1393,6 +1444,35 @@
{/if}
+
+ {:else if openEnvironmentOptionPopup}
+
{/if}
{/if}
From 3e7e1496beca7fac5d97f7a71eef1905af361a0f Mon Sep 17 00:00:00 2001
From: patnorris
Date: Wed, 16 Aug 2023 00:23:10 +0200
Subject: [PATCH 02/17] Add code for 360-degree content
---
.../components/MediaContentPreview.svelte | 14 ++++-
.../helpers/space_helpers.js | 40 ++++++++++++
.../pages/Space.svelte | 62 +++++++++++++++----
3 files changed, 102 insertions(+), 14 deletions(-)
diff --git a/src/PersonalWebSpace_frontend/components/MediaContentPreview.svelte b/src/PersonalWebSpace_frontend/components/MediaContentPreview.svelte
index 28b11a5..d1793c7 100644
--- a/src/PersonalWebSpace_frontend/components/MediaContentPreview.svelte
+++ b/src/PersonalWebSpace_frontend/components/MediaContentPreview.svelte
@@ -1,8 +1,14 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+ `;
+};
+
export const getStringForSpaceFromImageFile = (imageUrl) => {
return `
@@ -177,6 +197,26 @@ export const getStringForSpaceFromImageFile = (imageUrl) => {
`;
};
+export const getStringForSpaceFrom360ImageFile = (imageUrl) => {
+ return `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ `;
+};
+
// Extract metadata fields from Space NFT
export const extractSpaceMetadata = (spaceNft, targetObject, forUpdatingSpace = false) => {
if (spaceNft && spaceNft.metadata && spaceNft.metadata.length > 0) {
diff --git a/src/PersonalWebSpace_frontend/pages/Space.svelte b/src/PersonalWebSpace_frontend/pages/Space.svelte
index 11bdac8..14c3deb 100644
--- a/src/PersonalWebSpace_frontend/pages/Space.svelte
+++ b/src/PersonalWebSpace_frontend/pages/Space.svelte
@@ -305,6 +305,7 @@
// Upload model file
let openUploadModelFilePopup = false;
let files;
+ let is360Degree = false; // This will store the state of the checkbox
let userUploadedFileURL;
let fileSizeToUpload;
let fileSizeUploadLimit = 2000000; // 2 MB
@@ -542,6 +543,8 @@
console.error("File Upload Error:", fileUploadResult);
};
} else if (sourceType === "UserUploadedMediaContent") {
+ // Capture 360-degree toggle
+ const set360DegreeContent = is360Degree ? true : false;
// Store file for user
const arrayBuffer = await files[0].arrayBuffer();
const uint8Array = new Uint8Array(arrayBuffer);
@@ -570,11 +573,25 @@
var assets = document.querySelector('a-assets');
assets.appendChild(newImageAsset);
function loaded() {
- contentEntity = scene.ownerDocument.createElement('a-image');
- contentEntity.setAttribute('src', '#userUploadedImageAsset_' + fileUploadResult.Ok.FileId);
- contentEntity.setAttribute('position', '0 3 -6');
- contentEntity.setAttribute('id', 'userUploadedImage_' + fileUploadResult.Ok.FileId);
- scene.appendChild(contentEntity);
+ // Determine whether the image is 360 degree and set the appropriate attribute
+ if (set360DegreeContent) {
+ contentEntity = scene.ownerDocument.createElement('a-sky');
+ contentEntity.setAttribute('src', '#userUploadedImageAsset_' + fileUploadResult.Ok.FileId);
+ contentEntity.setAttribute('id', 'userUploaded360Image_' + fileUploadResult.Ok.FileId);
+ contentEntity.setAttribute('rotation', '0 -130 0');
+ const existingSky = scene.querySelector('a-sky');
+ if (existingSky) {
+ scene.replaceChild(contentEntity, existingSky);
+ } else {
+ scene.appendChild(contentEntity);
+ };
+ } else {
+ contentEntity = scene.ownerDocument.createElement('a-image');
+ contentEntity.setAttribute('src', '#userUploadedImageAsset_' + fileUploadResult.Ok.FileId);
+ contentEntity.setAttribute('position', '0 3 -6');
+ contentEntity.setAttribute('id', 'userUploadedImage_' + fileUploadResult.Ok.FileId);
+ scene.appendChild(contentEntity);
+ };
};
newImageAsset.addEventListener('load', loaded);
} else if (fileName.endsWith('.mp4') || fileName.endsWith('.mov')) {
@@ -587,12 +604,26 @@
var assets = document.querySelector('a-assets');
assets.appendChild(newVideoAsset);
function loaded() {
- contentEntity = scene.ownerDocument.createElement('a-video');
- contentEntity.setAttribute('src', '#userUploadedVideoAsset_' + fileUploadResult.Ok.FileId);
- contentEntity.setAttribute('position', '0 3 -6');
- contentEntity.setAttribute('id', 'userUploadedVideo_' + fileUploadResult.Ok.FileId);
- contentEntity.setAttribute('video-play-on-click', true); // Add component to play video on click
- scene.appendChild(contentEntity);
+ // Determine whether the video is 360 degree and set the appropriate attribute
+ if (set360DegreeContent) {
+ contentEntity = scene.ownerDocument.createElement('a-videosphere');
+ contentEntity.setAttribute('src', '#userUploadedVideoAsset_' + fileUploadResult.Ok.FileId);
+ contentEntity.setAttribute('id', 'userUploaded360Video_' + fileUploadResult.Ok.FileId);
+ contentEntity.setAttribute('rotation', '0 -130 0');
+ const existingVideosphere = scene.querySelector('a-videosphere');
+ if (existingVideosphere) {
+ scene.replaceChild(contentEntity, existingVideosphere);
+ } else {
+ scene.appendChild(contentEntity);
+ };
+ } else {
+ contentEntity = scene.ownerDocument.createElement('a-video');
+ contentEntity.setAttribute('src', '#userUploadedVideoAsset_' + fileUploadResult.Ok.FileId);
+ contentEntity.setAttribute('position', '0 3 -6');
+ contentEntity.setAttribute('id', 'userUploadedVideo_' + fileUploadResult.Ok.FileId);
+ contentEntity.setAttribute('video-play-on-click', true); // Add component to play video on click
+ scene.appendChild(contentEntity);
+ };
};
newVideoAsset.addEventListener('loadeddata', loaded);
} else {
@@ -1373,6 +1404,11 @@
{#if isViewerSpaceOwner()}
Upload an Image or Video
+
+
+
+
+