aframe-livereload-image
v1.0.1
Published
live reloads an image set as src on a-sky
Maintainers
naugturReadme
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?
- None of the http headers are available via
file://protocol so not a lot of other options - Most reasonable format for large files is
jpganyway and it will change the file size on content changes - 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.
- Yes, I will add checking headers in case you're running on http soon.
Built for A-Frame.
API
<a-sky livereload="src: image.jpg"></a-sky>| 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:
<head>
<title>My A-Frame Scene</title>
<script src="https://aframe.io/releases/0.6.0/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-livereload-image/dist/aframe-livereload-image.min.js"></script>
</head>
<body>
<a-scene>
<a-sky livereload="src: skybackground.jpg"></a-entity>
</a-scene>
</body>npm
Install via npm:
npm install aframe-livereload-imageThen require and use.
require('aframe');
require('aframe-livereload-image');