The following code is a PYQT5 app that display a HTML Qombobox table. The HTMLBridge(QObject) class printed the selected values from the qombobox table into lists. When I added the HTMLBridge(QObject) to Window(QtWidgets.QMainWindow) class, the code does not update and print the lists of selected values from combobox table. How to overcome this issue?
The code is:
import sys
from PyQt5.QtGui import *
from PyQt5.QtCore import *
from PyQt5.QtWidgets import *
from PyQt5.QtWebEngineWidgets import *
from PyQt5.QtWebChannel import QWebChannel
from PyQt5.QtWebEngineWidgets import QWebEngineView
from PyQt5.QtWidgets import QTabWidget, QScrollArea, QComboBox
from PyQt5 import QtCore, QtGui, QtWidgets, QtWebEngineWidgets
class HTMLBridge(QObject):
def __init__(self):
super().__init__()
self.selected_values = [[0, 0, 0], [0, 0, 0], [0, 0, 0], [0, 0, 0]]
@pyqtSlot(str, int, int)
def setSelectedValue(self, value, row, col):
self.selected_values[row][col] = value
self.printSelectedValues()
def printSelectedValues(self):
print("Selected values:")
for row in self.selected_values:
print(row)
class Window(QtWidgets.QMainWindow):
def __init__(self):
super(Window, self).__init__()
self.initWindow()
def initWindow(self):
self.setFixedSize(1800, 1200)
self.buttonUI()
def buttonUI(self):
self.button3 = QPushButton('button', self)
self.button3.move(50, 150)
self.button3.setFixedSize(200, 30)
self.button3.clicked.connect(self.open_new_window1)
self.W = QtWebEngineWidgets.QWebEngineView(self)
self.W.setGeometry(QtCore.QRect(275, 250, 0, 0))
self.W.setFixedSize(0,0)
def open_new_window1(self):
self.SW1 = HTMLBridge()
self.W.setGeometry(QtCore.QRect(275, 0, 0, 0))
self.W.setFixedSize(1300,500)
bridge = HTMLBridge()
channel = QWebChannel()
channel.registerObject("bridge", bridge)
self.W.page().setWebChannel(channel)
self.W.load(QUrl.fromLocalFile("/index.html"))
self.W.show()
app = QApplication(sys.argv)
screen = Window()
screen.show()
app.exec_()
The index.html is:
<!DOCTYPE html>
<html>
<body>
<style>
body {
font-family: Arial, sans-serif;
background-color: #0d026b;
}
h1 {
color: #333;
}
table {
border-collapse: collapse;
width: 50%;
background-color: #fff;
margin-bottom: 20px;
}
th, td {
padding: 10px;
text-align: left;
border-bottom: 2px solid #ec6efa;
}
th {
background-color: #f2f2f2;
}
</style>
<h2 style="color:#fffb00">Title</h2>
<table border="1">
<tr>
<th>Site</th> <th>C1</th> <th>C2</th> <th>C3</th>
</tr>
<tr> <th>Row-1</th>
<td>
<select id="myComboBox00" onchange="sendSelectedValue(0, 0)">
<option value="0">0</option>
<option value="0.33">0.33</option>
<option value="0.66">0.66</option>
<option value="1">1</option>
</select>
</td>
<td>
<select id="myComboBox01" onchange="sendSelectedValue(0, 1)">
<option value="0">0</option>
<option value="0.33">0.33</option>
<option value="0.66">0.66</option>
<option value="1">1</option>
</select>
</td>
<td>
<select id="myComboBox02" onchange="sendSelectedValue(0, 2)">
<option value="0">0</option>
<option value="0.33">0.33</option>
<option value="0.66">0.66</option>
<option value="1">1</option>
</select>
</td>
</tr>
<tr> <th>Row-2</th>
<td>
<select id="myComboBox10" onchange="sendSelectedValue(1, 0)">
<option value="0">0</option>
<option value="0.33">0.33</option>
<option value="0.66">0.66</option>
<option value="1">1</option>
</select>
</td>
<td>
<select id="myComboBox11" onchange="sendSelectedValue(1, 1)">
<option value="0">0</option>
<option value="0.33">0.33</option>
<option value="0.66">0.66</option>
<option value="1">1</option>
</select>
</td>
<td>
<select id="myComboBox12" onchange="sendSelectedValue(1, 2)">
<option value="0">0</option>
<option value="0.33">0.33</option>
<option value="0.66">0.66</option>
<option value="1">1</option>
</select>
</td>
</tr>
<tr> <th>Row-3</th>
<td>
<select id="myComboBox20" onchange="sendSelectedValue(2, 0)">
<option value="0">0</option>
<option value="0.33">0.33</option>
<option value="0.66">0.66</option>
<option value="1">1</option>
</select>
</td>
<td>
<select id="myComboBox21" onchange="sendSelectedValue(2, 1)">
<option value="0">0</option>
<option value="0.33">0.33</option>
<option value="0.66">0.66</option>
<option value="1">1</option>
</select>
</td>
<td>
<select id="myComboBox22" onchange="sendSelectedValue(2, 2)">
<option value="0">0</option>
<option value="0.33">0.33</option>
<option value="0.66">0.66</option>
<option value="1">1</option>
</select>
</td>
</tr>
<tr> <th>Row-4</th>
<td>
<select id="myComboBox30" onchange="sendSelectedValue(3, 0)">
<option value="0">0</option>
<option value="0.33">0.33</option>
<option value="0.66">0.66</option>
<option value="1">1</option>
</select>
</td>
<td>
<select id="myComboBox31" onchange="sendSelectedValue(3, 1)">
<option value="0">0</option>
<option value="0.33">0.33</option>
<option value="0.66">0.66</option>
<option value="1">1</option>
</select>
</td>
<td>
<select id="myComboBox32" onchange="sendSelectedValue(3, 2)">
<option value="0">0</option>
<option value="0.33">0.33</option>
<option value="0.66">0.66</option>
<option value="1">1</option>
</select>
</td>
</tr>
</table>
<script type="text/javascript" src="qrc:///qtwebchannel/qwebchannel.js"></script>
<script type="text/javascript">
var bridge;
new QWebChannel(qt.webChannelTransport, function(channel) {
bridge = channel.objects.bridge;
});
function sendSelectedValue(row, col) {
var comboBox = document.getElementById("myComboBox" + row + col);
var selectedValue = comboBox.options[comboBox.selectedIndex].value;
bridge.setSelectedValue(selectedValue, row, col);
}
</script>
</body>
</html>
It solved by using "self.bridge = None" and "self.channel = None" in Window() class.