|
|
<!DOCTYPE html>
|
|
|
<html lang="en">
|
|
|
<head>
|
|
|
<title>SUSTech POINTS</title>
|
|
|
<meta charset="utf-8">
|
|
|
<link rel="icon" type="image/png" href="/static/icon2.png">
|
|
|
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
|
|
|
<!-- <script src="/static/js/lib/jquery-1.12.4.js"></script>
|
|
|
<link rel="stylesheet" href="/static/js/lib/jquery-ui-1.12.1/jquery-ui.min.css">
|
|
|
<script src="/static/js/lib/jquery-ui-1.12.1/jquery-ui.min.js"></script> -->
|
|
|
|
|
|
<link type="text/css" rel="stylesheet" href="/static/css/main.css">
|
|
|
|
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
|
|
|
<div id="main-editor"></div>
|
|
|
<!-- div id="batch-editor"-->
|
|
|
</div>
|
|
|
<template id="editor-template"><div id="main-ui" class="editor-ui">
|
|
|
<div id="header">
|
|
|
<div id="global-info">
|
|
|
<!-- text id="frame"></text-->
|
|
|
<div id="selectors">
|
|
|
<select id="scene-selector">
|
|
|
<option>--scene--</option>
|
|
|
</select>
|
|
|
<div id='btn-reload-scene-list' class="ui-button" title="reload scene list">
|
|
|
<svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" focusable="false" class="svg-button"><g>
|
|
|
<path d="M 12 20 A 8 8 0 1 1 20 12 M 21 9 L 20 12 L 18 10" />
|
|
|
</g></svg>
|
|
|
</div>
|
|
|
<select id="frame-selector">
|
|
|
<option>--frame--</option>
|
|
|
</select>
|
|
|
<!-- <select id="camera-selector">
|
|
|
<option>--camera--</option>
|
|
|
</select> -->
|
|
|
<div id="camera-selector">
|
|
|
<span>Camera</span>
|
|
|
<div id="camera-list">
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<select id="object-selector">
|
|
|
<option>--object--</option>
|
|
|
</select>
|
|
|
|
|
|
|
|
|
|
|
|
<text id="box"></text>
|
|
|
<text id="ref-obj"></text>
|
|
|
</div>
|
|
|
|
|
|
<div id="buttons">
|
|
|
<div id="dynamic-buttons-placeholder">
|
|
|
</div>
|
|
|
|
|
|
<div id="static-buttons">
|
|
|
<div id="changed-mark" class="ui-button">
|
|
|
<div id='save-button'>
|
|
|
<svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" focusable="false" class="svg-button"><g>
|
|
|
<path d="M 4 4 L 18 4 L 20 6 L 20 20 L 4 20 Z M 8 4 h 8 v 2 h -8 z M 6 10 h 12 V 18 h -12 z "></path>
|
|
|
</g></svg>
|
|
|
</div>
|
|
|
<div id="changed-world-list-wrapper">
|
|
|
<div> All modified frames, click to save them all</div>
|
|
|
<div id='changed-world-list'></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div id="log-button" class="ui-button">
|
|
|
<svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" focusable="false" id="log-svg" class="svg-button">
|
|
|
<g>
|
|
|
<circle cx = 12 cy=12 r=4 />
|
|
|
</g>
|
|
|
</svg>
|
|
|
</div>
|
|
|
|
|
|
<div id="config-button" class="ui-button">
|
|
|
<svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" focusable="false" class="svg-button">
|
|
|
<g>
|
|
|
<circle cx = 12 cy=7 r=1 />
|
|
|
<circle cx = 12 cy=12 r=1 />
|
|
|
<circle cx = 12 cy=17 r=1 />
|
|
|
</g>
|
|
|
</svg>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div id="content">
|
|
|
<div id="container">
|
|
|
<div id='select-box' ></div>
|
|
|
<svg width="100%" height="100%" id = "main-view-svg">
|
|
|
<g id="grid-lines-wrapper"></g>
|
|
|
</svg>
|
|
|
</div>
|
|
|
|
|
|
<!-- div id="image"></div -->
|
|
|
<div id="floating-things">
|
|
|
<div id="floating-labels" class="non-selectable"></div>
|
|
|
<div id="obj-editor">
|
|
|
|
|
|
<div class="obj-editor-row">
|
|
|
<div id="label-copy" class="ui-button" title="copy (C-c)">
|
|
|
<!-- <span class="ui-icon ui-icon-copy"></span> -->
|
|
|
<svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" focusable="false" class="svg-button"><g>
|
|
|
<!-- <rect x="4" y="4" width="12" height="12"/> -->
|
|
|
<rect x="8" y="8" width="12" height="12"/>
|
|
|
<polyline points="8 16 4 16 4 4 16 4 16 8 "/>
|
|
|
</g></svg>
|
|
|
</div>
|
|
|
<div id="label-paste" class="ui-button" title="auto adjust">
|
|
|
<!-- <span class="ui-icon ui-icon-key"></span></div> -->
|
|
|
<svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" focusable="false" class="svg-button"><g>
|
|
|
<!-- <rect x="4" y="8" width="16" height="12"/>
|
|
|
<circle cx="12" cy="8" r = "4"/> -->
|
|
|
<circle cx=12 cy=12 r=4 />
|
|
|
<rect x=10 y=16 width=4 height=4 />
|
|
|
<polyline points='12 3 12 6' />
|
|
|
<polyline points='3 12 6 12' />
|
|
|
<polyline points='18 12 21 12' />
|
|
|
<polyline points='5 5 8 8' />
|
|
|
<polyline points='18 5 15 8' />
|
|
|
</g></svg>
|
|
|
</div>
|
|
|
<div id="label-batchedit" class="ui-button" title="edit multiple instances">
|
|
|
<!-- <span class="ui-icon ui-icon-zoomin"></span> -->
|
|
|
<svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" focusable="false" class="svg-button"><g>
|
|
|
<rect x="4" y="4" width="8" height="8"/>
|
|
|
<rect x="4" y="12" width="8" height="8"/>
|
|
|
<rect x="12" y="4" width="8" height="8"/>
|
|
|
|
|
|
</g></svg>
|
|
|
</div>
|
|
|
|
|
|
<div id="label-trajectory" class="ui-button" title="trajectory">
|
|
|
<!-- <span class="ui-icon ui-icon-zoomin"></span> -->
|
|
|
<svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" focusable="false" class="svg-button"><g>
|
|
|
<path d="M 4 4 C 20 4, 4 20, 20 20" />
|
|
|
|
|
|
</g></svg>
|
|
|
</div>
|
|
|
|
|
|
<div id="label-highlight" class="ui-button" title="focus">
|
|
|
<!-- <span class="ui-icon ui-icon-zoomin"></span> -->
|
|
|
<svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" focusable="false" class="svg-button"><g>
|
|
|
<circle cx="10" cy="10" r="7"/>
|
|
|
<polyline points="15 15 20 20"/>
|
|
|
<polyline points="10 6 10 14"/>
|
|
|
<polyline points="6 10 14 10"/>
|
|
|
</g></svg>
|
|
|
</div>
|
|
|
<div id="label-edit" class="ui-button" title="edit">
|
|
|
<!-- <span class="ui-icon ui-icon-pencil"></span> -->
|
|
|
<svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" focusable="false" class="svg-button"><g>
|
|
|
<polyline points="12 4 12 20" />
|
|
|
<polyline points="4 9 12 9" />
|
|
|
<polyline points="8 5 12 9 8 13" />
|
|
|
<polyline points="20 15 12 15" />
|
|
|
<!-- <polyline points="16 19 12 15 16 11" /> -->
|
|
|
</svg>
|
|
|
</div>
|
|
|
<div id="label-rotate" class="ui-button" title="reverse direction (g)">
|
|
|
<!-- <span class="ui-icon ui-icon-transferthick-e-w"></span></div> -->
|
|
|
<svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" focusable="false" class="svg-button"><g>
|
|
|
<!-- <rect x=6 y=4 width=12 height=8 />
|
|
|
<polyline points="12 12 12 20" />
|
|
|
<polyline points="8 16 12 20 16 16" /> -->
|
|
|
<rect x=8 y=8 width=8 height=8 />
|
|
|
|
|
|
<polyline points="12 12 12 21" />
|
|
|
<polyline points="10 19 12 21 14 19" />
|
|
|
|
|
|
<polyline points="12 12 12 3" stroke-dasharray="1" />
|
|
|
<polyline points="10 5 12 3 14 5" stroke-dasharray="1" />
|
|
|
</g></svg>
|
|
|
</div>
|
|
|
|
|
|
<div id="label-del" class="ui-button" title="delete (Del)">
|
|
|
<!-- <span class="ui-icon ui-icon-trash"></span> -->
|
|
|
<svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" focusable="false" class="svg-button"><g>
|
|
|
<path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V8H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"></path>
|
|
|
</g></svg>
|
|
|
</div>
|
|
|
|
|
|
<div id="label-more" class="ui-button">
|
|
|
<!-- <span class="ui-icon ui-icon-trash"></span> -->
|
|
|
<svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" focusable="false" class="svg-button"><g>
|
|
|
<g>
|
|
|
<circle cx="7" cy="12" r="0.5"></circle>
|
|
|
<circle cx="12" cy="12" r="0.5"></circle>
|
|
|
<circle cx="17" cy="12" r="0.5"></circle>
|
|
|
</g>
|
|
|
</g></svg>
|
|
|
|
|
|
<div id="object-dropdown-menu" class="non-selectable">
|
|
|
<div class="menu-item" id="cm-delete-obj">
|
|
|
<div class="menu-item-icon"></div>
|
|
|
<div class="menu-item-text">Delete this object (in all frames)</div>
|
|
|
</div>
|
|
|
<div class="menu-item" id="cm-modify-obj-type">
|
|
|
<div class="menu-item-icon"></div>
|
|
|
<div class="menu-item-text">Sync object type & attr</div>
|
|
|
</div>
|
|
|
<div class="menu-item" id="cm-modify-obj-size">
|
|
|
<div class="menu-item-icon"></div>
|
|
|
<div class="menu-item-text">Sync object size</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="menu-item menu-seperator"></div>
|
|
|
<div class="menu-item" id="cm-auto-ann-background">
|
|
|
<div class="menu-item-icon"></div>
|
|
|
<div class="menu-item-text">Auto ann. it in background</div>
|
|
|
</div>
|
|
|
<div class="menu-item" id="cm-interpolate-background">
|
|
|
<div class="menu-item-icon"></div>
|
|
|
<div class="menu-item-text">interpolate it in background</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="menu-item menu-seperator"></div>
|
|
|
<div class="menu-item" id="cm-select-as-ref">
|
|
|
<div class="menu-item-icon"></div>
|
|
|
<div class="menu-item-text">Copy/Select as Ref</div>
|
|
|
</div>
|
|
|
<div class="menu-item menu-seperator"></div>
|
|
|
<div class="menu-item" id="cm-change-id-to-ref">
|
|
|
<div class="menu-item-icon"></div>
|
|
|
<div class="menu-item-text">Change ID to Ref</div>
|
|
|
</div>
|
|
|
<div class="menu-item" id="cm-change-id-to-ref-in-scene">
|
|
|
<div class="menu-item-icon"></div>
|
|
|
<div class="menu-item-text">Change ID to Ref in all frames</div>
|
|
|
</div>
|
|
|
<div class="menu-item menu-seperator"></div>
|
|
|
<div class="menu-item" id="cm-follow-ref">
|
|
|
<div class="menu-item-icon"></div>
|
|
|
<div class="menu-item-text">Follow Ref</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="menu-item" id="cm-sync-followers">
|
|
|
<div class="menu-item-icon"></div>
|
|
|
<div class="menu-item-text">Sync followers</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="menu-item" id="cm-follow-static-objects">
|
|
|
<div class="menu-item-icon"></div>
|
|
|
<div class="menu-item-text">Follow Static Objects</div>
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="obj-editor-row">
|
|
|
<select title="category" id="object-category-selector"></select>
|
|
|
|
|
|
<input title="tracking id" list="obj-ids-of-scene" id="object-track-id-editor" type="text" size="5" placeholder="track id"></input>
|
|
|
<datalist id="obj-ids-of-scene"></datalist>
|
|
|
<div id="label-gen-id" class="ui-button" title="generate ID">
|
|
|
<!-- <span class="ui-icon ui-icon-copy"></span> -->
|
|
|
<svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" focusable="false" class="svg-button"><g>
|
|
|
<!-- <rect x="4" y="4" width="12" height="12"/> -->
|
|
|
<rect x="6" y="6" width="12" height="12"/>
|
|
|
</g></svg>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class = "obj-editor-row">
|
|
|
<div id="attr-editor">
|
|
|
<input title="attribute" id="attr-input" type="text" size="10" placeholder="attribute">
|
|
|
<div id="attr-selector">
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div id="main-box-editor-wrapper"></div>
|
|
|
<div id="batch-box-editor">
|
|
|
<div id="batch-box-editor-header"></div>
|
|
|
<div id="batch-box-editor-group"></div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div id="context-menu-wrapper" class="non-selectable">
|
|
|
<div id="context-menu">
|
|
|
|
|
|
|
|
|
<div class="menu-item" id="cm-new">
|
|
|
<div class="menu-item-icon"></div>
|
|
|
<div class="menu-item-text">New</div>
|
|
|
<div class="menu-item-arrow menu-item-icon">
|
|
|
<svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" focusable="false" class="svg-menu-icon"><g>
|
|
|
<path d="M12 8 L 18 12 L 12 16Z"></path>
|
|
|
</g></svg>
|
|
|
</div>
|
|
|
<div id="new-submenu">
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="menu-item" id="cm-paste" title="hold shift key to disable auto-adjust">
|
|
|
<div class="menu-item-icon"></div>
|
|
|
<div class="menu-item-text">Paste</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="menu-item menu-seperator"></div>
|
|
|
|
|
|
<div class="menu-item" id="cm-goto">
|
|
|
<div class="menu-item-icon"></div>
|
|
|
<div class="menu-item-text">Go to</div>
|
|
|
<div class="menu-item-arrow menu-item-icon">
|
|
|
<svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" focusable="false" class="svg-menu-icon"><g>
|
|
|
<path d="M12 8 L 18 12 L 12 16Z"></path>
|
|
|
</g></svg>
|
|
|
</div>
|
|
|
<div id="goto-submenu">
|
|
|
<div class="menu-item" id="cm-prev-frame">
|
|
|
<div class="menu-item-icon"></div>
|
|
|
<div class="menu-item-text">Previous frame (3)</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="menu-item" id="cm-next-frame">
|
|
|
<div class="menu-item-icon"></div>
|
|
|
<div class="menu-item-text">Next frame (4)</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="menu-item" id="cm-first-frame">
|
|
|
<div class="menu-item-icon"></div>
|
|
|
<div class="menu-item-text">First frame</div>
|
|
|
</div>
|
|
|
<div class="menu-item" id="cm-last-frame">
|
|
|
<div class="menu-item-icon"></div>
|
|
|
<div class="menu-item-text">Last frame</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="menu-item menu-seperator"></div>
|
|
|
<div class="menu-item" id="cm-prev-object">
|
|
|
<div class="menu-item-icon"></div>
|
|
|
<div class="menu-item-text">Previous object (1)</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="menu-item" id="cm-next-object">
|
|
|
<div class="menu-item-icon"></div>
|
|
|
<div class="menu-item-text">Next object (2)</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="menu-item menu-seperator"></div>
|
|
|
<div class="menu-item" id="cm-go-to-10hz">
|
|
|
<div class="menu-item-icon"></div>
|
|
|
<div class="menu-item-text">Full 10hz scene</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="menu-item" id="cm-go-to-full-2hz">
|
|
|
<div class="menu-item-icon"></div>
|
|
|
<div class="menu-item-text">Full 2Hz scene</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="menu-item" id="cm-go-to-2hz">
|
|
|
<div class="menu-item-icon"></div>
|
|
|
<div class="menu-item-text">2Hz scene</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="menu-item" id="cm-play">
|
|
|
<div class="menu-item-icon"></div>
|
|
|
<div class="menu-item-text">Play</div>
|
|
|
<div class="menu-item-arrow menu-item-icon">
|
|
|
<svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" focusable="false" class="svg-menu-icon"><g>
|
|
|
<path d="M12 8 L 18 12 L 12 16Z"></path>
|
|
|
</g></svg>
|
|
|
</div>
|
|
|
<div id="play-submenu">
|
|
|
<div class="menu-item" id="cm-play-2fps">
|
|
|
<div class="menu-item-text">2 FPS</div></div>
|
|
|
<div class="menu-item" id="cm-play-10fps">
|
|
|
<div class="menu-item-text">10 FPS</div></div>
|
|
|
<div class="menu-item" id="cm-play-20fps">
|
|
|
<div class="menu-item-text">20 FPS</div></div>
|
|
|
<div class="menu-item" id="cm-play-50fps">
|
|
|
<div class="menu-item-text">50 FPS</div></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="menu-item" id="cm-pause">
|
|
|
<div class="menu-item-icon"></div>
|
|
|
<div class="menu-item-text">Pause/Resume (Space)</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="menu-item" id="cm-stop">
|
|
|
<div class="menu-item-icon"></div>
|
|
|
<div class="menu-item-text">Stop</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="menu-item menu-seperator"></div>
|
|
|
|
|
|
|
|
|
<div class="menu-item" id="cm-save">
|
|
|
<div class="menu-item-icon"></div>
|
|
|
<div class="menu-item-text">Save (C-s)</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- <div class="menu-item" id="cm-save-all">
|
|
|
<div class="menu-item-icon"></div>
|
|
|
<div class="menu-item-text">Save All</div>
|
|
|
<div id="saveall-submenu"></div>
|
|
|
</div> -->
|
|
|
|
|
|
<div class="menu-item" id="cm-reload">
|
|
|
<div class="menu-item-icon"></div>
|
|
|
<div class="menu-item-text">Reload (C-r)</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="menu-item" id="cm-reload-all">
|
|
|
<div class="menu-item-icon"></div>
|
|
|
<div class="menu-item-text">Reload All</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="menu-item menu-seperator"></div>
|
|
|
|
|
|
<div class="menu-item" id="cm-reset-view">
|
|
|
<div class="menu-item-icon"></div>
|
|
|
<div class="menu-item-text">Reset view</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="menu-item menu-seperator"></div>
|
|
|
<div class="menu-item" id="cm-show-frame-info">
|
|
|
<div class="menu-item-icon"></div>
|
|
|
<div class="menu-item-text">Frame info</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="menu-item menu-seperator"></div>
|
|
|
<div class="menu-item" id="cm-show-stat">
|
|
|
<div class="menu-item-icon"></div>
|
|
|
<div class="menu-item-text">Stat</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="menu-item" id="cm-check-scene">
|
|
|
<div class="menu-item-icon"></div>
|
|
|
<div class="menu-item-text">Check</div>
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div id="object-context-menu">
|
|
|
<div class="menu-item" id="cm-delete">
|
|
|
<div class="menu-item-icon">
|
|
|
</div>
|
|
|
<div class="menu-item-text">Delete</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="menu-item" id="cm-delete-obj">
|
|
|
<div class="menu-item-icon"></div>
|
|
|
<div class="menu-item-text">Delete this object (in all frames)</div>
|
|
|
</div>
|
|
|
<div class="menu-item" id="cm-modify-obj-type">
|
|
|
<div class="menu-item-icon"></div>
|
|
|
<div class="menu-item-text">Sync object type & attr</div>
|
|
|
</div>
|
|
|
<div class="menu-item" id="cm-modify-obj-size">
|
|
|
<div class="menu-item-icon"></div>
|
|
|
<div class="menu-item-text">Sync object size</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="menu-item menu-seperator"></div>
|
|
|
<div class="menu-item" id="cm-edit-multiple-instances">
|
|
|
<div class="menu-item-icon"></div>
|
|
|
<div class="menu-item-text">Edit multiple instances</div>
|
|
|
</div>
|
|
|
<div class="menu-item" id="cm-auto-ann-background">
|
|
|
<div class="menu-item-icon"></div>
|
|
|
<div class="menu-item-text">Auto annotate in background</div>
|
|
|
</div>
|
|
|
<div class="menu-item" id="cm-interpolate-background">
|
|
|
<div class="menu-item-icon"></div>
|
|
|
<div class="menu-item-text">Interpolate in background</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="menu-item" id="cm-show-trajectory">
|
|
|
<div class="menu-item-icon"></div>
|
|
|
<div class="menu-item-text">Show Trajectory</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="menu-item menu-seperator"></div>
|
|
|
<div class="menu-item" id="cm-select-as-ref">
|
|
|
<div class="menu-item-icon"></div>
|
|
|
<div class="menu-item-text">Copy/Select as Ref</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="menu-item" id="cm-follow-ref">
|
|
|
<div class="menu-item-icon"></div>
|
|
|
<div class="menu-item-text">Follow Ref</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="menu-item" id="cm-sync-followers">
|
|
|
<div class="menu-item-icon"></div>
|
|
|
<div class="menu-item-text">Sync followers</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="menu-item" id="cm-follow-static-objects">
|
|
|
<div class="menu-item-icon"></div>
|
|
|
<div class="menu-item-text">Follow Static Objects</div>
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div id="box-editor-context-menu">
|
|
|
|
|
|
<div class="menu-item" id="cm-select-all">
|
|
|
<div class="menu-item-icon">
|
|
|
</div>
|
|
|
<div class="menu-item-text"><u>S</u>elect all</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="menu-item" id="cm-select-all-previous">
|
|
|
<div class="menu-item-icon">
|
|
|
</div>
|
|
|
<div class="menu-item-text">Select all previous</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="menu-item" id="cm-select-all-next">
|
|
|
<div class="menu-item-icon">
|
|
|
</div>
|
|
|
<div class="menu-item-text">Select all next</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="menu-item menu-seperator"></div>
|
|
|
<div class="menu-item" id="cm-delete-empty-boxes">
|
|
|
<div class="menu-item-icon">
|
|
|
</div>
|
|
|
<div class="menu-item-text">Delete empty boxes</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="menu-item menu-seperator"></div>
|
|
|
|
|
|
<div class="menu-item" id="cm-delete">
|
|
|
<div class="menu-item-icon">
|
|
|
</div>
|
|
|
<div class="menu-item-text"><u>D</u>elete</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="menu-item" id="cm-delete-intersected-boxes">
|
|
|
<div class="menu-item-icon">
|
|
|
</div>
|
|
|
<div class="menu-item-text">Delete intersected boxes</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="menu-item" id="cm-interpolate">
|
|
|
<div class="menu-item-icon">
|
|
|
</div>
|
|
|
<div class="menu-item-text">Int<u>e</u>rpolate</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="menu-item" id="cm-auto-annotate">
|
|
|
<div class="menu-item-icon">
|
|
|
</div>
|
|
|
<div class="menu-item-text"><u>A</u>uto annotate</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="menu-item" id="cm-auto-annotate-wo-rotation">
|
|
|
<div class="menu-item-icon">
|
|
|
</div>
|
|
|
<div class="menu-item-text">Auto annotate (no rotation)</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="menu-item" id="cm-fit">
|
|
|
<div class="menu-item-icon"></div>
|
|
|
<div class="menu-item-text">Fit</div>
|
|
|
<div class="menu-item-arrow menu-item-icon">
|
|
|
<svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" focusable="false" class="svg-menu-icon"><g>
|
|
|
<path d="M12 8 L 18 12 L 12 16Z"></path>
|
|
|
</g></svg>
|
|
|
</div>
|
|
|
<div id="cm-fit-submenu">
|
|
|
<div class="menu-item" id="cm-fit-size">
|
|
|
<div class="menu-item-text">Size</div></div>
|
|
|
<div class="menu-item" id="cm-fit-position">
|
|
|
<div class="menu-item-text">Position</div></div>
|
|
|
<div class="menu-item" id="cm-fit-rotation">
|
|
|
<div class="menu-item-text">Rotation</div></div>
|
|
|
<div class="menu-item" id="cm-fit-moving-direction">
|
|
|
<div class="menu-item-text">Moving direction</div></div>
|
|
|
<div class="menu-item menu-seperator"></div>
|
|
|
<div class="menu-item" id="cm-fit-top">
|
|
|
<div class="menu-item-text">Top</div></div>
|
|
|
<div class="menu-item" id="cm-fit-bottom">
|
|
|
<div class="menu-item-text">Bottom</div></div>
|
|
|
<div class="menu-item" id="cm-fit-left">
|
|
|
<div class="menu-item-text">Left</div></div>
|
|
|
<div class="menu-item" id="cm-fit-right">
|
|
|
<div class="menu-item-text">Right</div></div>
|
|
|
<div class="menu-item" id="cm-fit-front">
|
|
|
<div class="menu-item-text">Front</div></div>
|
|
|
<div class="menu-item" id="cm-fit-rear">
|
|
|
<div class="menu-item-text">Rear</div></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="menu-item" id="cm-reverse-direction">
|
|
|
<div class="menu-item-icon"></div>
|
|
|
<div class="menu-item-text">Reverse heading direction</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="menu-item" id="cm-reset-roll-pitch">
|
|
|
<div class="menu-item-icon"></div>
|
|
|
<div class="menu-item-text">Reset roll & pitch</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="menu-item" id="cm-finalize">
|
|
|
<div class="menu-item-icon">
|
|
|
</div>
|
|
|
<div class="menu-item-text"><u>F</u>inalize</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="menu-item" id="cm-reload">
|
|
|
<div class="menu-item-icon">
|
|
|
</div>
|
|
|
<div class="menu-item-text">Reload</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="menu-item menu-seperator"></div>
|
|
|
|
|
|
<div class="menu-item" id="cm-goto-this-frame">
|
|
|
<div class="menu-item-text"><u>G</u>o to this frame</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="menu-item" id="cm-sync-size">
|
|
|
<div class="menu-item-text">Sync size to all</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="menu-item" id="cm-follow-static-objects">
|
|
|
<div class="menu-item-text">Follow static objects</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- <div class="menu-item" id="cm-this">
|
|
|
<div class="menu-item-icon"></div>
|
|
|
<div class="menu-item-text">This frame</div>
|
|
|
<div class="menu-item-arrow menu-item-icon">
|
|
|
<svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" focusable="false" class="svg-menu-icon"><g>
|
|
|
<path d="M12 8 L 18 12 L 12 16Z"></path>
|
|
|
</g></svg>
|
|
|
</div>
|
|
|
<div id="cm-this-submenu">
|
|
|
|
|
|
</div>
|
|
|
</div> -->
|
|
|
|
|
|
|
|
|
<div class="menu-item menu-seperator"></div>
|
|
|
|
|
|
|
|
|
<div class="menu-item" id="cm-show-trajectory">
|
|
|
<div class="menu-item-icon">
|
|
|
</div>
|
|
|
<div class="menu-item-text"><u>T</u>rajectory</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="menu-item" id="cm-check">
|
|
|
<div class="menu-item-icon">
|
|
|
</div>
|
|
|
<div class="menu-item-text">Check</div>
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div id="box-editor-manager-context-menu">
|
|
|
<div class="menu-item" id="cm-increase-box-editor">
|
|
|
<div class="menu-item-icon">
|
|
|
</div>
|
|
|
<div class="menu-item-text">More object instance</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="menu-item" id="cm-decrease-box-editor">
|
|
|
<div class="menu-item-icon">
|
|
|
</div>
|
|
|
<div class="menu-item-text">less object instance</div>
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div id="config-wrapper">
|
|
|
<div id="config-menu" class="non-selectable">
|
|
|
|
|
|
<div class="menu-nonclickable-item" id="cfg-theme">
|
|
|
<span>Theme</span>
|
|
|
<div class="cfg-widget-group">
|
|
|
<select type="checkbox" id="cfg-theme-select" class="cfg-widget">
|
|
|
<option value="dark" selected>dark</option>
|
|
|
<option value="light" selected>light</option>
|
|
|
</select>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="menu-nonclickable-item" id="cfg-point-size">
|
|
|
<span>Point size</span>
|
|
|
<div class='cfg-widget-group'>
|
|
|
<div id='cfg-increase-size' class='menu-button'>+</div>
|
|
|
<div id='cfg-decrease-size' class='menu-button'>-</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="menu-nonclickable-item" id="cfg-point-brightness">
|
|
|
<span>Point brightness</span>
|
|
|
<div class='cfg-widget-group'>
|
|
|
<div id='cfg-increase-brightness' class='menu-button'>+</div>
|
|
|
<div id='cfg-decrease-brightness' class='menu-button'>-</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="menu-nonclickable-item" id="cfg-hide-circle-ruler">
|
|
|
<span>Hide circle ruler</span>
|
|
|
<div class="cfg-widget-group">
|
|
|
<input type="checkbox" id="cfg-hide-circle-ruler-checkbox" class="cfg-widget">
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="menu-nonclickable-item" id="cfg-hide-box">
|
|
|
<span>Hide box</span>
|
|
|
<div class="cfg-widget-group">
|
|
|
<input type="checkbox" id="cfg-hide-box-checkbox" class="cfg-widget">
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="menu-nonclickable-item" id="cfg-hide-id">
|
|
|
<span>Hide Id</span>
|
|
|
<div class="cfg-widget-group">
|
|
|
<input type="checkbox" id="cfg-hide-id-checkbox" class="cfg-widget">
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="menu-nonclickable-item" id="cfg-hide-category">
|
|
|
<span>Hide Category</span>
|
|
|
<div class="cfg-widget-group">
|
|
|
<input type="checkbox" id="cfg-hide-category-checkbox" class="cfg-widget">
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="menu-nonclickable-item" id="cfg-color-points">
|
|
|
<span>Color point</span>
|
|
|
<div class="cfg-widget-group">
|
|
|
<select type="checkbox" id="cfg-color-points-select" class="cfg-widget">
|
|
|
<option value="mono" selected>mono</option>
|
|
|
<option value="intensity" selected>by intensity</option>
|
|
|
</select>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="menu-nonclickable-item" id="cfg-color-object">
|
|
|
<span>Color objects</span>
|
|
|
<div class="cfg-widget-group">
|
|
|
<select id="cfg-color-object-scheme" class="cfg-widget">
|
|
|
<option value="category">by category</option>
|
|
|
<option value="id">by ID</option>
|
|
|
<option value="no">don't color</option>
|
|
|
</select>
|
|
|
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="menu-nonclickable-item" id="cfg-menu-batch-mode-inst-number">
|
|
|
<span>Batch mode max box number</span>
|
|
|
<div class="cfg-widget-group">
|
|
|
<select title="instance number" id="cfg-batch-mode-inst-number" class="cfg-widget">
|
|
|
<option value = 10>10</option>
|
|
|
<option value = 20 selected>20</option>
|
|
|
<option value = 30>30</option>
|
|
|
<option value = 40>40</option>
|
|
|
</select>
|
|
|
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="menu-nonclickable-item" id="cfg-coordinate-system">
|
|
|
<span>Coordinate system</span>
|
|
|
<div class="cfg-widget-group">
|
|
|
<select title="coordinate system" id="cfg-coordinate-system-select" class="cfg-widget">
|
|
|
<option value = "utm">GPS/UTM</option>
|
|
|
<option value = "lidar" selected>LiDAR</option>
|
|
|
</select>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="menu-nonclickable-item" id="cfg-auto-rotate-xy">
|
|
|
<span>Auto rotate X/Y (roll/pitch)</span>
|
|
|
<div class="cfg-widget-group">
|
|
|
<input type="checkbox" id="cfg-auto-rotate-xy-checkbox" class="cfg-widget">
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="menu-nonclickable-item" id="cfg-auto-update-interpolated-boxes">
|
|
|
<span>Auto update interploated boxes</span>
|
|
|
<div class="cfg-widget-group">
|
|
|
<input type="checkbox" id="cfg-auto-update-interpolated-boxes-checkbox" class="cfg-widget">
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="menu-item menu-seperator"></div>
|
|
|
|
|
|
<div class="menu-item" id="cfg-data">
|
|
|
<span>Data settings</span>
|
|
|
<div class="menu-item-arrow menu-item-icon">
|
|
|
<svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" focusable="false" class="svg-menu-icon"><g>
|
|
|
<path d="M12 8 L 18 12 L 12 16Z"></path>
|
|
|
</g></svg>
|
|
|
</div>
|
|
|
|
|
|
<div id="cfg-data-submenu">
|
|
|
|
|
|
<div class="menu-nonclickable-item" id="cfg-data-preload">
|
|
|
<div class="menu-item-text">Preload</div>
|
|
|
<div class="cfg-widget-group">
|
|
|
<input type="checkbox" id="cfg-data-preload-checkbox" class="cfg-widget">
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="menu-nonclickable-item" id="cfg-data-aux-lidar">
|
|
|
<div class="menu-item-text">Auxiliary LiDAR</div>
|
|
|
<div class="cfg-widget-group">
|
|
|
<input type="checkbox" id="cfg-data-aux-lidar-checkbox" class="cfg-widget">
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="menu-nonclickable-item" id="cfg-data-radar">
|
|
|
<div class="menu-item-text">Radar</div>
|
|
|
<div class="cfg-widget-group">
|
|
|
<input type="checkbox" id="cfg-data-radar-checkbox" class="cfg-widget">
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="menu-nonclickable-item" id="cfg-data-filter-points">
|
|
|
<div class="menu-item-text">Hide points</div>
|
|
|
<div class="cfg-widget-group">
|
|
|
<input type="checkbox" id="cfg-data-filter-points-checkbox" class="cfg-widget">
|
|
|
<span> z-threshold</span>
|
|
|
<input id="cfg-data-filter-points-z" class="cfg-widget">
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="menu-item" id="cfg-experimental">
|
|
|
<span>Experimental</span>
|
|
|
<div class="menu-item-arrow menu-item-icon">
|
|
|
<svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" focusable="false" class="svg-menu-icon"><g>
|
|
|
<path d="M12 8 L 18 12 L 12 16Z"></path>
|
|
|
</g></svg>
|
|
|
</div>
|
|
|
|
|
|
<div id="cfg-experimental-submenu">
|
|
|
<div class="menu-nonclickable-item" id="cfg-calib-camera-LiDAR">
|
|
|
<div class="menu-item-text">Camera-LiDAR calibration</div>
|
|
|
<div class='cfg-widget-group'>
|
|
|
<div id='cfg-start-calib' class='menu-button'>start</div>
|
|
|
<div id='cfg-show-calib' class='menu-button'>result</div>
|
|
|
<div id='cfg-stop-calib' class='menu-button'>stop</div>
|
|
|
<!-- <div id='cfg-reset-calib' class='menu-button'>reset</div> -->
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="menu-item" id="cfg-crop-scene">
|
|
|
<div class="menu-item-text">Crop scene</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="menu-item menu-seperator"></div>
|
|
|
<div class="menu-item" id="cfg-show-log">
|
|
|
<span>Show logs</span>
|
|
|
</div>
|
|
|
|
|
|
<div class="menu-item" id="cfg-take-screenshot">
|
|
|
<span>Take screenshot</span>
|
|
|
</div>
|
|
|
|
|
|
<div class="menu-item" id="cfg-help">
|
|
|
<a href="https://github.com/naurril/SUSTechPOINTS/blob/dev-auto-annotate/README_guide.md" target="_blank">Help</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- div id="projective-view-context-menu">
|
|
|
<div class="menu-item menu-seperator"></div>
|
|
|
<div class="menu-item" id="cm-delete">
|
|
|
<div class="menu-item-icon"></div>
|
|
|
<div class="menu-item-text">Delete</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="menu-item menu-seperator"></div>
|
|
|
</div -->
|
|
|
<div id="object-track-wrapper" class="popup-window-wrapper" tabindex="-1">
|
|
|
<div id="view" class="non-selectable">
|
|
|
<div id="header">
|
|
|
<span id="title">
|
|
|
Trajectory
|
|
|
</span>
|
|
|
|
|
|
<div id="buttons">
|
|
|
<div id="btn-restore" class="ui-button" title="restore">
|
|
|
<!-- <span class="ui-icon ui-icon-trash"></span> -->
|
|
|
<svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" focusable="false" class="svg-button"><g>
|
|
|
<rect x = 6 y = 6 width=12 height=12></rect>
|
|
|
</g></svg>
|
|
|
</div>
|
|
|
<div id="btn-maximize" class="ui-button" title="maximize">
|
|
|
<!-- <span class="ui-icon ui-icon-trash"></span> -->
|
|
|
<svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" focusable="false" class="svg-button"><g>
|
|
|
<rect x = 4 y = 4 width=16 height=16></rect>
|
|
|
</g></svg>
|
|
|
</div>
|
|
|
<div id="btn-exit" class="ui-button" title="exit">
|
|
|
<!-- <span class="ui-icon ui-icon-trash"></span> -->
|
|
|
<svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" focusable="false" class="svg-button"><g>
|
|
|
<path d="M4 4 L 20 20 M 20 4 L 4 20"></path>
|
|
|
</g></svg>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<svg id = "object-track-svg" viewbox="0 0 1000 1000" preserveAspectRatio="xMinYMax meet">
|
|
|
<g id="svg-arrows"></g>
|
|
|
<g id="svg-scaler"></g>
|
|
|
</svg>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div id="info-wrapper" class="popup-window-wrapper" tabindex='-1'>
|
|
|
<div id="view">
|
|
|
<div id="header">
|
|
|
<span id="title">Info</span>
|
|
|
<div id="buttons">
|
|
|
<div id="btn-restore" class="ui-button" title="restore">
|
|
|
<!-- <span class="ui-icon ui-icon-trash"></span> -->
|
|
|
<svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" focusable="false" class="svg-button"><g>
|
|
|
<rect x = 6 y = 6 width=12 height=12></rect>
|
|
|
</g></svg>
|
|
|
</div>
|
|
|
<div id="btn-maximize" class="ui-button" title="maximize">
|
|
|
<!-- <span class="ui-icon ui-icon-trash"></span> -->
|
|
|
<svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" focusable="false" class="svg-button"><g>
|
|
|
<rect x = 4 y = 4 width=16 height=16></rect>
|
|
|
</g></svg>
|
|
|
</div>
|
|
|
<div id="btn-exit" class="ui-button" title="exit">
|
|
|
<!-- <span class="ui-icon ui-icon-trash"></span> -->
|
|
|
<svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" focusable="false" class="svg-button"><g>
|
|
|
<path d="M4 4 L 20 20 M 20 4 L 4 20"></path>
|
|
|
</g></svg>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div id="info-content"></div>
|
|
|
<div id="info-bottom-buttons">
|
|
|
<button id="btn-no">No</button>
|
|
|
<button id="btn-yes">Yes</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div id="crop-scene-wrapper" class="popup-window-wrapper" tabindex='-1'>
|
|
|
<div id="view">
|
|
|
<div id="header">
|
|
|
<span id="title">Crop scene</span>
|
|
|
<div id="buttons">
|
|
|
<div id="btn-restore" class="ui-button" title="restore">
|
|
|
<!-- <span class="ui-icon ui-icon-trash"></span> -->
|
|
|
<svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" focusable="false" class="svg-button"><g>
|
|
|
<rect x = 6 y = 6 width=12 height=12></rect>
|
|
|
</g></svg>
|
|
|
</div>
|
|
|
<div id="btn-maximize" class="ui-button" title="maximize">
|
|
|
<!-- <span class="ui-icon ui-icon-trash"></span> -->
|
|
|
<svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" focusable="false" class="svg-button"><g>
|
|
|
<rect x = 4 y = 4 width=16 height=16></rect>
|
|
|
</g></svg>
|
|
|
</div>
|
|
|
<div id="btn-exit" class="ui-button" title="exit">
|
|
|
<!-- <span class="ui-icon ui-icon-trash"></span> -->
|
|
|
<svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" focusable="false" class="svg-button"><g>
|
|
|
<path d="M4 4 L 20 20 M 20 4 L 4 20"></path>
|
|
|
</g></svg>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div id="content">
|
|
|
<div>
|
|
|
<!-- <div><span>scene-id:</span><input id="scene-id" /></div> -->
|
|
|
<div><span>desc:</span><input id="scene-desc" /></div>
|
|
|
<div><span>start time:</span><input id="scene-start-time" /></div>
|
|
|
<div><span>seconds:</span><input id="scene-seconds" /></div>
|
|
|
|
|
|
<div>
|
|
|
<button id="btn-generate">generate</button>
|
|
|
</div>
|
|
|
|
|
|
<div id="log">
|
|
|
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div id="log-wrapper" class="popup-window-wrapper" tabindex='-1'>
|
|
|
<div id="view">
|
|
|
<div id="header">
|
|
|
<span id="title">Output</span>
|
|
|
<div id="buttons">
|
|
|
<!-- <div id="btn-restore" class="ui-button" title="restore">
|
|
|
<svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" focusable="false" class="svg-button"><g>
|
|
|
<rect x = 6 y = 6 width=12 height=12></rect>
|
|
|
</g></svg>
|
|
|
</div>
|
|
|
<div id="btn-maximize" class="ui-button" title="maximize">
|
|
|
<svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" focusable="false" class="svg-button"><g>
|
|
|
<rect x = 4 y = 4 width=16 height=16></rect>
|
|
|
</g></svg>
|
|
|
</div> -->
|
|
|
|
|
|
<div id="btn-clear" class="ui-button" title="clear logs">
|
|
|
<svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" focusable="false" class="svg-button"><g>
|
|
|
<circle cx = 12 cy=12 r= 8 />
|
|
|
<polyline points="7 7 17 17" />
|
|
|
</g></svg>
|
|
|
</div>
|
|
|
<div id="btn-exit" class="ui-button" title="exit">
|
|
|
<svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" focusable="false" class="svg-button"><g>
|
|
|
<path d="M4 4 L 20 20 M 20 4 L 4 20"></path>
|
|
|
</g></svg>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div id="tabs">
|
|
|
<div id = "tab-log" class="tab-button tab-selected">Logs</div>
|
|
|
<div id = "tab-error" class="tab-button">Errors</div>
|
|
|
</div>
|
|
|
<div id="content-logs">
|
|
|
</div>
|
|
|
<div id="content-errors">
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div id="move-handle-wrapper">
|
|
|
</div>
|
|
|
|
|
|
|
|
|
</template>
|
|
|
<template id="box-editor-ui-template"><div id="sub-views">
|
|
|
<div class="box-info non-selectable" id="box-info"></div>
|
|
|
<div class="view-manipulator" id="z-view-manipulator" tabindex="-1">
|
|
|
<!-- <div class="subview-obj-size">
|
|
|
<div class="obj-vertical-size">2.33</div>
|
|
|
<div class="obj-horizontal-size"></div>
|
|
|
</div> -->
|
|
|
<svg class="subview-svg" id = "view-svg">
|
|
|
<circle cx="50%" cy="50%" r="5" class="origin-point-indicator" id="origin-point-indicator"></circle>
|
|
|
<rect x="70" y="50" width="20" height="140" fill="#00000000" class="line-handle ew-handle" id="line-left-handle"/>
|
|
|
<line x1="80" y1="40" x2="80" y2="200" class = "svg-line" id="line-left" />
|
|
|
|
|
|
<rect x="90" y="30" width="40" height="20" fill="#00000000" class="line-handle ns-handle" id="line-top-handle"/>
|
|
|
<line x1="80" y1="40" x2="140" y2="40" class = "svg-line" id="line-top" />
|
|
|
|
|
|
<rect x="130" y="50" width="20" height="140" fill="#00000000" class="line-handle ew-handle" id="line-right-handle"/>
|
|
|
<line x1="140" y1="40" x2="140" y2="200" class = "svg-line" id="line-right" />
|
|
|
|
|
|
<rect x="90" y="190" width="40" height="20" fill="#00000000" class="line-handle ns-handle" id="line-bottom-handle"/>
|
|
|
<line x1="80" y1="200" x2="140" y2="200" class = "svg-line" id="line-bottom" />
|
|
|
|
|
|
<rect x="110" y="120" width="20" height="70" fill="#00000000" class="line-handle ew-handle" id="line-direction-handle"/>
|
|
|
<line x1="110" y1="120" x2="110" y2="40" class = "svg-line" id="line-direction" />
|
|
|
|
|
|
<!-- corners -->
|
|
|
<rect x="60" y="40" width="20" height="20" fill="#00000000" class="line-handle nw-handle" id="top-left-handle"/>
|
|
|
<rect x="110" y="120" width="20" height="20" fill="#00000000" class="line-handle ne-handle" id="top-right-handle"/>
|
|
|
<rect x="110" y="120" width="20" height="20" fill="#00000000" class="line-handle sw-handle" id="bottom-left-handle"/>
|
|
|
<rect x="110" y="120" width="20" height="20" fill="#00000000" class="line-handle se-handle" id="bottom-right-handle"/>
|
|
|
|
|
|
<rect x="100" y="110" width="20" height="20" fill="#00000000" class="line-handle grab-handle" id="move-handle"/>
|
|
|
</svg>
|
|
|
<div class="v-buttons-wrapper" id="v-buttons">
|
|
|
<div id="v-fit-position" class="ui-button" title="Fit position">
|
|
|
<!-- <span class="ui-icon ui-icon-arrow-4"></span> -->
|
|
|
<svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" focusable="false" class="svg-button"><g>
|
|
|
<!-- <polyline points="3 5 15 3 17 13 5 15 3 5" stroke-dasharray="1" /> -->
|
|
|
<!-- <polyline points="8 10 20 8 22 18 10 20 8 10" /> -->
|
|
|
<rect x="8" y="8" width="12" height="12" stroke-dasharray="1"/>
|
|
|
<rect x="4" y="4" width="12" height="12"/>
|
|
|
</g></svg>
|
|
|
</div>
|
|
|
<div id="v-fit-rotation" class="ui-button" title="Fit Rotation">
|
|
|
<!-- <span class="ui-icon ui-icon-arrow-1-n"></span> -->
|
|
|
<svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" focusable="false" class="svg-button"><g>
|
|
|
<rect x="8" y="10" width="12" height="10"/>
|
|
|
<polyline points="3 5 15 3 17 13 5 15 3 5" stroke-dasharray="1" />
|
|
|
</g></svg>
|
|
|
</div>
|
|
|
|
|
|
<div id="v-fit-size" class="ui-button" title="Fit size">
|
|
|
<!-- <span class="ui-icon ui-icon-arrow-4"></span> -->
|
|
|
<svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" focusable="false" class="svg-button"><g>
|
|
|
<!-- <polyline points="3 5 15 3 17 13 5 15 3 5" stroke-dasharray="1" /> -->
|
|
|
<!-- <polyline points="8 10 20 8 22 18 10 20 8 10" /> -->
|
|
|
<rect x="8" y="10" width="10" height="12" stroke-dasharray="1"/>
|
|
|
<rect x="4" y="4" width="8" height="10"/>
|
|
|
</g></svg>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div id="v-fit-all" class="ui-button" title="Fit all">
|
|
|
<!-- <span class="ui-icon ui-icon-arrow-2-n-s"></span> -->
|
|
|
<svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" focusable="false" class="svg-button"><g>
|
|
|
<rect x="6" y="6" width="14" height="14"/>
|
|
|
<polyline points="3 5 15 3 17 13 5 15 3 5" stroke-dasharray="1" />
|
|
|
</g></svg>
|
|
|
</div>
|
|
|
|
|
|
<div id="v-fit-moving-direction" class="ui-button" title="Fit moving direction">
|
|
|
<!-- <span class="ui-icon ui-icon-arrow-2-n-s"></span> -->
|
|
|
<svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" focusable="false" class="svg-button"><g>
|
|
|
<polyline points="6 18 14 10"/>
|
|
|
<polyline points="10 10 14 10 14 14"/>
|
|
|
<circle cx=5 cy=19 r=2 />
|
|
|
<circle cx=19 cy=5 r=2 />
|
|
|
</g></svg>
|
|
|
</div>
|
|
|
|
|
|
<!-- <div id="v-reset-rotation" class="ui-button" title="reset rotation">
|
|
|
<svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" focusable="false" class="svg-button"><g>
|
|
|
<circle cx=12 cy=12 r=8 />
|
|
|
<circle cx=12 cy=12 r=1 />
|
|
|
</g></svg>
|
|
|
</div> -->
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="view-manipulator" id="y-view-manipulator" tabindex="-1">
|
|
|
<svg class="subview-svg" id="view-svg">
|
|
|
<rect x="70" y="50" width="20" height="140" fill="#00000000" class="line-handle ew-handle" id="line-left-handle"/>
|
|
|
<line x1="80" y1="40" x2="80" y2="200" class = "svg-line" id="line-left" />
|
|
|
|
|
|
<rect x="90" y="30" width="40" height="20" fill="#00000000" class="line-handle ns-handle" id="line-top-handle"/>
|
|
|
<line x1="80" y1="40" x2="140" y2="40" class = "svg-line" id="line-top" />
|
|
|
|
|
|
<rect x="130" y="50" width="20" height="140" fill="#00000000" class="line-handle ew-handle" id="line-right-handle"/>
|
|
|
<line x1="140" y1="40" x2="140" y2="200" class = "svg-line" id="line-right" />
|
|
|
|
|
|
<rect x="90" y="190" width="40" height="20" fill="#00000000" class="line-handle ns-handle" id="line-bottom-handle"/>
|
|
|
<line x1="80" y1="200" x2="140" y2="200" class = "svg-line" id="line-bottom" />
|
|
|
|
|
|
<rect x="110" y="120" width="20" height="70" fill="#00000000" class="line-handle ew-handle" id="line-direction-handle"/>
|
|
|
<line x1="110" y1="120" x2="110" y2="40" class = "svg-line" id="line-direction" />
|
|
|
|
|
|
<!-- corners -->
|
|
|
<rect x="60" y="40" width="20" height="20" fill="#00000000" class="line-handle nw-handle" id="top-left-handle"/>
|
|
|
<rect x="110" y="120" width="20" height="20" fill="#00000000" class="line-handle ne-handle" id="top-right-handle"/>
|
|
|
<rect x="110" y="120" width="20" height="20" fill="#00000000" class="line-handle sw-handle" id="bottom-left-handle"/>
|
|
|
<rect x="110" y="120" width="20" height="20" fill="#00000000" class="line-handle se-handle" id="bottom-right-handle"/>
|
|
|
|
|
|
<rect x="100" y="110" width="20" height="20", fill="#00000000" class="line-handle grab-handle" id="move-handle"/>
|
|
|
|
|
|
</svg>
|
|
|
<div class="v-buttons-wrapper" id="v-buttons">
|
|
|
<div id="v-fit-all" class="ui-button" title="fit all">
|
|
|
<!-- <span class="ui-icon ui-icon-key"></span> -->
|
|
|
<svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" focusable="false" class="svg-button"><g>
|
|
|
<rect x="6" y="6" width="14" height="14"/>
|
|
|
<polyline points="3 5 15 3 17 13 5 15 3 5" stroke-dasharray="1" />
|
|
|
</g></svg>
|
|
|
</div>
|
|
|
<div id="v-reset-rotation" class="ui-button" title="reset rotation">
|
|
|
<!-- <span class="ui-icon ui-icon-refresh"></span> -->
|
|
|
<svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" focusable="false" class="svg-button"><g>
|
|
|
<circle cx=12 cy=12 r=8 />
|
|
|
<circle cx=12 cy=12 r=1 />
|
|
|
</g></svg>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="view-manipulator" id="x-view-manipulator" tabindex="-1">
|
|
|
<svg class="subview-svg" id="view-svg">
|
|
|
<rect x="70" y="50" width="20" height="140" fill="#00000000" class="line-handle ew-handle" id="line-left-handle"/>
|
|
|
<line x1="80" y1="40" x2="80" y2="200" class = "svg-line" id="line-left" />
|
|
|
|
|
|
<rect x="90" y="30" width="40" height="20" fill="#00000000" class="line-handle ns-handle" id="line-top-handle"/>
|
|
|
<line x1="80" y1="40" x2="140" y2="40" class = "svg-line" id="line-top" />
|
|
|
|
|
|
<rect x="130" y="50" width="20" height="140" fill="#00000000" class="line-handle ew-handle" id="line-right-handle"/>
|
|
|
<line x1="140" y1="40" x2="140" y2="200" class = "svg-line" id="line-right" />
|
|
|
|
|
|
<rect x="90" y="190" width="40" height="20" fill="#00000000" class="line-handle ns-handle" id="line-bottom-handle"/>
|
|
|
<line x1="80" y1="200" x2="140" y2="200" class = "svg-line" id="line-bottom" />
|
|
|
|
|
|
<rect x="110" y="120" width="20" height="70" fill="#00000000" class="line-handle ew-handle" id="line-direction-handle"/>
|
|
|
<line x1="110" y1="120" x2="110" y2="40" class = "svg-line" id="line-direction" />
|
|
|
|
|
|
<!-- corners -->
|
|
|
<rect x="60" y="40" width="20" height="20" fill="#00000000" class="line-handle nw-handle" id="top-left-handle"/>
|
|
|
<rect x="110" y="120" width="20" height="20" fill="#00000000" class="line-handle ne-handle" id="top-right-handle"/>
|
|
|
<rect x="110" y="120" width="20" height="20" fill="#00000000" class="line-handle sw-handle" id="bottom-left-handle"/>
|
|
|
<rect x="110" y="120" width="20" height="20" fill="#00000000" class="line-handle se-handle" id="bottom-right-handle"/>
|
|
|
|
|
|
<rect x="100" y="110" width="20" height="20" fill="#00000000" class="line-handle grab-handle" id="move-handle"/>
|
|
|
|
|
|
</svg>
|
|
|
<div class="v-buttons-wrapper" id="v-buttons">
|
|
|
<div id="v-fit-all" class="ui-button" title="fit all">
|
|
|
<!-- <span class="ui-icon ui-icon-key"></span> -->
|
|
|
<svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" focusable="false" class="svg-button"><g>
|
|
|
<rect x="6" y="6" width="14" height="14"/>
|
|
|
<polyline points="3 5 15 3 17 13 5 15 3 5" stroke-dasharray="1" />
|
|
|
</g></svg>
|
|
|
</div>
|
|
|
<div id="v-reset-rotation" class="ui-button" title="reset rotation">
|
|
|
<!-- <span class="ui-icon ui-icon-refresh"></span> -->
|
|
|
<svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" focusable="false" class="svg-button"><g>
|
|
|
<circle cx=12 cy=12 r=8 />
|
|
|
<circle cx=12 cy=12 r=1 />
|
|
|
</g></svg>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<canvas id="focuscanvas" class="non-selectable" width="320" height="240">cavas</canvas>
|
|
|
</div></template>
|
|
|
<template id="batch-editor-tools-template">
|
|
|
<div id="batch-editor-tools-wrapper" class="non-selectable">
|
|
|
<div id="batch-editor-tools">
|
|
|
<!-- <select title="category" id="object-category-selector"></select>
|
|
|
<input title="tracking id" list="obj-ids-of-scene" id="object-track-id-editor" type="text" size="5"></input> -->
|
|
|
|
|
|
|
|
|
|
|
|
<div class="menu-button" id="exit">Exit</div>
|
|
|
|
|
|
<div class="menu-button" id="prev">Previous</div>
|
|
|
<div class="menu-button" id="next">Next</div>
|
|
|
|
|
|
<div class="menu-button" id="trajectory">Trajectory</div>
|
|
|
<div class="menu-button" id="auto-annotate">Auto</div>
|
|
|
<div class="menu-button" id="auto-annotate-translate-only">Auto (no rotation) </div>
|
|
|
<div class="menu-button" id="interpolate">Interpolate</div>
|
|
|
<div class="menu-button" id="reload">Reload</div>
|
|
|
<div class="menu-button" id="finalize">Finalize</div>
|
|
|
|
|
|
<!-- <div class="menu-button" id="save">Save</div> -->
|
|
|
|
|
|
<!-- <div class="ui-button" id="config">
|
|
|
<svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" focusable="false" class="svg-button">
|
|
|
<g>
|
|
|
<circle cx = 12 cy=7 r=1 />
|
|
|
<circle cx = 12 cy=12 r=1 />
|
|
|
<circle cx = 12 cy=17 r=1 />
|
|
|
</g>
|
|
|
</svg>
|
|
|
</div> -->
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<template id="image-wrapper-template">
|
|
|
<div class="image-wrapper">
|
|
|
<svg id = "maincanvas-svg" viewbox="0 0 2048 1536" preserveAspectRatio="none">
|
|
|
<image id="svg-image" x="0" y="0" width="2048" height="1536" preserveAspectRatio="none"
|
|
|
xlink:href=""
|
|
|
/>
|
|
|
<g id="svg-boxes"></g>
|
|
|
<g id="svg-points"></g>
|
|
|
</svg>
|
|
|
<div id="move-handle">
|
|
|
</div>
|
|
|
<header id="header"></header>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script src="/static/js/lib/ml/tf.min.js"></script>
|
|
|
<script type="module" src="/static/js/main.js"></script>
|
|
|
</body>
|
|
|
</html> |