scan-obb-aligner.pug

doctype html
html(lang="en")
  head
    title= "Scan OBB Alignment"
    meta(charset= "UTF-8")
    link(rel='stylesheet', href='https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css')
    link(rel='stylesheet', href='https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css')
    link(rel='stylesheet', href='https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.3/themes/default/style.min.css')
    link(rel='stylesheet', href='//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.min.css')
    link(rel='stylesheet', href='//cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.4.2/jquery.contextMenu.min.css')
    link(rel='stylesheet', href=`${baseUrl}/css/common.css`)
    link(rel='stylesheet', href=`${baseUrl}/css/search-panel.css`)
    link(rel='stylesheet', href=`${baseUrl}/css/model-viewer.css`)
  body
    // UI Markup
    #main
      #canvas
      #alert.alert(style="display:none")
        button.close(type="button", onclick="hideAlert()") ×
        span#alertMessage

      #accordion.overlay.panel-group(style='top:80px; left:10px; max-height:100vh; overflow:auto;')
        .panel.panel-default
          h4.panel-heading.panel-title.collapsed(data-toggle='collapse', data-target='#partsPanel') Parts
          #partsPanel.panel-body.panel-collapse.collapse
            p#partTypeSelectDiv
              label(for="partType") Part Type
              select#partType
            p#labelTypeSelectDiv
              label(for="labelType") Label
              select#labelType
            p#showSegmentsDiv

      #instructionsPanel.roundBorder.grayBackground
        span Instructions
        p#instructions
      #namesPanel.overlay.btn-group.btn-group-vertical
        #nameButtonsDiv.btn-group.btn-group-vertical

    script(src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js")
    script(src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js")
    script(src="//cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.4.2/jquery.contextMenu.min.js")
    script(src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js")
    // Special bootbox
    script(src=`${baseUrl}/client/js/vendor/bootbox.form.min.js`)
    script(src=`${baseUrl}/three.min.js`)
    script(src=`${baseUrl}/STK.bundle.js`)
    link(rel='stylesheet', href=`${baseUrl}/css/datgui-light.css`)
    script.
      var defaultPaletteName = 'd3_category19p';
      var paletteName = STK.util.getUrlParam('palette') || defaultPaletteName;
      var partType = STK.util.getUrlParam('partType') || 'surfaces';
      STK.Constants.defaultPalette = STK.Colors.palettes[paletteName] || STK.Colors.palettes[defaultPaletteName];
      var canvas = document.getElementById('canvas');
      var modelViewer = new STK.ModelViewer({
        appId: 'MultiscanObbAligner.v1-20220823',
        container: canvas,
        sources: ['vf'],
        showSearchOptions: false,
        allowCameraControlToggle: false,
        allowPrevNext: false,
        useNewImages: true,
        saveImageModifierKey: 'ctrl',
        partsPanel: {
          partTypes: ['none', partType],
          labelTypes: ['Label', 'Object'],
          defaultPartType: partType,
          defaultLabelType: 'Object',
          neutralColor: STK.util.getUrlParam('neutralColor'),
          useColorSequence: true,
          showOBBs: true,
          allowObbAdjustment: true
        }
      });
      modelViewer.Subscribe('Launch', modelViewer, function () {
        modelViewer.showLoadingIcon(true);
      });
      var modelId = STK.util.getUrlParam('modelId');
      modelViewer.launch();
      modelViewer.assetManager.registerCustomAssetGroups({
        assetFiles: STK.Constants.scanAssetsFile,
        filterByAssetId: modelId,
        callback: function(err, res) {
          if (!err) {
            if (modelId != undefined) {
              var modelIdParts = modelId.split('.');
              modelViewer.setSourceAndSearch(modelViewer.modelSearchController, modelIdParts[0], 'fullId:' + modelId);
            } else {
              modelViewer.showLoadingIcon(false);
            }
          }
        }
      });

      $('#partsPanel').collapse('show')
      $('#images').on('shown.bs.collapse', function () {
        modelViewer.modelImagesPanel.onResize();
      });
      $('#instructions').hide();
      $('#instructionsPanel').click(function () {
        $('#instructions').toggle();
      });
      // Make various components draggable
      $('#namesPanel').draggable();
      $('#instructionsPanel').draggable();
      window.app = modelViewer;  // For console debugging