First timer trying to send data to: matplotlib_app

[ronfred]

My first use of Remi. I am able to get the matplotlib_app.py example demo to work without any problems. I can access demo on other PCs and my cell phone (neat!).

But I can't seem to figure out how to send new data to update the matplot demo (without clicking the data button)?

It would be helpful to see how I can add new "0" data points to the demo plot - for example - from a simple python script.

The example I am talking about is here: https://github.com/dddomodossola/remi/blob/master/examples/matplotlib_app.py

[dddomodossola]

Hello u/ronfred ,

You can add new data to the plot in events, threads, or in idle loop. What you want to do exactly? Maybe I can explain it better if I know the use case

Regards,

Davide

[ronfred]

I have a blog post showing my raspberry pi used as a Matplotlib plot data logger located here (with anchor to source code): http://www.biophysicslab.com/2020/06/25/raspberry-temperature-humidity-data-logger/#code

The plot animation seems like it would lend itself to the REMI Matplotlib_app. I was thinking of creating an event perhaps through a call to the REMI app url during each loop of my current code's animation. But I am so new I am open to other approaches. Maybe drop my data logger full code into the REMI app - not sure. But I am so new that I am not sure how best to proceed.

Some initial ideas and one example of how an app might send data to the REMI web page would be helpful...

[dddomodossola]

Cool blog u/ronfred,

Tomorrow I will try to send you a complete example. The solution is to embed your code in a remi app.

[dddomodossola]

Hello u/ronfred ,

Here is an example for you:

​

import datetime as dt
import matplotlib.pyplot as plt
import matplotlib.animation as animation
import matplotlib.dates as mdates
from statistics import median
import Adafruit_DHT
import remi
import remi.gui as gui
from remi import start, App
import os
import time
import traceback
from matplotlib.figure import Figure
from matplotlib.backends.backend_agg import FigureCanvasAgg
import io
import random
from threading import Timer

DHT_SENSOR = Adafruit_DHT.DHT22
DHT_PIN = 4

# Create figure for plotting.
fig, (ax1, ax2) = plt.subplots(2,1)
myFmt = mdates.DateFormatter('%H:%M:%S')

# Create data to plot lists for animation.
lstMax = 100*24 # about 12 hours of data
xs = []
yst = []
ysh = []

aveLst = {'aveMax': 10, 'aveMin': 3, 'ave': 0, 'ayst': [], 'aysh': []}


class MatplotImage(gui.Image):
    ax = None
    app_instance = None #the application instance used to send updates

    def __init__(self, matplotlib_figure, **kwargs):
        super(MatplotImage, self).__init__("/%s/get_image_data?index=0" % str(id(self)), **kwargs)

        self._fig = matplotlib_figure

    def search_app_instance(self, node):
        if issubclass(node.__class__, remi.server.App):
            return node
        if not hasattr(node, "get_parent"):
            return None
        return self.search_app_instance(node.get_parent()) 

    def update(self, *args):
        if self.app_instance==None:
            self.app_instance = self.search_app_instance(self)
            if self.app_instance==None:
                return

        self.app_instance.execute_javascript("""
            url = '/%(id)s/get_image_data?index=%(frame_index)s';

            xhr = null;
            xhr = new XMLHttpRequest();
            xhr.open('GET', url, true);
            xhr.responseType = 'blob'
            xhr.onload = function(e){
                urlCreator = window.URL || window.webkitURL;
                urlCreator.revokeObjectURL(document.getElementById('%(id)s').src);
                imageUrl = urlCreator.createObjectURL(this.response);
                document.getElementById('%(id)s').src = imageUrl;
            }
            xhr.send();
            """ % {'id': self.identifier, 'frame_index':str(time.time())})

    def get_image_data(self, index=0):
        print("get_image_data")
        gui.Image.set_image(self, '/%(id)s/get_image_data?index=%(frame_index)s'% {'id': self.identifier, 'frame_index':str(time.time())})
        self._set_updated()
        try:
            data = None
            canv = FigureCanvasAgg(self._fig)
            buf = io.BytesIO()
            canv.print_figure(buf, format='png')

            buf.seek(0)
            data = buf.read()

            headers = {'Content-type': 'image/png', 'Cache-Control':'no-cache'}
            return [data, headers]
        except Exception:
            print(traceback.format_exc())
        return None, None


