Skip to content

show the key and heatmap that pressed by keyboard or mouse , statistics of app usage and keystroke

License

Notifications You must be signed in to change notification settings

pattazl/showKeyBoard

Repository files navigation

showKeyBoard

English | 简体中文

Function Introduction

  1. Key statistics with customizable keyboard, view statistics
  2. Key display, real-time display of key status, support for various types of window customization, support for multiple screens, similar to Carnac
  3. Support Chinese and English switching and light & dark theme switching
  4. Support parameters import and export
  5. Support remote statistics and settings
  6. For privacy and security, showKeyBoard only records statistical information, do not record specific content, and save the content locally
  7. Support the statstics of mouse and keyboard of different application programs

System Requirements

  1. Windows 64-bit system, Windows10 or Windows11 is recommended
  2. Have a modern browser (Edge/Chrome/FireFox, etc.)

How to use

Install for the first time, or do not have node10 or above environment, install

ShowKeyBoard_Setup_(version)_(date).exe

Unzip version as below, please note that manual backup and restore of data is required when update

ShowKeyBoard_portable_(version)_(date).exe

If you have node10 or above environment, or have installed it once, install

ShowKeyBoard_Setup_(version)_(date)(node).exe or ShowKeyBoard_Setup_(version)_(date).node.exe

Follow the prompts to select during installation, such as whether to keep the configuration, whether to create a shortcut, etc. The default configuration can be used in general

Note:

  1. Due to the use of system hooks, some computers may report viruses by mistake and need to be trusted.
  2. On some systems, you may need to run in administrator mode, otherwise showKeyBoard will not be able to listen to the keys

Screenshot

realtime show keystroke status and content

history keystroke trend

realtime keystroke heatmap

custom keyboard

setting

data

keymap

dialogsetting

appStat

appHistory

Technical Architecture

The key monitoring client uses AutoHotkey + Windows API

The interface display uses HTML, and node does WebSocket and HTTP communication

The client program only reads the configuration file and sends data, and does not write the configuration file

The HTTP side writes the configuration file and receives the HTML front-end data

graph LR
Client -->|Post|NodeServer ---|WebSocket/Post/Get|Web
NodeServer ---|R/W|ConfigFile
ConfigFile -->|Reload|Client
Loading

Compile Instructions

  1. http is the server-side code, use npm run build to package and generate the httpdist directory
  2. ui-helper is the client configuration page npm run build to generate the dist directory, which needs to be placed in the httpdist/dist/ui directory when publishing
  3. The root directory is the AutoHotkey script, which needs to be packaged into exe with the AutoHotkey tool for showKeyBoard.ahk, and the corresponding exe file needs to be placed in the same level directory as httpdist

Directory Description

  1. KeyList.txt in the root directory saves key characters directory. showKeyBoard.ini saves the client configuration
  2. httpdist/dist/records.db saves the statistical information of the keys and the related configuration information of the statistics
  3. httpdist/dist/node.exe is used to start the backend http/websocket service

Thanks

The client function refers to part of the design of KMCounter and Carnac

The UI interface uses the Naive UI framework