Skip to content

Commit 156daa7

Browse files
bcopybcopy
committed
Add working aframe demo
1 parent ac0a720 commit 156daa7

12 files changed

+584
-65
lines changed

‎demo-aframe/aframe-demo.js

+86
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
// Wait for A-Frame to be ready
2+
AFRAME.registerComponent('homie-light-switch', {
3+
init: function () {
4+
const { HomieDevice, HomieNode, HomieProperty } = HomieLit;
5+
6+
// Create Homie device for the light switch
7+
this.device = new HomieDevice('light-switch', 'Light Switch');
8+
const node = new HomieNode('switch', 'Switch', 'switch');
9+
this.device.addNode(node);
10+
this.stateProperty = new HomieProperty('state', 'State', 'boolean');
11+
node.addProperty(this.stateProperty);
12+
13+
// Create switch geometry
14+
const switchEl = document.createElement('a-box');
15+
switchEl.setAttribute('color', '#4CC3D9');
16+
switchEl.setAttribute('depth', '0.1');
17+
switchEl.setAttribute('height', '0.2');
18+
switchEl.setAttribute('width', '0.1');
19+
this.el.appendChild(switchEl);
20+
21+
// Add interactivity
22+
this.el.addEventListener('click', () => this.toggleSwitch());
23+
24+
// Initialize switch state
25+
this.switchState = false;
26+
this.updateSwitchVisual();
27+
},
28+
29+
toggleSwitch: function () {
30+
this.switchState = !this.switchState;
31+
this.stateProperty.setValue(this.switchState);
32+
this.updateSwitchVisual();
33+
},
34+
35+
updateSwitchVisual: function () {
36+
const switchEl = this.el.querySelector('a-box');
37+
switchEl.setAttribute('color', `${this.switchState ? '#4CC3D9' : '#4C03D9'}`);
38+
}
39+
});
40+
41+
AFRAME.registerComponent('homie-light-bulb', {
42+
init: function () {
43+
const { HomieDevice, HomieNode, HomieProperty } = HomieLit;
44+
45+
// Create Homie device for the light bulb
46+
this.device = new HomieDevice('light-bulb', 'Light Bulb');
47+
const node = new HomieNode('bulb', 'Bulb', 'light');
48+
this.device.addNode(node);
49+
this.stateProperty = new HomieProperty('state', 'State', 'boolean');
50+
node.addProperty(this.stateProperty);
51+
52+
// Create bulb geometry
53+
const bulbEl = document.createElement('a-sphere');
54+
bulbEl.setAttribute('radius', '0.1');
55+
bulbEl.setAttribute('color', '#FFF');
56+
this.el.appendChild(bulbEl);
57+
58+
// Listen for property changes
59+
// this.stateProperty.on('value', (value) => this.updateBulbState(value));
60+
61+
// Initialize bulb state
62+
this.updateBulbState(false);
63+
},
64+
65+
updateBulbState: function (isOn) {
66+
const bulbEl = this.el.querySelector('a-sphere');
67+
bulbEl.setAttribute('material', {
68+
color: isOn ? '#FFFF00' : '#808080',
69+
emissive: isOn ? '#FFFF00' : '#000000',
70+
emissiveIntensity: isOn ? 0.5 : 0
71+
});
72+
73+
// Add or remove light component
74+
if (isOn) {
75+
this.el.setAttribute('light', {
76+
type: 'point',
77+
color: '#FFFF00',
78+
intensity: 0.5,
79+
distance: 5
80+
});
81+
} else {
82+
this.el.removeAttribute('light');
83+
}
84+
}
85+
});
86+

‎demo-aframe/index.html

+57
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Homie-Lit A-Frame Demo</title>
7+
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
8+
<script src="/homie-lit.js"></script>
9+
<script src="aframe-demo.js"></script>
10+
<style>
11+
body { margin: 0; padding: 0; }
12+
#info {
13+
position: absolute;
14+
top: 10px;
15+
width: 100%;
16+
text-align: center;
17+
color: white;
18+
background-color: rgba(0,0,0,0.5);
19+
padding: 10px;
20+
font-family: Arial, sans-serif;
21+
}
22+
</style>
23+
</head>
24+
<body>
25+
<div id="info">
26+
<h1>Homie-Lit A-Frame Demo</h1>
27+
<p>Click on the light switch to toggle the light bulb.</p>
28+
</div>
29+
<a-scene>
30+
<a-camera position="0 1 1" look-controls>
31+
<a-entity cursor="fuse: true; fuseTimeout: 500"
32+
position="0 0 -1"
33+
geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03"
34+
material="color: black; shader: flat; opacity: 0.7">
35+
</a-entity>
36+
37+
</a-camera>
38+
39+
<a-entity homie-light-switch position="-1 0.5 -3" rotation="0 30 0"></a-entity>
40+
<a-entity homie-light-bulb position="1 0.5 -3" rotation="0 -30 0"></a-entity>
41+
42+
<a-sky color="#ECECEC"></a-sky>
43+
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
44+
</a-scene>
45+
<script>
46+
// Connect devices after scene loaded
47+
document.querySelector('a-scene').addEventListener('loaded', function () {
48+
// const switchDevice = document.querySelector('[homie-light-switch]').components['homie-light-switch'].device;
49+
// const bulbDevice = document.querySelector('[homie-light-bulb]').components['homie-light-bulb'].device;
50+
51+
// // Connect switch state to bulb state
52+
// switchDevice.getNode('switch').getProperty('state').on('value', (value) => {
53+
// bulbDevice.getNode('bulb').getProperty('state').setValue(value);
54+
// });
55+
});
56+
</body>
57+
</html>

