An GUI weitergearbeitet

8 files changed, 258 insertions, 103 deletions

diff --git a/src/gui/NotoSerifCJKjp-Medium.otf b/src/gui/NotoSerifCJKjp-Medium.otf
new file mode 100644
index 0000000..1a37d19
--- /dev/null
+++ b/src/gui/NotoSerifCJKjp-Medium.otf
diff --git a/src/gui/dpg.ini b/src/gui/dpg.ini
new file mode 100644
index 0000000..8fd9e9b
--- /dev/null
+++ b/src/gui/dpg.ini
@@ -0,0 +1,15 @@
+[Window][Debug##Default]
+Pos=60,60
+Size=400,400
+Collapsed=0
+
+[Window][###21]
+Pos=60,60
+Size=129,100
+Collapsed=0
+
+[Window][###23]
+Pos=258,161
+Size=100,100
+Collapsed=0
+
diff --git a/src/gui/gui_v2.py b/src/gui/gui_v2.py
index 507659e..4513322 100755
--- a/src/gui/gui_v2.py
+++ b/src/gui/gui_v2.py
@@ -32,15 +32,22 @@ logger = logging.getLogger(__name__)
 
 
 create_context()
-create_viewport(title="Fading Demonstrator",width=1200, height=800)
+create_viewport(title="Fading Demonstrator",width=1920, height=1200)
 setup_dearpygui()
 
 # Show demo for dev
 show_demo()
-
-
+#show_font_manager()
 
 #================================================
+# add a font registry
+with font_registry():
+    # first argument ids the path to the .ttf or .otf file
+    default_font = add_font("NotoSerifCJKjp-Medium.otf", 20)
+    second_font = add_font("NotoSerifCJKjp-Medium.otf", 10)
+    test = add_font("NotoSerifCJKjp-Medium.otf", 30)
+    
+#================================================
 # GUI Callback functions
 
 # Menu Bar 
@@ -56,10 +63,21 @@ def on_rx_node_delink(sender, app_data):
     link_id = app_data
     delete_item(link_id)
 
+# add and load images
+def add_and_load_image(image_path):
+    width, height, channels, data = load_image(image_path)
+
+    with texture_registry() as reg_id:
+        texture_id = add_static_texture(width, height, data, parent=reg_id)
+
+    return add_image(texture_id)
+
+
 #================================================
 #Setting Primary Window
 
 with window(tag="Primary Window"):
+    bind_font(default_font) # Grössere Schrifftart/ Grösse für das ganze Dokument definiert
 
 #================================================
 #Setting Window in Menu 
@@ -76,46 +94,52 @@ with window(tag="Primary Window"):
             add_menu_item(label="Close", callback= exit)
             bind_item_theme(last_item(),"close")
 
-# #================================================
-# # Flow Graph Window
+        with menu(label="Plot"):
+            add_menu_item(label="unlock x limits", callback=lambda: set_axis_limits_auto("xaxis_channel"))    
+            add_menu_item(label="unlock y limits", callback=lambda: set_axis_limits_auto("yaxis_channel"))
+
 
-# with window(label="RX DSP Flow Graph", width=800, height=400, pos=(25,25), tag="rx_win"):
-#     with node_editor(callback=on_rx_node_link, delink_callback=on_rx_node_delink):
-#         with node(label="USRP Source", pos=(20,100)):
-#             with node_attribute(tag="src_out", attribute_type=mvNode_Attr_Output):
-#                 add_text("Signal from antenna")
+#================================================
+# Flow Graph Window
 
-#         with node(label="Clock Sync", pos=(200,200)):
-#             with node_attribute(tag="clksync_in", attribute_type=mvNode_Attr_Input):
-#                 add_text("Input")
+with window(label="RX DSP Flow Graph", width=800, height=400, pos=(0,25), tag="rx_win", 
+    no_title_bar = True, no_move=True, no_collapse= True):
+    with node_editor(callback=on_rx_node_link, delink_callback=on_rx_node_delink):
+        with node(label="USRP Source", pos=(20,100)):
+            with node_attribute(tag="src_out", attribute_type=mvNode_Attr_Output):
+                add_text("Signal from antenna")
 
-#             with node_attribute(tag="clksync_out", attribute_type=mvNode_Attr_Output):
-#                 add_text("Synchronized")
+        with node(label="Clock Sync", pos=(200,200)):
+            with node_attribute(tag="clksync_in", attribute_type=mvNode_Attr_Input):
+                add_text("Input")
 
-#         with node(label="Equalizer", pos=(350,100)):
-#             with node_attribute(tag="eq_in", attribute_type=mvNode_Attr_Input):
-#                 add_text("Input")
+            with node_attribute(tag="clksync_out", attribute_type=mvNode_Attr_Output):
+                add_text("Synchronized")
 
-#             with node_attribute(attribute_type=mvNode_Attr_Static):
-#                 add_knob_float(label="Gain")
+        with node(label="Equalizer", pos=(350,100)):
+            with node_attribute(tag="eq_in", attribute_type=mvNode_Attr_Input):
+                add_text("Input")
 
-#             with node_attribute(tag="eq_out", attribute_type=mvNode_Attr_Output):
-#                 add_text("Equalized")
+            with node_attribute(attribute_type=mvNode_Attr_Static):
+                add_knob_float(label="Gain")
 
-#         with node(label="Phase Locked Loop", pos=(600, 200)):
-#             with node_attribute(tag="pll_in", attribute_type=mvNode_Attr_Input):
-#                 add_text("Input")
+            with node_attribute(tag="eq_out", attribute_type=mvNode_Attr_Output):
+                add_text("Equalized")
 
-#             with node_attribute(tag="pll_out", attribute_type=mvNode_Attr_Output):
-#                 add_text("Locked")
-#                 add_knob_float(label="Loop BW")
+        with node(label="Phase Locked Loop", pos=(600, 200)):
+            with node_attribute(tag="pll_in", attribute_type=mvNode_Attr_Input):
+                add_text("Input")
 
+            with node_attribute(tag="pll_out", attribute_type=mvNode_Attr_Output):
+                add_text("Locked")
+                add_knob_float(label="Loop BW")
 
-#         add_node_link(get_alias_id("src_out"), get_alias_id("clksync_in"))
-#         add_node_link(get_alias_id("clksync_out"), get_alias_id("eq_in"))
-#         add_node_link(get_alias_id("eq_out"), get_alias_id("pll_in"))
 
-# #================================================
+        add_node_link(get_alias_id("src_out"), get_alias_id("clksync_in"))
+        add_node_link(get_alias_id("clksync_out"), get_alias_id("eq_in"))
+        add_node_link(get_alias_id("eq_out"), get_alias_id("pll_in"))
+
+#================================================
 # Network plots Window
 
 recv_plot = net.network_plot(url="udp://localhost:31415", dtype=float, nsamples=100, \
@@ -125,12 +149,13 @@ plots = {
     # recv_plot: "plt_ampl"
 }
 
-# with window(label="Time domain plots", width=800, height=350, pos=(25,450)):
-#     with recv_plot:
-#         add_plot_axis(mvXAxis, label="Time")
-#         add_plot_axis(mvYAxis, label="Amplitude", tag="axis")
+with window(label="Time domain plots", width=800, height=350, pos=(0,425),
+    no_title_bar = True, no_move=True, no_collapse= True):
+    with recv_plot:
+        add_plot_axis(mvXAxis, label="Time")
+        add_plot_axis(mvYAxis, label="Amplitude", tag="axis")
 
-#         add_line_series(recv_plot.xdata, recv_plot.ydata, parent="axis", tag="plt_ampl")
+        add_line_series(recv_plot.xdata, recv_plot.ydata, parent="axis", tag="plt_ampl")
 
 #================================================
 # Byte Error Rate Window
@@ -143,9 +168,10 @@ with theme(tag= "ber_window"):
             add_theme_style(mvStyleVar_WindowRounding, 5)
             add_theme_style(mvStyleVar_WindowBorderSize, 1)#Rad ein und aus Schalten 
 
-with window(label="Byte Error Rate ", width=300, height=150, pos=(850,25),
-    tag="__ber_id",no_title_bar = True, no_move=True, no_collapse= True) as ber_window : 
-    add_text("The Byte Error Rate is:")    
+with window(label="Byte Error Rate ", width=300, height=150, pos=(1200,875)
+    ,no_title_bar = True, no_move=True, no_collapse= True) as ber_window : 
+
+    add_text("The Byte Error Rate is:",pos=(35,10))    
 
     with theme(tag= "button_ber"):
         with theme_component(mvButton):
@@ -153,50 +179,137 @@ with window(label="Byte Error Rate ", width=300, height=150, pos=(850,25),
             add_theme_color(mvThemeCol_Text,(0,0,0))#Schwarz
             add_theme_style(mvStyleVar_FrameRounding, 5)
 
-    add_button(label="BER", height=50, width=150)
+    add_button(label="BER", height=60, width=150,pos=(75,60))
     bind_item_theme(last_item(),"button_ber")
 
 bind_item_theme(ber_window,"ber_window")
+bind_item_font(ber_window,test)
 
-
+#================================================
+# Picture Window
+with window(label="Picture", width=400, height=300, pos=(0,825),
+    no_title_bar = True, no_move=True, no_collapse= True) as picture_window : 
+    #with child_window(width=400, height=400):
+    add_and_load_image("logo.png")
+    add_text("Picture 1")
+    #add_and_load_image("lena512color.png") #TO DO Problem lösen 
+
+with window(label="Picture_2", width=400, height=300, pos=(400,825),
+    no_title_bar = True, no_move=True, no_collapse= True) as picture_window : 
+    #with child_window(width=400, height=400):
+    add_and_load_image("logo.png")
+    add_text("Picture 2")
+    #add_and_load_image("l
 
 #================================================
 # Channel Window
-#TO DO:
-# recv_plot = net.network_plot(url="udp://localhost:31415", nsamples=100, label="Test", height=300, width=800)
+# TO DO: Change Data to Real Data from the GUI 
 
-# plots = {
-#     recv_plot: "plt_ampl"
-# }
+# Some Data to plot 
+sindatax = []
+sindatay = []
+for i in range(-2, 100):
+    sindatax.append(i / 100)
+    sindatay.append(0.5 + 0.5 * np.sin(50 * i / 100))
+sindatay2 = []
+for i in range(-2, 100):
+    sindatay2.append(2 + 0.5 * np.sin(50 * i / 100))
 
-# with window(label="Channel ", width=600, height=600, pos=(850,25)):
-#     with child_window(autosize_x=True, height=100):
-#         add_button(label="Toggle Fullscreen", callback= toggle_viewport_fullscreen)
-#     with recv_plot:
-#         add_plot_axis(mvXAxis, label="In-phase")
-#         add_plot_axis(mvYAxis, label="Quadrature", tag="plt_ampl")
+with window(label="Channel ", width=560, height=400, pos=(800,25),
+    no_title_bar = True, no_move=True, no_collapse= True):
 
-#         add_scatter_series(recv_plot.x_data, recv_plot.y_data, parent="plt_ampl")
-# #================================================
-# # Synchronized Window
-# #TO DO:
-# with window(label="Synchronized ", width=600, height=600, pos=(850,25)):
-#     with child_window(autosize_x=True, height=100):
-#         add_button(label="Toggle Fullscreen", callback= toggle_viewport_fullscreen)    
+    # create a theme for the plot
+    with theme(tag="plot_theme"):
+        with theme_component(mvScatterSeries):
+            add_theme_color(mvPlotCol_Line, (135, 206, 255), category=mvThemeCat_Plots)
+            add_theme_style(mvPlotStyleVar_Marker,mvPlotMarker_Asterisk, category=mvThemeCat_Plots) #TO DO: change to mvPlotMarker_Circle
+            add_theme_style(mvPlotStyleVar_MarkerSize, 3, category=mvThemeCat_Plots)
+
+    # Plot
+    with plot(tag="plot", label="Channel", height=-1, width=-1):
+
+        # optionally create legend
+        add_plot_legend()
+
+        # REQUIRED: create x and y axes
+        add_plot_axis(mvXAxis, label="In-phase",tag="xaxis_channel")
+        set_axis_limits("xaxis_channel", -2, 2)
+
+        add_plot_axis(mvYAxis, label= "Quadrature", tag="yaxis_channel")
+        set_axis_limits("yaxis_channel", -2, 2)
 
+        # series belong to a y axis
+        add_scatter_series(sindatax, sindatay2, label="Some Data", parent="yaxis_channel", tag="series_data2")
+        #add_button(label="Delete Series 1", parent=last_item(), callback=lambda: delete_item("series_data2"))
+
+        # apply theme to series
+        bind_item_theme("series_data2", "plot_theme")
+  
+
+
+#================================================
+# Synchronized Window
+with window(label="Synchronized", width=560, height=400, pos=(1360,25),
+    no_title_bar = True, no_move=True, no_collapse= True):
+    add_text("TO DO Synchronized")
+
+    # with child_window(autosize_x=True, height=100):
+    #     add_button(label="Toggle Fullscreen", callback= toggle_viewport_fullscreen)
 # #================================================
 # # Equalized Window
-# #TO DO:
-# with window(label="Equalized ", width=600, height=600, pos=(850,25)):
-#     with child_window(autosize_x=True, height=100):
-#         add_button(label="Toggle Fullscreen", callback= toggle_viewport_fullscreen)   
+with window(label="Equalized", width=560, height=400, pos=(800,425),
+    no_title_bar = True, no_move=True, no_collapse= True):
+    add_text("TO DO Equalized")
 
-# #================================================
-# # Locked Window
-# #TO DO:
-# with window(label="Locked ", width=600, height=600, pos=(850,25)):
-#     with child_window(autosize_x=True, height=100):
-#         add_button(label="Toggle Fullscreen", callback= toggle_viewport_fullscreen)  
+#================================================
+# Locked Window
+# TO DO: Change Data to Real Data from the GUI 
+
+# Some Data to plot 
+sindatax = []
+sindatay = []
+for i in range(-2, 100):
+    sindatax.append(i / 100)
+    sindatay.append(0.5 + 0.5 * np.sin(50 * i / 100))
+sindatay2 = []
+for i in range(-2, 100):
+    sindatay2.append(2 + 0.5 * np.sin(50 * i / 100))
+
+with window(label="Locked ", width=560, height=400, pos=(1360,425),
+    no_title_bar = True, no_move=True, no_collapse= True):
+
+    # create a theme for the plot
+    with theme(tag="plot_theme_locked"):
+        with theme_component(mvScatterSeries):
+            add_theme_color(mvPlotCol_Line, (135, 206, 255), category=mvThemeCat_Plots)
+            add_theme_style(mvPlotStyleVar_Marker,mvPlotMarker_Asterisk, category=mvThemeCat_Plots) #TO DO: change to mvPlotMarker_Circle
+            add_theme_style(mvPlotStyleVar_MarkerSize, 3, category=mvThemeCat_Plots)
+
+    # Plot
+    with plot(tag="plot_locked", label="Locked", height=-1, width=-1):
+
+        # optionally create legend
+        add_plot_legend()
+
+        # REQUIRED: create x and y axes
+        add_plot_axis(mvXAxis, label="In-phase",tag="xaxis_locked")
+        set_axis_limits("xaxis_locked", -2, 2)
+
+        add_plot_axis(mvYAxis, label= "Quadrature", tag="yaxis_locked")
+        set_axis_limits("yaxis_locked", -2, 2)
+
+        # series belong to a y axis
+        add_scatter_series(sindatax, sindatay2, label="Some Data", parent="yaxis_locked", tag="series_data2_locked")
+        #add_button(label="Delete Series 1", parent=last_item(), callback=lambda: delete_item("series_data2"))
+
+        # apply theme to series
+        bind_item_theme("series_data2_locked", "plot_theme_locked")
+
+#TO DO: find a better way to do that 
+    with group(horizontal=True):
+        add_button(label="unlock x limits", callback=lambda: set_axis_limits_auto("xaxis_locked"))
+        add_button(label="unlock y limits", callback=lambda: set_axis_limits_auto("yaxis_locked"))
+        
 
 
 
diff --git a/src/gui/lena512color.png b/src/gui/lena512color.png
new file mode 100644
index 0000000..ffe5c83
--- /dev/null
+++ b/src/gui/lena512color.png
diff --git a/src/gui/lena512color.tiff b/src/gui/lena512color.tiff
new file mode 100644
index 0000000..ffe5c83
--- /dev/null
+++ b/src/gui/lena512color.tiff
diff --git a/src/gui/logo.png b/src/gui/logo.png
new file mode 100644
index 0000000..f972f98
--- /dev/null
+++ b/src/gui/logo.png
diff --git a/src/gui/test.py b/src/gui/test.py
index 7ba928b..f3accf3 100644
--- a/src/gui/test.py
+++ b/src/gui/test.py
@@ -1,35 +1,40 @@
 import dearpygui.dearpygui as dpg
 
-dpg.create_context()
-
-with dpg.window(label="Tutorial", pos=(20, 50), width=275, height=225) as win1:
-    t1 = dpg.add_input_text(default_value="some text")
-    t2 = dpg.add_input_text(default_value="some text")
-    with dpg.child_window(height=100):
-        t3 = dpg.add_input_text(default_value="some text")
-        dpg.add_input_int()
-    dpg.add_input_text(default_value="some text")
-
-with dpg.window(label="Tutorial", pos=(320, 50), width=275, height=225) as win2:
-    dpg.add_input_text(default_value="some text")
-    dpg.add_input_int()
-
-with dpg.theme() as container_theme:
-
-    with dpg.theme_component(dpg.mvAll):
-        dpg.add_theme_color(dpg.mvThemeCol_FrameBg, (150, 100, 100), category=dpg.mvThemeCat_Core)
-        dpg.add_theme_style(dpg.mvStyleVar_FrameRounding, 5, category=dpg.mvThemeCat_Core)
-
-    with dpg.theme_component(dpg.mvInputInt):
-        dpg.add_theme_color(dpg.mvThemeCol_FrameBg, (100, 150, 100), category=dpg.mvThemeCat_Core)
-        dpg.add_theme_style(dpg.mvStyleVar_FrameRounding, 5, category=dpg.mvThemeCat_Core)
-
-dpg.bind_item_theme(win1, container_theme)
-
-dpg.show_style_editor()
-
-dpg.create_viewport(title='Custom Title', width=800, height=600)
-dpg.setup_dearpygui()
-dpg.show_viewport()
-dpg.start_dearpygui()
-dpg.destroy_context()
+# Callbacks
+def cb_nextpic(sender, app_data, user_data):
+    dpg.set_value(texture_id, user_data['textures'][user_data['next_key']])
+
+    # Set key for next Image. Rotate back to 1 when last image has been shown
+    if user_data['next_key'] < 11:
+        user_data['next_key'] = user_data['next_key']+1
+    else:
+        user_data['next_key'] = 1
+
+
+# Load in the Logo and add it to the texture_registry
+# TODO: Find out, what that thing is actually doing. It is not really clear atm.
+width, height, channels, data = dpg.load_image("logo.png")
+with dpg.texture_registry():
+    texture_id = dpg.add_dynamic_texture(width, height, data)
+
+# Next, load in the rest of the pictures
+# Important: We are only interested in the data part here!
+# Important: All the images must have the same size, because they are
+#            displayed on the image that will be created from the
+#            texture_id of the registry
+img_dict = {}
+for a in range(11):
+    width, height, channels, data = dpg.load_image(f"resources\img{a+1}.png")
+    img_dict[a+1] = data
+
+img_handler_dict = {
+    'next_key': 1,
+    'textures': img_dict
+}
+
+with dpg.window(label="Hangman") as main_window:
+    dpg.add_image(texture_id)
+    dpg.add_button(label="Next IMG", callback=cb_nextpic, user_data=img_handler_dict)
+    
+dpg.set_primary_window(main_window, True)
+dpg.start_dearpygui()
\ No newline at end of file
diff --git a/src/gui/test2.py b/src/gui/test2.py
new file mode 100644
index 0000000..f339af8
--- /dev/null
+++ b/src/gui/test2.py
@@ -0,0 +1,22 @@
+import dearpygui.dearpygui as dpg
+
+dpg.create_context()
+
+with dpg.window(label="about", width=400, height=400):
+    dpg.add_button(label="Press me")
+    dpg.draw_line((0, 10), (100, 100), color=(255, 0, 0, 255), thickness=1)
+
+# print children
+print(dpg.get_item_children(dpg.last_root()))
+
+# print children in slot 1
+print(dpg.get_item_children(dpg.last_root(), 1))
+
+# check draw_line's slot
+print(dpg.get_item_slot(dpg.last_item()))
+
+dpg.create_viewport(title='Custom Title', width=800, height=600)
+dpg.setup_dearpygui()
+dpg.show_viewport()
+dpg.start_dearpygui()
+dpg.destroy_context()