Touchscreen Stenography Keyboard

Repository

This code repository is hosted at https://github.com/CosmicDNA/touchscreen-stenography-keyboard

Purpose of The Project

The aim of this project is to render with React Three Fiber a usefull stenography touchscreen keyboard. So that users can safely send keystrokes to whichever computer running Plover they want.

This is a cross-platform touchscreen stenography keyboard built in React, making it a web-based solution that can run on any device with a touchscreen and a browser (Android, iOS, Windows tablets, etc.).

Tip

To use this keyboard on a separate device like a tablet, the computer running Plover must be accessible from the internet. See the Advanced Usage: Connecting from the Web section for detailed instructions on how to set this up.

If you don't want to deal with the hassle of setting up network parameters, please refer to https://github.com/CosmicDNA/touch-steno-keyboard to instead connect as a client via a relay server.

The idea is to provide a secure, highly accessible, zero-cost practice tool that people can use anywhere. It outputs steno strokes that can be picked up by Plover (via the WebSocket connection).

Deployed Application

The application was deployed to Netlify and is available at:

https://stenography.cosmicdna.co.uk

How It Works

This application functions as a web-based stenography keyboard that securely connects to the Plover stenography engine. It uses the plover-websocket-server plugin to establish a secure, encrypted connection, allowing you to send steno strokes from your browser to Plover running on any machine.

Plover way in Cornish

Setup Guide

Follow these steps to connect the web keyboard to Plover.

Step 1: Install and Configure the Plover Plugin

1. Install the Plugin: The recommended way to install plover-websocket-server is through Plover's built-in Plugin Manager.

   • In Plover, go to Tools -> Plugins Manager.
   • Find and select plover-websocket-server.
   • Click Install/Update, and then Restart Plover.

2. Enable the WebSocket Server Plugin:

   • In Plover's main window, click the Configure button (the gear icon).
   • Go to the Plugins tab.
   • Makse sure the Enabled check box is ticked as per the following image.

Enabled Websocket Server Plugin

Step 2: Configure the Web Keyboard

Open the web keyboard application and click the settings icon. Ensure the configuration matches your Plover WebSocket server settings. The default values are shown below.

App configuration window

Keyboard Controls Explained

Within the "Keyboard" controls panel, you'll find several options to customize your experience:

• sendStroke: This dropdown controls when the steno stroke is sent to Plover.

  • onKeyRelease (Default): The stroke is sent after you lift your fingers off the screen, when the last key in the chord is released. This is the standard behavior for stenography and allows you to form the full chord before sending.
  • onKeyPress: The stroke is sent the moment you press the first key. This offers a more immediate response but may be less forgiving if you don't press all keys in a chord simultaneously.

• lockPosition: When checked, this option freezes the camera's position, preventing you from accidentally rotating, panning, or zooming the 3D view. This is useful once you've found a comfortable angle.

• performanceMonitor: Ticking this box will display a small panel in the bottom-right corner showing real-time performance metrics like Frames Per Second (FPS). This is mainly useful for development or for diagnosing performance issues on your device.

• show3DText: This toggles the visibility of the text labels on top of each key. You can turn this off for a cleaner, more minimalist look once you are familiar with the key layout.

• showShadows: This option enables or disables the soft contact shadows beneath the keyboard. Disabling shadows can improve performance on less powerful devices, but will make the scene look less realistic.

Step 3: Connect and Approve

Once configured, the web app will attempt to connect to Plover. A dialog will appear on the machine running Plover, asking you to approve the connection.

Plover connection approval dialog

Usage Example

Once connected, you can begin typing on the touchscreen keyboard. The video below demonstrates the keyboard in action.

v4.mp4

Usage example for typing

Advanced Usage: Connecting from the Web

You can connect to a Plover instance running on your local machine (e.g., at home) from anywhere on the internet. This is useful if you want to use this web keyboard on a mobile device while your main computer with Plover is elsewhere.

To achieve this, you need to expose your local Plover WebSocket server to the internet via a public hostname. There are several ways to do this, including:

