Changeset 17772 for trunk/FACT++/www


Ignore:
Timestamp:
05/04/14 15:27:19 (11 years ago)
Author:
tbretz
Message:
Added the possibility to load calibrated files, added a slider with histograms whihc correspond to the camera displays; added the possibility to right-click-save the images; make sure all pixel values are within range.
File:
1 edited

Legend:

Unmodified
Added
Removed

  • trunk/FACT++/www/viewer/index.js

    r17746 r17772  
    11'use strict';
     2
     3// ==========================================================================
     4
     5function onRightMouseClick(event)
     6{
     7    if (event.button!=2)
     8        return;
     9
     10    var strData = event.target.toDataURL("image/png");
     11
     12    var img = document.createElement("img");
     13    img.src = strData;
     14
     15    $(img).css({ "z-index": "9999", "position": "absolute" });
     16    $(img).insertBefore($(event.target));
     17
     18    setTimeout(function () { $(img).remove(); }, 100);
     19}
     20
     21(function ($)
     22 {
     23
     24    $.plot.plugins.push({
     25        init: function(plot, classes)
     26            {
     27                plot.hooks.bindEvents.push(function(plot, eventHolder) { eventHolder.mousedown(onRightMouseClick); });
     28                plot.hooks.shutdown.push(function(plot, eventHolder) { eventHolder.unbind("mousedown", onRightMouseClick); });
     29            },
     30        name: 'saveAsImage',
     31        version: '1.0'
     32    });
     33
     34 })(jQuery);
     35
     36// ==========================================================================
    237
    338var editor1;
    … …  
    4984}
    5085
    51 function onResizeCenter(event, ui)
    52 {
    53     var w = document.getElementById("cameracontainer").clientWidth/4;
     86function setSize(id, w, h)
     87{
     88    w = parseInt(w);
     89    h = parseInt(h);
     90
     91    $("#"+id).width(w);
     92    $("#"+id).height(h);
     93
     94    document.getElementById(id).width=w;
     95    document.getElementById(id).height=h;
     96}
     97
     98function onResizeGrid(id)
     99{
     100    var w = document.getElementById(id+"container").clientWidth/4;
    54101
    55102    var offy = 0;
    56103    var offx = 5;
    57104
    58     var cont = document.getElementById("center").childNodes[0];
     105    var cont = document.getElementById("center"+id).childNodes[0];
    59106
    60107    var nn;
    … …  
    62109    {
    63110        nn = parseInt(cont.id[cont.id.length-1]);
    64 
    65         document.getElementById("camera"+nn).height=parseInt(w*2);
    66         document.getElementById("camera"+nn).width=parseInt(w*2);
     111        setSize(id+nn, w*2, w*2);
    67112    }
    68113
    69114    if (nn!=1)
    70     {
    71         document.getElementById("camera1").height=parseInt(w)-offy;
    72         document.getElementById("camera1").width=parseInt(w)-offx;
    73     }
    74 
     115        setSize(id+'1', w-offx, w-offy);
    75116    if (nn!=2)
    76     {
    77         document.getElementById("camera2").height=parseInt(w)-offy;
    78         document.getElementById("camera2").width=parseInt(w)-offx;
    79     }
    80 
     117        setSize(id+'2', w-offx, w-offy);
    81118    if (nn!=3)
    82     {
    83         document.getElementById("camera3").height=parseInt(w)-offy;
    84         document.getElementById("camera3").width=parseInt(w)-offx;
    85     }
    86 
     119        setSize(id+'3', w-offx, w-offy);
    87120    if (nn!=4)
    88     {
    89         document.getElementById("camera4").height=parseInt(w)-offy;
    90         document.getElementById("camera4").width=parseInt(w)-offx;
    91     }
    92 
    93     document.getElementById("center").width=parseInt(w*2);
    94 
    95     document.getElementById("cont1").width=parseInt(w);
    96     document.getElementById("cont2").width=parseInt(w);
    97     document.getElementById("cont3").width=parseInt(w);
    98     document.getElementById("cont4").width=parseInt(w);
    99 
    100     document.getElementById("cont1").height=parseInt(w);
    101     document.getElementById("cont2").height=parseInt(w);
    102     document.getElementById("cont3").height=parseInt(w);
    103     document.getElementById("cont4").height=parseInt(w);
     121        setSize(id+'4', w-offx, w-offy);
     122
     123    document.getElementById("center"+id).width=parseInt(w*2);
     124
     125    setSize('cont'+id+'1', w, w);
     126    setSize('cont'+id+'2', w, w);
     127    setSize('cont'+id+'3', w, w);
     128    setSize('cont'+id+'4', w, w);
     129}
     130
     131function onResizeCameras(event, ui)
     132{
     133    onResizeGrid('camera');
    104134
    105135    drawFullCam("camera1");
    … …  
    107137    drawFullCam("camera3");
    108138    drawFullCam("camera4");
     139}
     140
     141function onResizeHistograms(event, ui)
     142{
     143    onResizeGrid('hist');
    109144}
    110145
    … …  
    182217    $('#cbpx-x').prop('disabled', disabled);
    183218    $('#file').prop('disabled', disabled);
     219
     220    if (disabled)
     221        $('#calibrated').prop('disabled', true);
     222    else
     223    {
     224        var list = document.getElementById("file").data;
     225        if (list)
     226        {
     227            var file = document.getElementById("file").value;
     228            $('#calibrated').prop('disabled', !list[file]);
     229        }
     230    }
    184231}
    185232
    … …  
    228275    $("#textcontainer2").on("resize", onResize);
    229276
    230     $("#cameracontainer").on("resize", onResizeCenter);
    231     onResizeCenter();
    232 
    233     $("#cont1").click(onClickNew);
    234     $("#cont2").click(onClickNew);
    235     $("#cont3").click(onClickNew);
    236     $("#cont4").click(onClickNew);
     277    $("#cameracontainer").on("resize", onResizeCameras);
     278    onResizeCameras();
     279
     280    $("#histcontainer").on("resize", onResizeHistograms);
     281    onResizeHistograms();
     282
     283    $("#contcamera1").click(onClickContCamera);
     284    $("#contcamera2").click(onClickContCamera);
     285    $("#contcamera3").click(onClickContCamera);
     286    $("#contcamera4").click(onClickContCamera);
     287
     288    $("#conthist1").click(onClickContHist);
     289    $("#conthist2").click(onClickContHist);
     290    $("#conthist3").click(onClickContHist);
     291    $("#conthist4").click(onClickContHist);
    237292
    238293    $("#camera1").click(onClick);
    … …  
    241296    $("#camera4").click(onClick);
    242297
     298    $('#camera1').mousedown(onRightMouseClick);
     299    $('#camera2').mousedown(onRightMouseClick);
     300    $('#camera3').mousedown(onRightMouseClick);
     301    $('#camera4').mousedown(onRightMouseClick);
     302
    243303    editor1 = createEditor("editor1");
    244304    editor2 = createEditor("editor2");
    … …  
    251311
    252312    setupAccordion('#accordion2', '#cameracontainer');
     313    setupAccordion('#accordion7', '#histcontainer');
    253314    setupAccordion('#accordion3', '#waveformcontainer');
    254315    setupAccordion('#accordion4', '#helpcontainer', true);
    … …  
    272333function onFileSelect(event, ui)
    273334{
     335    var list = document.getElementById("file").data;
     336    var file = ui.item.value;
     337
     338    $('#calibrated').prop('disabled', !list[file]);
     339    if (!list[file])
     340        $('#calibrated').prop('checked', false);
     341
    274342    document.getElementById("event").value = 0;
    275343    onSubmit(ui.item.value);
    … …  
    295363    }
    296364
     365    document.getElementById("file").data = rc;
     366
     367    var list = [ ];
     368    for (var file in rc)
     369        list.push(file);
     370
    297371    var opts =
    298372    {
    299         source: rc,
     373        source: list,
    300374        select: onFileSelect,
    301375        position: { my: "right top", at: "right bottom", collision: "flipfit" },
    … …  
    328402}
    329403
    330 function processCameraData(id, data)
    331 {
    332     var canv = document.getElementById(id);
     404function drawHist(n)
     405{
     406    var canv = document.getElementById("camera"+n);
     407    var hist = document.getElementById("hist"+n);
     408
     409    var xmin  = parseFloat(document.getElementById("histmin"+n).value);
     410    var xmax  = parseFloat(document.getElementById("histmax"+n).value);
     411    var nbins = 100;//parseInt(xmax-xmin);
     412    var step  = (xmax-xmin)/nbins;
     413    if (step<1)
     414    {
     415        step = 1;
     416        nbins = parseInt(xmax-xmin)+1;
     417    }
     418
     419    var bins = new Array(nbins);
     420    for (var i=0; i<nbins; i++)
     421        bins[i] = [ xmin+i*step, 0 ];
     422
     423    var data = canv.dataAbs;
     424    for (var i=0; i<1440; i++)
     425        if (data[i]!==undefined && data[i]!==null)
     426        {
     427            var ix = parseInt((data[i]-xmin)/step);
     428            if (ix>=0 && ix<nbins)
     429                bins[ix][1] ++;
     430        }
     431
     432    var opts =
     433    {
     434        grid: {
     435            hoverable: true,
     436        }
     437    };
     438
     439    var hist = $.plot("#hist"+n, [ { data:bins, bars: {show:true} } ], opts);
     440    $('#hist'+n).bind("plothover", function (event, pos, item)
     441                      {
     442                          if (!item)
     443                          {
     444                              $("#tooltip").fadeOut(100);
     445                              return;
     446                          }
     447
     448                          var x = item.datapoint[0].toFixed(2);
     449                          var y = item.datapoint[1].toFixed(2);
     450
     451                          var tooltip = $("#tooltip");
     452                          tooltip.html(parseInt(x) + " / " + y);
     453                          tooltip.css({top: item.pageY-20, left: item.pageX+5});
     454                          tooltip.fadeIn(200);
     455                      });
     456
     457
     458}
     459
     460function processCameraData(n, data)
     461{
     462    var canv = document.getElementById("camera"+n);
    333463
    334464    canv.dataAbs = new Array(1440);
    … …  
    345475            canv.dataRel[i] = (data[i]-canv.min)/canv.max;
    346476
    347     var n = id[id.length-1];
    348 
    349477    if (document.getElementById("cameraminon"+n).checked)
    350478        document.getElementById("cameramin"+n).value = canv.min;
    351479    if (document.getElementById("cameramaxon"+n).checked)
    352480        document.getElementById("cameramax"+n).value = canv.max;
     481
     482    // ---------------------------
     483
     484    var hist = document.getElementById("hist"+n);
     485
     486    hist.min = canv.min;
     487    hist.max = canv.max;
     488
     489    if (document.getElementById("histminon"+n).checked)
     490        document.getElementById("histmin"+n).value = canv.min;
     491    if (document.getElementById("histmaxon"+n).checked)
     492        document.getElementById("histmax"+n).value = canv.max;
     493
     494    drawHist(n);
    353495}
    354496
    … …  
    419561    }
    420562
    421     var canv = document.getElementById("camera1");
    422 
    423563    if (rc.debug!==undefined)
    424564    {
    … …  
    434574    {
    435575        if (rc.ret[0] instanceof Object)
    436             processCameraData("camera1", rc.ret[0]);
     576            processCameraData(1, rc.ret[0]);
    437577        else
    438             processCameraData("camera1", rc.ret);
     578            processCameraData(1, rc.ret);
    439579
    440580        if (rc.ret.length>1)
    441             processCameraData("camera2", rc.ret[1]);
     581            processCameraData(2, rc.ret[1]);
    442582
    443583        if (rc.ret.length>2)
    444             processCameraData("camera3", rc.ret[2]);
     584            processCameraData(3, rc.ret[2]);
    445585
    446586        if (rc.ret.length>3)
    447             processCameraData("camera4", rc.ret[3]);
     587            processCameraData(4, rc.ret[3]);
    448588    }
    449589
    … …  
    454594    onCameraMinMax(4);
    455595
    456     //if (canv.dataAbs && evt)
    457     //    document.getElementById("value").value = canv.dataAbs[evt.pixel];
    458 
    459596    debug("Total time = "+(rc.timePhp*1000).toFixed(1)+" ms");
    460597    debug("Peak memory = "+rc.memory+" MiB");
    … …  
    466603
    467604        var data = [
    468                     new Array(evt.numRoi),
    469                     new Array(evt.numRoi),
    470                     new Array(evt.numRoi),
    471                     new Array(evt.numRoi)
     605                    { label: "[0] ", data: new Array(evt.numRoi) },
     606                    { label: "[1] ", data: new Array(evt.numRoi) },
     607                    { label: "[2] ", data: new Array(evt.numRoi) },
     608                    { label: "[3] ", data: new Array(evt.numRoi) },
    472609                    ];
    473610
    … …  
    479616            max.push(Math.max.apply(Math, rc.waveform));
    480617
     618            var d = data[0].data;
    481619            for (var i=0; i<evt.numRoi; i++)
    482                 data[0][i] = [ i, rc.waveform[i] ];
     620                d[i] = [ i, rc.waveform[i] ];
    483621
    484622            waveform.data[0] = rc.waveform;
    … …  
    494632                max.push(Math.max.apply(Math, ref));
    495633
     634                var d = data[j].data;
    496635                for (var i=0; i<evt.numRoi; i++)
    497                     data[j][i] = [ i, ref[i] ];
     636                    d[i] = [ i, ref[i] ];
    498637
    499638                waveform.data[j] = ref;
    … …  
    573712                          var x = item.datapoint[0].toFixed(2);
    574713                          var y = item.datapoint[1].toFixed(2);
    575                           //item.series.label
    576714
    577715                          var tooltip = $("#tooltip");
    578                           tooltip.html(parseInt(x) + " / " + y);
     716                          tooltip.html(parseInt(x) + " / " + y+"  "+item.series.label);
    579717                          tooltip.css({top: item.pageY-20, left: item.pageX+5});
    580718                          tooltip.fadeIn(200);
    … …  
    582720    }
    583721
    584     //$("#accordion").accordion("refresh");
    585722}
    586723
    … …  
    601738    }
    602739
     740    var calibrated = document.getElementById("calibrated");
     741    var calib   = !calibrated.disabled && calibrated.checked;
    603742    var event   = document.getElementById("event").value;
    604743    var pixel   = document.getElementById("pixel").value;
    … …  
    610749    if (!pixelOnly)
    611750        uri += "&source2="+encodeURIComponent(source2);
     751    if (calib)
     752        uri += "&calibrated=1";
    612753
    613754    $.ajax({
    … …  
    661802}
    662803
     804function checkPixel()
     805{
     806    var pix  = parseInt(document.getElementById("pixel").value);
     807    var c    = parseInt(document.getElementById("cbpx-c").value);
     808    var b    = parseInt(document.getElementById("cbpx-b").value);
     809    var p    = parseInt(document.getElementById("cbpx-p").value);
     810    var x    = parseInt(document.getElementById("cbpx-x").value);
     811    var cbpx = parseInt(document.getElementById("cbpx").value);;
     812
     813    if (pix >=0 && pix <1440 &&
     814        c   >=0 && c   <   4 &&
     815        b   >=0 && b   <  10 &&
     816        p   >=0 && p   <   4 &&
     817        x   >=0 && x   <   9 &&
     818        cbpx>=0 && cbpx<1440)
     819        return;
     820
     821    document.getElementById("pixel").value = 0;
     822    document.getElementById("cbpx-c").value = 1;
     823    document.getElementById("cbpx-b").value = 0;
     824    document.getElementById("cbpx-p").value = 3;
     825    document.getElementById("cbpx-x").value = 6;
     826    document.getElementById("cbpx").value = 393;
     827}
     828
     829
    663830function onPixel()
    664831{
     832    checkPixel();
     833
    665834    var p = parseInt(document.getElementById("pixel").value);
    666835
    … …  
    678847function onCBPX()
    679848{
     849    checkPixel();
     850
    680851    var c = parseInt(document.getElementById("cbpx-c").value);
    681852    var b = parseInt(document.getElementById("cbpx-b").value);
    … …  
    693864function onHW()
    694865{
     866    checkPixel();
     867
    695868    var cbpx = parseInt(document.getElementById("cbpx").value);;
    696869
    … …  
    776949}
    777950
    778 var inprogress = 0;
    779 function moveAnimate(n, target)
    780 {
    781     if (inprogress==n || inprogress<0)
     951var inprogress = { };
     952function moveElement(id, n, target, callback)
     953{
     954    if (inprogress[id]==n || inprogress[id]<0)
    782955        return;
    783956
    784     inprogress = target ? -n : n;
    785 
    786     var element   = $("#camera"+n); //Allow passing in either a JQuery object or selector
    787     var newParent = $(target ? target : "#cont"+n); //Allow passing in either a JQuery object or selector
     957    inprogress[id] = target ? -n : n;
     958
     959    var element   = $("#"+id+n); //Allow passing in either a JQuery object or selector
     960    var newParent = $(target ? target : "#cont"+id+n); //Allow passing in either a JQuery object or selector
    788961
    789962    var oldOffset = element.offset();
    … …  
    804977    {
    805978        temp = temp.appendTo(newParent);
    806         temp.css('position', 'default');
     979        temp.css('position', 'relative');
    807980        temp.css('width', 'default');
    808981        temp.css('height', 'default');
    … …  
    810983        temp.css('top', '0');
    811984
    812         var canv = document.getElementById("camera"+n);
    813 
    814         canv.width = w;
    815         canv.height = h;
    816 
    817         drawFullCam("camera"+n);
    818 
    819         inprogress = 0;
     985        setSize(id+n, w, h);
     986
     987        if (callback)
     988            callback(id+n);
     989
     990        inprogress[id] = 0;
    820991    });
    821992}
    822993
    823 function onClickNew(event)
     994function onClickCont(event, callback)
    824995{
    825996    var id = event.target.id;
     997    if (!id)
     998        id = event.target.parentNode.id;
     999
    8261000    var n = parseInt(id[id.length-1]);
    827 
    828     if (id.substr(0, 3)=="cam")
    829     {
    830         var cont = document.getElementById("center").childNodes[0];
     1001    var type = id.substr(0, id.length-1);
     1002
     1003    if (id.substr(0, 4)=="cont")
     1004        id = id.substr(4, id.length-4);
     1005    if (type.substr(0, 4)=="cont")
     1006        type = type.substr(4, type.length-4);
     1007
     1008    if (id.substr(0, type.length)==type)
     1009    {
     1010        var cont = document.getElementById("center"+type).childNodes[0];
    8311011        if (cont)
    8321012        {
    8331013            var nn = parseInt(cont.id[cont.id.length-1]);
    834             moveAnimate(nn);
     1014            moveElement(type, nn, null, callback);
    8351015        }
    836         moveAnimate(n, "#center");
     1016        moveElement(type, n, "#center"+type, callback);
    8371017
    8381018    }
    8391019    else
    840         moveAnimate(n);
     1020        moveElement(type, n, null, callback);
     1021
     1022}
     1023
     1024function onClickContCamera(event)
     1025{
     1026    onClickCont(event, function(el) { drawFullCam(el); });
     1027}
     1028
     1029function onClickContHist(event)
     1030{
     1031    onClickCont(event);
    8411032}
    8421033
    8431034function onClick(event)
    8441035{
    845     var cont = document.getElementById("center").childNodes[0];
     1036    var cont = document.getElementById("centercamera").childNodes[0];
    8461037    if (!cont)
    8471038        return;
    … …  
    8781069}
    8791070
     1071function onMinMax(id, n)
     1072{
     1073    var el = document.getElementById(id+n);
     1074
     1075    el.zmin = document.getElementById(id+"min"+n).value;
     1076    el.zmax = document.getElementById(id+"max"+n).value;
     1077}
     1078
    8801079function onCameraMinMax(n)
    8811080{
    882     var canv = document.getElementById("camera"+n);
    883 
    884     canv.zmin = document.getElementById("cameramin"+n).value;
    885     canv.zmax = document.getElementById("cameramax"+n).value;
    886 
     1081    onMinMax("camera", n);
    8871082    drawFullCam("camera"+n);
    8881083}
    8891084
     1085function onHistMinMax(n)
     1086{
     1087    onMinMax("hist", n);
     1088    drawHist(n);
     1089}
     1090
     1091function onMinMaxOn(id, n)
     1092{
     1093    var el = document.getElementById(id+n);
     1094
     1095    var redraw;
     1096    if (document.getElementById(id+"minon"+n).checked)
     1097    {
     1098        document.getElementById(id+"min"+n).setAttribute("disabled", "true");
     1099        document.getElementById(id+"min"+n).value = el.min;
     1100        redraw = true;
     1101    }
     1102    else
     1103        document.getElementById(id+"min"+n).removeAttribute("disabled");
     1104
     1105    if (document.getElementById(id+"maxon"+n).checked)
     1106    {
     1107        document.getElementById(id+"max"+n).setAttribute("disabled", "true");
     1108        document.getElementById(id+"max"+n).value = el.max;
     1109        redraw = true;
     1110    }
     1111    else
     1112        document.getElementById(id+"max"+n).removeAttribute("disabled");
     1113
     1114    return redraw;
     1115}
     1116
    8901117function onCameraMinMaxOn(n)
    8911118{
    892     var canv = document.getElementById("camera"+n);
    893 
    894     var redraw;
    895     if (document.getElementById("cameraminon"+n).checked)
    896     {   
    897         document.getElementById("cameramin"+n).setAttribute("disabled", "true");
    898         document.getElementById("cameramin"+n).value = canv.min;
    899         redraw = true;
    900     }
    901     else
    902         document.getElementById("cameramin"+n).removeAttribute("disabled");
    903 
    904     if (document.getElementById("cameramaxon"+n).checked)
    905     {
    906         document.getElementById("cameramax"+n).setAttribute("disabled", "true");
    907         document.getElementById("cameramax"+n).value = canv.max;
    908         redraw = true;
    909     }
    910     else
    911         document.getElementById("cameramax"+n).removeAttribute("disabled");
    912 
    913     if (redraw)
     1119    if (onMinMaxOn("camera", n))
    9141120        onCameraMinMax(n);
     1121}
     1122
     1123function onHistMinMaxOn(n)
     1124{
     1125    if (onMinMaxOn("hist", n))
     1126        onHistMinMax(n);
    9151127}
    9161128
    … …  
    12091421    ctx.strokeText(lmin, 5+mw, 5);
    12101422}
    1211 
Note: See TracChangeset for help on using the changeset viewer.