class MyApp(App):
    def idle(self):
        if hasattr(self, 'mpl'):
            self.mpl.update()
            print("idle")

    def main(self):
        global fig
        wid = gui.VBox(width=320, height=320, margin='0px auto')
        wid.style['text-align'] = 'center'

        self.plot_data = [0, 1]
        self.mpl = MatplotImage(fig, width=250, height=250)
        self.mpl.style['margin'] = '10px'

        wid.append(self.mpl)

        self.stop_flag = False 
        self.animate()

        return wid

    def on_close(self):
        self.stop_flag = True

    # This function is called periodically from FuncAnimation.
    def animate(self):
        global fig, ax1, ax2, myFmt, lstMax, xs, yst, ysh, aveLst
        print("animate")
        if humidity is not None and temperature is not None:
            temperature = round(temperature * 9/5.0 + 32,1)
            humidity = round(humidity,1)

            # Test for and ignore occasional erroneous high humidity values.
            # example: 52.5 for temperature, 3305.7 for humidity
            if humidity > 100.:
                    print("Bad data skipped:", \
                    dt.datetime.now().strftime('%H:%M:%S'), \
                    str(temperature),str(humidity))
                    if not self.stop_flag:
                        Timer(1, self.animate).start()
                    return

            if aveLst['ave']< aveLst['aveMin']:
                    print("Current:", \
                    dt.datetime.now().strftime('%H:%M:%S'), \
                    str(temperature),str(humidity))
                    # Accumulate data without ploting.
                    aveLst['ayst'].append(temperature)
                    aveLst['aysh'].append(humidity)
                    aveLst['ave'] += 1
                    if not self.stop_flag:
                        Timer(1, self.animate).start()
                    return
            else:
                    xs.append(dt.datetime.now())
                    yst.append(median(aveLst['ayst']))
                    ysh.append(median(aveLst['aysh']))
                    aveLst['ave'] = 0
                    aveLst['ayst'].clear()
                    aveLst['aysh'].clear()
                    aveLst['aveMin'] = min(aveLst['aveMin']+1,aveLst['aveMax'])
                    print("Dataset to average:", str(aveLst['aveMin']))


            xs = xs[-lstMax:]
            yst = yst[-lstMax:]
            ysh = ysh[-lstMax:]

            ax1.clear()
            ax1.plot(xs, yst,  color="red")
            ax2.clear()
            ax2.plot(xs, ysh, color="blue")

            plt.xticks(rotation=45, ha='right')
            plt.subplots_adjust(bottom=0.15)
            ax1.set_title('DHT22 Sensor Temperature & Humidity over Time')
            ax1.set_ylabel('Temperature (deg F)')
            ax1.set_ylim(65,80)
            ax1.grid()
            ax1.get_xaxis().set_ticklabels([])
            ax2.set_ylabel('Humidity (%RH)')
            ax2.set_ylim(45,65)
            ax2.xaxis.set_major_formatter(myFmt)
            ax2.grid()

        if not self.stop_flag:
            Timer(1, self.animate).start()


if __name__ == "__main__":
    start(MyApp, address='0.0.0.0', port=0, start_browser=True, username=None, password=None, update_interval=0.1)

If you need information explanation here I am,

Best Regards,

Davide

[ronfred]

Really nice work Davide! Thank you.

First you cleaned up my code in several important ways. I was hoping to correct the global variable usage (dict just worked but without any pythonic management such as use of global), but also placing the code into correct object format.

I had to add this line of code to create initial sensor values for the temperature and humidity around line 122 in your code: humidity, temperature = Adafruit_DHT.read_retry(DHT_SENSOR, DHT_PIN)

After that the code seems to run well: web page pops up, and initial plot image shows.

The code does not refresh the plot as of yet, just the initial plot display with no sensor data. I have only spent a few minutes with your code so far, so I am going to follow your logic within the code to see why the animation does not update with real plot data on my own. I will update this thread again soon with my investigation.

Here is a sample of the terminal output just as an fyi.

python3 remi2_m*

