Mercurial > hg > ugly-duckling
changeset 475:5df3ce3574e5
Merge branch 'more-vertical-scales' of github.com:cannam/ugly-duckling into feature/undo-redo
author | Lucas Thompson <dev@lucas.im> |
---|---|
date | Fri, 30 Jun 2017 16:11:06 +0100 |
parents | 2142e7820706 (current diff) f2b62195a5a6 (diff) |
children | eacf505f7e1f |
files | src/app/analysis-item/analysis-item.component.html src/app/app.module.ts |
diffstat | 6 files changed, 108 insertions(+), 17 deletions(-) [+] |
line wrap: on
line diff
--- a/src/app/analysis-item/analysis-item.component.html Fri Jun 30 16:01:10 2017 +0100 +++ b/src/app/analysis-item/analysis-item.component.html Fri Jun 30 16:11:06 2017 +0100 @@ -78,6 +78,18 @@ [duration]="getDuration()" ></ugly-notes> </ugly-cross-hair-inspector> + <ugly-vertical-binned + *ngSwitchCase="'matrix'" + > + <ugly-grid + [colour]="getNextColour()" + [timeline]="timeline" + [width]="contentWidth" + [onSeek]="onSeek" + [grid]="item.collected" + [duration]="getDuration()" + ></ugly-grid> + </ugly-vertical-binned> <ugly-instants *ngSwitchCase="'instants'" [colour]="getNextColour()" @@ -87,14 +99,6 @@ [instants]="item.collected" [duration]="getDuration()" ></ugly-instants> - <ugly-grid - *ngSwitchCase="'matrix'" - [timeline]="timeline" - [width]="contentWidth" - [onSeek]="onSeek" - [grid]="item.collected" - [duration]="getDuration()" - ></ugly-grid> <div *ngSwitchDefault>Feature cannot be visualised.</div> </ugly-waves-play-head>
--- a/src/app/app.module.ts Fri Jun 30 16:01:10 2017 +0100 +++ b/src/app/app.module.ts Fri Jun 30 16:11:06 2017 +0100 @@ -35,6 +35,7 @@ import {InstantsComponent} from './visualisations/instants/instants.component'; import {GridComponent} from './visualisations/grid/grid.component'; import {VerticalScaleComponent} from './visualisations/vertical-scale.component'; +import {VerticalBinnedComponent} from './visualisations/vertical-binned.component'; import {CrossHairInspectorComponent} from './visualisations/cross-hair-inspector.component'; import {RenderLoopService} from './services/render-loop/render-loop.service'; import {WavesPlayHeadComponent} from './playhead/waves-ui-play-head.component'; @@ -141,6 +142,7 @@ InstantsComponent, GridComponent, VerticalScaleComponent, + VerticalBinnedComponent, CrossHairInspectorComponent, WavesPlayHeadComponent, ActionTrayComponent
--- a/src/app/visualisations/FeatureUtilities.ts Fri Jun 30 16:01:10 2017 +0100 +++ b/src/app/visualisations/FeatureUtilities.ts Fri Jun 30 16:11:06 2017 +0100 @@ -74,9 +74,13 @@ type ShapeDeducedFromList = 'instants' | 'notes'; export type HigherLevelFeatureShape = CollectedShape | ShapeDeducedFromList; +export interface AugmentedMatrixFeature extends MatrixFeature { + binNames: string[]; +} + export type ShapedFeatureData = VectorFeature - | MatrixFeature + | AugmentedMatrixFeature | TracksFeature | Note[] | Instant[]; @@ -89,7 +93,7 @@ } export class Vector extends ShapedFeature<'vector', VectorFeature> {} -export class Matrix extends ShapedFeature<'matrix', MatrixFeature> {} +export class Matrix extends ShapedFeature<'matrix', AugmentedMatrixFeature> {} export class Tracks extends ShapedFeature<'tracks', TracksFeature> {} export class Notes extends ShapedFeature<'notes', Note[]> {} export class Instants extends ShapedFeature<'instants', Instant[]> {} @@ -148,7 +152,12 @@ case 'vector': return response.features as Vector; case 'matrix': - return response.features as Matrix; + return { + shape: deducedShape, + collected: Object.assign(response.features.collected, { + binNames: response.outputDescriptor.configured.binNames || [] + }) + } as Matrix; case 'tracks': return response.features as Tracks; case 'notes':
--- a/src/app/visualisations/grid/grid.component.ts Fri Jun 30 16:01:10 2017 +0100 +++ b/src/app/visualisations/grid/grid.component.ts Fri Jun 30 16:11:06 2017 +0100 @@ -1,14 +1,20 @@ /** * Created by lucast on 31/05/2017. */ -import {WavesComponent} from '../waves-base.component'; +import { + VerticallyBinned, + VerticallyBinnedWavesComponent, + VerticalBinNameRenderer, + VerticalValueInspectorRenderer, + WavesComponent +} from '../waves-base.component'; import { ChangeDetectionStrategy, Component, Input, } from '@angular/core'; import Waves from 'waves-ui-piper'; -import {MatrixFeature} from 'piper/HigherLevelUtilities'; +import {AugmentedMatrixFeature} from '../FeatureUtilities'; import {iceMapper} from '../../spectrogram/ColourMap'; import {estimatePercentile} from '../../spectrogram/MatrixUtils'; @@ -18,17 +24,20 @@ styleUrls: ['../waves-template.css'], changeDetection: ChangeDetectionStrategy.OnPush, providers: [ + {provide: VerticallyBinned, useExisting: GridComponent }, + {provide: VerticalBinNameRenderer, useExisting: GridComponent }, {provide: WavesComponent, useExisting: GridComponent} ] }) -export class GridComponent extends WavesComponent<MatrixFeature> { - @Input() set grid(grid: MatrixFeature) { +export class GridComponent extends VerticallyBinnedWavesComponent<AugmentedMatrixFeature> { + + @Input() set grid(grid: AugmentedMatrixFeature) { this.feature = grid; } protected get featureLayers(): Layer[] { - const startTime = this.feature.startTime; // !!! + make use of + const startTime = this.feature.startTime; const stepDuration = this.feature.stepDuration; const matrixData = this.feature.data; @@ -40,7 +49,7 @@ const gain = (targetValue > 0.0 ? (1.0 / targetValue) : 1.0); const matrixEntity = new Waves.utils.PrefilledMatrixEntity( matrixData, - 0, // startTime + startTime, stepDuration ); @@ -56,4 +65,15 @@ ) ]; } + + get binNames(): string[] { + if (!this.feature.binNames || this.feature.binNames.length === 0) { + const binCount = (this.feature.data.length > 0 ? + this.feature.data[0].length : 0); + for (let i = 0; i < binCount; ++i) { + this.feature.binNames.push("" + (i + 1)); + } + } + return this.feature.binNames; + } }
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/src/app/visualisations/vertical-binned.component.ts Fri Jun 30 16:11:06 2017 +0100 @@ -0,0 +1,33 @@ +/** + * Created by lucas on 01/06/2017. + */ +import {VerticalBinNameRenderer} from './waves-base.component'; +import { + ChangeDetectionStrategy, + Component, + ContentChildren, + QueryList, + AfterViewInit +} from '@angular/core'; + +@Component({ + selector: 'ugly-vertical-binned', + template: '<ng-content></ng-content>', + changeDetection: ChangeDetectionStrategy.OnPush +}) +export class VerticalBinnedComponent implements AfterViewInit { + + @ContentChildren( + VerticalBinNameRenderer + ) bounded: QueryList<VerticalBinNameRenderer>; + protected cachedBinNames: string[]; + + ngAfterViewInit(): void { + this.bounded.forEach(component => { + this.cachedBinNames = component.binNames; + if (this.cachedBinNames) { + component.renderNames(this.cachedBinNames); + } + }); + } +}
--- a/src/app/visualisations/waves-base.component.ts Fri Jun 30 16:01:10 2017 +0100 +++ b/src/app/visualisations/waves-base.component.ts Fri Jun 30 16:11:06 2017 +0100 @@ -19,6 +19,14 @@ abstract renderScale(range: [number, number]): void; } +export abstract class VerticallyBinned { + abstract get binNames(): string[]; +} + +export abstract class VerticalBinNameRenderer extends VerticallyBinned { + abstract renderNames(binNames: string[]): void; +} + export abstract class VerticalValueInspectorRenderer extends VerticalScaleRenderer { // TODO how do I know these layers are actually 'describable'? @@ -212,6 +220,21 @@ } } +export abstract class VerticallyBinnedWavesComponent +<T extends ShapedFeatureData> extends WavesComponent<T> + implements VerticalBinNameRenderer { + abstract binNames: string[]; + + renderNames(binNames: string[]): void { + this.addLayer(new Waves.helpers.DiscreteScaleLayer({ + tickColor: this.colour, + textColor: this.colour, + height: this.height, + binNames + })); + } +} + export abstract class InspectableVerticallyBoundedComponent <T extends ShapedFeatureData> extends VerticallyBoundedWavesComponent<T> implements VerticalValueInspectorRenderer {