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

Default color handling (switched off).

Browse Source
This commit is contained in:
Viktor Kovacs 2021-04-05 12:22:59 +02:00
parent ca4e0ef1d4
commit 8a29a6c682
11 changed files with 183 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
source/external/three.model.loader.js vendored
View File

@ -12,16 +12,6 @@ OV.ThreeModelLoader = class
this.callbacks = callbacks;
}
GetDefaultColor ()
{
return this.importer.GetDefaultColor ();
}
SetDefaultColor (defaultColor)
{
this.importer.SetDefaultColor (defaultColor);
}
LoadFromUrlList (urls)
{
if (this.inProgress) {

51
source/model/modelentities.js
View File

@ -25,23 +25,6 @@ OV.Color = class
this.b = b; // 0 .. 255
}
ToHexString ()
{
function IntegerToHex (intVal)
{
let result = parseInt (intVal, 10).toString (16);
while (result.length < 2) {
result = '0' + result;
}
return result;
}
let r = IntegerToHex (this.r);
let g = IntegerToHex (this.g);
let b = IntegerToHex (this.b);
return r + g + b;
}
Clone ()
{
return new OV.Color (this.r, this.g, this.b);
@ -253,3 +236,37 @@ OV.Triangle = class
return cloned;
}
};
OV.ColorToHexString = function (color)
{
function IntegerToHex (intVal)
{
let result = parseInt (intVal, 10).toString (16);
while (result.length < 2) {
result = '0' + result;
}
return result;
}
let r = IntegerToHex (color.r);
let g = IntegerToHex (color.g);
let b = IntegerToHex (color.b);
return r + g + b;
};
OV.HexStringToColor = function (hexString)
{
if (hexString.length !== 6) {
return null;
}
let r = parseInt (hexString.substr (0, 2), 16);
let g = parseInt (hexString.substr (2, 2), 16);
let b = parseInt (hexString.substr (4, 2), 16);
return new OV.Color (r, g, b);
};
OV.ColorIsEqual = function (a, b)
{
return a.r === b.r && a.g === b.g && a.b === b.b;
};

3
source/parameters/parameterlist.js
View File

@ -199,10 +199,9 @@ OV.CreateUrlParser = function (urlParams)
return new OV.ParameterListParser (urlParams, '$');
};
OV.CreateUrlParameters = function (urls, camera)
OV.CreateModelUrlParameters = function (urls)
{
let builder = OV.CreateUrlBuilder ();
builder.AddModelUrls (urls);
builder.AddCamera (camera);
return builder.GetParameterList ();
};

3
source/viewer/domviewer.js
View File

@ -70,7 +70,8 @@ OV.Init3DViewerElements = function ()
if (colorParams) {
let color = OV.ParameterConverter.StringToColor (colorParams);
if (color !== null) {
loader.SetDefaultColor (color);
let importer = loader.GetImporter ();
importer.SetDefaultColor (color);
}
}

16
test/tests/model_test.js
View File

@ -150,3 +150,19 @@ describe ('Model Finalization', function() {
assert.strictEqual (normal.z, 0.7071067811865475);
});
});
describe ('Color Conversion', function() {
it ('Color equality check', function () {
assert (OV.ColorIsEqual (new OV.Color (10, 20, 30), new OV.Color (10, 20, 30)));
assert (!OV.ColorIsEqual (new OV.Color (10, 20, 30), new OV.Color (11, 20, 30)));
assert (!OV.ColorIsEqual (new OV.Color (10, 20, 30), new OV.Color (10, 21, 30)));
assert (!OV.ColorIsEqual (new OV.Color (10, 20, 30), new OV.Color (10, 20, 31)));
});
it ('Color hex string conversion', function () {
let color = new OV.Color (10, 20, 30);
let hexString = '0a141e';
assert.strictEqual (OV.ColorToHexString (color), hexString);
assert.deepStrictEqual (OV.HexStringToColor (hexString), color);
});
});

88
website/o3dv/dialogs.js
View File

@ -1,3 +1,8 @@
OV.FeatureSet =
{
SetDefaultColor : false
};
OV.ProgressDialog = class
{
constructor ()
@ -287,13 +292,28 @@ OV.ShowExportDialog = function (model)
OV.ShowEmbeddingDialog = function (importer, camera)
{
function GetEmbeddingCode (files, camera, useCameraCheck)
function AddCheckboxLine (parentDiv, text, onChange)
{
let line = $('<div>').addClass ('ov_dialog_table_row').appendTo (parentDiv);
let check = $('<input>').attr ('type', 'checkbox').attr ('checked', 'true').appendTo (line);
$('<span>').html (text).appendTo (line);
check.change (function () {
onChange (check.prop ('checked'));
});
}
function GetEmbeddingCode (params)
{
let builder = OV.CreateUrlBuilder ();
builder.AddModelUrls (params.files);
builder.AddCamera (params.camera);
builder.AddColor (params.color);
let hashParameters = builder.GetParameterList ();
let embeddingCode = '';
embeddingCode += '<iframe';
embeddingCode += ' width="640" height="480"';
embeddingCode += ' style="border:1px solid #eeeeee;"';
let hashParameters = OV.CreateUrlParameters (files, useCameraCheck.get (0).checked ? camera : null);
embeddingCode += ' src="https://3dviewer.net/embed.html#' + hashParameters + '">';
embeddingCode += '</iframe>';
return embeddingCode;
@ -314,6 +334,12 @@ OV.ShowEmbeddingDialog = function (importer, camera)
modelFiles.push (file.fileUrl);
}
let embeddingParams = {
files : modelFiles,
camera : camera,
color : null
};
let dialog = new OV.ButtonDialog ();
let urlsTextArea = $('<textarea>').attr ('readonly', 'true').addClass ('ov_dialog_textarea');
let contentDiv = dialog.Init ('Embedding', [
@ -324,19 +350,25 @@ OV.ShowEmbeddingDialog = function (importer, camera)
}
}
]);
let text = 'Embedding options:';
$('<div>').html (text).addClass ('ov_dialog_section').appendTo (contentDiv);
let optionsSection = $('<div>').addClass ('ov_dialog_section').appendTo (contentDiv);
let useCameraLine = $('<div>').appendTo (optionsSection);
let useCamera = $('<input>').attr ('type', 'checkbox').attr ('checked', 'true').appendTo (useCameraLine);
$('<span>').html ('Use current camera position').appendTo (useCameraLine);
useCamera.change (function () {
let newEmbeddingCode = GetEmbeddingCode (modelFiles, camera, useCamera);
urlsTextArea.val (newEmbeddingCode);
AddCheckboxLine (optionsSection, 'Use current camera position', function (checked) {
embeddingParams.camera = checked ? camera : null;
urlsTextArea.val (GetEmbeddingCode (embeddingParams));
});
let embeddingCode = GetEmbeddingCode (modelFiles, camera, useCamera);
urlsTextArea.val (embeddingCode);
if (OV.FeatureSet.SetDefaultColor) {
AddCheckboxLine (optionsSection, 'Use overridden default color', function (checked) {
embeddingParams.color = checked ? importer.GetDefaultColor () : null;
urlsTextArea.val (GetEmbeddingCode (embeddingParams));
});
embeddingParams.color = importer.GetDefaultColor ();
}
urlsTextArea.val (GetEmbeddingCode (embeddingParams));
urlsTextArea.appendTo (contentDiv);
let copyToClipboardText = 'copy to clipboard';
@ -359,6 +391,42 @@ OV.ShowEmbeddingDialog = function (importer, camera)
return dialog;
};
OV.ShowSettingsDialog = function (importer, onOk)
{
let settings = {
defaultColor : importer.GetDefaultColor ()
};
let dialog = new OV.ButtonDialog ();
let contentDiv = dialog.Init ('Settings', [
{
name : 'Cancel',
subClass : 'outline',
onClick () {
dialog.Hide ();
}
},
{
name : 'OK',
onClick () {
dialog.Hide ();
onOk (settings);
}
}
]);
let colorRow = $('<div>').addClass ('ov_dialog_table_row').appendTo (contentDiv);
$('<div>').html ('Default Color').addClass ('ov_dialog_table_row_name').appendTo (colorRow);
let valueColumn = $('<div>').addClass ('ov_dialog_table_row_value').appendTo (colorRow);
let colorInput = $('<input>').attr ('type', 'color').addClass ('ov_dialog_color').appendTo (valueColumn);
colorInput.val ('#' + OV.ColorToHexString (settings.defaultColor));
colorInput.change (function () {
let colorStr = colorInput.val ().substr (1);
settings.defaultColor = OV.HexStringToColor (colorStr);
});
dialog.Show ();
return dialog;
};
OV.ShowListPopup = function (button, items, callbacks)
{
let popup = new OV.ListPopup ();

5
website/o3dv/embed.js
View File

@ -21,7 +21,7 @@ OV.Embed = class
return;
}
this.modelLoader.LoadFromUrlList (urls);
let hashParameters = OV.CreateUrlParameters (urls, null);
let hashParameters = OV.CreateModelUrlParameters (urls);
let websiteUrl = this.parameters.websiteLinkDiv.attr ('href') + '#' + hashParameters;
this.parameters.websiteLinkDiv.attr ('href', websiteUrl);
}
@ -74,7 +74,8 @@ OV.Embed = class
});
let color = this.hashHandler.GetColorFromHash ();
if (color !== null) {
this.modelLoader.SetDefaultColor (color);
let importer = this.modelLoader.GetImporter ();
importer.SetDefaultColor (color);
}
}
};

