[Demo] added an end-user oriented demonstration of itowns capabilities

examples/config.json

@@ -1,4 +1,7 @@
 {
+    "Demo": {
+        "demo/index": "demonstration"
+    },
     "View": {
         "view_3d_map": "3D map",
         "view_25d_map": "2.5D map",

examples/demo/.babelrc

@@ -0,0 +1,21 @@
+{
+    "presets": [
+        ["@babel/preset-typescript"],
+        ["@babel/preset-env", {
+            "targets": {
+                "browsers": "defaults and supports webgl2"
+            },
+            "modules": false
+        }]
+    ],
+    "plugins": [
+        ["module-resolver", {
+            "cwd": "packagejson",
+            "root": ["./src"],
+            "extensions": [".js", ".ts", ".tsx"]
+        }],
+        ["module-extension-resolver", {
+            "srcExtensions": [".ts", ".js"]
+        }],
+    ]
+}

examples/demo/.eslintignore

@@ -0,0 +1,3 @@
+dist/
+node_modules/
+coverage/

examples/demo/.eslintrc.cjs

@@ -0,0 +1,11 @@
+
+module.exports = {
+    extends: [
+        '../../.eslintrc.cjs',
+    ],
+    rules: {
+        'import/extensions': 'off',
+        'no-constructor-return': 'off',
+        'no-return-assign': 'off',
+    },
+};

examples/demo/css/demo.css

@@ -0,0 +1,167 @@
+#demoUI {
+    position: fixed;
+    left: 50%;
+    transform: translateX(-50%);
+    bottom: 1vh;
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    width: min(80vw, 70vh); 
+    max-height: 40vh;
+    padding: 2vh 3vh;
+    border-radius: 3rem;
+    background-color: rgba(255, 255, 255, 0.75);
+    backdrop-filter: blur(0.5vh);
+    z-index: 100;
+}
+
+#textContainer {
+    position: static;
+
+    display: flex;
+    flex-direction: column;
+
+    color: black;
+    text-align: center;
+    font-family:'Courier New', Courier, monospace;
+}
+
+/*** Navigation Menu ***/
+#navigationContainer {
+    position: static;
+
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+
+    width: 100%;
+    gap: 2vh;
+    margin-top: 2vh;
+}
+
+button {
+    display: inline-block;
+
+    border: 1px solid black;
+    border-radius: 0.5rem;
+    padding: 0.5vh 2vh;
+
+    color: black;
+    text-align: center;
+    text-decoration: none;
+    font-size: min(1vh, 1.5vw);
+    font-family:'Courier New', Courier, monospace;
+
+    cursor: pointer;
+}
+
+button:hover {
+    background-color: #E5E5E5;
+    color: black;
+}
+
+button:active {
+    background-color: #7EA8C5;
+    color: white;
+}
+
+button.active {
+    background-color: #7EA8C5;
+    color: white;
+}
+
+#sceneDots {
+    display: flex;
+    flex-direction: row;
+    gap: min(1vh, 1.5vw);
+    align-items: center;
+}
+
+.scene-dot {
+    width: min(1.5vh, 2vw);
+    height: min(1.5vh, 2vw);
+    border-radius: 50%;
+    border: 1px solid #000;
+    background-color: #ffffff;
+    cursor: pointer;
+    transition: transform 0.15s ease, background-color 0.15s ease;
+}
+
+.scene-dot.active {
+    background-color: #7EA8C5;
+    transform: scale(1.4);
+}
+
+.scene-dot:hover {
+    background-color: #E5E5E5;
+}
+
+/*** Feature Picking Info ***/
+#feature-picking-info {
+    position: fixed;
+    top: 1vh;
+    right: 1vh;
+    padding: 1vh 1.5vh;
+    border-radius: 1vh;
+    overflow-y: auto;
+
+    font-family:'Courier New', Courier, monospace;
+    font-size: min(1.5vh, 2vw);
+    color: black;
+
+    width: 25vw;
+    max-height: 45vh;
+    background-color: rgba(255, 255, 255, 0.75);
+    backdrop-filter: blur(0.5vh);
+
+    z-index: 100;
+
+    pointer-events: auto;
+}
+
+/*** Point Cloud Config ***/
+#point-cloud-config {
+    position: fixed;
+    top: 1vh;
+    right: 1vh;
+    padding: 1vh 1.5vh;
+    border-radius: 1vh;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+
+    font-family:'Courier New', Courier, monospace;
+    font-size: min(1.5vh, 2vw);
+    color: black;
+
+    width: 25vw;
+    max-height: 45vh;
+    background-color: rgba(255, 255, 255, 0.75);
+    backdrop-filter: blur(0.5vh);
+
+    z-index: 100;
+}
+
+#point-cloud-buttons {
+    width: 100%;
+    display: flex;
+    justify-self: center;
+}
+
+#point-cloud-config button {
+    width: 50%;
+}
+
+#point-cloud-config button:first-child {
+    border-right: none;
+    border-radius: 0.5rem 0 0 0.5rem;
+}
+
+#point-cloud-config button:last-child {
+    border-left: none;
+    border-radius: 0 0.5rem 0.5rem 0;
+}

examples/demo/index.html

