pages/main-display/main-display.component.html

0001 <!--<div id="controls">-->
0002 <!--  <input type="range" id="timeSlider" min="0" [max]="maxTime" step="1" [value]="currentTime" (input)="changeCurrentTime($event)" />-->
0003 <!--  <div>{{currentTime}} {{message}}</div>-->
0004 <!--  <button (click)="timeStep($event)">  step </button>-->
0005 <!--  <button (click)="animateTime()">  play </button>-->
0006 <!--  <button (click)="stopAnimation()">stop</button>-->
0007 <!--</div>-->
0008
0009 <!--  <div class="box main">-->
0010 <!--&lt;!&ndash;    <app-loader [loaded]="loaded" [progress]="loadingProgress"></app-loader>&ndash;&gt;-->
0011 <!--&lt;!&ndash;    &lt;!&ndash;<app-nav></app-nav>&ndash;&gt;&ndash;&gt;-->
0012 <!--&lt;!&ndash;    &lt;!&ndash; UI menu at the bottom &ndash;&gt;&ndash;&gt;-->
0013 <!--&lt;!&ndash;    &lt;!&ndash;<app-ui-menu></app-ui-menu>&ndash;&gt;&ndash;&gt;-->
0014 <!--&lt;!&ndash;    <app-experiment-info experiment="ePIC" experimentTagline="EPIC experiment at EIC"></app-experiment-info>&ndash;&gt;-->
0015 <!--&lt;!&ndash;    &lt;!&ndash; Phoenix menu at the top right &ndash;&gt;&ndash;&gt;-->
0016 <!--&lt;!&ndash;    <app-phoenix-menu [rootNode]="phoenixMenuRoot"></app-phoenix-menu>&ndash;&gt;-->
0017
0018
0019
0020 <!--      &lt;!&ndash;      <mat-select [(value)]="selectedEventKey" (selectionChange)="onUserSelectedEvent()">&ndash;&gt;-->
0021 <!--      &lt;!&ndash;        <mat-option *ngFor="let key of eventsByName.keys()" [value]="key">&ndash;&gt;-->
0022 <!--      &lt;!&ndash;          {{ key }}&ndash;&gt;-->
0023 <!--      &lt;!&ndash;        </mat-option>&ndash;&gt;-->
0024 <!--      &lt;!&ndash;      </mat-select>&ndash;&gt;-->
0025
0026 <!--  </div>-->
0027 <!--</div>-->
0028
0029
0030 <app-display-shell>
0031   <ng-container header>
0032     <!-- Header content -->
0033 <!--    <button mat-icon-button matTooltip="Toggle nav config" (click)="toggleNavConfig()" class="toggle-btn d-md-none">-->
0034 <!--      <mat-icon>{{ isNavConfigOpen ? 'close' : 'menu' }}</mat-icon>-->
0035 <!--    </button>-->
0036     <app-nav-config></app-nav-config>
0037
0038     <button mat-icon-button matTooltip="Toggle phoenix menu" (click)="togglePhoenixMenu()" class="toggle-btn d-md-none phoenix-toggle-btn">
0039       <mat-icon>{{ isPhoenixMenuOpen ? 'close' : 'menu' }}</mat-icon>
0040     </button>
0041     <div class="phoenix-menu theme-button" *ngIf="isPhoenixMenuOpen || !isSmallScreen">
0042
0043       <!-- Event selector -->
0044       <app-custom-event-selector></app-custom-event-selector>
0045
0046       <app-custom-auto-rotate></app-custom-auto-rotate>
0047
0048       <!-- Dark theme toggle -->
0049       <app-custom-dark-theme></app-custom-dark-theme>
0050
0051       <!-- Toggle for clipping geometries -->
0052       <app-custom-object-clipping></app-custom-object-clipping>
0053
0054       <!-- Extra options -->
0055       <ng-content></ng-content>
0056
0057
0058     </div>
0059
0060     <button mat-icon-button matTooltip="Toggle geometry" (click)="toggleLeftPane()" class="toggle-btn">
0061       <mat-icon>{{ isLeftPaneOpen ? 'close' : 'account_tree' }}</mat-icon>
0062     </button>
0063
0064 <!--    <button mat-icon-button matTooltip="Toggle phoenix menu" (click)="togglePhoenixMenu()" class="toggle-btn1 phoenix-menu-toggle d-md-none">-->
0065 <!--      <mat-icon>{{ isPhoenixMenuOpen ? 'close' : 'menu' }}</mat-icon>-->
0066 <!--    </button>-->
0067
0068   </ng-container>
0069
0070
0071   <div leftPane>
0072     <app-geometry-tree></app-geometry-tree>
0073   </div>
0074
0075   <div centralPane>
0076     <!-- Central content area -->
0077     <div id="eventDisplay"></div>
0078     <app-tool-panel ></app-tool-panel>
0079   </div>
0080
0081   <div rightPane>
0082     <!-- Optional content for right pane -->
0083   </div>
0084
0085   <div footer>
0086     <div class="time-controls" id="bottom-controls">
0087       <div class="theme-text" style="margin-right: 10px">{{currentTime | number:'1.1-1'}}</div>
0088       <mat-slider min="0" [max]="maxTime" step="1" showTickMarks discrete [displayWith]="formatCurrentTime" (input)="changeCurrentTime($event)" class="tslider">
0089         <input matSliderThumb [value]="currentTime">
0090       </mat-slider>
0091       <div class="theme-text">{{maxTime | number:'1.0-0'}} [ns] &nbsp;&nbsp;</div>
0092
0093       <button mat-raised-button aria-label="Rewind" matTooltip="Rewind time to 0" class="tcontrol" (click)="rewindTime()">
0094         <mat-icon>first_page</mat-icon>
0095       </button>
0096       <button mat-raised-button aria-label="Stop" matTooltip="Animate with beam particles collision" class="tcontrol" (click)="animateWithCollision()">
0097         <mat-icon>close_fullscreen</mat-icon>
0098       </button>
0099       <button mat-raised-button aria-label="Play"  matTooltip="Play time forward" class="tcontrol" (click)="animateTime()">
0100         <mat-icon>play_arrow</mat-icon>
0101       </button>
0102       <button mat-raised-button aria-label="Step" matTooltip="Step 1ns backward" (click)="timeStepBack($event)" class="tcontrol">
0103         <mat-icon>chevron_left</mat-icon>
0104       </button>
0105
0106       <button mat-raised-button aria-label="Step" matTooltip="Step 1ns forward" (click)="timeStep($event)" class="tcontrol">
0107         <mat-icon>chevron_right</mat-icon>
0108       </button>
0109       <button mat-raised-button aria-label="Pause" matTooltip="Pause time playing" class="tcontrol" (click)="stopAnimation()" >
0110         <mat-icon>pause</mat-icon>
0111       </button>
0112       <button mat-raised-button aria-label="Stop" matTooltip="Stop and show all particles" class="tcontrol" (click)="exitTimedDisplay()" >
0113         <mat-icon>stop</mat-icon>
0114       </button>
0115       <div class="theme-text">{{message}}</div>
0116       &nbsp;&nbsp;
0117
0118       <button mat-raised-button aria-label="Rewind" matTooltip="Play random NEXT EVENT" class="tcontrol" (click)="nextRandomEvent()">
0119         <mat-icon>last_page</mat-icon>
0120       </button>
0121
0122       <button mat-raised-button aria-label="Stop" matTooltip="Cycle through DETECTOR subsystems" class="tcontrol" (click)="cycleGeometry()" >
0123         <mat-icon>view_in_ar</mat-icon>
0124       </button>
0125
0126       <div class="theme-text">{{currentGeometry}}</div>
0127     </div>
0128   </div>
0129
0130
0131 </app-display-shell>