Settings panel redesign.

tools/config.json

@@ -2,7 +2,7 @@
 	"lib_files" : [
 		"libs/jquery-3.5.1.min.js",
 		"libs/pickr.monolith.min-1.8.2.css",
-		"libs/pickr.min-1.8.2.js",
+		"libs/pickr.es5.min-1.8.2.js",
 		"libs/three.min-129.js"
 	],
 	"engine_files" : [

website/embed.html

@@ -14,7 +14,7 @@
 	<!-- libs start -->
 	<script type="text/javascript" src="../libs/jquery-3.5.1.min.js"></script>
 	<link rel="stylesheet" type="text/css" href="../libs/pickr.monolith.min-1.8.2.css">
-	<script type="text/javascript" src="../libs/pickr.min-1.8.2.js"></script>
+	<script type="text/javascript" src="../libs/pickr.es5.min-1.8.2.js"></script>
 	<script type="text/javascript" src="../libs/three.min-129.js"></script>
 	<!-- libs end -->
 	

website/index.html

@@ -11,7 +11,7 @@
 	<!-- libs start -->
 	<script type="text/javascript" src="../libs/jquery-3.5.1.min.js"></script>
 	<link rel="stylesheet" type="text/css" href="../libs/pickr.monolith.min-1.8.2.css">
-	<script type="text/javascript" src="../libs/pickr.min-1.8.2.js"></script>
+	<script type="text/javascript" src="../libs/pickr.es5.min-1.8.2.js"></script>
 	<script type="text/javascript" src="../libs/three.min-129.js"></script>
 	<!-- libs end -->
 	

website/o3dv/js/featureset.js

@@ -1,4 +1,4 @@
 OV.FeatureSet =
 {
-    SettingsPanel : true
+    
 };

website/o3dv/js/settingssidebarpanel.js

@@ -20,12 +20,24 @@ OV.SettingsSidebarPanel = class extends OV.SidebarPanel
 
     InitSettings (settings, defaultSettings, callbacks)
     {
-        this.backgroundColorInput = this.AddColorParameters ('Background Color', 'Changing the background color affects only the visualization.', settings.backgroundColor, callbacks.onBackgroundColorChange);
+        this.backgroundColorInput = this.AddColorParameters (
-        this.defaultColorInput = this.AddColorParameters ('Default Color', 'Default color is used when no material was defined in the file.', settings.defaultColor, callbacks.onDefaultColorChange);
+            'Background Color',
+            'Changing the background color affects only the visualization.',
+            ['#ffffff', '#e3e3e3', '#c9c9c9', '#898989', '#5f5f5f', '#494949', '#383838', '#0f0f0f'],
+            settings.backgroundColor,
+            callbacks.onBackgroundColorChange
+        );
+        this.defaultColorInput = this.AddColorParameters (
+            'Default Color',
+            'Default color is used when no material was defined in the file.',
+            ['#ffffff', '#e3e3e3', '#cc3333', '#fac832', '#4caf50', '#3393bd', '#9b27b0', '#fda4b8'],
+            settings.defaultColor,
+            callbacks.onDefaultColorChange
+        );
         this.AddResetToDefaultsButton (defaultSettings, callbacks);
     }
 
-    AddColorParameters (title, description, defaultValue, onChange)
+    AddColorParameters (title, description, predefinedColors, defaultValue, onChange)
     {
         let contentDiv = $('<div>').addClass ('ov_sidebar_settings_content').appendTo (this.contentDiv);
         let titleDiv = $('<div>').addClass ('ov_sidebar_subtitle').appendTo (contentDiv);
@@ -36,16 +48,7 @@ OV.SettingsSidebarPanel = class extends OV.SidebarPanel
             el : colorInput.get (0),
             theme : 'monolith',
             appClass : 'ov_sidebar_color',
-            swatches : [
+            swatches : predefinedColors,
-                '#225588',
-                '#225588',
-                '#225588',
-                '#225588',
-                '#225588',
-                '#225588',
-                '#225588',
-                '#225588',
-            ],
             comparison : false,
             default : '#' + OV.ColorToHexString (defaultValue),
             components : {
@@ -64,19 +67,14 @@ OV.SettingsSidebarPanel = class extends OV.SidebarPanel
                 }
             }
         });