@@ -0,0 +1,162 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Itowns - Demonstration</title>
+
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+        <script type="importmap">
+            {
+                "imports": {
+                    "itowns": "../../dist/itowns.js",
+                    "three": "https://unpkg.com/[email protected]/build/three.module.js",
+                    "three/addons/": "https://unpkg.com/[email protected]/examples/jsm/",
+                    "OrbitControls": "https://unpkg.com/[email protected]/examples/jsm/controls/OrbitControls.js"
+                }
+            }
+        </script>
+
+        <link rel="stylesheet" type="text/css" href="../css/example.css" />
+        <link
+            rel="stylesheet"
+            type="text/css"
+            href="../css/LoadingScreen.css"
+        />
+        <link rel="stylesheet" type="text/css" href="../css/widgets.css" />
+        <link rel="stylesheet" type="text/css" href="css/demo.css" />
+    </head>
+    <body>
+        <div id="demoUI">
+            <div id="textContainer">
+                <h1 id="sceneTitle"></h1>
+                <p id="sceneDescription"></p>
+            </div>
+            <div id="navigationContainer">
+                <div id="sceneDots"></div>
+                <button id="resetScene">reset camera</button>
+                <button id="hardResetScene">reset scene</button>
+            </div>
+        </div>
+        <script type="module">
+            import * as THREE from "three";
+            import * as itowns from "itowns";
+
+            let SceneTransitionUtils, SceneRepository;
+
+            try {
+                // If webpack served, import from global build
+                const mod1 = await import("../../dist/demo.js");
+                SceneTransitionUtils = mod1.SceneTransitionUtils;
+                SceneRepository = mod1.SceneRepository;
+            } catch (e) {
+                // Otherwise, import from local build
+                const mod2 = await import("./dist/index.js");
+                SceneTransitionUtils = mod2.SceneTransitionUtils;
+                SceneRepository = mod2.SceneRepository;
+            }
+
+            const resetSceneButton = document.getElementById("resetScene");
+            const hardResetSceneButton = document.getElementById("hardResetScene");
+
+            SceneTransitionUtils.updateUIForScene(SceneRepository[0]);
+            SceneRepository[0].view.setVisible(true);
+            await SceneRepository[0].onCreate();
+            await SceneRepository[0].onEnter?.();
+            const view = SceneRepository[0].view.getView();
+            if (view instanceof itowns.GlobeView) {
+                view.skyManager.enabled = SceneRepository[0].atmosphere;
+            }
+            await SceneTransitionUtils.moveCameraTo(view, SceneRepository[0].placement, 0.1);
+
+            let currentIndex = 0;
+
+            const SceneManager = {
+                async goTo(index) {
+                    if (index === currentIndex || index < 0 || index >= SceneRepository.length) {
+                        return;
+                    }
+                    const from = SceneRepository[currentIndex];
+                    const to = SceneRepository[index];
+                    currentIndex = index;
+                    updateActiveDot();
+
+                    toggleEnableButtons(false);
+                    toggleEnableDots(false);
+                    try {
+                        await SceneTransitionUtils.transitionToScene(from, to);
+                    } finally {
+                        toggleEnableButtons(true);
+                        toggleEnableDots(true);
+                    }
+                },
+                async softReset() {
+                    toggleEnableButtons(false);
+                    toggleEnableDots(false);
+                    try {
+                        await SceneTransitionUtils.resetScene(SceneRepository[currentIndex]);
+                    } finally {
+                        toggleEnableButtons(true);
+                        toggleEnableDots(true);
+                    }
+                },
+                async hardReset() {
+                    toggleEnableButtons(false);
+                    toggleEnableDots(false);
+                    try {
+                        await SceneTransitionUtils.hardResetScene(SceneRepository[currentIndex]);
+                    } finally {
+                        toggleEnableButtons(true);
+                        toggleEnableDots(true);
+                    }
+                },
+            };
+
+            // ---- Build the dots UI ----
+            const dotsContainer = document.getElementById("sceneDots");
+
+            const dots = SceneRepository.map((scene, index) => {
+                const dot = document.createElement("div");
+                dot.classList.add("scene-dot");
+                dot.title = scene.title ?? `Scene ${index + 1}`;
+                dot.addEventListener("click", () => {
+                    SceneManager.goTo(index);
+                });
+                dotsContainer.appendChild(dot);
+                return dot;
+            });
+
+            function toggleEnableButtons(enable) {
+                resetSceneButton.style.pointerEvents = enable ? "auto" : "none";
+                hardResetSceneButton.style.pointerEvents = enable ? "auto" : "none";
+                resetSceneButton.disabled = !enable;
+                hardResetSceneButton.disabled = !enable;
+            }
+
+            function toggleEnableDots(enable) {
+                dots.forEach((dot) => {
+                    dot.style.pointerEvents = enable ? "auto" : "none";
+                    dot.style.opacity = enable ? "1.0" : "0.5";
+                });
+            }
+
+            function updateActiveDot() {
+                dots.forEach((dot, i) => {
+                    if (i === currentIndex) {
+                        dot.classList.add("active");
+                    } else {
+                        dot.classList.remove("active");
+                    }
+                });
+            }
+
+            updateActiveDot();
+            resetSceneButton.onclick = async () => {
+                await SceneManager.softReset();
+            };
+            hardResetSceneButton.onclick = async () => {
+                await SceneManager.hardReset();
+            };
+        </script>
+    </body>
+</html>