ssv/ssv/static/js/source/ssv_controls.es6
// Initialize controls for ssv control bar
Initialize controls for ssv control bar
Initialize controls for ssv control bar
initialize() {
        this.render_slider();
        this.update_viewbox();
        this.sels.title.title.html(this.title);
        this.set_x_series_display(0);
        this.sels.title.x_val_unit.html(this.x_series_unit);
        var self = this;
        d3.select(window).on('resize', function() {self.render_slider(); self.update_viewbox();});
        this.sels.controls.play_btn
            .attr('ssv-id', this.uuid)
            .on("click", function() {self.play()});
        this.sels.controls.pan_zoom_btn
            .attr('ssv-id', this.uuid)
            .on("click", function() {self.toggle_pan_zoom()});
        this.sels.controls.speed_btn.attr('ssv-id', this.uuid)
            .on("click", function() {
                if (self.play_speed == self.max_speed) {
                    self.play_speed = self.min_speed
                } else {
                    self.play_speed *= self.speed_mult
                }
                var speed = self.play_speed.toString();
                self.sels.controls.speed_btn.select('span')
                    .html("<b>" + speed + 'x</b>')
            });
        this.initialize_pan_zoom();
        this.sels.controls.save_btn
            .attr('ssv-id', this.uuid)
            .on("click", function() {self.to_image()});
        this.sels.controls.vid_btn
            .attr('ssv-id', this.uuid)
            .on("click", function() {self.to_video()});
    }
initialize ( ) { this . render_slider ( ) ; this . update_viewbox ( ) ; this . sels . title . title . html ( this . title ) ; this . set_x_series_display ( 0 ) ; this . sels . title . x_val_unit . html ( this . x_series_unit ) ; var self = this ; d3 . select ( window ) . on ( 'resize' , function ( ) { self . render_slider ( ) ; self . update_viewbox ( ) ; } ) ; this . sels . controls . play_btn . attr ( 'ssv-id' , this . uuid ) . on ( "click" , function ( ) { self . play ( ) } ) ; this . sels . controls . pan_zoom_btn . attr ( 'ssv-id' , this . uuid ) . on ( "click" , function ( ) { self . toggle_pan_zoom ( ) } ) ; this . sels . controls . speed_btn . attr ( 'ssv-id' , this . uuid ) . on ( "click" , function ( ) { if ( self . play_speed == self . max_speed ) { self . play_speed = self . min_speed } else { self . play_speed *= self . speed_mult } var speed = self . play_speed . toString ( ) ; self . sels . controls . speed_btn . select ( 'span' ) . html ( "<b>" + speed + 'x</b>' ) } ) ; this . initialize_pan_zoom ( ) ; this . sels . controls . save_btn . attr ( 'ssv-id' , this . uuid ) . on ( "click" , function ( ) { self . to_image ( ) } ) ; this . sels . controls . vid_btn . attr ( 'ssv-id' , this . uuid ) . on ( "click" , function ( ) { self . to_video ( ) } ) ; }
Initialize controls for ssv control bar
Initialize controls for ssv control bar
// Set title and x-series display // Set window resize function for svg viewbox // Clicking on play button automates the forward run of the x_series // Clicking on zoom button toggles pan/zoom ability // Clicking on the speed button changes the speed of play // Clicking on save button saves the current slice as a picture // Clicking on video button saves the visualization as a video