• Tunneling Services: Tools like Cloudflare Tunnel (cloudflared) or ngrok create a secure tunnel from a public URL to your local machine. This is often the easiest and most secure method as it doesn't require opening ports on your router.
• Dynamic DNS (DDNS): If your home IP address changes, a DDNS service can give you a permanent hostname that always points to your current IP. This approach requires you to configure port forwarding on your router to direct traffic from the internet to the Plover WebSocket port (8086 by default) on your local machine.

Below is a detailed example using Cloudflare Tunnel.

Example: Using Cloudflare Tunnel (cloudflared)

There are two main ways to use cloudflared:

Method 1: Quick Tunnel (for Temporary Testing)

This is the fastest way to get a public URL, but the URL will change each time you start the tunnel.

1. Install cloudflared: Follow the official installation instructions for your operating system.

2. Start the tunnel: Run the following command in your terminal. This assumes Plover is running on the default port 8086.

   cloudflared tunnel --url localhost:8086

3. Use the public URL: cloudflared will give you a public URL (e.g., https://random-words.trycloudflare.com). In the web keyboard's configuration, enter this hostname (e.g., random-words.trycloudflare.com) and check the TLS box.

Method 2: Named Tunnel (for Permanent Use)

This method provides a stable, permanent public URL and is the recommended approach for regular use. It requires you to have a domain managed by Cloudflare.

1. Install and Authenticate cloudflared: Follow the official guides to install and log in.

2. Create a Tunnel: Give your tunnel a memorable name.

   cloudflared tunnel create plover-tunnel

3. Route Traffic: Link your tunnel to a public hostname (e.g., plover.yourdomain.com) that points to your local Plover service.

   cloudflared tunnel route dns plover-tunnel plover.yourdomain.com

4. Run the Tunnel: Start the tunnel. It will now listen for requests at plover.yourdomain.com and forward them to your local Plover instance.

   cloudflared tunnel run --url localhost:8086 plover-tunnel

5. Configure the Web Keyboard: In the app's settings, enter your permanent hostname (plover.yourdomain.com) as the WebSocket URL and check the TLS box.

Example: Using Dynamic DNS (DDNS)

This method gives you a persistent hostname that points to your home network's IP address. It requires you to configure port forwarding on your router.

1. Sign up with a DDNS Provider: Choose a service like No-IP or DuckDNS and create a hostname (e.g., my-plover.ddns.net).

2. Set Up the DDNS Client: Install the provider's update client on your computer or configure the DDNS service directly in your router's settings. This ensures your hostname always points to your current IP address.

3. Configure Port Forwarding: This is a critical step.

   • Log in to your router's administration page.
   • Find the "Port Forwarding" or "Virtual Server" section.
   • Create a new rule to forward incoming TCP traffic from an external port (e.g., 8086) to the internal IP address of the computer running Plover on port 8086.

4. Configure the Web Keyboard:

   • In the app's settings, enter your DDNS hostname (e.g., my-plover.ddns.net) as the WebSocket URL.
   • Set the Port to the external port you configured in your router (e.g., 8086).
   • Important: Ensure the TLS box is unchecked, as this direct connection is not encrypted.

Warning

The standard DDNS and port forwarding method described above creates an insecure (ws://) connection. For a secure (wss://) connection, you would need to set up a reverse proxy (like Nginx or Caddy) with a valid TLS certificate. This is an advanced configuration and is beyond the scope of this guide. For most users, a tunneling service like cloudflared is the recommended and more secure option for remote access.

Development

How to start the server in production mode

Running

In your terminal run:

yarn && yarn start

Building

yarn build
yarn global add serve

Serving Production Build

NODENV=production && serve -s build

Additional Configuration

To use the plugin with the deployed frontend and follow the plover-websocket-server guidelines, ensure your plover_websocket_server_config.json file includes the frontend URL in the remotes pattern section. You can use, for example, a remotes pattern that includes both localhost:8086 and stenography.cosmicdna.co.uk:

{
  "remotes": [
    {
      "pattern": "^https?://(localhost(:[0-9]*)?|stenography\\.cosmicdna\\.co\\.uk)/?$"
    }
  ]
}

Powered by