view src/app/analysis-item/analysis-item.component.html @ 393:a02e6ec4a9d2

cross-hair-inspector component, much the same technique used for the vertical-scale. Change curve to use it. Doesn't currently animate.

<md-card>
  <md-card-header>
    <md-card-title>{{item.title}}</md-card-title>
    <md-card-subtitle>{{item.description}}</md-card-subtitle>
  </md-card-header>
  <md-card-content>
    <ng-template [ngIf]="isLoading()">
      <ugly-progress-bar
        [isDeterminate]="true"
        [progress]="item.progress"
      ></ugly-progress-bar>
    </ng-template>
    <div class="content">
      <ng-template [ngIf]="!isLoading()">
        <ng-template [ngIf]="isActive && isAudioItem()">
          <ugly-live-play-head
            [timeToPixel]="DOES_NOT_BELONG_HERE"
            [colour]="'#c33c54'"
          >
          </ugly-live-play-head>
        </ng-template>
        <ugly-waveform
          *ngIf="isAudioItem(); else notAudio"
          [timeline]="timeline"
          [width]="contentWidth"
          [audioBuffer]="item.audioData"
          [onSeek]="onSeek"
          [colour]="'#0868ac'"
        ></ugly-waveform>

        <ng-template #notAudio>
          <div class="content"
            *ngIf="getFeatureShape() as shape; else showSpinner">
            <div [ngSwitch]="shape" class="content">
              <ugly-curve
                *ngSwitchCase="'vector'"
                [colour]="getNextColour()"
                [timeline]="timeline"
                [width]="contentWidth"
                [onSeek]="onSeek"
                [curve]="item.collected"
              ></ugly-curve>
              <ugly-vertical-scale *ngSwitchCase="'tracks'">
                <ugly-tracks
                  [colour]="getNextColour()"
                  [timeline]="timeline"
                  [width]="contentWidth"
                  [onSeek]="onSeek"
                  [tracks]="item.collected"
                ></ugly-tracks>
              </ugly-vertical-scale>
              <ugly-vertical-scale *ngSwitchCase="'notes'">
                <ugly-notes
                  [colour]="getNextColour()"
                  [timeline]="timeline"
                  [width]="contentWidth"
                  [onSeek]="onSeek"
                  [notes]="item.collected"
                ></ugly-notes>
              </ugly-vertical-scale>
              <ugly-instants
                *ngSwitchCase="'instants'"
                [colour]="getNextColour()"
                [timeline]="timeline"
                [width]="contentWidth"
                [onSeek]="onSeek"
                [instants]="item.collected"
              ></ugly-instants>
              <ugly-grid
                *ngSwitchCase="'matrix'"
                [timeline]="timeline"
                [width]="contentWidth"
                [onSeek]="onSeek"
                [grid]="item.collected"
              ></ugly-grid>

              <div *ngSwitchDefault>Feature cannot be visualised.</div>
            </div>
          </div>
          <ng-template #showSpinner>
            <ugly-progress-spinner></ugly-progress-spinner>
          </ng-template>
        </ng-template>

      </ng-template>
    </div>
  </md-card-content>
</md-card>