Skip to content

Commit

Permalink
Tooltips for node ids
Browse files Browse the repository at this point in the history
  • Loading branch information
mskvortsov committed Apr 17, 2024
1 parent 66633c8 commit c72dc43
Show file tree
Hide file tree
Showing 2 changed files with 66 additions and 1 deletion.
26 changes: 26 additions & 0 deletions meshmon.css
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,8 @@
--selected-header: #c2c260;
--selected-header-outbound: #5fcc44;
--selected-decoded: #f9f978;

--tooltip-bg-color: #bababa;
}

[data-theme="dark"] {
Expand All @@ -33,6 +35,8 @@
--selected-header: #5b6053;
--selected-header-outbound: #1c8100;
--selected-decoded: #56563c;

--tooltip-bg-color: #111111;
}

body {
Expand Down Expand Up @@ -147,6 +151,28 @@ body {
display: var(--logo-dark-mode);
}

/* Node id tooltips */

.node-tooltip-text {
font-family: var(--font-family-verbatim);
}

.node-tooltip .node-tooltip-text {
display: none;
background-color: var(--tooltip-bg-color);
color: var(--font-color);
text-align: left;
border-radius: 5px;
padding: 6px;

position: absolute;
z-index: 1;
}

.node-tooltip:hover .node-tooltip-text {
display: block;
}

/* Theme switcher */

.theme-switch-wrapper {
Expand Down
41 changes: 40 additions & 1 deletion meshmon.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ const defaultKey = CryptoJS.enc.Base64.parse('1PG7OiApB1nwvP+rz05pAQ==');
const defaultMaxPackets = 2048;

var packets = [];
var users = new Map();

var mqttUrlInput = null;
var mqttTopicInput = null;
Expand Down Expand Up @@ -299,6 +300,17 @@ const dummyHeader = {
portnum: '75',
};

function tooltipOnMouseOver(e) {
const spanIdText = e.target;
const spanTooltipText = spanIdText.nextElementSibling;
const id = spanIdText.innerHTML;

const user = users.get(id);
if (user !== undefined) {
spanTooltipText.innerHTML = `${user.shortName} ${user.longName}`;
}
}

function render(se) {
if (tbody.rows.length > defaultMaxPackets * 2) {
tbody.deleteRow(0);
Expand All @@ -313,7 +325,28 @@ function render(se) {
}

fields.forEach((field) => {
headerRow.insertCell().innerHTML = se.header[field];
const cell = headerRow.insertCell();
var value = se.header[field];
if (value == '!ffffffff') {
cell.innerHTML = value;
} else if (field == 'gatewayId' || field == 'from' || field == 'to') {
const spanIdText = document.createElement('span');
spanIdText.innerHTML = value;
spanIdText.onmouseover = tooltipOnMouseOver;

const spanTooltipText = document.createElement('span');
spanTooltipText.className = 'node-tooltip-text';
spanTooltipText.innerHTML = '<i>Unknown</i>';

const spanTooltip = document.createElement('span');
spanTooltip.className = 'node-tooltip';

spanTooltip.appendChild(spanIdText);
spanTooltip.appendChild(spanTooltipText);
cell.appendChild(spanTooltip);
} else {
cell.innerHTML = value;
}
});

var text = '';
Expand Down Expand Up @@ -394,6 +427,12 @@ function mqttOnMessage(topic, message) {
}
packets.push(se);

if (se.packet.decoded.portnum == meshtastic.PortNum.values.NODEINFO_APP &&
se.parsed.status == ParseResult.Ok) {
const user = se.parsed.value.value;
users.set(user.id, user);
}

const scrollDown = window.scrollY + window.innerHeight + 42 > document.body.scrollHeight;
if (filterExpr(se.header)) {
render(se);
Expand Down

0 comments on commit c72dc43

Please sign in to comment.