嵌入WebAgg

此示例演示如何在您自己的Web应用程序和框架中嵌入matplotlib WebAgg交互式绘图。 基于龙卷风的服务器“侧面”是基于龙卷风的服务器。

使用的框架必须支持Web套接字。

  1. import io
  3. try:
  4.     import tornado
  5. except ImportError:
  6.     raise RuntimeError("This example requires tornado.")
  7. import tornado.web
  8. import tornado.httpserver
  9. import tornado.ioloop
  10. import tornado.websocket
  13. from matplotlib.backends.backend_webagg_core import (
  14.     FigureManagerWebAgg, new_figure_manager_given_figure)
  15. from matplotlib.figure import Figure
  17. import numpy as np
  19. import json
  22. def create_figure():
  23.     """
  24.     Creates a simple example figure.
  25.     """
  26.     fig = Figure()
  27.     a = fig.add_subplot(111)
  28.     t = np.arange(0.0, 3.0, 0.01)
  29.     s = np.sin(2 * np.pi * t)
  30.     a.plot(t, s)
  31.     return fig
  34. # The following is the content of the web page.  You would normally
  35. # generate this using some sort of template facility in your web
  36. # framework, but here we just use Python string formatting.
  37. html_content = """
  38. <html>
  39.   <head>
  40.     <!-- TODO: There should be a way to include all of the required javascript
  41.                and CSS so matplotlib can add to the set in the future if it
  42.                needs to. -->
  43.     <link rel="stylesheet" href="_static/css/page.css" type="text/css">
  44.     <link rel="stylesheet" href="_static/css/boilerplate.css" type="text/css" />
  45.     <link rel="stylesheet" href="_static/css/fbm.css" type="text/css" />
  46.     <link rel="stylesheet" href="_static/jquery/css/themes/base/jquery-ui.min.css" >
  47.     <script src="_static/jquery/js/jquery-1.11.3.min.js"></script>
  48.     <script src="_static/jquery/js/jquery-ui.min.js"></script>
  49.     <script src="mpl.js"></script>
  51.     <script>
  52.       /* This is a callback that is called when the user saves
  53.          (downloads) a file.  Its purpose is really to map from a
  54.          figure and file format to a url in the application. */
  55.       function ondownload(figure, format) {
  56.         window.open('download.' + format, '_blank');
  57.       };
  59.       $(document).ready(
  60.         function() {
  61.           /* It is up to the application to provide a websocket that the figure
  62.              will use to communicate to the server.  This websocket object can
  63.              also be a "fake" websocket that underneath multiplexes messages
  64.              from multiple figures, if necessary. */
  65.           var websocket_type = mpl.get_websocket_type();
  66.           var websocket = new websocket_type("%(ws_uri)sws");
  68.           // mpl.figure creates a new figure on the webpage.
  69.           var fig = new mpl.figure(
  70.               // A unique numeric identifier for the figure
  71.               %(fig_id)s,
  72.               // A websocket object (or something that behaves like one)
  73.               websocket,
  74.               // A function called when a file type is selected for download
  75.               ondownload,
  76.               // The HTML element in which to place the figure
  77.               $('div#figure'));
  78.         }
  79.       );
  80.     </script>
  82.     <title>matplotlib</title>
  83.   </head>
  85.   <body>
  86.     <div id="figure">
  87.     </div>
  88.   </body>
  89. </html>
  90. """
  93. class MyApplication(tornado.web.Application):
  94.     class MainPage(tornado.web.RequestHandler):
  95.         """
  96.         Serves the main HTML page.
  97.         """
  99.         def get(self):
  100.             manager = self.application.manager
  101.             ws_uri = "ws://{req.host}/".format(req=self.request)
  102.             content = html_content % {
  103.                 "ws_uri": ws_uri, "fig_id": manager.num}
  104.             self.write(content)
  106.     class MplJs(tornado.web.RequestHandler):
  107.         """
  108.         Serves the generated matplotlib javascript file.  The content
  109.         is dynamically generated based on which toolbar functions the
  110.         user has defined.  Call `FigureManagerWebAgg` to get its
  111.         content.
  112.         """
  114.         def get(self):
  115.             self.set_header('Content-Type', 'application/javascript')
  116.             js_content = FigureManagerWebAgg.get_javascript()
  118.             self.write(js_content)
  120.     class Download(tornado.web.RequestHandler):
  121.         """
  122.         Handles downloading of the figure in various file formats.
  123.         """
  125.         def get(self, fmt):
  126.             manager = self.application.manager
  128.             mimetypes = {
  129.                 'ps': 'application/postscript',
  130.                 'eps': 'application/postscript',
  131.                 'pdf': 'application/pdf',
  132.                 'svg': 'image/svg+xml',
  133.                 'png': 'image/png',
  134.                 'jpeg': 'image/jpeg',
  135.                 'tif': 'image/tiff',
  136.                 'emf': 'application/emf'
  137.             }
  139.             self.set_header('Content-Type', mimetypes.get(fmt, 'binary'))
  141.             buff = io.BytesIO()
  142.             manager.canvas.figure.savefig(buff, format=fmt)
  143.             self.write(buff.getvalue())
  145.     class WebSocket(tornado.websocket.WebSocketHandler):
  146.         """
  147.         A websocket for interactive communication between the plot in
  148.         the browser and the server.
  150.         In addition to the methods required by tornado, it is required to
  151.         have two callback methods:
  153.             - ``send_json(json_content)`` is called by matplotlib when
  154.               it needs to send json to the browser.  `json_content` is
  155.               a JSON tree (Python dictionary), and it is the responsibility
  156.               of this implementation to encode it as a string to send over
  157.               the socket.
  159.             - ``send_binary(blob)`` is called to send binary image data
  160.               to the browser.
  161.         """
  162.         supports_binary = True
  164.         def open(self):
  165.             # Register the websocket with the FigureManager.
  166.             manager = self.application.manager
  167.             manager.add_web_socket(self)
  168.             if hasattr(self, 'set_nodelay'):
  169.                 self.set_nodelay(True)
  171.         def on_close(self):
  172.             # When the socket is closed, deregister the websocket with
  173.             # the FigureManager.
  174.             manager = self.application.manager
  175.             manager.remove_web_socket(self)
  177.         def on_message(self, message):
  178.             # The 'supports_binary' message is relevant to the
  179.             # websocket itself.  The other messages get passed along
  180.             # to matplotlib as-is.
  182.             # Every message has a "type" and a "figure_id".
  183.             message = json.loads(message)
  184.             if message['type'] == 'supports_binary':
  185.                 self.supports_binary = message['value']
  186.             else:
  187.                 manager = self.application.manager
  188.                 manager.handle_json(message)
  190.         def send_json(self, content):
  191.             self.write_message(json.dumps(content))
  193.         def send_binary(self, blob):
  194.             if self.supports_binary:
  195.                 self.write_message(blob, binary=True)
  196.             else:
  197.                 data_uri = "data:image/png;base64,{0}".format(
  198.                     blob.encode('base64').replace('\n', ''))
  199.                 self.write_message(data_uri)
  201.     def __init__(self, figure):
  202.         self.figure = figure
  203.         self.manager = new_figure_manager_given_figure(id(figure), figure)
  205.         super().__init__([
  206.             # Static files for the CSS and JS
  207.             (r'/_static/(.*)',
  208.              tornado.web.StaticFileHandler,
  209.              {'path': FigureManagerWebAgg.get_static_file_path()}),
  211.             # The page that contains all of the pieces
  212.             ('/', self.MainPage),
  214.             ('/mpl.js', self.MplJs),
  216.             # Sends images and events to the browser, and receives
  217.             # events from the browser
  218.             ('/ws', self.WebSocket),
  220.             # Handles the downloading (i.e., saving) of static images
  221.             (r'/download.([a-z0-9.]+)', self.Download),
  222.         ])
  225. if __name__ == "__main__":
  226.     figure = create_figure()
  227.     application = MyApplication(figure)
  229.     http_server = tornado.httpserver.HTTPServer(application)
  230.     http_server.listen(8080)
  232.     print("http://127.0.0.1:8080/")
  233.     print("Press Ctrl+C to quit")
  235.     tornado.ioloop.IOLoop.instance().start()

下载这个示例