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

Change canvas background color #85

Browse Source
This commit is contained in:
kovacsv 2021-06-25 08:41:34 +02:00
parent a43c7ed166
commit 2b38556eff
10 changed files with 89 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
sandbox/embed_iframe.html
View File

@ -34,7 +34,7 @@
style="border:1px solid #eeeeee;">
</iframe>
<iframe
src="../../website/embed.html#model=../test/testfiles/obj/hundred_cubes.obj$color=200,0,0"
src="../../website/embed.html#model=../test/testfiles/obj/hundred_cubes.obj$background=200,200,200$color=200,0,0"
width=360 height=240
style="border:1px solid #eeeeee;">
</iframe>

14
source/parameters/parameterlist.js
View File

@ -118,11 +118,17 @@ OV.ParameterListBuilder = class
return this;
}
AddBackground (background)
{
this.AddUrlPart ('background', OV.ParameterConverter.ColorToString (background));
return this;
}
AddColor (color)
{
this.AddUrlPart ('color', OV.ParameterConverter.ColorToString (color));
return this;
}
}
AddUrlPart (keyword, urlPart)
{
@ -166,6 +172,12 @@ OV.ParameterListParser = class
return OV.ParameterConverter.StringToCamera (keywordParams);
}
GetBackground ()
{
let backgroundParams = this.GetKeywordParams ('background');
return OV.ParameterConverter.StringToColor (backgroundParams);
}
GetColor ()
{
let colorParams = this.GetKeywordParams ('color');

8
source/viewer/viewer.js
View File

@ -132,6 +132,14 @@ OV.ViewerGeometry = class
}
};
OV.ViewerSettings = class
{
constructor ()
{
this.backgroundColor = new OV.Color (255, 255, 255);
}
};
OV.Viewer = class
{
constructor ()

12
test/tests/parameterlist_test.js
View File

@ -8,15 +8,18 @@ describe ('Parameter List', function () {
new OV.Coord3D (0.0, 0.0, 0.0),
new OV.Coord3D (0.0, 0.0, 1.0)
);
let background = new OV.Color (4, 5, 6);
let color = new OV.Color (1, 2, 3);
let urlParams1 = OV.CreateUrlBuilder ().AddModelUrls (modelUrls).GetParameterList ();
let urlParams2 = OV.CreateUrlBuilder ().AddCamera (camera).GetParameterList ();
let urlParams3 = OV.CreateUrlBuilder ().AddModelUrls (modelUrls).AddCamera (camera).GetParameterList ();
let urlParams4 = OV.CreateUrlBuilder ().AddModelUrls (modelUrls).AddCamera (camera).AddColor (color).GetParameterList ();
let urlParams5 = OV.CreateUrlBuilder ().AddModelUrls (modelUrls).AddCamera (camera).AddBackground (background).AddColor (color).GetParameterList ();
assert.strictEqual (urlParams1, 'model=a.txt,b.txt');
assert.strictEqual (urlParams2, 'camera=1.0000,1.0000,1.0000,0.0000,0.0000,0.0000,0.0000,0.0000,1.0000');
assert.strictEqual (urlParams3, 'model=a.txt,b.txt$camera=1.0000,1.0000,1.0000,0.0000,0.0000,0.0000,0.0000,0.0000,1.0000');
assert.strictEqual (urlParams4, 'model=a.txt,b.txt$camera=1.0000,1.0000,1.0000,0.0000,0.0000,0.0000,0.0000,0.0000,1.0000$color=1,2,3');
assert.strictEqual (urlParams5, 'model=a.txt,b.txt$camera=1.0000,1.0000,1.0000,0.0000,0.0000,0.0000,0.0000,0.0000,1.0000$background=4,5,6$color=1,2,3');
});
it ('Parameter list parser', function () {
@ -26,12 +29,14 @@ describe ('Parameter List', function () {
new OV.Coord3D (0.0, 0.0, 0.0),
new OV.Coord3D (0.0, 0.0, 1.0)
);
let color = new OV.Color (1, 2, 3);
let background = new OV.Color (4, 5, 6);
let color = new OV.Color (1, 2, 3);
let urlParamsLegacy = 'a.txt,b.txt';
let urlParams1 = 'model=a.txt,b.txt';
let urlParams2 = 'camera=1.0000,1.0000,1.0000,0.0000,0.0000,0.0000,0.0000,0.0000,1.0000';
let urlParams3 = 'model=a.txt,b.txt$camera=1.0000,1.0000,1.0000,0.0000,0.0000,0.0000,0.0000,0.0000,1.0000';
let urlParams4 = 'model=a.txt,b.txt$camera=1.0000,1.0000,1.0000,0.0000,0.0000,0.0000,0.0000,0.0000,1.0000$color=1,2,3';
let urlParams5 = 'model=a.txt,b.txt$camera=1.0000,1.0000,1.0000,0.0000,0.0000,0.0000,0.0000,0.0000,1.0000$background=4,5,6$color=1,2,3';
let parserLegacy = OV.CreateUrlParser (urlParamsLegacy);
assert.deepStrictEqual (parserLegacy.GetModelUrls (), modelUrls);
assert.deepStrictEqual (parserLegacy.GetCamera (), null);
@ -51,5 +56,10 @@ describe ('Parameter List', function () {
assert.deepStrictEqual (parser4.GetModelUrls (), modelUrls);
assert.deepStrictEqual (parser4.GetCamera (), camera);
assert.deepStrictEqual (parser4.GetColor (), color);
let parser5 = OV.CreateUrlParser (urlParams5);
assert.deepStrictEqual (parser5.GetModelUrls (), modelUrls);
assert.deepStrictEqual (parser5.GetCamera (), camera);
assert.deepStrictEqual (parser5.GetColor (), color);
assert.deepStrictEqual (parser5.GetBackground (), background);
});
});

4
website/o3dv/embed.js
View File

@ -20,6 +20,10 @@ OV.Embed = class
if (urls === null) {
return;
}
let background = this.hashHandler.GetBackgroundFromHash ();
if (background !== null) {
this.viewer.SetBackgroundColor (background);
}
let settings = new OV.ImportSettings ();
let color = this.hashHandler.GetColorFromHash ();
if (color !== null) {

6
website/o3dv/hashhandler.js
View File

@ -46,6 +46,12 @@ OV.HashHandler = class
return parser.GetCamera ();
}
GetBackgroundFromHash ()
{
let parser = OV.CreateUrlParser (this.GetHash ());
return parser.GetBackground ();
}
GetColorFromHash ()
{
let parser = OV.CreateUrlParser (this.GetHash ());

12
website/o3dv/settingsdialog.js
View File

@ -1,4 +1,4 @@
OV.ShowSettingsDialog = function (importSettings, onOk)
OV.ShowSettingsDialog = function (viewerSettings, importSettings, onOk)
{
function AddColorRow (contentDiv, defaultColor, paramName, paramDesc)
{
@ -12,6 +12,7 @@ OV.ShowSettingsDialog = function (importSettings, onOk)
}
let dialogSettings = {
backgroundColor: viewerSettings.backgroundColor,
defaultColor : importSettings.defaultColor
};
let dialog = new OV.ButtonDialog ();
@ -32,11 +33,18 @@ OV.ShowSettingsDialog = function (importSettings, onOk)
}
]);
let colorInput = AddColorRow (contentDiv, dialogSettings.defaultColor, 'Default Color', '(For surfaces with no material)');
let backgroundColorInput = AddColorRow (contentDiv, dialogSettings.backgroundColor, 'Background Color', '(Visualization only)');
backgroundColorInput.change (function () {
let colorStr = backgroundColorInput.val ().substr (1);
dialogSettings.backgroundColor = OV.HexStringToColor (colorStr);
});
let colorInput = AddColorRow (contentDiv, dialogSettings.defaultColor, 'Default Color', '(When no material defined)');
colorInput.change (function () {
let colorStr = colorInput.val ().substr (1);
dialogSettings.defaultColor = OV.HexStringToColor (colorStr);
});
dialog.Show ();
return dialog;
};

