index.html

<html>
  <head>
    <title>ud-viz website</title>
    <link rel="stylesheet" href="./style.css" />
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  </head>
  <body>
    <script type="text/javascript">
      // Build html
      const section = document.createElement('section');
      document.body.appendChild(section);

      const panel = document.createElement('div');
      panel.setAttribute('id', 'panel');
      section.appendChild(panel);

      const header = document.createElement('div');
      header.setAttribute('id', 'header');
      panel.appendChild(header);

      const h1 = document.createElement('h1');
      header.appendChild(h1);

      const labelH1 = document.createElement('div');
      labelH1.innerText = 'ud-viz';
      h1.appendChild(labelH1);

      const versionLink = document.createElement('a');
      versionLink.setAttribute('id', 'version');
      versionLink.setAttribute('target', '_blank');
      versionLink.setAttribute(
        'href',
        'https://github.com/VCityTeam/UD-Viz/releases'
      );
      versionLink.innerText = 'UDVIZ_VERSION';
      h1.appendChild(versionLink);

      const contentWrapper = document.createElement('div');
      contentWrapper.setAttribute('id', 'contentWrapper');
      panel.appendChild(contentWrapper);

      const content = document.createElement('div');
      content.setAttribute('id', 'content');
      contentWrapper.appendChild(content);

      const addToContent = (title, list) => {
        const contentH2 = document.createElement('h2');
        contentH2.innerText = title;
        content.appendChild(contentH2);

        const contentUl = document.createElement('ul');
        content.appendChild(contentUl);

        list.forEach((l) => {
          const href = l.href;
          const label = l.label;
          const li = document.createElement('li');
          contentUl.appendChild(li);

          const link = document.createElement('a');
          link.setAttribute('href', href);
          link.innerText = label;
          li.appendChild(link);
        });
      };

      addToContent('Learn', [
        {
          href: 'https://github.com/VCityTeam/UD-Viz/blob/master/Doc/Devel/LocalGameTutorial.md',
          label: 'Game tutorial',
        },
      ]);

      addToContent('Community', [
        { href: 'https://projet.liris.cnrs.fr/vcity/', label: 'Website' },
        { href: '../docs/html/index.html', label: 'Documentation' },
      ]);

      addToContent('Code', [
        { href: 'https://github.com/VCityTeam/UD-Viz', label: 'Github' },
        { href: 'https://www.npmjs.com/package/ud-viz', label: 'Npm package' },
      ]);

      const viewer = document.createElement('div');
      viewer.setAttribute('id', 'viewer');
      section.appendChild(viewer);

      const createContainer = function (id) {
        const titleContainer = document.createElement('h1');
        titleContainer.classList.add('projects_section_title');
        titleContainer.innerText = id;
        viewer.appendChild(titleContainer);

        const container = document.createElement('div');
        container.setAttribute('id', id);
        container.classList.add('projects');
        viewer.appendChild(container);
      };

      createContainer('widget');
      createContainer('game');
      createContainer('itowns');
      createContainer('other');

      const addProjectElement = (name, idParent, href, title, srcImg) => {
        const newProject = document.createElement('a');
        newProject.href = href;
        newProject.title = title;
        newProject.target = '_blank';
        newProject.rel = 'noopener';
        document.getElementById(idParent).appendChild(newProject);

        const newProjectImg = document.createElement('img');
        newProjectImg.src = srcImg;
        newProjectImg.loading = 'lazy';
        newProject.appendChild(newProjectImg);

        const newProjectNameHoverDiv = document.createElement('div');
        newProjectNameHoverDiv.innerText = name;
        newProject.appendChild(newProjectNameHoverDiv);
      };

      addProjectElement(
        '3DTiles loading',
        'itowns',
        './examples/itowns_3d_tiles_loading.html',
        `This example shows how to implements visual feedbacks of 3DTiles loading`,
        './examples/assets/img/mosaic/3DTiles_loading.png'
      );

      addProjectElement(
        'Legonizer',
        'widget',
        './examples/widget_legonizer.html',
        `Provides example for generating a Lego mockup based on user-defined coordinates and scales.`,
        './examples/assets/img/mosaic/legonizer.png'
      );

      addProjectElement(
        'Showroom',
        'other',
        './examples/show_room.html',
        `This example implements an application used as a show room of @ud-viz/browser features. As of today, this includes :
        \n- Temporal\n- Help & About\n- Documents\n- Contribute\n- Guided tours\n- Authentication\n- Documents to validate\n- Document comments\n- Geocoding\n- Camera positioner\n- Document links`,
        './examples/assets/img/mosaic/show_room.png'
      );

      addProjectElement(
        'Editor',
        'other',
        './examples/editor.html',
        'This example illustrates the C3DTilesEditor which can be used to download transform of a gltf place into a scene',
        './examples/assets/img/mosaic/C3DTilesEditor.png'
      );

      addProjectElement(
        'Worldmap',
        'itowns',
        './examples/itowns_worldmap.html',
        'This example use IGN basemap to be able to navigate all over the world',
        './examples/assets/img/mosaic/WorldMap.png'
      );

      addProjectElement(
        'Frame3D',
        'other',
        './examples/frame3d.html',
        'This example implements a dom element 3D (ie an embeded html content in a 3D view).',
        './examples/assets/img/mosaic/dom_element_3D.png'
      );

      addProjectElement(
        '2D visualization',
        'itowns',
        './examples/itowns_2d_visualization.html',
        'This example shows how to project C3DTFeature on a flat ground',
        './examples/assets/img/mosaic/2DVisualization.png'
      );

      addProjectElement(
        '3DTiles wireframe',
        'itowns',
        './examples/itowns_3d_tiles_wireframe.html',
        'This example shows a wireframe of the edges of a 3DTiles',
        './examples/assets/img/mosaic/3DTilesWireframe.png'
      );

      addProjectElement(
        '3DTiles pointcloud',
        'itowns',
        './examples/itowns_3d_tiles_pointcloud.html',
        'This example shows a 3DTiles PointCloud',
        './examples/assets/img/mosaic/3DTilesPointCloud.png'
      );

      addProjectElement(
        'Visualizer',
        'other',
        './examples/visualizer.html',
        'This example shows a 3DTiles visualizer',
        './examples/assets/img/mosaic/Visualizer.png'
      );

      addProjectElement(
        'SMDB',
        'other',
        './examples/smdb.html',
        'In this example you can consult documents in a document browser and search them using keywords and other fields.',
        './examples/assets/img/mosaic/DocumentWidget.png'
      );

      addProjectElement(
        'Planar controls',
        'widget',
        './examples/widget_planar_controls.html',
        'In this example you can configure itowns.PlanarControls',
        './examples/assets/img/mosaic/widget_planar_controls.png'
      );

      addProjectElement(
        'Geocoding',
        'widget',
        './examples/widget_geocoding.html',
        'Geocoding allows a user to navigate in the city by searching addresses or place names.',
        './examples/assets/img/mosaic/GeocodingWidget.png'
      );

      addProjectElement(
        'BaseMap',
        'widget',
        './examples/widget_base_map.html',
        'BaseMap widget allows a user to select which background to use between those set up in the config file.',
        './examples/assets/img/mosaic/BaseMapWidget.png'
      );

      addProjectElement(
        '3DTiles',
        'widget',
        './examples/widget_3d_tiles.html',
        '3DTiles Widget allow to add/remove 3DTiles and to display info of 3DTile features',
        './examples/assets/img/mosaic/3DTilesWidget.png'
      );

      addProjectElement(
        'Camera positioner',
        'widget',
        './examples/widget_camera_positioner.html',
        'The camera positioner is a tool that show the coordinates and the orientation of the camera.',
        './examples/assets/img/mosaic/CameraPositionerWidget.png'
      );

      addProjectElement(
        'Slideshow',
        'widget',
        './examples/widget_slide_show.html',
        'The SlideShow allows to display images and videos on a plane geometry.',
        './examples/assets/img/mosaic/SlideShow.png'
      );

      addProjectElement(
        'Layer choice',
        'widget',
        './examples/widget_layer_choice.html',
        'This extensions interact with layers',
        './examples/assets/img/mosaic/LayerChoiceWidget.png'
      );

      addProjectElement(
        'Temporal',
        'widget',
        './examples/widget_extensions_3d_tiles_temporal.html',
        'This extensions allows the user to explore city objects and color them according to filters.',
        './examples/assets/img/mosaic/TemporalWidget.png'
      );

      addProjectElement(
        'Extensions temporal',
        'other',
        './examples/extensions_3d_tiles_temporal.html',
        'This extensions allows to select a date in a 3DTiles layer temporal.',
        './examples/assets/img/mosaic/TemporalWidget.png'
      );

      addProjectElement(
        'Add layers',
        'itowns',
        './examples/itowns_add_layers.html',
        `This example show how to add layers (such as geojson, elevation, base map, label, 3DTiles).`,
        './examples/assets/img/mosaic/AddLayersFromConfig.png'
      );

      addProjectElement(
        'SPARQL',
        'widget',
        './examples/widget_sparql.html',
        `This example illustrates the SPARQL Widget`,
        './examples/assets/img/mosaic/SPARQL.png'
      );

      addProjectElement(
        'Avatar',
        'game',
        './examples/game_avatar.html',
        'This example implements a local mini game illustrating an avatar walking in the city',
        './examples/assets/img/mosaic/AvatarGame.png'
      );

      addProjectElement(
        'Game editor',
        'game',
        './examples/game_editor.html',
        'This example implements a game editor',
        './examples/assets/img/mosaic/AvatarGame.png'
      );

      addProjectElement(
        'DomElement3D Cube',
        'game',
        './examples/game_dom_element_3d_cube.html',
        'This example shows a controllable cube with a dom element 3d on it',
        './examples/assets/img/mosaic/AvatarGame.png'
      );

      addProjectElement(
        'Avatar shader',
        'game',
        './examples/game_avatar_shader.html',
        'This example implements a local mini game illustrating an avatar walking in the city with collision and shader pass.',
        './examples/assets/img/mosaic/AvatarGameShader.png'
      );

      addProjectElement(
        'Zeppelin',
        'game',
        './examples/game_zeppelin.html',
        'This example implements a single player game planar',
        './examples/assets/img/mosaic/ZeppelinGame.png'
      );

      addProjectElement(
        'Drag and drop avatar',
        'game',
        './examples/game_drag_and_drop_avatar.html',
        'This example allow to drag and drop an avatar on city',
        './examples/assets/img/mosaic/Drag_and_Drop_Avatar.png'
      );

      addProjectElement(
        'Note',
        'game',
        './examples/game_note.html',
        'This example allow to share note in city',
        './examples/assets/img/mosaic/Note_Game.png'
      );

      addProjectElement(
        'Bookmark',
        'widget',
        './examples/widget_bookmark.html',
        'This example illustrates the bookmark widget',
        './examples/assets/img/mosaic/widget_bookmark.png'
      );

      addProjectElement(
        'Workspace',
        'widget',
        './examples/widget_workspace.html',
        'This example illustrates the workspace widget',
        './examples/assets/img/mosaic/workspaces.png'
      );

      addProjectElement(
        'Versioning',
        'widget',
        './examples/widget_versioning.html',
        'This example illustrates the versioning widget',
        './examples/assets/img/mosaic/widget-versioning.png'
      );

      addProjectElement(
        '3DTiles layer style',
        'itowns',
        './examples/itowns_3d_tiles_layer_style.html',
        'This example illustrate how to apply style on 3DTiles features',
        './examples/assets/img/mosaic/C3DTilesLayerStyle.png'
      );

      addProjectElement(
        'Maptastic',
        'other',
        './examples/maptastic.html',
        'This example illustrate an usage of the lib maptastic',
        './examples/assets/img/mosaic/maptastic.png'
      );

      addProjectElement(
        'GuidedTour',
        'widget',
        './examples/widget_guided_tour.html',
        'This example illustrate the guided tour widget',
        './examples/assets/img/mosaic/widget_guided_tour.png'
      );

      addProjectElement(
        'Space Time Shapes',
        'other',
        './examples/space_time_shape.html',
        'This example displays temporal 3DTiles with different shapes',
        './examples/assets/img/mosaic/SpaceTimeShape.png'
      );
    </script>
    SCRIPT_TAG_RELOAD
  </body>
</html>