Overview

• Stream data from a Bluefors Control Unit to access various statistics of a dilution refrigerator, such as temperature and flow rates.
• Display the values retrieved from the control unit on a web page that is continuously updated in real-time.
• Allow for multiple dilution refrigerators to be monitored concurrently.

Methodology

Front-End Implementation

Created the front-end using Next.js and React. The front-end is responsible for displaying the data retrieved from the Bluefors Control Unit in real-time.

Example Code for Front-End

import { useEffect, useState } from 'react';
import io from 'socket.io-client';
 
const socket = io('http://localhost:4000');
 
const Dashboard = () => {
  const [data, setData] = useState({ temperature: 0, flow: 0 });
 
  useEffect(() => {
    socket.on('data', (newData) => {
      setData(newData);
    });
 
    return () => {
      socket.off('data');
    };
  }, []);
 
  return (
    <div>
      <h1>Dilution Refrigerator Monitoring</h1>
      <p>Temperature: {data.temperature} K</p>
      <p>Flow: {data.flow} L/min</p>
    </div>
  );
};
 
export default Dashboard;
# EXAMPLE COMPONENT, SIMILAR IDEAS USED IN REAL FINAL PRODUCT

Back-End Implementation

The back-end is a Python script that uses WebSocket servers to communicate with the Bluefors API. It streams the data to the web page in real-time.

Example Code for Back-End

import asyncio
import websockets
import json
 
async def stream_data(websocket, path):
    while True:
        data = (API CALL TO BLUEFORS UNIT VIA KEY)
        await websocket.send(json.dumps(data))
        await asyncio.sleep(1)
 
start_server = websockets.serve(stream_data, 'localhost', 4000)
 
asyncio.get_event_loop().run_until_complete(start_server)
asyncio.get_event_loop().run_forever()

Running the Server To start the WebSocket server, run the Python script:

python server.py

Real-Time Updates With the WebSocket connection established between the front-end and the back-end, data is continuously streamed and updated on the web page, allowing for real-time monitoring of the dilution refrigerators.

Conclusion

This project successfully demonstrates how to stream data from a Bluefors Control Unit, display it on a continuously updated web page, and support concurrent monitoring of multiple dilution refrigerators. The combination of Next.js for the front-end and Python WebSocket servers for the back-end proves to be an effective solution for real-time data visualization.