From 3645e07c0d8fd2512bb5036d5b1bfa29283bde57 Mon Sep 17 00:00:00 2001
From: kovacsv <viktorkovacs@gmail.com>
Date: Thu, 24 Jun 2021 18:13:49 +0200
Subject: [PATCH 01/13] Settings dialog refactor.

---
 website/o3dv/featureset.js     |  2 +-
 website/o3dv/settingsdialog.js | 18 ++++++++++++------
 website/o3dv/sharingdialog.js  |  6 +++---
 website/o3dv/website.js        | 10 +++-------
 4 files changed, 19 insertions(+), 17 deletions(-)

diff --git a/website/o3dv/featureset.js b/website/o3dv/featureset.js
index e06b5ce..ebb8ba8 100644
--- a/website/o3dv/featureset.js
+++ b/website/o3dv/featureset.js
@@ -1,4 +1,4 @@
 OV.FeatureSet =
 {
-    SetDefaultColor : false
+    SettingsAvailable : false
 };
diff --git a/website/o3dv/settingsdialog.js b/website/o3dv/settingsdialog.js
index 70d4c91..9af2775 100644
--- a/website/o3dv/settingsdialog.js
+++ b/website/o3dv/settingsdialog.js
@@ -1,5 +1,16 @@
 OV.ShowSettingsDialog = function (importSettings, onOk)
 {
+    function AddColorRow (contentDiv, defaultColor, paramName, paramDesc)
+    {
+        let colorRow = $('<div>').addClass ('ov_dialog_table_row').appendTo (contentDiv);
+        $('<div>').html (paramName).addClass ('ov_dialog_table_row_name').appendTo (colorRow);
+        let valueColumn = $('<div>').addClass ('ov_dialog_table_row_value').appendTo (colorRow);
+        let colorInput = $('<input>').attr ('type', 'color').addClass ('ov_dialog_color').appendTo (valueColumn);
+        $('<span>').addClass ('ov_dialog_table_row_comment').html (paramDesc).appendTo (valueColumn);
+        colorInput.val ('#' + OV.ColorToHexString (defaultColor));
+        return colorInput;
+    }
+
     let dialogSettings = {
         defaultColor : importSettings.defaultColor
     };
@@ -21,12 +32,7 @@ OV.ShowSettingsDialog = function (importSettings, onOk)
         }
     ]);
     
