A problem with value sliders, they are interfering with each other

Question

I have a dial tone python code which runs via Flask webserver, there are a couple variables in my code that I am trying to control through roundSlider widgets. The problem that I am facing with is that when I start the program it runs normally and I can smoothly control the sample_rate variable through my first slider and can hear different tones while dragging the first slider. But when I start dragging the second slider to change the amplitude value, it does changes (start hearing noisy static sound) but at the same time it resets the sample rate tone/sound to original (though this doesn't mean it changes the first slider visually/dynamically). Please, take a look at my code and see if you can help me with.

app.py code:

from __future__ import print_function
from gnuradio import analog
from gnuradio import audio
from gnuradio import blocks
from gnuradio import eng_notation
from gnuradio import gr
from gnuradio.eng_option import eng_option
from gnuradio.filter import firdes
from optparse import OptionParser


class TopBlock22(gr.top_block): # PEP8: CamelCaseName for classes

    def __init__(self, sample_rate=32000, amplitude=0):

        gr.top_block.__init__(self, "Top Block 22")        
        ##################################################
        # Variables
        ##################################################
        self.sample_rate = sample_rate
        print('[TopBlock22] __init__: sample_rate:', self.sample_rate)
        self.amplitude = amplitude
        print('[TopBlock22] __init__: amplitude:', self.amplitude)


        ##################################################
        # Blocks
        ##################################################
        self.blocks_add_xx = blocks.add_vff(1)
        self.audio_sink = audio.sink(32000, '', True)
        self.analog_sig_source_x_1 = analog.sig_source_f(sample_rate, analog.GR_COS_WAVE, 440,  amplitude, 0)
        self.analog_sig_source_x_0 = analog.sig_source_f(sample_rate, analog.GR_COS_WAVE, 350, amplitude, 0)
        self.analog_noise_source_x_0 = analog.noise_source_f(analog.GR_GAUSSIAN,  amplitude, -42)

        ##################################################
        # Connections
        ##################################################
        self.connect((self.analog_noise_source_x_0, 0), (self.blocks_add_xx, 2))
        self.connect((self.analog_sig_source_x_0, 0), (self.blocks_add_xx, 0))
        self.connect((self.analog_sig_source_x_1, 0), (self.blocks_add_xx, 1))
        self.connect((self.blocks_add_xx, 0), (self.audio_sink, 0))

    def change(self, sample_rate, amplitude):
        self.sample_rate = sample_rate
        print('[TopBlock22] __init__: sample_rate:', self.sample_rate)
        self.analog_sig_source_x_1.set_sampling_freq(self.sample_rate)
        self.analog_sig_source_x_0.set_sampling_freq(self.sample_rate)

    # def set_amplitude(self, amplitude):
        self.amplitude = amplitude
        print('[TopBlock22] __init__: amplitude:', self.amplitude)
        self.analog_sig_source_x_1.set_amplitude(self.amplitude)
        self.analog_sig_source_x_0.set_amplitude(self.amplitude)
        self.analog_noise_source_x_0.set_amplitude(self.amplitude)





        # lock
        self.lock()

        # disconect - needs two endpoints (not like in FAQ)
        self.disconnect((self.analog_sig_source_x_0, 0), (self.blocks_add_xx, 0))
        self.disconnect((self.analog_sig_source_x_1, 0), (self.blocks_add_xx, 1))

        # create new
        self.analog_sig_source_x_1 = analog.sig_source_f(sample_rate, analog.GR_COS_WAVE, 440, 0.4, 0)
        self.analog_sig_source_x_0 = analog.sig_source_f(sample_rate, analog.GR_COS_WAVE, 350, 0.4, 0)

        # connect again
        self.connect((self.analog_sig_source_x_0, 0), (self.blocks_add_xx, 0))
        self.connect((self.analog_sig_source_x_1, 0), (self.blocks_add_xx, 1))

        # unlock
        self.unlock()

# -----------------------------------------------------------------------------

from flask import Flask, request, jsonify


app = Flask(__name__)

tb = None  # global variable to keep it between requests


@app.route('/')
def index():
    return '''<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>GNURadio Slider Example</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/roundSlider/1.3.2/roundslider.min.css" rel="stylesheet" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/roundSlider/1.3.2/roundslider.min.js"></script>

</head>
<body>

<style>

#slider1 {
 position:absolute;
 top:100px;
 left:75px;
 align:center;
}
#slider2 {
 position:absolute;
 top:100px;
 left:470px;
  align:center;
}
#slider3 {
 position:absolute;
 top:100px;
 left:870px;
  align:center;
}
#slider4 {
 position:absolute;
 top:450px;
 left:75px;
  align:center;

}
#slider5 {
 position:absolute;
 top:450px;
 left:470px;
  align:center;
}
#slider6 {
 position:absolute;
 top:450px;
 left:870px;
  align:center;
}

</style>


</head>
<body>

<div id="slider1"></div>
<!--  <p>Sample Rate Slider</p> -->

<script>

  // keep slider's value
  var val;

  // create slider
  $("#slider1").roundSlider({
    radius: 150,

    min: 0,
    max: 10000000000,
    value: 0, // default value at start
    change: function () {
      var obj = $("#slider1").data("roundSlider");
      val = obj.getValue();
      $.getJSON('/valueofslider', {
        slide1_val: val

      });
    }
  });

  // play sound at start
  $.getJSON('/valueofslider', {slide_val: val});

</script>
<div id="slider2"></div>
<!--  <p>Amplitude Slider2</p> -->
<script>

  // keep slider's value
  var val;

  // create slider
  $("#slider2").roundSlider({
    radius: 150,
    min: 0,
    max: 10000000000,
    value: 0, // default value at start
    change: function () {
      var obj = $("#slider2").data("roundSlider");
      val = obj.getValue();
      $.getJSON('/valueofslider', {
        slide2_val: val

      });
    }
  });

  // play sound at start
  $.getJSON('/valueofslider', {slide_val: val});

</script>
<div id="slider3"></div>
 <!-- <p>Frequency Slider3</p> -->

<script>

  // keep slider's value
  var val;

  // create slider
  $("#slider3").roundSlider({
    radius: 150,
    min: 0,
    max: 10000000000,
    value: 0, // default value at start
    change: function () {
      var obj = $("#slider3").data("roundSlider");
      val = obj.getValue();
      $.getJSON('/valueofslider', {
        slide3_val: val

      });
    }
  });

  // play sound at start
  $.getJSON('/valueofslider', {slide_val: val});

</script>
<div id="slider4"></div>
 <!-- <p>Slider4</p>  -->

<script>

  // keep slider's value
  var val;

  // create slider
  $("#slider4").roundSlider({
    radius: 150,
    min: 0,
    max: 10000000000,
    value: 0, // default value at start
    change: function () {
      var obj = $("#slider").data("roundSlider");
      val = obj.getValue();
      $.getJSON('/valueofslider', {
        slide4_val: val

      });
    }
  });

  // play sound at start
  $.getJSON('/valueofslider', {slide_val: val});

</script>
<div id="slider5"></div>
<!--  <p>Slider5</p>  -->

<script>

  // keep slider's value
  var val;

  // create slider
  $("#slider5").roundSlider({
    radius: 150,
    min: 0,
    max: 10000000000,
    value: 0, // default value at start
    change: function () {
      var obj = $("#slider").data("roundSlider");
      val = obj.getValue();
      $.getJSON('/valueofslider', {
        slide5_val: val

      });
    }
  });

  // play sound at start
  $.getJSON('/valueofslider', {slide_val: val});

</script>
<div id="slider6"></div>
<!--  <p>Slider6</p>   -->

<script>

  // keep slider's value
  var val;

  // create slider
  $("#slider6").roundSlider({
    radius: 150,
    min: 0,
    max: 10000000000,
    value: 0, // default value at start
    change: function () {
      var obj = $("#slider").data("roundSlider");
      val = obj.getValue();
      $.getJSON('/valueofslider', {
        slide6_val: val

      });
    }
  });

  // play sound at start
  $.getJSON('/valueofslider', {slide_val: val});

</script>

</body>
</html>'''

# @app.route('/test')
# def test():
#     HTML = 'HEAR:'
#     for item in (0, 10000, 20000, 25000, 32000):
#         HTML += ' <a href="/set/{}">{}</a>'.format(item, item)
#     return HTML

# @app.route('/off')
# def off():
#     """Turn off sound."""
#     sound(0)
#     #return jsonify({'val': 0})
#     return 'off'

@app.route('/set/<int:value>')
def set_value(value):
    """Set value. Use 0 to turn it off."""
    sound(value)
    #return jsonify({'val': value})
    return str(value)

@app.route('/get')
def get_value():
    """Get value. Returns 0 when turned off."""
    if tb:
        value = tb.sample_rate
        value = tb.amplitude
    else:
        value = 0
    #return jsonify({'val': value})
    return str(value)

@app.route('/valueofslider')
def slide():
    sample_rate = request.args.get('slide1_val', '32000')
    amplitude = request.args.get('slide2_val', '0')
    sample_rate = int(sample_rate)
    amplitude = int(amplitude)
    sound(sample_rate, amplitude)
    #return jsonify({'val': sample_rate})
    return str(sample_rate)
    return str(amplitude)

# def sound_old(sample_rate):
#     """version which doesn't use `change()`"""
#     global tb

#     print('[sound] sample_rate:', sample_rate)
#     sample_rate = int(sample_rate)

#     # stop old sound
#     if tb: # if tb is not None
#         tb.stop()
#         tb.wait()
#         tb = None 

    # create new sound (if not zero)
    if sample_rate > 0 & amplitude == 0:
            tb = TopBlock22(sample_rate, amplitude)
            tb.start()


def sound(sample_rate, amplitude):
    """version which uses `change()`"""
    global tb

    print('[sound] sample_rate:', sample_rate)
    sample_rate = int(sample_rate)
    print('[sound] amplitude:', amplitude)
    amplitude = int(amplitude)

    if tb: # if tb is not None
        if sample_rate > 0 & amplitude == 0 :
            tb.change(sample_rate, amplitude)

        else:        
            tb.stop()
            tb.wait()
            tb = None 

    # create new sound (if not zero)
    if not tb:
        if sample_rate > 0 & amplitude == 0:
            tb = TopBlock22(sample_rate, amplitude)
            tb.start()


if __name__ == '__main__':    
    app.run(debug=True, host='0.0.0.0')

Update:

from __future__ import print_function
from gnuradio import analog
from gnuradio import audio
from gnuradio import blocks
from gnuradio import eng_notation
from gnuradio import gr
from gnuradio.eng_option import eng_option
from gnuradio.filter import firdes
from optparse import OptionParser


class TopBlock22(gr.top_block): # PEP8: CamelCaseName for classes

    def __init__(self, sample_rate=32000, amplitude=0):

        gr.top_block.__init__(self, "Top Block 22")        
        ##################################################
        # Variables
        ##################################################
        self.sample_rate = sample_rate
        print('[TopBlock22] __init__: sample_rate:', self.sample_rate)

        self.amplitude = amplitude
        print('[TopBlock22] __init__: amplitude:', self.amplitude)
        ##################################################
        # Blocks
        ##################################################
        self.blocks_add_xx = blocks.add_vff(1)
        self.audio_sink = audio.sink(32000, '', True)
        self.analog_sig_source_x_1 = analog.sig_source_f(sample_rate, analog.GR_COS_WAVE, 440,  amplitude, 0)
        self.analog_sig_source_x_0 = analog.sig_source_f(sample_rate, analog.GR_COS_WAVE, 350, amplitude, 0)
        self.analog_noise_source_x_0 = analog.noise_source_f(analog.GR_GAUSSIAN,  amplitude, -42)

        ##################################################
        # Connections
        ##################################################
        self.connect((self.analog_noise_source_x_0, 0), (self.blocks_add_xx, 2))
        self.connect((self.analog_sig_source_x_0, 0), (self.blocks_add_xx, 0))
        self.connect((self.analog_sig_source_x_1, 0), (self.blocks_add_xx, 1))
        self.connect((self.blocks_add_xx, 0), (self.audio_sink, 0))

    def change(self, sample_rate, amplitude=0):
        self.sample_rate = sample_rate
        print('[TopBlock22] __init__: sample_rate:', self.sample_rate)
        self.analog_sig_source_x_1.set_sampling_freq(self.sample_rate)
        self.analog_sig_source_x_0.set_sampling_freq(self.sample_rate)


        self.amplitude = amplitude
        print('[TopBlock22] __init__: amplitude:', self.amplitude)
        self.analog_sig_source_x_1.set_amplitude(self.amplitude)
        self.analog_sig_source_x_0.set_amplitude(self.amplitude)
        self.analog_noise_source_x_0.set_amplitude(self.amplitude)



        # lock
        self.lock()

        # disconect - needs two endpoints (not like in FAQ)
        self.disconnect((self.analog_sig_source_x_0, 0), (self.blocks_add_xx, 0))
        self.disconnect((self.analog_sig_source_x_1, 0), (self.blocks_add_xx, 1))

        # create new
        self.analog_sig_source_x_1 = analog.sig_source_f(sample_rate, analog.GR_COS_WAVE, 440, 0.4, 0)
        self.analog_sig_source_x_0 = analog.sig_source_f(sample_rate, analog.GR_COS_WAVE, 350, 0.4, 0)

        # connect again
        self.connect((self.analog_sig_source_x_0, 0), (self.blocks_add_xx, 0))
        self.connect((self.analog_sig_source_x_1, 0), (self.blocks_add_xx, 1))

        # unlock
        self.unlock()

# -----------------------------------------------------------------------------

from flask import Flask, request, jsonify


app = Flask(__name__)

tb = None  # global variable to keep it between requests


@app.route('/')
def index():
    return '''<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>GNURadio Slider Example</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/roundSlider/1.3.2/roundslider.min.css" rel="stylesheet" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/roundSlider/1.3.2/roundslider.min.js"></script>

</head>
<body>

<style>

#slider1 {
 position:absolute;
 top:100px;
 left:75px;
 align:center;
}
#slider2 {
 position:absolute;
 top:100px;
 left:470px;
  align:center;
}
#slider3 {
 position:absolute;
 top:100px;
 left:870px;
  align:center;
}
#slider4 {
 position:absolute;
 top:450px;
 left:75px;
  align:center;

}
#slider5 {
 position:absolute;
 top:450px;
 left:470px;
  align:center;
}
#slider6 {
 position:absolute;
 top:450px;
 left:870px;
  align:center;
}

</style>


</head>
<body>

<div id="slider1"></div>
<!--  <p>Sample Rate Slider</p> -->

<script>

  // keep slider's value
  var val1;

  // create slider
  $("#slider1").roundSlider({
    radius: 150,

    min: 0,
    max: 10000000000,
    value: 0, // default value at start
    change: function () {
      var obj1 = $("#slider1").data("roundSlider");
      val1 = obj1.getValue();
      $.getJSON('/valueofslider', {
        slide1_val1: val1

      });
    }
  });

  // play sound at start
  $.getJSON('/valueofslider', {slide1_val: val1});

</script>
<div id="slider2"></div>
<!--  <p>Amplitude Slider2</p> -->
<script>

  // keep slider's value
  var val2;

  // create slider
  $("#slider2").roundSlider({
    radius: 150,
    min: 0,
    max: 10000000000,
    value: 0, // default value at start
    change: function () {
      var obj2 = $("#slider2").data("roundSlider");
      val2 = obj2.getValue();
      $.getJSON('/valueofslider', {
        slide2_val2: val2

      });
    }
  });

  // play sound at start
  $.getJSON('/valueofslider', {slide2_val: val2});

</script>
<div id="slider3"></div>
 <!-- <p>Frequency Slider3</p> -->

<script>

  // keep slider's value
  var val3;

  // create slider
  $("#slider3").roundSlider({
    radius: 150,
    min: 0,
    max: 10000000000,
    value: 0, // default value at start
    change: function () {
      var obj3 = $("#slider3").data("roundSlider");
      val3 = obj3.getValue();
      $.getJSON('/valueofslider', {
        slide3_val3: val3

      });
    }
  });

  // play sound at start
  $.getJSON('/valueofslider', {slide3_val: val});

</script>
<div id="slider4"></div>
 <!-- <p>Slider4</p>  -->

<script>

  // keep slider's value
  var val4;

  // create slider
  $("#slider4").roundSlider({
    radius: 150,
    min: 0,
    max: 10000000000,
    value: 0, // default value at start
    change: function () {
      var obj4 = $("#slider").data("roundSlider");
      val4 = obj4.getValue();
      $.getJSON('/valueofslider', {
        slide4_val4: val4

      });
    }
  });

  // play sound at start
  $.getJSON('/valueofslider', {slide4_val: val});

</script>
<div id="slider5"></div>
<!--  <p>Slider5</p>  -->

<script>

  // keep slider's value
  var val5;

  // create slider
  $("#slider5").roundSlider({
    radius: 150,
    min: 0,
    max: 10000000000,
    value: 0, // default value at start
    change: function () {
      var obj5 = $("#slider").data("roundSlider");
      val5 = obj5.getValue();
      $.getJSON('/valueofslider', {
        slide5_val5: val5

      });
    }
  });

  // play sound at start
  $.getJSON('/valueofslider', {slide5_val: val});

</script>
<div id="slider6"></div>
<!--  <p>Slider6</p>   -->

<script>

  // keep slider's value
  var val;

  // create slider
  $("#slider6").roundSlider({
    radius: 150,
    min: 0,
    max: 10000000000,
    value: 0, // default value at start
    change: function () {
      var obj6 = $("#slider").data("roundSlider");
      val6 = obj6.getValue();
      $.getJSON('/valueofslider', {
        slide6_val6: val6

      });
    }
  });

  // play sound at start
  $.getJSON('/valueofslider', {slide6_val: val});

</script>

</body>
</html>'''



@app.route('/set/<int:value>')
def set_value(value):
    """Set value. Use 0 to turn it off."""
    sound(value)
    #return jsonify({'val': value})
    return str(value)

@app.route('/get')
def get_value():
    """Get value. Returns 0 when turned off."""
    if tb:
        value = tb.sample_rate
        value = tb.amplitude
    else:
        value = 0
    #return jsonify({'val': value})
    return str(value)

@app.route('/valueofslider')
def slide():
    sample_rate = request.args.get('slide1_val1', '32000')
    sample_rate = int(sample_rate)
    return str(sample_rate)

    if sample_rate > 0:
            tb = TopBlock22(sample_rate)
            tb.start()


def slide():

    amplitude = request.args.get('slide2_val2', '0')
    amplitude = int(amplitude)
    sound(sample_rate, amplitude)
    return str(amplitude)

    if amplitude == 0:
            tb = TopBlock22(amplitude)
            tb.start()

def sound(sample_rate, amplitude):
    """version which uses `change()`"""
    global tb

    print('[sound] sample_rate:', sample_rate)
    sample_rate = int(sample_rate)
    print('[sound] amplitude:', amplitude)
    amplitude = int(amplitude)

    if tb: # if tb is not None
        if sample_rate > 0 & amplitude == 0 :
            tb.change(sample_rate, amplitude)

        else:        
            tb.stop()
            tb.wait()
            tb = None 

    # create new sound (if not zero)
    if not tb:
        if sample_rate > 0 & amplitude == 0:
            tb = TopBlock22(sample_rate, amplitude)
            tb.start()


if __name__ == '__main__':    
    app.run(debug=True, host='0.0.0.0')

Answer 1

In TopBlock22 I have two methods: change_sample_rate() and change_amplitude() so I can change only one value and not care of other value.

In flask I have two functions with diferent names and different urls

@app.route('/set_sample_rate/<int:value>')
def set_sample_rate(value):
    tb.change_sample_rate(value)
    return str(value)

@app.route('/set_amplitude/<int:value>')
def set_amplitude(value):
    tb.change_amplitude(value)
    return str(value)

One of them changes sample rate using TopBlock22.change_sample_rate(), other changes amplitude using TopBlock22.change_amplitude(). This way every url change only one value and not care of other value.

And every slicer use different url to send value. This way every slicer change only one value and not care of other value.

---

I reduced few things to make it simpler.

First I create instance of TopBlock22() at start and not remove it when values are zero - so I don't have to check if it exists and recreate it.

I also reduced code in JavaScript. It doesn't use global variables to keep values. And it uses event.value to get value from slicer.

I also reduced CSS. I used classes row1, row2, col1, col2, col3 to keep the same values (top, left) in one class.

I added button "Turn Off" which send zeros to server and also change values in slicers so they move to start position. It uses old function /valueofslice and sound() and tb.change() to change all values at once. It use None to control which value change so it can also change only one of values and not care of other values.

---

from __future__ import print_function
from gnuradio import analog
from gnuradio import audio
from gnuradio import blocks
from gnuradio import eng_notation
from gnuradio import gr
from gnuradio.eng_option import eng_option
from gnuradio.filter import firdes
from optparse import OptionParser


class TopBlock22(gr.top_block): # PEP8: CamelCaseName for classes

    def __init__(self, sample_rate=32000, amplitude=0, frequency=0):

        gr.top_block.__init__(self, "Top Block 22")
        ##################################################
        # Variables
        ##################################################
        self.sample_rate = sample_rate
        print('[TopBlock22] __init__: sample_rate:', self.sample_rate)

        self.amplitude = amplitude
        print('[TopBlock22] __init__: amplitude:', self.amplitude)

        self.frequency = frequency
        print('[TopBlock22] __init__: frequency:', self.frequency)

        # for mute_on, mute_off
        #self.old_sample_rate = self.sample_rate
        #self.old_ampliture = self.ampliture
        #self.old_frequency = self.frequency

        ##################################################
        # Blocks
        ##################################################
        self.blocks_add_xx = blocks.add_vff(1)
        self.audio_sink = audio.sink(32000, '', True)
        self.analog_sig_source_x_1 = analog.sig_source_f(sample_rate, analog.GR_COS_WAVE, 440,  amplitude, 0)
        self.analog_sig_source_x_0 = analog.sig_source_f(sample_rate, analog.GR_COS_WAVE, 350, amplitude, 0)
        self.analog_noise_source_x_0 = analog.noise_source_f(analog.GR_GAUSSIAN,  amplitude, -42)

        ##################################################
        # Connections
        ##################################################
        self.connect((self.analog_noise_source_x_0, 0), (self.blocks_add_xx, 2))
        self.connect((self.analog_sig_source_x_0, 0), (self.blocks_add_xx, 0))
        self.connect((self.analog_sig_source_x_1, 0), (self.blocks_add_xx, 1))
        self.connect((self.blocks_add_xx, 0), (self.audio_sink, 0))

    def change_sample_rate(self, value=None):
        if value is not None:
            self.sample_rate = value
            print('[TopBlock22] change: sample_rate:', value)
            self.analog_sig_source_x_1.set_sampling_freq(value)
            self.analog_sig_source_x_0.set_sampling_freq(value)

    def change_amplitude(self, value=None):
        if value is not None:
            value /= 10000.
            self.amplitude = value
            print('[TopBlock22] change: amplitude:', value)
            self.analog_sig_source_x_1.set_amplitude(value)
            self.analog_sig_source_x_0.set_amplitude(value)
            self.analog_noise_source_x_0.set_amplitude(value)

    def change_frequency(self, value=None):
        if value is not None:
            self.frequency = value
            print('[TopBlock22] change: frequency:', value)
            #TODO: change some values

    def change(self, sample_rate=None, amplitude=None, frequency=None):
        #self.change_sample_rate(sample_rate)
        #self.change_amplitude(amplitude)
        #self.change_frequency(frequency)

        if sample_rate is not None:
            self.change_sample_rate(sample_rate)

        if amplitude is not None:
            self.change_amplitude(amplitude)

        if frequency is not None:
            self.change_frequency(frequency)

    def turn_off(self):
        self.change(0, 0, 0)

    #def mute_on(self):
    #    # remember values
    #    self.old_sample_rate = self.sample_rate
    #    self.old_ampliture = self.ampliture
    #    self.old_frequency = self.frequency
    #    # turn off sound
    #    self.change(0, 0, 0)

    #def mute_off(self):
    #    # set old values
    #    self.change(self.old_sample_rate, self.old_ampliture, self.old_frequency)

# -----------------------------------------------------------------------------

from flask import Flask, request, jsonify

app = Flask(__name__)

# start with default values 
#tb = TopBlock22()
tb = TopBlock22(0, 0, 0)
tb.start()


@app.route('/')
def index():
    return '''<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>GNURadio Slider Example</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/roundSlider/1.3.2/roundslider.min.css" rel="stylesheet" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/roundSlider/1.3.2/roundslider.min.js"></script>

<style>

.slider {
 position: absolute;
 align:center;
}    

.row1 {top:100px;}
.row2 {top:450px;}

.col1 {left:75px;}
.col2 {left:470px;}
.col3 {left:870px;}

</style>
</head>

<body>

<div id="slider1" class='slider row1 col1'></div>
<!--  <p>Sample Rate Slider</p> -->

<div id="slider2" class='slider row1 col2'></div>
<!--  <p>Amplitude Slider2</p> -->

<div id="slider3" class='slider row1 col3'></div>
<!-- <p>Frequency Slider3</p> -->

<div id="slider4" class='slider row2 col1'></div>
<!-- <p>Slider4</p>  -->

<div id="slider5" class='slider row2 col2'></div>
<!-- <p>Slider5</p>  -->

<div id="slider6" class='slider row2 col3'></div>
<!-- <p>Slider6</p>  -->

<button id="turn_off_button">TURN OFF</button>

<script>

  // create sliders

  $("#slider1").roundSlider({
    radius: 150,
    min: 0,
    max: 10000,
    value: 0, // default value at start
    //change: function(event) { $.getJSON('/valueofslider', {slide1_val: event.value}); }
    change: function(event) { $.getJSON('/set_sample_rate/' + event.value); }
  });

  $("#slider2").roundSlider({
    radius: 150,
    min: 0,
    max: 10000,
    value: 0, // default value at start
    //change: function(event) { $.getJSON('/valueofslider', {slide2_val: event.value}); }
    change: function(event) { $.getJSON('/set_amplitude/' + event.value); }
  });

  $("#slider3").roundSlider({
    radius: 150,
    min: 0,
    max: 10000000000,
    value: 0, // default value at start
    //change: function(event) { $.getJSON('/valueofslider', {slide3_val: event.value}); }
    change: function(event) { $.getJSON('/set_frequency/' + event.value); }
  });

  $("#slider4").roundSlider({
    radius: 150,
    min: 0,
    max: 10000000000,
    value: 0, // default value at start
    change: function(event) { $.getJSON('/valueofslider', {slide4_val: event.value}); }
  });

  $("#slider5").roundSlider({
    radius: 150,
    min: 0,
    max: 10000000000,
    value: 0, // default value at start
    change: function(event) { $.getJSON('/valueofslider', {slide5_val: event.value}); }
  });

  $("#slider6").roundSlider({
    radius: 150,
    min: 0,
    max: 10000000000,
    value: 0, // default value at start
    change: function (event) { $.getJSON('/valueofslider', {slide6_val: event.value}); }
  });

  $("#turn_off_button").click(function(){
      // set sliders
      $("#slider1").data("roundSlider").setValue(0);
      $("#slider2").data("roundSlider").setValue(0);
      $("#slider3").data("roundSlider").setValue(0);

      // send to server
      $.getJSON('/valueofslider', {
        slide1_val: 0,
        slide2_val: 0,
        slide3_val: 0,
      });
  });

</script>

</body>
</html>'''

@app.route('/off')
def off():
    """Turn off sound."""
    tb.turn_off()
    #return jsonify({'val': 0})
    return 'off'

@app.route('/set_sample_rate/<int:value>')
def set_sample_rate(value):
    #sound(sample_rate=value)
    tb.change_sample_rate(value)
    #return jsonify({'sample_rate': value})
    return str(value)

@app.route('/set_amplitude/<int:value>')
def set_amplitude(value):
    #sound(amplitude=value)
    tb.change_amplitude(value)
    #return jsonify({'amplitude': value})
    return str(value)

@app.route('/set_frequency/<int:value>')
def set_frequency(value):
    #sound(frequency=value)
    tb.change_frequency(value)
    #return jsonify({'frequency': value})
    return str(value)


@app.route('/valueofslider')
def slide():
    sample_rate = request.args.get('slide1_val', None)
    amplitude   = request.args.get('slide2_val', None)
    frequency   = request.args.get('slide3_val', None)

    sound(
        sample_rate=sample_rate, 
        amplitude=amplitude, 
        frequency=frequency,
    )

    #return jsonify({
    #        'sample_rate': sample_rate, 
    #        'amplitude': amplitude,
    #        'frequency ': frequency ,
    #        })

    return 'sample_rate: {}, amplitude: {}, frequency : {}'.format(sample_rate, amplitude, frequency )

def sound(sample_rate=None, amplitude=None, frequency=None):
    """version which uses `change()`"""

    if sample_rate is not None:
        sample_rate = int(sample_rate)
        tb.change_sample_rate(sample_rate)

    if amplitude is not None:
        amplitude = int(amplitude)
        tb.change_amplitude(amplitude)

    if frequency is not None:
        frequency = int(frequency )
        tb.change_frequency(frequency )

    print('[sound] sample_rate:', sample_rate)
    print('[sound] amplitude:', amplitude)
    print('[sound] frequency:', frequency)

    #if tb: # if tb is not None
    #    tb.change(sample_rate, amplitude, frequency)

if __name__ == '__main__':
    app.run(host='0.0.0.0', debug=True)