Brainwave Reading Tab (using QtCreator)

• Download and Install Qt

• Open QT Creator and click on create Project

• Select QT Quick Application – Empty from Applications (QT for Python)

• Enter the Name and select the path where you want to create the file

• I have named it as AvatarGUI3 (No spaces are allowed in the Name)

• Click on continue and select the version of Pyside (I have selected Pyside 6 as it the higher version)

• Click Continue and select the python version (Applicable only if you have more than 1 python)

• Click continue and you can see the list of files generated or added in the directory.

• Click Done and Now you can see the files in QT Creator

• Create a Qt Designer (.ui) from QT Creator

• Right click on AvatarGUI3 [add-GUI5-TransferData-files] and select Add New

• Select Qt Designer Form QT

• Select the template/form you want to use

• Enter the file name and select the path

• Add to Project which you to use.

• Loads a new designer

• I will add a tab for Brainwave Reading

• Select a TabWidget from Widget Box and then in Property Editor rename the currentTabText to BrainwaveReading

• I am using css to add the background color for Brainwave Reading tab

  QWidget{ background:"#4a5b7b" }

• After applying the css

• Adding css to Qtabwidget to make the left alignment

  QTabWidget::tab-bar { alignment: left; }

• Using Radio Button Widget to add Manual control and Autopilot

• Logic : The text color of RadioButton is black by default, I am adding css to change the text color to white.

  QRadioButton{ color:white; }

• After adding css to both the RadioButton

• Use QPushButton to enter the text Read my mind.. and add a image.

  QPushButton { background-color: rgb(36, 44, 77); /* Default background color / background-image: url(:/Images/brain.png); color: white; border: none; } QPushButton:hover { background-color: white; / Change background to white on hover */ color: black; }

• To add a image right click the widget -> select change stylesheets -> enter the widgetname. In Css select Add Resource background- image

• Click on Edit

• Select New Resource File (Create a folder)

• AvatarImg is the folder and a qrc is created

• Click on and enter the path (Mention the path)

• Click on to select the images of Avatar.

• After loading the files

• Select the brain.png file

  QPushButton { background-color: rgb(36, 44, 77); /* Default background color / background-image: url(:/Images/Avatar/brainwave-prediction-app3/images3/brain.png); color: white; border: none; } QPushButton:hover { background-color: white; / Change background to white on hover */ color: black; }

• In QT Creator we will not see resource Editor, you need to create a .qrc file and then load the images

• Add this file to Project. Right click on AvatarGUI3 [add-GUI5-TransferData-files] -> Add Existing Files -> AvatarImages.qrc

• I have used QLabel for the Text the Model says, Flight Log and Console Log.

• Used Css to make the text white.

  QLabel{ color:white; }

• Used Table Widget for Count and Labe, Double in the Table Widget will allows you to edit, I have added two columns and selected the background color of text as white.

• Go to property editor and off verrticalscrollbarpolicy and horizontalscrollbarpolicy

• I have used QPush Button for NotWhatIwasthinking, Execute and Keep Drone Alive.

• Applied CSS

  QPushButton { background-color: rgb(36, 44, 77); /* Default background color / color: white; border: none; } QPushButton:hover { background-color: white; / Change background to white on hover */ color:black; }

• Applying CSS for Not what I was thinking.

• For the White Space bar I have selected the QTextEdit and applied CSS

  QTextEdit{ background-color: white; }

• I have used QLabel for the Text Flight Log and Console Log.

• Used Css to make the text white.

  QLabel{ color:white; }

• After Applying CSS

• Used Text Edit for Flight Log space and Console Log space

• Text edit for flight log

• On the verticalscrollbarpolicy for flightlog space and console log space.

• Used Table Widget for Prediction Count, Server Prediction and Prediction Label, Double in the Table Widget will allows you to edit, I have added three columns and selected the background color of text as white.

• Go to property editor and on verticalscrollbarpolicy and off horizontalscrollbarpolicy

• Change the UI file to python file

• Python file added in the folder AvatarGUI3

• Added the Python file to AvatarGUI3 folder in QT Creator. Right click on AvatarGUI3 [add-GUI5-TransferData-files] and select Add New

• Open the file AvatarGUI3BrainwaveReading.py and execute in from the terminal.

• The Python file executed without errors

• I have added 4 functions

• Execute the command pyrcc5 AvatarImages.qrc -o AvatarImages_rc.py to change the .qrc to .py file

• Append the line import AvatarImages_rc in your ui generated py file.

• I have added the functions like read_mind, execute_prediction, connect_drone, not_thinking, use_brainflow and handle_brainwave_action.

• Created a new python file to call the Avatar GUI3 tabs like Brainwave Prediction, Manual Drone Control and Transfer Data.

• I have updated the path of manual_drone_control_module and transfer_file_module according to my saved path.

• Declared the path of ui file and calling the function

• We can see the .pyproject file

Note :

• I have not changed the AvatarGUI3BrainwaveReading.py which generated from .ui file
• I have created a new file BrainwaveReadingTab.py which is replica of AvatarGUI3BrainwaveReading.py, I have modifed that code.
• GUI3main.py file is main file to read the tabs.

Avatar GUI3.py Brainwave Reading Tab Implementation (without QtCreator)

• Install Qt to local system

• Go to terminal and type the command designer

• QT Designer opens

• Select the Templates/form you would like to use. I have selected Widget and clicked on create .

• A new window is created to design.

• We have different view available, you can slect and unselect them

• Go to Views -> select / unselect the views you need

• Available Views in the UI

