diff --git a/assets/icons/dark_mode.svg b/assets/icons/dark_mode.svg
new file mode 100644
index 0000000..2e569e0
--- /dev/null
+++ b/assets/icons/dark_mode.svg
@@ -0,0 +1,47 @@
+
+
diff --git a/assets/icons/light_mode.svg b/assets/icons/light_mode.svg
new file mode 100644
index 0000000..8b39435
--- /dev/null
+++ b/assets/icons/light_mode.svg
@@ -0,0 +1,50 @@
+
+
diff --git a/source/website/css/O3DVIcons/O3DVIcons.woff b/source/website/css/O3DVIcons/O3DVIcons.woff
index ed02e9a..2e28dd7 100644
Binary files a/source/website/css/O3DVIcons/O3DVIcons.woff and b/source/website/css/O3DVIcons/O3DVIcons.woff differ
diff --git a/source/website/css/icons.css b/source/website/css/icons.css
index f5e5367..589f444 100644
--- a/source/website/css/icons.css
+++ b/source/website/css/icons.css
@@ -1,6 +1,6 @@
@font-face {
font-family: "O3DVIcons";
- src: url("O3DVIcons/O3DVIcons.woff?5b9efabdc2c1ef6b3990e38a69a1fb39") format("woff");
+ src: url("O3DVIcons/O3DVIcons.woff?d27bdb5af135068ed4a9350e285e132e") format("woff");
}
i[class^="icon-"]:before, i[class*=" icon-"]:before {
@@ -38,120 +38,126 @@ i[class^="icon-"]:before, i[class*=" icon-"]:before {
.icon-collapse:before {
content: "\f108";
}
-.icon-deisolate:before {
+.icon-dark_mode:before {
content: "\f109";
}
-.icon-details:before {
+.icon-deisolate:before {
content: "\f10a";
}
-.icon-donate:before {
+.icon-details:before {
content: "\f10b";
}
-.icon-download:before {
+.icon-donate:before {
content: "\f10c";
}
-.icon-expand:before {
+.icon-download:before {
content: "\f10d";
}
-.icon-export:before {
+.icon-expand:before {
content: "\f10e";
}
-.icon-feedback:before {
+.icon-export:before {
content: "\f10f";
}
-.icon-file_download:before {
+.icon-feedback:before {
content: "\f110";
}
-.icon-files:before {
+.icon-file_download:before {
content: "\f111";
}
-.icon-fit:before {
+.icon-files:before {
content: "\f112";
}
-.icon-fix_up_off:before {
+.icon-fit:before {
content: "\f113";
}
-.icon-fix_up_on:before {
+.icon-fix_up_off:before {
content: "\f114";
}
-.icon-flat_list:before {
+.icon-fix_up_on:before {
content: "\f115";
}
-.icon-flip:before {
+.icon-flat_list:before {
content: "\f116";
}
-.icon-github:before {
+.icon-flip:before {
content: "\f117";
}
-.icon-hidden:before {
+.icon-github:before {
content: "\f118";
}
-.icon-info:before {
+.icon-hidden:before {
content: "\f119";
}
-.icon-isolate:before {
+.icon-info:before {
content: "\f11a";
}
-.icon-materials:before {
+.icon-isolate:before {
content: "\f11b";
}
-.icon-measure_angle:before {
+.icon-light_mode:before {
content: "\f11c";
}
-.icon-measure_distance_parallel:before {
+.icon-materials:before {
content: "\f11d";
}
-.icon-measure_distance:before {
+.icon-measure_angle:before {
content: "\f11e";
}
-.icon-measure:before {
+.icon-measure_distance_parallel:before {
content: "\f11f";
}
-.icon-meshes:before {
+.icon-measure_distance:before {
content: "\f120";
}
-.icon-missing_files:before {
+.icon-measure:before {
content: "\f121";
}
-.icon-model:before {
+.icon-meshes:before {
content: "\f122";
}
-.icon-open_url:before {
+.icon-missing_files:before {
content: "\f123";
}
-.icon-open:before {
+.icon-model:before {
content: "\f124";
}
-.icon-print3d:before {
+.icon-open_url:before {
content: "\f125";
}
-.icon-settings:before {
+.icon-open:before {
content: "\f126";
}
-.icon-share:before {
+.icon-print3d:before {
content: "\f127";
}
-.icon-snapshot:before {
+.icon-settings:before {
content: "\f128";
}
-.icon-tree_mesh:before {
+.icon-share:before {
content: "\f129";
}
-.icon-tree_view:before {
+.icon-snapshot:before {
content: "\f12a";
}
-.icon-twitter:before {
+.icon-tree_mesh:before {
content: "\f12b";
}
-.icon-up_y:before {
+.icon-tree_view:before {
content: "\f12c";
}
-.icon-up_z:before {
+.icon-twitter:before {
content: "\f12d";
}
-.icon-visible:before {
+.icon-up_y:before {
content: "\f12e";
}
-.icon-warning:before {
+.icon-up_z:before {
content: "\f12f";
}
+.icon-visible:before {
+ content: "\f130";
+}
+.icon-warning:before {
+ content: "\f131";
+}
diff --git a/source/website/css/website.css b/source/website/css/website.css
index 69135e7..0f4fb90 100644
--- a/source/website/css/website.css
+++ b/source/website/css/website.css
@@ -207,6 +207,11 @@ div.ov_toolbar div.ov_toolbar_button
padding: 10px;
}
+div.ov_toolbar div.ov_toolbar_button.align_right
+{
+ float: right;
+}
+
div.ov_toolbar div.ov_toolbar_button.selected
{
background: var(--ov_toolbar_selected_color);
diff --git a/source/website/settings.js b/source/website/settings.js
index 1c59a4a..c4538f0 100644
--- a/source/website/settings.js
+++ b/source/website/settings.js
@@ -10,18 +10,24 @@ export const Theme =
export class Settings
{
- constructor ()
+ constructor (themeId)
{
+ this.themeId = themeId;
this.environmentMapName = 'fishermans_bastion';
this.backgroundIsEnvMap = false;
- this.backgroundColor = new RGBAColor (255, 255, 255, 255);
- this.defaultColor = new RGBColor (200, 200, 200);
+ if (this.themeId === Theme.Light) {
+ this.backgroundColor = new RGBAColor (255, 255, 255, 255);
+ this.defaultColor = new RGBColor (200, 200, 200);
+ } else if (this.themeId === Theme.Dark) {
+ this.backgroundColor = new RGBAColor (42, 43, 46, 255);
+ this.defaultColor = new RGBColor (200, 200, 200);
+ }
this.edgeSettings = new EdgeSettings (false, new RGBColor (0, 0, 0), 1);
- this.themeId = Theme.Light;
}
LoadFromCookies ()
{
+ this.themeId = CookieGetIntVal ('ov_theme_id', Theme.Light);
this.environmentMapName = CookieGetStringVal ('ov_environment_map', 'fishermans_bastion');
this.backgroundIsEnvMap = CookieGetBoolVal ('ov_background_is_envmap', false);
this.backgroundColor = CookieGetRGBAColorVal ('ov_background_color', new RGBAColor (255, 255, 255, 255));
@@ -29,11 +35,11 @@ export class Settings
this.edgeSettings.showEdges = CookieGetBoolVal ('ov_show_edges', false);
this.edgeSettings.edgeColor = CookieGetRGBColorVal ('ov_edge_color', new RGBColor (0, 0, 0));
this.edgeSettings.edgeThreshold = CookieGetIntVal ('ov_edge_threshold', 1);
- this.themeId = CookieGetIntVal ('ov_theme_id', Theme.Light);
}
SaveToCookies ()
{
+ CookieSetIntVal ('ov_theme_id', this.themeId);
CookieSetStringVal ('ov_environment_map', this.environmentMapName);
CookieSetBoolVal ('ov_background_is_envmap', this.backgroundIsEnvMap);
CookieSetRGBAColorVal ('ov_background_color', this.backgroundColor);
@@ -41,6 +47,5 @@ export class Settings
CookieSetBoolVal ('ov_show_edges', this.edgeSettings.showEdges);
CookieSetRGBColorVal ('ov_edge_color', this.edgeSettings.edgeColor);
CookieSetIntVal ('ov_edge_threshold', this.edgeSettings.edgeThreshold);
- CookieSetIntVal ('ov_theme_id', this.themeId);
}
}
diff --git a/source/website/sidebar.js b/source/website/sidebar.js
index 34d2019..04e304a 100644
--- a/source/website/sidebar.js
+++ b/source/website/sidebar.js
@@ -62,13 +62,15 @@ export class Sidebar
},
onEdgeDisplayChanged : () => {
this.callbacks.onEdgeDisplayChanged ();
- },
- onThemeChanged : () => {
- this.callbacks.onThemeChanged ();
}
});
}
+ UpdateControlsStatus ()
+ {
+ this.settingsPanel.UpdateControlsStatus ();
+ }
+
UpdateControlsVisibility ()
{
this.settingsPanel.UpdateControlsVisibility ();
diff --git a/source/website/sidebarsettingspanel.js b/source/website/sidebarsettingspanel.js
index 96d0bc8..f85056d 100644
--- a/source/website/sidebarsettingspanel.js
+++ b/source/website/sidebarsettingspanel.js
@@ -3,7 +3,7 @@ import { AddDiv, AddDomElement, ShowDomElement, SetDomElementOuterHeight } from
import { AddRangeSlider, AddToggle, AddCheckbox } from '../website/utils.js';
import { CalculatePopupPositionToElementTopLeft } from './dialogs.js';
import { PopupDialog } from './dialog.js';
-import { Settings, Theme } from './settings.js';
+import { Settings } from './settings.js';
import { SidebarPanel } from './sidebarpanel.js';
import { ShadingType } from '../engine/threejs/threeutils.js';
import { CameraMode } from '../engine/viewer/camera.js';
@@ -416,45 +416,6 @@ class SettingsImportParametersSection extends SettingsSection
}
}
-class SettingsAppearanceSection extends SettingsSection
-{
- constructor (parentDiv, settings)
- {
- super (parentDiv, 'Appearance', settings);
- this.darkModeToggle = null;
- }
-
- Init (callbacks)
- {
- super.Init (callbacks);
-
- let darkModeParameterDiv = AddDiv (this.contentDiv, 'ov_sidebar_parameter');
-
- this.darkModeToggle = AddToggle (darkModeParameterDiv, 'ov_sidebar_parameter_toggle');
- this.darkModeToggle.OnChange (() => {
- this.settings.themeId = (this.darkModeToggle.GetStatus () ? Theme.Dark : Theme.Light);
- this.callbacks.onThemeChanged ();
- });
- AddDiv (darkModeParameterDiv, null, 'Dark Mode');
-
- let isDarkMode = (this.settings.themeId === Theme.Dark);
- this.darkModeToggle.SetStatus (isDarkMode);
- }
-
- Update ()
- {
- if (this.darkModeToggle !== null) {
- let isDarkMode = (this.settings.themeId === Theme.Dark);
- this.darkModeToggle.SetStatus (isDarkMode);
- }
- }
-
- UpdateVisibility ()
- {
-
- }
-}
-
export class SidebarSettingsPanel extends SidebarPanel
{
constructor (parentDiv, settings)
@@ -465,7 +426,6 @@ export class SidebarSettingsPanel extends SidebarPanel
this.sectionsDiv = AddDiv (this.contentDiv, 'ov_sidebar_settings_sections ov_thin_scrollbar');
this.modelDisplaySection = new SettingsModelDisplaySection (this.sectionsDiv, this.settings);
this.importParametersSection = new SettingsImportParametersSection (this.sectionsDiv, this.settings);
- this.appearanceSection = new SettingsAppearanceSection (this.sectionsDiv, this.settings);
this.resetToDefaultsButton = AddDiv (this.contentDiv, 'ov_button ov_panel_button outline', 'Reset to Default');
this.resetToDefaultsButton.addEventListener ('click', () => {
@@ -492,7 +452,6 @@ export class SidebarSettingsPanel extends SidebarPanel
{
this.modelDisplaySection.Clear ();
this.importParametersSection.Clear ();
- this.appearanceSection.Clear ();
}
Init (callbacks)
@@ -530,20 +489,12 @@ export class SidebarSettingsPanel extends SidebarPanel
this.callbacks.onDefaultColorChanged ();
}
});
- this.appearanceSection.Init ({
- onThemeChanged : () => {
- if (this.settings.themeId === Theme.Light) {
- this.settings.backgroundColor = new RGBAColor (255, 255, 255, 255);
- this.settings.defaultColor = new RGBColor (200, 200, 200);
- } else if (this.settings.themeId === Theme.Dark) {
- this.settings.backgroundColor = new RGBAColor (42, 43, 46, 255);
- this.settings.defaultColor = new RGBColor (200, 200, 200);
- }
- this.modelDisplaySection.Update ();
- this.importParametersSection.Update ();
- callbacks.onThemeChanged ();
- }
- });
+ }
+
+ UpdateControlsStatus ()
+ {
+ this.modelDisplaySection.Update ();
+ this.importParametersSection.Update ();
}
UpdateControlsVisibility ()
@@ -555,7 +506,8 @@ export class SidebarSettingsPanel extends SidebarPanel
ResetToDefaults ()
{
- let defaultSettings = new Settings ();
+ console.log (this.settings.themeId);
+ let defaultSettings = new Settings (this.settings.themeId);
this.settings.environmentMapName = defaultSettings.environmentMapName;
this.settings.backgroundIsEnvMap = defaultSettings.backgroundIsEnvMap;
@@ -563,13 +515,9 @@ export class SidebarSettingsPanel extends SidebarPanel
this.settings.defaultColor = defaultSettings.defaultColor;
this.settings.edgeSettings = defaultSettings.edgeSettings;
this.settings.themeId = defaultSettings.themeId;
-
- this.modelDisplaySection.Update ();
- this.importParametersSection.Update ();
- this.appearanceSection.Update ();
-
+ console.log (this.settings.themeId);
+ this.UpdateControlsStatus ();
this.callbacks.onEnvironmentMapChanged ();
- this.callbacks.onThemeChanged ();
}
Resize ()
diff --git a/source/website/website.js b/source/website/website.js
index c563b7c..50f4cb3 100644
--- a/source/website/website.js
+++ b/source/website/website.js
@@ -186,7 +186,7 @@ export class Website
constructor (parameters)
{
this.parameters = parameters;
- this.settings = new Settings ();
+ this.settings = new Settings (Theme.Light);
this.viewer = new Viewer ();
this.measureTool = new MeasureTool (this.viewer, this.settings);
this.hashHandler = new HashHandler ();
@@ -566,8 +566,12 @@ export class Website
{
this.settings.themeId = newThemeId;
this.themeHandler.SwitchTheme (this.settings.themeId);
- this.settings.SaveToCookies ();
if (resetColors) {
+ let defaultSettings = new Settings (this.settings.themeId);
+ this.settings.backgroundColor = defaultSettings.backgroundColor;
+ this.settings.defaultColor = defaultSettings.defaultColor;
+ this.sidebar.UpdateControlsStatus ();
+
this.viewer.SetBackgroundColor (this.settings.backgroundColor);
let modelLoader = this.modelLoaderUI.GetModelLoader ();
if (modelLoader.GetDefaultMaterial () !== null) {
@@ -575,6 +579,8 @@ export class Website
modelLoader.ReplaceDefaultMaterialColor (this.settings.defaultColor);
}
}
+
+ this.settings.SaveToCookies ();
}
InitViewer ()
@@ -666,7 +672,7 @@ export class Website
AddButton (this.toolbar, 'flip', 'Flip up vector', ['only_on_model'], () => {
this.viewer.FlipUpVector ();
});
- AddSeparator (this.toolbar, ['only_on_model']);
+ AddSeparator (this.toolbar, ['only_full_width', 'only_on_model']);
AddRadioButton (this.toolbar, ['fix_up_on', 'fix_up_off'], ['Fixed up vector', 'Free orbit'], 0, ['only_full_width', 'only_on_model'], (buttonIndex) => {
if (buttonIndex === 0) {
this.viewer.SetFixUpVector (true);
@@ -675,7 +681,7 @@ export class Website
}
});
AddSeparator (this.toolbar, ['only_full_width', 'only_on_model']);
- AddRadioButton (this.toolbar, ['camera_perspective', 'camera_orthographic'], ['Perspective camera', 'Orthographic camera'], 0, ['only_on_model'], (buttonIndex) => {
+ AddRadioButton (this.toolbar, ['camera_perspective', 'camera_orthographic'], ['Perspective camera', 'Orthographic camera'], 0, ['only_full_width', 'only_on_model'], (buttonIndex) => {
if (buttonIndex === 0) {
this.viewer.SetCameraMode (CameraMode.Perspective);
} else if (buttonIndex === 1) {
@@ -725,6 +731,17 @@ export class Website
});
});
+ let selectedTheme = (this.settings.themeId === Theme.Light ? 1 : 0);
+ AddRadioButton (this.toolbar, ['dark_mode', 'light_mode'], ['Dark mode', 'Light mode'], selectedTheme, ['align_right'], (buttonIndex) => {
+ if (buttonIndex === 0) {
+ this.settings.themeId = Theme.Dark;
+ } else if (buttonIndex === 1) {
+ this.settings.themeId = Theme.Light;
+ }
+ HandleEvent ('theme_changed', this.settings.themeId === Theme.Light ? 'light' : 'dark');
+ this.SwitchTheme (this.settings.themeId, true);
+ });
+
this.parameters.fileInput.addEventListener ('change', (ev) => {
if (ev.target.files.length > 0) {
HandleEvent ('model_load_started', 'open_file');
@@ -796,10 +813,6 @@ export class Website
HandleEvent ('edge_display_changed', this.settings.showEdges ? 'on' : 'off');
this.UpdateEdgeDisplay ();
},
- onThemeChanged : () => {
- HandleEvent ('theme_changed', this.settings.themeId === Theme.Light ? 'light' : 'dark');
- this.SwitchTheme (this.settings.themeId, true);
- },
onResizeRequested : () => {
this.layouter.Resize ();
},
diff --git a/website/info/css/O3DVIcons.woff b/website/info/css/O3DVIcons.woff
index ed02e9a..2e28dd7 100644
Binary files a/website/info/css/O3DVIcons.woff and b/website/info/css/O3DVIcons.woff differ
diff --git a/website/info/css/icons.css b/website/info/css/icons.css
index de1454a..05a1f52 100644
--- a/website/info/css/icons.css
+++ b/website/info/css/icons.css
@@ -1,6 +1,6 @@
@font-face {
font-family: "O3DVIcons";
- src: url("./O3DVIcons.woff?5b9efabdc2c1ef6b3990e38a69a1fb39") format("woff");
+ src: url("./O3DVIcons.woff?d27bdb5af135068ed4a9350e285e132e") format("woff");
}
i[class^="icon-"]:before, i[class*=" icon-"]:before {
@@ -38,120 +38,126 @@ i[class^="icon-"]:before, i[class*=" icon-"]:before {
.icon-collapse:before {
content: "\f108";
}
-.icon-deisolate:before {
+.icon-dark_mode:before {
content: "\f109";
}
-.icon-details:before {
+.icon-deisolate:before {
content: "\f10a";
}
-.icon-donate:before {
+.icon-details:before {
content: "\f10b";
}
-.icon-download:before {
+.icon-donate:before {
content: "\f10c";
}
-.icon-expand:before {
+.icon-download:before {
content: "\f10d";
}
-.icon-export:before {
+.icon-expand:before {
content: "\f10e";
}
-.icon-feedback:before {
+.icon-export:before {
content: "\f10f";
}
-.icon-file_download:before {
+.icon-feedback:before {
content: "\f110";
}
-.icon-files:before {
+.icon-file_download:before {
content: "\f111";
}
-.icon-fit:before {
+.icon-files:before {
content: "\f112";
}
-.icon-fix_up_off:before {
+.icon-fit:before {
content: "\f113";
}
-.icon-fix_up_on:before {
+.icon-fix_up_off:before {
content: "\f114";
}
-.icon-flat_list:before {
+.icon-fix_up_on:before {
content: "\f115";
}
-.icon-flip:before {
+.icon-flat_list:before {
content: "\f116";
}
-.icon-github:before {
+.icon-flip:before {
content: "\f117";
}
-.icon-hidden:before {
+.icon-github:before {
content: "\f118";
}
-.icon-info:before {
+.icon-hidden:before {
content: "\f119";
}
-.icon-isolate:before {
+.icon-info:before {
content: "\f11a";
}
-.icon-materials:before {
+.icon-isolate:before {
content: "\f11b";
}
-.icon-measure_angle:before {
+.icon-light_mode:before {
content: "\f11c";
}
-.icon-measure_distance_parallel:before {
+.icon-materials:before {
content: "\f11d";
}
-.icon-measure_distance:before {
+.icon-measure_angle:before {
content: "\f11e";
}
-.icon-measure:before {
+.icon-measure_distance_parallel:before {
content: "\f11f";
}
-.icon-meshes:before {
+.icon-measure_distance:before {
content: "\f120";
}
-.icon-missing_files:before {
+.icon-measure:before {
content: "\f121";
}
-.icon-model:before {
+.icon-meshes:before {
content: "\f122";
}
-.icon-open_url:before {
+.icon-missing_files:before {
content: "\f123";
}
-.icon-open:before {
+.icon-model:before {
content: "\f124";
}
-.icon-print3d:before {
+.icon-open_url:before {
content: "\f125";
}
-.icon-settings:before {
+.icon-open:before {
content: "\f126";
}
-.icon-share:before {
+.icon-print3d:before {
content: "\f127";
}
-.icon-snapshot:before {
+.icon-settings:before {
content: "\f128";
}
-.icon-tree_mesh:before {
+.icon-share:before {
content: "\f129";
}
-.icon-tree_view:before {
+.icon-snapshot:before {
content: "\f12a";
}
-.icon-twitter:before {
+.icon-tree_mesh:before {
content: "\f12b";
}
-.icon-up_y:before {
+.icon-tree_view:before {
content: "\f12c";
}
-.icon-up_z:before {
+.icon-twitter:before {
content: "\f12d";
}
-.icon-visible:before {
+.icon-up_y:before {
content: "\f12e";
}
-.icon-warning:before {
+.icon-up_z:before {
content: "\f12f";
}
+.icon-visible:before {
+ content: "\f130";
+}
+.icon-warning:before {
+ content: "\f131";
+}