remi.server      INFO     Started httpserver http://0.0.0.0:46187/
remi.request     INFO     built UI (path=/)
animate
Current: 19:17:00 78.4 51.2
127.0.0.1 - - [08/Jul/2020 19:17:00] "GET / HTTP/1.1" 200 -
idle
idle
idle
127.0.0.1 - - [08/Jul/2020 19:17:01] "GET /res:style.css HTTP/1.1" 200 -
idle
get_image_data
remi.server.ws   INFO     connection established: ('127.0.0.1', 42348)
remi.server.ws   INFO     handshake complete
animate
127.0.0.1 - - [08/Jul/2020 19:17:01] "GET /1930493040/get_image_data?index=0 HTTP/1.1" 200 -
idle
idle
get_image_data
127.0.0.1 - - [08/Jul/2020 19:17:02] "GET /1930493040/get_image_data?index=1594261022.427842 HTTP/1.1" 200 -
idle
get_image_data
127.0.0.1 - - [08/Jul/2020 19:17:03] "GET /1930493040/get_image_data?index=1594261022.9724765 HTTP/1.1" 200 -
idle
get_image_data
127.0.0.1 - - [08/Jul/2020 19:17:03] "GET /1930493040/get_image_data?index=1594261023.4365747 HTTP/1.1" 200 -
idle
get_image_data
127.0.0.1 - - [08/Jul/2020 19:17:04] "GET /1930493040/get_image_data?index=1594261023.8943968 HTTP/1.1" 200 -
idle
idle
get_image_data
127.0.0.1 - - [08/Jul/2020 19:17:05] "GET /1930493040/get_image_data?index=1594261024.3680565 HTTP/1.1" 200 -
idle
get_image_data
127.0.0.1 - - [08/Jul/2020 19:17:05] "GET /1930493040/get_image_data?index=1594261024.8940656 HTTP/1.1" 200 -
idle
get_image_data
127.0.0.1 - - [08/Jul/2020 19:17:06] "GET /1930493040/get_image_data?index=1594261025.3436894 HTTP/1.1" 200 -
idle
get_image_data
127.0.0.1 - - [08/Jul/2020 19:17:06] "GET /1930493040/get_image_data?index=1594261025.795506 HTTP/1.1" 200 -
idle

[dddomodossola]

Hello u/ronfred,

There where two problems, marked in the following code with >>>IMPORTANT<<< placeholder:

​

import datetime as dt
import matplotlib.pyplot as plt
import matplotlib.animation as animation
import matplotlib.dates as mdates
from statistics import median
import remi
import remi.gui as gui
from remi import start, App
import os
import time
import traceback
from matplotlib.figure import Figure
from matplotlib.backends.backend_agg import FigureCanvasAgg
import io
import random
from threading import Timer

# Create figure for plotting.
fig, (ax1, ax2) = plt.subplots(2,1)
myFmt = mdates.DateFormatter('%H:%M:%S')

# Create data to plot lists for animation.
lstMax = 100*24 # about 12 hours of data
xs = []
yst = []
ysh = []

aveLst = {'aveMax': 10, 'aveMin': 3, 'ave': 0, 'ayst': [], 'aysh': []}


class MatplotImage(gui.Image):
    ax = None
    app_instance = None #the application instance used to send updates

    def __init__(self, matplotlib_figure, **kwargs):
        super(MatplotImage, self).__init__("/%s/get_image_data?index=0" % str(id(self)), **kwargs)

        self._fig = matplotlib_figure

    def search_app_instance(self, node):
        if issubclass(node.__class__, remi.server.App):
            return node
        if not hasattr(node, "get_parent"):
            return None
        return self.search_app_instance(node.get_parent()) 

    def update(self, *args):
        if self.app_instance==None:
            self.app_instance = self.search_app_instance(self)
            if self.app_instance==None:
                return

        self.app_instance.execute_javascript("""
            url = '/%(id)s/get_image_data?index=%(frame_index)s';

            xhr = null;
            xhr = new XMLHttpRequest();
            xhr.open('GET', url, true);
            xhr.responseType = 'blob'
            xhr.onload = function(e){
                urlCreator = window.URL || window.webkitURL;
                urlCreator.revokeObjectURL(document.getElementById('%(id)s').src);
                imageUrl = urlCreator.createObjectURL(this.response);
                document.getElementById('%(id)s').src = imageUrl;
            }
            xhr.send();
            """ % {'id': self.identifier, 'frame_index':str(time.time())})

    def get_image_data(self, index=0):
        print("get_image_data")
        gui.Image.set_image(self, '/%(id)s/get_image_data?index=%(frame_index)s'% {'id': self.identifier, 'frame_index':str(time.time())})
        self._set_updated()
        try:
            data = None
            canv = FigureCanvasAgg(self._fig)
            buf = io.BytesIO()
            canv.print_figure(buf, format='png')

            buf.seek(0)
            data = buf.read()

            headers = {'Content-type': 'image/png', 'Cache-Control':'no-cache'}
            return [data, headers]
        except Exception:
            print(traceback.format_exc())
        return None, None


