Ściągawka na stronie routera 5G

Zeusek

Może komuś to się przyda. Jak zrobić boczny panel np. na stronie z administracją naszego routera.

Potrzebne nam będzie rozszerzenie Violentmonkey , jest dostępne praktycznie na wszystkie popularne przeglądarki. Ja mam zrobione na komputerze stacjonarnym ... może na telefon też idzie to zrobić ale że mamy mały ekran to takie coś nie bardzo ma sens.

Dla uproszczenia podam cały kod do wklejenia w to rozszerzenie który mam.

// ==UserScript==
// @name        Router / pasma
// @namespace   Violentmonkey Scripts
// @match       http://192.168.8.1/*
// @grant       none
// @version     1.0
// @author      -
// @description 4.09.2025, 10:36:48
// ==/UserScript==


(function() {
    'use strict';

    // Szukamy już istniejącego panelu Stylusowego (np. body::before)
    // ponieważ nie możemy wprost wstawiać do ::before, musimy zrobić osobny overlay
    const linkPanel = document.createElement('div');
    linkPanel.id = 'band-link';
linkPanel.innerHTML = `
  <ul>
    <li><a href="http://192.168.8.1/#/cellinformation">Informacja o sieci</a></li>
    <li><a href="http://192.168.8.1/#/systemsettings">Programistyczne</a></li>
  </ul>

<hr>

  <table>
    <tr><td colspan="3">Dane dotyczą Orange:</td></tr>
    <tr><td>N28</td><td>700 MHz</td><td>10 MHz</td></tr>
    <tr><td>N1</td><td>2100 MHz</td><td>15 MHz</td></tr>
    <tr><td>N78</td><td>3600 MHz</td><td>100 MHz</td></tr>
    <tr><td>B20</td><td>800 MHz</td><td>10 MHz</td></tr>
    <tr><td>B8</td><td>900 MHz</td><td>10 MHz</td></tr>
    <tr><td>B3</td><td>1800 MHz</td><td>15 MHz</td></tr>
    <tr><td>B1</td><td>2100 MHz</td><td>15 MHz</td></tr>
    <tr><td>B7</td><td>2600 MHz</td><td>15 MHz</td></tr>
  </table>

<hr>

<table>
  <tr><td>PCell</td><td>pasmo bazowe</td></tr>
  <tr><td>SCell</td><td>do agregacji</td></tr>

  <tr><td>EARFCN</td><td>4G</td></tr>
  <tr><td>NRARFCN</td><td>5G</td></tr>
  <tr><td>PCI</td><td>sektor</td></tr>
</table>
`;


 document.body.appendChild(linkPanel);


const style = document.createElement('style');
style.textContent = `
#band-link {
  position: fixed;
  top: 60px;
  left: 10px;
  z-index: 10000;
  background-color: white;
  padding: 10px;
  border-radius: 8px;
  border:2px solid #007DFF;
  font-size: 14px;
}
#band-link hr {
margin: 10px 0;
height: 2px;
background-color: red;
}
#band-link ul {
  list-style-type: none;
}
#band-link ul li {
  padding: 2px 4px;
}
#band-link ul li a {
  color: #007DFF;
  text-decoration: none;
  font-weight: bold;
  letter-spacing: 2px;
}
#band-link ul li a:hover {
  text-decoration: underline;
}
#band-link table {
cursor: default;
border-collapse: collapse;
background-color: #ffffff;
}
#band-link table td {
border: 1px solid black;
padding: 3px 7px;
}
#band-link table tr:nth-child(odd) td {
  background-color: #f0f0f0;
}
#band-link table tr:nth-child(even) td {
  background-color: #d9d9d9;
}
#band-link table tr:hover td {
background-color: black;
color: white;
border-color: #ffffff;
}
#band-link table:first-of-type tr:nth-child(1) td {
background-color: #B3E0FF;
color: black;
border-color: black;
text-align: center;
font-weight: 600;
letter-spacing: 0.7px;
padding: 5px;
}
#band-link table:first-of-type tr:nth-child(4) td {
  border-bottom: 2px solid #007DFF;
}
#band-link table:last-of-type tr:nth-child(2) td {
  border-bottom: 2px solid #007DFF;
}
#band-link table:last-of-type tr:nth-child(4) td {
  border-bottom: 2px solid #007DFF;
}
`;
document.head.appendChild(style);

})();

Zmieniamy umiejscowienie panelu przez edycje tego kawałka kodu.

  position: fixed;
  top: 60px;
  left: 10px;

-------------------------------------------------------

Wpis wydzielony z pogaduch 4.0

Przywróciłem zgubione zdjęcie i poprawiłem tytuł.

Mikołaj

dav4dav4

@Zeusek

Od siebie polecam tą bibliotekę https://github.com/Salamek/huawei-lte-api

Stworzyłem sobie appkę konsolową która pobiera mi dane nt. sieci kiedy ich potrzebuje.

To API pozwala na pobieranie danych z routera i wykorzystanie ich w dowolny sposób. Ja sobie akurat monitoruje RSRP i SINR i zapisuje w Prometheusie aby mieć wykresy. Ostatnio trafiłem też na moduł do HA - https://www.home-assistant.io/integrations/huawei_lte/ i mam ochotę go sprawdzić

atlas_cudow

Ale ten kod wyświetla tylko tabelkę a nie dane z routera i nie dodaje żadnych funkcji, oprócz linków. Czy taki był zamysł?

Zeusek

@atlas_cudow

Tak, taki był zamysł. Jest to rodzaj ściągi + dwa linki aby nie klikać i szukać gdzie kliknąć.

atlas_cudow

A oki 🙂 Dobra robota 👌