kai/light_maymays
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Init

Browse Source
This commit is contained in:
Kai Vogelgesang 2021-08-28 12:14:13 +02:00
commit 6402bd7efd
Signed by: kai
GPG Key ID: 0A95D3B6E62C0879
11 changed files with 8896 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
frontend/.eslintrc.json Normal file
View File

@ -0,0 +1,20 @@
{
"env": {
"browser": true,
"commonjs": true,
"es2021": true
},
"extends": [
"airbnb-base"
],
"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaVersion": 12
},
"plugins": [
"@typescript-eslint"
],
"rules": {
"indent": ["error", 4]
}
}

2
frontend/.gitignore vendored Normal file
View File

@ -0,0 +1,2 @@
dist
node_modules

52
frontend/index.html Normal file
View File

@ -0,0 +1,52 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="dist/main.css">
<title>Document</title>
</head>
<body>
<div class="preview">
<canvas id="threejs-preview"></canvas>
</div>
<div class="timeline">
<main>
<h1>DMX AYAYA</h1>
<p>
<label for="ch1">Channel 1 (pan)</label>
<input id="ch1" type="number" min="0" max="255" value="0" />
</p>
<p>
<label for="ch2">Channel 2 (tilt)</label>
<input id="ch2" type="number" min="0" max="255" value="0" />
</p>
<p>
<label for="ch3">Channel 3 (dimmer / strobe)</label>
<input id="ch3" type="number" min="0" max="255" value="0" />
</p>
<p>
<label for="rgb">Channel 4-6 (RGB)</label>
<input id="rgb" type="color" />
</p>
<p>
<label for="ch7">Channel 7 (W)</label>
<input id="ch7" type="number" min="0" max="255" value="0" />
</p>
<p>
<label for="ch8">Channel 8 (pan/tilt speed)</label>
<input id="ch8" type="number" min="0" max="255" value="0" />
</p>
<p>
<label for="ch9">Channel 9 (reset)</label>
<input id="ch9" type="number" min="0" max="255" value="0" />
</p>
</main>
</div>
<script src="./dist/main.js"></script>
</body>
</html>

8359
frontend/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

25
frontend/package.json Normal file
View File

@ -0,0 +1,25 @@
{
"devDependencies": {
"@types/stats.js": "^0.17.0",
"@types/three": "^0.131.0",
"@typescript-eslint/eslint-plugin": "^4.29.2",
"@typescript-eslint/parser": "^4.29.2",
"css-loader": "^6.2.0",
"css-minimizer-webpack-plugin": "^3.0.2",
"eslint": "^7.32.0",
"eslint-config-airbnb-base": "^14.2.1",
"eslint-plugin-import": "^2.24.0",
"mini-css-extract-plugin": "^2.2.0",
"style-loader": "^3.2.1",
"terser-webpack-plugin": "^5.1.4",
"ts-loader": "^9.2.5",
"typescript": "^4.3.5",
"webpack": "^5.50.0",
"webpack-cli": "^4.8.0"
},
"dependencies": {
"normalize.css": "^8.0.1",
"stats.js": "^0.17.0",
"three": "^0.131.3"
}
}

83
frontend/src/example.js Normal file
View File

@ -0,0 +1,83 @@
'use strict';
/* global THREE */
function main() {
const canvas = document.querySelector('#c');
const renderer = new THREE.WebGLRenderer({ canvas });
const fov = 75;
const aspect = 2; // the canvas default
const near = 0.1;
const far = 5;
const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
camera.position.z = 2;
const scene = new THREE.Scene();
{
const color = 0xFFFFFF;
const intensity = 1;
const light = new THREE.DirectionalLight(color, intensity);
light.position.set(-1, 2, 4);
scene.add(light);
}
const boxWidth = 1;
const boxHeight = 1;
const boxDepth = 1;
const geometry = new THREE.BoxGeometry(boxWidth, boxHeight, boxDepth);
function makeInstance(geometry, color, x) {
const material = new THREE.MeshPhongMaterial({ color });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
cube.position.x = x;
return cube;
}
const cubes = [
makeInstance(geometry, 0x44aa88, 0),
makeInstance(geometry, 0x8844aa, -2),
makeInstance(geometry, 0xaa8844, 2),
];
function resizeRendererToDisplaySize(renderer) {
const canvas = renderer.domElement;
const width = canvas.clientWidth;
const height = canvas.clientHeight;
const needResize = canvas.width !== width || canvas.height !== height;
if (needResize) {
renderer.setSize(width, height, false);
}
return needResize;
}
function render(time) {
time *= 0.001;
if (resizeRendererToDisplaySize(renderer)) {
const canvas = renderer.domElement;
camera.aspect = canvas.clientWidth / canvas.clientHeight;
camera.updateProjectionMatrix();
}
cubes.forEach((cube, ndx) => {
const speed = 1 + ndx * .1;
const rot = time * speed;
cube.rotation.x = rot;
cube.rotation.y = rot;
});
renderer.render(scene, camera);
requestAnimationFrame(render);
}
requestAnimationFrame(render);
}
main();

