{"id":19772187,"url":"https://github.com/recordevolution/widget-image","last_synced_at":"2026-02-04T01:43:30.263Z","repository":{"id":207064375,"uuid":"716807853","full_name":"RecordEvolution/widget-image","owner":"RecordEvolution","description":"Displays a static image in the Record Evolution Dashboard","archived":false,"fork":false,"pushed_at":"2026-01-10T22:03:13.000Z","size":1359,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2026-01-11T06:38:46.684Z","etag":null,"topics":["dashboard-widget"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/RecordEvolution.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2023-11-09T23:13:53.000Z","updated_at":"2026-01-10T22:03:11.000Z","dependencies_parsed_at":"2025-04-30T17:41:54.779Z","dependency_job_id":"ac51c99a-18f2-4fb9-a109-f322fcd9699e","html_url":"https://github.com/RecordEvolution/widget-image","commit_stats":null,"previous_names":["recordevolution/widget-image"],"tags_count":24,"template":false,"template_full_name":null,"purl":"pkg:github/RecordEvolution/widget-image","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RecordEvolution%2Fwidget-image","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RecordEvolution%2Fwidget-image/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RecordEvolution%2Fwidget-image/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RecordEvolution%2Fwidget-image/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/RecordEvolution","download_url":"https://codeload.github.com/RecordEvolution/widget-image/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RecordEvolution%2Fwidget-image/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28647983,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-21T21:29:11.980Z","status":"ssl_error","status_checked_at":"2026-01-21T21:24:31.872Z","response_time":86,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["dashboard-widget"],"created_at":"2024-11-12T05:05:42.264Z","updated_at":"2026-01-22T00:17:56.496Z","avatar_url":"https://github.com/RecordEvolution.png","language":"TypeScript","readme":"# \\\u003cwidget-image\u003e\n\nA 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.\n\n![screenshot](thumbnail.png)\n\n## Installation\n\n```bash\nnpm i @record-evolution/widget-image\n```\n\n## Usage\n\n```html\n\u003cscript type=\"module\"\u003e\n    import '@record-evolution/widget-image/dist/widget-image.js'\n\u003c/script\u003e\n\n\u003cwidget-image-1.1.15\u003e\u003c/widget-image-1.1.15\u003e\n```\n\n\u003e **Note:** The version number in the tag name must match the installed package version.\n\n## Configuration\n\nConfigure the widget by setting the `inputData` property:\n\n```javascript\nconst widget = document.querySelector('widget-image-1.1.15')\nwidget.inputData = {\n    title: 'My Image',\n    subTitle: 'Optional subtitle',\n    imageUrl: 'https://example.com/image.jpg',\n    stretchToFit: false\n}\n```\n\n### Single Image Mode\n\nDisplay a single image with optional title and subtitle.\n\n| Option         | Type    | Description                                   |\n| -------------- | ------- | --------------------------------------------- |\n| `title`        | string  | Widget title                                  |\n| `subTitle`     | string  | Widget subtitle                               |\n| `imageUrl`     | string  | URL of the image to display                   |\n| `useUpload`    | boolean | Use uploaded image instead of URL             |\n| `stretchToFit` | boolean | Stretch image to fill container (vs. contain) |\n\n### Multi Image Mode\n\nDisplay multiple images in an optimized grid layout with automatic sizing.\n\n```javascript\nwidget.inputData = {\n    multiImage: true,\n    gap: 12,\n    labelFontSize: 14,\n    data: [\n        { imageUrl: 'https://example.com/img1.jpg', label: 'Image 1', timestamp: 1737417600000 },\n        { imageUrl: 'https://example.com/img2.jpg', label: 'Image 2', timestamp: 1737504000000 }\n    ]\n}\n```\n\n| Option          | Type    | Description                        |\n| --------------- | ------- | ---------------------------------- |\n| `multiImage`    | boolean | Enable multi-image grid mode       |\n| `gap`           | number  | Gap between images in pixels       |\n| `labelFontSize` | number  | Font size for image labels         |\n| `data`          | array   | Array of image objects (see below) |\n\n#### Data Item Properties\n\n| Property    | Type   | Description                            |\n| ----------- | ------ | -------------------------------------- |\n| `imageUrl`  | string | Image URL                              |\n| `label`     | string | Optional label text                    |\n| `timestamp` | number | Unix timestamp (ms) for time filtering |\n\n## Time-Based Filtering\n\nFilter images by time range (useful for IoT dashboards):\n\n```javascript\nwidget.timeRange = {\n    start: 1737417600000, // Start timestamp (Unix ms)\n    end: 1737590400000 // End timestamp (Unix ms)\n}\n```\n\nImages without timestamps are always shown. Images with timestamps outside the range are hidden.\n\n## Theming\n\nThe widget supports theming via CSS custom properties or a theme object:\n\n```javascript\nwidget.theme = {\n    theme_name: 'dark',\n    theme_object: {\n        backgroundColor: '#1a1a1a',\n        textStyle: { color: '#ffffff' }\n    }\n}\n```\n\n### CSS Custom Properties\n\n```css\nwidget-image-1.1.15 {\n    --re-text-color: #333;\n    --re-tile-background-color: #fff;\n}\n```\n\n## Development\n\n```bash\nnpm start       # Dev server at http://localhost:8000/demo/\nnpm run build   # Production build to dist/\nnpm run types   # Regenerate TypeScript types from schema\nnpm run release # Build, bump version, push, and tag\n```\n\n## License\n\nMIT\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frecordevolution%2Fwidget-image","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frecordevolution%2Fwidget-image","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frecordevolution%2Fwidget-image/lists"}