Mercurial > hg > dml-open-vis
diff src/DML/MainVisBundle/Resources/views/Components/templates/cgpma_view.html.twig @ 0:493bcb69166c
added public content
author | Daniel Wolff |
---|---|
date | Tue, 09 Feb 2016 20:54:02 +0100 |
parents | |
children |
line wrap: on
line diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/src/DML/MainVisBundle/Resources/views/Components/templates/cgpma_view.html.twig Tue Feb 09 20:54:02 2016 +0100 @@ -0,0 +1,443 @@ +{# cgpma stands for config grid panel main area #} + +{%- jstmpl id="cgpma_collection_view__feature-selector" -%} +<div class="cgpma__input-block"> + <div class="cgpma__label">feature to show</div> + <div class="cgpma__textfield" data-parameter-name="kind" data-autocomplete-suggestions=" +{#--#}list {#-#}|list of recordings +{#-#};geography {#-#}|geography +{#-#};key-relative-chord-seq {#-#}|key-relative chord sequences +{#-#};mean-tempo-curve {#-#}|mean tempo curve +{#-#};pitch-class-histogram {#-#}|pitch class histogram +{#-#};tonic-relative-pitch-class-histogram {#-#}|pitch class histogram (tonic-rel.) +{#-#};pitch-histogram {#-#}|pitch histogram (fine res.) +{#-#};midi-pitch-histogram {#-#}|pitch histogram (semitone res.) +{#-#};similarity-matrix {#-#}|similarity matrix +{#-#};similarity-plane {#-#}|similarity plane +{#-#};tempo-histogram {#-#}|tempo histogram +{#-#};tonic-histogram {#-#}|tonic histogram +{#-#};tuning-stats {#-#}|tuning stats +{#-#}"></div> +{%- endjstmpl -%} + +{%- jstmpl id="cgpma_recording_view__feature-selector" -%} +<div class="cgpma__input-block"> + <div class="cgpma__label">feature to show</div> + <div class="cgpma__textfield" data-parameter-name="kind" data-autocomplete-suggestions=" +{#--#}properties {#-#}|properties +{#-#};pitch-histogram {#-#}|pitch histogram (fine res.) +{#-#};midi-pitch-histogram {#-#}|pitch histogram (semitone res.) +{#-#};tempo-histogram {#-#}|tempo histogram +{#-#};tempo-nonuniform {#-#}|tempo (non-uniform) +{#-#};tempo-normalised {#-#}|tempo (normalised) +{#-#}"></div> +{%- endjstmpl -%} + +{%- jstmpl id="cgpma_collection_view__empty" -%} +<div class="cgpma__explanation"> +{#--#}A grid of music collections lets you analyse multiple custom-defined musicological datasets and compare them to each other. +{#-#} The panel on the top of the screen ( ↗ ) shows the properties of the selected collection. +{#-#} The panel on the left (this one) populates itself with the parameters of a selected data representation (i.e. view). +{#-#}</div> +{%- endjstmpl -%} + +{%- jstmpl id="cgpma_recording_view__empty" -%} +{#-#}<div class="cgpma__explanation"> +{#--#}A grid of music recordings is similar to the grid of music collections – x axis corresponds to recordings and y axis corresponds to their views. +{#-#}</div> +{%- endjstmpl -%} + +{%- jstmpl id="cgpma_collection_view__unknown" -%} +{#-#}{% block unknownRow %} +{#-#}<div class="cgpma__explanation cgpma__explanation_for-previous-input"> +{#--#}The selected feature cannot be represented. +{#--#} Please choose something from what is suggested above. +{#-#}</div> +{#-#}{% endblock %} +{%- endjstmpl -%} + +{%- jstmpl id="cgpma_recording_view__unknown" -%} +{{ block("unknownRow") }} +{%- endjstmpl -%} + + +{############################################################################### + collection → default + ###############################################################################} +{%- jstmpl id="cgpma_collection_view_default" -%} +{% block defaultView %} +{#-#}<div class="cgpma__explanation cgpma__explanation_for-previous-input"> +{#--#}Please choose one of the available features to populate the row. +{#-#}</div> +{% endblock %} +{%- endjstmpl -%} + +{#-----------------------------------------------------------------------------# + collection → geography + #-----------------------------------------------------------------------------#} +{%- jstmpl id="cgpma_collection_view_geography" -%} +{#-#}<div class="cgpma__explanation cgpma__explanation_for-previous-input"> +{#--#}Some recordings from the British Library have place names attached to them. +{#-#} This attribute is projected on a map if available. +{#-#}</div> +<div class="cgpma__input-block cgpma__input-block_location_first-in-group"> + <div class="cgpma__label">region</div> + <div class="cgpma__textfield" data-parameter-name="displayRegion" data-autocomplete-suggestions=" + {#--#}planet {#-#}|whole planet + {#-#};africa {#-#}|Africa + {#-#};europe {#-#}|Europe + {#-#}"></div> + </div> +<div class="cgpma__input-block cgpma__input-block_location_first-in-group"> + <div class="cgpma__tickbox" data-parameter-name="showCountriesAsCircles">show countries as circles</div> +</div> +</div>{%- endjstmpl -%} + + +{#-----------------------------------------------------------------------------# + collection → key-relative-chord-seq + #-----------------------------------------------------------------------------#} +{%- jstmpl id="cgpma_collection_view_key-relative-chord-seq" -%} +{#-#}<div class="cgpma__explanation cgpma__explanation_for-previous-input"> +{#--#}Key-relative chord sequences are patterns of chord sequences normalised by key. +{#-#}</div> +<div class="cgpma__input-block cgpma__input-block_location_first-in-group"> + <div class="cgpma__label">number of sequences</div> + <div class="cgpma__textfield" data-parameter-name="sequenceCount" {# data-autocomplete-advisory="1"#} data-autocomplete-suggestions=" + {#--#}10 + {#-#};50 + {#-#};100 + {#-#};200 + {#-#};(API ignores this parameter) + {#-#}"></div> + </div> +</div><div class="cgpma__input-block"> + <div class="cgpma__input-block"> + <div class="cgpma__label">representation</div> + <div class="cgpma__textfield" data-parameter-name="sequenceRepresentation" data-autocomplete-suggestions=" + {#--#}parallel-coordinates {#-#}|parallel coordinates + {#-#};od-grid {#-#}|origin-destination grid (errros) + {#-#}"></div> +</div><div class="cgpma__input-block"> + <div class="cgpma__label">show data for recordings</div> + <div class="cgpma__tickbox" data-parameter-name="recordingsInMajorModeAreIncluded">in major mode</div> + <div class="cgpma__tickbox" data-parameter-name="recordingsInMinorModeAreIncluded">in minor mode</div> +</div><div class="cgpma__input-block"> + <div class="cgpma__label">show sequences</div> + <div class="cgpma__tickbox" data-parameter-name="nIsIncluded">with absent chords (N)</div> + <div class="cgpma__tickbox" data-parameter-name="chordSequencesWithCyclesAreIncluded">with repeating chords</div> +</div><div class="cgpma__input-block"> + <div class="cgpma__label">number of steps</div> + <div class="cgpma__textfield" data-parameter-name="sequenceStepCount" data-autocomplete-advisory="1" data-autocomplete-suggestions=" + {#--#}2 + {#-#};3 + {#-#};5 + {#-#};10 + {#-#}"></div> + </div> +</div><div class="cgpma__input-block"> + <div class="cgpma__label">minimal support</div> + <div class="cgpma__textfield" data-parameter-name="minSupport" data-autocomplete-advisory="1" data-autocomplete-suggestions=" + {#--#}35 + {#-#};50 + {#-#};65 + {#-#};75 + {#-#}"></div> +</div> +{#-#}<div class="cgpma__explanation cgpma__explanation_for-previous-input"> +{#--#}smallest displayed percentage of recordings for a pattern +{#-#}</div> +<div class="cgpma__input-block"> + <div class="cgpma__tickbox" data-parameter-name="guidesAreVisible">show guides</div> + <div class="cgpma__tickbox" data-parameter-name="chordGrouppingIsByType">group chords by type</div> + <div class="cgpma__tickbox" data-parameter-name="chordTypesArePopularOnly">chord types: ‘M’ and ‘m’ only</div> +</div> +{#-# }<div class="cgpma__explanation cgpma__explanation_for-previous-input"> +{#--# }Parallel coordinates are blah-blah +{#-# }</div> +#} +{%- endjstmpl -%} + + +{#-----------------------------------------------------------------------------# + collection → list + #-----------------------------------------------------------------------------#} +{%- jstmpl id="cgpma_collection_view_list" -%} +<div class="cgpma__input-block"> + <div class="cgpma__label">number of items </div> + <div class="cgpma__textfield" data-parameter-name="limit" data-autocomplete-advisory="1" data-autocomplete-suggestions=" + {#--#}10 + {#-#};20 + {#-#};50 + {#-#}"></div> +</div> +<div class="cgpma__input-block"> + <div class="cgpma__label">offset</div> + <div class="cgpma__textfield" data-parameter-name="offset" data-autocomplete-advisory="1" data-autocomplete-suggestions=" + {#--#}0 + {#-#};10 + {#-#};20 + {#-#};30 + {#-#}"></div> +</div> +<div class="cgpma__input-block"> + <div class="cgpma__label">sort by</div> + <div class="cgpma__textfield" data-parameter-name="sortBy" data-autocomplete-suggestions=" +{#--#}label +{#-#};date +{#-#}"></div> +</div> +{%- endjstmpl -%} + + +{#-----------------------------------------------------------------------------# + collection → mean-tempo-curve + #-----------------------------------------------------------------------------#} +{%- jstmpl id="cgpma_collection_view_mean-tempo-curve" -%} +{#-#}<div class="cgpma__explanation cgpma__explanation_for-previous-input"> +{#--#}Summarises tempo changes through the duration of the recordings. +{#-#} The curve expresses average tempo changes relative to the track duration. +{#--#}</div> +{%- endjstmpl -%} + + +{#-----------------------------------------------------------------------------# + collection → pitch class histogram + #-----------------------------------------------------------------------------#} +{%- jstmpl id="cgpma_collection_view_pitch-class-histogram" -%} +{#-#}<div class="cgpma__explanation cgpma__explanation_for-previous-input"> +{#--#}For each recording in the collection, all detected pitches are summarised in a histogram according to octave-equivalent pitch classes in the range 0-11 (C –B). +{#-#} The histogram shows the averages over all recordings (equally weighted). +{#-#}</div> +{%- endjstmpl -%} + + +{#-----------------------------------------------------------------------------# + collection → pitch class histogram (tonic-relative) + #-----------------------------------------------------------------------------#} +{%- jstmpl id="cgpma_collection_view_tonic-relative-pitch-class-histogram" -%} +{#-#}<div class="cgpma__explanation cgpma__explanation_for-previous-input"> +{#--#}For each recording in the collection, all detected pitches are summarised in a histogram according to their position relative to the tonic, in the range of 0-11 semitones. +{#-#} The histogram shows the averages over all recordings (equally weighted). +{#-#}</div> +{%- endjstmpl -%} + + +{#-----------------------------------------------------------------------------# + collection → pitch histogram (fine res.) + #-----------------------------------------------------------------------------#} +{%- jstmpl id="cgpma_collection_view_pitch-histogram" -%} +{#-#}<div class="cgpma__explanation cgpma__explanation_for-previous-input"> +{#--#}All detected pitches, to a resolution of a fifth 20 cents (the fifth of a semitone), are summarised in a histogram with 200 bins. +{#-#} The histogram shows the averages over all recordings (equally weighted). +{#-#}</div> +<div class="cgpma__input-block"> + <div class="cgpma__label">weighting</div> + <div class="cgpma__textfield" data-parameter-name="weighting" data-autocomplete-suggestions=" + {#--#}none + {#-#};dur {#-#}|duration + {#-#};vel {#-#}|loudness + {#-#}"></div> +</div> +<div class="cgpma__input-block"> + <div class="cgpma__label">minimum pitch</div> + <div class="cgpma__textfield" data-parameter-name="pitchMin" data-autocomplete-suggestions=" + {#--#}10 + {#-#};20 + {#-#};50 + {#-#}"></div> +</div> +<div class="cgpma__input-block"> + <div class="cgpma__label">maximum pitch</div> + <div class="cgpma__textfield" data-parameter-name="pitchMax" data-autocomplete-suggestions=" + {#--#}100 + {#-#};150 + {#-#};200 + {#-#}"></div> +</div> +{%- endjstmpl -%} + + +{#-----------------------------------------------------------------------------# + collection → pitch histogram (semitone res.) + #-----------------------------------------------------------------------------#} +{%- jstmpl id="cgpma_collection_view_midi-pitch-histogram" -%} +{#--#}<div class="cgpma__explanation cgpma__explanation_for-previous-input"> +{#--#}All detected pitches, in semitone resolution, are summarised in a histogram according to MIDI pitch in the range 0-127 (semitones, 60 is middle C). +{#-#} The histogram shows the averages over all recordings (equally weighted). +{#--#}</div> +<div class="cgpma__input-block"> + <div class="cgpma__label">weighting</div> + <div class="cgpma__textfield" data-parameter-name="weighting" data-autocomplete-suggestions=" + {#--#}none + {#-#};dur {#-#}|duration + {#-#};vel {#-#}|vel + {#-#}"></div> +</div> +{%- endjstmpl -%} + + +{#-----------------------------------------------------------------------------# + collection → similarity matrix + #-----------------------------------------------------------------------------#} +{%- jstmpl id="cgpma_collection_view_similarity-matrix" -%} +{#--#}<div class="cgpma__explanation cgpma__explanation_for-previous-input"> +{#--#}The pairwise difference of the recordings in the collection is displayed in a matrix using a compression distance metric. +{#-#} For each pair of recordings (a,b), the similarity is found at row a, column b. +{#--#}</div> +{%- block cgpmaForSimilarity -%} +<div class="cgpma__input-block"> + <div class="cgpma__label">characteristics to involve</div> + <div class="cgpma__tickbox cgpma__tickbox_one-per-line" data-parameter-name="simFeaturesIncludeChords">chords</div> + <div class="cgpma__tickbox cgpma__tickbox_one-per-line" data-parameter-name="simFeaturesIncludeChromagram">chromagram</div> + <div class="cgpma__tickbox cgpma__tickbox_one-per-line" data-parameter-name="simFeaturesIncludeMFCC">mel-frequency cepstral coefficients</div> +</div><div class="cgpma__input-block"> + <div class="cgpma__label">measure</div> + <div class="cgpma__textfield" data-parameter-name="measure" data-autocomplete-suggestions=" + {#--#}euclidean {#-#}|euclidean + {#-#};compression {#-#}|compression + {#-#}"></div> +</div><div class="cgpma__input-block cgpma__id_compressor"> + <div class="cgpma__label">compressor</div> + <div class="cgpma__textfield" data-parameter-name="compressor" data-autocomplete-suggestions=" + {#--#}zlib {#-#}|normalised + {#-#};zxd {#-#}|differential + {#-#}"></div> +</div><div class="cgpma__input-block cgpma__id_subsampling"> + <div class="cgpma__tickbox cgpma__tickbox_one-per-line" data-parameter-name="subsampling">subsampling</div> + <div class="cgpma__explanation cgpma__explanation_for-previous-tickbox">regularly skip samples in recordings to get an approximate but faster result</div> +</div> +{%- endblock cgpmaForSimilarity -%} +{%- endjstmpl -%} + + +{#-----------------------------------------------------------------------------# + collection → similarity plane + #-----------------------------------------------------------------------------#} +{%- jstmpl id="cgpma_collection_view_similarity-plane" -%} +{#--#}<div class="cgpma__explanation cgpma__explanation_for-previous-input"> +{#--#}Recordings are arranged on a two-dimensional pane with respect to their similarity: Similar recordings are positioned closely together whereas dissimilar recordings are farther apart. +{#--#}</div> +{{ block("cgpmaForSimilarity") }} +{%- endjstmpl -%} + + +{#-----------------------------------------------------------------------------# + collection → tempo histogram + #-----------------------------------------------------------------------------#} +{%- jstmpl id="cgpma_collection_view_tempo-histogram" -%} +{#-#}<div class="cgpma__explanation cgpma__explanation_for-previous-input"> +{#--#}For each recording, all detected tempi are summarised in a histogram. +{#-#} The histogram shows the average across the entire collection. +{#-#}</div> +<div class="cgpma__input-block"> + <div class="cgpma__label">minimum tempo</div> + <div class="cgpma__textfield" data-parameter-name="tempoMin" data-autocomplete-advisory="1" data-autocomplete-suggestions=" + {#--#}30 + {#-#};50 + {#-#};100 + {#-#}"></div> +</div> +<div class="cgpma__input-block"> + <div class="cgpma__label">maximum tempo</div> + <div class="cgpma__textfield" data-parameter-name="tempoMax" data-autocomplete-advisory="1" data-autocomplete-suggestions=" + {#--#}150 + {#-#};200 + {#-#};300 + {#-#}"></div> +</div> +{%- endjstmpl -%} + + +{#-----------------------------------------------------------------------------# + collection → tonic histogram + #-----------------------------------------------------------------------------#} +{%- jstmpl id="cgpma_collection_view_tonic-histogram" -%} +{#-#}<div class="cgpma__explanation cgpma__explanation_for-previous-input"> +{#--#}Summarises the key tonic (root note) per piece (using the last detected). +{#-#} The histogram displays the number of recordings for each tonic. +{#-#}</div> +{%- endjstmpl -%} + + +{#-----------------------------------------------------------------------------# + collection → tuning stats + #-----------------------------------------------------------------------------#} +{%- jstmpl id="cgpma_collection_view_tuning-stats" -%} +{#-#}<div class="cgpma__explanation cgpma__explanation_for-previous-input"> +{#--#}Summarises the reference pitch distribution based on high resolution transcription in a histogram with average and standard deviation added. +{#-#}</div> +{%- endjstmpl -%} + + +{############################################################################### + recording → default + ###############################################################################} +{%- jstmpl id="cgpma_recording_view_default" -%} +{{ block("defaultView") }} +{%- endjstmpl -%} + + +{#-----------------------------------------------------------------------------# + recording → properties + #-----------------------------------------------------------------------------#} +{%- jstmpl id="cgpma_recording_view_properties" -%} +{#-#}<div class="cgpma__explanation cgpma__explanation_for-previous-input"> +{#--#} +{#-#}</div> +{%- endjstmpl -%} + + +{#-----------------------------------------------------------------------------# + recording → pitch histogram (fine res.) + #-----------------------------------------------------------------------------#} +{%- jstmpl id="cgpma_recording_view_pitch-histogram" -%} +{#-#}<div class="cgpma__explanation cgpma__explanation_for-previous-input"> +{#--#}All detected pitches, to a resolution of a fifth 20 cents (the fifth of a semitone), are summarised in a histogram with 200 bins. +{#-#}</div> +{%- endjstmpl -%} + + +{#-----------------------------------------------------------------------------# + recording → midi pitch histogram (semitone res.) + #-----------------------------------------------------------------------------#} +{%- jstmpl id="cgpma_recording_view_midi-pitch-histogram" -%} +{#-#}<div class="cgpma__explanation cgpma__explanation_for-previous-input"> +{#--#}All detected pitches, in semitone resolution, are summarised in a histogram according to MIDI pitch in the range 0-127 (semitones, 60 is middle C). +{#-#}</div> +{%- endjstmpl -%} + + +{#-----------------------------------------------------------------------------# + recording → tempo histogram + #-----------------------------------------------------------------------------#} +{%- jstmpl id="cgpma_recording_view_tempo-histogram" -%} +{#-#}<div class="cgpma__explanation cgpma__explanation_for-previous-input"> +{#--#}Shows much time time is spent at various tempi in this recording. +{#-#} The tempo is estimated by a beat tracking algorithm, sampled at a uniform rate as in 'tempo (uniform)', and then a histogram compiled. +{#-#} The histogram bins are logarithmically spaced between given upper and lower limits. +{#-#}</div> +{%- endjstmpl -%} + + +{#-----------------------------------------------------------------------------# + recording → tempo (nonuniform) + #-----------------------------------------------------------------------------#} +{%- jstmpl id="cgpma_recording_view_tempo-nonuniform" -%} +{#-#}<div class="cgpma__explanation cgpma__explanation_for-previous-input"> +{#--#}Shows the tempo estimated by automatic beat tracking algorithm, at different times throughout the recording. +{#-#} The times at which the tempo estimates are made depends on the algorithm and may not be uniformly spaced throughout the duration of the recording. +{#-#}</div> +{%- endjstmpl -%} + + +{#-----------------------------------------------------------------------------# + recording → tempo (normalised) + #-----------------------------------------------------------------------------#} +{%- jstmpl id="cgpma_recording_view_tempo-normalised" -%} +{#-#}<div class="cgpma__explanation cgpma__explanation_for-previous-input"> +{#--#}shows the tempo estimated by automatic beat tracking algorithm, sampled at uniformly spaced times throughout the recording. +{#-#} These estimates are obtained by interpolating the raw tempo estimates show in 'tempo (non-uniform)'. +{#-#} The sampling period is an adjustable parameter with a default of 1 second. +{#-#}</div> +{%- endjstmpl -%}