39
frontend/src/index.css Normal file
View File

@ -0,0 +1,39 @@
@import 'normalize.css';
@import 'sakura-hacked.css';
body {
display: flex;
flex-direction: row-reverse;
}
.preview, .timeline {
width: 50vw;
height: 100vh;
}
.preview {
/*
creates a new containing block
such that the position:fixed fps stats
will be positioned relative to this
*/
transform: rotate(0deg);
/* dunno */
overflow-y: hidden;
}
.timeline {
overflow-y: scroll;
}
@media (max-aspect-ratio: 1/1) {
body {
flex-direction: column;
}
.preview, .timeline {
width: 100vw;
height: 50vh;
}
}

74
frontend/src/index.ts Normal file
View File

@ -0,0 +1,74 @@
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader';
import * as Stats from 'stats.js';
const canvas = document.getElementById('threejs-preview')! as HTMLCanvasElement;
const renderer = new THREE.WebGLRenderer({ canvas });
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x161618);
scene.fog = new THREE.FogExp2(0x161618, 0.002);
const camera = new THREE.PerspectiveCamera(75);
camera.position.set(400, 200, 0);
// controls
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.05;
controls.screenSpacePanning = false;
// controls.maxPolarAngle = Math.PI / 2;
// dbg
const cylinder = new THREE.CylinderGeometry(0, 10, 30, 4, 1);
const material = new THREE.MeshPhongMaterial({ color: 0xffffff, flatShading: true });
const mesh = new THREE.Mesh(cylinder, material);
mesh.position.x = 0;
mesh.position.y = 0;
mesh.position.z = 0;
mesh.updateMatrix();
mesh.matrixAutoUpdate = false;
scene.add(mesh);
const ambientLight = new THREE.AmbientLight(0x222222);
scene.add(ambientLight);
const directionalLight = new THREE.DirectionalLight(0xffffff);
directionalLight.position.set(1, 1, 1);
scene.add(directionalLight);
// stats
const stats = new Stats();
canvas.parentElement!.appendChild(stats.dom);
const animate = (/* time: number */) => {
requestAnimationFrame(animate);
stats.begin();
controls.update();
// STRESS
// resize canvas
const parent = canvas.parentElement!;
const width = parent.clientWidth;
const height = parent.clientHeight;
if (canvas.width !== width || canvas.height !== height) {
renderer.setSize(width, height);
camera.aspect = width / height;
camera.updateProjectionMatrix();
}
renderer.render(scene, camera);
stats.end();
};
requestAnimationFrame(animate);

189
frontend/src/sakura-hacked.css Normal file
View File

