Setup:

The below steps can also be found in the README.md located in the "node_modules" directory after the package is installed from npmjs.com.

To install the brady-web-sdk package, navigate to your application's root in a command prompt and use the command:

npm i @bradycorporation/brady-web-sdk

Since the brady-web-sdk is not a Node.js module, importing the module requires users to map the import using the script type "importmap". Refer to this article for more details on these imports.

<!-- In the application's index.html/entry point, map the SDK using its installation 
path to a custom import name. This name is not required to be "brady-web-sdk". -->

<script type="importmap">
    { 
        "imports": {
            "brady-web-sdk": "./node_modules/@/bradycorporation/brady-web-sdk/dist/bundle.js"
        }                   
    }                     
</script>

To use the SDK, you may now use your import name in a JavaScript file like:

import BradySdk from 'brady-web-sdk'
let bradySdk = new BradySdk(printerUpdatesCallback)

Demo Example:

The code below shows how a customer can integrate the Web SDK with their own web page. Refer to the API page for additional details on each of the called API methods used in this example.

//view_model.js of the official Web SDK test app found at https://sdk.bradyid.com/WebSdkDemo.html
import BradySdk from 'brady-web-sdk'

let statusLabel = document.getElementById('statusLabel')
const bradySdk = new BradySdk(printerUpdatesCallback)

let imageToPrint

// THIS IS CODE TO DISCOVER AND CONNECT TO A PRINTER.
const bleScanButton = document.getElementById('startBleScanButton')
bleScanButton.addEventListener('click', async function(e) {
    const loader = document.querySelector(".spinner-displayer");
    loader.classList.add("loader");

    //STORE COOKIE FOR AUTOCONNECTION.
    const sessionId = localStorage.getItem("ownership_guid");
    const ownershipGuid = await bradySdk.showDiscoveredBleDevices(sessionId);
    if (bradySdk.isConnected && ownershipGuid != null && ownershipGuid != "") {
        localStorage.setItem("ownership_guid", ownershipGuid);
    }

    //DISPLAY CONNECTION STATUS.
    if (bradySdk.isConnected()) {
        statusLabel.innerText = "Successfully Connected!";
        statusLabel.style.color = "green";
    }
    else {
        statusLabel.innerText = "Failed to connect...";
        statusLabel.style.color = "red";
    }

    console.log("Cookie Saved - Session UUID: " + ownershipGuid);
    loader.classList.remove("loader");
    printerUpdatesCallback(null);
})

// NAVIGATES TO A NEW PAGE WITH THE SELECTED IMAGE FILLING THE PAGE.
const printBrowserButton = document.getElementById('printBrowserPageButton')
printBrowserButton.addEventListener('click', async function(e) {
    location.href = "https://sdk.bradyid.com/PrintPage.html"
})

// CODE TO FEED A LABEL
const feedButton = document.getElementById('feedButton')
feedButton.addEventListener('click', async function(e) {
    const loader = document.querySelector(".spinner-displayer");
    loader.classList.add("loader");

    const feedSuccessful = await bradySdk.feed()

    if(feedSuccessful) {
        statusLabel.innerText = "Feed Successful!";
        statusLabel.style.color = "green";
    }
    else {
        statusLabel.innerText = "Feed Failed...";
        statusLabel.style.color = "red";
    }

    loader.classList.remove("loader");
})

// CODE TO CUT A LABEL
const cutButton = document.getElementById('cutButton');
cutButton.addEventListener('click', async function(e) {
    const loader = document.querySelector(".spinner-displayer");
    loader.classList.add("loader");

    const feedSuccessful = await bradySdk.cut();

    if(feedSuccessful) {
        statusLabel.innerText = "Cut Successful!";
        statusLabel.style.color = "green";
    }
    else {
        statusLabel.innerText = "Cut Failed...";
        statusLabel.style.color = "red";
    }

    loader.classList.remove("loader");
})

