❤
npm
Sign UpSign In

aframe-livereload-image

1.0.1 • Public • Published

aframe-livereload-image

Version License

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
  2. Most reasonable format for large files is jpg anyway and it will change the file size on content changes
  3. 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.
  4. 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-image

Then require and use.

require('aframe');
require('aframe-livereload-image');

Readme

Keywords

Package Sidebar

Install

npm i aframe-livereload-image

Repository

github.com/naugtur/aframe-livereload-image

Homepage

github.com/naugtur/aframe-livereload-image#readme

Weekly Downloads

2

Version

1.0.1

License

MIT

Last publish

Collaborators

  • naugtur
Try on RunKit
Report malware