2
website/o3dv/hashhandler.js
View File

@ -36,7 +36,7 @@ OV.HashHandler = class
SetModelFilesToHash (files)
{
let params = OV.CreateUrlParameters (files, null);
let params = OV.CreateModelUrlParameters (files);
this.SetHash (params);
}

4
website/o3dv/info.js
View File

@ -51,7 +51,7 @@ OV.InfoPanel = class
let infoContainer = $('<div>').addClass ('ov_info_box').appendTo (contentDiv);
AddRow (infoContainer, 'Color', function (valueDiv) {
let colorString = '#' + info.diffuse.ToHexString ();
let colorString = '#' + OV.ColorToHexString (info.diffuse);
$('<div>').addClass ('ov_info_box_rgbbox').css ('background', colorString).attr ('title', colorString).appendTo (valueDiv);
$('<div>').addClass ('ov_info_box_rgbtext').html (colorString).attr ('title', colorString).appendTo (valueDiv);
});
@ -128,7 +128,7 @@ OV.InfoPanel = class
let materialInfo = getMaterialInfo (info.usedMaterials[i]);
materialItems.push ({
name : OV.GetMaterialName (materialInfo.name),
color : materialInfo.diffuse.ToHexString ()
color : OV.ColorToHexString (materialInfo.diffuse)
});
}

23
website/o3dv/website.css
View File

@ -468,6 +468,12 @@ div.ov_dialog select.ov_dialog_select
appearance: none;
}
div.ov_dialog input.ov_dialog_color
{
width: 36px;
height: 18px;
}
div.ov_dialog div.ov_dialog_file_list
{
max-height: 105px;
@ -508,6 +514,23 @@ div.ov_dialog div.ov_dialog_inner_button
cursor: pointer;
}
div.ov_dialog div.ov_dialog_table_row
{
padding: 2px 0px;
overflow: auto;
}
div.ov_dialog div.ov_dialog_table_row_name
{
width: 120px;
float: left;
}
div.ov_dialog div.ov_dialog_table_row_value
{
float: left;
}
div.ov_popup
{
background: #ffffff;

24
website/o3dv/website.js
View File

@ -169,6 +169,11 @@ OV.Website = class
this.ClearHashIfNotOnlyUrlList ();
}
ReloadFiles ()
{
this.modelLoader.ReloadFiles ();
}
ClearHashIfNotOnlyUrlList ()
{
let importer = this.modelLoader.GetImporter ();
@ -233,6 +238,8 @@ OV.Website = class
}
let obj = this;
let importer = this.modelLoader.GetImporter ();
AddButton (this.toolbar, 'open', 'Open model from your device', false, function () {
obj.OpenFileBrowserDialog ();
});
@ -269,8 +276,23 @@ OV.Website = class
obj.dialog = OV.ShowExportDialog (obj.model);
});
AddButton (this.toolbar, 'embed', 'Get embedding code', true, function () {
obj.dialog = OV.ShowEmbeddingDialog (obj.modelLoader.GetImporter (), obj.viewer.GetCamera ());
obj.dialog = OV.ShowEmbeddingDialog (importer, obj.viewer.GetCamera ());
});
if (OV.FeatureSet.SetDefaultColor) {
AddSeparator (this.toolbar, true);
AddButton (this.toolbar, 'export', 'Settings', true, function () {
obj.dialog = OV.ShowSettingsDialog (importer, function (settings) {
let reload = false;
if (!OV.ColorIsEqual (importer.GetDefaultColor (), settings.defaultColor)) {
importer.SetDefaultColor (settings.defaultColor);
reload = true;
}
if (reload) {
obj.ReloadFiles ();
}
});
});
}
this.parameters.fileInput.on ('change', function (ev) {
obj.LoadModelFromFileList (ev.target.files);