https://github.com/naugtur/aframe-livereload-image
https://github.com/naugtur/aframe-livereload-image
Last synced: 6 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/naugtur/aframe-livereload-image
- Owner: naugtur
- License: mit
- Created: 2017-09-29T09:28:26.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2017-10-01T17:07:31.000Z (about 8 years ago)
- Last Synced: 2025-02-15T07:32:00.616Z (8 months ago)
- Language: JavaScript
- Size: 62.5 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
## aframe-livereload-image
[](https://npmjs.org/package/aframe-livereload-image)
[](https://npmjs.org/package/aframe-livereload-image)
### Livereload for images used in A-Frame
> It's a development/design tool
Performs live reloading of a `src` attribute on an entity (makes most sense to use with a-sky)
Optimized for image files. Works with `file://` protocol in FireFox and detects changes by comparing file sizes.
What? Why file size? and why just file size?
1. None of the http headers are available via `file://` protocol so not a lot of other options
1. Most reasonable format for large files is `jpg` anyway and it will change the file size on content changes
1. Working on a file:// protocol I noticed this component detects when the image manipulation program starts writing the file and sees it as growing from 0 bytes up.
1. Yes, I will add checking headers in case you're running on http soon.
Built for [A-Frame](https://aframe.io).
### API
```html
```
| Property | Description | Default Value |
| -------- | ----------- | ------------- |
| src | path to image to load and watch | |
| freq | frequency of checking for the file, in miliseconds | 500 |
### Installation
#### Browser
Install and use by directly including the [browser files](dist):
```html
My A-Frame Scene
```
#### npm
Install via npm:
```bash
npm install aframe-livereload-image
```
Then require and use.
```js
require('aframe');
require('aframe-livereload-image');
```