⌨️ Visualize keyboard history for osu! in bar form

Related tags

Learning resource bar-overlay-for-osu
Overview

bar-overlay-for-osu

Visualize keyboard history for osu!

Example

vertical

Vertical

horizontal

Horizontal

Features

  • Customizable: keys, colors, speed, spacing, etc.
  • Receives input from websocket (requires the OBS plugin input-overlay 5.0 or gosumemory)

TODO

  • Receive input from gosumemory
  • Round corners
  • Fix glitches of the keys when the round corners are enabled
  • More key styles

Usage

  1. Choose one of the input sources below

  • Install input-overlay plugin 5.0, and turn on the websocket checkbox in plugin settings.

  • Install gosumemory, and set a smaller update interval in gosumemory config file.

  1. Clone this repository, edit config.js to set your preferences.

  2. Build the project.

npm install
npm run build

The output html file is dist/index.html.

  1. Add a browser source to OBS, and set the source to file:///E:/bar-overlay-for-osu/dist/index.html (your path).

  2. Enjoy it!

Addition

The OBS plugin input-overlay 5.0 rc seems to have serious performance issues, so I am going to support websocket input of gosumemory soon.

Now it supports gosumemory source, you can change the inputSource and port item in config.js to use it.

You might also like...

FormGear is a framework engine for dynamic form creation and complex form processing and validation for data collection.

FormGear is a framework engine for dynamic form creation and complex form processing and validation for data collection.

FormGear is a framework engine for dynamic form creation and complex form processing and validation for data collection. It is designed to work across

Dec 27, 2022

Form To CSS - jQuery-Plugin form to CSS generator

Form To CSS - jQuery-Plugin form to CSS generator

Create your own CSS generator with the form to css generator Builder plugin. Can be usefull to create your own css builder or a Wordpress plugin or any kind of apps you need a real time css generator. For example, you can create a button generator

Sep 26, 2021

A JavaScript library stores the form-data to the localstorage so you don't have to fill the form again.

A JavaScript library stores the form-data to the localstorage so you don't have to fill the form again.

form-storage A JavaScript library stores the form-data to the localstorage so you don't have to fill the form again. Installation via npm npm install

Dec 10, 2022

A card for Home Assistant Lovelace for exploring the history of your entities interactively and in real time.

A card for Home Assistant Lovelace for exploring the history of your entities interactively and in real time.

History explorer card This is a custom history card for Home Assistant. This card offers a highly interactive and configurable way to view the history

Dec 31, 2022

A chat logs online saver for discord bots to save messages history & cleared messages online

A chat logs online saver for discord bots to save messages history & cleared messages online

Chat Logs NPM package that saves messages online to view it later Useful for bots where users can save messages history & cleared messages online Supp

Dec 28, 2022

Get a diff view of your Obsidian Sync, File Recovery and Git version history

Get a diff view of your Obsidian Sync, File Recovery and Git version history

Version History Diff (for Sync and File Recovery Core plugins and Git) Note This plugin uses private APIs, so it may break at any time. Use at your ow

Dec 26, 2022

An enchanced useState hook which keeps track of the states history, allowing you to undo and redo states.

useTimeline An enchanced useState hook which keeps track of the states history, allowing you to undo and redo states. useTimeline is a simple hook bas

Apr 22, 2022

A pokemon card battle app that can evolve them and see their battle history.

A pokemon card battle app that can evolve them and see their battle history.

BattlePoke 🔗 About An application of an Pokemon card battle game where each player initially receives 3 cards and can start to battle and gain evolut

Jun 17, 2022

This is the frontend/UI of git history analyzing tool Who Touched What

This is the frontend/UI of git history analyzing tool Who Touched What

Who Touched What? This a git analysis tool for you to see how many edits were done to each file and by whom. A quick and straight forward way to track

Aug 17, 2022
Comments
  • Setup test/release ci

    Setup test/release ci

    also added @parcel/config-default and @parcel/core for build

    these workflows have been tested

    • test: https://github.com/aeongdesu/osu-bar-overlay/actions/runs/2549614656
    • release(tag): https://github.com/aeongdesu/osu-bar-overlay/actions/runs/2549595117
      • result: https://github.com/aeongdesu/osu-bar-overlay/releases/tag/testtest

    Usage should be edit because I'm not good at english

    opened by aeongdesu 4
  • Fade option doesn't work

    Fade option doesn't work

    No matter how many times I enable/disable the option or which order I open gosumemory, osu, or StreamLabs, the overlay never fades like it does in the examples.

    opened by Daithi 1
Owner
solstice23
solstice23
GitHub
History.js gracefully supports the HTML5 History/State APIs (pushState, replaceState, onPopState) in all browsers. Including continued support for data, titles, replaceState

History.js gracefully supports the HTML5 History/State APIs (pushState, replaceState, onPopState) in all browsers. Including continued support for data, titles, replaceState. Supports jQuery, MooTools and Prototype.

Browser State 10.8k Dec 26, 2022
Hourly weather card for Home Assistant. Visualize upcoming weather conditions as a colored horizontal bar.

Hourly Weather Card by @decompil3d An hourly weather card for Home Assistant. Visualize upcoming weather conditions as a colored horizontal bar. Can y

Jonathan Keslin 49 Dec 29, 2022
Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

Svante Jonsson IT-Högskolan 3 May 18, 2022
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

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

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023
This work is an overnight with 84436, an overlay code forked from Osu! community but for ``flag of Vietnam`` in r/place 2022

flag-of-vietnam-rplace2022 This work is a overnight with 84436, an overlay code forked from Osu! community but for flag of Vietnam Installation Xài Ta

Đoàn Đình Toàn 10 Nov 2, 2022
An easy way to mass download osu! beatmaps

Batch Beatmap Downloader (Beta) Download Latest Release Table of Contents About Screenshots Getting Started Prerequisites Usage Build instructions Con

James 65 Jan 3, 2023
Auth-Form-Design - Beautiful Auth Form Designed using React 🥰.

?? Auth Form Design ?? Features 1. Check Your Password Strength 2. Can Use Suggested Password 3. Enjoy Responsive Design Getting Started with Create R

Samarpan Dasgupta 2 Dec 24, 2022
Gatsby-Formik-contact-form-with-backend-panel - Full working contact form with backend GUI panel.

Gatsby minimal starter ?? Quick start Create a Gatsby site. Use the Gatsby CLI to create a new site, specifying the minimal starter. # create a new Ga

Bart 1 Jan 2, 2022
This is a Google Apps Script library for parsing the form object from HTML form and appending the submitted values to the Spreadsheet.

HtmlFormApp Overview This is a Google Apps Script library for parsing the form object from HTML form and appending the submitted values to the Spreads

Kanshi TANAIKE 18 Oct 23, 2022