Drag and drop your 3D models here.
obj, 3ds, stl, ply, gltf, glb, 3dm, fbx, off
diff --git a/website/o3dv/css/core.css b/website/o3dv/css/core.css
index e90e43f..9a3228f 100644
--- a/website/o3dv/css/core.css
+++ b/website/o3dv/css/core.css
@@ -8,8 +8,12 @@
--ov_secondary_hover_color: #e4f4ff;
--ov_icon_color: #263238;
--ov_light_icon_color: #838383;
+ --ov_logo_text_color: #15334a;
+ --ov_logo_border_color: #000000;
--ov_toolbar_background_color: #f5f5f5;
--ov_toolbar_selected_background_color: #e1e1e1;
+ --ov_dialog_foreground_color: #000000;
+ --ov_dialog_background_color: #ffffff;
--ov_border_color: #cccccc;
--ov_light_border_color: #dddddd;
--ov_shadow: 0px 0px 10px #cccccc;
diff --git a/website/o3dv/css/dialogs.css b/website/o3dv/css/dialogs.css
index 63984e4..0e21e04 100644
--- a/website/o3dv/css/dialogs.css
+++ b/website/o3dv/css/dialogs.css
@@ -5,8 +5,8 @@ div.ov_modal_overlay
div.ov_dialog
{
- color: var(--ov_foreground_color);
- background: var(--ov_background_color);
+ color: var(--ov_dialog_foreground_color);
+ background: var(--ov_dialog_background_color);
width: 400px;
padding: 20px;
box-shadow: var(--ov_shadow);
@@ -124,8 +124,8 @@ div.ov_dialog div.ov_dialog_copyable_input
div.ov_dialog div.ov_dialog_copyable_input input
{
- color: var(--ov_foreground_color);
- background: var(--ov_background_color);
+ color: var(--ov_dialog_foreground_color);
+ background: var(--ov_dialog_background_color);
width: 70%;
margin-top: 6px;
box-sizing: border-box;
@@ -157,8 +157,8 @@ div.ov_dialog input.ov_dialog_checkradio
div.ov_popup
{
- color: var(--ov_foreground_color);
- background: var(--ov_background_color);
+ color: var(--ov_dialog_foreground_color);
+ background: var(--ov_dialog_background_color);
width: 200px;
padding: 10px;
box-shadow: var(--ov_shadow);
@@ -193,8 +193,8 @@ div.ov_popup div.ov_popup_list_item_name
div.ov_progress
{
- color: var(--ov_foreground_color);
- background: var(--ov_background_color);
+ color: var(--ov_dialog_foreground_color);
+ background: var(--ov_dialog_background_color);
text-align: center;
width: 400px;
padding: 20px;
@@ -202,11 +202,12 @@ div.ov_progress
border-radius: 5px;
}
-div.ov_progress img.ov_progress_img
+div.ov_progress svg.ov_progress_img
{
+ width: 80px;
height: 80px;
margin-bottom: 10px;
- display: inline;
+ display: inline-block;
}
div.ov_progress div.ov_progress_text
@@ -215,7 +216,6 @@ div.ov_progress div.ov_progress_text
text-align: center;
}
-
@media (hover)
{
diff --git a/website/o3dv/css/embed.css b/website/o3dv/css/embed.css
index 03a691a..ff5b553 100644
--- a/website/o3dv/css/embed.css
+++ b/website/o3dv/css/embed.css
@@ -3,10 +3,12 @@ div.embed_viewer
overflow: auto;
}
-div.embed_viewer img.embed_logo
+div.embed_viewer svg.embed_logo
{
+ width: 40px;
height: 40px;
position: absolute;
right: 10px;
bottom: 10px;
+ display: block;
}
diff --git a/website/o3dv/css/website.css b/website/o3dv/css/website.css
index 484a94d..a3fafa2 100644
--- a/website/o3dv/css/website.css
+++ b/website/o3dv/css/website.css
@@ -32,11 +32,19 @@ div.title img.logo_image
float: left;
}
+div.title svg.logo_image
+{
+ width: 190px;
+ height: 40px;
+ float: left;
+}
+
div.title div.logo_text
{
- font-size: 16px;
+ color: var(--ov_foreground_color);
+ font-size: 18px;
font-weight: bold;
- padding: 10px;
+ padding: 9px;
float: left;
}
@@ -68,9 +76,10 @@ div.intro
overflow: auto;
}
-div.intro img.intro_logo
+div.intro svg.intro_logo
{
display: inline;
+ width: 140px;
height: 140px;
max-width: 80%;
}
@@ -260,6 +269,18 @@ div.ov_sidebar_content button.pcr-button
float: left;
}
+div.pcr-app
+{
+ color: var(--ov_dialog_foreground_color);
+ background: var(--ov_dialog_background_color);
+}
+
+div.pcr-app input.pcr-result
+{
+ color: var(--ov_foreground_color) !important;
+ background: var(--ov_background_color) !important;
+}
+
div.ov_property_table
{
overflow: auto;
diff --git a/website/o3dv/js/modal.js b/website/o3dv/js/modal.js
index 67b3446..bde72e8 100644
--- a/website/o3dv/js/modal.js
+++ b/website/o3dv/js/modal.js
@@ -149,7 +149,6 @@ OV.ProgressDialog = class extends OV.Dialog
{
super ();
this.modal.SetCloseable (false);
- this.imageDiv = null;
this.textDiv = null;
}
@@ -158,9 +157,9 @@ OV.ProgressDialog = class extends OV.Dialog
let contentDiv = this.modal.GetContentDiv ();
contentDiv.addClass ('ov_progress');
- this.imageDiv = $('
![]()
').addClass ('ov_progress_img').attr ('src', 'assets/images/3dviewer_net_logo.svg').appendTo (contentDiv);
+ $('
').addClass ('ov_progress_img').appendTo (contentDiv);
+ console.log (contentDiv.html ());
this.textDiv = $('
').addClass ('ov_progress_text').appendTo (contentDiv);
-
this.SetText (text);
}
diff --git a/website/o3dv/js/settingssidebarpanel.js b/website/o3dv/js/settingssidebarpanel.js
index 67a4a78..953e181 100644
--- a/website/o3dv/js/settingssidebarpanel.js
+++ b/website/o3dv/js/settingssidebarpanel.js
@@ -55,12 +55,11 @@ OV.SettingsSidebarPanel = class extends OV.SidebarPanel
{
let contentDiv = $('
').addClass ('ov_sidebar_settings_content').appendTo (this.contentDiv);
let titleDiv = $('
').addClass ('ov_sidebar_subtitle').appendTo (contentDiv);
- let colorInput = $('
').addClass ('color-picker').addClass ('ov_sidebar_color').appendTo (titleDiv);
+ let colorInput = $('
').addClass ('color-picker').appendTo (titleDiv);
$('').html (title).appendTo (titleDiv);
const pickr = Pickr.create ({
el : colorInput.get (0),
theme : 'monolith',
- appClass : 'ov_sidebar_color',
position : 'left-start',
swatches : predefinedColors,
comparison : false,
diff --git a/website/o3dv/js/themehandler.js b/website/o3dv/js/themehandler.js
index 0eb197c..327eaff 100644
--- a/website/o3dv/js/themehandler.js
+++ b/website/o3dv/js/themehandler.js
@@ -11,8 +11,12 @@ OV.ThemeHandler = class {
'--ov_secondary_hover_color': '#e4f4ff',
'--ov_icon_color': '#263238',
'--ov_light_icon_color': '#838383',
+ '--ov_logo_text_color': '#15334a',
+ '--ov_logo_border_color': '#000000',
'--ov_toolbar_background_color': '#f5f5f5',
'--ov_toolbar_selected_background_color': '#e1e1e1',
+ '--ov_dialog_foreground_color': '#000000',
+ '--ov_dialog_background_color': '#ffffff',
'--ov_border_color': '#cccccc',
'--ov_light_border_color': '#dddddd',
'--ov_shadow': '0px 0px 10px #cccccc',
@@ -29,8 +33,12 @@ OV.ThemeHandler = class {
'--ov_secondary_hover_color': '#e4f4ff',
'--ov_icon_color': '#fafafa',
'--ov_light_icon_color': '#dadada',
+ '--ov_logo_text_color': '#fafafa',
+ '--ov_logo_border_color': '#fafafa',
'--ov_toolbar_background_color': '#333333',
'--ov_toolbar_selected_background_color': '#444444',
+ '--ov_dialog_foreground_color': '#fafafa',
+ '--ov_dialog_background_color': '#333333',
'--ov_border_color': '#444444',
'--ov_light_border_color': '#333333',
'--ov_shadow': 'none',
diff --git a/website/o3dv/js/website.js b/website/o3dv/js/website.js
index f129154..8f600f1 100644
--- a/website/o3dv/js/website.js
+++ b/website/o3dv/js/website.js
@@ -37,6 +37,7 @@ OV.Website = class
color : 0x8ec9f0,
side : THREE.DoubleSide
});
+ this.themeHandler = new OV.ThemeHandler ();
this.detailsPanel = null;
this.settingsPanel = null;
this.model = null;
@@ -66,8 +67,7 @@ OV.Website = class
this.Resize ();
});
- let themeHandler = new OV.ThemeHandler ();
- themeHandler.SwitchTheme ('dark');
+ this.themeHandler.SwitchTheme ('dark');
}
Resize ()
@@ -405,6 +405,17 @@ OV.Website = class
this.dialog = OV.ShowSharingDialog (importer, this.settings, this.viewer.GetCamera ());
});
+ // TODO: remove
+ let theme = 'dark';
+ AddButton (this.toolbar, this.eventHandler, 'share', 'Dark Mode', true, () => {
+ if (theme === 'dark') {
+ theme = 'light'
+ } else {
+ theme = 'dark';
+ }
+ this.themeHandler.SwitchTheme (theme);
+ });
+
this.parameters.fileInput.on ('change', (ev) => {
if (ev.target.files.length > 0) {
this.eventHandler.HandleEvent ('model_load_started', { source : 'open_file' });
+
+
+
+
+