// Global variables to ease access
let viewer2d = null;
let gui = null;
const modelId = "my-model-id";
// Enum of ids for HTML elements referenced in this file
const ElementId = {
CONSOLE_COPY: "console-copy",
CONSOLE_TEXT: "console-text",
ERROR: "error",
GUI: "gui",
LOADING_ICON: "loading-icon",
PLAY_BUTTON: "play-button",
PLAY_ICON: "play-icon",
SPLASH: "splash",
TOOLTIP: "tooltip",
VIEWER_2D: "viewer-2d"
};
// Enum of style values used in this file
const Style = {
FLEX: "flex",
NONE: "none"
};
// Reset tooltip text
const consoleCopy = document.getElementById(ElementId.CONSOLE_COPY);
const onCopyLeave = function () {
document.getElementById(ElementId.TOOLTIP).innerHTML = "Copy";
};
consoleCopy.addEventListener("mouseleave", onCopyLeave);
consoleCopy.addEventListener("touchend", onCopyLeave);
/**
* Catenda 2D viewer Image Example.
* The runExample function contains the 2D viewer related calls to fulfill the example shown.
*/
// The code specific to the example
const runExample = function () {
// gui labels
const ADD_IMAGE = "Add an Image";
const CLEAR_IMAGES = "Remove all Images";
const HIDE_IMAGE = "Hide an Image";
const REMOVE_IMAGE = "Remove an Image";
const SHOW_IMAGE = "Show an Image";
// Predefined images to add
const images = [
{
height: 10,
id: "image-id-1",
url: `https://placehold.co/400/green/white?text=image-id-1`,
width: 10,
x: -10,
y: 0
},
{
height: 10,
id: "image-id-2",
url: "https://placehold.co/400/orange/white?text=image-id-2",
width: 10,
x: -20,
y: 0
},
{
height: 10,
id: "image-id-3",
url: "https://placehold.co/800x400/blue/white?text=image-id-3",
width: 10,
x: -30,
y: 0
},
{
height: 10,
id: "image-id-4",
url: "https://placehold.co/400/red/white?text=image-id-4",
width: 10,
x: -40,
y: 0
},
{
height: 10,
id: "image-id-5",
url: "https://placehold.co/400/purple/white?text=image-id-5",
width: 10,
x: -50,
y: 0
}
];
// Keep track of last added image
let imagesIndex = -1;
// Keep track of which images are hidden
let isImageHidden = [];
/**
* Begin by displaying a storey
*/
const storeys = viewer2d.getStoreys();
if (storeys.length > 0) {
viewer2d.showStorey(storeys[1].id);
}
viewer2d.setViewport("fit", { expandInPercentage: 15 });
/**
* Map on screen buttons to viewer behaviour
*/
const onAddImageClick = function () {
viewer2d.addImage(images[++imagesIndex]);
if (imagesIndex === images.length - 1) {
disableGuiProperty(ADD_IMAGE);
}
disableGuiProperty(SHOW_IMAGE);
enableGuiProperty(CLEAR_IMAGES);
enableGuiProperty(HIDE_IMAGE);
enableGuiProperty(REMOVE_IMAGE);
isImageHidden.push(false);
};
const onClearImagesClick = function () {
viewer2d.clearImages();
disableGuiProperty(CLEAR_IMAGES);
disableGuiProperty(HIDE_IMAGE);
disableGuiProperty(REMOVE_IMAGE);
imagesIndex = -1;
isImageHidden = [];
};
const onHideImageClick = function () {
viewer2d.hideImage(images[imagesIndex].id);
disableGuiProperty(HIDE_IMAGE);
enableGuiProperty(SHOW_IMAGE);
isImageHidden[imagesIndex] = true;
};
const onRemoveImageClick = function () {
viewer2d.removeImage(images[imagesIndex--].id);
if (imagesIndex < 0) {
disableGuiProperty(CLEAR_IMAGES);
disableGuiProperty(HIDE_IMAGE);
disableGuiProperty(REMOVE_IMAGE);
disableGuiProperty(SHOW_IMAGE);
} else {
if (isImageHidden[imagesIndex]) {
disableGuiProperty(HIDE_IMAGE);
enableGuiProperty(SHOW_IMAGE);
} else {
disableGuiProperty(SHOW_IMAGE);
enableGuiProperty(HIDE_IMAGE);
}
}
enableGuiProperty(ADD_IMAGE);
isImageHidden.pop();
};
const onShowImageClick = function () {
viewer2d.showImage(images[imagesIndex].id);
disableGuiProperty(SHOW_IMAGE);
enableGuiProperty(HIDE_IMAGE);
isImageHidden[imagesIndex] = false;
};
/**
* Map of gui items to data and callbacks
*/
const state = {
[ADD_IMAGE]: onAddImageClick,
[CLEAR_IMAGES]: onClearImagesClick,
[HIDE_IMAGE]: onHideImageClick,
[REMOVE_IMAGE]: onRemoveImageClick,
[SHOW_IMAGE]: onShowImageClick
};
/**
* Build gui panel
*/
gui.add(state, ADD_IMAGE);
gui.add(state, REMOVE_IMAGE).disable();
gui.add(state, HIDE_IMAGE).disable();
gui.add(state, SHOW_IMAGE).disable();
gui.add(state, CLEAR_IMAGES).disable();
/**
* Listen to viewer events
*/
const onClick = function (event) {
event.preventDefault();
};
viewer2d.addEventListener("viewer2d.click", onClick);
};
/**
* Code required for bootstrapping a 2D viewer instance with which to execute the example
*/
// Bootstrap a 2D viewer instance and load a model
const initialize = async function (onViewerReady) {
// Show the loading indicator until the 2D viewer is ready
showLoadingIndicator();
// Hide any previous error message
hideElement(ElementId.ERROR);
// Create a gui instance for 2D viewer controls
gui = new lil.GUI({
container: document.getElementById("gui")
});
gui.title("Options");
// HTML Div element where the 2D viewer is mounted
const div2d = document.getElementById(ElementId.VIEWER_2D);
// Options used when creating a 2D viewer instance
const viewerOptions = {
hoverSpaces: false,
selectColor: "#ade0bc",
showViewpoint: false
};
// Create a 2D viewer instance
viewer2d = new bimsync.viewer2d.Viewer2D(div2d, viewerOptions);
// Options used when loading the model
const loadModelOptions = {
modelId: modelId,
modelName: "My Model Name"
};
// Fetch a 2D viewer token for the model to load
const url2d = await getToken();
// Load the model
viewer2d
.loadUrl(url2d, loadModelOptions)
.then(function () {
// 2D viewer is ready, stop loading
showPlayButton();
// Hide the splash screen
hideElement(ElementId.SPLASH);
// Show the 2D viewer controls
showElement(ElementId.GUI);
// 2D viewer is ready, run the callback
onViewerReady();
})
.catch(function (error) {
showError();
});
};
// Entry point called when user clicks the play button
const start = function () {
// Bootstrap a 2D viewer instance then run the example
initialize(runExample);
};
/**
* Utility functions used in this file
*/
// Set console text in clipboard
const copyConsole = async function () {
await navigator.clipboard.writeText(
document.getElementById(ElementId.CONSOLE_TEXT).innerHTML
);
document.getElementById(ElementId.TOOLTIP).innerHTML = "Copied!";
};
// Disable a property in the gui panel
const disableGuiProperty = function (propertyName) {
gui
.controllersRecursive()
.find(({ property }) => property === propertyName)
.disable();
};
// Enable a property in the gui panel
const enableGuiProperty = function (propertyName) {
gui
.controllersRecursive()
.find(({ property }) => property === propertyName)
.enable();
};
// Retrieve a 2D viewer token
const getToken = async function () {
/**
* Fetch a 2D viewer token from the Catenda API
* Here we are using a CodePen specific endpoint for demo purposes
* Replace this with your own token endpoint in a real application
* Find out more at https://developers.catenda.com/viewer-2d/create-2d-viewer-token
* The model this token provides access to is licensed under the Creative Commons Attribution 4.0 International License.
* (C) original authors
* https://github.com/buildingSMART/Sample-Test-Files
* More info and a link to the full license text is available on http://creativecommons.org/licenses/by/4.0/
*/
const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
const tryCount = 4;
let response, result;
// Try to fetch the token a few times before giving up
for (let i = 1; i <= tryCount; i++) {
response = await fetch(
"https://documentation-edge.developers.catenda.com/token2d"
);
if (response.ok) {
break;
} else {
// If the response is not ok, we wait a bit before trying again
if (i < tryCount) {
await delay(i * 1000);
}
continue;
}
}
// If the response is ok, we can proceed
if (response && response.ok) {
const data = await response.json();
result = data.url;
} else {
showError();
}
return result;
};
// Hide an HTML element passing its id
const hideElement = function (elementId) {
document.getElementById(elementId).style.display = Style.NONE;
};
// Set the text displayed in the output panel
const setOutput = function (value) {
const text = value instanceof Object ? JSON.stringify(value) : value;
document.getElementById(ElementId.CONSOLE_TEXT).innerHTML = text;
};
// Show an HTML element passing its id
const showElement = function (elementId) {
document.getElementById(elementId).style.display = Style.FLEX;
};
// Reset after an error
const showError = function () {
viewer2d.dispose();
gui.destroy();
showPlayButton();
showElement(ElementId.ERROR);
};
// Display the loading indicator
const showLoadingIndicator = function () {
const playButton = document.getElementById(ElementId.PLAY_BUTTON);
playButton.disabled = true;
const playIconElement = document.getElementById(ElementId.PLAY_ICON);
let loadingIcon = document.createElement("i");
loadingIcon.id = ElementId.LOADING_ICON;
loadingIcon.classList.add("fa", "fa-spinner", "fa-spin");
playIconElement.replaceWith(loadingIcon);
};
// Display the play button
const showPlayButton = function () {
const playButton = document.getElementById(ElementId.PLAY_BUTTON);
playButton.disabled = false;
const loadingIconElement = document.getElementById(ElementId.LOADING_ICON);
let playIcon = document.createElement("i");
playIcon.id = ElementId.PLAY_ICON;
playIcon.classList.add("fa", "fa-play");
loadingIconElement.replaceWith(playIcon);
};
// Update a value used in the gui panel to reflect a change
const updateGuiPropertyValue = function (propertyName, value) {
gui
.controllersRecursive()
.find(({ property }) => property === propertyName)
.setValue(value);
};