18
website/o3dv/sharingdialog.js
View File

@ -1,5 +1,4 @@
OV.ShowSharingDialog = function (importer, importSettings, camera)
OV.ShowSharingDialog = function (importer, viewerSettings, importSettings, camera)
{
function AddCheckboxLine (parentDiv, text, id, onChange)
{
@ -25,6 +24,7 @@ OV.ShowSharingDialog = function (importer, importSettings, camera)
let builder = OV.CreateUrlBuilder ();
builder.AddModelUrls (params.files);
builder.AddCamera (params.camera);
builder.AddBackground (params.background);
builder.AddColor (params.color);
let hashParameters = builder.GetParameterList ();
@ -58,7 +58,7 @@ OV.ShowSharingDialog = function (importer, importSettings, camera)
return input;
}
function AddSharingLinkTab (parentDiv, sharingLinkParams)
function AddSharingLinkTab (parentDiv, importSettings, sharingLinkParams)
{
let section = $('<div>').addClass ('ov_dialog_section').appendTo (parentDiv);
$('<div>').html ('Sharing Link').addClass ('ov_dialog_inner_title').appendTo (section);
@ -79,7 +79,7 @@ OV.ShowSharingDialog = function (importer, importSettings, camera)
sharingLinkInput.val (GetSharingLink (sharingLinkParams));
}
function AddEmbeddingCodeTab (parentDiv, embeddingCodeParams)
function AddEmbeddingCodeTab (parentDiv, viewerSettings, importSettings, embeddingCodeParams)
{
let section = $('<div>').addClass ('ov_dialog_section').css ('margin-top', '20px').appendTo (parentDiv);
$('<div>').html ('Embedding Code').addClass ('ov_dialog_inner_title').appendTo (section);
@ -92,10 +92,15 @@ OV.ShowSharingDialog = function (importer, importSettings, camera)
embeddingCodeInput.val (GetEmbeddingCode (embeddingCodeParams));
});
if (OV.FeatureSet.SettingsAvailable) {
AddCheckboxLine (optionsSection, 'Use overridden background color', 'embed_background', function (checked) {
embeddingCodeParams.background = checked ? viewerSettings.backgroundColor : null;
embeddingCodeInput.val (GetEmbeddingCode (embeddingCodeParams));
});
AddCheckboxLine (optionsSection, 'Use overridden default color', 'embed_color', function (checked) {
embeddingCodeParams.color = checked ? importSettings.defaultColor : null;
embeddingCodeInput.val (GetEmbeddingCode (embeddingCodeParams));
});
embeddingCodeParams.background = viewerSettings.backgroundColor;
embeddingCodeParams.color = importSettings.defaultColor;
}
embeddingCodeInput.val (GetEmbeddingCode (embeddingCodeParams));
@ -124,6 +129,7 @@ OV.ShowSharingDialog = function (importer, importSettings, camera)
let embeddingCodeParams = {
files : modelFiles,
camera : camera,
background : null,
color : null
};
@ -137,8 +143,8 @@ OV.ShowSharingDialog = function (importer, importSettings, camera)
}
]);
AddSharingLinkTab (contentDiv, sharingLinkParams);
AddEmbeddingCodeTab (contentDiv, embeddingCodeParams);
AddSharingLinkTab (contentDiv, importSettings, sharingLinkParams);
AddEmbeddingCodeTab (contentDiv, viewerSettings, importSettings, embeddingCodeParams);
dialog.Show ();
return dialog;

