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 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/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)

NOTE: By default, the Web SDK collects analytics related to user print jobs. This is done to provide developer insights on how to improve user experience. If you would like to opt out of the collection of analytics, pass in 'false' as the second argument to your instantiation of BradySdk:

let bradySdk = new BradySdk(printerUpdatesCallback, false)

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 './bundle.js'

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 numCopies = document.getElementById('numCopies').value;
    if (numCopies && numCopies > 0) {
        bradySdk.setCopies(parseInt(numCopies));
    }

    const cutOptions = document.getElementById('cutOptions');
    const cutOption = cutOptions.value;
    if (cutOption === "EndOfJob") bradySdk.setCutOption(0);
    else if (cutOption === "EndOfLabel") bradySdk.setCutOption(1);
    else if (cutOption === "Never") bradySdk.setCutOption(2);

    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);
}