diff --git a/tools/config.json b/tools/config.json
index 10633d2..baba080 100644
--- a/tools/config.json
+++ b/tools/config.json
@@ -70,6 +70,7 @@
"website/o3dv/js/eventhandler.js",
"website/o3dv/js/utils.js",
"website/o3dv/js/cookies.js",
+ "website/o3dv/js/settings.js",
"website/o3dv/js/toolbar.js",
"website/o3dv/js/treeview.js",
"website/o3dv/js/modal.js",
diff --git a/website/embed.html b/website/embed.html
index ddfc194..888fc30 100644
--- a/website/embed.html
+++ b/website/embed.html
@@ -92,6 +92,7 @@
+
diff --git a/website/index.html b/website/index.html
index b6aca20..c9538de 100644
--- a/website/index.html
+++ b/website/index.html
@@ -92,6 +92,7 @@
+
diff --git a/website/o3dv/js/cookies.js b/website/o3dv/js/cookies.js
index 2775bb3..f6dee51 100644
--- a/website/o3dv/js/cookies.js
+++ b/website/o3dv/js/cookies.js
@@ -42,6 +42,20 @@ OV.CookieHandler = class
SetBoolVal (key, value)
{
this.SetStringVal (key, value ? 'true' : 'false');
+ }
+
+ GetIntVal (key, defVal)
+ {
+ let stringVal = this.GetStringVal (key, null);
+ if (stringVal === null) {
+ return defVal;
+ }
+ return parseInt (stringVal, 10);
+ }
+
+ SetIntVal (key, value)
+ {
+ this.SetStringVal (key, value.toString ());
}
GetColorVal (key, defVal)
diff --git a/website/o3dv/js/settings.js b/website/o3dv/js/settings.js
new file mode 100644
index 0000000..53b3fc9
--- /dev/null
+++ b/website/o3dv/js/settings.js
@@ -0,0 +1,42 @@
+OV.Theme = {
+ Light : 1,
+ Dark : 2,
+ System : 3
+};
+
+OV.Settings = class
+{
+ constructor ()
+ {
+ this.backgroundColor = new OV.Color (255, 255, 255);
+ this.defaultColor = new OV.Color (200, 200, 200);
+ this.themeId = OV.Theme.Light;
+ }
+
+ LoadFromCookies (cookieHandler)
+ {
+ this.backgroundColor = cookieHandler.GetColorVal ('ov_background_color', new OV.Color (255, 255, 255));
+ this.defaultColor = cookieHandler.GetColorVal ('ov_default_color', new OV.Color (200, 200, 200));
+ this.themeId = cookieHandler.GetIntVal ('ov_theme_id', OV.Theme.Light);
+ }
+
+ SaveToCookies (cookieHandler)
+ {
+ cookieHandler.SetColorVal ('ov_background_color', this.backgroundColor);
+ cookieHandler.SetColorVal ('ov_default_color', this.defaultColor);
+ cookieHandler.SetStringVal ('ov_theme_id', this.themeId);
+ }
+
+ GetTheme ()
+ {
+ if (this.themeId === OV.Theme.System) {
+ if (window.matchMedia && window.matchMedia ('(prefers-color-scheme: dark)').matches) {
+ return OV.Theme.Dark;
+ } else {
+ return OV.Theme.Light;
+ }
+ } else {
+ return this.themeId;
+ }
+ }
+};
diff --git a/website/o3dv/js/settingssidebarpanel.js b/website/o3dv/js/settingssidebarpanel.js
index 953e181..007cc5d 100644
--- a/website/o3dv/js/settingssidebarpanel.js
+++ b/website/o3dv/js/settingssidebarpanel.js
@@ -40,6 +40,12 @@ OV.SettingsSidebarPanel = class extends OV.SidebarPanel
this.AddResetToDefaultsButton (defaultSettings, callbacks);
}
+ UpdateSettings (settings)
+ {
+ this.backgroundColorInput.pickr.setColor ('#' + OV.ColorToHexString (settings.backgroundColor));
+ this.defaultColorInput.pickr.setColor ('#' + OV.ColorToHexString (settings.defaultColor));
+ }
+
Update (model)
{
let hasDefaultMaterial = OV.HasDefaultMaterial (model);
diff --git a/website/o3dv/js/themehandler.js b/website/o3dv/js/themehandler.js
index 9dd2546..fb9ceb8 100644
--- a/website/o3dv/js/themehandler.js
+++ b/website/o3dv/js/themehandler.js
@@ -33,12 +33,21 @@ OV.ThemeHandler = class {
}
}
- SwitchTheme (name)
+ SwitchTheme (themeId)
{
+ let themeName = null;
+ if (themeId === OV.Theme.Light) {
+ themeName = 'light';
+ } else if (themeId === OV.Theme.Dark) {
+ themeName = 'dark';
+ } else {
+ return;
+ }
+
let root = document.querySelector (':root');
for (let property in this.css) {
if (Object.prototype.hasOwnProperty.call (this.css, property)) {
- let value = this.css[property][name];
+ let value = this.css[property][themeName];
if (value !== undefined) {
root.style.setProperty (property, value);
}
diff --git a/website/o3dv/js/website.js b/website/o3dv/js/website.js
index e60b22b..ac78322 100644
--- a/website/o3dv/js/website.js
+++ b/website/o3dv/js/website.js
@@ -1,27 +1,3 @@
-OV.WebsiteSettings = class
-{
- constructor ()
- {
- this.backgroundColor = new OV.Color (255, 255, 255);
- this.defaultColor = new OV.Color (200, 200, 200);
- this.themeName = 'light';
- }
-
- LoadFromCookies (cookieHandler)
- {
- this.backgroundColor = cookieHandler.GetColorVal ('ov_background_color', new OV.Color (255, 255, 255));
- this.defaultColor = cookieHandler.GetColorVal ('ov_default_color', new OV.Color (200, 200, 200));
- this.themeName = cookieHandler.GetStringVal ('ov_theme_name', 'light');
- }
-
- SaveToCookies (cookieHandler)
- {
- cookieHandler.SetColorVal ('ov_background_color', this.backgroundColor);
- cookieHandler.SetColorVal ('ov_default_color', this.defaultColor);
- cookieHandler.SetStringVal ('ov_theme_name', this.themeName);
- }
-};
-
OV.Website = class
{
constructor (parameters)
@@ -34,7 +10,7 @@ OV.Website = class
this.sidebar = new OV.Sidebar (this.parameters.sidebarDiv);
this.navigator = new OV.Navigator (this.parameters.navigatorDiv);
this.eventHandler = new OV.EventHandler (this.parameters.eventHandler);
- this.settings = new OV.WebsiteSettings ();
+ this.settings = new OV.Settings ();
this.modelLoader = new OV.ThreeModelLoader ();
this.highlightMaterial = new THREE.MeshPhongMaterial ({
color : 0x8ec9f0,
@@ -50,7 +26,7 @@ OV.Website = class
Load ()
{
this.settings.LoadFromCookies (this.cookieHandler);
- this.SwitchTheme (this.settings.themeName);
+ this.SwitchTheme (this.settings.themeId, false);
this.InitViewer ();
this.InitToolbar ();
@@ -300,11 +276,33 @@ OV.Website = class
}
}
- SwitchTheme (newThemeName)
+ SwitchTheme (newThemeId, resetColors)
{
- this.settings.themeName = newThemeName;
- this.themeHandler.SwitchTheme (newThemeName);
+ this.settings.themeId = newThemeId;
+ let calculatedTheme = this.settings.GetTheme ();
+
+ this.themeHandler.SwitchTheme (calculatedTheme);
this.settings.SaveToCookies (this.cookieHandler);
+ if (resetColors) {
+ if (calculatedTheme === OV.Theme.Light) {
+ this.settings.backgroundColor = new OV.Color (255, 255, 255);
+ this.settings.defaultColor = new OV.Color (200, 200, 200);
+ } else if (calculatedTheme === OV.Theme.Dark) {
+ this.settings.backgroundColor = new OV.Color (0, 0, 0);
+ this.settings.defaultColor = new OV.Color (200, 200, 200);
+ } else {
+ return;
+ }
+ this.settings.SaveToCookies (this.cookieHandler);
+ this.viewer.SetBackgroundColor (this.settings.backgroundColor);
+ if (this.modelLoader.defaultMaterial !== null) {
+ OV.ReplaceDefaultMaterialColor (this.model, this.settings.defaultColor);
+ this.modelLoader.ReplaceDefaultMaterialColor (this.settings.defaultColor);
+ }
+ if (this.settingsPanel !== null) {
+ this.settingsPanel.UpdateSettings (this.settings);
+ }
+ }
}
InitViewer ()
@@ -416,13 +414,13 @@ OV.Website = class
// TODO: remove
AddButton (this.toolbar, this.eventHandler, 'share', 'Dark Mode', true, () => {
- let theme = 'light';
- if (this.settings.themeName === 'dark') {
- theme = 'light';
+ let themeId = OV.Theme.Light;
+ if (this.settings.themeId === OV.Theme.Dark) {
+ themeId = OV.Theme.Light;
} else {
- theme = 'dark';
+ themeId = OV.Theme.Dark;
}
- this.SwitchTheme (theme);
+ this.SwitchTheme (themeId, true);
});
this.parameters.fileInput.on ('change', (ev) => {
@@ -571,7 +569,7 @@ OV.Website = class
});
}
- let defaultSettings = new OV.WebsiteSettings ();
+ let defaultSettings = new OV.Settings ();
this.settingsPanel.InitSettings (
this.settings,
defaultSettings,