potree/src/viewer/profile.html

WebGL point cloud viewer - WORK IN PROGRESS

<div id="profile_window" style="
	position: absolute; 
	width: 84%;
	left: 15%; top: 55%; height: 44%;
	margin: 5px;
	border: 1px solid black; 
	display: none; box-sizing: border-box; z-index:10000">
	
	<div id="profile_titlebar" class="pv-titlebar" style="display: flex; position: absolute; height: 30px; width: 100%; box-sizing: border-box;">
		<span style="padding-right: 10px"><span data-i18n="profile.title"></span></span>
		<span id="profileInfo" style="flex-grow: 1; flex-direction: row"> </span>
		<!-- <span id="profile_toggle_size_button" class="ui-icon ui-icon-newwin profile-button"> </span> -->
		<span id="closeProfileContainer" class="ui-icon ui-icon-close profile-button"> </span>
	</div>
	
	<div style="position: absolute; top: 30px; width: 100%; height: calc(100% - 30px); box-sizing: border-box;" class="pw_content">
		
		<span class="pv-main-color" style="height: 100%; width: 100%; padding: 5px; display:flex; flex-direction: column; box-sizing: border-box;">
			<div style=" width: 100%; color: #9d9d9d; margin: 5px; display: flex; flex-direction: row; box-sizing: border-box;">
				<span data-i18n="profile.nb_points"></span>: 
				<span id="profile_num_points">-</span>
				<!--<span id="profile_threshold" style="width: 300px">
					Threshold: <span id="potree_profile_threshold_label">123</span> <div id="potree_profile_threshold_slider"></div>
				</span>-->
				<span style="flex-grow: 1;"></span>
				<span>
				
					<a id="potree_download_profile_ortho_link" href="#" download="profile.csv">
						<img id="potree_download_csv_icon" class="text-icon"/>
						<!-- <input id="potree_download_profile_ortho_button" type="button" data-i18n="[value]profile.save_ortho"> -->
					</a>
					
					<a id="potree_download_profile_link" href="#" download="profile.las">
						<img id="potree_download_las_icon" class="text-icon"/>
						<!-- <input id="potree_download_profile_button" type="button" data-i18n="[value]profile.save_las"> -->
					</a>
					
				</span>
			</div>
			
			<div id="profile_draw_container" style="
				width: 100%; 
				flex-grow: 1; 
				position: relative; height: 100%; 
				box-sizing: border-box; user-select: none">
				<div style="
					position: absolute; 
					left: 41px; 
					top: 0; 
					bottom: 20; 
					width: calc(100% - 41px); 
					height: calc(100% - 20px); 
					background-color: #000000;
					"></div>
				<svg id="profileSVG" style="
					fill: #9d9d9d;
					position: absolute; 
					left: 0; right: 0; 
					top: 0; bottom: 0; 
					width: 100%; 
					height: 100%;
					"></svg>
				<div id="profileCanvasContainer" style="
					position: absolute; 
					left: 41px; 
					top: 0; 
					bottom: 20; 
					width: calc(100% - 41px); 
					height: calc(100% - 20px); 
					/*background-color: #000000;*/
					"></div>
				
				<div id="profileSelectionProperties" style="
					position: absolute; 
					left: 50px; 
					top: 10px; 
					background-color: black;
					color: white;
					opacity: 0.7;
					padding: 5px;
					border: 1px solid white;
					user-select: auto;
					">
					position: asdsadf asdf<br>
					rgb: 123 423 123
					</div>
				
			</div>
		</span>
	</div>

</div>