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

added public content

{# 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 -%}