Doni/ModelHandle
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Option to switch between themes without opening a model #400

Browse Source
This commit is contained in:
kovacsv 2023-06-28 20:35:31 +02:00
parent 1ec2f1df36
commit 8edce119cd
11 changed files with 242 additions and 160 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
assets/icons/dark_mode.svg Normal file
View File

@ -0,0 +1,47 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
width="18"
height="18"
viewBox="0 0 18 18"
fill="none"
version="1.1"
id="svg135"
sodipodi:docname="dark_mode.svg"
inkscape:version="1.2.1 (9c6d41e410, 2022-07-14)"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs139" />
<sodipodi:namedview
id="namedview137"
pagecolor="#ffffff"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
showgrid="true"
inkscape:zoom="46.055556"
inkscape:cx="9.0108565"
inkscape:cy="9.0108565"
inkscape:window-width="1920"
inkscape:window-height="1009"
inkscape:window-x="-8"
inkscape:window-y="-8"
inkscape:window-maximized="1"
inkscape:current-layer="svg135">
<inkscape:grid
type="xygrid"
id="grid258" />
</sodipodi:namedview>
<path
d="m 14.549269,10.694684 c -0.553199,0.294 -1.158998,0.4762 -1.782596,0.5362 -0.623699,0.0599 -1.253097,-0.0036 -1.852096,-0.1868 C 9.7046806,10.673884 8.6912631,9.8382841 8.0973845,8.7209636 7.503516,7.6036735 7.3778863,6.2961934 7.7479854,5.0862633 8.1180745,3.8762832 8.9538324,2.8629431 10.07108,2.2690631 10.446179,2.078573 10.844178,1.936763 11.255277,1.847103 9.7371805,1.368443 8.1061045,1.385213 6.5980782,1.894973 5.0901819,2.4047431 3.783475,3.3810931 2.8671473,4.6827732 1.9509495,5.9844034 1.4725007,7.5437935 1.5012206,9.135404 c 0.02872,1.59158 0.5631086,3.13268 1.5257163,4.40038 0.9627476,1.2677 2.3037644,2.196301 3.8290807,2.651201 1.5254462,0.4551 3.1559624,0.4129 4.6558584,-0.1201 1.499796,-0.5332 2.791293,-1.529701 3.687191,-2.845401 0.895898,-1.3157 1.350197,-2.8824 1.296697,-4.4733304 -0.438499,0.8297304 -1.116897,1.5080304 -1.946495,1.9464304 z"
stroke="#263238"
stroke-linecap="round"
stroke-linejoin="round"
id="path133"
style="stroke-width:0.999999" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

50
assets/icons/light_mode.svg Normal file
View File

@ -0,0 +1,50 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
width="18"
height="18"
viewBox="0 0 18 18"
fill="none"
version="1.1"
id="svg4"
sodipodi:docname="light_mode.svg"
inkscape:version="1.2.1 (9c6d41e410, 2022-07-14)"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs8" />
<sodipodi:namedview
id="namedview6"
pagecolor="#ffffff"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
showgrid="true"
inkscape:zoom="46.055556"
inkscape:cx="9.0325693"
inkscape:cy="9.0325693"
inkscape:window-width="1920"
inkscape:window-height="1009"
inkscape:window-x="-8"
inkscape:window-y="-8"
inkscape:window-maximized="1"
inkscape:current-layer="svg4">
<inkscape:grid
type="xygrid"
id="grid423" />
</sodipodi:namedview>
<g
id="heroicons-outline/sun"
transform="translate(-0.5,-0.5)">
<path
id="Vector"
d="m 9,2.25 v 1.6875 m 4.773,0.28953 -1.1933,1.19324 M 15.75,9 H 14.0625 M 13.773,13.773 12.5797,12.5797 M 9,14.0625 V 15.75 M 5.42027,12.5797 4.22703,13.773 M 3.9375,9 H 2.25 M 5.42027,5.42027 4.22703,4.22703 M 11.8125,9 c 0,1.5533 -1.2592,2.8125 -2.8125,2.8125 C 7.4467,11.8125 6.1875,10.5533 6.1875,9 6.1875,7.4467 7.4467,6.1875 9,6.1875 c 1.5533,0 2.8125,1.2592 2.8125,2.8125 z"
stroke="#263238"
stroke-linecap="round"
stroke-linejoin="round" />
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
source/website/css/O3DVIcons/O3DVIcons.woff
View File

