A simpe react app that plots a live view of the T-Mobile Home Internet Nokia 5G Gateway signal stats, helpful for optimizing signal.

Last update: Jul 24, 2022

tmo-live-graph

A simpe react app that plots a live view of the T-Mobile Home Internet Nokia 5G Gateway signal stats, helpful for optimizing signal.

This project should be considered to be in a pre-release state.

desktop screenshot of tmo-live-graph

Getting Started

Ensure that you have nodejs installed on your machine, then run:

npm install

In order to properly fetch API responses from the Nokia Gateway in-browser, they must be proxied to work around CORS restrictions.

This is handled automatically when running the project in development mode using webpack-dev-server with the following command:

npm start

This will start the project at http://localhost:3000/

This project has not been prepared to handle proxying in a production-ready release mode.

Summarized Statistics

4G LTE

  • Connected band
  • Current/Best RSRP
  • Current/Best SNR
  • Current/Best RSRQ

5G NR

  • Connected band
  • Current/Best RSRP
  • Current/Best SNR
  • Current/Best RSRQ

Visualized Statistics

4G LTE

  • RSRP value with Min/Max reference lines
  • SNR value with Min/Max reference lines
  • RSRQ value with Min/Max reference lines

5G NR

  • RSRP value with Min/Max reference lines
  • SNR value with Min/Max reference lines
  • RSRQ value with Min/Max reference lines

Screenshots

Desktop

desktop screenshot of tmo-live-graph

Tablet

tablet screenshot of tmo-live-graph

Mobile

mobile screenshot of tmo-live-graph

Available Scripts

In the project directory, you can run:

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

npm test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

npm run build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

npm run eject

Note: this is a one-way operation. Once you eject, you can’t go back!

If you aren’t satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project.

Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.

You don’t have to ever use eject. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.

Learn More

You can learn more in the Create React App documentation.

To learn React, check out the React documentation.

Code Splitting

This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting

Analyzing the Bundle Size

This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size

Making a Progressive Web App

This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app

Advanced Configuration

This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration

Deployment

This section has moved here: https://facebook.github.io/create-react-app/docs/deployment

npm run build fails to minify

This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify

GitHub

