title: is it possible to implement a matplotlib Slider into flask
body: <pre><code>import matplotlib.pyplot as plt
  from matplotlib.widgets import Slider
  import numpy as np
  from PIL import Image
  import requests
  from io import BytesIO
  
  img_src = 'https://unsplash.it/500/300'
  response = requests.get(img_src)
  img = Image.open(BytesIO(response.content))
  
  
  img = np.asarray(img.convert('L'))
  
  
  fig,ax = plt.subplots()
  zlims = (np.percentile(img[:, :], 0), np.percentile(img[:, :], 100 - 0))
  im = ax.imshow(img, aspect='auto',vmin=zlims[0], vmax=zlims[1])
  
  threshold = 0.
  axthreshold = plt.axes([0.2, 0.01, 0.65, 0.03])
  sthreshold = Slider(axthreshold, 'clip', -.1, 15., 
                      valinit=threshold, valstep=None)
  
  def update(val):
      ax.clear()
      zlims = (np.percentile(img[:, :], .1+val), np.percentile(img[:, :], 100 - (.1+val)))
      print(zlims[0],zlims[1])
      ax.imshow(img, aspect='auto',vmin=zlims[0], vmax=zlims[1])
      fig.canvas.draw_idle()
      
  sthreshold.on_changed(update)
  update(threshold)
  
  </code></pre>
  <p>this creates a image where you can limit what range the colormap covers with a slider. As &quot;clip&quot; increases the color map variety lessens.</p>
  <p>Im am pretty familiar with flask. Is there any way to implement something like this into flask? I would prefer matplotlib but I'm ok with trying anything.</p>
  <p>Thanks!</p>
  <p>--Update--- I realized that I don't want to refresh the page every time the picture is adjusted. I tried plotly javascript approach. I was happy until I realized the res is too low.</p>
  <p>html:</p>
  <pre><code>&lt;!doctype html&gt;
  &lt;html class=&quot;no-js&quot; lang=&quot;en&quot;&gt;
  &lt;head&gt;
      &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;ie=edge&quot; /&gt; 
      &lt;meta charset=&quot;UTF-8&quot; /&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot; /&gt;
          
      &lt;script src=&quot;https://cdn.plot.ly/plotly-2.11.1.min.js&quot;&gt;&lt;/script&gt;
      
      &lt;style&gt;
      .container {
          display: flex;
          align-items: center;
          justify-content: center;
      }
      &lt;/style&gt;    
      &lt;/head&gt;
  &lt;body&gt;
  &lt;div class=&quot;container&quot; id=&quot;myDiv&quot;&gt;&lt;/div&gt;
  &lt;div class=&quot;container&quot;&gt;
      &lt;input style=&quot;width:50%&quot; id=&quot;slide&quot; type=&quot;range&quot; min=&quot;0&quot; max=&quot;5&quot; step=&quot;0.025&quot; value=&quot;.1&quot; name=&quot;name_of_slider&quot;&gt;
  &lt;/div&gt;
  &lt;div class=&quot;container&quot; id=&quot;sliderAmount&quot;&gt;&lt;/div&gt;
  &lt;script&gt;
  const z1 = JSON.parse('{{ Lsort | tojson }}');
  const IMG = JSON.parse('{{ IMG | tojson }}');
  var size = z1.length 
  var qlower = z1[Math.ceil(size * .1 / 100) - 1]
  var qupper = z1[Math.ceil(size * (100-.1) / 100) - 1]
  var data = [
    {
      z: IMG,
      type: 'heatmap',
      colorscale: 'Viridis',
      zauto: false,
      zmax: qupper,
      zmin: qlower,
    }
  ];
  
  var layout = {
    autosize: false,
    width: 1000,
    height: 600,
  };
  Plotly.newPlot('myDiv', data, layout);
  var slide = document.getElementById('slide'),
  sliderDiv = document.getElementById(&quot;sliderAmount&quot;);
  slide.onchange = function() {
      sliderDiv.innerHTML = this.value;  
      var perc = this.value    
      var qlower = z1[Math.ceil(size * perc / 100) - 1]
      var qupper = z1[Math.ceil(size * (100-perc) / 100) - 1]
       
      var data = [
        {
          z: IMG,
          type: 'heatmap',
          colorscale: 'Viridis',
          zauto: false,
          zmax: qupper,
          zmin: qlower,
        }
      ];
      
      var layout = {
        autosize: false,
        width: 1000,
        height: 600,
      };
      Plotly.newPlot('myDiv', data, layout);
  }     
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>python:</p>
  <pre><code>from PIL import Image
  import requests
  from io import BytesIO
  img_src = 'https://unsplash.it/500/300'
  response = requests.get(img_src)
  imgarray = Image.open(BytesIO(response.content))
  imgarray = np.asarray(imgarray.convert('L'))
  
  
  n = np.sort(imgarray.ravel()).tolist()
  imgarray2D = np.flip(imgarray,axis=0)
  imgarray2D = imgarray2D.tolist()
  
  app = Flask(__name__)
  
  @app.route('/', methods=['GET', 'POST'])
  def main():  
      return render_template('clip.html',Lsort = n,IMG=imgarray2D)
  if __name__ == '__main__':
      app.run()
  </code></pre>