Dictation Bar Component

Dictation Bar Component

This component is available in the libs/integrations/invox-bar folder of the SDK.

Dictation Bar is a high-level component designed to be integrated quickly and easily in your web application.

Getting started

1. Import resources

Import the resources in the <head> of your index.html:

  • invox.min.js — contains the API of Invox Dictation.
  • invox-bar-component.min.js — contains the Dictation Bar Component integration.
  • invox-bar-component.css — contains the styles of the Dictation Bar Component.
<!-- Invox Dictation SDK - API -->
<script type="text/javascript" src="libs/invox.min.js" charset="UTF-8"></script>

<!-- Invox Dictation SDK - Dictation Bar Component -->
<script type="text/javascript" src="libs/integrations/invox-bar/invox-bar-component.min.js" charset="UTF-8"></script>
<link rel="stylesheet" href="libs/integrations/invox-bar/invox-bar-component.css">

2. Initialize the component

  1. Create a container in the DOM with a unique identifier:
    <div id="invox-bar"></div>
  2. Create and show the component:
    const invoxbar = INVOXMDComponent_Bar.create("invox-bar");
invoxbar.show();

3. Login

The following code attempts connection to the Local Dictation Service first, then falls back to Remote:

const credentials = {
    user: "provided_username",
    password: "provided_password"
}

const connectToLocal = {
    host: "localhost",
    port: "8443",
    useDictationService: false
}

const connectToRemote = {
    host: "dev.invoxmedical.com",
    port: "8443",
    useDictationService: true
}

try {
    await invoxbar.login(credentials, connectToLocal);
    INVOX.LogInfo("Local Dictation Service connected successfully.");
} catch (error) {
    INVOX.LogWarn("Local Dictation Service not found. Trying to connect to Remote Dictation Service...");
    try {
        await invoxbar.login(credentials, connectToRemote);
        INVOX.LogInfo("Remote Dictation Service connected successfully.");
    } catch (error) {
        INVOX.LogError("Remote Dictation Service not found.");
    }
}

4. Logout

invoxbar.logout()
    .then((result) => console.log("Successful logout!"))
    .catch((e) => console.error(e));

Public methods

create

FunctionDescriptionParametersReturns
createCreates the element in the DOM. Not visible by default.Stringvoid
const invoxbar = new INVOXMDComponent_Bar.create("invox-bar");

show

FunctionDescriptionParametersReturns
showDisplays component in the user interface.—void
invoxbar.show();

hide

FunctionDescriptionParametersReturns
hideHides Dictation Bar Component to user.—void
invoxbar.hide();

remove

FunctionDescriptionParametersReturns
removeRemoves the element from the DOM.—void
invoxbar.remove();

login

FunctionDescriptionParametersReturns
loginConnect to Invox Dictation service.Object, ObjectPromise<void>

Parameters:

  • credentials: Object
    • user: String
    • password: String
  • connectionConfig: Object
    • host: String
    • port: String
    • useDictationService: Boolean — true for Remote, false for Local
invoxbar.login(credentials, connectionConfig)
    .then(() => console.log("Successful login!"))
    .catch((e) => console.error(e));

logout

FunctionDescriptionParametersReturns
logoutDisconnect from Invox Dictation service.—Promise<boolean>
invoxbar.logout()
    .then((result) => console.log("Successful logout!"))
    .catch((e) => console.error(e));

Customize design

At the beginning of invox-bar-component.css you can find the :root selector with CSS variables for easy customization:

VariableDescriptionDefault
--invox-bar-size__widthWidth100%
--invox-bar-size__heightHeight30px
--invox-bar-color__primaryPrimary color#52619f
--invox-bar-color__secondarySecondary color#6d7cba
--invox-bar-color__errorError color#ff9191
--invox-bar-color__microphoneMicrophone button colorred
--invox-bar-color__vumeter-bars--activeVUMeter active color#3adf3a
--invox-bar-font__colorFont colorwhite
--invox-bar-font__sizeFont size0.9rem

How to use

Dictation Bar Component elements

  1. Loading progress percentage — Displays the load percentage at login.
  2. Progress status — Displays messages about the status of the session initialization.
  3. Dictation button (Recognizer) — Start or stop voice recognition.
  4. Audio level indicator — Displays the audio level activity during the session.
  5. Status bar & Hypothesis viewer — Displays session status messages and recognized hypothesis during dictation.
  6. Dictionary button — Opens the Dictionary dialog.
  7. Templates button — Opens the Templates dialog.
  8. Transformations button — Opens the Transformations dialog.
  9. Menu button — Displays more features (Profile, Help, Support, About).
  10. Adaptation indicator — Status of the recognition model adaptation process.

How to dictate

Dictation Bar microphone tutorial

  1. Click the Dictation button to start recognizer.
  2. Dictate your medical report.
  3. Click again on the Dictation button to stop recognizer.

Reset component at runtime

For single-page applications (SPA) where you need to regenerate the Dictation Bar without reloading the page:

function resetComponent(credentials, connectionConfig) {
    // Step 1. Logout is absolutely necessary even if an error has occurred.
    invoxbar.logout()
        .catch((e) => console.error(e))
        .finally(() => {
            // Step 2. Remove from the DOM.
            invoxbar.remove();

            // Step 3. Create the dictation bar again.
            invoxbar = new INVOXMDComponent_Bar.create("invox-bar");

            // Step 4. Connect to Invox Dictation service again.
            invoxbar.login(credentials, connectionConfig)
                .then(() => console.log("Successful login!"))
                .catch((e) => console.error(e));
        })
}
Table of Contents