PlotLineChart.imjoy.html

<docs lang="markdown">
# Plot line chart with matplotlib

This demo shows how to plot chart with matplotlib

</docs>

<config lang="json">
{
  "name": "PlotLineChart",
  "type": "native-python",
  "version": "0.1.0",
  "api_version": "0.1.5",
  "description": "Plot line chart with matplotlib and show in an ImJoy window.",
  "tags": [],
  "ui": [
          "# of data points : {id:'n_points', type: 'number', min: 0, placeholder:20}"
        ],
  "inputs": null,
  "outputs": null,
  "flags": [],
  "icon": "swap_horiz",
  "env": null,
  "requirements": ["numpy", "matplotlib"],
  "dependencies": ["https://gist.githubusercontent.com/oeway/b033ad375343f495dabf19242e5c04d3/raw/PlotWindow.imjoy.html"],
  "cover": "https://dl.dropbox.com/s/jatoromuo3bqa4r/imjoy-matplotlib-demo.gif"
}
</config>

<script lang="python">

import matplotlib as mpl
mpl.use('Agg')

import matplotlib.pyplot as plt
plt.ioff()
import numpy as np
import base64
import asyncio

class ImJoyPlugin():
    def setup(self):
        self.window = None

    def plot(self, n_points):
        x_values = np.around(np.arange(0.0, 5.0, 5.0/n_points),decimals=2)
        y_values = np.exp(-x_values) * np.cos(2*np.pi*x_values)
        # Plot curve and save as png
        fig1, ax = plt.subplots(num='Example plot')
        plt.plot(x_values, y_values)
        name_plot = 'test.png'
        plt.savefig(name_plot,dpi=200)
        plt.close()
        
        # encode the image into base64 to display direct in the window plugin
        with open(name_plot, 'rb') as f:
            data = f.read()
            result = base64.b64encode(data).decode('ascii')
            imgurl = 'data:image/png;base64,' + result
            image = {"src": imgurl}
        return image

    async def run(self, my):
        await api.showStatus('Plot line chart with matplotlib')
        await api.createWindow(type='PlotWindow', name='Plot Demo', data={})
        
api.export(ImJoyPlugin())
</script>

PlotWindow.imjoy.html

<docs lang="markdown">
# Plot Window plugin
Show a plot from matplotlib

## What does it do?
1. bind the click event of a button to an api funciton which executed in the python plugin.
2. bind the change event of the slider to re-execute the api function to update the plot

For more information about controling the appearence with css style: https://picturepan2.github.io/spectre/elements/buttons.html


</docs>

<config lang="json">
{
  "name": "PlotWindow",
  "type": "window",
  "tags": [],
  "ui": "",
  "version": "0.1.0",
  "cover": "",
  "description": "[TODO: describe this plugin with one sentence.]",
  "icon": "extension",
  "inputs": null,
  "outputs": null,
  "api_version": "0.1.5",
  "env": "",
  "requirements": [
        "https://static.imjoy.io/spectre.css/spectre.min.css",
        "https://static.imjoy.io/spectre.css/spectre-exp.min.css",
        "https://static.imjoy.io/spectre.css/spectre-icons.min.css"],
  "dependencies": [],
  "defaults": {"w": 20, "h": 10}
}
</config>

<script lang="javascript">
class ImJoyPlugin {
  async setup() {
    window.runPlot = async ()=>{
      const img = document.getElementById('img')
      const p = await api.getPlugin('PlotLineChart')
      const points = Number(document.getElementById('myRange').value)
      const retObj = await p.plot(points)
      img.src = retObj.src
    }
  }
  async run(ctx) {
    
  }
}

api.export(new ImJoyPlugin())
</script>

<window lang="html">
  <div>
    <div class="container">
      <div class="columns">
        <span style="width: 50px" class="column">Points Number:</span>
        <input class="slider column col-xs-6" type="range" min="1" max="100" value="50" onchange="runPlot()" id="myRange">
        <button class="btn column col-xs-1" onclick="runPlot()">plot</button>
      </div>
    </div>
    <img id="img" src="https://placeimg.com/640/480/any"></img>
  </div>
</window>

<style lang="css">
#img{
  width: 500px;
  height: 500px;
}
</style>