Skip to content

Commit 3204ee3

Browse files
authored
Merge pull request #37 from AR-js-org/feat/location-based-templates
Location based templates & docs
2 parents cca6616 + ad1b547 commit 3204ee3

19 files changed

+372
-98
lines changed

README.md

Lines changed: 14 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -16,15 +16,15 @@ The following static methods are available for the frontend side:
1616

1717
- [x] Pattern Marker Generator (marker image + .patt file), given input image and custom parameters
1818

19-
- [ ] Creation and Output for `a-scene` element of Marker Based app, with default parameters
19+
- [x] Creation and Output for `a-scene` element of Marker Based app, with default parameters
2020

21-
- [ ] Creation and Output for `a-scene` element of Location Based app, with default parameters
21+
- [x] Creation and Output for `a-scene` element of Location Based app, with default parameters
2222

2323
- [ ] Creation and Output for `a-scene` element of NFT Based app, with default parameters
2424

25-
- [ ] Creation and Output of `a-marker` element, with custom parameters (pattern, barcode markers)
25+
- [x] Creation and Output of `a-marker` element, with custom parameters (pattern, barcode markers)
2626

27-
- [ ] Creation and Output of `gps-entity-place` element, with custom parameters
27+
- [x] Creation and Output of `gps-entity-place` element, with custom parameters
2828

2929
- [ ] Creation and Output of `a-nft` element, with custom parameters
3030