Binary file not shown.

86
source/website/css/icons.css
View File

@ -1,6 +1,6 @@
@font-face { @font-face {
font-family: "O3DVIcons"; 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 { i[class^="icon-"]:before, i[class*=" icon-"]:before {
@ -38,120 +38,126 @@ i[class^="icon-"]:before, i[class*=" icon-"]:before {
.icon-collapse:before { .icon-collapse:before {
content: "\f108"; content: "\f108";
} }
.icon-deisolate:before { .icon-dark_mode:before {
content: "\f109"; content: "\f109";
} }
.icon-details:before { .icon-deisolate:before {
content: "\f10a"; content: "\f10a";
} }
.icon-donate:before { .icon-details:before {
content: "\f10b"; content: "\f10b";
} }
.icon-download:before { .icon-donate:before {
content: "\f10c"; content: "\f10c";
} }
.icon-expand:before { .icon-download:before {
content: "\f10d"; content: "\f10d";
} }
.icon-export:before { .icon-expand:before {
content: "\f10e"; content: "\f10e";
} }
.icon-feedback:before { .icon-export:before {
content: "\f10f"; content: "\f10f";
} }
.icon-file_download:before { .icon-feedback:before {
content: "\f110"; content: "\f110";
} }
.icon-files:before { .icon-file_download:before {
content: "\f111"; content: "\f111";
} }
.icon-fit:before { .icon-files:before {
content: "\f112"; content: "\f112";
} }
.icon-fix_up_off:before { .icon-fit:before {
content: "\f113"; content: "\f113";
} }
.icon-fix_up_on:before { .icon-fix_up_off:before {
content: "\f114"; content: "\f114";
} }
.icon-flat_list:before { .icon-fix_up_on:before {
content: "\f115"; content: "\f115";
} }
.icon-flip:before { .icon-flat_list:before {
content: "\f116"; content: "\f116";
} }
.icon-github:before { .icon-flip:before {
content: "\f117"; content: "\f117";
} }
.icon-hidden:before { .icon-github:before {
content: "\f118"; content: "\f118";
} }
.icon-info:before { .icon-hidden:before {
content: "\f119"; content: "\f119";
} }
.icon-isolate:before { .icon-info:before {
content: "\f11a"; content: "\f11a";
} }
.icon-materials:before { .icon-isolate:before {
content: "\f11b"; content: "\f11b";
} }
.icon-measure_angle:before { .icon-light_mode:before {
content: "\f11c"; content: "\f11c";
} }
.icon-measure_distance_parallel:before { .icon-materials:before {
content: "\f11d"; content: "\f11d";
} }
.icon-measure_distance:before { .icon-measure_angle:before {
content: "\f11e"; content: "\f11e";
} }
.icon-measure:before { .icon-measure_distance_parallel:before {
content: "\f11f"; content: "\f11f";
} }
.icon-meshes:before { .icon-measure_distance:before {
content: "\f120"; content: "\f120";
} }
.icon-missing_files:before { .icon-measure:before {
content: "\f121"; content: "\f121";
} }
.icon-model:before { .icon-meshes:before {
content: "\f122"; content: "\f122";
} }
.icon-open_url:before { .icon-missing_files:before {
content: "\f123"; content: "\f123";
} }
.icon-open:before { .icon-model:before {
content: "\f124"; content: "\f124";
} }
.icon-print3d:before { .icon-open_url:before {
content: "\f125"; content: "\f125";
} }
.icon-settings:before { .icon-open:before {
content: "\f126"; content: "\f126";
} }
.icon-share:before { .icon-print3d:before {
content: "\f127"; content: "\f127";
} }
.icon-snapshot:before { .icon-settings:before {
content: "\f128"; content: "\f128";
} }
.icon-tree_mesh:before { .icon-share:before {
content: "\f129"; content: "\f129";
} }
.icon-tree_view:before { .icon-snapshot:before {
content: "\f12a"; content: "\f12a";
} }
.icon-twitter:before { .icon-tree_mesh:before {
content: "\f12b"; content: "\f12b";
} }
.icon-up_y:before { .icon-tree_view:before {
content: "\f12c"; content: "\f12c";
} }
.icon-up_z:before { .icon-twitter:before {
content: "\f12d"; content: "\f12d";
} }
.icon-visible:before { .icon-up_y:before {
content: "\f12e"; content: "\f12e";
} }
.icon-warning:before { .icon-up_z:before {
content: "\f12f"; content: "\f12f";
} }
.icon-visible:before {
content: "\f130";
}
.icon-warning:before {
content: "\f131";
}

5
source/website/css/website.css
View File

@ -207,6 +207,11 @@ div.ov_toolbar div.ov_toolbar_button
padding: 10px; padding: 10px;
} }
div.ov_toolbar div.ov_toolbar_button.align_right
{
float: right;
}
div.ov_toolbar div.ov_toolbar_button.selected div.ov_toolbar div.ov_toolbar_button.selected
{ {
background: var(--ov_toolbar_selected_color); background: var(--ov_toolbar_selected_color);

17
source/website/settings.js
View File

@ -10,18 +10,24 @@ export const Theme =
export class Settings export class Settings
{ {
constructor () constructor (themeId)
{ {
this.themeId = themeId;
this.environmentMapName = 'fishermans_bastion'; this.environmentMapName = 'fishermans_bastion';
this.backgroundIsEnvMap = false; this.backgroundIsEnvMap = false;
this.backgroundColor = new RGBAColor (255, 255, 255, 255); if (this.themeId === Theme.Light) {
this.defaultColor = new RGBColor (200, 200, 200); 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.edgeSettings = new EdgeSettings (false, new RGBColor (0, 0, 0), 1);
this.themeId = Theme.Light;
} }
LoadFromCookies () LoadFromCookies ()
{ {
this.themeId = CookieGetIntVal ('ov_theme_id', Theme.Light);
this.environmentMapName = CookieGetStringVal ('ov_environment_map', 'fishermans_bastion'); this.environmentMapName = CookieGetStringVal ('ov_environment_map', 'fishermans_bastion');
this.backgroundIsEnvMap = CookieGetBoolVal ('ov_background_is_envmap', false); this.backgroundIsEnvMap = CookieGetBoolVal ('ov_background_is_envmap', false);
this.backgroundColor = CookieGetRGBAColorVal ('ov_background_color', new RGBAColor (255, 255, 255, 255)); 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.showEdges = CookieGetBoolVal ('ov_show_edges', false);
this.edgeSettings.edgeColor = CookieGetRGBColorVal ('ov_edge_color', new RGBColor (0, 0, 0)); this.edgeSettings.edgeColor = CookieGetRGBColorVal ('ov_edge_color', new RGBColor (0, 0, 0));
this.edgeSettings.edgeThreshold = CookieGetIntVal ('ov_edge_threshold', 1); this.edgeSettings.edgeThreshold = CookieGetIntVal ('ov_edge_threshold', 1);
this.themeId = CookieGetIntVal ('ov_theme_id', Theme.Light);
} }
SaveToCookies () SaveToCookies ()
{ {
CookieSetIntVal ('ov_theme_id', this.themeId);
CookieSetStringVal ('ov_environment_map', this.environmentMapName); CookieSetStringVal ('ov_environment_map', this.environmentMapName);
CookieSetBoolVal ('ov_background_is_envmap', this.backgroundIsEnvMap); CookieSetBoolVal ('ov_background_is_envmap', this.backgroundIsEnvMap);
CookieSetRGBAColorVal ('ov_background_color', this.backgroundColor); CookieSetRGBAColorVal ('ov_background_color', this.backgroundColor);
@ -41,6 +47,5 @@ export class Settings
CookieSetBoolVal ('ov_show_edges', this.edgeSettings.showEdges); CookieSetBoolVal ('ov_show_edges', this.edgeSettings.showEdges);
CookieSetRGBColorVal ('ov_edge_color', this.edgeSettings.edgeColor); CookieSetRGBColorVal ('ov_edge_color', this.edgeSettings.edgeColor);
CookieSetIntVal ('ov_edge_threshold', this.edgeSettings.edgeThreshold); CookieSetIntVal ('ov_edge_threshold', this.edgeSettings.edgeThreshold);
CookieSetIntVal ('ov_theme_id', this.themeId);
} }
} }

8
source/website/sidebar.js
View File

@ -62,13 +62,15 @@ export class Sidebar
}, },
onEdgeDisplayChanged : () => { onEdgeDisplayChanged : () => {
this.callbacks.onEdgeDisplayChanged (); this.callbacks.onEdgeDisplayChanged ();
},
onThemeChanged : () => {
this.callbacks.onThemeChanged ();
} }
}); });
} }
UpdateControlsStatus ()
{
this.settingsPanel.UpdateControlsStatus ();
}
UpdateControlsVisibility () UpdateControlsVisibility ()
{ {
this.settingsPanel.UpdateControlsVisibility (); this.settingsPanel.UpdateControlsVisibility ();

74
source/website/sidebarsettingspanel.js
View File

@ -3,7 +3,7 @@ import { AddDiv, AddDomElement, ShowDomElement, SetDomElementOuterHeight } from
import { AddRangeSlider, AddToggle, AddCheckbox } from '../website/utils.js'; import { AddRangeSlider, AddToggle, AddCheckbox } from '../website/utils.js';
import { CalculatePopupPositionToElementTopLeft } from './dialogs.js'; import { CalculatePopupPositionToElementTopLeft } from './dialogs.js';
import { PopupDialog } from './dialog.js'; import { PopupDialog } from './dialog.js';
import { Settings, Theme } from './settings.js'; import { Settings } from './settings.js';
import { SidebarPanel } from './sidebarpanel.js'; import { SidebarPanel } from './sidebarpanel.js';
import { ShadingType } from '../engine/threejs/threeutils.js'; import { ShadingType } from '../engine/threejs/threeutils.js';
import { CameraMode } from '../engine/viewer/camera.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 export class SidebarSettingsPanel extends SidebarPanel
{ {
constructor (parentDiv, settings) 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.sectionsDiv = AddDiv (this.contentDiv, 'ov_sidebar_settings_sections ov_thin_scrollbar');
this.modelDisplaySection = new SettingsModelDisplaySection (this.sectionsDiv, this.settings); this.modelDisplaySection = new SettingsModelDisplaySection (this.sectionsDiv, this.settings);
this.importParametersSection = new SettingsImportParametersSection (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 = AddDiv (this.contentDiv, 'ov_button ov_panel_button outline', 'Reset to Default');
this.resetToDefaultsButton.addEventListener ('click', () => { this.resetToDefaultsButton.addEventListener ('click', () => {
@ -492,7 +452,6 @@ export class SidebarSettingsPanel extends SidebarPanel
{ {
this.modelDisplaySection.Clear (); this.modelDisplaySection.Clear ();
this.importParametersSection.Clear (); this.importParametersSection.Clear ();
this.appearanceSection.Clear ();
} }
Init (callbacks) Init (callbacks)
@ -530,20 +489,12 @@ export class SidebarSettingsPanel extends SidebarPanel
this.callbacks.onDefaultColorChanged (); this.callbacks.onDefaultColorChanged ();
} }
}); });
this.appearanceSection.Init ({ }
onThemeChanged : () => {
if (this.settings.themeId === Theme.Light) { UpdateControlsStatus ()
this.settings.backgroundColor = new RGBAColor (255, 255, 255, 255); {
this.settings.defaultColor = new RGBColor (200, 200, 200); this.modelDisplaySection.Update ();
} else if (this.settings.themeId === Theme.Dark) { this.importParametersSection.Update ();
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 ();
}
});
} }
UpdateControlsVisibility () UpdateControlsVisibility ()
@ -555,7 +506,8 @@ export class SidebarSettingsPanel extends SidebarPanel
ResetToDefaults () ResetToDefaults ()
{ {
let defaultSettings = new Settings (); console.log (this.settings.themeId);
let defaultSettings = new Settings (this.settings.themeId);
this.settings.environmentMapName = defaultSettings.environmentMapName; this.settings.environmentMapName = defaultSettings.environmentMapName;
this.settings.backgroundIsEnvMap = defaultSettings.backgroundIsEnvMap; this.settings.backgroundIsEnvMap = defaultSettings.backgroundIsEnvMap;
@ -563,13 +515,9 @@ export class SidebarSettingsPanel extends SidebarPanel
this.settings.defaultColor = defaultSettings.defaultColor; this.settings.defaultColor = defaultSettings.defaultColor;
this.settings.edgeSettings = defaultSettings.edgeSettings; this.settings.edgeSettings = defaultSettings.edgeSettings;
this.settings.themeId = defaultSettings.themeId; this.settings.themeId = defaultSettings.themeId;
console.log (this.settings.themeId);
this.modelDisplaySection.Update (); this.UpdateControlsStatus ();
this.importParametersSection.Update ();
this.appearanceSection.Update ();
this.callbacks.onEnvironmentMapChanged (); this.callbacks.onEnvironmentMapChanged ();
this.callbacks.onThemeChanged ();
} }
Resize () Resize ()

29
source/website/website.js
View File

@ -186,7 +186,7 @@ export class Website
constructor (parameters) constructor (parameters)
{ {
this.parameters = parameters; this.parameters = parameters;
this.settings = new Settings (); this.settings = new Settings (Theme.Light);
this.viewer = new Viewer (); this.viewer = new Viewer ();
this.measureTool = new MeasureTool (this.viewer, this.settings); this.measureTool = new MeasureTool (this.viewer, this.settings);
this.hashHandler = new HashHandler (); this.hashHandler = new HashHandler ();
@ -566,8 +566,12 @@ export class Website
{ {
this.settings.themeId = newThemeId; this.settings.themeId = newThemeId;
this.themeHandler.SwitchTheme (this.settings.themeId); this.themeHandler.SwitchTheme (this.settings.themeId);
this.settings.SaveToCookies ();
if (resetColors) { 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); this.viewer.SetBackgroundColor (this.settings.backgroundColor);
let modelLoader = this.modelLoaderUI.GetModelLoader (); let modelLoader = this.modelLoaderUI.GetModelLoader ();
if (modelLoader.GetDefaultMaterial () !== null) { if (modelLoader.GetDefaultMaterial () !== null) {
@ -575,6 +579,8 @@ export class Website
modelLoader.ReplaceDefaultMaterialColor (this.settings.defaultColor); modelLoader.ReplaceDefaultMaterialColor (this.settings.defaultColor);
} }
} }
this.settings.SaveToCookies ();
} }
InitViewer () InitViewer ()
@ -666,7 +672,7 @@ export class Website
AddButton (this.toolbar, 'flip', 'Flip up vector', ['only_on_model'], () => { AddButton (this.toolbar, 'flip', 'Flip up vector', ['only_on_model'], () => {
this.viewer.FlipUpVector (); 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) => { 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) { if (buttonIndex === 0) {
this.viewer.SetFixUpVector (true); this.viewer.SetFixUpVector (true);
@ -675,7 +681,7 @@ export class Website
} }
}); });
AddSeparator (this.toolbar, ['only_full_width', 'only_on_model']); 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) { if (buttonIndex === 0) {
this.viewer.SetCameraMode (CameraMode.Perspective); this.viewer.SetCameraMode (CameraMode.Perspective);
} else if (buttonIndex === 1) { } 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) => { this.parameters.fileInput.addEventListener ('change', (ev) => {
if (ev.target.files.length > 0) { if (ev.target.files.length > 0) {
HandleEvent ('model_load_started', 'open_file'); HandleEvent ('model_load_started', 'open_file');
@ -796,10 +813,6 @@ export class Website
HandleEvent ('edge_display_changed', this.settings.showEdges ? 'on' : 'off'); HandleEvent ('edge_display_changed', this.settings.showEdges ? 'on' : 'off');
this.UpdateEdgeDisplay (); this.UpdateEdgeDisplay ();
}, },
onThemeChanged : () => {
HandleEvent ('theme_changed', this.settings.themeId === Theme.Light ? 'light' : 'dark');
this.SwitchTheme (this.settings.themeId, true);
},
onResizeRequested : () => { onResizeRequested : () => {
this.layouter.Resize (); this.layouter.Resize ();
}, },

BIN
website/info/css/O3DVIcons.woff
View File

Binary file not shown.

86
website/info/css/icons.css
View File

@ -1,6 +1,6 @@
@font-face { @font-face {
font-family: "O3DVIcons"; 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 { i[class^="icon-"]:before, i[class*=" icon-"]:before {
@ -38,120 +38,126 @@ i[class^="icon-"]:before, i[class*=" icon-"]:before {
.icon-collapse:before { .icon-collapse:before {
content: "\f108"; content: "\f108";
} }
.icon-deisolate:before { .icon-dark_mode:before {
content: "\f109"; content: "\f109";
} }
.icon-details:before { .icon-deisolate:before {
content: "\f10a"; content: "\f10a";
} }
.icon-donate:before { .icon-details:before {
content: "\f10b"; content: "\f10b";
} }
.icon-download:before { .icon-donate:before {
content: "\f10c"; content: "\f10c";
} }
.icon-expand:before { .icon-download:before {
content: "\f10d"; content: "\f10d";
} }
.icon-export:before { .icon-expand:before {
content: "\f10e"; content: "\f10e";
} }
.icon-feedback:before { .icon-export:before {
content: "\f10f"; content: "\f10f";
} }
.icon-file_download:before { .icon-feedback:before {
content: "\f110"; content: "\f110";
} }
.icon-files:before { .icon-file_download:before {
content: "\f111"; content: "\f111";
} }
.icon-fit:before { .icon-files:before {
content: "\f112"; content: "\f112";
} }
.icon-fix_up_off:before { .icon-fit:before {
content: "\f113"; content: "\f113";
} }
.icon-fix_up_on:before { .icon-fix_up_off:before {
content: "\f114"; content: "\f114";
} }
.icon-flat_list:before { .icon-fix_up_on:before {
content: "\f115"; content: "\f115";
} }
.icon-flip:before { .icon-flat_list:before {
content: "\f116"; content: "\f116";
} }
.icon-github:before { .icon-flip:before {
content: "\f117"; content: "\f117";
} }
.icon-hidden:before { .icon-github:before {
content: "\f118"; content: "\f118";
} }
.icon-info:before { .icon-hidden:before {
content: "\f119"; content: "\f119";
} }
.icon-isolate:before { .icon-info:before {
content: "\f11a"; content: "\f11a";
} }
.icon-materials:before { .icon-isolate:before {
content: "\f11b"; content: "\f11b";
} }
.icon-measure_angle:before { .icon-light_mode:before {
content: "\f11c"; content: "\f11c";
} }
.icon-measure_distance_parallel:before { .icon-materials:before {
content: "\f11d"; content: "\f11d";
} }
.icon-measure_distance:before { .icon-measure_angle:before {
content: "\f11e"; content: "\f11e";
} }
.icon-measure:before { .icon-measure_distance_parallel:before {
content: "\f11f"; content: "\f11f";
} }
.icon-meshes:before { .icon-measure_distance:before {
content: "\f120"; content: "\f120";
} }
.icon-missing_files:before { .icon-measure:before {
content: "\f121"; content: "\f121";
} }
.icon-model:before { .icon-meshes:before {
content: "\f122"; content: "\f122";
} }
.icon-open_url:before { .icon-missing_files:before {
content: "\f123"; content: "\f123";
} }
.icon-open:before { .icon-model:before {
content: "\f124"; content: "\f124";
} }
.icon-print3d:before { .icon-open_url:before {
content: "\f125"; content: "\f125";
} }
.icon-settings:before { .icon-open:before {
content: "\f126"; content: "\f126";
} }
.icon-share:before { .icon-print3d:before {
content: "\f127"; content: "\f127";
} }
.icon-snapshot:before { .icon-settings:before {
content: "\f128"; content: "\f128";
} }
.icon-tree_mesh:before { .icon-share:before {
content: "\f129"; content: "\f129";
} }
.icon-tree_view:before { .icon-snapshot:before {
content: "\f12a"; content: "\f12a";
} }
.icon-twitter:before { .icon-tree_mesh:before {
content: "\f12b"; content: "\f12b";
} }
.icon-up_y:before { .icon-tree_view:before {
content: "\f12c"; content: "\f12c";
} }
.icon-up_z:before { .icon-twitter:before {
content: "\f12d"; content: "\f12d";
} }
.icon-visible:before { .icon-up_y:before {
content: "\f12e"; content: "\f12e";
} }
.icon-warning:before { .icon-up_z:before {
content: "\f12f"; content: "\f12f";
} }
.icon-visible:before {
content: "\f130";
}
.icon-warning:before {
content: "\f131";
}