From 2632297a08f720916354ca56f106d23ff01e71f2 Mon Sep 17 00:00:00 2001
From: Phillip Hohenester <hohenester@ux3d.io>
Date: Thu, 21 Jan 2021 16:24:16 +0100
Subject: [PATCH 1/5] added support for new xmp extension

---
 app_web/index.html           | 2 +-
 app_web/src/logic/uimodel.js | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/app_web/index.html b/app_web/index.html
index 4e8c8567..d60f902c 100644
--- a/app_web/index.html
+++ b/app_web/index.html
@@ -222,7 +222,7 @@ <h2>Animation</h2>
                         <span>XMP</span>
                     </template>
                     <h2>XMP</h2>
-                    <json-to-ui-template v-bind:data="xmp.xmp"></json-to-ui-template>
+                    <json-to-ui-template v-bind:data="xmp"></json-to-ui-template>
                 </b-tab-item>
                 <!--<b-tab-item label="Capture" icon="video">
                     <template #header>
diff --git a/app_web/src/logic/uimodel.js b/app_web/src/logic/uimodel.js
index 5419008d..3943082b 100644
--- a/app_web/src/logic/uimodel.js
+++ b/app_web/src/logic/uimodel.js
@@ -176,12 +176,12 @@ class UIModel
 
         const xmpData = gltfLoadedAndInit.pipe(
             map( (gltf) => {
-                if(gltf.extensions !== undefined && gltf.extensions.KHR_xmp !== undefined)
+                if(gltf.extensions !== undefined && gltf.extensions.KHR_xmp_json_ld !== undefined)
                 {
-                    if(gltf.asset.extensions !== undefined && gltf.asset.extensions.KHR_xmp !== undefined)
+                    if(gltf.asset.extensions !== undefined && gltf.asset.extensions.KHR_xmp_json_ld !== undefined)
                     {
-                        let xmpPacket = gltf.extensions.KHR_xmp.packets[gltf.asset.extensions.KHR_xmp.packet];
-                        return {xmp: xmpPacket};
+                        let xmpPacket = gltf.extensions.KHR_xmp_json_ld.packets[gltf.asset.extensions.KHR_xmp_json_ld.packet];
+                        return xmpPacket;
                     }
                 }
                 return [];

From f7edabfe8e97c2588830fea1a5413d64252300b4 Mon Sep 17 00:00:00 2001
From: Phillip Hohenester <hohenester@ux3d.io>
Date: Thu, 21 Jan 2021 16:58:17 +0100
Subject: [PATCH 2/5] made cards togglable (wip)

---
 app_web/index.html   | 24 +++++++++++++++++++-----
 app_web/src/ui/ui.js |  5 +++++
 app_web/ui.css       | 10 +++++++++-
 3 files changed, 33 insertions(+), 6 deletions(-)

diff --git a/app_web/index.html b/app_web/index.html
index d60f902c..3261cd51 100644
--- a/app_web/index.html
+++ b/app_web/index.html
@@ -78,10 +78,24 @@
 <script id="jsonToUITemplate" type="text/x-template">
     <div>
         <div v-for="(value, name) in data">
-            <div class="greyOverlay" style="word-break: break-word;">
-                <section>
-                    <label class="smallerLabel">{{ name }}</label>
-                </section>
+            <!-- TODO toggle class based on data member -->
+            <b-collapse class="cardGrayMain" animation="slide"  style="word-break: break-word;">
+                <!-- header -->
+                <template #trigger="props">
+                    <div class="cardHeader" role="button">
+                        <p class="smallerLabel">
+                            {{ name }}
+                        </p>
+                        <!-- a element needed for buefy. can be removed if hover effects are made custom -->
+                        <a>
+                            <b-icon
+                                :icon="props.open ? 'menu-down' : 'menu-up'">
+                            </b-icon>
+                        </a>
+                    </div>
+                </template>
+
+                <!-- content -->
                 <!-- if value is object -->
                 <div v-if="value !== null && value !== undefined && value.constructor.name === 'Object'">
                     <json-to-ui-template v-bind:data="value"></json-to-ui-template>
@@ -93,7 +107,7 @@
                 <div v-else>
                     <label class="smallestLabel">{{ value }}</label>
                 </div>
-            </div>
+            </b-collapse>
         </div>
     </div>
 </script>
diff --git a/app_web/src/ui/ui.js b/app_web/src/ui/ui.js
index 18122028..1a2769da 100644
--- a/app_web/src/ui/ui.js
+++ b/app_web/src/ui/ui.js
@@ -42,6 +42,11 @@ Vue.component('dual-label-element', {
 });
 Vue.component('json-to-ui-template', {
     props: ['data'],
+    data() {
+        return {
+            isInner: false
+        };
+    },
     template:'#jsonToUITemplate'
 });
 
diff --git a/app_web/ui.css b/app_web/ui.css
index 13e08b69..4e58317a 100644
--- a/app_web/ui.css
+++ b/app_web/ui.css
@@ -150,7 +150,7 @@ canvas
     opacity: 0.8;
 }
 
-.greyOverlay
+.cardGrayMain
 {
     background-color: #424242;
     margin-bottom: 5px;
@@ -159,6 +159,14 @@ canvas
     padding-left: 8px;
 }
 
+.cardHeader
+{
+    display: flex;
+    justify-content: space-between
+}
+
+
+
 .select, .select select
 {
     width: 100%;

From 63f7786ccb6205edcbc04288b0ecde168fb6a225 Mon Sep 17 00:00:00 2001
From: Phillip Hohenester <hohenester@ux3d.io>
Date: Fri, 22 Jan 2021 11:00:04 +0100
Subject: [PATCH 3/5] alternating card colors based on recursion depth

---
 app_web/index.html   | 10 ++++------
 app_web/src/ui/ui.js |  7 +------
 app_web/ui.css       | 13 +++++++++----
 3 files changed, 14 insertions(+), 16 deletions(-)

diff --git a/app_web/index.html b/app_web/index.html
index 3261cd51..8ab91df7 100644
--- a/app_web/index.html
+++ b/app_web/index.html
@@ -78,8 +78,7 @@
 <script id="jsonToUITemplate" type="text/x-template">
     <div>
         <div v-for="(value, name) in data">
-            <!-- TODO toggle class based on data member -->
-            <b-collapse class="cardGrayMain" animation="slide"  style="word-break: break-word;">
+            <b-collapse :class="(isinner === false) ? 'cardGrayMain' : 'cardGrayMainInner'" animation="slide"  style="word-break: break-word;">
                 <!-- header -->
                 <template #trigger="props">
                     <div class="cardHeader" role="button">
@@ -88,8 +87,7 @@
                         </p>
                         <!-- a element needed for buefy. can be removed if hover effects are made custom -->
                         <a>
-                            <b-icon
-                                :icon="props.open ? 'menu-down' : 'menu-up'">
+                            <b-icon :icon="props.open ? 'menu-down' : 'menu-up'">
                             </b-icon>
                         </a>
                     </div>
@@ -98,7 +96,7 @@
                 <!-- content -->
                 <!-- if value is object -->
                 <div v-if="value !== null && value !== undefined && value.constructor.name === 'Object'">
-                    <json-to-ui-template v-bind:data="value"></json-to-ui-template>
+                    <json-to-ui-template v-bind:data="value" v-bind:isinner="!isinner"></json-to-ui-template>
                 </div>
                 <!-- if value is array -->
                 <div v-else-if="Array.isArray(value)">
@@ -236,7 +234,7 @@ <h2>Animation</h2>
                         <span>XMP</span>
                     </template>
                     <h2>XMP</h2>
-                    <json-to-ui-template v-bind:data="xmp"></json-to-ui-template>
+                    <json-to-ui-template v-bind:data="xmp" v-bind:isinner="false"></json-to-ui-template>
                 </b-tab-item>
                 <!--<b-tab-item label="Capture" icon="video">
                     <template #header>
diff --git a/app_web/src/ui/ui.js b/app_web/src/ui/ui.js
index 1a2769da..293cecf5 100644
--- a/app_web/src/ui/ui.js
+++ b/app_web/src/ui/ui.js
@@ -41,12 +41,7 @@ Vue.component('dual-label-element', {
     template:'#dualLabelTemplate'
 });
 Vue.component('json-to-ui-template', {
-    props: ['data'],
-    data() {
-        return {
-            isInner: false
-        };
-    },
+    props: ['data', 'isinner'],
     template:'#jsonToUITemplate'
 });
 
diff --git a/app_web/ui.css b/app_web/ui.css
index 4e58317a..dedeb981 100644
--- a/app_web/ui.css
+++ b/app_web/ui.css
@@ -153,10 +153,15 @@ canvas
 .cardGrayMain
 {
     background-color: #424242;
-    margin-bottom: 5px;
-    padding-top: 8px;
-    padding-bottom: 8px;
-    padding-left: 8px;
+    padding: 8px;
+    margin-right: 5px;
+    margin-bottom: 8px;
+}
+.cardGrayMainInner
+{
+    background-color: #202020;
+    padding: 8px;
+    margin-bottom: 8px;
 }
 
 .cardHeader

From 8f23b0362d928beeaad50577ee1199169d320de5 Mon Sep 17 00:00:00 2001
From: Phillip Hohenester <hohenester@ux3d.io>
Date: Fri, 22 Jan 2021 12:06:14 +0100
Subject: [PATCH 4/5] css changes

---
 app_web/ui.css | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/app_web/ui.css b/app_web/ui.css
index dedeb981..0c36415f 100644
--- a/app_web/ui.css
+++ b/app_web/ui.css
@@ -36,7 +36,7 @@ nav.tabs ul
 
 section.tab-content
 {
-    background-color: #333333;
+    background-color: #363636;
     width: 300px;
 }
 
@@ -150,17 +150,25 @@ canvas
     opacity: 0.8;
 }
 
+.xmpWrapper
+{
+    margin-right: 5px;
+}
+
 .cardGrayMain
 {
     background-color: #424242;
     padding: 8px;
-    margin-right: 5px;
+    padding-right: 0px;
+    padding-bottom: 5px;
     margin-bottom: 8px;
 }
 .cardGrayMainInner
 {
-    background-color: #202020;
+    background-color: #4d4d4d;
     padding: 8px;
+    padding-right: 0px;
+    padding-bottom: 5px;
     margin-bottom: 8px;
 }
 

From 56b04c5c6c39a52009f76b9b9b3ec27ed22aa0aa Mon Sep 17 00:00:00 2001
From: Phillip Hohenester <hohenester@ux3d.io>
Date: Fri, 22 Jan 2021 12:07:38 +0100
Subject: [PATCH 5/5] forgot this in last commit

---
 app_web/index.html | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/app_web/index.html b/app_web/index.html
index 8ab91df7..c1ae5126 100644
--- a/app_web/index.html
+++ b/app_web/index.html
@@ -234,7 +234,9 @@ <h2>Animation</h2>
                         <span>XMP</span>
                     </template>
                     <h2>XMP</h2>
-                    <json-to-ui-template v-bind:data="xmp" v-bind:isinner="false"></json-to-ui-template>
+                    <div class="xmpWrapper">
+                        <json-to-ui-template v-bind:data="xmp" v-bind:isinner="false" ref="xmpUI"></json-to-ui-template>
+                    </div>
                 </b-tab-item>
                 <!--<b-tab-item label="Capture" icon="video">
                     <template #header>