Photo camera input
A simple form to take web camera images or upload photos. The taken picture is stored in a configurable format converted to Base64 data as the target entity’s server-side attribute or telemetry value.
Who it’s for
Field technicians and inspectors who need to attach a picture to a device from the dashboard — proof an installation was completed, a photo of a damaged unit, a meter reading captured by camera. The photo has to end up on the entity, not in a separate system somebody has to cross-reference.
What it does
The Photo camera input widget takes a picture from the device’s camera or accepts an uploaded file, and stores it on the entity as a base64 value. Images are captured at up to 640 by 480 by default, encoded as PNG, and saved to the platform’s image gallery as well as onto the entity.
- Capture or upload — a webcam or phone camera on the spot, or an existing file where the photo was taken earlier.
- The image lands on the entity, as a server attribute or a telemetry value, so it travels with the device rather than sitting in a separate store.
- Images can be saved to the platform’s image gallery, which is what makes them reusable elsewhere on dashboards.
- Format, quality and maximum dimensions are all configurable, which matters because a base64 image is stored inline.
- A public gallery link can be produced for images that must be reachable without a login.
- The Photo camera input widget stores one image per configured key: a gallery of several photos per device needs several keys, or a different approach entirely.
How to set up
Data keys
The Photo camera input widget takes the key it writes from its datasource configuration.
| Attribute | Scope | Operation | Description |
|---|---|---|---|
| Configured key | Server | Write | The captured image is written as a base64 string. A telemetry key can be used instead, which keeps a history of captures rather than only the latest. |
Image
| Setting | Default | Effect |
|---|---|---|
| Image format | PNG | JPEG, PNG or WEBP |
| Image quality | 0.92 | Compression level for the lossy formats; ignored for PNG |
| Maximum image width | 640 | Captures are scaled down to fit |
| Maximum image height | 480 | Captures are scaled down to fit |
| Save image | On | Also stores the capture in the platform’s image gallery |
| Public gallery link | Off | Makes the gallery image reachable without authorization |
Switch the format to JPEG before deploying this anywhere photos are taken routinely. A PNG photograph is several times the size of the equivalent JPEG, and the value is stored inline on the entity rather than as a file reference.
How to customize
- To keep stored images small — set Image format to
JPEGand tune the Image quality, which has far more effect than the dimensions do. - To capture more detail — raise the Maximum image width and height, accepting the size cost.
- To keep every capture rather than only the latest — write to a telemetry key instead of an attribute.
- To reuse the photos elsewhere — leave Save image on so captures reach the image gallery.
- To share a photo outside the platform — turn on the public gallery link, remembering it makes the image readable by anyone with the URL.
- To caption the form — set the Widget title.
Tips
- Choose JPEG and a quality around 0.8 for anything photographic. PNG is lossless and correct for screenshots and diagrams, and dramatically wasteful for a photo of a meter — and the difference is multiplied by every device in the fleet.
- Think before turning on the public gallery link. It removes the authorization check on that image, which is a reasonable trade for a product photo and the wrong one for a picture of a customer’s site.
Share Your Widget with the Community
Built a custom widget? Export it as a JSON from ThingsBoard and publish it to the IoT Hub through a simple 4-step wizard (Upload, Listing, Readme, Review & Submit). Share it with thousands of ThingsBoard developers worldwide and get featured in the catalog.