‎dist/homie-lit.js

+328-25
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/homie-lit.min.js

+26
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/homie-lit.js.LICENSE.txt ‎dist/homie-lit.min.js.LICENSE.txt

File renamed without changes.

‎dist/homie-lit.min.js.map

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/index.html

-1
This file was deleted.

‎package-lock.json

+22-6
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+11-8
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,11 @@
55
"main": "dist/homie-lit.js",
66
"types": "dist/index.d.ts",
77
"scripts": {
8-
"start": "webpack serve --mode development",
9-
"build": "webpack --mode production",
10-
"test": "jest"
8+
"start": "webpack serve --mode development --config webpack.lib.config.js",
9+
"build": "webpack --mode production --config webpack.lib.config.js",
10+
"build:dev": "webpack --mode development --config webpack.lib.config.js",
11+
"test": "jest",
12+
"demo:aframe": "npm run build:dev && webpack serve --mode development --config webpack.demo.config.js"
1113
},
1214
"keywords": [
1315
"homie",
@@ -21,13 +23,13 @@
2123
".": {
2224
"import": "./dist/homie-lit.esm.js",
2325
"require": "./dist/homie-lit.js",
24-
"browser": "./dist/homie-lit.js"
26+
"browser": "./dist/homie-lit.js"
2527
}
2628
},
2729
"author": "Brice Copy",
28-
"license": "ISC",
30+
"license": "MIT",
2931
"devDependencies": {
30-
"@types/aframe": "^1.2.2",
32+
"@types/aframe": "^1.2.7",
3133
"@types/jest": "^29.5.13",
3234
"@types/node": "^16.11.12",
3335
"jest": "^29.7.0",
@@ -36,10 +38,11 @@
3638
"typescript": "^4.5.4",
3739
"webpack": "^5.65.0",
3840
"webpack-cli": "^4.9.1",
39-
"webpack-dev-server": "^4.7.2"
41+
"webpack-dev-server": "^4.7.2",
42+
"webpack-merge": "^6.0.1"
4043
},
4144
"dependencies": {
42-
"aframe": "^1.3.0",
45+
"aframe": "^1.6.0",
4346
"lit": "^2.6.1"
4447
},
4548
"publishConfig": {

‎webpack.config.js

+12-25
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,16 @@
11
const path = require('path');
22

33
module.exports = {
4-
entry: './src/index.ts',
5-
module: {
6-
rules: [
7-
{
8-
test: /\.tsx?$/,
9-
use: 'ts-loader',
10-
exclude: /node_modules/,
11-
},
12-
],
13-
},
14-
resolve: {
15-
extensions: ['.tsx', '.ts', '.js'],
16-
},
17-
output: {
18-
filename: 'homie-lit.js',
19-
path: path.resolve(__dirname, 'dist'),
20-
library: 'HomieLit',
21-
libraryTarget: 'umd',
22-
globalObject: 'this',
23-
},
24-
devServer: {
25-
static: path.join(__dirname, 'dist'),
26-
compress: true,
27-
port: 9000,
28-
},
4+
module: {
5+
rules: [
6+
{
7+
test: /\.tsx?$/,
8+
use: 'ts-loader',
9+
exclude: /node_modules/,
10+
},
11+
],
12+
},
13+
resolve: {
14+
extensions: ['.tsx', '.ts', '.js'],
15+
},
2916
};

‎webpack.demo.config.js

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
const path = require('path');
2+
const { merge } = require('webpack-merge');
3+
const baseConfig = require('./webpack.config.js');
4+
5+
module.exports = merge(baseConfig, {
6+
mode: 'development',
7+
devServer: {
8+
static: [
9+
{
10+
directory: path.join(__dirname, 'demo-aframe'),
11+
publicPath: '/',
12+
},
13+
{
14+
directory: path.join(__dirname, 'dist'),
15+
publicPath: '/',
16+
},
17+
],
18+
compress: false,
19+
port: 9000,
20+
},
21+
});

‎webpack.lib.config.js

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
const path = require('path');
2+
const { merge } = require('webpack-merge');
3+
const baseConfig = require('./webpack.config.js');
4+
5+
module.exports = merge(baseConfig, {
6+
entry: './src/index.ts',
7+
output: {
8+
filename: 'homie-lit.js',
9+
path: path.resolve(__dirname, 'dist'),
10+
library: 'HomieLit',
11+
libraryTarget: 'umd',
12+
globalObject: 'this',
13+
},
14+
devServer: {
15+
static: path.join(__dirname, 'dist'),
16+
compress: true,
17+
port: 9000,
18+
},
19+
20+
});

0 commit comments

Comments
 (0)