SVG Object + camera overlay (and vice versa) with Perpective Transform and DOM events
-
Clone this repository
-
Move build/ARcad.web.js into your application path
-
Add script to header
<html>
<head>
<script src="/ARcad.web.js"></script>
</head>
...- See examples directory for more info
Open examples/basic/index.html in your web browser
- Navigate to
examples/electron - Run
npm installoryarn install - Start the sample application via
npm run startoryarn start
- Navigate to
examples/arduino - Upload
examples/arduino/serialReader/serialReader.inoto your arduino - Run
npm installoryarn installfromexamples/arduino - Run
npm run startoryarn startfromexamples/arduino
-
run
npm installoryarn installfrom root directory -
If you want to use the bundled version, run the following:
npm run buildoryarn buildfrom root directory
-
Ensure your svg appears correctly when opened via a webbrowser (i.e right click -> open with Chrome etc.)
-
Ensure the svg contains a viewBox attribute
<svg viewBox="0 0 67 67" ...>html in the root node. If the viewBox attribute is not present, simply add it manually (<svg viewBox="0 0 WIDTH HEIGHT" ...>). Play with WIDTH and HEIGHT until it looks proper in the browser (if too large: the svg will appear padded on the right/bottom sides; if too small: the svg will be cropped) -
Ensure that your fluxels have an attribute called "data-channels" and an "id" attribute. The id attribute must be unique for every fluxel! "data-channels" defines how the fluxels are connected, and is used as a selector. The id is used for restoring the state of the svg upon reload.
- Clean up the svg to have as little junk as possible from the text editor. Ideally the structure should be:
<svg>
<g>
<path data-channels="0" id="fluxel00" "d="...">
<path data-channels="1" id="fluxel01" "d="...">
...
</g>
</svg>- Send me the file, and I'll try my best to fix it for you (lucas@the-brainery.com)
- Send me an email (lucas@the-brainery.com or lucas.zeer@gmail.com) if you need additional install help, and/or to schedule a video chat on appear.in
Inspired by Christian Fobel's DMF Device UI plugin, and three.planetransform.
See: https://github.com/sci-bots/three.planetransform See: https://github.com/sci-bots/dmf-device-ui
The core library used was built by Jenny Louthan , with additional inspiration from the demos. https://github.com/jlouthan/perspective-transform