import json import os import string from math import cos from datetime import datetime import dash import numpy as np from dash import Dash, html, dcc, Output, Input, State, MATCH, ctx, ClientsideFunction, ALL from dash.exceptions import PreventUpdate from python.gui.cytoscape import style, buildEdges, buildNodes from python.gui.flatten import flattenDevice from python.gui.templates import Device, find_Device, now, find_Device_strict import dash_cytoscape as cyto # TODO Repair the Cytoscape Node Click Callbacks toggling visibility of the associated graphs # TODO CSS BUG: the graphs don't float to the top. (check only DcDc current for example) # TODO Startup Bug: ~~This should resolve itself once we have realtime data~~ # TODO Beautify and Test (E.G Units) # External css and javascript for the dash app external_stylesheets = [ './assets/header.css', ] external_scripts = [ './assets/inserted.js', ] # Main Dash App Webserver app = Dash(__name__, external_stylesheets=external_stylesheets, external_scripts=external_scripts) # First: Build Topology # Grabs device names and connections from topology file # NOTE: Device changes are only possible on restart TODO grab topology from s3 deviceNames = [] connectionsL = [] connectionsT = [] connectionsB = [] connectionsR = [] devices = [] topology = json.load(open(f"./assets/data/topology1671435263")) def psum(l : list) -> float: sum = 0 for k in l: if k: sum += k return float(sum) #This builds the cytoscape nodes (deviceNames, and Edges (connections) for i, bus in enumerate(topology["Topology"]): # if not bus["Name"] in deviceNames: for key in bus.keys(): nodeName = bus[key].split(':',1)[0] if not nodeName or nodeName == "None" or nodeName == "Losses": continue if not nodeName in deviceNames: deviceNames.append(nodeName) dev = Device(nodeName) new = True elif key == "Name": new = False dev = find_Device_strict(nodeName, devices)[0] else: continue invisible = False pos = [0,0] buspower = [] if len(bus[key].split(':'))>2 and bus[key].split(':')[2] == "hide": invisible = True if invisible: dev.connection = [bus["Name"], nodeName] match key: case "Left": pos = [i, 1] if invisible: if topology["Topology"][i - 1]["Name"] != None: nodeName = topology["Topology"][i - 1]["Name"] if not (bus["Name"], nodeName) in connectionsL: connectionsL.append((bus["Name"], nodeName)) connectionsR.append((nodeName, bus["Name"])) case "Right": pos = [i + 2, 1] if invisible: if len(topology["Topology"]) > i and topology["Topology"][i + 1]["Name"] != None != "None": nodeName = topology["Topology"][i + 1]["Name"] if not (bus["Name"], nodeName) in connectionsR: connectionsR.append((bus["Name"], nodeName)) connectionsL.append((nodeName, bus["Name"])) case "Name": pos = [i + 1, 1] if new: buspower = [bus[key] for key in bus.keys() if not key == "Name"] if bus["Name"] == nodeName == "Dc": connectionsR.append(("Inverter", bus["Name"])) connectionsL.append((nodeName, "Inverter")) if bus["Name"] == nodeName == "DcDc": connectionsL.append((nodeName, "Dc")) case "Top": pos = [i + 1, 0] if not (bus["Name"], nodeName) in connectionsT: connectionsT.append((nodeName, bus["Name"])) case "Bottom": pos = [i + 1, 2] if not (bus["Name"], nodeName) in connectionsB: connectionsB.append((bus["Name"], nodeName)) if buspower != []: dev.Buspower = buspower if invisible: pos = [0, 0] dev.position = pos if new: devices.append(dev) # NOTE: Device changes are only possible on restart #deviceNames = ['Grid','PvOnAcIn','ac_in','ac_last','ac_out','Inverter','dc_last','PvOnDc','dc_bus','DcDc','battery'] # devices = [Device(name) for name in deviceNames] # data for the cytoscape graph found in ./cytoscape.py nodes = buildNodes(devices) edges = buildEdges(connectionsT + connectionsB + connectionsL + connectionsR) elements = nodes + edges # Second: Grab initial GraphData # Building initial device Data TODO implement Local/S3 History path = "./assets/data3/" allFileNames = os.listdir(path) fileNames = allFileNames[0:180] # fileNames = [f"./assets/data/{i}" for i in range(1671435263, 1671435443, 2)] #range(1669730732, 1669731092, 2)] # timeData is a dict of dicts with the keys being the timestamps timeData = {} for i, file in enumerate(fileNames): file = json.load(open(path + file)) timeData.update({fileNames[i]:{}}) for device in file["Devices"]: timeData[fileNames[i]].update(flattenDevice(device)) # Building initial device graphs (this considerably reduces input lag, but increases start time of the program) for time in timeData.keys(): for key in timeData[time].keys(): device = find_Device_strict(key.split("/")[0], devices)[0] if not device: continue #TODO THROW ERROR if not time in (device.data.keys()): device.data.update({time: {}}) if not len(key.split("/", 1)) < 2: device.data[time].update({key.split("/", 1)[1]: timeData[time][key]}) debug = [] #----------------------------------------------------------------------------------------------------------------------- # Callbacks # This shifts the website viewpoint to the graphs of the node that has been clicked on # And toggles visibility of graphs associated with the node-device # using Javascript found in clientside.js app.clientside_callback( ClientsideFunction( namespace='clientside', function_name='clickNode' ), Output('placeholder', 'data'), Input('view', 'data') ) # Clock callback, every second updates the time TODO MAKE ME CLIENTSIDE? # This also resets tapNodeData and tapEdgeData for correct handling of clicks on nodes/edges @app.callback([Output('title', 'children'), Output('cytoscape-elements', 'tapNodeData'), Output('cytoscape-elements', 'tapEdgeData')], Input('interval-component3', 'n_intervals')) def update_time_live(n): return ''' Echtzeit Daten-Monitoring ''' + str(np.datetime64('now')).replace('T', ' '), {}, {} # Updates the powergraph connections every 2 seconds, also tracks the highest power measured in 'max-power' dcc.Store @app.callback(Output('cytoscape-elements', 'elements'), Output('max-power', 'data'), Input('interval-component-2', 'n_intervals'), State('max-power', 'data')) def update_power_graph(n, maxPower): for i, device in enumerate(devices): # device.UpdatePower() if device.name == "Battery": continue power = device.power #TODO as long as device is not inverter None will be in power if power == [None, None] and device.Buspower == []: continue rpower = [] # Left top bottom right sum = psum(power) if sum > maxPower: maxPower = sum #TODO handle inverter two power measurements.. # Setting nodes to either a producer or consumer depending on power out/in for node in ( nodes[y] for y in range(0, len(nodes)) if nodes[y]['data']['id'] == device.name): if sum >= 0: node.update({'classes': node.get('classes') + ' producer'}) else: node.update({'classes': node.get('classes') + ' consumer'}) # Updates the power values on the connections if device.Buspower != []: for remote in device.Buspower: remoteDevice = find_Device_strict(remote.split(":", 1)[0], devices)[0] if None in remoteDevice.power: remotePower = remoteDevice.power[0] if remoteDevice.power[0] != None else remoteDevice.power[1] else: #Inverter if "Ac" in device.name: remotePower = remoteDevice.power[0] else: remotePower = remoteDevice.power[1] rpower.append(remotePower) #or edges[y]['data']['source'] in device.Buspower) if None in power: if rpower != []: if rpower[0] <= 0: for connection in (y for y in connectionsL if device.name == y[0]): for edge in (edges[y] for y in range(0, len(edges)) if edges[y]['data']['source'] == connection[0] and edges[y]['data']['target'] == connection[1]): edge.update({'style': {'width': str((rpower[0]/maxPower) * 20) + 'px'}}) edge['data'].update({'label': [str(int(abs(rpower[0]))) + "W"]}) for connection in (y for y in connectionsR if device.name == y[0]): for edge in (edges[y] for y in range(0, len(edges)) if edges[y]['data']['source'] == connection[0] and edges[y]['data']['target'] == connection[1]): edge.update({'style': {'width': str(0) + 'px'}}) edge['data'].update({'label': []}) else: for connection in (y for y in connectionsR if device.name == y[1]): for edge in (edges[y] for y in range(0, len(edges)) if edges[y]['data']['source'] == connection[0] and edges[y]['data']['target'] == connection[1]): edge.update({'style': {'width': str((rpower[0]/maxPower) * 20) + 'px'}}) edge['data'].update({'label': [str(int(abs(rpower[0]))) + "W"]}) for connection in (y for y in connectionsL if device.name == y[1]): for edge in (edges[y] for y in range(0, len(edges)) if edges[y]['data']['source'] == connection[0] and edges[y]['data']['target'] == connection[1]): edge.update({'style': {'width': str(0) + 'px'}}) edge['data'].update({'label': []}) if rpower[3] >= 0: #This should always be the case for connection in (y for y in connectionsR if device.name == y[0]): for edge in (edges[y] for y in range(0, len(edges)) if edges[y]['data']['source'] == connection[0] and edges[y]['data']['target'] == connection[1]): edge.update({'style': {'width': str((rpower[3]/maxPower) * 20) + 'px'}}) edge['data'].update({'label': [str(int(rpower[3])) + "W"]}) for connection in (y for y in connectionsL if device.name == y[1]): for edge in (edges[y] for y in range(0, len(edges)) if edges[y]['data']['source'] == connection[0] and edges[y]['data']['target'] == connection[1]): edge.update({'style': {'width': str(0) + 'px'}}) edge['data'].update({'label': []}) else: for connection in (y for y in connectionsL if device.name == y[1]): for edge in (edges[y] for y in range(0, len(edges)) if edges[y]['data']['source'] == connection[0] and edges[y]['data']['target'] == connection[1]): edge.update({'style': {'width': str((rpower[3] / maxPower) * 20) + 'px'}}) edge['data'].update({'label': [str(int(abs(rpower[3]))) + "W"]}) for connection in (y for y in connectionsR if device.name == y[0]): for edge in (edges[y] for y in range(0, len(edges)) if edges[y]['data']['source'] == connection[0] and edges[y]['data']['target'] == connection[1]): edge.update({'style': {'width': str(0) + 'px'}}) edge['data'].update({'label': []}) if not rpower[2]: rpower[2] = 0 for connection in (y for y in connectionsB if device.name == y[0]): for edge in (edges[y] for y in range(0, len(edges)) if edges[y]['data']['source'] == connection[0] and edges[y]['data']['target'] == connection[1]): edge.update({'style': {'width': str((abs(rpower[0] + rpower[2] - rpower[3]) / maxPower) * 20) + 'px'}}) edge['data'].update({'label': [str(int(abs(rpower[0] + rpower[2] - rpower[3]))) + "W"]}) continue if not sum: continue if sum >= 0: for connection in (y for y in connectionsR + connectionsT if device.name == y[0]): for edge in (edges[y] for y in range(0, len(edges)) if edges[y]['data']['source'] == connection[0] and edges[y]['data']['target'] == connection[1]): edge.update({'style': {'width': str((sum/maxPower) * 20) + 'px'}}) edge['data'].update({'label': [str(int(sum)) + "W"]}) for connection in (y for y in connectionsL if device.name == y[1]): for edge in (edges[y] for y in range(0, len(edges)) if edges[y]['data']['source'] == connection[0] and edges[y]['data']['target'] == connection[1]): edge.update({'style': {'width': str(0) + 'px'}}) edge['data'].update({'label': []}) elif sum < 0: for connection in (y for y in connectionsR + connectionsT if device.name == y[0]): for edge in (edges[y] for y in range(0, len(edges)) if edges[y]['data']['source'] == connection[0] and edges[y]['data']['target'] == connection[1]): edge.update({'style': {'width': str(0) + 'px'}}) edge['data'].update({'label': []}) for connection in (y for y in connectionsL if device.name == y[1]): for edge in (edges[y] for y in range(0, len(edges)) if edges[y]['data']['source'] == connection[0] and edges[y]['data']['target'] == connection[1]): edge.update({'style': {'width': str((sum/maxPower) * 20) + 'px'}}) edge['data'].update({'label': [str(abs(int(sum))) + "W"]}) else: #This is the inverter if not sum: continue # if power[0] < 0: # #Ac side # # for connection in (y for y in connectionsL if device.name == y[0]): # # for edge in (edges[y] for y in range(0, len(edges)) if # # edges[y]['data']['source'] == connection[0] and edges[y]['data']['target'] == connection[1]): # # edge.update({'style': {'width': str((power[0]/maxPower) * 10) + 'px'}}) # # edge['data'].update({'label': [str(int(power[0])) + "W"]}) # # else: # # for connection in (y for y in connectionsL if device.name == y[0]): # # for edge in (edges[y] for y in range(0, len(edges)) if # # edges[y]['data']['source'] == connection[0] and edges[y]['data']['target'] == connection[1]): # # edge.update({'style': {'width': 0 + 'px'}}) # # edge['data'].update({'label': []}) if power[1] > 0: #DC side for connection in (y for y in connectionsR if device.name == y[0]): for edge in (edges[y] for y in range(0, len(edges)) if edges[y]['data']['source'] == connection[0] and edges[y]['data']['target'] == connection[1]): edge.update({'style': {'width': str((power[1]/maxPower) * 20) + 'px'}}) edge['data'].update({'label': [str(int(power[1])) + "W"]}) for connection in (y for y in connectionsL if device.name == y[1]): for edge in (edges[y] for y in range(0, len(edges)) if edges[y]['data']['source'] == connection[0] and edges[y]['data']['target'] == connection[1]): edge.update({'style': {'width': str(0) + 'px'}}) edge['data'].update({'label': []}) elif power[1] < 0: #DC side for connection in (y for y in connectionsL if device.name == y[1]): for edge in (edges[y] for y in range(0, len(edges)) if edges[y]['data']['source'] == connection[0] and edges[y]['data']['target'] == connection[1]): edge.update({'style': {'width': str(abs(power[1]/maxPower) * 20) + 'px'}}) edge['data'].update({'label': [str(int(abs(power[1]))) + "W"]}) for connection in (y for y in connectionsR if device.name == y[0]): for edge in (edges[y] for y in range(0, len(edges)) if edges[y]['data']['source'] == connection[0] and edges[y]['data']['target'] == connection[1]): edge.update({'style': {'width': str(0) + 'px'}}) edge['data'].update({'label': []}) return elements, maxPower # Handles the visibility checkmarks through wildcards @app.callback([Output({'type': 'graphs', 'index': MATCH}, "children"), Output({'type': 'checklist', 'index': MATCH}, "value")], [Input({'type': 'checklist', 'index': MATCH}, "value"), Input({'type': 'topChecklist', 'index': MATCH}, "value")], State({'type': 'graphs', 'index': MATCH}, "children") , prevent_initiall_call=True) def graph_visibility_checklist(value, top, graphs): if not graphs or not ctx.triggered_id: raise PreventUpdate #Setting all invisible and turning selected back on for graph in graphs: graph["props"]["hidden"] = True if top != [] and ctx.triggered_id.type == 'topChecklist': id = [] for graph in graphs: id.append(graph["props"]["children"]["props"]["id"]) graph["props"]["hidden"] = False for i in id: for dev in find_Device(i, devices): dev.hidden = False return graphs, id elif ctx.triggered_id.type == 'topChecklist': return graphs, [] if not value: return graphs, dash.no_update for graph in (graph for graph in graphs if (any(graph["props"]["children"]["props"]["id"]["role"] in i["role"] for i in value) or any(i["role"] in graph["props"]["children"]["props"]["id"]["role"] for i in value))): graph["props"]["hidden"] = False for i in value: for dev in find_Device(i["role"], devices): dev.hidden = False return graphs, dash.no_update # The small number next to the graph triggers are the latest Value or an average thereof (AC) @app.callback(Output({'type': 'checklist', 'index': ALL}, "options"), Input('interval-component3', 'n_intervals'), [State({'type': 'graphs', 'index': ALL}, "children"), State({'type': 'checklist', 'index': ALL}, "options")] ) def lable_previews(n, graphs, options): for x in graphs: if x != []: for g in x: for l in options: if l!=[]: for a in l: if g["props"]["children"]["props"]["id"]["role"].split(" ",1)[1].replace(" ", "") in a["label"][0].replace(" ", ""): val = 0 if g["props"]["children"]["props"]["figure"]["data"] != [] and len(g["props"]["children"]["props"]["figure"]["data"][0]["y"]) != 0: if len(g["props"]["children"]["props"]["figure"]["data"]) == 3: val = round((g["props"]["children"]["props"]["figure"]["data"][0]["y"][-1] + g["props"]["children"]["props"]["figure"]["data"][1]["y"][-1] + g["props"]["children"]["props"]["figure"]["data"][2]["y"][-1])/3, 1) else: if g["props"]["children"]["props"]["figure"]["data"][0]["y"][-1] != []: val = round(g["props"]["children"]["props"]["figure"]["data"][0]["y"][-1], 1) a["label"][0] = (a["label"][0].rstrip(string.digits + string.punctuation + string.whitespace) + " " + str(val)) return options # the second output triggers the viewport callback nodeViewShift TODO MAKE ME CLIENTSIDE? @app.callback(Output('view', 'data'), [Input('cytoscape-elements', 'tapNodeData'), Input('cytoscape-elements', 'tapEdgeData')], State('view', 'data'),) def cytoscape_visibility_clicks(nodeData, edgeData, view): if nodeData and nodeData != {}: return '{"index":%s,"type":"topChecklist"}' % (find_Device_strict(nodeData["id"], devices)[0].index) elif edgeData and edgeData != {}: return '{"index":%s,"type":"topChecklist"}' % (find_Device_strict(edgeData["source"], devices)[0].index) return dash.no_update # Updates the individual graphs every second @app.callback(Output('OurGraphs', 'children'), Input('interval-component', 'n_intervals'), State('OurGraphs', 'children'), prevent_initiall_call=True) def update_graphs(n, graphs): # TODO GRAB NEW DATA FROM DISK OR S3 timeData = {} #Local copy of allFileNames because we loop over them at the moment n = allFileNames number = int(list(set(n) - set(fileNames))[0]) # #TODO REMOVE ME # if number >= 1673427558: # number = 1673427378 fileNames.pop(0) fileNames.append(str(number)) filename = path + str(number) file = json.load(open(filename)) timeData.update({filename: {}}) for device in file["Devices"]: timeData[filename].update(flattenDevice(device)) for device in devices: if not filename in (device.data.keys()): device.data.update({filename: {}}) for key in (key for key in timeData[filename].keys() if key.split("/",1)[0] == device.name): device.data[filename].update({key.split("/", 1)[1]: timeData[filename][key]}) for k, device in enumerate(graphs): for graph in device["props"]["children"][0]["props"]["children"]: id = graph["props"]["children"]["props"]["id"] fig = graph["props"]["children"]["props"]["figure"] if "Power" in id["role"].split(" ", 1)[1]: if "Ac" in id["role"].split(" ", 1)[1]: # 3-phase AC fig["data"][0]['y'][0] = (devices[k].data[list(devices[k].data.keys())[-1]]["Ac"][0]["Voltage"] * devices[k].data[list(devices[k].data.keys())[-1]]["Ac"][0]["Current"] * cos(devices[k].data[list(devices[k].data.keys())[-1]]["Ac"][0]["Phi"])+ devices[k].data[list(devices[k].data.keys())[-1]]["Ac"][1]["Voltage"] * devices[k].data[list(devices[k].data.keys())[-1]]["Ac"][1]["Current"] * cos(devices[k].data[list(devices[k].data.keys())[-1]]["Ac"][1]["Phi"])+ devices[k].data[list(devices[k].data.keys())[-1]]["Ac"][2]["Voltage"] * devices[k].data[list(devices[k].data.keys())[-1]]["Ac"][2]["Current"] * cos(devices[k].data[list(devices[k].data.keys())[-1]]["Ac"][2]["Phi"])) devices[k].power[0] = fig["data"][0]['y'][0] if "Dc" in id["role"].split(" ", 1)[1] and not "Dc48" in devices[k].data[list(devices[k].data.keys())[-1]]: # DC fig["data"][0]['y'][0] = (devices[k].data[list(devices[k].data.keys())[-1]]["Dc"]["Voltage"] * devices[k].data[list(devices[k].data.keys())[-1]]["Dc"]["Current"]) devices[k].power[1] = fig["data"][0]['y'][0] if "Dc48" in devices[k].data[list(devices[k].data.keys())[-1]]: fig["data"][0]['y'][0] = (devices[k].data[list(devices[k].data.keys())[-1]]["Dc48"]["Voltage"] * devices[k].data[list(devices[k].data.keys())[-1]]["Dc48"]["Current"]) devices[k].power[1] = fig["data"][0]['y'][0] fig["data"][0]['x'][0] = now(filename) fig["data"][0]['y'] = np.roll(fig["data"][0]['y'], -1) fig["data"][0]['x'] = np.roll(fig["data"][0]['x'], -1) continue if "Dc" in id["role"].split(" ",1)[1] or "Ac" in id["role"].split(" ",1)[1] or "Alarm" in id["role"] and "Actual" not in id["role"] : for i, g in enumerate(fig["data"]): if g["x"] == [] or g["y"] == []: continue g["x"].pop(0) g["y"].pop(0) g["x"].append(now(filename)) if "Ac" in id["role"].split(" ",1)[1] and "Actual" not in id["role"] and "Power" not in id["role"]: g["y"].append(devices[k].data[list(devices[k].data.keys())[-1]][ id["role"].split(" ", 1)[1].split(' ')[0]][i][ id["role"].split(" ", 1)[1].split(' ')[1]]) elif "Dc48" in devices[k].data[list(devices[k].data.keys())[-1]] and "Actual" not in id["role"] and "Power" not in id["role"]: g["y"].append(devices[k].data[list(devices[k].data.keys())[-1]]["Dc48"][ id["role"].split(" ", 1)[1].split(' ')[1]]) elif "Dc" in id["role"].split(" ",1)[1] and "Actual" not in id["role"] and "Power" not in id["role"]: g["y"].append(devices[k].data[list(devices[k].data.keys())[-1]][ id["role"].split(" ", 1)[1].split(' ')[0]][ id["role"].split(" ", 1)[1].split(' ')[1]]) elif "Alarm" in id["role"].split(" ",1)[1]: g["y"].append(1 if g["name"] in devices[k].data[list(devices[k].data.keys())[-1]][ id["role"].split(" ", 1)[1].split(' ')[0]] else 0) continue elif "Actual" in id["role"] or fig["data"] ==[]: continue fig["data"][0]['y'][0] = devices[k].data[list(devices[k].data.keys())[-1]][id["role"].split(" ", 1)[1]] fig["data"][0]['y'] = np.roll(fig["data"][0]['y'], -1) fig["data"][0]['x'][0] = now(filename) fig["data"][0]['x'] = np.roll(fig["data"][0]['x'], -1) return graphs # Main HTML Layout of the app ------------------------------------------------------------------------------------------ app.layout = html.Div(children=[ # Static Header with logo and Clock html.Header(className='bp-page-header', children=[ html.Img(src="./assets/innovenergy_Logo_onOrange.png", className="logo"), html.H1(children='Salimax Gui Demo'), html.H4(className="clock", id="title", children=[''' Echtzeit Daten-Monitoring ''' + str(datetime.now().replace(microsecond=0))]) ]), #Big powergraph "overview" html.Div(id="powerGraph", className='powerGraph', children= cyto.Cytoscape( id='cytoscape-elements', layout={'name': 'preset'}, style={'position': 'relative', 'width': '100%', 'height': '600px', 'margin': 'auto'}, elements=elements, stylesheet=style, userZoomingEnabled=False, userPanningEnabled=False, ) ), #html.Div(id="Divider", className="divider"), # html.Div(id="graph_buttons", children=[device.BuildButton() for device in devices]), # Don't be fooled, these are all the plots! They are built up in the callbacks html.Div(id="OurGraphs",className="graphs",children=[device.BuildDiv(i) for i,device in enumerate(devices)]), html.Div(id="Checklist",className="sidenav",children=[device.BuildChecklist(i) for i,device in enumerate(devices)]), # Every Second triggers updates to clock and plots dcc.Interval( id='interval-component3', interval=1 * 1000, # in milliseconds n_intervals=0 ), # Every two seconds updates plots dcc.Interval( id='interval-component', interval=1 * 1000, # in milliseconds n_intervals=0 ), # Every 5 seconds triggers PowerGraph Update dcc.Interval( id='interval-component-2', interval=1 * 1100, # in milliseconds n_intervals=0 ), # fake Cookie for the highest seen power used for graphing dcc.Store( id='max-power', data=1000 ), # fake cookie used to transfer viewport shift id data to clientside javascript dcc.Store( id='view', data=0 ), # Placeholder for Output callbacks which have no return value dcc.Store(id='placeholder', data=0) ]) # Main App Start on specified ip (here local) if __name__ == '__main__': app.run_server(host= 'localhost', debug=False)