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

Copy sharing url.

Browse Source
This commit is contained in:
Viktor Kovacs 2021-04-14 19:51:20 +02:00
parent e9305ba33c
commit a99730a95f
6 changed files with 140 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
website/assets/images/toolbar/embed.svg → website/assets/images/toolbar/share.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 304 B

After

Width:  |  Height:  |  Size: 304 B

6
website/info/index.html
View File

@ -173,7 +173,7 @@
<h2 id="embedding_viewer">Embedding the viewer</h2>
<p>
The website allows you to embed a 3D model in your page. It works only if your models are <a href="#loading_models_server">hosted on a web server</a>.
To get the embedding code, click on the embedding button (<img class="inline" src="../assets/images/toolbar/embed.svg"/>) in the toolbar.
To get the embedding code, click on the share model button (<img class="inline" src="../assets/images/toolbar/share.svg"/>) in the toolbar.
</p>
<h3 id="embed_github">Embedding models hosted on GitHub</h3>
@ -191,7 +191,7 @@
https://github.com/kovacsv/Online3DViewer/blob/master/test/testfiles/3ds/texture.png
</div>
</li>
<li>Click on OK, and if the model is loaded, click on the embed button in the toolbar (<img class="inline" src="../assets/images/toolbar/embed.svg"/>).</li>
<li>Click on OK, and if the model is loaded, click on the share button in the toolbar (<img class="inline" src="../assets/images/toolbar/share.svg"/>).</li>
</ol>
</p>
@ -210,7 +210,7 @@
https://www.dropbox.com/s/6dfk1jveevbofxm/texture.png?dl=0
</div>
</li>
<li>Click on OK, and if the model is loaded, click on the embed button in the toolbar (<img class="inline" src="../assets/images/toolbar/embed.svg"/>).</li>
<li>Click on OK, and if the model is loaded, click on the share button in the toolbar (<img class="inline" src="../assets/images/toolbar/share.svg"/>).</li>
</ol>
</p>

129
website/o3dv/dialogs.js
View File