//HANDLE THE PRINTER UPDATES
function printerUpdatesCallback(changedProperties) {
    statusLabel.style.color = "black"
    let detailsString = "";
    detailsString += "PrinterStatus:                         " + bradySdk.status + "\n";
    detailsString += "PrinterStatusMessage:                  " + bradySdk.message + "\n";
    detailsString += "PrinterStatusMessageTitle:             " + bradySdk.messageTitle + "\n";
    detailsString += "PrinterStatusRemedyExplanationMessage: " + bradySdk.messageRemedy + "\n";
    detailsString += "PrinterName:                           " + bradySdk.printerName + "\n";
    detailsString += "PrinterModel:                          " + bradySdk.printerModel + "\n";
    detailsString += "ConnectionType:                        " + "BLE" + "\n";
    detailsString += "BatteryLevelPercentage:                " + bradySdk.batteryLevelPercentage + "%" + "\n";
    detailsString += "Charging:                         " + bradySdk.isAcConnected + "\n";
    detailsString += "SupplyName:                            " + bradySdk.supplyName + "\n";
    detailsString += "SupplyRemainingPercentage:             " + bradySdk.supplyRemainingPercentage + "%" + "\n";
    detailsString += "SupplyDimensions:                      " + bradySdk.supplyDimensions + "\n";
    detailsString += "SupplyWidth:                           " + bradySdk.substrateWidth + " inches" + "\n";
    detailsString += "SupplyHeight:                          " + bradySdk.substrateHeight + " inches" + "\n";
    detailsString += "IsSupplyPreSized:                      " + bradySdk.mediaIsDieCut + "\n";
    statusLabel.innerText = detailsString

    if (changedProperties != null) {
        if (changedProperties.length != 0) {
            console.log("Changed Properties:");
            for(let property in changedProperties) {
                console.log("....." + changedProperties[property]);
            }
        }
    }

    if (!bradySdk.printerDiscovery.isConnected) {
        statusLabel.innerText = "Failed to connect...";
        statusLabel.style.color = "red";
    }
}

// CODE TO PRINT THE SELECTED IMAGE.
const printBitmapButton = document.getElementById('printBitmapButton')
printBitmapButton.addEventListener('click', async function(e) {
    const loader = document.querySelector(".spinner-displayer");
    loader.classList.add("loader");

    const printingStatus = await bradySdk.printBitmap(imageToPrint);
    if(printingStatus) {
        statusLabel.innerText = "Printed Succesfully!";
        statusLabel.style.color = "green";
    }
    else {
        statusLabel.innerText = "Failed to print...";
        statusLabel.style.color = "red";
    }

    loader.classList.remove("loader");
})

// DISCONNECT FROM PRINTER FUNCTIONALITY
const disconnectButton = document.getElementById('disconnectButton')
disconnectButton.addEventListener('click', async function(e) {
    const disconnectStatus = await bradySdk.disconnect()
    if (disconnectStatus) {
        statusLabel.innerText = "Disconnected Successfully!"
        statusLabel.style.color = "green"
    }
    else {
        statusLabel.innerText = "Disconnected Failed..."
        statusLabel.style.color = "red"
    }
})

//CODE TO SELECT AND DISPLAY IMAGE TO PRINT.
const input = document.querySelector("input")
const preview = document.querySelector(".preview")
input.addEventListener("change", updateImageDisplay)
function updateImageDisplay() {
    while (preview.firstChild) {
        preview.removeChild(preview.firstChild);
    }

    const curFiles = input.files;
    if (curFiles.length === 0) {
        const para = document.createElement("p");
        para.textContent = "No files currently selected for upload";
        preview.appendChild(para);
    } else {
        const list = document.createElement("ol");
        preview.appendChild(list);

        for (const file of curFiles) {
            const listItem = document.createElement("li");
            const para = document.createElement("p");
            if (validFileType(file)) {

                imageToPrint = document.createElement("img");
                imageToPrint.src = URL.createObjectURL(file);
                localStorage.setItem("imageToPrint", imageToPrint.src);

                //SHOWS THE IMAGE ON THE FRONT-END.
                listItem.appendChild(imageToPrint);

            } else {
                para.textContent = `File name ${file.name}: Not a valid file type. Update your selection.`
                listItem.appendChild(para);
            }

            list.appendChild(listItem);
        }
    }
}

const fileTypes = [
  "image/apng",
  "image/bmp",
  "image/gif",
  "image/jpeg",
  "image/pjpeg",
  "image/png",
  "image/svg+xml",
  "image/tiff",
  "image/webp",
  "image/x-icon",
];

function validFileType(file) {
    return fileTypes.includes(file.type);
}