@ -0,0 +1,189 @@
/* $color-text: #dedce5; */
/* Sakura.css v1.3.1
* ================
* Minimal css theme.
* Project: https://github.com/oxalorg/sakura/
*/
/* Body */
html {
font-size: 62.5%;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; }
body {
color: #c9c9c9;
background-color: #222222;
}
main {
font-size: 1.8rem;
line-height: 1.618;
max-width: 38em;
margin: auto;
padding: 13px; }
@media (max-width: 684px) {
body {
font-size: 1.53rem; } }
@media (max-width: 382px) {
body {
font-size: 1.35rem; } }
h1, h2, h3, h4, h5, h6 {
line-height: 1.1;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
font-weight: 700;
margin-top: 3rem;
margin-bottom: 1.5rem;
overflow-wrap: break-word;
word-wrap: break-word;
-ms-word-break: break-all;
word-break: break-word; }
h1 {
font-size: 2.35em; }
h2 {
font-size: 2.00em; }
h3 {
font-size: 1.75em; }
h4 {
font-size: 1.5em; }
h5 {
font-size: 1.25em; }
h6 {
font-size: 1em; }
p {
margin-top: 0px;
margin-bottom: 2.5rem; }
small, sub, sup {
font-size: 75%; }
hr {
border-color: #ffffff; }
a {
text-decoration: none;
color: #ffffff; }
a:hover {
color: #c9c9c9;
border-bottom: 2px solid #c9c9c9; }
a:visited {
color: #e6e6e6; }
ul {
padding-left: 1.4em;
margin-top: 0px;
margin-bottom: 2.5rem; }
li {
margin-bottom: 0.4em; }
blockquote {
margin-left: 0px;
margin-right: 0px;
padding-left: 1em;
padding-top: 0.8em;
padding-bottom: 0.8em;
padding-right: 0.8em;
border-left: 5px solid #ffffff;
margin-bottom: 2.5rem;
background-color: #4a4a4a; }
blockquote p {
margin-bottom: 0; }
img, video {
height: auto;
max-width: 100%;
margin-top: 0px;
margin-bottom: 2.5rem; }
/* Pre and Code */
pre {
background-color: #4a4a4a;
display: block;
padding: 1em;
overflow-x: auto;
margin-top: 0px;
margin-bottom: 2.5rem; }
code {
font-size: 0.9em;
padding: 0 0.5em;
background-color: #4a4a4a;
white-space: pre-wrap; }
pre > code {
padding: 0;
background-color: transparent;
white-space: pre; }
/* Tables */
table {
text-align: justify;
width: 100%;
border-collapse: collapse; }
td, th {
padding: 0.5em;
border-bottom: 1px solid #4a4a4a; }
/* Buttons, forms and input */
input, textarea {
border: 1px solid #c9c9c9; }
input:focus, textarea:focus {
border: 1px solid #ffffff; }
textarea {
width: 100%; }
.button, button, input[type="submit"], input[type="reset"], input[type="button"] {
display: inline-block;
padding: 5px 10px;
text-align: center;
text-decoration: none;
white-space: nowrap;
background-color: #ffffff;
color: #222222;
border-radius: 1px;
border: 1px solid #ffffff;
cursor: pointer;
box-sizing: border-box; }
.button[disabled], button[disabled], input[type="submit"][disabled], input[type="reset"][disabled], input[type="button"][disabled] {
cursor: default;
opacity: .5; }
.button:focus:enabled, .button:hover:enabled, button:focus:enabled, button:hover:enabled, input[type="submit"]:focus:enabled, input[type="submit"]:hover:enabled, input[type="reset"]:focus:enabled, input[type="reset"]:hover:enabled, input[type="button"]:focus:enabled, input[type="button"]:hover:enabled {
background-color: #c9c9c9;
border-color: #c9c9c9;
color: #222222;
outline: 0; }
textarea, select, input {
color: #c9c9c9;
padding: 6px 10px;
/* The 6px vertically centers text on FF, ignored by Webkit */
margin-bottom: 10px;
background-color: #4a4a4a;
border: 1px solid #4a4a4a;
border-radius: 4px;
box-shadow: none;
box-sizing: border-box; }
textarea:focus, select:focus, input:focus {
border: 1px solid #ffffff;
outline: 0; }
input[type="checkbox"]:focus {
outline: 1px dotted #ffffff; }
label, legend, fieldset {
display: block;
margin-bottom: .5rem;
font-weight: 600; }

9
frontend/tsconfig.json Normal file
View File

@ -0,0 +1,9 @@
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"strict": true,
"outDir": "dist",
"sourceMap": true
}
}

44
frontend/webpack.config.js Normal file
View File

@ -0,0 +1,44 @@
const TerserPlugin = require('terser-webpack-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const path = require('path');
module.exports = {
entry: [
'./src/index.ts',
'./src/index.css',
],
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/,
},
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
],
},
],
},
optimization: {
minimize: true,
minimizer: [
new TerserPlugin(),
new CssMinimizerPlugin(),
],
},
resolve: {
extensions: ['.tsx', '.ts', '.js'],
},
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist'),
},
plugins: [
new MiniCssExtractPlugin(),
],
};