2
website/o3dv/website.css
View File

@ -562,7 +562,7 @@ div.ov_dialog div.ov_dialog_table_row
div.ov_dialog div.ov_dialog_table_row_name
{
width: 120px;
width: 140px;
float: left;
}

34
website/o3dv/website.js
View File

@ -9,6 +9,7 @@ OV.Website = class
this.toolbar = new OV.Toolbar (this.parameters.toolbarDiv);
this.sidebar = new OV.Sidebar (this.parameters.sidebarDiv);
this.navigator = new OV.Navigator (this.parameters.navigatorDiv, this.sidebar);
this.viewerSettings = new OV.ViewerSettings ();
this.importSettings = new OV.ImportSettings ();
this.modelLoader = new OV.ThreeModelLoader ();
this.highlightMaterial = new THREE.MeshPhongMaterial ({
@ -21,12 +22,8 @@ OV.Website = class
Load ()
{
let canvas = $('<canvas>').appendTo (this.parameters.viewerDiv);
this.viewer.Init (canvas.get (0));
this.ShowViewer (false);
this.hashHandler.SetEventListener (this.OnHashChange.bind (this));
this.InitSettings ();
this.InitViewer ();
this.InitToolbar ();
this.InitDragAndDrop ();
this.InitModelLoader ();
@ -37,6 +34,7 @@ OV.Website = class
this.viewer.SetClickHandler (this.OnModelClicked.bind (this));
this.Resize ();
this.hashHandler.SetEventListener (this.OnHashChange.bind (this));
this.OnHashChange ();
let obj = this;
@ -210,13 +208,13 @@ OV.Website = class
if (urls === null) {
return;
}
let settings = new OV.ImportSettings ();
settings.defaultColor = this.importSettings.defaultColor;
let importSettings = new OV.ImportSettings ();
importSettings.defaultColor = this.importSettings.defaultColor;
let color = this.hashHandler.GetColorFromHash ();
if (color !== null) {
settings.defaultColor = color;
importSettings.defaultColor = color;
}
this.LoadModelFromUrlList (urls, settings);
this.LoadModelFromUrlList (urls, importSettings);
} else {
this.ClearModel ();
this.parameters.introDiv.show ();
@ -225,9 +223,18 @@ OV.Website = class
InitSettings ()
{
this.viewerSettings.backgroundColor = this.cookieHandler.GetColorVal ('ov_background_color', new OV.Color (255, 255, 255));
this.importSettings.defaultColor = this.cookieHandler.GetColorVal ('ov_default_color', new OV.Color (200, 200, 200));
}
InitViewer ()
{
let canvas = $('<canvas>').appendTo (this.parameters.viewerDiv);
this.viewer.Init (canvas.get (0));
this.viewer.SetBackgroundColor (this.viewerSettings.backgroundColor);
this.ShowViewer (false);
}
InitToolbar ()
{
function AddButton (toolbar, imageName, imageTitle, onlyFullWidth, onClick)
@ -319,15 +326,20 @@ OV.Website = class
exportDialog.Show (obj.model, obj.viewer);
});
AddButton (this.toolbar, 'share', 'Share model', true, function () {
obj.dialog = OV.ShowSharingDialog (importer, obj.importSettings, obj.viewer.GetCamera ());
obj.dialog = OV.ShowSharingDialog (importer, obj.viewerSettings, obj.importSettings, obj.viewer.GetCamera ());
});
if (OV.FeatureSet.SettingsAvailable) {
AddSeparator (this.toolbar, true);
AddButton (this.toolbar, 'settings', 'Settings', true, function () {
obj.dialog = OV.ShowSettingsDialog (obj.importSettings, function (dialogSettings) {
obj.dialog = OV.ShowSettingsDialog (obj.viewerSettings, obj.importSettings, function (dialogSettings) {
obj.viewerSettings.backgroundColor = dialogSettings.backgroundColor;
obj.viewer.SetBackgroundColor (obj.viewerSettings.backgroundColor);
obj.cookieHandler.SetColorVal ('ov_background_color', obj.viewerSettings.backgroundColor);
let reload = !OV.ColorIsEqual (obj.importSettings.defaultColor, dialogSettings.defaultColor);
obj.importSettings.defaultColor = dialogSettings.defaultColor;
obj.cookieHandler.SetColorVal ('ov_default_color', obj.importSettings.defaultColor);
if (reload) {
obj.ReloadFiles ();
}