Current Development Status

Please note that texthooker-ui is currently not actively worked on. Feel free to report further bugs / feature requests and / or open pull requests but don't expect (timely) responses on them

Texthooker UI

A web interface for using websocket-based interfaces, such as:

• Textractor with textractor-websocket or TextractorSender
• mpv with mpv_websocket

An online version of the page can be accessed here.

An offline version of the page can be downloaded from the docs folder (make sure to also download the assets folder and content in case you want to use some of the custom online fonts) or build locally by your own.

When facing connection issues check the FAQ for common issues like ad blocker extensions (uBlock) or wrong websocket urls.

Note: If you are interested in persistent statistics, history and additional mining capabitilies / workflows you may want to checkout GameSentenceMiner which runs a forked version of this web interface.

Building

# Install pnpm
npm install --global pnpm

# Install dependencies
pnpm install

# Build the Page
pnpm run build

# Optional - serve the Page via local Server
pnpm run preview

The page can be opened via the index.html inside the "docs" folder and is usable without the need of hosting it via a server.

FAQ

I can't connect to the websocket with textractor-websocket.

• Sadolit's textractor-websocket requires that textractor captures at least one line before starting the server - connect manually afterwards. Alternatively try kuroahna's textractor_websocket which does not have this issue.

I can't connect to the websocket with TextractorSender.

• Make sure you are using the right port which is 9001

I can't connect to the websocket with a different plugin/still can't connect to the websocket with one of the mentioned plugins.

• Make sure your firewall is not blocking the required ports. You can also check if another extension is interfering by trying out the page with a clean temporary profile and disabled extensions
• Adblocker extensions like uBlock may block connections to localhost / websocket addresses. Try to disable them for this page / running a clean temporary profile to verify the functionality
• For Brave Users: If you are using a hosted / online version of the page disable the brave shield for the domain to allow the usage of unsafe websocket connections. Alternatively try out the local / offline version which you can find in the docs folder

Can I use this page with extensions like Clipboard Inserter or lap-clipboard-inserter?

• When "Enable external Clipboard Monitor" is checked text appended as paragraph to the page body will be taken over by the app. Make sure to enable this setting before the actual extension to avoid wrongly pasted elements

How do I customize the page with CSS?

• You can use normal CSS syntax and rules via the "Custom CSS" Field. The content will be appended as style node to the page header

How can I delete lines?

There are multiple ways of deleting a line:

• Click on the "Delete last Line" Icon in the header
• Click on the "Reset Lines" / "Reset Data" / "Reset All" Icon in the settings menu
• Highlight a line and press the "Delete" key on the keyboard
• Have no text highlighted and press the "Alt" + "Delete" key on the keyboard
• Select a Line for deletion by holding the "CTRL" key (or "command" key on macOS) on the keyboard and double click on it (you can press "Escape" to unselect lines again). Afterwards click on the "Remove selected Lines" icon in the header

How can I edit a line?

• You can modify the content of a line by double clicking on it. Clicking somewhere outside will exit the edit mode. Changes to the text will automatically be reflected in the character counter

What is covered by "Undo last Action"?

Note: By default, the undo history is stored in memory only. If you want to keep it across tab reloads, make sure to enable the respective setting.

• Deleting lines by clicking on the "Remove last line" icon
• Deleting lines by highlighting them and pressing the "Delete" key on the keyboard
• Deleting last line pressing the "Alt" + "Delete" key on the keyboard
• Deleting lines by clicking on the "Remove selected lines" icon
• Editing content of a line

What is NOT covered by "Undo last Action"?

• Deleting data by clicking on the "Reset Lines" / "Reset Data" / "Reset All" icon
• Overwritten data by an import
• Skipping duplicates resulting out of setting changes / changed Data
• Skipping duplicates resulting out of replacement pattern changes / changed Data
• Removed lines by the "Max Lines" setting
• Filtered lines by the "Filter lines without jp content" setting

Can I move the data to another device / browser?

• You can export/import data by clicking on the respective Icon in the settings menu
• Clicking on the icon will export the current time value, notes, displayed lines and action history (settings will not be exported)
• Clicking on the icon while holding the "ALT" key on the keyboard lets you select a previously exported file for import. Note that all existing data will be overwritten
• The same steps can be executed for exporting/importing all Settings/Presets or single Presets via respective Icons

What is the order of settings / transformations on new text lines?

1. Replacements
2. Remove all Whitespace
3. Filter lines without jp content
4. Global or last line Duplicate
5. Max Lines
6. Merge equal Line Starts

Can I use the floating window in other browsers except chrome / edge?

• No - (Desktop) Chromium Browser are currently the only browser having the required api implemented

What options / actions are applied to the floating Window?

• Applied: Font Size, Online Font, Max Lines (floating window),Reverse Line Order, Preserve Whitespace, Enable Line Animation, AFK Blur, Custom CSS
• Implicit: All Line related text adjustments like replacement patterns, duplicate management, line start merges, jp content filter etc.
• Not available: Vertical Display, Main window actions, timer / stats, keybinds, pasting and line actions like selecting or editing

Can i let my dictionary extension exceed the floating Window?

• No - technically the floating window behaves exactly as any other browser window and therefore it is not possible that content exceeds it

Will the floating Window remember the last Position?

• In Terms of height and width the page will attempt to restore the last used dimensions but the browser may clamp or ignore the values as appropriate to provide a reasonable user experience. The window position itself typically resets when closing the tab or floating window

Can i further customize the floating Window?

• You can apply custom styles as per standard settings. In order to target the floating window content you can use the id selector "#pip-container" (e.g. #pip-container p {color: red;} will only apply to paragraphs in the floating window and not the main window). Further customizations like exeeding height, transparency etc. is not possible

Available Keybinds

Note: The actions are only executed when settings/notes are closed, no (confirmation) dialog is displayed and no line is in edit mode.

Available Settings

The following section contains explanations and details on the settings you can configure. The settings can be accessed by clicking on the gear at the top right corner.

<details style="cursor: pointer;"> <summary>Settings List</summary>

</details>

Known Issues

• High number of displayed characters may slow down the page performance due to the current greedy way of counting characters etc.
• The horizontal reading mode performs overall better than the vertical one
• Line breaks added manually during editing a line are sometimes removed
• The page was build with desktop / maximized window usage in mind - following guides (e. g. like this one) to access the page via tablet or mobile devices / using smaller window / screen sizes may have a limited user experience or functionality

Acknowledgements

• Anacreon Texthooker
• MarvNC texthooker-websocket User Script