diff src/DML/MainVisBundle/Resources/views/Components/templates/cgpma_view.html.twig @ 0:493bcb69166c

added public content

--- /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 (&thinsp;↗&thinsp;) 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 -%}