@@ -54,21 +54,28 @@ Alternatively, you can use a CDN service like GitHack (replace `vX.Y.Z` with an
5454

5555
Modules are used to generate assets like marker and `.patt` files.
5656

57-
See [modules docs](docs/modules.md) for detailed documentation and examples.
57+
See [modules docs](docs/modules.md) for a detailed documentation and examples.
5858

5959
## Providers
6060

6161
Providers are used to gather together the project assets and serve them in different formats.
6262
A base `Provider` class can be found in `src/providers/Provider.js`, you can extend directly from it or use
6363
others this library provides.
6464

65-
See [providers docs](docs/providers.md) for detailed documentation and examples.
65+
See [providers docs](docs/providers.md) for a detailed documentation and examples.
6666

6767
## HTML generation
6868

6969
Modules also provide static functions to generate the content of `index.html` files for all kinds of AR.js applications.
7070

71-
See [templates docs](docs/templates.md) for detailed documentation and examples.
71+
See [templates docs](docs/templates.md) for a detailed documentation and examples.
72+
73+
## Package
74+
75+
This class is a helper for generating the application package for the user. It provides an easy interface for the whole
76+
process, wrapping all modules/providers.
77+
78+
See [package docs](docs/package.md) for a detailed documentation and examples.
7279

7380
## TODO
7481

docs/modules.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ This module can generate both barcode and pattern markers.
44

55
**MarkerModule.getBarcodeMarkerSVGDataURI(matrixTypeId, value)**
66

7-
This method is used to create a barcode image from a value.
7+
Use this method to create a barcode image from a value.
88
Accepts a matrix type (see exported `MATRIX_*` constants) and a value and returns a data URI string,
99
representing an SVG of the barcode marker.
1010

@@ -21,16 +21,16 @@ Supported matrix types (values start from 0):
2121

2222
**MarkerModule.getMarkerPattern(dataURI)**
2323

24-
This method is used to create a `.patt` file from an image.
24+
Use this method to create a `.patt` file from an image.
2525
Accepts an image as a data URI string and returns a string for the `.patt` file.
2626

2727
**MarkerModule.getFullMarkerImage(dataURI, ratio, size, color)**
2828

29-
This method is used to create the marker image with border from an image.
29+
Use this method to create the marker image with border from an image.
3030
Accepts an image as a data URI string, size, ratio and border color for the marker and returns
3131
a data URI string representing the final marker image.
3232

33-
**Example**
33+
### Example
3434

3535
```js
3636
const { MarkerModule, MATRIX_3X3_HAMMING_63 } = ARjsStudioBackend;

docs/package.md

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
## Package
2+
3+
**new Package(config)**
4+
5+
Accepts the following configuration:
6+
7+
```js
8+
new Package({
9+
arType: 'pattern', // see exported AR_* constants
10+
assetType: '3d', // see exported ASSET_* constants
11+
assetFile: yourAssetFile, // read details after this code block
12+
assetName: 'model.gltf', // the AR asset filename, including the file extension
13+
assetParam: {
14+
isValid: true, // whether the scale/size parameters are correct or not (if you don't know what this is, set to true)
15+
scale: 1.0, // scale of the asset
16+
size: { // sizes of the asset, unused
17+
width: 1.0,
18+
height: 1.0,
19+
depth: 1.0
20+
},
21+
locations: [
22+
{
23+
latitude: 12.345678, // required for location based AR
24+
longitude: 12.345678 // required for location based AR
25+
}
26+
]
27+
},
28+
markerPatt: '...', // the content of the generated .patt file, as a string (required for pattern/location based AR)
29+
matrixType: '...', // see exported MATRIX_* constants (required for barcode based AR)
30+
markerValue: 7, // barcode value (required for barcode based AR)
31+
});
32+
```
33+
34+
The `assetFile` parameter must be:
35+
- a base64 encoded string (use `FileReader.readAsDataURL()` and strip the initial `data:*/*;base64,` string) for 3d/image assets
36+
- a `Blob` for audio/video assets when using Zip provider
37+
- an `ArrayBuffer` for audio/video when using GitHub provider
38+
39+
**serve(config)**
40+
41+
Deploys the package, based on the chosen provider. Accepts the following configuration:
42+
43+
```js
44+
package.serve({
45+
packageType: 'zip', // see exported PACKAGE_* constants
46+
config: {...} // see either serveFiles() documentation for your chosen provider
47+
});
48+
```
49+
50+
### Example
51+
52+
```js
53+
const {
54+
AR_PATTERN,
55+
ASSET_3D,
56+
PACKAGE_GITHUB,
57+
PACKAGE_ZIP,
58+
MarkerModule
59+
} = ARjsStudioBackend;
60+
61+
// helper function -- promisify file reading
62+
const reader = new FileReader();
63+
const waitRead = () => {
64+
return new Promise(resolve => {
65+
reader.addEventListener('load', () => {
66+
resolve(reader.result);
67+
});
68+
})
69+
};
70+
71+
// read marker image
72+
const markerFile = document.querySelector('#marker-image').files[0];
73+
reader.readAsDataURL(markerFile);
74+
const originalMarker = await waitRead();
75+
76+
// generate .patt file
77+
const textPatt = await MarkerModule.getMarkerPattern(originalMarker);
78+
79+
// read asset file
80+
const assetFile = document.querySelector('#asset-file-selector').files[0];
81+
reader.readAsDataURL(assetFile);
82+
const base64Asset = await waitRead();
83+
84+
// create the package
85+
const package = new Package({
86+
arType: AR_PATTERN,
87+
assetType: ASSET_3D,
88+
assetFile: base64Asset,
89+
assetName: file.name,
90+
assetParam: {
91+
isValid: true,
92+
scale: 1.0
93+
},
94+
markerPatt: textPatt
95+
});
96+
97+
// deploy to github...
98+
const pagesURL = await package.serve({
99+
packageType: PACKAGE_GITHUB,
100+
token: 'user github token',
101+
repo: 'arjs-awesome-repo-84265'
102+
});
103+
console.log(`navigate to ${pagesURL} to see your project`);
104+
105+
// ...or generate a zip file (or both!)
106+
const zipFile = await package.serve({
107+
packageType: PACKAGE_ZIP,
108+
compress: 9
109+
});
110+
// trigger download
111+
window.location = `data:application/zip;base64,${zipFile}`;
112+
```

docs/providers.md

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -24,12 +24,12 @@ provider.serveFiles({
2424
});
2525
```
2626

27-
**Example**
27+
### Example
2828

2929
First, create a Personal Access Token from [GitHub Developer Settings](https://github.com/settings/tokens)
3030
with scope `repo:public_repo`.
3131

32-
In production you'll need to implement GitHub's OAuth Web Application flow ([see here](https://developer.github.com/apps/building-oauth-apps/authorizing-oauth-apps/#web-application-flow))
32+
In production, you'll need to implement GitHub's OAuth Web Application flow ([see here](https://developer.github.com/apps/building-oauth-apps/authorizing-oauth-apps/#web-application-flow))
3333
to obtain a token from your users.
3434

3535
Then use it to serve the project:
@@ -44,10 +44,10 @@ const pagesUrl = await github.serveFiles({
4444
token: 'YOUR-TOKEN',
4545
message: 'my awesome AR experience'
4646
});
47-
const branchName = github.branch; // store this
47+
const repoName = github.repo; // store this
4848
```
4949

50-
The provider will use the PAT to create repo, branch, set up Pages, commit all the files and trigger
50+
The provider will use the PAT to create the repository, branch, set up Pages, commit all the files and trigger
5151
a Pages build.
5252

5353
## Zip file
@@ -73,7 +73,7 @@ provider.serveFiles({
7373
});
7474
```
7575

76-
**Example**
76+
### Example
7777

7878
```js
7979
const image = 'base64 encoded image';
@@ -87,5 +87,5 @@ zip.addFile('readme.txt', 'Hello world!');
8787
zip.addFile('images/img.jpg', image, ENC_BASE64);
8888
const base64 = await zip.serveFiles({ compress: 9 });
8989
// trigger download
90-
window.location = `data:application/zip;base64,${base64}`
90+
window.location = `data:application/zip;base64,${base64}`;
9191
```

docs/templates.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
Generate the `index.html` contents for AR.js applications using marker pattern.
66
Accepts an asset type (see exported `ASSET_*` constants) and relative paths for `.patt` and asset files.
77

8-
**Example**
8+
### Example
99

1010
```js
1111
const { MarkerModule, ASSET_AUDIO } = ARjsStudioBackend;
@@ -22,7 +22,7 @@ Generate the `index.html` contents for AR.js applications using marker barcode.
2222
Accepts a matrix type (see exported `MATRIX_*` constants), the barcode value represented by the marker and
2323
asset file.
2424

25-
**Example**
25+
### Example
2626

2727
```js
2828
const { MarkerModule, MATRIX_3X3_HAMMING_63 } = ARjsStudioBackend;

src/index.js

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,20 @@
11
import 'regenerator-runtime/runtime';
22
import { LocationModule } from './modules/location';
3+
import { MarkerModule } from './modules/marker';
4+
import { NFTModule } from './modules/nft';
35
import {
46
Package,
7+
ASSET_3D,
8+
ASSET_IMAGE,
9+
ASSET_AUDIO,
10+
ASSET_VIDEO,
511
AR_BARCODE,
612
AR_PATTERN,
713
AR_LOCATION,
814
AR_NTF,
15+
PACKAGE_GITHUB,
16+
PACKAGE_ZIP,
917
} from './modules/package/Package';
10-
import {
11-
MarkerModule,
12-
ASSET_3D,
13-
ASSET_IMAGE,
14-
ASSET_AUDIO,
15-
ASSET_VIDEO,
16-
} from './modules/marker';
17-
import { NFTModule } from './modules/nft';
1818
import {
1919
MATRIX_3X3_HAMMING_63,
2020
MATRIX_3X3_PARITY_65,
@@ -56,6 +56,8 @@ export {
5656
AR_PATTERN,
5757
AR_LOCATION,
5858
AR_NTF,
59+
PACKAGE_GITHUB,
60+
PACKAGE_ZIP,
5961
Package,
6062
NFTModule,
6163
ENC_BASE64,

src/modules/location/index.js

Lines changed: 21 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,27 @@
1+
import {
2+
ASSET_3D,
3+
ASSET_IMAGE,
4+
ASSET_AUDIO,
5+
ASSET_VIDEO,
6+
} from '../package/Package';
7+
18
import location3dTemplate from './templates/location.3d.handlebars';
9+
import locationImageTemplate from './templates/location.image.handlebars';
10+
import locationAudioTemplate from './templates/location.audio.handlebars';
11+
import locationVideoTemplate from './templates/location.video.handlebars';
12+
13+
const TEMPLATES = {
14+
[ASSET_3D]: location3dTemplate,
15+
[ASSET_IMAGE]: locationImageTemplate,
16+
[ASSET_AUDIO]: locationAudioTemplate,
17+
[ASSET_VIDEO]: locationVideoTemplate,
18+
};
219

320
export class LocationModule {
4-
static generateLocation3dHtml(longitude, latitude, assetSrc) {
5-
return location3dTemplate({
6-
longitude,
7-
latitude,
8-
assetSrc,
21+
static generateHtml(assetType, assetParam, assetPath) {
22+
return TEMPLATES[assetType]({
23+
assetParam,
24+
assetPath,
925
});
1026
}
1127
}
Lines changed: 24 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,39 @@
11
<!doctype html>
22
<html>
33
<head>
4-
<meta charset="utf-8">
5-
<meta http-equiv="'X-UA-Compatible' content='IE=edge'">
6-
<script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>
7-
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.js"></script>
4+
<meta charset="utf-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
87
<script src="https://unpkg.com/[email protected]/dist/aframe-look-at-component.min.js"></script>
8+
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.js"></script>
9+
<script src="https://raw.githack.com/donmccurdy/aframe-extras/master/dist/aframe-extras.loaders.min.js"></script>
910
</head>
1011

1112
<body style="margin: 0; overflow: hidden;">
1213
<a-scene
13-
loading-screen="enabled: false;"
1414
renderer="logarithmicDepthBuffer: true;"
15-
vr-mode-ui="enabled: false"
16-
arjs="sourceType: webcam; debugUIEnabled: false;"
1715
embedded
16+
loading-screen="enabled: false;"
17+
arjs="sourceType: webcam; debugUIEnabled: false;"
1818
>
19-
<a-entity
20-
gltf-model="{{assetSrc}}"
21-
look-at="[gps-camera]"
22-
gps-entity-place="longitude: {{longitude}}; latitude: {{latitude}};"
23-
animation-mixer
24-
></a-entity>
19+
<a-assets>
20+
<a-asset-item
21+
id="animated-asset"
22+
src="{{assetPath}}"
23+
></a-asset-item>
24+
</a-assets>
25+
26+
{{#each assetParam.locations}}
27+
<a-entity
28+
look-at="[gps-camera]"
29+
animation-mixer="loop: repeat"
30+
gltf-model="#animated-asset"
31+
scale="{{../assetParam.scale}} {{../assetParam.scale}} {{../assetParam.scale}}"
32+
gps-entity-place="latitude: {{this.latitude}}; longitude: {{this.longitude}};"
33+
></a-entity>
34+
{{/each}}
2535

26-
<a-camera
27-
gps-camera
28-
rotation-reader
29-
></a-camera>
36+
<a-camera gps-camera rotation-reader></a-camera>
3037
</a-scene>
3138
</body>
3239
</html>

0 commit comments

Comments
 (0)