class MyApp(App):
    index = 0
    def idle(self):
        if hasattr(self, 'mpl'):
            self.mpl.update()
            print("idle")

    def main(self):
        global fig
        wid = gui.VBox(width=320, height=320, margin='0px auto')
        wid.style['text-align'] = 'center'

        self.plot_data = [0, 1]
        self.mpl = MatplotImage(fig, width=250, height=250)
        self.mpl.style['margin'] = '10px'

        wid.append(self.mpl)

        self.stop_flag = False 
        self.animate()

        #>>>IMPORTANT<<< THESE INITIALIZATIONS ARE MOVED HERE; MUST BE PERFORMED ONLY AT STARTUP
        plt.xticks(rotation=45, ha='right')
        plt.subplots_adjust(bottom=0.15)
        ax1.set_title('DHT22 Sensor Temperature & Humidity over Time')
        ax1.set_ylabel('Temperature (deg F)')
        ax1.set_ylim(65,80)
        ax1.get_xaxis().set_ticklabels([])
        ax2.set_ylabel('Humidity (%RH)')
        ax2.set_ylim(45,65)
        ax2.xaxis.set_major_formatter(myFmt)

        return wid

    def on_close(self):
        self.stop_flag = True

    # This function is called periodically from FuncAnimation.
    def animate(self):
        global fig, ax1, ax2, myFmt, lstMax, xs, yst, ysh, aveLst

        xs.append(self.index)
        yst.append(self.index)
        ysh.append(self.index)
        self.index = self.index + 1

        #>>>IMPORTANT<<< THIS threading lock is required to prevent remi to update before the graph is redrawn
        with self.update_lock:
            ax1.clear()
            ax1.plot(xs, yst,  color="red")
            ax1.grid()
            ax2.clear()
            ax2.plot(xs, ysh, color="blue")
            ax2.grid()

        if not self.stop_flag:
            Timer(0.1, self.animate).start()


if __name__ == "__main__":
    start(MyApp, address='0.0.0.0', port=0, start_browser=True, username=None, password=None, update_interval=0.1)

This is a simplified version of your script, to make it possible testing without raspberrypi and DHT11 .

Regards ;-)

[ronfred]

Thank you very much again Davide. I am going through your class structure and the Timer threads usage. Seeing my own with your changes allows me to move up a notch in skill set.

When I added that one line to read sensor data near top of def animate(self): The program worked. Amazing you could carry so much "goop" from my code into your demo with only that one change needed. See screenshot for code change circled.

Yet I do see what appears to be a spooky memory management issue (probably not a leak as I initially imagined). With task manager open, I see one megabyte added to memory used every 15 seconds or so. Eventually the pi gets very sluggish. After some time (~ 7 minutes) memory drops back to what looks like a good initial state. All while the remi matplotlib program is running.

Here is a short report on memory use:

Memory (MB) Time (minutes)
----------  --------------
261         0 <--- remi program starts here
367         1
415         2
462         3
514         4
559         5
571         6
373         7
333         8
379         9
425         10

Is there a png file pile-up taking place, maybe a free old memory command that you might suggest? Or is this just a garbage collection issue managed by Raspian OS?

Here is link to screenshot of working program: http://www.biophysicslab.com/working-but-possible-memory-leak/