@ -77,18 +77,27 @@ OV.ShowOpenUrlDialog = function (onOk)
return dialog;
};
OV.ShowEmbeddingDialog = function (importer, importSettings, camera)
OV.ShowSharingDialog = function (importer, importSettings, camera)
{
function AddCheckboxLine (parentDiv, text, onChange)
function AddCheckboxLine (parentDiv, text, id, 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);
let check = $('<input>').attr ('type', 'checkbox').attr ('checked', 'true').addClass ('ov_dialog_checkradio').attr ('id', id).appendTo (line);
$('<label>').attr ('for', id).html (text).appendTo (line);
check.change (function () {
onChange (check.prop ('checked'));
});
}
function GetSharingLink (params)
{
let builder = OV.CreateUrlBuilder ();
builder.AddModelUrls (params.files);
builder.AddColor (params.color);
let hashParameters = builder.GetParameterList ();
return 'https://3dviewer.net#' + hashParameters;
}
function GetEmbeddingCode (params)
{
let builder = OV.CreateUrlBuilder ();
@ -106,6 +115,70 @@ OV.ShowEmbeddingDialog = function (importer, importSettings, camera)
return embeddingCode;
}
function AddCopyableTextInput (parentDiv, getText)
{
let copyText = 'copy';
let copiedText = 'copied';
let container = $('<div>').addClass ('ov_dialog_copyable_input').appendTo (parentDiv);
let input = $('<input>').prop ('readonly', true).appendTo (container);
let button = $('<div>').addClass ('button').html (copyText).appendTo (container);
button.click (function () {
OV.CopyToClipboard (getText ());
button.fadeOut (200, function () {
button.html (copiedText).fadeIn (200);
setTimeout (function () {
button.fadeOut (200, function () {
button.html (copyText).fadeIn (200);
});
}, 2000);
});
});
return input;
}
function AddSharingLinkTab (parentDiv, sharingLinkParams)
{
let section = $('<div>').addClass ('ov_dialog_section').appendTo (parentDiv);
$('<div>').html ('Sharing Link').addClass ('ov_dialog_inner_title').appendTo (section);
let optionsSection = null;
if (OV.FeatureSet.SetDefaultColor) {
optionsSection = $('<div>').addClass ('ov_dialog_section').appendTo (section);
}
let sharingLinkInput = AddCopyableTextInput (section, function () {
return GetSharingLink (sharingLinkParams);
});
if (OV.FeatureSet.SetDefaultColor) {
AddCheckboxLine (optionsSection, 'Use overridden default color', 'share_color', function (checked) {
sharingLinkParams.color = checked ? importSettings.defaultColor : null;
sharingLinkInput.val (GetSharingLink (sharingLinkParams));
});
sharingLinkParams.color = importSettings.defaultColor;
}
sharingLinkInput.val (GetSharingLink (sharingLinkParams));
}
function AddEmbeddingCodeTab (parentDiv, 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);
let optionsSection = $('<div>').addClass ('ov_dialog_section').appendTo (section);
let embeddingCodeInput = AddCopyableTextInput (section, function () {
return GetEmbeddingCode (embeddingCodeParams);
});
AddCheckboxLine (optionsSection, 'Use current camera position', 'embed_camera', function (checked) {
embeddingCodeParams.camera = checked ? camera : null;
embeddingCodeInput.val (GetEmbeddingCode (embeddingCodeParams));
});
if (OV.FeatureSet.SetDefaultColor) {
AddCheckboxLine (optionsSection, 'Use overridden default color', 'embed_color', function (checked) {
embeddingCodeParams.color = checked ? importSettings.defaultColor : null;
embeddingCodeInput.val (GetEmbeddingCode (embeddingCodeParams));
});
embeddingCodeParams.color = importSettings.defaultColor;
}
embeddingCodeInput.val (GetEmbeddingCode (embeddingCodeParams));
}
if (!importer.IsOnlyFileSource (OV.FileSource.Url)) {
return OV.ShowMessageDialog (
'Embedding Failed',
@ -121,15 +194,19 @@ OV.ShowEmbeddingDialog = function (importer, importSettings, camera)
modelFiles.push (file.fileUrl);
}
let embeddingParams = {
let sharingLinkParams = {
files : modelFiles,
color : null
};
let embeddingCodeParams = {
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', [
let contentDiv = dialog.Init ('Share', [
{
name : 'Close',
onClick () {
@ -138,41 +215,8 @@ OV.ShowEmbeddingDialog = function (importer, importSettings, camera)
}
]);
let text = 'Embedding options:';
$('<div>').html (text).addClass ('ov_dialog_section').appendTo (contentDiv);
let optionsSection = $('<div>').addClass ('ov_dialog_section').appendTo (contentDiv);
AddCheckboxLine (optionsSection, 'Use current camera position', function (checked) {
embeddingParams.camera = checked ? camera : null;
urlsTextArea.val (GetEmbeddingCode (embeddingParams));
});
if (OV.FeatureSet.SetDefaultColor) {
AddCheckboxLine (optionsSection, 'Use overridden default color', function (checked) {
embeddingParams.color = checked ? importSettings.defaultColor : null;
urlsTextArea.val (GetEmbeddingCode (embeddingParams));
});
embeddingParams.color = importSettings.defaultColor;
}
urlsTextArea.val (GetEmbeddingCode (embeddingParams));
urlsTextArea.appendTo (contentDiv);
let copyToClipboardText = 'copy to clipboard';
let copiedToClipboardText = 'successfully copied';
let innerButtonContainer = $('<div>').addClass ('ov_dialog_inner_buttons').appendTo (contentDiv);
let copyButton = $('<div>').addClass ('ov_dialog_inner_button').html (copyToClipboardText).appendTo (innerButtonContainer);
copyButton.click (function () {
OV.CopyToClipboard (urlsTextArea.val ());
copyButton.fadeOut (200, function () {
copyButton.html (copiedToClipboardText).fadeIn (200);
setTimeout (function () {
copyButton.fadeOut (200, function () {
copyButton.html (copyToClipboardText).fadeIn (200);
});
}, 2000);
});
});
AddSharingLinkTab (contentDiv, sharingLinkParams);
AddEmbeddingCodeTab (contentDiv, embeddingCodeParams);
dialog.Show ();
return dialog;
@ -205,6 +249,7 @@ OV.ShowSettingsDialog = function (importSettings, onOk)
$('<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);
$('<span>').addClass ('ov_dialog_table_row_comment').html ('(For surfaces with no material)').appendTo (valueColumn);
colorInput.val ('#' + OV.ColorToHexString (dialogSettings.defaultColor));
colorInput.change (function () {
let colorStr = colorInput.val ().substr (1);

2
website/o3dv/exportdialog.js
View File

@ -132,7 +132,7 @@ OV.ExportDialog = class
for (let i = 0; i < exportFormat.formats.length; i++) {
let format = exportFormat.formats[i];
let formatDiv = $('<div>').addClass ('ov_dialog_table_row').appendTo (this.formatParameters.formatSettingsDiv);
let formatInput = $('<input>').addClass ('ov_dialog_table_radio').attr ('type', 'radio').attr ('id', format.name).attr ('name', 'format').appendTo (formatDiv);
let formatInput = $('<input>').addClass ('ov_dialog_checkradio').attr ('type', 'radio').attr ('id', format.name).attr ('name', 'format').appendTo (formatDiv);
$('<label>').attr ('for', format.name).html (format.name).appendTo (formatDiv);
if (i === 0) {
formatInput.prop ('checked', true);

48
website/o3dv/website.css
View File

@ -385,6 +385,12 @@ div.ov_dialog div.ov_dialog_title
font-weight: bold;
}
div.ov_dialog div.ov_dialog_inner_title
{
font-weight: bold;
margin-bottom: 10px;
}
div.ov_dialog div.ov_dialog_content
{
padding: 20px 0px;
@ -477,6 +483,7 @@ div.ov_dialog input.ov_dialog_color
{
width: 36px;
height: 18px;
margin-right: 10px;
}
div.ov_dialog div.ov_dialog_file_list
@ -506,6 +513,39 @@ div.ov_dialog div.ov_dialog_file_link_text
float: left;
}
div.ov_dialog div.ov_dialog_copyable_input
{
padding: 3px;
border: 1px solid #dddddd;
border-radius: 5px;
overflow: auto;
}
div.ov_dialog div.ov_dialog_copyable_input input
{
color: #666666;
width: 70%;
margin-top: 6px;
box-sizing: border-box;
outline: none;
float: left;
border: 0px;
box-sizing: border-box;
}
div.ov_dialog div.ov_dialog_copyable_input div.button
{
color: #3393bd;
width: 28%;
text-align: center;
padding: 3px;
border: 1px solid #3393bd;
border-radius: 5px;
box-sizing: border-box;
cursor: pointer;
float: right;
}
div.ov_dialog div.ov_dialog_inner_buttons
{
margin-bottom: 10px;
@ -536,7 +576,13 @@ div.ov_dialog div.ov_dialog_table_row_value
float: left;
}
div.ov_dialog input.ov_dialog_table_radio
div.ov_dialog span.ov_dialog_table_row_comment
{
color: #444444;
font-size: 15px;
}
div.ov_dialog input.ov_dialog_checkradio
{
margin-right: 10px;
}

4
website/o3dv/website.js
View File

@ -287,8 +287,8 @@ OV.Website = class
});
exportDialog.Show (obj.model, obj.viewer);
});
AddButton (this.toolbar, 'embed', 'Get embedding code', true, function () {
obj.dialog = OV.ShowEmbeddingDialog (importer, obj.importSettings, obj.viewer.GetCamera ());
AddButton (this.toolbar, 'share', 'Share model', true, function () {
obj.dialog = OV.ShowSharingDialog (importer, obj.importSettings, obj.viewer.GetCamera ());
});
if (OV.FeatureSet.SetDefaultColor) {
AddSeparator (this.toolbar, true);