• Widget Box

• Object Inspector

• Property editor

• Resource Browser

• Action Editor

• Signal/Slot Editor

• To Create the Brainwave Reading Tab you can select the available widgets available from the Widget Box.

• I have used various widgets like TabWidget, PushButton, Label, RadioButton, TextEdit from the Widget Box.

• When you save the file it will be saved with .ui extension.

• I have used the below widgets to from the widget box

• For Tabs Brainwave Reading, Transfer Data, Manual Drone Control and Holding Pattern – QTabWidget

• I have used css for the tab alignment

• Select a TabWidget from Widget Box and then in Property Editor rename the currentTabText to BrainwaveReading

• I am using css to add the background color for Brainwave Reading tab

  QWidget{ background:"#4a5b7b" }

• After applying the css

• Adding css to Qtabwidget to make the left alignment

  QTabWidget::tab-bar { alignment: left; }

• Using Radio Button Widget to add Manual control and Autopilot

• Logic : The text color of RadioButton is black by default, I am adding css to change the text color to white.

  QRadioButton{ color:white; }

• After adding css to both the RadioButton

• Use QPushButton to enter the text Read my mind.. and add a image.

  QPushButton { background-color: rgb(36, 44, 77); /* Default background color / background-image: url(:/Images/brain.png); color: white; border: none; } QPushButton:hover { background-color: white; / Change background to white on hover */ color: black; }

• To add a image right click the widget -> select change stylesheets -> enter the widgetname. In Css select Add Resource background- image

• Click on Edit

• Select New Resource File (Create a folder)

• AvatarImg is the folder and a qrc is created

• Click on and enter the path (Mention the path)

• Click on to select the images of Avatar.

• I have used QLabel for the Text the Model says, Flight Log and Console Log.

• Used Css to make the text white.

  QLabel{ color:white; }

• Used Table Widget for Count and Labe, Double in the Table Widget will allows you to edit, I have added two columns and selected the background color of text as white.

• Go to property editor and off verrticalscrollbarpolicy and horizontalscrollbarpolicy

• I have used QPush Button for NotWhatIwasthinking, Execute and Keep Drone Alive.

• Applied CSS

  QPushButton { background-color: rgb(36, 44, 77); /* Default background color */ color: white; border: none; }

  QPushButton:hover { background-color: white; /* Change background to white on hover */ color:black; }

• Applying CSS for Not what I was thinking.

• For the White Space bar I have selected the QTextEdit and applied CSS

  QTextEdit{ background-color: white; }

• I have used QLabel for the Text Flight Log and Console Log.

• Used Css to make the text white.

  QLabel{ color:white; }

• After Applying CSS

• Used Text Edit for Flight Log space and Console Log space

• Text edit for flight log

• On the verticalscrollbarpolicy for flightlog space and console log space.

• Used Table Widget for Prediction Count, Server Prediction and Prediction Label, Double in the Table Widget will allows you to edit, I have added three columns and selected the background color of text as white.

• Go to property editor and on verticalscrollbarpolicy and off horizontalscrollbarpolicy

• Change the UI file to python file

• After loading the files

• Select the brain.png file

  QPushButton { background-color: rgb(36, 44, 77); /* Default background color */ background-image: url(:/Images/Avatar/brainwave-prediction-app3/images3/brain.png); color: white; border: none; }

  QPushButton:hover { background-color: white; /* Change background to white on hover */ color: black; }

• I have used QLabel for the Text the Model says, Flight Log and Console Log.

• Used Css to make the text white.

  QLabel{ color:white; }

• Used Table Widget for Count and Labe, Double in the Table Widget will allows you to edit, I have added two columns and selected the background color of text as white.

• Go to property editor and off verrticalscrollbarpolicy and horizontalscrollbarpolicy

• I have used QPush Button for NotWhatIwasthinking, Execute and Keep Drone Alive.

• Applied CSS

  QPushButton { background-color: rgb(36, 44, 77); /* Default background color */ color: white; border: none; }

  QPushButton:hover { background-color: white; /* Change background to white on hover */ color:black; }

• Applying CSS for Not what I was thinking.

• For the White Space bar I have selected the QTextEdit and applied CSS

  QTextEdit{ background-color: white; }

• I have used QLabel for the Text Flight Log and Console Log.

• Used Css to make the text white.

  QLabel{ color:white; }

• After Applying CSS

• Used Text Edit for Flight Log space and Console Log space

• Text edit for flight log

• On the verticalscrollbarpolicy for flightlog space and console log space.

• Used Table Widget for Prediction Count, Server Prediction and Prediction Label, Double in the Table Widget will allows you to edit, I have added three columns and selected the background color of text as white.

• Go to property editor and on verticalscrollbarpolicy and off horizontalscrollbarpolicy

• Change the UI file to python file

• Python file added in the folder AvatarGUI3

• Open the file AvatarGUI3BrainwaveReading.py and execute in from the terminal.

• The Python file executed without errors

• I have added 4 functions

• Execute the command pyrcc5 AvatarImages.qrc -o AvatarImages_rc.py to change the .qrc to .py file

• Append the line import AvatarImages_rc in your ui generated py file.

• I have added the functions like read_mind, execute_prediction, connect_drone, not_thinking, use_brainflow and handle_brainwave_action.

• Created a new python file to call the Avatar GUI3 tabs like Brainwave Prediction, Manual Drone Control and Transfer Data.

• I have updated the path of manual_drone_control_module and transfer_file_module according to my saved path.

• Declared the path of ui file and calling the function