Changeset 0e8bd1a04f661325a5fb9704e87676ea68684a3d

Show
Ignore:
Timestamp:
06/23/09 15:49:31 (5 years ago)
Author:
Umar Farooq <umar@omniti.com>
git-committer:
Umar Farooq <umar@omniti.com> 1245772171 +0000
git-parent:

[e6f58b6478b569791ece58432e21361e6f2e85c2]

git-author:
Umar Farooq <umar@omniti.com> 1245772171 +0000
Message:

replacing streaming controls for graph editing and permalinked graphs, refs #146

Files:

Legend:

Unmodified
Added
Removed
Modified
Copied
Moved
  • ui/web/htdocs/css/style.css

    re6f58b6 r0e8bd1a  
    916916font-weight: bold; 
    917917color:#660000; 
     918} 
     919span.stream_controls .play_pause{ 
     920padding: 10px; 
     921} 
     922span.stream_controls .stopstream{ 
     923padding: 10px; 
    918924} 
    919925span.zoomStream { 
  • ui/web/htdocs/graph_panel.inc

    re6f58b6 r0e8bd1a  
    44var current_graph_id = ''; 
    55var debug_graph_edit = false; 
    6 var graphinfo= {streaming: false}; //this streaming boolean keeps track of the graphpanel stream button 
     6var graphinfo= {};  
    77var displayinfo = { start : 14*86400, cnt: '', end: '' }; 
    88var color_pool = Array('#33aa33','#4a00dc','#caac00','#3377cc','#00acfa','#cc3333') 
     
    5757 
    5858function stop_streaming_graph (){ 
    59          graphinfo.streaming = false; 
    6059         streaming = false; 
    6160         $('#streambox').html(''); 
    62          $(".streamData").html('Stream Data').fadeIn('slow'); 
    6361         $(".stream-log").attr("style", "display:none;"); 
     62         $("#graph_datetool").css("display", ""); 
     63         $(".play_pause").html('PLAY'); 
    6464} 
    6565//overlay mode: stackadd=false: we just add new stacks for any the incoming graph has 
     
    100100 
    101101function set_current_graph_id(id) { 
     102  streaming = false; //precautionary 
    102103  $(".rememberGraph").fadeOut('fast'); 
    103104  if(id!='')  { 
     
    111112    unlock_forms();     
    112113    $(".editGraph").html('Editing!').fadeIn('slow'); 
    113     $('#streambox').html(''); 
    114     $(".streamData").html('Stream Data').fadeIn('slow'); 
    115     $(".stream-log").attr("style", "display:none;"); 
     114    stop_streaming_graph(); 
    116115  } 
    117116  current_graph_id = id; 
     
    385384<span class="rememberGraph"></span> 
    386385<span class="blankGraph">New Blank</span> 
    387 <span class="streamData ">Stream Data</span> 
     386<span class="stream_controls"> 
     387<span class="play_pause">PLAY</span> 
     388<span class="stopstream">STOP</span> 
     389</span> 
    388390<span class="editGraph">Edit Graph</span> 
    389391<span class="permalink" id="gpermalink"><a href="">Link</a></span> 
     
    406408        //only allow graph editing if not streaming 
    407409        $(".editGraph").click(function() {       
    408             if(!graphinfo.streaming){ 
     410            if(!streaming){ 
    409411                if(locked){ 
    410412                    locked = false;                  
     
    430432       });                                               
    431433         
    432         //only allow stream toggling if the graph is locked and saved 
    433         $(".streamData").click(function() { 
    434                if(locked && graphinfo.saved) { 
    435                     if(!graphinfo.streaming) { 
    436                         graphinfo.streaming = true; 
    437                         $(this).html('Streaming!').fadeIn('slow'); 
    438                         $(".stream-log").removeAttr("style").html("stream log_"); 
    439                         stream_data(graphinfo.id, maingraph, $('#streambox')); 
    440                     } 
    441                     else if(graphinfo.streaming) { 
    442                         stop_streaming_graph(); 
    443                         update_current_graph(true); 
    444                     } 
    445               } 
    446         }); 
     434       //only allow stream toggling if the graph is locked and saved 
     435       $(".play_pause").click(function() { 
     436         if(locked && graphinfo.saved) { 
     437          if($(this).html() == 'PLAY') { 
     438            $(this).html('PAUSE'); 
     439            //if we are playing for the frist time 
     440            if(!streaming) { 
     441              $('#graph_datetool').css("display", "none"); 
     442              $(".stream-log").removeAttr("style").html("stream log_"); 
     443            } 
     444            //setup/restart the plotting 
     445            stream_data(graphinfo.id, maingraph, $('#streambox')); 
     446          } 
     447          else if($(this).html() == 'PAUSE') { 
     448             $(this).html('PLAY'); 
     449             //this is where we pause for a bit 
     450             maingraph.stopTime(); 
     451          } 
     452        } 
     453       }); 
     454 
     455       $(".stopstream").click(function() { 
     456        stop_streaming_graph(); 
     457        update_current_graph(true); 
     458       }); 
     459 
    447460        $("#graph_datetool .btn-slide").click(function(){ 
    448461                $("#graph_widgetCalendar").stop().animate({ 
     
    455468        }); 
    456469        $("#graph_datetool .datechoice").click(function(){ 
    457             if(!graphinfo.streaming){ 
    458470                $("#graph_datetool .range a.btn-slide").html("YYYY/MM/DD - YYYY/MM/DD"); 
    459471                $("#graph_widgetCalendar").slideUp("slow"); 
     
    468480                maingraph.ReconGraphRefresh({graphid: graphinfo.id, start: time_windows[$(this).html()], end: '', type: graphinfo.type}); 
    469481                return false; 
    470              } 
    471482        }); 
    472483        $('#graph_widgetCalendar').DatePicker({ 
     
    478489                starts: 1, 
    479490                onChange: function(formated) { 
    480                      if(!graphinfo.streaming) { 
    481491                        var dates; 
    482492                        dates = formated[0].split('/'); 
     
    489499                        maingraph.ReconGraphRefresh({graphid: graphinfo.id, start: displayinfo.start, end: displayinfo.end, type: graphinfo.type}); 
    490500                        $('#graph_datetool .range a.btn-slide').get(0).innerHTML = formated.join(' - '); 
    491                     } 
    492501                } 
    493502        }); 
  • ui/web/htdocs/js/recon.js

    re6f58b6 r0e8bd1a  
    751751 
    752752function get_stream_controls() { 
    753     play_pause = $("<div class='play_pause'>PLAY</div>"); 
    754     stop = $("<div class='stopstream'>STOP</div>"); 
    755     stream_controls = $("<span class='stream_controls'></div>").append(play_pause).append(stop); 
     753    play_pause = $("<span class='play_pause'>PLAY</span>"); 
     754    stop = $("<span class='stopstream'>STOP</span>"); 
     755    stream_controls = $("<span class='stream_controls'></span>").append(play_pause).append(stop); 
    756756    return stream_controls; 
    757757} 
     
    762762//streambox: the hidden element to insert the iframe remote calls 
    763763function stream_data(graph_id, stream_graph, streambox) { 
    764     if(streaming) { 
    765         modal_warning("Stream Error!", "You can only stream one thing at a time!"); 
    766         return; 
     764 
     765    if(!streaming) { 
     766        polltime = 2000; 
     767        timewindow = 300000; 
     768        stream_object = stream_graph; 
     769        stream_dirty = false; 
     770        stream_graph.ReconGraphPrepareStream(timewindow, polltime); 
     771 
     772        //this should be the only place we set streaming to true 
     773        streaming = true; 
    767774    } 
    768     //this should be the only place we set streaming to true 
    769     streaming = true; 
    770  
    771     polltime = 2000; 
    772     timewindow = 300000; 
    773     stream_object = stream_graph; 
    774     stream_dirty = false; 
    775     stream_graph.ReconGraphPrepareStream(timewindow, polltime); 
    776  
    777775//setup functionality so that every 2 seconds check if we are streaming and dirty, plot if true 
    778776    stream_graph.everyTime(2000, function() { 
     
    918916 
    919917  function render_graph_inpage(divid, id, start, end) { 
    920       var ginpage_streaming = false; 
    921918 
    922919$.getJSON("json/graph/info/" + id, function (ginfo) { 
     
    926923              stream_graph.ReconGraphRefresh({graphid: ginfo.id, start: start, end: end, stacks: ginfo.stacks}); 
    927924 
    928 var dtool =  $("<div id='mini_ws_datetool'>"); 
     925    var dtool =  $("<div id='mini_ws_datetool'>"); 
    929926    dtool.append('<div class="zoom"> \ 
    930927                <dl> \ 
     
    950947 
    951948    $(".stopstream").click(function() { 
    952         if(ginpage_streaming){ 
    953         ginpage_streaming = false; 
    954949        streaming = false; 
     950        $('#mini_ws_datetool').css("display", ""); 
    955951        $(".play_pause").html('PLAY'); 
    956952        $('#streambox').html(''); 
    957953        $(".stream-log").attr("style", "display:none;"); 
    958954        stream_graph.ReconGraphRefresh({graphid: ginfo.id, stacks: ginfo.stacks}); 
     955     }); 
     956 
     957    $(".play_pause").click(function() { 
     958      if($(this).html() == 'PLAY') { 
     959        $(this).html('PAUSE'); 
     960        //if we are playing for the frist time 
     961        if(!streaming) { 
     962            $('#mini_ws_datetool').css("display", "none"); 
     963            $(".stream-log").removeAttr("style").html("stream log_"); 
    959964        } 
    960      }); 
    961  
    962     $(".play_pause").click(function() { 
    963      if(!ginpage_streaming){ 
    964         ginpage_streaming = true; 
    965         $(this).html('PAUSE'); 
    966         $(".stream-log").removeAttr("style").html("stream log_"); 
     965        //setup/restart the plotting 
    967966        stream_data(ginfo.id, stream_graph, $('#streambox')); 
    968      } 
    969      else if(ginpage_streaming) { 
    970          if($(this).html() == 'PLAY') { 
    971              $(this).html('PAUSE');           
    972              //this is where we start streaming again after a pause 
    973               stream_graph.everyTime(2000, function() { 
    974                       if(!streaming) { 
    975                           streambox.html(''); 
    976                           $(".stream-log").attr("style", "display:none;"); 
    977                           stream_graph.stopTime(); 
    978                       } 
    979                       else { 
    980                           if(stream_dirty){ 
    981                               stream_graph.ReconGraphPlotPoints(); 
    982                               stream_dirty=false; 
    983                           } 
    984                       } 
    985                   }); 
    986          } 
    987          else if($(this).html() == 'PAUSE') { 
     967      } 
     968      else if($(this).html() == 'PAUSE') { 
    988969             $(this).html('PLAY'); 
    989970             //this is where we pause for a bit 
    990971             stream_graph.stopTime(); 
    991          } 
    992      } 
    993    });  
     972      } 
     973   }); 
    994974 
    995975$("#mini_ws_datetool .datechoice").click(function(){ 
    996    if(!ginpage_streaming) { 
    997976      $(".datechoice").removeClass("selected"); 
    998977      $(this).addClass("selected"); 
    999978      stream_graph.ReconGraphRefresh({graphid: ginfo.id, stacks: ginfo.stacks, start: time_window_to_seconds($(this).html()), end: ''}); 
    1000979      return false; 
    1001    } 
    1002  }); 
     980    }); 
    1003981 
    1004982    });//end json call