Implement components with CustomTkinter UI-library based on Tkinter

README.md

@@ -42,6 +42,28 @@ As CGRA-Flow requires GUI, a script is provided for setting up the display:
  # Don't forget to activate the python virtual environment once you are in the container:
  source /WORK_REPO/venv/bin/activate
 ```
+
+```shell
+# Windows Docker customtkinter style UI (Please setup GUI (X-11) first)
+# In WSL
+docker pull yuqisun/cgra-flow-win:latest
+docker run -it yuqisun/cgra-flow-win bash
+docker run -it --name cgra-flow-win yuqisun/cgra-flow-win bash
+
+# In container
+root@2cd33efd97b3 WORK_REPO# export DISPLAY=192.168.3.38:0.0 # change to your own ipv4 address with 0.0
+root@2cd33efd97b3 WORK_REPO# source venv/bin/activate
+(venv) root@2cd33efd97b3 WORK_REPO# cd /WORK_REPO/CGRA-Flow
+
+# Three themes are available: dark, light, and classic
+# Start with default theme (dark mode)
+(venv) root@2cd33efd97b3 build# ./launchUI.bash
+# Start with light theme
+(venv) root@2cd33efd97b3 build# ./launchUI.bash light
+# Start with classic theme
+(venv) root@2cd33efd97b3 build# ./launchUI.bash classic
+```
+
 Otherwise, if you don't need the GUI, development can be performed in the container with the environment well set up:
 ```sh
  docker pull cgra/cgra-flow:demo

launchUI.bash

@@ -0,0 +1,20 @@
+#!/bin/bash
+
+input_theme=$1
+echo "Theme: $input_theme"
+
+cd build
+if [ "$input_theme" == "classic" ]; then
+      echo "classic theme selected"
+      #start dark theme
+      python ../launchUI_classic.py
+elif [ "$input_theme" == "light" ]; then
+      echo "light theme selected"
+      #start light theme
+      python ../launchUI.py --theme light
+else
+      echo "No theme selected, will start default theme (dark mode)"
+      #start default theme (dark mode)
+      python ../launchUI.py
+fi
+