Invox Dictation SDK Version:

Dictation Bar Component


Dictation Bar Component

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 Medical.
- ***invox-bar-component.min.js***: contains the Dictation Bar
  Component integration.
- ***invox-bar-component.css***: contains the styles of the
  Dictation Bar Component integration.

``` html
    <!-- INVOX Medical SDK - API -->
    <script type="text/javascript" src="libs/invox.min.js" charset="UTF-8"></script>

    <!-- INVOX Medical 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 = BarComponent.create("invox-bar");
    invoxbar.show();
    

3. Login

Connect to the INVOX Medical service by passing the credentials and connection parameters. The following code is implemented to attempt connection to the Local Dictation Service first. If no service is found locally, it then tries to connect to the Remote Dictation Service. This approach allows for automated integration with both services.

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

    const connectToLocal = {
        host: "localhost",    // Default host when "useDictationService" is false
        port: "8443",         // Default port
        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. Make sure that connection parameters are correct.");
        }
    }

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 = 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
const credentials = {
    user: "example",
    password: "example",
}
const connectionConfig = {
    host: "example.cloud.net",
    port: "8443",
    useDictationService: true
}

// Connect to INVOX Medical service
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

VariableDescriptionDefault
--invox-bar-size__widthWidth100%
-–invox-bar-size__heightHeight30px
-–invox-bar-size__paddingPadding2px
-–invox-bar-size__border-radiusGeneral border radius5px
-–invox-bar-size__inner-border-radiusBorder radius from some internal components3px
-–invox-bar-size__vumeter-widthVolume indicator width50px
-–invox-bar-color__primaryPrimary color#52619f
-–invox-bar-color__primary–hoverPrimary hover color#415491
-–invox-bar-color__secondarySecondary color#6d7cba
-–invox-bar-color__errorError color#ff9191
-–invox-bar-color__microphoneMicrophone button colorred
-–invox-bar-color__microphone–hoverMicrophone button hover color#e30000
-–invox-bar-color__microphone–disabledMicrophone button disabled color#ff6060
-–invox-bar-color__microphone–focusMicrophone button focus color#f3a2b4
-–invox-bar-color__vumeter-barsVolume indicator bars colorwhite
-–invox-bar-color__vumeter-bars–activeVolume indicator color when recognizing#3adf3a
-–invox-bar-font__colorFont colorwhite
-–invox-bar-font__familyFont familysans-serif, Arial, Verdana, “Trebuchet MS”
-–invox-bar-font__sizeFont size0.9rem
-–invox-bar-icons__sizeIcons size1rem
-–invox-bar-icons__colorIcons colorwhite
-–invox-bar-menu-font__colorMenu font color-–invox-bar-color__primary
-–invox-about-dialog__z-indexAbout dialog z-index700
-–invox-profile-dialog__z-indexProfile dialog z-index700
-–invox-dialogs-color__primaryDialogs primary color#52619f
-–invox-dialogs-color__primary–hoverDialogs primary hover color#415491
-–invox-dialogs-size__widthCommon dialog width400px
-–invox-dialogs-size__heightCommon dialog height400px
-–invox-dialogs-size__min-widthMinimum common dialog width300px
-–invox-dialogs-size__min-heightMinimum common dialog height400px
-–invox-dialogs-size__max-widthMaximum common dialog height100vw
-–invox-dialogs-size__max-heightMaximum common dialog height100vh
-–invox-dialogs-size__border-radiusCommon dialog border radius5px

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). Allows you to start or stop voice recognition.
  4. Audio level indicator. Displays the audio level activity during the session.
  5. Status bar & Hypthesis viewer. Displays messages about the status of the session and during dictation shows the recognized hypothesis.
  6. Dictionary button. Displays dictionary dialog to allow user to create, read, update and remove (CRUD) words.
  7. Templates button. Displays templates dialog to allow user to create, read, update and remove (CRUD) templates.
  8. Transformations button. Displays transformations dialog to allow user to create, read, update and remove (CRUD) transformations.
  9. Menu button. Displays more features.
  10. Profile button. Displays the user information.
  11. Help button. Redirect to user help guide.
  12. Support button. Redirect to INVOX Medical support center.
  13. About button. Displays information about INVOX Medical.
  14. Adaptation indicator. Displays the status of the recognition model adaptation process.
    • 14.a. Loading status. The adaptation process is in progress.
    • 14.b. Finished status. The adaptation process has finished successfully.

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 in the session.
    invoxbar.logout()
        .then((result) => console.log("Successful logout!"))
        .catch((e) => console.error(e))
        .finally(() => {

            // Step 2. When logout finishes we can 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 Medical service again.
            invoxbar.login(credentials, connectionConfig)
                .then(() => console.log("Successful login!"))
                .catch((e) => console.error(e));
        })
}