-        let selectedColor = null;
         pickr.on ('change', (color, source, instance) => {
-            selectedColor = color;
+            let rgbaColor = color.toRGBA ();
-            let rgbaColor = selectedColor.toRGBA ();
+            let ovColor = new OV.Color (
-            let color2 = new OV.Color (rgbaColor[0], rgbaColor[1], rgbaColor[2]);
+                parseInt (rgbaColor[0], 10),
-            onChange (color2);
+                parseInt (rgbaColor[1], 10),
-    }).on ('hide', instance => {
+                parseInt (rgbaColor[2], 10)
-            if (selectedColor !== null) {
+            );
-                let rgbaColor = selectedColor.toRGBA ();
+            onChange (ovColor);
-                let color = new OV.Color (rgbaColor[0], rgbaColor[1], rgbaColor[2]);
-                onChange (color);
-            }
-            console.log ('Event: "hide"', instance);
         });
         return pickr;
     }

website/o3dv/js/sharingdialog.js

@@ -79,18 +79,14 @@ OV.ShowSharingDialog = function (importer, settings, camera)
             embeddingCodeParams.camera = checked ? camera : null;
             embeddingCodeInput.val (GetEmbeddingCode (embeddingCodeParams));
         });
-        if (OV.FeatureSet.SettingsPanel) {
+        AddCheckboxLine (optionsSection, 'Use overridden background color', 'embed_background', (checked) => {
-            AddCheckboxLine (optionsSection, 'Use overridden background color', 'embed_background', (checked) => {
+            embeddingCodeParams.background = checked ? settings.backgroundColor : null;
-                embeddingCodeParams.background = checked ? settings.backgroundColor : null;
+            embeddingCodeInput.val (GetEmbeddingCode (embeddingCodeParams));
-                embeddingCodeInput.val (GetEmbeddingCode (embeddingCodeParams));
+        });
-            });
+        AddCheckboxLine (optionsSection, 'Use overridden default color', 'embed_color', (checked) => {
-            embeddingCodeParams.background = settings.backgroundColor;
+            embeddingCodeParams.color = checked ? settings.defaultColor : null;
-            AddCheckboxLine (optionsSection, 'Use overridden default color', 'embed_color', (checked) => {
+            embeddingCodeInput.val (GetEmbeddingCode (embeddingCodeParams));
-                embeddingCodeParams.color = checked ? settings.defaultColor : null;
+        });
-                embeddingCodeInput.val (GetEmbeddingCode (embeddingCodeParams));
-            });
-            embeddingCodeParams.color = settings.defaultColor;
-        }
         embeddingCodeInput.val (GetEmbeddingCode (embeddingCodeParams));
     }
 
@@ -116,8 +112,8 @@ OV.ShowSharingDialog = function (importer, settings, camera)
     let embeddingCodeParams = {
         files : modelFiles,
         camera : camera,
-        background : null,
+        background : settings.backgroundColor,
-        color : null
+        color : settings.defaultColor
     };
 
     let dialog = new OV.ButtonDialog ();

website/o3dv/js/website.js

@@ -528,19 +528,15 @@ OV.Website = class
                 image : 'details',
                 title : 'Details panel',
                 button : null
+            },
+            {
+                panelId : null,
+                panel : settingsPanel,
+                image : 'settings',
+                title : 'Settings panel',
+                button : null
             }
         ];
-        if (OV.FeatureSet.SettingsPanel) {
-            sidebarPanels.push (
-                {
-                    panelId : null,
-                    panel : settingsPanel,
-                    image : 'settings',
-                    title : 'Settings panel',
-                    button : null
-                }
-            );
-        }
 
         for (let id = 0; id < sidebarPanels.length; id++) {
             let sidebarPanel = sidebarPanels[id];