Mouse-only document & email composition tool

Assistive teechnology tool for people with reduced motor skills

   

Important notes about using this app

This single-page app is for anyone with reduced fine motor controls, assuming they have better control of positioning a mouse pointer than clicking individual keys on a keyboard. Diseases and conditions that often result in a loss of fine motor skills include infection, head trauma, multiple sclerosis, stroke, cerebral palsy, Parkinson's, brain tumors, neuropathy, and spinal injuries.

Ideally, a friend or family can create a file of text to populate the Writing Assistant page for someone who could benefit from the app. This file should contain the most used words and phrases for someone who has reduced motor control. This way they will be able to communicate with loved ones much easier, especially if they also have trouble speaking.

If you would like to load your own words and phrases then you have to add your words to two text files in the main folder. See each section for details.

There are similar notes in my README.md file which you can find in the GitHub repository for this app. If you are a developer and would like to make edits to the app, then you can download or clone it from my GitHub repo.

General Notes:

  • This app is for people who prefer to use a mouse to write because of their motor control difficulties. This app is NOT for tablets or smartphones, though I tried to make it responsive in the event you wanted to show someone the features or have a very small laptop monitor or a large tablet.
  • The text area has a clear button that will delete everything in the text field. Clicking that button opens a popup asking to confirm the deletion. The popup confirmation is in case you clicked the clear button by accident. The text area also has a copy button to copy the contents into your clipboard. You can then paste the text into another program.
  • All buttons have a change in color when you hover over them to know that you are "over the target", so to speak. They also turn orange when you click them.
  • All words are designed to add a space before the word. Conversely, all characters on the keyboard do not add a space. So if you will be typing out a word, use the Spacebar key on the virtual keyboard before typing the word.

Alphabetical words:

  • If you hover over the buttons for each letter of the alphabet, you'll see between 20 to 100+ words. I added the most commonly used words that were 4 letters or greater, though for a few letters the cutoff is 3 letters.
  • Ideally, you want long words that are most often used by the user. The list shouldn’t be so long that you lose time searching for a word that is not in there because you can’t remember a list of 100 words per letter. Shorter is probably better.
  • Depending on the number of words you upload or the size of your monitor, you may not always see the text entered in the text box because the mega menu will block part of the text field. Don’t worry, if you click a word and can’t see the text box - it will be added.

Adding your own words

If you want to add your own proper nouns or words for the alphabet links, you HAVE to download the app from my GitHub repo. As a matter of fact, I will be removing this tool from my website when I get a developer job. So if you like the tool, you have to download it!

  1. Make sure your words are all lowercase and sorted alphabetically.
  2. You can separate each word with either a space or a comma followed by a space.
  3. Copy all the words into your clipboard. Then go into the root folder and open the file called text-alpha.txt. Use notepad on Windows to open the file or TextEdit if on macOS.
  4. That file will be completely empty. Paste in your words and save the file to the same location.
  5. You should now see your list of words. If you do not then hit the Refresh button, or close the writer-assist.html file and relaunch for the changes to show.
  6. If you prefer the original default list then delete everything you added to text-alpha.txt. Save and close the file.
  7. You can also do a combination. If you like most of my words, you can use the default list as a starting point. Open text-default.txt to read the notes and get a copy of the default words. Copy the default list into text-alpha.txt. Add additional words and remove those you don't want. Then save text-alpha for the modified list.

Proper Nouns and Phrases:

Click the Proper Names button at the top to open that section. Click it a second time to close the section. Click the buttons to add that word or phrase to the text area.

