Storing image as an attribute on a custom device and displaying in dashboard

🚧 Developers
5

The dashboard will not load an attribute that is over 1024 characters (which this almost certainly is). I faced a similar issue in developing my Nest integration, Google SDM API.

As a workaround, I split this into two attributes -- one, the rawImg, has the base64-encoded data, and the second, image, has the html code to render it

sendEvent(data.device, [name: 'rawImg', value: img])
sendEvent(data.device, [name: 'image', value: "<img src=/apps/api/${app.id}/img/${data.device.getDeviceNetworkId()}?access_token=${state.accessToken}&ts=${now()} />", isStateChange: true])

-- using a "mapping" in the App to provide the src url in the html, read the rawImg attribute, and return the data.

mappings {
    path("/img/:deviceId") {
        action: [
            GET: "getDashboardImg"
        ]
    }
}

def getDashboardImg() {
    def deviceId = params.deviceId
    def device = getChildDevice(deviceId)
    logDebug("Rendering image from raw data for device: ${device}")
    def img = device.currentValue('rawImg')
    render contentType: 'image/jpeg', data: img.decodeBase64(), status: 200
}

This works for local display, but there seems to be a size cap on the App API mapping response, that it doesn't render on a cloud dashboard.

1 Like