Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jonathan-foucher/computer-monitoring-vuejs
A simple but efficient computer monitoring tool, shaped for my needs.
https://github.com/jonathan-foucher/computer-monitoring-vuejs
chartjs charts javascript monitoring python3 temperature vuejs
Last synced: about 2 months ago
JSON representation
A simple but efficient computer monitoring tool, shaped for my needs.
- Host: GitHub
- URL: https://github.com/jonathan-foucher/computer-monitoring-vuejs
- Owner: jonathan-foucher
- Created: 2019-08-28T19:21:05.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-05T16:22:50.000Z (about 2 years ago)
- Last Synced: 2023-03-08T11:48:28.297Z (almost 2 years ago)
- Topics: chartjs, charts, javascript, monitoring, python3, temperature, vuejs
- Language: Vue
- Homepage:
- Size: 3.4 MB
- Stars: 2
- Watchers: 1
- Forks: 1
- Open Issues: 19
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Overview
Recently with the hot days of summer, my computer was suffering from the heat and sometimes it was shutting down unexpectedly. My high GPU usage mixed up with the ~35-45°C summer temperatures could make my computer shut down many times in a few hours.
As a solution I decided to use monitoring tools to watch the temperatures of my graphic card and processor to predict and then prevent any shutdown (by reducing the load for example). The tools I had found online could do the job and showed the temperatures in real time but I couldn't really make my own board or use multiple charts with a nice look as I wanted.
Since I'm a developer, I decided to create my own monitoring dashboard, the target was to code a simple but efficient monitoring tool suiting my needs.
I also wanted to try new languages/frameworks I've never used before to challenge myself and learn new things. I made a python back API collecting the data (temperatures, load...) from Open Hardware Monitor. And for the front, I chose to use VueJS and the library Chart.js to create the dashboard and charts. The server and the client communicate on a socket to ensure a permanent flow of data.
# Screen captures of the application
Screenshot
Video capture (converted to gif)
# How to install and run
## Installation
### Python api server
- install Open Hardware Monitor
- install python if you don't have it yet
- install the required python libraries : socketio, wmi and eventlet
run the cmd as administrator and run theses commands to install the libraries :
```
pip install python-socketio
```
```
pip install WMI
```
```
pip install eventlet
```
time and json libraries are also required but they should be installed by default with python
### VueJS client
- install Node.js to get node and npm
- open a CLI, navigate into the folder *Client/* of the project and install the packages with this command :
```
npm install
```
## Run the application
### Python api server
- to start the python server you just need to launch the file *Server/server.py* with python
### VueJS client development mode
- start the client in development mode with the command :
```
npm run serve
```
- the application is available on you browser at [http://localhost:8080/](http://localhost:8080/)
### VueJS client production mode
- you can also build for production to deploy on a server with the command :
```
npm run build
```
it will create a folder *dist/* that you can use to deploy the application on your server
- for example you can run the application client on a python server
to serve the client with python, use this command inside the *dist/* folder :
```
python -m http.server 8080
```
- the application is available on you browser at [http://localhost:8080/](http://localhost:8080/)