Adding your own Proper Nouns and Phrases

  1. Arrange your words in the order you would like them to appear.
  2. You MUST separate each word with a comma followed by a space. If you have a phrase that ends with a comma, then you need two commas (e.g. "Sincerely,," will output as "Sincerely,").
  3. Copy all your phrases into your clipboard. Then go into the root folder and open the file called text-proper.txt. Use notepad on Windows to open the file or TextEdit if on macOS.
  4. That file will be completely empty. Paste in your phrases and save the file to the same location.
  5. You should now see your list of phrases. If you do not then hit the Refresh button, or close the writer-assist.html file and relaunch for the changes to show.
  6. If you prefer the original default list then delete everything you added to text-proper.txt. Save and close the file.
  7. You can also do a combination. If you like most of my phrases, you can use the default list as a starting point. Open text-default.txt to read the notes and get a copy of the default phrases. Copy the default list into text-proper.txt. Add additional phrases and remove those you don't want. Then save text-proper for the modified list.

Virtual Keyboard and main text area:

Use the keyboard for words not in the two sections above or for numbers and symbols. The keys have hover and click changes like the buttons above. And pay attention to the functionality of the "special" keys: Backspace, Delete, Tab, Caps, Enter, Shift, and Spacebar.

  • I omitted the Insert key as I find it an annoyance rather than a helpful key. I also moved the Delete key to the main keyboard section.
  • Place your cursor anywhere in the text field to add any of the characters or the keys like Delete, Enter, or the arrow keys. You can also insert works or phrases at the location of your cursor.
  • I have the Ctrl and Alt keys disabled as they are not needed for basic email or document writing. I also hid the buttons for arrow up, page up, arrow down, and page down as I don’t think they are needed, though I may add them in later.
  • The Home, End, right and left arrow keys are functional. However, the Home key takes you to the beginning of the text area, as opposed to the beginning of each line. The End key takes you to the end of the text area instead of the end of each line.
  • I added the nav keys and number pad to the left of the main keyboard section. The nav keys are close together for ease of use, and the number pad is to make entering multiple numbers easier (phone #'s, addresses, etc.)
  • Both the Caps key and Shift keys will stay highlighted until you click them a second time. All words and letters will be capitalized while the Caps key is on.
  • Hitting the Shift key toggles the 8 double-character keys that are below the top row on a standard keyboard. Or specifically, square and curly brackets, back slash and pipe, colon and semi-colonm, single and double quotes, comma and less than sign, period and greater than sign, and forward slash and question mark.
  • As you can see, I decided to create a new row for the double-character keys that are above the top row of letters.
  • All words or letters that are the first in the text area, or are the first after you hit enter, or that follow a period, exclamation, or question mark will automatically be capitalized. Use the Caps key for all other capital letters.
  • Tip: I have a few free browser extensions added to my Chrome and Brave web browsers. One that may help you is the spelling and grammar checker called Grammarly. I highly recommend that you add that extension to your browser. It will put a red underline under spelling and grammar errors in the text box. Just click the suggested replacement to make the change. Or click 'Dismiss' to remove the red highlighting. You would do that for acronyms, technical jargon, slang, etc.

Downloading the app to desktop or laptop

This app/tool will go away at some point. So download it or lose it! All you need to do is download the files and open writer-assist.html to start using the app.

The keyboard and words are for American English keyboard. I hope to have other language options in the future. If you would like to download the files and start using the app, then follow these steps:

  1. Go to my GitHub repositoy called WriterAssist.
  2. Click the Green code button and select Download ZIP.
  3. screenshot of the download button
  4. Go to your downloads folder, select the zip file, right-click and choose Extract All...
  5. right-click view to extracl all
  6. Click the Extract button on the popup that appears. This will create a folder in your downloads folder with a name like WriterAssist-master
  7. extract popup options
  8. Go into that folder and copy or move the folder inside of that (same name) to a folder such as Documents. Then delete both the folder and zip file from your downloads folder since you don't need them anymore
  9. the copy to dialog popup
  10. Finally, go into the folder you just copied or moved and launch the file named writer-assist.html. You can also delete all of the PNG files since they are just used in this README file.
  11. file to open

While you are in that folder, notice the files text-alpha.txt, text-default.txt, and text-proper.txt. It is those files you use to add your own words and phrases mentioned above.