https://github.com/highvolt-dev/tmo-live-graph
Comments
  • 1. Request for settings.properties file

    Hello HighVolt-Dev, May I request for a .properties file where we can specify static information like gateway type. It will eliminate the need for selecting values from a drop-down. Another option can be to have a settings page, where the user can set values to various parameters from a drop-down value and those can be stored as browser cookies. Thanks.

    Reviewed by CapabaleSpecimen at 2022-02-03 19:57
  • 2. Request, add RSRQ

    when I've fine tuned my tmobile internet, RSRQ has played a big factor in download quality, which makes sense since it's the main stat for signal receive. Even if other numbers are good, if RSRQ is bad, download will be bad.

    It's also helpful to have continious monitoring on it when doing a speed test because that's when you can see how noisy/bad it can get.

    Reviewed by MysticalOS at 2021-10-10 02:44
  • 3. Arcadyan eNB ID calculation is wrong after firmware update

    As reported originally at https://github.com/highvolt-dev/tmo-monitor/issues/68 - The Arcadyan firmware now does not represent the CGI as a hexadecimal value - the eNB ID must be calculated by dividing the CGI by 256 with a decimal base.

    Reviewed by highvolt-dev at 2022-05-08 20:10
  • 4. Display of Carrier Aggregation Breaks with Firmware v1.2103.00.0338

    There is a breaking change to the Carrier Aggregation data returned by Firmware v1.2103.00.0338 by the /fastmile_radio_status_web_app.cgi endpoint.

    TypeError: Cannot read properties of undefined (reading 'X_ALU_COM_DLCarrierAggregationNumberOfEntries')
    Card
    C:/test/tmo-live-graph-0.0.2/src/components/card.js:16
    13 | <h3>Carrier Aggregation</h3>
    14 | <dl>
    15 | <dt>Download</dt>
    > 16 | <dd>{props.CA.ca.X_ALU_COM_DLCarrierAggregationNumberOfEntries ? `+${props.CA.ca.X_ALU_COM_DLCarrierAggregationNumberOfEntries}` : 'None'}</dd>
    | ^ 17 | <dt>Upload</dt>
    18 | <dd>{props.CA.ca.X_ALU_COM_ULCarrierAggregationNumberOfEntries ? `+${props.CA.ca.X_ALU_COM_ULCarrierAggregationNumberOfEntries}` : 'None'}</dd>
    19 | {Object.keys(props.CA.ca).filter(key => props.CA.ca.hasOwnProperty(key) && !isNaN(key)).map(key => <>
    View compiled
    ▶ 18 stack frames were collapsed.
    current
    C:/test/tmo-live-graph-0.0.2/src/App.js:98
    95 | secondary['RSRPCurrent'] = null;
    96 | secondary['RSRQCurrent'] = null;
    97 | }
    > 98 | setData(data => [...data.slice(-24), {date, time: `${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}` , lte: primary, nr: secondary, ca: { ...json['cell_CA_stats_cfg'][0] }}]);
    | ^ 99 | }, 2000);
    100 |
    101 | const doLogin = async e => {
    View compiled
    This screen is visible only in development. It will not appear if the app crashes in production.
    Open your browser’s developer console to further inspect this error. Click the 'X' or hit ESC to dismiss this message.
    
    Reviewed by highvolt-dev at 2022-01-20 22:32
  • 5. Fixes for Arcadyan Router plus minor additions

    Three Changes:

    • I found that the program incorrectly listed the LTE band for the 5G band.
    • Added a Dockerfile if someone wants to generate a docker image with the App. I run this in a Synology NAS at my lake house so I can monitor remotely.

    BEFORE ACCEPTING -- Third Change: Since I am using this to monitor my Arcadyan router remotely, I don't have access to the T-Mobile App, so I wanted a way to monitor the firmware version, so I added that to the display. The issue is I don't have access to a Nokia to correctly identify the Firmware version. This will not work correctly with the Nokia. So if someone can give me the code to get the Firmware of the Nokia version, I'll incorporate it. I think that would be important before accepting this PR

    Screen Shot 2022-04-18 at 7 01 41 PM

    Also, I can change this to merge into a different branch in the origin repo if someone can create it for me.

    I'm actually debating about create a Prometheus Exporter of this data. I could add that to this program or just create my own. Let me know your thoughts.

    Reviewed by zoopra9457 at 2022-04-19 00:06
  • 6. Exposing tmo-live-graph for your phone, say.

    Fun trick. You can use Cloudflare's free tunnels offering to ease access to tmo-live-graph.

    • Step 1: Install cloudflared. Eg. on the mac do: brew install cloudflare/cloudflare/cloudflared.
    • Step 2: Create tunnel: cloudflared tunnel --localhost 3000, take note of the long random domain name is sets up.
    • Step 3: Run tmo-live-graph: DANGEROUSLY_DISABLE_HOST_CHECK=true npm start
    • Step 4: Enjoy, visit the random domain noted in step 2, for example only: https://long-random-something.trycloudflare.com

    The real trick here is setting the environment variable.

    Reviewed by bhyde at 2022-01-26 17:59
  • 7. Add toggles for different views

    Add toggles for different views to enable/disable different metrics, primary/secondary bands, etc. This should also help reduce visual clutter on smaller viewports without sacrificing verbosity.

    Reviewed by highvolt-dev at 2021-12-28 02:27
  • 8. Refactor project

    The initial release of this project is considered pre-alpha state and is a rough proof-of-concept. This project needs to be refactored into separate components and optimized for production builds

    Reviewed by highvolt-dev at 2021-12-28 02:26
storybook-addon-aria-live is a Storybook addon for inspecting ARIA live region announcements

Storybook Addon Aria Live Storybook addon for inspecting ARIA live region announcements storybook-addon-aria-live is a Storybook addon for inspecting

Jan 30, 2022
A simple ReactJS app that displays latest stats about COVID-19
A simple ReactJS app that displays latest stats about COVID-19

A simple ReactJS app that displays latest stats about COVID-19. Installation git clone https://github.com/sambreen27/covid19.git cd covid19 npm instal

Oct 28, 2021
Cryptos stats & news WebApp
Cryptos stats & news WebApp

CryptoWatch A WebApp that allows you to follow Cryptos' News and Stats. Table of Contents About The Project Screenshots Built With Getting Started Pre

Aug 4, 2022
Display ITL Online 2022 event stats on a livestream for a given entrant via a browser source
Display ITL Online 2022 event stats on a livestream for a given entrant via a browser source

ITL Stream Widget Display ITL Online 2022 event stats on a livestream for a given entrant via a browser source. The source refreshes every minute to k

Apr 5, 2022
Joguinho do dinossauro quando está sem internet, mas como se fosse o jogo do mario bros.
Joguinho do dinossauro quando está sem internet, mas como se fosse o jogo do mario bros.

Projeto front-end construído no Bootcamp React Web Developer da Digital Innovation One.

Mar 13, 2022
Project make with ReactJS and Leaflet to show specified points and heat points in the map, without active internet connexion

Welcome to offline-map-react ?? Project make with ReactJS and Leaflet to show specified points and heat points in the map, without active internet con

Jul 29, 2022
Visual of the Home page of Twitter done with React JS

As I can't show the code of my real projects, I cloned the Home Page of Twitter in about 2 days using ReactJS and pure CSS. Feel free to check the cod

Nov 1, 2021
I had cloned the home UI of whatsapp using ReactJS

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Nov 8, 2021
🍑 Responsive Mobile-sized Wrapper for React - Easily prototype your mobile-sized web apps with desktop support
🍑 Responsive Mobile-sized Wrapper for React - Easily prototype your mobile-sized web apps with desktop support

react-mobile-sized-view Featured on reactjsexample.com(thx editor ?? ) ?? Responsive Mobile-sized Wrapper for React ?? Examples ⚠️ Warning: The follow

Jun 8, 2022
Papercups is an open source live customer chat web app written in Elixir
Papercups is an open source live customer chat web app written in Elixir

Papercups is an open source live customer chat web app written in Elixir

Aug 2, 2022
This project I created with Rodrigo Branas in the live about the micro frontends. For this presentation I used single-spa.js, vue.js and react on different micro frontends
This project I created with Rodrigo Branas in the live about the micro frontends. For this presentation I used single-spa.js, vue.js and react on different micro frontends

live-microfrontends-with-branas Micro Frontend with Rodrigo Branas This project I created with Rodrigo Branas in the live about the micro frontends. F

Jan 26, 2022
flipkart-clone using react js express js mongo db razorpay complete e-commerce website using MERN stack client server MVC architecture redux redux-thunk ecomerce project live example
flipkart-clone using react js express js mongo db razorpay complete e-commerce website using MERN stack client server MVC architecture redux redux-thunk ecomerce project live example

Flipkar Clone MERN stack Sijeesh Miziha's Flipkart Clone is done with top-notch features for the entrepreneur startups like Flipkart it has RazorPay I

Jul 29, 2022
A Live NFT Ticket Minter for the Maxja Festival 2022. Built with React.
A Live NFT Ticket Minter for the Maxja Festival 2022. Built with React.

Maxja-Sardegna The Maxja Festival hosted in Sardegna (Italian spelling) is an annual gathering that brings together a small conscious community (the y

Jun 26, 2022
A website for all the songs from the Love Live! franchise.
A website for all the songs from the Love Live! franchise.

Raburadio This is the frontend repository for Raburadio, a website to archive all the songs in the Love Live! franchise. A re-write of the PHP-based L

Apr 11, 2022
In this project, we will be working with the real live data from the SpaceX API.

In this project, we will be working with the real live data from the SpaceX API. We are going to build a web application for a company that provides commercial and scientific space travel services. The application will allow users to book rockets and join selected space missions.

Dec 6, 2021
Weather - Live Weather Prediction using ReactJs
Weather - Live Weather Prediction using ReactJs

Live Weather Prediction using ReactJs Fetches Temperature with location name, Pr

Jan 16, 2022
SyncedStore CRDT is an easy-to-use library for building live, collaborative applications that sync automatically.
SyncedStore CRDT is an easy-to-use library for building live, collaborative applications that sync automatically.

SyncedStore is an easy-to-use library for building collaborative applications that sync automatically. It's built on top of Yjs, a proven, high performance CRDT implementation.

Aug 1, 2022
FullStack app containing an API (NestJS), a web app (React) and a mobile app (React Native).

Food Order This project is a workspace containing an API (NestJS), a web app (React) and a mobile app (React Native). Content Food Order Content Get S

Apr 24, 2022