https://github.com/recordevolution/widget-image
Displays a static image in the Record Evolution Dashboard
https://github.com/recordevolution/widget-image
dashboard-widget
Last synced: 8 days ago
JSON representation
Displays a static image in the Record Evolution Dashboard
- Host: GitHub
- URL: https://github.com/recordevolution/widget-image
- Owner: RecordEvolution
- License: mit
- Created: 2023-11-09T23:13:53.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2026-01-10T22:03:13.000Z (about 1 month ago)
- Last Synced: 2026-01-11T06:38:46.684Z (about 1 month ago)
- Topics: dashboard-widget
- Language: TypeScript
- Size: 1.3 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# \
A Lit 3.x web component for displaying images with single/multi-image modes, time-based filtering, and responsive grid layouts. Part of the IronFlock widget ecosystem.
## Installation
```bash
npm i @record-evolution/widget-image
```
## Usage
```html
import '@record-evolution/widget-image/dist/widget-image.js'
```
> **Note:** The version number in the tag name must match the installed package version.
## Configuration
Configure the widget by setting the `inputData` property:
```javascript
const widget = document.querySelector('widget-image-1.1.15')
widget.inputData = {
title: 'My Image',
subTitle: 'Optional subtitle',
imageUrl: 'https://example.com/image.jpg',
stretchToFit: false
}
```
### Single Image Mode
Display a single image with optional title and subtitle.
| Option | Type | Description |
| -------------- | ------- | --------------------------------------------- |
| `title` | string | Widget title |
| `subTitle` | string | Widget subtitle |
| `imageUrl` | string | URL of the image to display |
| `useUpload` | boolean | Use uploaded image instead of URL |
| `stretchToFit` | boolean | Stretch image to fill container (vs. contain) |
### Multi Image Mode
Display multiple images in an optimized grid layout with automatic sizing.
```javascript
widget.inputData = {
multiImage: true,
gap: 12,
labelFontSize: 14,
data: [
{ imageUrl: 'https://example.com/img1.jpg', label: 'Image 1', timestamp: 1737417600000 },
{ imageUrl: 'https://example.com/img2.jpg', label: 'Image 2', timestamp: 1737504000000 }
]
}
```
| Option | Type | Description |
| --------------- | ------- | ---------------------------------- |
| `multiImage` | boolean | Enable multi-image grid mode |
| `gap` | number | Gap between images in pixels |
| `labelFontSize` | number | Font size for image labels |
| `data` | array | Array of image objects (see below) |
#### Data Item Properties
| Property | Type | Description |
| ----------- | ------ | -------------------------------------- |
| `imageUrl` | string | Image URL |
| `label` | string | Optional label text |
| `timestamp` | number | Unix timestamp (ms) for time filtering |
## Time-Based Filtering
Filter images by time range (useful for IoT dashboards):
```javascript
widget.timeRange = {
start: 1737417600000, // Start timestamp (Unix ms)
end: 1737590400000 // End timestamp (Unix ms)
}
```
Images without timestamps are always shown. Images with timestamps outside the range are hidden.
## Theming
The widget supports theming via CSS custom properties or a theme object:
```javascript
widget.theme = {
theme_name: 'dark',
theme_object: {
backgroundColor: '#1a1a1a',
textStyle: { color: '#ffffff' }
}
}
```
### CSS Custom Properties
```css
widget-image-1.1.15 {
--re-text-color: #333;
--re-tile-background-color: #fff;
}
```
## Development
```bash
npm start # Dev server at http://localhost:8000/demo/
npm run build # Production build to dist/
npm run types # Regenerate TypeScript types from schema
npm run release # Build, bump version, push, and tag
```
## License
MIT