-    let colorRow = $('<div>').addClass ('ov_dialog_table_row').appendTo (contentDiv);
-    $('<div>').html ('Default Color').addClass ('ov_dialog_table_row_name').appendTo (colorRow);
-    let valueColumn = $('<div>').addClass ('ov_dialog_table_row_value').appendTo (colorRow);
-    let colorInput = $('<input>').attr ('type', 'color').addClass ('ov_dialog_color').appendTo (valueColumn);
-    $('<span>').addClass ('ov_dialog_table_row_comment').html ('(For surfaces with no material)').appendTo (valueColumn);
-    colorInput.val ('#' + OV.ColorToHexString (dialogSettings.defaultColor));
+    let colorInput = AddColorRow (contentDiv, dialogSettings.defaultColor, 'Default Color', '(For surfaces with no material)');
     colorInput.change (function () {
         let colorStr = colorInput.val ().substr (1);
         dialogSettings.defaultColor = OV.HexStringToColor (colorStr);
diff --git a/website/o3dv/sharingdialog.js b/website/o3dv/sharingdialog.js
index ff1618f..7f0d01e 100644
--- a/website/o3dv/sharingdialog.js
+++ b/website/o3dv/sharingdialog.js
@@ -63,13 +63,13 @@ OV.ShowSharingDialog = function (importer, importSettings, camera)
         let section = $('<div>').addClass ('ov_dialog_section').appendTo (parentDiv);
         $('<div>').html ('Sharing Link').addClass ('ov_dialog_inner_title').appendTo (section);
         let optionsSection = null;
-        if (OV.FeatureSet.SetDefaultColor) {
+        if (OV.FeatureSet.SettingsAvailable) {
             optionsSection = $('<div>').addClass ('ov_dialog_section').appendTo (section);
         }
         let sharingLinkInput = AddCopyableTextInput (section, function () {
             return GetSharingLink (sharingLinkParams);
         });
-        if (OV.FeatureSet.SetDefaultColor) {
+        if (OV.FeatureSet.SettingsAvailable) {
             AddCheckboxLine (optionsSection, 'Use overridden default color', 'share_color', function (checked) {
                 sharingLinkParams.color = checked ? importSettings.defaultColor : null;
                 sharingLinkInput.val (GetSharingLink (sharingLinkParams));
@@ -91,7 +91,7 @@ OV.ShowSharingDialog = function (importer, importSettings, camera)
             embeddingCodeParams.camera = checked ? camera : null;
             embeddingCodeInput.val (GetEmbeddingCode (embeddingCodeParams));
         });
-        if (OV.FeatureSet.SetDefaultColor) {
+        if (OV.FeatureSet.SettingsAvailable) {
             AddCheckboxLine (optionsSection, 'Use overridden default color', 'embed_color', function (checked) {
                 embeddingCodeParams.color = checked ? importSettings.defaultColor : null;
                 embeddingCodeInput.val (GetEmbeddingCode (embeddingCodeParams));
diff --git a/website/o3dv/website.js b/website/o3dv/website.js
index 8f6f126..0ee88cf 100644
--- a/website/o3dv/website.js
+++ b/website/o3dv/website.js
@@ -21,7 +21,6 @@ OV.Website = class
 
     Load ()
     {
-
         let canvas = $('<canvas>').appendTo (this.parameters.viewerDiv);
         this.viewer.Init (canvas.get (0));
         this.ShowViewer (false);
@@ -316,15 +315,12 @@ OV.Website = class
         AddButton (this.toolbar, 'share', 'Share model', true, function () {
             obj.dialog = OV.ShowSharingDialog (importer, obj.importSettings, obj.viewer.GetCamera ());
         });
-        if (OV.FeatureSet.SetDefaultColor) {
+        if (OV.FeatureSet.SettingsAvailable) {
             AddSeparator (this.toolbar, true);
             AddButton (this.toolbar, 'settings', 'Settings', true, function () {
                 obj.dialog = OV.ShowSettingsDialog (obj.importSettings, function (dialogSettings) {
-                    let reload = false;
-                    if (!OV.ColorIsEqual (obj.importSettings.defaultColor, dialogSettings.defaultColor)) {
-                        obj.importSettings.defaultColor = dialogSettings.defaultColor;
-                        reload = true;
-                    }
+                    let reload = !OV.ColorIsEqual (obj.importSettings.defaultColor, dialogSettings.defaultColor);
+                    obj.importSettings.defaultColor = dialogSettings.defaultColor;
                     if (reload) {
                         obj.ReloadFiles ();
                     }

From 5a027f193f3bfa282cc3ad93301dac8c529ffd95 Mon Sep 17 00:00:00 2001
From: kovacsv <viktorkovacs@gmail.com>
Date: Thu, 24 Jun 2021 18:20:33 +0200
Subject: [PATCH 02/13] Return the created viewer elements so later
 modifications are possible.

---
 source/viewer/domviewer.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/source/viewer/domviewer.js b/source/viewer/domviewer.js
index 1b16603..326ad40 100644
--- a/source/viewer/domviewer.js
+++ b/source/viewer/domviewer.js
@@ -99,4 +99,6 @@ OV.Init3DViewerElements = function ()
             viewerElement.viewer.Resize (width, height);    
         }
     });
+
+    return viewerElements;
 };

From f4b8ca18c6dc055b204edd5d4b8ae988161277ed Mon Sep 17 00:00:00 2001
From: kovacsv <viktorkovacs@gmail.com>
Date: Thu, 24 Jun 2021 18:24:12 +0200
Subject: [PATCH 03/13] Callback instead of return value because of async
 loading.

---
 sandbox/embed_selfhost_multiple.html | 4 +++-
 source/viewer/domviewer.js           | 7 ++++---
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/sandbox/embed_selfhost_multiple.html b/sandbox/embed_selfhost_multiple.html
index 2e7f2a9..3d15889 100644
--- a/sandbox/embed_selfhost_multiple.html
+++ b/sandbox/embed_selfhost_multiple.html
@@ -69,7 +69,9 @@
 	<!-- importer end -->
 
     <script type='text/javascript'>
-        OV.Init3DViewerElements ();
+        OV.Init3DViewerElements (function (viewers) {
+			viewers[0].viewer.renderer.setClearColor ('#222222', 1.0);
+		});
     </script>
 
     <style>
diff --git a/source/viewer/domviewer.js b/source/viewer/domviewer.js
index 326ad40..fc34670 100644
--- a/source/viewer/domviewer.js
+++ b/source/viewer/domviewer.js
@@ -1,4 +1,4 @@
-OV.Init3DViewerElements = function ()
+OV.Init3DViewerElements = function (onReady)
 {
     function LoadElement (element)
     {
@@ -89,6 +89,9 @@ OV.Init3DViewerElements = function ()
             let viewerElement = LoadElement (element);
             viewerElements.push (viewerElement);
         }
+        if (onReady !== undefined && onReady !== null) {
+            onReady (viewerElements);
+        }
     }); 
 
     window.addEventListener ('resize', function () {
@@ -99,6 +102,4 @@ OV.Init3DViewerElements = function ()
             viewerElement.viewer.Resize (width, height);    
         }
     });
-
-    return viewerElements;
 };

From 14d11a0c41853d24cc1e22387192a2a44c74acf1 Mon Sep 17 00:00:00 2001
From: kovacsv <viktorkovacs@gmail.com>
Date: Thu, 24 Jun 2021 19:36:15 +0200
Subject: [PATCH 04/13] Set background color when using the viewer on your
 website #92

---
 sandbox/embed_selfhost_multiple.html |  3 ++-
 source/viewer/domviewer.js           | 14 +++++++++++---
 source/viewer/viewer.js              |  7 +++++++
 3 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/sandbox/embed_selfhost_multiple.html b/sandbox/embed_selfhost_multiple.html
index 3d15889..9404f07 100644
--- a/sandbox/embed_selfhost_multiple.html
+++ b/sandbox/embed_selfhost_multiple.html
@@ -110,7 +110,8 @@
     <div class="online_3d_viewer"
 		style="width: 360px; height: 240px;"
         model="../../test/testfiles/obj/hundred_cubes.obj"
-        color="200,0,0">
+        color="200,0,0"
+		background="200,200,200">
     </div>
     <div class="online_3d_viewer"
 		style="width: 360px; height: 240px;"
diff --git a/source/viewer/domviewer.js b/source/viewer/domviewer.js
index fc34670..7f5554a 100644
--- a/source/viewer/domviewer.js
+++ b/source/viewer/domviewer.js
@@ -55,6 +55,14 @@ OV.Init3DViewerElements = function (onReady)
             },
         });
 
+        let backgroundParam = element.getAttribute ('background');
+        if (backgroundParam) {
+            let color = OV.ParameterConverter.StringToColor (backgroundParam);
+            if (color !== null) {
+                viewer.SetBackgroundColor (color);
+            }
+        }
+
         let modelParams = element.getAttribute ('model');
         if (!modelParams) {
             return;
@@ -66,9 +74,9 @@ OV.Init3DViewerElements = function (onReady)
         }
 
         let settings = new OV.ImportSettings ();
-        let colorParams = element.getAttribute ('color');
-        if (colorParams) {
-            let color = OV.ParameterConverter.StringToColor (colorParams);
+        let colorParam = element.getAttribute ('color');
+        if (colorParam) {
+            let color = OV.ParameterConverter.StringToColor (colorParam);
             if (color !== null) {
                 settings.defaultColor = color;
             }
diff --git a/source/viewer/viewer.js b/source/viewer/viewer.js
index c22d481..08effcf 100644
--- a/source/viewer/viewer.js
+++ b/source/viewer/viewer.js
@@ -180,6 +180,13 @@ OV.Viewer = class
         this.navigation.SetClickHandler (onClick);
     }
 
+    SetBackgroundColor (color)
+    {
+        let hexColor = '#' + OV.ColorToHexString (color);
+        this.renderer.setClearColor (hexColor, 1.0);
+        this.Render ();
+    }
+
     GetCamera ()
     {
         return this.navigation.GetCamera ();

From f5960b141f3b580c3f3465e723f86f8372efd47d Mon Sep 17 00:00:00 2001
From: kovacsv <viktorkovacs@gmail.com>
Date: Thu, 24 Jun 2021 19:45:39 +0200
Subject: [PATCH 05/13] Store default color as cookie.

---
 website/o3dv/website.js | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/website/o3dv/website.js b/website/o3dv/website.js
index 0ee88cf..3230e18 100644
--- a/website/o3dv/website.js
+++ b/website/o3dv/website.js
@@ -26,6 +26,7 @@ OV.Website = class
         this.ShowViewer (false);
         this.hashHandler.SetEventListener (this.OnHashChange.bind (this));
 
+        this.InitSettings ();
         this.InitToolbar ();
         this.InitDragAndDrop ();
         this.InitModelLoader ();
@@ -222,6 +223,14 @@ OV.Website = class
         }
     }
 
+    InitSettings ()
+    {
+        let defaultColorStr = this.cookieHandler.GetStringVal ('ov_default_color', null);
+        if (defaultColorStr !== null) {
+            this.importSettings.defaultColor = OV.ParameterConverter.StringToColor (defaultColorStr);
+        }
+    }
+
     InitToolbar ()
     {
         function AddButton (toolbar, imageName, imageTitle, onlyFullWidth, onClick)
@@ -321,6 +330,7 @@ OV.Website = class
                 obj.dialog = OV.ShowSettingsDialog (obj.importSettings, function (dialogSettings) {
                     let reload = !OV.ColorIsEqual (obj.importSettings.defaultColor, dialogSettings.defaultColor);
                     obj.importSettings.defaultColor = dialogSettings.defaultColor;
+                    obj.cookieHandler.SetStringVal ('ov_default_color', OV.ParameterConverter.ColorToString (obj.importSettings.defaultColor));
                     if (reload) {
                         obj.ReloadFiles ();
                     }

From 9942b9429d724422990bb72c40a1853791e5113e Mon Sep 17 00:00:00 2001
From: kovacsv <viktorkovacs@gmail.com>
Date: Thu, 24 Jun 2021 20:02:56 +0200
Subject: [PATCH 06/13] Color cookie handling.

---
 website/o3dv/cookies.js | 42 +++++++++++++++++++++++++++--------------
 website/o3dv/website.js |  7 ++-----
 2 files changed, 30 insertions(+), 19 deletions(-)

diff --git a/website/o3dv/cookies.js b/website/o3dv/cookies.js
index ee8dc3a..3acdcb4 100644
--- a/website/o3dv/cookies.js
+++ b/website/o3dv/cookies.js
@@ -10,20 +10,6 @@ OV.CookieHandler = class
         this.SetStringVal (key, '');
     }
 
-    GetBoolVal (key, defVal)
-    {
-        let stringVal = this.GetStringVal (key);
-        if (stringVal === null) {
-            return defVal;
-        }
-        return stringVal === 'true' ? true : false;
-    }
-
-    SetBoolVal (key, value)
-    {
-        this.SetStringVal (key, value ? 'true' : false);
-    }
-
     SetStringVal (key, value)
     {
 		let date = new Date ();
@@ -43,4 +29,32 @@ OV.CookieHandler = class
         }
         return null;
     }
+
+    GetBoolVal (key, defVal)
+    {
+        let stringVal = this.GetStringVal (key);
+        if (stringVal === null) {
+            return defVal;
+        }
+        return stringVal === 'true' ? true : false;
+    }
+
+    SetBoolVal (key, value)
+    {
+        this.SetStringVal (key, value ? 'true' : 'false');
+    }
+
+    GetColorVal (key, defVal)
+    {
+        let stringVal = this.GetStringVal (key);
+        if (stringVal === null) {
+            return defVal;
+        }
+        return OV.ParameterConverter.StringToColor (stringVal);
+    }
+
+    SetColorVal (key, value)
+    {
+        this.SetStringVal (key, OV.ParameterConverter.ColorToString (value));
+    }    
 };
diff --git a/website/o3dv/website.js b/website/o3dv/website.js
index 3230e18..8b9062b 100644
--- a/website/o3dv/website.js
+++ b/website/o3dv/website.js
@@ -225,10 +225,7 @@ OV.Website = class
 
     InitSettings ()
     {
-        let defaultColorStr = this.cookieHandler.GetStringVal ('ov_default_color', null);
-        if (defaultColorStr !== null) {
-            this.importSettings.defaultColor = OV.ParameterConverter.StringToColor (defaultColorStr);
-        }
+        this.importSettings.defaultColor = this.cookieHandler.GetColorVal ('ov_default_color', new OV.Color (200, 200, 200));
     }
 
     InitToolbar ()
@@ -330,7 +327,7 @@ OV.Website = class
                 obj.dialog = OV.ShowSettingsDialog (obj.importSettings, function (dialogSettings) {
                     let reload = !OV.ColorIsEqual (obj.importSettings.defaultColor, dialogSettings.defaultColor);
                     obj.importSettings.defaultColor = dialogSettings.defaultColor;
-                    obj.cookieHandler.SetStringVal ('ov_default_color', OV.ParameterConverter.ColorToString (obj.importSettings.defaultColor));
+                    obj.cookieHandler.SetColorVal ('ov_default_color', obj.importSettings.defaultColor);
                     if (reload) {
                         obj.ReloadFiles ();
                     }

From 27c1fc41210429465d664668ebcbbdab307f1184 Mon Sep 17 00:00:00 2001
From: kovacsv <viktorkovacs@gmail.com>
Date: Fri, 25 Jun 2021 06:55:22 +0200
Subject: [PATCH 07/13] Add GitHub actions build.

---
 .github/workflows/build.yml | 26 ++++++++++++++++++++++++++
 1 file changed, 26 insertions(+)
 create mode 100644 .github/workflows/build.yml

diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
new file mode 100644
index 0000000..e4b0d8c
--- /dev/null
+++ b/.github/workflows/build.yml
@@ -0,0 +1,26 @@
+name: Build
+
+on:
+  push:
+    branches: [ master, dev ]
+  pull_request:
+    branches: [ master, dev ]
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [12.x, 14.x, 16.x]
+
+    steps:
+    - uses: actions/checkout@v2
+    - name: Use node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v2
+      with:
+        node-version: ${{ matrix.node-version }}
+    - run: npm install
+    - run: npm run build
+    - run: npm run test

From 3fcc4584615041c0f72d289b7371964656183abf Mon Sep 17 00:00:00 2001
From: kovacsv <viktorkovacs@gmail.com>
Date: Fri, 25 Jun 2021 06:58:56 +0200
Subject: [PATCH 08/13] Add multiple platforms.

---
 .github/workflows/build.yml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
index e4b0d8c..2e26e29 100644
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@@ -9,7 +9,7 @@ on:
 jobs:
   build:
 
-    runs-on: ubuntu-latest
+    runs-on: [ windows-latest, macos-latest, ubuntu-latest ]
 
     strategy:
       matrix:
@@ -17,7 +17,7 @@ jobs:
 
     steps:
     - uses: actions/checkout@v2
-    - name: Use node.js ${{ matrix.node-version }}
+    - name: Setup node.js ${{ matrix.node-version }}
       uses: actions/setup-node@v2
       with:
         node-version: ${{ matrix.node-version }}

From ea90f171549b9838d598cdf1f74568cd3b966f28 Mon Sep 17 00:00:00 2001
From: kovacsv <viktorkovacs@gmail.com>
Date: Fri, 25 Jun 2021 07:00:57 +0200
Subject: [PATCH 09/13] Fix multiple platforms.

---
 .github/workflows/build.yml | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
index 2e26e29..2132d6f 100644
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@@ -9,11 +9,12 @@ on:
 jobs:
   build:
 
-    runs-on: [ windows-latest, macos-latest, ubuntu-latest ]
+    runs-on: ${{ matrix.os-type }}
 
     strategy:
       matrix:
         node-version: [12.x, 14.x, 16.x]
+        os-type: [windows-latest, macos-latest, ubuntu-latest]
 
     steps:
     - uses: actions/checkout@v2

From a43c7ed1662f8c1a9de571c52d9fa47a17a927a7 Mon Sep 17 00:00:00 2001
From: Viktor Kovacs <viktorkovacs@gmail.com>
Date: Fri, 25 Jun 2021 07:07:32 +0200
Subject: [PATCH 10/13] Update README.md

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 2896a46..279619b 100644
--- a/README.md
+++ b/README.md
@@ -3,7 +3,7 @@
 Online 3D Viewer (https://3dviewer.net) is a free and open source web solution to visualize and explore 3D models right in your browser. This repository contains the source code of the website and the library behind it.
 
 [![Build status](https://ci.appveyor.com/api/projects/status/exypq43a8kjby5n0?svg=true)](https://ci.appveyor.com/project/kovacsv/online3dviewer)
-[![Build Status](https://travis-ci.com/kovacsv/Online3DViewer.svg?branch=master)](https://travis-ci.com/kovacsv/Online3DViewer)
+[![Build status](https://github.com/kovacsv/Online3DViewer/actions/workflows/build.yml/badge.svg)](https://github.com/kovacsv/Online3DViewer/actions/workflows/build.yml)
 [![Language grade: JavaScript](https://img.shields.io/lgtm/grade/javascript/g/kovacsv/Online3DViewer.svg?logo=lgtm&logoWidth=18)](https://lgtm.com/projects/g/kovacsv/Online3DViewer/context:javascript)
 
 ![Start Page](website/assets/images/3dviewer_net_start_page.png?raw=true)

From 2b38556effa0edb7c8d9baa426ccef2b737abac1 Mon Sep 17 00:00:00 2001
From: kovacsv <viktorkovacs@gmail.com>
Date: Fri, 25 Jun 2021 08:41:34 +0200
Subject: [PATCH 11/13] Change canvas background color #85

---
 sandbox/embed_iframe.html          |  2 +-
 source/parameters/parameterlist.js | 14 +++++++++++-
 source/viewer/viewer.js            |  8 +++++++
 test/tests/parameterlist_test.js   | 12 ++++++++++-
 website/o3dv/embed.js              |  4 ++++
 website/o3dv/hashhandler.js        |  6 ++++++
 website/o3dv/settingsdialog.js     | 12 +++++++++--
 website/o3dv/sharingdialog.js      | 18 ++++++++++------
 website/o3dv/website.css           |  2 +-
 website/o3dv/website.js            | 34 ++++++++++++++++++++----------
 10 files changed, 89 insertions(+), 23 deletions(-)

diff --git a/sandbox/embed_iframe.html b/sandbox/embed_iframe.html
index 25ed1d8..81b8c6d 100644
--- a/sandbox/embed_iframe.html
+++ b/sandbox/embed_iframe.html
@@ -34,7 +34,7 @@
         style="border:1px solid #eeeeee;">
     </iframe>
     <iframe
-        src="../../website/embed.html#model=../test/testfiles/obj/hundred_cubes.obj$color=200,0,0"
+        src="../../website/embed.html#model=../test/testfiles/obj/hundred_cubes.obj$background=200,200,200$color=200,0,0"
         width=360 height=240
         style="border:1px solid #eeeeee;">
     </iframe>
diff --git a/source/parameters/parameterlist.js b/source/parameters/parameterlist.js
index 6f4695d..7c1d3f8 100644
--- a/source/parameters/parameterlist.js
+++ b/source/parameters/parameterlist.js
@@ -118,11 +118,17 @@ OV.ParameterListBuilder = class
         return this;
     }
 
+    AddBackground (background)
+    {
+        this.AddUrlPart ('background', OV.ParameterConverter.ColorToString (background));
+        return this;
+    }
+
     AddColor (color)
     {
         this.AddUrlPart ('color', OV.ParameterConverter.ColorToString (color));
         return this;
-    }    
+    }
 
     AddUrlPart (keyword, urlPart)
     {
@@ -166,6 +172,12 @@ OV.ParameterListParser = class
         return OV.ParameterConverter.StringToCamera (keywordParams);
     }
 
+    GetBackground ()
+    {
+        let backgroundParams = this.GetKeywordParams ('background');
+        return OV.ParameterConverter.StringToColor (backgroundParams);
+    }
+
     GetColor ()
     {
         let colorParams = this.GetKeywordParams ('color');
diff --git a/source/viewer/viewer.js b/source/viewer/viewer.js
index 08effcf..811246f 100644
--- a/source/viewer/viewer.js
+++ b/source/viewer/viewer.js
@@ -132,6 +132,14 @@ OV.ViewerGeometry = class
     }    
 };
 
+OV.ViewerSettings = class
+{
+    constructor ()
+    {
+        this.backgroundColor = new OV.Color (255, 255, 255);
+    }
+};
+
 OV.Viewer = class
 {
     constructor ()
diff --git a/test/tests/parameterlist_test.js b/test/tests/parameterlist_test.js
index 9515eac..7b3131f 100644
--- a/test/tests/parameterlist_test.js
+++ b/test/tests/parameterlist_test.js
@@ -8,15 +8,18 @@ describe ('Parameter List', function () {
             new OV.Coord3D (0.0, 0.0, 0.0),
             new OV.Coord3D (0.0, 0.0, 1.0)
         );
+        let background = new OV.Color (4, 5, 6);
         let color = new OV.Color (1, 2, 3);
         let urlParams1 = OV.CreateUrlBuilder ().AddModelUrls (modelUrls).GetParameterList ();
         let urlParams2 = OV.CreateUrlBuilder ().AddCamera (camera).GetParameterList ();
         let urlParams3 = OV.CreateUrlBuilder ().AddModelUrls (modelUrls).AddCamera (camera).GetParameterList ();
         let urlParams4 = OV.CreateUrlBuilder ().AddModelUrls (modelUrls).AddCamera (camera).AddColor (color).GetParameterList ();
+        let urlParams5 = OV.CreateUrlBuilder ().AddModelUrls (modelUrls).AddCamera (camera).AddBackground (background).AddColor (color).GetParameterList ();
         assert.strictEqual (urlParams1, 'model=a.txt,b.txt');
         assert.strictEqual (urlParams2, 'camera=1.0000,1.0000,1.0000,0.0000,0.0000,0.0000,0.0000,0.0000,1.0000');
         assert.strictEqual (urlParams3, 'model=a.txt,b.txt$camera=1.0000,1.0000,1.0000,0.0000,0.0000,0.0000,0.0000,0.0000,1.0000');
         assert.strictEqual (urlParams4, 'model=a.txt,b.txt$camera=1.0000,1.0000,1.0000,0.0000,0.0000,0.0000,0.0000,0.0000,1.0000$color=1,2,3');
+        assert.strictEqual (urlParams5, 'model=a.txt,b.txt$camera=1.0000,1.0000,1.0000,0.0000,0.0000,0.0000,0.0000,0.0000,1.0000$background=4,5,6$color=1,2,3');
     });
 
     it ('Parameter list parser', function () {
@@ -26,12 +29,14 @@ describe ('Parameter List', function () {
             new OV.Coord3D (0.0, 0.0, 0.0),
             new OV.Coord3D (0.0, 0.0, 1.0)
         );
-        let color = new OV.Color (1, 2, 3);     
+        let background = new OV.Color (4, 5, 6);
+        let color = new OV.Color (1, 2, 3);
         let urlParamsLegacy = 'a.txt,b.txt';
         let urlParams1 = 'model=a.txt,b.txt';
         let urlParams2 = 'camera=1.0000,1.0000,1.0000,0.0000,0.0000,0.0000,0.0000,0.0000,1.0000';
         let urlParams3 = 'model=a.txt,b.txt$camera=1.0000,1.0000,1.0000,0.0000,0.0000,0.0000,0.0000,0.0000,1.0000';
         let urlParams4 = 'model=a.txt,b.txt$camera=1.0000,1.0000,1.0000,0.0000,0.0000,0.0000,0.0000,0.0000,1.0000$color=1,2,3';
+        let urlParams5 = 'model=a.txt,b.txt$camera=1.0000,1.0000,1.0000,0.0000,0.0000,0.0000,0.0000,0.0000,1.0000$background=4,5,6$color=1,2,3';
         let parserLegacy = OV.CreateUrlParser (urlParamsLegacy);
         assert.deepStrictEqual (parserLegacy.GetModelUrls (), modelUrls);
         assert.deepStrictEqual (parserLegacy.GetCamera (), null);
@@ -51,5 +56,10 @@ describe ('Parameter List', function () {
         assert.deepStrictEqual (parser4.GetModelUrls (), modelUrls);
         assert.deepStrictEqual (parser4.GetCamera (), camera);
         assert.deepStrictEqual (parser4.GetColor (), color);
+        let parser5 = OV.CreateUrlParser (urlParams5);
+        assert.deepStrictEqual (parser5.GetModelUrls (), modelUrls);
+        assert.deepStrictEqual (parser5.GetCamera (), camera);
+        assert.deepStrictEqual (parser5.GetColor (), color);
+        assert.deepStrictEqual (parser5.GetBackground (), background);
     });
 });
diff --git a/website/o3dv/embed.js b/website/o3dv/embed.js
index 474a7bc..995c2ba 100644
--- a/website/o3dv/embed.js
+++ b/website/o3dv/embed.js
@@ -20,6 +20,10 @@ OV.Embed = class
             if (urls === null) {
                 return;
             }
+            let background = this.hashHandler.GetBackgroundFromHash ();
+            if (background !== null) {
+                this.viewer.SetBackgroundColor (background);
+            }
             let settings = new OV.ImportSettings ();
             let color = this.hashHandler.GetColorFromHash ();
             if (color !== null) {
diff --git a/website/o3dv/hashhandler.js b/website/o3dv/hashhandler.js
index 44f5965..5587b36 100644
--- a/website/o3dv/hashhandler.js
+++ b/website/o3dv/hashhandler.js
@@ -46,6 +46,12 @@ OV.HashHandler = class
         return parser.GetCamera ();
     }
 
+    GetBackgroundFromHash ()
+    {
+        let parser = OV.CreateUrlParser (this.GetHash ());
+        return parser.GetBackground ();
+    }
+
     GetColorFromHash ()
     {
         let parser = OV.CreateUrlParser (this.GetHash ());
diff --git a/website/o3dv/settingsdialog.js b/website/o3dv/settingsdialog.js
index 9af2775..e5e6e00 100644
--- a/website/o3dv/settingsdialog.js
+++ b/website/o3dv/settingsdialog.js
@@ -1,4 +1,4 @@
-OV.ShowSettingsDialog = function (importSettings, onOk)
+OV.ShowSettingsDialog = function (viewerSettings, importSettings, onOk)
 {
     function AddColorRow (contentDiv, defaultColor, paramName, paramDesc)
     {
@@ -12,6 +12,7 @@ OV.ShowSettingsDialog = function (importSettings, onOk)
     }
 
     let dialogSettings = {
+        backgroundColor: viewerSettings.backgroundColor,
         defaultColor : importSettings.defaultColor
     };
     let dialog = new OV.ButtonDialog ();
@@ -32,11 +33,18 @@ OV.ShowSettingsDialog = function (importSettings, onOk)
         }
     ]);
     
-    let colorInput = AddColorRow (contentDiv, dialogSettings.defaultColor, 'Default Color', '(For surfaces with no material)');
+    let backgroundColorInput = AddColorRow (contentDiv, dialogSettings.backgroundColor, 'Background Color', '(Visualization only)');
+    backgroundColorInput.change (function () {
+        let colorStr = backgroundColorInput.val ().substr (1);
+        dialogSettings.backgroundColor = OV.HexStringToColor (colorStr);
+    });
+
+    let colorInput = AddColorRow (contentDiv, dialogSettings.defaultColor, 'Default Color', '(When no material defined)');
     colorInput.change (function () {
         let colorStr = colorInput.val ().substr (1);
         dialogSettings.defaultColor = OV.HexStringToColor (colorStr);
     });
+
     dialog.Show ();
     return dialog;
 };
diff --git a/website/o3dv/sharingdialog.js b/website/o3dv/sharingdialog.js
index 7f0d01e..6d21a7f 100644
--- a/website/o3dv/sharingdialog.js
+++ b/website/o3dv/sharingdialog.js
@@ -1,5 +1,4 @@
-
-OV.ShowSharingDialog = function (importer, importSettings, camera)
+OV.ShowSharingDialog = function (importer, viewerSettings, importSettings, camera)
 {
     function AddCheckboxLine (parentDiv, text, id, onChange)
     {
@@ -25,6 +24,7 @@ OV.ShowSharingDialog = function (importer, importSettings, camera)
         let builder = OV.CreateUrlBuilder ();
         builder.AddModelUrls (params.files);
         builder.AddCamera (params.camera);
+        builder.AddBackground (params.background);
         builder.AddColor (params.color);
         let hashParameters = builder.GetParameterList ();
 
@@ -58,7 +58,7 @@ OV.ShowSharingDialog = function (importer, importSettings, camera)
         return input;
     }
 
-    function AddSharingLinkTab (parentDiv, sharingLinkParams)
+    function AddSharingLinkTab (parentDiv, importSettings, sharingLinkParams)
     {
         let section = $('<div>').addClass ('ov_dialog_section').appendTo (parentDiv);
         $('<div>').html ('Sharing Link').addClass ('ov_dialog_inner_title').appendTo (section);
@@ -79,7 +79,7 @@ OV.ShowSharingDialog = function (importer, importSettings, camera)
         sharingLinkInput.val (GetSharingLink (sharingLinkParams));
     }
 
-    function AddEmbeddingCodeTab (parentDiv, embeddingCodeParams)
+    function AddEmbeddingCodeTab (parentDiv, viewerSettings, importSettings, embeddingCodeParams)
     {
         let section = $('<div>').addClass ('ov_dialog_section').css ('margin-top', '20px').appendTo (parentDiv);
         $('<div>').html ('Embedding Code').addClass ('ov_dialog_inner_title').appendTo (section);
@@ -92,10 +92,15 @@ OV.ShowSharingDialog = function (importer, importSettings, camera)
             embeddingCodeInput.val (GetEmbeddingCode (embeddingCodeParams));
         });
         if (OV.FeatureSet.SettingsAvailable) {
+            AddCheckboxLine (optionsSection, 'Use overridden background color', 'embed_background', function (checked) {
+                embeddingCodeParams.background = checked ? viewerSettings.backgroundColor : null;
+                embeddingCodeInput.val (GetEmbeddingCode (embeddingCodeParams));
+            });
             AddCheckboxLine (optionsSection, 'Use overridden default color', 'embed_color', function (checked) {
                 embeddingCodeParams.color = checked ? importSettings.defaultColor : null;
                 embeddingCodeInput.val (GetEmbeddingCode (embeddingCodeParams));
             });
+            embeddingCodeParams.background = viewerSettings.backgroundColor;
             embeddingCodeParams.color = importSettings.defaultColor;
         }
         embeddingCodeInput.val (GetEmbeddingCode (embeddingCodeParams));
@@ -124,6 +129,7 @@ OV.ShowSharingDialog = function (importer, importSettings, camera)
     let embeddingCodeParams = {
         files : modelFiles,
         camera : camera,
+        background : null,
         color : null
     };
 
@@ -137,8 +143,8 @@ OV.ShowSharingDialog = function (importer, importSettings, camera)
         }
     ]);
 
-    AddSharingLinkTab (contentDiv, sharingLinkParams);
-    AddEmbeddingCodeTab (contentDiv, embeddingCodeParams);
+    AddSharingLinkTab (contentDiv, importSettings, sharingLinkParams);
+    AddEmbeddingCodeTab (contentDiv, viewerSettings, importSettings, embeddingCodeParams);
 
     dialog.Show ();
     return dialog;
diff --git a/website/o3dv/website.css b/website/o3dv/website.css
index ecb1e79..63f2005 100644
--- a/website/o3dv/website.css
+++ b/website/o3dv/website.css
@@ -562,7 +562,7 @@ div.ov_dialog div.ov_dialog_table_row
 
 div.ov_dialog div.ov_dialog_table_row_name
 {
-	width: 120px;
+	width: 140px;
 	float: left;
 }
 
diff --git a/website/o3dv/website.js b/website/o3dv/website.js
index 8b9062b..1e635b9 100644
--- a/website/o3dv/website.js
+++ b/website/o3dv/website.js
@@ -9,6 +9,7 @@ OV.Website = class
         this.toolbar = new OV.Toolbar (this.parameters.toolbarDiv);
         this.sidebar = new OV.Sidebar (this.parameters.sidebarDiv);
         this.navigator = new OV.Navigator (this.parameters.navigatorDiv, this.sidebar);
+        this.viewerSettings = new OV.ViewerSettings ();
         this.importSettings = new OV.ImportSettings ();
         this.modelLoader = new OV.ThreeModelLoader ();
         this.highlightMaterial = new THREE.MeshPhongMaterial ({
@@ -21,12 +22,8 @@ OV.Website = class
 
     Load ()
     {
-        let canvas = $('<canvas>').appendTo (this.parameters.viewerDiv);
-        this.viewer.Init (canvas.get (0));
-        this.ShowViewer (false);
-        this.hashHandler.SetEventListener (this.OnHashChange.bind (this));
-
         this.InitSettings ();
+        this.InitViewer ();
         this.InitToolbar ();
         this.InitDragAndDrop ();
         this.InitModelLoader ();
@@ -37,6 +34,7 @@ OV.Website = class
         this.viewer.SetClickHandler (this.OnModelClicked.bind (this));
         this.Resize ();
 
+        this.hashHandler.SetEventListener (this.OnHashChange.bind (this));
         this.OnHashChange ();
 
         let obj = this;
@@ -210,13 +208,13 @@ OV.Website = class
             if (urls === null) {
                 return;
             }
-            let settings = new OV.ImportSettings ();
-            settings.defaultColor = this.importSettings.defaultColor;
+            let importSettings = new OV.ImportSettings ();
+            importSettings.defaultColor = this.importSettings.defaultColor;
             let color = this.hashHandler.GetColorFromHash ();
             if (color !== null) {
-                settings.defaultColor = color;
+                importSettings.defaultColor = color;
             }
-            this.LoadModelFromUrlList (urls, settings);
+            this.LoadModelFromUrlList (urls, importSettings);
         } else {
             this.ClearModel ();
             this.parameters.introDiv.show ();
@@ -225,9 +223,18 @@ OV.Website = class
 
     InitSettings ()
     {
+        this.viewerSettings.backgroundColor = this.cookieHandler.GetColorVal ('ov_background_color', new OV.Color (255, 255, 255));
         this.importSettings.defaultColor = this.cookieHandler.GetColorVal ('ov_default_color', new OV.Color (200, 200, 200));
     }
 
+    InitViewer ()
+    {
+        let canvas = $('<canvas>').appendTo (this.parameters.viewerDiv);
+        this.viewer.Init (canvas.get (0));
+        this.viewer.SetBackgroundColor (this.viewerSettings.backgroundColor);
+        this.ShowViewer (false);
+    }
+
     InitToolbar ()
     {
         function AddButton (toolbar, imageName, imageTitle, onlyFullWidth, onClick)
@@ -319,15 +326,20 @@ OV.Website = class
             exportDialog.Show (obj.model, obj.viewer);
         });
         AddButton (this.toolbar, 'share', 'Share model', true, function () {
-            obj.dialog = OV.ShowSharingDialog (importer, obj.importSettings, obj.viewer.GetCamera ());
+            obj.dialog = OV.ShowSharingDialog (importer, obj.viewerSettings, obj.importSettings, obj.viewer.GetCamera ());
         });
         if (OV.FeatureSet.SettingsAvailable) {
             AddSeparator (this.toolbar, true);
             AddButton (this.toolbar, 'settings', 'Settings', true, function () {
-                obj.dialog = OV.ShowSettingsDialog (obj.importSettings, function (dialogSettings) {
+                obj.dialog = OV.ShowSettingsDialog (obj.viewerSettings, obj.importSettings, function (dialogSettings) {
+                    obj.viewerSettings.backgroundColor = dialogSettings.backgroundColor;
+                    obj.viewer.SetBackgroundColor (obj.viewerSettings.backgroundColor);
+                    obj.cookieHandler.SetColorVal ('ov_background_color', obj.viewerSettings.backgroundColor);
+
                     let reload = !OV.ColorIsEqual (obj.importSettings.defaultColor, dialogSettings.defaultColor);
                     obj.importSettings.defaultColor = dialogSettings.defaultColor;
                     obj.cookieHandler.SetColorVal ('ov_default_color', obj.importSettings.defaultColor);
+
                     if (reload) {
                         obj.ReloadFiles ();
                     }

From 4c499ca4bac5c11b687f4005c023528f5f1dc5ef Mon Sep 17 00:00:00 2001
From: kovacsv <viktorkovacs@gmail.com>
Date: Fri, 25 Jun 2021 19:00:11 +0200
Subject: [PATCH 12/13] Remove travis config file.

---
 .travis.yml | 15 ---------------
 1 file changed, 15 deletions(-)
 delete mode 100644 .travis.yml

diff --git a/.travis.yml b/.travis.yml
deleted file mode 100644
index f191a77..0000000
--- a/.travis.yml
+++ /dev/null
@@ -1,15 +0,0 @@
-language: node_js
-
-os:
-  - osx
-  - linux
-
-node_js:
-  - "15"
-
-install:
-  - npm install
-
-script:
-  - npm run build
-  - npm run test

From 93f85738cbaa9ec9ad6c7aaeb477a960597b0b36 Mon Sep 17 00:00:00 2001
From: kovacsv <viktorkovacs@gmail.com>
Date: Sat, 26 Jun 2021 23:53:08 +0200
Subject: [PATCH 13/13] Organize properties in groups.

---
 source/external/rhinoimporter.js | 10 +++++---
 source/import/importergltf.js    |  6 ++++-
 source/model/element.js          | 16 ++++++-------
 source/model/property.js         | 24 +++++++++++++++++++
 test/tests/model_test.js         | 14 -----------
 test/tests/property_test.js      | 40 ++++++++++++++++++++++++++++++++
 website/o3dv/sidebar.js          | 25 ++++++++++++++++----
 website/o3dv/website.css         | 10 ++++++++
 8 files changed, 115 insertions(+), 30 deletions(-)
 create mode 100644 test/tests/property_test.js

diff --git a/source/external/rhinoimporter.js b/source/external/rhinoimporter.js
index 0fd5c56..12abaea 100644
--- a/source/external/rhinoimporter.js
+++ b/source/external/rhinoimporter.js
@@ -181,9 +181,13 @@ OV.Importer3dm = class extends OV.ImporterBase
 		mesh.SetName (rhinoAttributes.name);
 
 		let userStrings = rhinoAttributes.getUserStrings ();
-		for (let i = 0; i < userStrings.length; i++) {
-			let userString = userStrings[i];
-			mesh.AddProperty (new OV.Property (OV.PropertyType.Text, userString[0], userString[1]));
+		if (userStrings.length > 0) {
+			let propertyGroup = new OV.PropertyGroup ('User texts');
+			for (let i = 0; i < userStrings.length; i++) {
+				let userString = userStrings[i];
+				propertyGroup.AddProperty (new OV.Property (OV.PropertyType.Text, userString[0], userString[1]));
+			}
+			mesh.AddPropertyGroup (propertyGroup);
 		}
 
 		let materialIndex = this.GetMaterialIndex (rhinoDoc, rhinoObject, rhinoInstanceReferences);
diff --git a/source/import/importergltf.js b/source/import/importergltf.js
index 2f49956..c604715 100644
--- a/source/import/importergltf.js
+++ b/source/import/importergltf.js
@@ -508,14 +508,18 @@ OV.ImporterGltf = class extends OV.ImporterBase
 
     ImportModelProperties (gltf)
     {
+        let propertyGroup = new OV.PropertyGroup ('Asset properties');
         for (let propertyName in gltf.asset) {
             if (gltf.asset.hasOwnProperty (propertyName)) {
                 if (typeof gltf.asset[propertyName] === 'string') {
                     const property = new OV.Property (OV.PropertyType.Text, propertyName, gltf.asset[propertyName]);
-                    this.model.AddProperty (property);
+                    propertyGroup.AddProperty (property);
                 }
             }
         }
+        if (propertyGroup.PropertyCount () > 0) {
+            this.model.AddPropertyGroup (propertyGroup);
+        }
     }
 
     GetDefaultScene (gltf)
diff --git a/source/model/element.js b/source/model/element.js
index 639769f..a4ea19b 100644
--- a/source/model/element.js
+++ b/source/model/element.js
@@ -3,7 +3,7 @@ OV.Element = class
     constructor ()
     {
         this.name = '';
-        this.properties = [];
+        this.propertyGroups = [];
     }
 
     GetName ()
@@ -36,20 +36,20 @@ OV.Element = class
         return 0;
     }
 
-    PropertyCount ()
+    PropertyGroupCount ()
     {
-        return this.properties.length;
+        return this.propertyGroups.length;
     }
 
-    AddProperty (property)
+    AddPropertyGroup (propertyGroup)
     {
-        this.properties.push (property);
-        return this.properties.length - 1;
+        this.propertyGroups.push (propertyGroup);
+        return this.propertyGroups.length - 1;
     }
 
-    GetProperty (index)
+    GetPropertyGroup (index)
     {
-        return this.properties[index];
+        return this.propertyGroups[index];
     }
 
     EnumerateVertices (onVertex)
diff --git a/source/model/property.js b/source/model/property.js
index f99d72e..7b42be3 100644
--- a/source/model/property.js
+++ b/source/model/property.js
@@ -16,3 +16,27 @@ OV.Property = class
         this.value = value;
     }
 };
+
+OV.PropertyGroup = class
+{
+    constructor (name)
+    {
+        this.name = name;
+        this.properties = [];
+    }
+
+    PropertyCount ()
+    {
+        return this.properties.length;
+    }
+
+    AddProperty (property)
+    {
+        this.properties.push (property);
+    }
+
+    GetProperty (index)
+    {
+        return this.properties[index];
+    }
+};
diff --git a/test/tests/model_test.js b/test/tests/model_test.js
index 1c92a18..6189302 100644
--- a/test/tests/model_test.js
+++ b/test/tests/model_test.js
@@ -184,20 +184,6 @@ describe ('Model Finalization', function() {
     });    
 });
 
-describe ('Model Properties', function() {
-    let model = new OV.Model ();
-    model.AddProperty (new OV.Property (OV.PropertyType.Text, 'name 01', 'value 01'));
-    model.AddProperty (new OV.Property (OV.PropertyType.Integer, 'name 02', 2));
-    model.AddProperty (new OV.Property (OV.PropertyType.Number, 'name 03', 3.5));
-    assert.strictEqual (model.PropertyCount (), 3);
-    assert.strictEqual (model.GetProperty (0).name, 'name 01');
-    assert.strictEqual (model.GetProperty (0).value, 'value 01');
-    assert.strictEqual (model.GetProperty (1).name, 'name 02');
-    assert.strictEqual (model.GetProperty (1).value, 2);
-    assert.strictEqual (model.GetProperty (2).name, 'name 03');
-    assert.strictEqual (model.GetProperty (2).value, 3.5);
-});
-
 describe ('Color Conversion', function() {
     it ('Color equality check', function () {
         assert (OV.ColorIsEqual (new OV.Color (10, 20, 30), new OV.Color (10, 20, 30)));
diff --git a/test/tests/property_test.js b/test/tests/property_test.js
new file mode 100644
index 0000000..301d1c3
--- /dev/null
+++ b/test/tests/property_test.js
@@ -0,0 +1,40 @@
+var assert = require ('assert');
+
+describe ('Property Test', function () {
+    it ('Property Group', function() {
+        let group = new OV.PropertyGroup ('Group');
+        group.AddProperty (new OV.Property (OV.PropertyType.Text, 'name 01', 'value 01'));
+        group.AddProperty (new OV.Property (OV.PropertyType.Integer, 'name 02', 2));
+        group.AddProperty (new OV.Property (OV.PropertyType.Number, 'name 03', 3.5));
+        assert.strictEqual (group.PropertyCount (), 3);
+        assert.strictEqual (group.GetProperty (0).name, 'name 01');
+        assert.strictEqual (group.GetProperty (0).value, 'value 01');
+        assert.strictEqual (group.GetProperty (1).name, 'name 02');
+        assert.strictEqual (group.GetProperty (1).value, 2);
+        assert.strictEqual (group.GetProperty (2).name, 'name 03');
+        assert.strictEqual (group.GetProperty (2).value, 3.5);
+    });
+
+    it ('Model Properties', function() {
+        let model = new OV.Model ();
+        let group1 = new OV.PropertyGroup ('Group 01');
+        let group2 = new OV.PropertyGroup ('Group 02');
+        let group3 = new OV.PropertyGroup ('Group 03');
+        group1.AddProperty (new OV.Property (OV.PropertyType.Text, 'name 01', 'value 01'));
+        group2.AddProperty (new OV.Property (OV.PropertyType.Integer, 'name 02', 2));
+        group3.AddProperty (new OV.Property (OV.PropertyType.Number, 'name 03', 3.5));
+        model.AddPropertyGroup (group1);
+        model.AddPropertyGroup (group2);
+        model.AddPropertyGroup (group3);
+        assert.strictEqual (model.PropertyGroupCount (), 3);
+        assert.strictEqual (model.GetPropertyGroup (0).name, 'Group 01');
+        assert.strictEqual (model.GetPropertyGroup (1).name, 'Group 02');
+        assert.strictEqual (model.GetPropertyGroup (2).name, 'Group 03');
+        assert.strictEqual (model.GetPropertyGroup (0).GetProperty (0).name, 'name 01');
+        assert.strictEqual (model.GetPropertyGroup (0).GetProperty (0).value, 'value 01');
+        assert.strictEqual (model.GetPropertyGroup (1).GetProperty (0).name, 'name 02');
+        assert.strictEqual (model.GetPropertyGroup (1).GetProperty (0).value, 2);
+        assert.strictEqual (model.GetPropertyGroup (2).GetProperty (0).name, 'name 03');
+        assert.strictEqual (model.GetPropertyGroup (2).GetProperty (0).value, 3.5);
+    });
+});
diff --git a/website/o3dv/sidebar.js b/website/o3dv/sidebar.js
index c19cd17..dd12b04 100644
--- a/website/o3dv/sidebar.js
+++ b/website/o3dv/sidebar.js
@@ -38,6 +38,12 @@ OV.Sidebar = class
         return this.visible;
     }
 
+    AddPropertyGroup (table, propertyGroup)
+    {
+        let row = $('<div>').addClass ('ov_property_table_row group').appendTo (table);
+        row.html (propertyGroup.name).attr ('title', propertyGroup.name);
+    }
+
     AddProperty (table, property)
     {
         let row = $('<div>').addClass ('ov_property_table_row').appendTo (table);
@@ -45,6 +51,13 @@ OV.Sidebar = class
         let valueColumn = $('<div>').addClass ('ov_property_table_cell ov_property_table_value').appendTo (row);
         nameColum.html (property.name + ':').attr ('title', property.name);
         this.DisplayPropertyValue (property, valueColumn);
+        return row;
+    }
+
+    AddPropertyInGroup (table, property)
+    {
+        let row = this.AddProperty (table, property);
+        row.addClass ('ingroup');
     }
 
     AddCalculatedProperty (table, name, calculateValue)
@@ -121,11 +134,15 @@ OV.Sidebar = class
             }
             return new OV.Property (OV.PropertyType.Number, null, volume);
         });
-        if (element.PropertyCount () > 0) {
+        if (element.PropertyGroupCount () > 0) {
             let customTable = $('<div>').addClass ('ov_property_table ov_property_table_custom').appendTo (this.contentDiv);
-            for (let i = 0; i < element.PropertyCount (); i++) {
-                const property = element.GetProperty (i);
-                this.AddProperty (customTable, property);
+            for (let i = 0; i < element.PropertyGroupCount (); i++) {
+                const propertyGroup = element.GetPropertyGroup (i);
+                this.AddPropertyGroup (customTable, propertyGroup);
+                for (let j = 0; j < propertyGroup.PropertyCount (); j++) {
+                    const property = propertyGroup.GetProperty (j);
+                    this.AddPropertyInGroup (customTable, property);
+                }
             }
         }
         this.Resize ();
diff --git a/website/o3dv/website.css b/website/o3dv/website.css
index 63f2005..3e94910 100644
--- a/website/o3dv/website.css
+++ b/website/o3dv/website.css
@@ -674,6 +674,16 @@ div.ov_property_table div.ov_property_table_row
 	overflow: auto;
 }
 
+div.ov_property_table div.ov_property_table_row.group
+{
+	padding: 4px 0px;
+}
+
+div.ov_property_table div.ov_property_table_row.ingroup
+{
+	margin-left: 15px;
+}
+
 div.ov_property_table div.ov_property_table_cell
 {
 	padding: 4px 0px;