Changeset 37238


Ignore:
Timestamp:
2023-02-01T22:51:31+13:00 (8 months ago)
Author:
davidb
Message:

Development now up to the point where the cursor over the AV circle for recording is a customized red crosshair; mousemove events monitored and the cursor changed back to default when moving out of the circle

Location:
gs3-installations/mars/trunk/sites/mars/collect/amc-essentia
Files:
6 added
3 edited

Legend:

Unmodified
Added
Removed

  • gs3-installations/mars/trunk/sites/mars/collect/amc-essentia/etc/collectionConfig.xml

    r37029 r37238  
    507507            <gsf:option name="TOC" value="false"/>
    508508            <gsf:template name="documentHeading">
     509              <gsf:variable name="loggedInUsername"><xsl:value-of select="/page/pageRequest/userInformation/@username"/></gsf:variable>
     510             
    509511              <!-- title will be dsiplayed in playbar at top of page, so supress showing title here -->
    510512              <!--
    … …  
    585587
    586588             
    587               <div id="playervisual-documenttext" class="documenttext" style="position: relative;">
     589      <div id="playervisual-documenttext" class="documenttext" style="position: relative;">
    588590                <div id="ajax-loaded-assocfilepath" style="display: none;"><gsf:metadata name="assocfilepath" pos="first"/></div>
    589591
    590592                <style>
    591593                  #hide-av-chart {
    592                   display: none;
     594                    display: none;
    593595                  }
    594596                 
     597                  #record-av {
     598                    display: none;
     599                  }
    595600                  span.display-view-modes, a.display-view-modes {
    596601                    padding: 5px;
    … …  
    600605                    background-color: #b0b0b0;
    601606                  }               
     607                  span.hd-chart-labelXXXX {
     608                    display: inline-block;
     609                    width: 120px;
     610                  }
    602611                </style>
    603612               
    … …  
    608617                  </span>
    609618                  <span style="display: inline-block; width: 140px;">
    610                 | <span id="show-av-chart" class="display-view-modes" onclick="return showAVChart();">Display AV Chart</span>
    611                   <span id="hide-av-chart" class="display-view-modes" onclick="return hideAVChart();">Hide AV Chart</span>
     619                | <span id="show-av-chart" class="display-view-modes hd-chart-label" onclick="return showAVChart();">Display AV Chart</span>
     620                  <span id="hide-av-chart" class="display-view-modes hd-chart-label" onclick="return hideAVChart();">Hide AV Chart</span>
    612621                  </span>
    613                   <span style="display: inline-block">
    614                 | <span class="display-view-modes" onclick="alert('To be implemented')">&#x23fa; Record <i>your</i> AV experience</span>
     622                  <span style="display: inline-block; width: 270px;">
     623                | <span id="login-to-record-av" class="display-view-modes" onclick="loginToRecord()">&#x23fa; Login to record <i>your</i> AV experience</span>
     624                <span id="record-av"          class="display-view-modes" onclick="loginToRecord()">
     625                  &#x23fa; Record <i>your</i> AV experience (<a id="record-av-logout" href="">logout</a>)
     626                </span>
    615627                  </span>
    616628                </div>
    … …  
    693705
    694706
    695     <div id="av-chart-outerdiv" style="display: none;">
    696       <hr/>
    697       <div style="width: 500px; margin: auto;">
    698         <div id="av-chart-div" style="position: relative; height: 325px; width: 300px; margin: auto">
    699           <div style="position: absolute; top: 0; left: 0; width: 300px; height: 300px; pointer-events: none;">
    700         <canvas id="av-chart-canvas" style="XXwidth: 100%; height: 300px;">
    701           Your browser does not support the canvas element
    702         </canvas>
    703           </div>
    704           <img id="av-chart-img" width="300"
    705            style="cursor: crosshair; background-colorXX: #fefefe;"
    706            src="{$library_name}/sites/{$site_name}/collect/{$collName}/images/av-diagram-bw.svg" />
    707           <div>
    708         <i>Click inside the Arousal-Valence visualisation above to initiate an AV-based recommendation.</i>
    709           </div>
    710          
    711         </div>
    712       </div>
    713     </div>
    714707   
    715708    <gsf:variable name="mp3url"><xsl:value-of select="$httpCollection"/>/index/assoc/<xsl:value-of select="$assocFilePath"/>/audio.mp3</gsf:variable>
    … …  
    727720    </gsf:script>
    728721
    729             </div>
    730 
    731 
     722      </div>
     723
     724
     725      <div id="av-chart-outerdiv" style="display: none;">
     726    <hr/>
     727    <div style="float: right">
     728      <span class="display-view-modes" onclick="hideAVChart();">Hide AV Chart</span>
     729    </div>
     730
     731    <div style="width: 700px; margin: auto;">
     732      <style>
     733        .recommend-cursor {
     734        cursor: url(<xsl:value-of select="$library_name"/>/sites/<xsl:value-of select="$site_name"/>/collect/<xsl:value-of select="$collName"/>/images/font_awesome--crosshair-black32.png) 16 16, crosshair
     735        }
     736        .record-cursor {
     737          cursor: url(<xsl:value-of select="$library_name"/>/sites/<xsl:value-of select="$site_name"/>/collect/<xsl:value-of select="$collName"/>/images/font_awesome--crosshair-red32.png) 16 16, crosshair
     738        }
     739      </style>
     740      <gsf:variable name="collImagesURL"><xsl:value-of select="$library_name"/>/sites/<xsl:value-of select="$site_name"/>/collect/<xsl:value-of select="$collName"/>/images</gsf:variable> 
     741      <div id="start-av-recording" style="display:none;">
     742        To make an AV-Recording: <span id="av-recording-coords" style="display:none;">AV coord: </span>
     743        <ul>
     744          <li>Click in the centre of the Arousal-Valence space below to initiate recording</li>
     745          <li>Move your mouse-cursor around inside the circle to reflect the Arousal-Valence levels you perceive</li>
     746          <li>Click again inside the circle at any point, if you want to cancel the recording</li>
     747        </ul>
     748      </div>
     749   
     750     
     751      <div id="av-chart-div" style="position: relative; heightXXX: 325px; width: 300px; margin: auto">            <!-- av-chart-width av-chart-height + 25-->
     752        <div style="position: absolute; top: 0; left: 0; width: 300px; height: 300px; pointer-events: none;">  <!-- av-chart-width -->
     753          <canvas id="av-chart-canvas" style="XXwidth: 100%; height: 300px;">                                  <!-- av-chart-width -->
     754        Your browser does not support the canvas element
     755          </canvas>
     756        </div>
     757        <!--                           VVV av-chart-width -->
     758        <img id="av-chart-img" classXXXX="recommend-cursor" width="300"                                                                     
     759         style="cursor: crosshair;"
     760         src="{$library_name}/sites/{$site_name}/collect/{$collName}/images/av-diagram-bw.svg" /> 
     761       
     762        <img id="av-chart-img-unlabeled" class="record-cursor" width="400"
     763         style="cursorXX: crosshair; background-colorXX: #fefefe; display: none;"
     764         src="{$library_name}/sites/{$site_name}/collect/{$collName}/images/av-diagram-bw--unlabeled.svg" /> 
     765
     766       
     767        <!--
     768        <gsf:variable name="avChartSVGFilename"><xsl:value-of select="$library_name/sites/$site_name/collect/$collName/images/av-diagram-bw.svg"/></gsf:variable>
     769        <svg id="av-chart-svg" width="300" />
     770        <gsf:script>
     771          $(document).ready(function() {
     772            console.log("*****!!!!! svg URL/filename = " + gs.variables.avChartSVGFilename);
     773         
     774            $.ajax({
     775              type: 'GET',
     776              url: gs.variables.avChartSVGFilename,
     777              dataType: 'html'
     778            })
     779            .done(function(data) {
     780            //console.log(data);
     781            //$("#av-chart-svg").append(data);
     782          });
     783          });
     784        </gsf:script>
     785        -->
     786       
     787      </div>
     788      <div id="start-av-recommendation">
     789        <i>Click inside the Arousal-Valence space above to initiate an AV-based recommendation.</i>
     790      </div>
     791
     792    </div>
     793   
     794      </div>
     795
     796           
    732797
    733798            <gsf:variable name="docID"><xsl:value-of select="@nodeID"/></gsf:variable>
    … …  
    787852
    788853                <div style="font-style: italic;">
     854                  <span style="float: right;" class="display-view-modes" onclick="return showAVChart();">Display AV Chart</span>
     855                 
    789856                  <span id="makeRecommendationFrom">
    790857                Based on the start of this musical/sound art work:

  • gs3-installations/mars/trunk/sites/mars/collect/amc-essentia/images/av-diagram-bw.svg

    r36961 r37238  
    77   viewBox="0 0 241.21988 218.35666"
    88   version="1.1"
    9    id="svg5"
     9   id="av-chart-svg"
    1010   inkscape:version="1.1.1 (3bf5ae0d25, 2021-09-20)"
    1111   sodipodi:docname="av-diagram-bw.svg"
    … …  
    127127         y="129.9563">Valence</tspan></text>
    128128    <text
    129        xml:space="preserve"
    130        style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:7.76111px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.264583"
    131        x="126.50086"
    132        y="84.041786"
    133        id="text20211"><tspan
     129    xml:space="preserve"
     130    class="av-label"
     131    style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:7.76111px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.264583"
     132    x="126.50086"
     133    y="84.041786"
     134    id="text20211"><tspan
    134135         sodipodi:role="line"
    135136         id="tspan20209"
    … …  
    183184    <text
    184185       xml:space="preserve"
     186       class="av-label"
    185187       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:7.76111px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.264583"
    186188       x="146.79094"
    … …  
    194196    <text
    195197       xml:space="preserve"
     198       class="av-label"
    196199       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:7.76111px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.264583"
    197200       x="153.586"
    … …  
    205208    <text
    206209       xml:space="preserve"
     210       class="av-label"
    207211       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:7.76111px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.264583"
    208212       x="149.62505"
    … …  
    216220    <text
    217221       xml:space="preserve"
     222       class="av-label"
    218223       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:7.76111px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.264583"
    219224       x="137.6364"
    … …  
    227232    <text
    228233       xml:space="preserve"
     234       class="av-label"
    229235       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:7.76111px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.264583"
    230236       x="127.49834"
    … …  
    238244    <text
    239245       xml:space="preserve"
     246       class="av-label"
    240247       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:7.76111px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.264583"
    241248       x="73.496758"
    … …  
    249256    <text
    250257       xml:space="preserve"
     258       class="av-label"
    251259       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:7.76111px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.264583"
    252260       x="59.920448"
    … …  
    260268    <text
    261269       xml:space="preserve"
     270       class="av-label"
    262271       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:7.76111px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.264583"
    263272       x="47.665573"
    … …  
    271280    <text
    272281       xml:space="preserve"
     282       class="av-label"
    273283       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:7.76111px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.264583"
    274284       x="53.481037"
    … …  
    282292    <text
    283293       xml:space="preserve"
     294       class="av-label"
    284295       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:7.76111px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.264583"
    285296       x="65.833916"
    … …  
    293304    <text
    294305       xml:space="preserve"
     306       class="av-label"
    295307       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:7.76111px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.264583"
    296308       x="75.804062"

  • gs3-installations/mars/trunk/sites/mars/collect/amc-essentia/js/av_document.js

    r37029 r37238  
    454454var av_chart_orig_y_dim = 825;
    455455
    456 var av_chart_disp_x_dim = 300; // ****
     456var av_chart_disp_x_dim = 300; // **** av-chart-width
    457457var av_chart_disp_x_mid = av_chart_disp_x_dim/2.0;
    458458
    … …  
    507507    var disp_y = e.pageY - elem_y_org;
    508508
    509     //console.log(`(disp_x,disp_y) = (${disp_x},${disp_y})`);
     509    console.log(`(disp_x,disp_y) = (${disp_x},${disp_y})`);
    510510    var av_coord = display_to_av_coord(disp_x,disp_y);
    511511    var capped_av_x = av_coord.x;
    … …  
    521521   
    522522    var form = $('#av-query-form')[0];
     523
     524    var clamped_current_time = 6;
     525    AVEnsurePaused();
     526    weka_segment = Math.round(clamped_current_time/3) * 3;
     527    console.log("**** av_chart_click(): dynamically setting form[s1.offset] = " + weka_segment);
     528    form.elements["s1.offset"].value = weka_segment;
    523529   
    524530    submitAVRecommendation(form, capped_av_x, capped_av_y, null);
    525531   
     532}
     533
     534
     535function av_chart_record_click(elem,event)
     536{
     537    console.error("Recording mode to be implemented!")
     538    AVSeekTo(0);
     539    AVPlayPause();
     540    if (wavesurfer.backend.isPaused()) {
     541    alert("Sorry, capturing and saving of AV values not currently implemented!");
     542    }
    526543}
    527544
    … …  
    554571function showAVChart()
    555572{
    556     $('#av-chart-outerdiv').slideDown();
    557     $('#show-av-chart').hide();
    558     $('#hide-av-chart').show();
    559 
     573    if ($('#av-chart-outerdiv').is(":hidden")) {
     574    var wave_form_height = $('#waveform').height();
     575   
     576    $('#waveform')
     577        .css("transform-origin","top")
     578        .css("transform","scale(1.0,0.5)")
     579        .height(wave_form_height/2.0);
     580   
     581   
     582    $('#av-chart-img-unlabeled').hide();
     583    $('#av-chart-img').show();
     584
     585    $('#start-av-recommendation').show();
     586    $('#start-av-recording').hide();
     587
     588    $('#av-chart-outerdiv').slideDown();
     589    $('#show-av-chart').hide();
     590    $('#hide-av-chart').show();
     591    }
     592   
    560593    return false;
    561594}
    … …  
    563596function hideAVChart()
    564597{
    565     $('#av-chart-outerdiv').slideUp();
    566     $('#hide-av-chart').hide();
    567     $('#show-av-chart').show();
    568 
     598    if ($('#av-chart-outerdiv').is(':visible')) {
     599
     600    // Slide up the chart display area
     601    $('#av-chart-outerdiv').slideUp(function() {
     602
     603        // Reset what is being display to the default (the av-chart, not the record one)
     604        $('#av-chart-img-unlabeled').hide();
     605        $('#av-chart-img').show();
     606
     607        $('#start-av-recommendation').show();
     608        $('#start-av-recording').hide();
     609    });
     610   
     611    // Fix up the labels
     612   
     613    $('#hide-av-chart').hide();
     614    $('#show-av-chart').show();
     615
     616
     617    // Restore the renderWave/Frequency height
     618
     619    const doc_url = new URL(window.location);
     620    var renderWave = doc_url.searchParams.get('renderWave');
     621   
     622    if (renderWave && renderWave == 1) {
     623        $('#waveform').find('wave canvas').css("display","block");
     624    }
     625    var wave_form_height = $('#waveform').height();
     626    $('#waveform')
     627        .height(wave_form_height*2.0)
     628        .css("transform","scale(1.0,1.0)")
     629    }
     630   
    569631    return false;
    570632}
    571633
     634
     635
     636function loginToRecord()
     637{
     638
     639    if (gs.variables.loggedInUsername == "") {
     640    // Example login redirect
     641    //   https://www.greenstone.org/greenstone3/library?a=p&sa=login&redirectURL=library%3Fa=p%26sa=about%26c=kjcoll%26favouritebasket=on
     642
     643    var this_url = new URL(window.location)
     644    this_url.searchParams.set('showRecordAV', '1');
     645    var encoded_this_url = encodeURIComponent(this_url.href);
     646   
     647    var base_url = window.location.origin + window.location.pathname;
     648   
     649    window.location.href = base_url + "?a=p&sa=login&redirectURL=" + encoded_this_url;
     650    }
     651    else {
     652    /*
     653    var av_chart_svg = document.getElementById("av-chart-svg");
     654    //get the inner DOM of alpha.svg
     655    var svgDoc = av_chart_svg.contentDocument;
     656
     657    //get the inner element by id
     658    var av_labels = svgDoc.getElementClass("av-label");
     659    var $av_labels = $(av_labels);
     660
     661    $av_labels.css("display","none");
     662    */
     663
     664    //console.log("Away to hide standard av-chart-img and show av-chart-img-unlabeled");
     665
     666
     667
     668    if ($('#av-chart-outerdiv').is(":hidden")) {
     669       
     670        const doc_url = new URL(window.location);
     671        var renderWave = doc_url.searchParams.get('renderWave');
     672
     673        if (renderWave && renderWave == 1) {
     674        $('#waveform').find('wave canvas').css("display","none");
     675        }
     676        var wave_form_height = $('#waveform').height();
     677       
     678        $('#waveform')
     679        .css("transform-origin","top")
     680        .css("transform","scale(1.0,0.5)")
     681        .height(wave_form_height/2.0);
     682    }
     683   
     684    // Ensure the RecordAV Chart if showing
     685    if ($('#av-chart-img-unlabeled').is(":hidden")) {
     686
     687        // Ensure it is the RecordAV chart that is shown
     688        $('#av-chart-img').hide();
     689        $('#av-chart-img-unlabeled').show();
     690
     691        $('#start-av-recommendation').hide();
     692        $('#start-av-recording').show();
     693
     694        // Which is then slid-down
     695        $('#av-chart-outerdiv').slideDown();
     696
     697        // Fix up the control label
     698        $('#show-av-chart').hide();
     699        $('#hide-av-chart').show();
     700    }
     701       
     702    }
     703
     704}
     705
     706// circ_.* parameters express position of the circle, relative to the top-left position of the elem
     707function mouse_xy_to_av(elem,event,circ_x_org,circ_y_org,circ_radius)
     708{
     709    //var circ_x_org = 183;
     710    //var circ_y_org = 194;
     711    //var circ_radius = 130;
     712   
     713    var relX = event.pageX - $(elem).offset().left;
     714    var relY = event.pageY - $(elem).offset().top;
     715   
     716    var valenceVal = -1 * (circ_x_org - relX) / circ_radius;
     717    var arousalVal = +1 * (circ_y_org - relY) / circ_radius;
     718   
     719    var avRadius = Math.sqrt(valenceVal*valenceVal + arousalVal*arousalVal);
     720
     721    return { 'valence': valenceVal, 'arousal': arousalVal, 'avRadius': avRadius };
     722}
     723
     724   
    572725$(document).ready(function() {
    573726
     727    console.log(`loggedInUsername = '${gs.variables.loggedInUsername}'`);
     728    if (gs.variables.loggedInUsername != "") {
     729    $('#login-to-record-av').hide();
     730    $('#record-av').show();
     731
     732    var this_url = new URL(window.location);
     733    var show_record_av = this_url.searchParams.get("showRecordAV");
     734
     735   
     736    if (show_record_av && show_record_av == 1) {
     737        loginToRecord();
     738    }
     739       
     740    }
     741
     742    //var arg_add = (window.location.search != "")  ? "&" : "?";   
     743    //$('#record-av-logout').attr("href",window.location.href + arg_add + "logout=");
     744
     745    var $record_av_logout = $('#record-av-logout');
     746   
     747    //record_av_logout_url = new URL($record_av_logout.attr("href"));   
     748    record_av_logout_url = new URL(window.location);   
     749    record_av_logout_url.searchParams.set('logout', '');
     750    record_av_logout_url.searchParams.set('showRecordAV', '0');
     751    $record_av_logout.attr("href",record_av_logout_url.href);
     752         
    574753    initPlayerVisual();
    575754   
    576     $('#av-chart-img').on("click",function(e) { av_chart_click(this,e) } );
     755    $('#av-chart-img').on("click",function(event) {
     756    av_chart_click(this,event)
     757    });
     758
     759    $('#av-chart-img').on("mousemove",function(event) {
     760    var circ_x_org = 137;
     761    var circ_y_org = 145;
     762    //var circ_radius = 234 - 137;
     763    var circ_radius = 97;
     764   
     765    //var relX = event.pageX - $(this).offset().left;
     766        //var relY = event.pageY - $(this).offset().top;
     767
     768    //var recValenceVal = -1 * (circ_x_org - relX) / circ_radius;
     769    //var recArousalVal = +1 * (circ_y_org - relY) / circ_radius;
     770
     771
     772    //var avRadius = Math.sqrt(recValenceVal*recValenceVal + recArousalVal*recArousalVal);
     773
     774    var av_rec = mouse_xy_to_av(this,event,circ_x_org,circ_y_org,circ_radius);
     775
     776    var recValenceVal = av_rec.valence;
     777    var recArousalVal = av_rec.arousal;
     778    var avRadius      = av_rec.avRadius;
     779   
     780    var recAVInside = (avRadius <= 1.0);
     781
     782    if (recAVInside) {
     783        var roundedA = Math.round(recArousalVal * 100) / 100
     784        var roundedV = Math.round(recValenceVal * 100) / 100
     785
     786        var relBoxCoords = "AV coord: (" + roundedV + "," + roundedA + ")";
     787            $("#av-recording-coords").text(relBoxCoords);
     788    }
     789   
     790    if (recAVInside != prevRecAVInside) {
     791        if (recAVInside) {
     792        // crosshairs on
     793        $('#av-chart-img').css("cursor","crosshair");
     794        }
     795        else {
     796        // revert
     797        $('#av-chart-img').css("cursor","default");
     798        }
     799    }
     800
     801    prevRecAVInside = recAVInside;
     802    });
     803
     804
     805   
     806    $('#av-chart-img-unlabeled').on("click",function(event) {
     807    av_chart_record_click(this,event);
     808    //console.error("Recording mode to be implemented!")
     809    //AVSeekTo(0);
     810    //AVPlayPause();
     811    //if (wavesurfer.backend.isPaused()) {
     812    //    alert("Sorry, capturing and saving of AV values not currently implemented!");
     813    //}
     814    });
     815
     816   
     817    var prevRecAVInside   = true;
     818   
     819    $('#av-chart-img-unlabeled').on("mousemove",function(event) {
     820
     821    var circ_x_org = 183;
     822    var circ_y_org = 194;
     823    var circ_radius = 130;
     824   
     825    //var relX = event.pageX - $(this).offset().left;
     826        //var relY = event.pageY - $(this).offset().top;
     827
     828    //var recValenceVal = -1 * (circ_x_org - relX) / circ_radius;
     829    //var recArousalVal = +1 * (circ_y_org - relY) / circ_radius;
     830
     831
     832    //var avRadius = Math.sqrt(recValenceVal*recValenceVal + recArousalVal*recArousalVal);
     833
     834    var av_rec = mouse_xy_to_av(this,event,circ_x_org,circ_y_org,circ_radius);
     835
     836    var recValenceVal = av_rec.valence;
     837    var recArousalVal = av_rec.arousal;
     838    var avRadius      = av_rec.avRadius;
     839   
     840    var recAVInside = (avRadius <= 1.0);
     841
     842    if (recAVInside) {
     843        var roundedA = Math.round(recArousalVal * 100) / 100
     844        var roundedV = Math.round(recValenceVal * 100) / 100
     845
     846        var relBoxCoords = "AV coord: (" + roundedV + "," + roundedA + ")";
     847            $("#av-recording-coords").text(relBoxCoords);
     848    }
     849   
     850    if (recAVInside != prevRecAVInside) {
     851        if (recAVInside) {
     852        // crosshairs on
     853        //$('#av-chart-img-unlabeled').css("cursor","crosshair");
     854        var crosshair_record_url = gs.variables.collImagesURL + "/font_awesome--crosshair-red32.png";
     855        //console.log("crosshair_record_url = " + crosshair_record_url);
     856        //console.log("url('"+crosshair_record_url+"') 16 16, crosshair");
     857       
     858        $('#av-chart-img-unlabeled').css("cursor","url('"+crosshair_record_url+"') 16 16, crosshair");
     859        }
     860        else {
     861        // revert
     862        $('#av-chart-img-unlabeled').css("cursor","default");
     863        }
     864    }
     865
     866    prevRecAVInside = recAVInside;
     867    });
     868   
    577869});
    578          
     870
     871// A circumplex model of affect.
     872//   https://psycnet.apa.org/record/1981-25062-001
     873
     874
     875// Russell, J. A. (1980). A circumplex model of affect. Journal of Personality and Social Psychology, 39(6), 1161–1178.
     876// https://doi.org/10.1037/h0077714
Note: See TracChangeset for help on using the changeset viewer.