Форум программистов, компьютерный форум, киберфорум
Python: GUI, графика
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.86/7: Рейтинг темы: голосов - 7, средняя оценка - 4.86
0 / 0 / 0
Регистрация: 10.04.2015
Сообщений: 16
PyQt5

Возврат значения графа pyvis через event

24.06.2022, 00:12. Показов 1583. Ответов 9

Студворк — интернет-сервис помощи студентам
Всем здравствуйте. Задача с одной стороны вроде и простая, а с другой совершенно мне не понятная.
Сообразить решение для визуального и интерактивного отображения графов. Мною были выбраны:
- pyqt5 для оконного приложения
-- В нём есть event-ы)))
-- Есть QtWebEngineWidgets - который позволяет выводить всё в html
- pyvis для визуального представления и интерактивного взаимодействия


Требуется вернуть значение записанное в узле pyvis визуализированного интерактивного графа. Вот ссылка на документацию и заодно туториал, чтобы руками пощупать (https://pyvis.readthedocs.io/e... orial.html)

Конкретнее - я пишу для лабораторной по анализу графов оконное приложение с применением pyqt5.
Для визуализации графа есть крутая интерактивная библиотека pyvis. Библиотека основана на visJS - javascript-овая библиотека (javascript - не знаю)(ссылку оставляю - https://visjs.github.io/vis-network/examples/). Проблема вся в том, что как только я создал граф, то я могу его двигать, выбирать, наводиться и получать некую запись в окне QWebEngineView-а, но вот вернуть ответ для события - не понимаю как.
Вижу несколько решений:
- отказаться от библиотеки pyvis - но тогда на что заменить? Что будет так-же быстро отрабатывать интерактивность и визуализацию?
- попробовать понять по документации, что вообще возможно вернуть и понять как (2 недели смотрю уже, но вижу сами знаете что).
- попробовать понять, что и как можно исправить visJS, чтобы получать некий ответ, но не могу пока разобраться с js
- любое другое решение, которое я не вижу

Помогите решением, идеей, расчётом, советом или примером.
Как я это вижу, при нажатии на вершину графа визуализированного через pyvis на QWebEngineView выводится в консоль её значение.
0
cpp_developer
Эксперт
20123 / 5690 / 1417
Регистрация: 09.04.2010
Сообщений: 22,546
Блог
24.06.2022, 00:12
Ответы с готовыми решениями:

Возврат значения через параметр функции
Пишу функцию,которая должна создавать динамическую матрицу,а затем возвращать ее через параметр. Правильно ли я понимаю,что для этого надо...

Возврат значения через return в аяксе
в функции асинхронного запроса как вернуть значение через return? чтобы в другом коде воспользоваться им?function getXmlHttp(){ var...

Возврат значения метода через указатель
Здраствуйте, помогите зделать что бы возврат результатов с метода решения уравнения возвращался через указатель. #include...

9
171 / 111 / 65
Регистрация: 26.06.2020
Сообщений: 331
24.06.2022, 01:12
Код бы какой-нибудь, рабочий, для примера.
0
0 / 0 / 0
Регистрация: 10.04.2015
Сообщений: 16
24.06.2022, 11:01  [ТС]
Пример кода, а пожалуйста. Сразу скажу, что это просто базовый пример, его можно немного модифицировать, но суть таже

Python
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
from PyQt5.QtWebEngineWidgets import QWebEngineView
from PyQt5.QtWidgets import QApplication
from PyQt5.QtCore import QUrl
from pyvis.network import Network
import networkx as nx
import sys
import os
 
nx_graph = nx.cycle_graph(10)
nx_graph.nodes[1]['title'] = 'Number 1'
nx_graph.nodes[1]['group'] = 1
nx_graph.nodes[3]['title'] = 'I belong to a different group!'
nx_graph.nodes[3]['group'] = 10
nx_graph.add_node(20, size=20, title='couple', group=2)
nx_graph.add_node(21, size=15, title='couple', group=2)
nx_graph.add_edge(20, 21, weight=5)
nx_graph.add_node(25, size=25, label='lonely', title='lonely node', group=3)
nt = Network('500px', '700px')
nt.from_nx(nx_graph)
nt.save_graph('nx.html')
 
app = QApplication(sys.argv)
browser = QWebEngineView()
file_path = os.path.abspath(os.path.join(os.path.dirname(__file__), "nx.html"))
local_url = QUrl.fromLocalFile(file_path)
browser.load(local_url)
browser.show()
 
app.exec_()
0
0 / 0 / 0
Регистрация: 10.04.2015
Сообщений: 16
27.06.2022, 13:33  [ТС]
Указал пример выше.
0
963 / 718 / 276
Регистрация: 10.12.2016
Сообщений: 1,764
30.06.2022, 09:57
Fach103, ИМХО вы ежа с ужом скрещиваете. если JS то зачем PyQt? и наоборот
https://github.com/baoboa/pyqt... icnodes.py
https://habr.com/ru/post/548928/
посмотрите эти примеры

Добавлено через 13 минут
кстати в networkx есть обработка кликов
https://russianblogs.com/article/97381161109/
https://stackovergo.com/ru/q/3... y-networkx
0
0 / 0 / 0
Регистрация: 10.04.2015
Сообщений: 16
30.06.2022, 22:45  [ТС]
Так, я понимаю, что pyvis и visJS - это разные вещи. Вопрос именно в вернуть значение при нажатии на вершину. Посмотрел быстро статьи (кроме хабра (её уже читал)), попробую сделать что-то похожее.
0
963 / 718 / 276
Регистрация: 10.12.2016
Сообщений: 1,764
30.06.2022, 23:54
тут засада в том что события мыши обрабатываются JS
можно через QWebChannel, но опять же надо как то определять вершины графа
https://stackoverflow.com/ques... javascript

Добавлено через 7 минут
https://github.com/paulbrodersen/netgraph
интересная вещь
0
0 / 0 / 0
Регистрация: 10.04.2015
Сообщений: 16
01.07.2022, 11:55  [ТС]
На самом деле вариант, который хочется повторить - https://help.obsidian.md/Obsidian/Index окно интерактивного графа
Вот хочу попробовать сделать это на pyvis, используя Qt.
0
963 / 718 / 276
Регистрация: 10.12.2016
Сообщений: 1,764
01.07.2022, 17:35
Qt в данном раскладе только отображение
по вашему примеру вы граф сохраняете в HTML
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vis-network@latest/styles/vis-network.css" type="text/css" />
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vis-network@latest/dist/vis-network.min.js"> </script>
<center>
<h1></h1>
</center>
 
<!-- <link rel="stylesheet" href="../node_modules/vis/dist/vis.min.css" type="text/css" />
<script type="text/javascript" src="../node_modules/vis/dist/vis.js"> </script>-->
 
<style type="text/css">
 
        #mynetwork {
            width: 600px;
            height: 400px;
            background-color: #ffffff;
            border: 1px solid lightgray;
            position: relative;
            float: left;
        }
 
        
 
        
 
        
</style>
 
</head>
 
<body>
<div id = "mynetwork"></div>
 
 
<script type="text/javascript">
 
    // initialize global variables.
    var edges;
    var nodes;
    var network; 
    var container;
    var options, data;
 
    
    // This method is responsible for drawing the graph, returns the drawn network
    function drawGraph() {
        var container = document.getElementById('mynetwork');
        
        
 
        // parsing and collecting nodes and edges from the python
        nodes = new vis.DataSet([{"id": 0, "label": 0, "shape": "dot", "size": 10}, {"group": 1, "id": 1, "label": 1, "shape": "dot", "size": 10, "title": "Number 1"}, {"id": 9, "label": 9, "shape": "dot", "size": 10}, {"id": 2, "label": 2, "shape": "dot", "size": 10}, {"group": 10, "id": 3, "label": 3, "shape": "dot", "size": 10, "title": "I belong to a different group!"}, {"id": 4, "label": 4, "shape": "dot", "size": 10}, {"id": 5, "label": 5, "shape": "dot", "size": 10}, {"id": 6, "label": 6, "shape": "dot", "size": 10}, {"id": 7, "label": 7, "shape": "dot", "size": 10}, {"id": 8, "label": 8, "shape": "dot", "size": 10}, {"group": 2, "id": 20, "label": 20, "shape": "dot", "size": 20, "title": "couple"}, {"group": 2, "id": 21, "label": 21, "shape": "dot", "size": 15, "title": "couple"}, {"group": 3, "id": 25, "label": "lonely", "shape": "dot", "size": 25, "title": "lonely node"}]);
        edges = new vis.DataSet([{"from": 0, "label": 1, "to": 1, "weight": 1}, {"from": 0, "label": 1, "to": 9, "weight": 1}, {"from": 1, "label": 1, "to": 2, "weight": 1}, {"from": 2, "label": 1, "to": 3, "weight": 1}, {"from": 3, "label": 1, "to": 4, "weight": 1}, {"from": 4, "label": 1, "to": 5, "weight": 1}, {"from": 5, "label": 1, "to": 6, "weight": 1}, {"from": 6, "label": 1, "to": 7, "weight": 1}, {"from": 7, "label": 1, "to": 8, "weight": 1}, {"from": 8, "label": 1, "to": 9, "weight": 1}, {"from": 20, "label": 5, "to": 21, "weight": 5}]);
 
        // adding nodes and edges to the graph
        data = {nodes: nodes, edges: edges};
 
        var options = {
    "configure": {
        "enabled": false
    },
    "edges": {
        "color": {
            "inherit": true
        },
        "smooth": {
            "enabled": true,
            "type": "dynamic"
        }
    },
    "interaction": {
        "dragNodes": true,
        "hideEdgesOnDrag": false,
        "hideNodesOnDrag": false
    },
    "physics": {
        "enabled": true,
        "stabilization": {
            "enabled": true,
            "fit": true,
            "iterations": 1000,
            "onlyDynamicEdges": false,
            "updateInterval": 50
        }
    }
};
        
        
 
        
 
        network = new vis.Network(container, data, options);
     
        
 
 
        
 
        return network;
 
    }
 
    drawGraph();
 
</script>
</body>
</html>
<script>
    //скрипт для проверки клика
document.onclick = function(e) {
    console.log(e.target);
};
</script>
преобразуется в HTML5 Canvas и при клике на элемент никаких данных элемента в консоли JS не выдает, запустите в любом браузере
так что путь тупиковый ИМХО

Добавлено через 5 минут
вот для сравнения
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>        
    </head>
    <body> 
    <h1 id="header1">HEADER</h1>     
<div id="d1">DIV</div>
</body>
</html>
<script>
    document.onclick = function(e) {
        console.log(e.target)
    }
</script>
0
963 / 718 / 276
Регистрация: 10.12.2016
Сообщений: 1,764
04.07.2022, 12:52
Цитата Сообщение от Fach103 Посмотреть сообщение
На самом деле вариант, который хочется повторить - https://help.obsidian.md/Obsidian/Index окно интерактивного графа
Вот хочу попробовать сделать это на pyvis, используя Qt.
такой функционал можно в PyQt сделать
Python
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
from PyQt5.QtWidgets import (QWidget,QGridLayout,QApplication,
    QMenu,QRadioButton,QFormLayout,QLineEdit,QPushButton,
    QGraphicsScene,QGraphicsView,QGraphicsItem,
    QGraphicsEllipseItem,QGraphicsLineItem,QGraphicsTextItem
)
from PyQt5.QtCore import Qt, QObject, pyqtSignal, pyqtSlot, QPointF, QRectF, QLineF
from PyQt5.QtGui import QPainter, QColor, QPen, QBrush, QFont
 
class Connection(QObject):
    pos_changed = pyqtSignal(dict)
    on_hover = pyqtSignal(tuple)
 
class Node(QGraphicsEllipseItem):
    def __init__(self,parent=None):
        super().__init__()
        self.setFlags(
            QGraphicsItem.ItemIsMovable 
            | QGraphicsItem.ItemIsSelectable 
            | QGraphicsItem.ItemSendsGeometryChanges
        )
        self.setAcceptHoverEvents(True)
        self._brush = None
        self._pos = self.pos()
        self._id = None
        self.setRect(QRectF(0,0,32,32))
        self.setBrush(Qt.green)
 
        self.text = QGraphicsTextItem()
        self.text.setFont(QFont('times',16))
        self.text.setPos(-20,-20)
        self.text.setParentItem(self)
        
        self.conn = Connection()
        
    def hoverEnterEvent(self,e):
        self._brush = self.brush()
        self.setBrush(Qt.cyan)
        self.conn.on_hover.emit((True, self._id))
 
    def hoverLeaveEvent(self,e):
        self.setBrush(self._brush)
        self._brush = None
        self.conn.on_hover.emit((False,self._id))
        
    def itemChange(self, change, value):
        if change == self.ItemPositionChange and self.scene():
            self.conn.pos_changed.emit({"id":self._id, "pos":value})
        return super(Node, self).itemChange(change, value)
 
class Edge(QGraphicsLineItem):
    def __init__(self,parent=None):
        super().__init__()
        self.setFlag(QGraphicsItem.ItemIsSelectable) 
        self.setAcceptHoverEvents(True)
        self._from = None
        self._to = None
        self.setPen(Qt.blue)
        self.text = QGraphicsTextItem()
        self.text.setFont(QFont('times',16))
        self.text.setVisible(False)
        self.text.setParentItem(self)
        
    def hoverEnterEvent(self,e):
        self.text.setPos(e.pos() - QPointF(32,32))
        self.text.setVisible(True)
 
    def hoverLeaveEvent(self,e):
        self.text.setVisible(False)
 
class View(QGraphicsView):
    def __init__(self):
        super().__init__()
        self.node_count = 0
        self.src, self.dst = None,None
        self.mode = None
        self.scene = QGraphicsScene()
        self.setScene(self.scene)
        self.setRenderHint(QPainter.Antialiasing)
        
    def resizeEvent(self,e):
        w,h = self.viewport().width(),self.viewport().height()
        self.setSceneRect(0,0,w,h)
        
    def mousePressEvent(self,e):
        item = self.itemAt(e.pos())
        if not item:
            self.dst,self.src = None,None
            self.setCursor(Qt.ArrowCursor)
            if self.mode == 'node':
                item = Node()
                item._id = self.node_count
                item.text.setHtml('Node id:' + str(item._id))
                self.node_count += 1
                item.setPos(e.pos())
                item.conn.pos_changed.connect(self.nodeChanged)
                item.conn.on_hover.connect(self.node_on_hover) 
                self.scene.addItem(item)
        elif type(item) is Node and self.mode == 'edge':
            if not self.src: 
                self.src = item
                self.setCursor(Qt.CrossCursor)
            else: 
                self.dst = item
                edge = Edge()
                line = QLineF(self.src.pos() + QPointF(16,16), self.dst.pos() + QPointF(16,16))
                edge.setLine(line)
                edge._from = self.src._id
                edge._to = self.dst._id
                edge.text.setHtml('<i>Egde from:' + str(edge._from) + ' to:' + str(edge._to)+'</i>')
                edge.setPen(Qt.blue)
                edge.setZValue(-1)
                self.scene.addItem(edge)
                self.dst,self.src = None,None
                self.setCursor(Qt.ArrowCursor)
        elif self.mode == 'edit':
            item = self.itemAt(e.pos())
            #print('edit',item)
        super(View,self).mousePressEvent(e)
        
    @pyqtSlot(dict)
    def nodeChanged(self,d):
        for i in self.scene.items():
            if type(i) is Edge:
                line = i.line()
                p,_id = d['pos'],d['id']
                if i._from == _id: line.setP1(p + QPointF(16,16))
                if i._to == _id: line.setP2(p + QPointF(16,16))
                i.setLine(line)
    
    @pyqtSlot(tuple)
    def node_on_hover(self,args):
        if args[0]: pen = QPen(Qt.cyan, 2, Qt.DotLine)
        else: pen = QPen(Qt.blue)
        _id = args[1]
        for i in self.scene.items():
            if type(i) is Edge:                
                if i._from == _id or i._to == _id: 
                    i.setPen(pen)
    
class Widget(QWidget):
    def __init__(self):
        super().__init__()
        self.view = View()
        btnNode = QRadioButton('Add Node')
        btnEdge = QRadioButton('Add Edge')
        btnEdit = QRadioButton('Edit')
        grid = QGridLayout(self)
        grid.setContentsMargins(0,0,0,0)
        grid.addWidget(self.view,0,0,8,8)
        grid.addWidget(btnNode,0,8,2,1)
        grid.addWidget(btnEdge,1,8,2,1)
        grid.addWidget(btnEdit,2,8,2,1)
        btnNode.toggled.connect(self.add_node)
        btnEdge.toggled.connect(self.add_edge)
        btnEdit.toggled.connect(self.on_edit)
        
    @pyqtSlot(bool)
    def add_node(self,value):
        if value: self.view.mode = 'node'
            
    @pyqtSlot(bool)
    def add_edge(self,value):
        if value: self.view.mode = 'edge'
            
    @pyqtSlot(bool)
    def on_edit(self,value):
        if value: self.view.mode = 'edit'
        
        
if __name__ == '__main__':
    app = QApplication([])
    w = Widget()
    w.setFont(QFont('times',16))
    w.show()
    w.resize(900,600)
    app.exec_()
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
raxper
Эксперт
30234 / 6612 / 1498
Регистрация: 28.12.2010
Сообщений: 21,154
Блог
04.07.2022, 12:52
Помогаю со студенческими работами здесь

Возврат значения из Php файла при работе через ajax
Всем привет. Есть форма, данные которой через ajax (без JQuery) отправляются в php-файл. В нем выполняются проверки на сущестовование...

Событие Event.COPY Event.PASTE Event.CUT
Привет я не знаю как написать код в котором текстовое поле реагировало бы на события копирования/вставки/вырезки В справочнике написано,...

Pandas: Возврат значения при условии совпадения значения строки и столбца
Здравствуйте подскажите пожалуйста т.к. сам вот никак не могу найти хоть и задача вроде очень тривиальная: Допустим есть объект...

Повторный возврат рандомного значения ,без изменения значения
Добрый день. Пишу простую консольную игру Кости. Есть 4-е функции прорисовки костей (2-е на кости игрока и 2-е на кости ПК). Каждая...

Значения Event ID в Windows NT4.0
Возникает ряд сообщений в журнале событий, после чего сервак (файл-сервер) виснет. Эвенты такие: Event ID: 2006 Type: Error ...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
10
Ответ Создать тему
Новые блоги и статьи
SDL3 для Web (WebAssembly): сборка C/C++ проекта из консоли
8Observer8 30.01.2026
Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
Установка Emscripten SDK (emsdk) и CMake на Windows для сборки C и C++ приложений в WebAssembly (Wasm)
8Observer8 30.01.2026
Чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. Система контроля версиями Git. . .
Подключение Box2D v3 к SDL3 для Android: физика и отрисовка коллайдеров
8Observer8 29.01.2026
Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .
Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT
bedvit 28.01.2026
Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .
Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image)
8Observer8 28.01.2026
Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .
Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image
8Observer8 27.01.2026
Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .
Влияние грибов на сукцессию
anaschu 26.01.2026
Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android
8Observer8 26.01.2026
Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru