mirror of
https://github.com/overte-org/community-apps.git
synced 2025-04-25 14:32:56 +02:00
62b79e6fc8
This adds the "Light Bulb Generator" application: To generate rapidly a visible glowing light source with its light beam.
211 lines
8.3 KiB
HTML
211 lines
8.3 KiB
HTML
<!DOCTYPE html>
|
|
<!--
|
|
lightBulb.html
|
|
|
|
Created by Alezia Kurdis, April 23rd 2022.
|
|
Copyright 2022 Overte e.V.
|
|
|
|
HTML UI for an application to generate light bulbs.
|
|
|
|
Distributed under the Apache License, Version 2.0.
|
|
See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
|
|
-->
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<script>
|
|
//Parameters
|
|
|
|
function findGetParameter(parameterName) {
|
|
var result = null,
|
|
tmp = [];
|
|
var items = location.search.substr(1).split("&");
|
|
for (var index = 0; index < items.length; index++) {
|
|
tmp = items[index].split("=");
|
|
if (tmp[0] === parameterName) result = decodeURIComponent(tmp[1]);
|
|
}
|
|
return result;
|
|
}
|
|
|
|
var channel = "com.overte.app.lightBulb";
|
|
|
|
//Paths
|
|
var thisPageName = "lightBulb.html";
|
|
var currentPath = window.location.protocol + "//" + window.location.host + window.location.pathname;
|
|
var ROOTPATH = currentPath.replace(thisPageName, "");
|
|
|
|
</script>
|
|
<style>
|
|
@font-face {
|
|
font-family: FiraSans-SemiBold;
|
|
src: url(FiraSans-SemiBold.ttf);
|
|
}
|
|
|
|
body {
|
|
background: #363842;
|
|
font-family: FiraSans-SemiBold;
|
|
font-size: 18px;
|
|
color: #FFFFFF;
|
|
text-decoration: none;
|
|
font-style: normal;
|
|
font-variant: normal;
|
|
text-transform: none;
|
|
}
|
|
|
|
#colorPreview {
|
|
background: #ffffff;
|
|
border: 1px solid #000000;
|
|
width: 100px;
|
|
height: 60px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>LIGHT BULB GENERATOR</h1><hr>
|
|
Color: <br>
|
|
<table><tr><td>
|
|
<div id = "colorPreview"></div>
|
|
</td><td>
|
|
<input type = "radio" id="colorWhite" name="colorType" onclick="setColor();" value = "white" checked>White<br>
|
|
<input type = "radio" id="colorHue" name="colorType" onclick="setColor();" value = "hue">Hue <input id="hue" type="number" size = "5" value="30" onchange='setColor();'>°
|
|
</td></tr></table>
|
|
<br><br>
|
|
Intensity: <input id="intensity" type="number" size = "5" value="5" onchange='setColor();'><br><br>
|
|
Beam angle: <input id="beamAngle" type="number" size = "5" value="30" onchange='setColor();'>°<br><br>
|
|
Range: <input id="range" type="number" size = "5" value="10" onchange='setColor();'>m<br><br><br>
|
|
|
|
<button onClick='genLightBulb();'>GENERATE A LIGHT BULB</button>
|
|
|
|
<script>
|
|
function setColor() {
|
|
var color;
|
|
|
|
var hue = parseInt(document.getElementById("hue").value, 10)/360;
|
|
if (document.getElementById("colorWhite").checked) {
|
|
color = hslToRgb(hue, 1, 1);
|
|
} else {
|
|
color = hslToRgb(hue, 1, 0.5);
|
|
}
|
|
var h = parseInt(document.getElementById("hue").value,10);
|
|
if (h >= 720 || h < -720) {
|
|
document.getElementById("hue").value = 0;
|
|
} else if (h < 0) {
|
|
document.getElementById("hue").value = h + 360;
|
|
} else if (h >= 360) {
|
|
document.getElementById("hue").value = h - 360;
|
|
}
|
|
|
|
document.getElementById("colorPreview").style.backgroundColor = "rgb(" + color[0] + ", " + color[1] + ", " + color[2] + ")";
|
|
|
|
var i = parseInt(document.getElementById("intensity").value,10);
|
|
if (i < 0) {
|
|
document.getElementById("intensity").value = 0;
|
|
}
|
|
|
|
var a = parseInt(document.getElementById("beamAngle").value,10);
|
|
if (a < 0) {
|
|
document.getElementById("beamAngle").value = 0;
|
|
}
|
|
if (a >= 180) {
|
|
document.getElementById("beamAngle").value = 180;
|
|
}
|
|
|
|
var r = parseInt(document.getElementById("range").value,10);
|
|
if (r < 0) {
|
|
document.getElementById("range").value = 0;
|
|
}
|
|
|
|
}
|
|
|
|
function genLightBulb(){
|
|
var hue = parseInt(document.getElementById("hue").value, 10)/360;
|
|
var colorMode = "white";
|
|
if (document.getElementById("colorWhite").checked) {
|
|
color = hslToRgb(hue, 1, 1);
|
|
} else {
|
|
color = hslToRgb(hue, 1, 0.6);
|
|
colorMode = "hue";
|
|
}
|
|
var lightColor = {"red": color[0], "green": color[1], "blue": color[2]};
|
|
|
|
var intensity = parseInt(document.getElementById("intensity").value,10);
|
|
var beamAngle = parseInt(document.getElementById("beamAngle").value,10);
|
|
var range = parseInt(document.getElementById("range").value,10);
|
|
|
|
var data = {
|
|
"action": "GEN_LIGHT_BULB",
|
|
"channel": channel,
|
|
"color": lightColor,
|
|
"lightIntensity": intensity,
|
|
"lightSpotCutOff": beamAngle,
|
|
"lightRange": range,
|
|
"colorMode": colorMode,
|
|
"hue": parseInt(document.getElementById("hue").value, 10)
|
|
};
|
|
|
|
EventBridge.emitWebEvent(JSON.stringify(data));
|
|
|
|
}
|
|
|
|
/*
|
|
* Converts an HSL color value to RGB. Conversion formula
|
|
* adapted from http://en.wikipedia.org/wiki/HSL_color_space.
|
|
* Assumes h, s, and l are contained in the set [0, 1] and
|
|
* returns r, g, and b in the set [0, 255].
|
|
*
|
|
* @param {number} h The hue
|
|
* @param {number} s The saturation
|
|
* @param {number} l The lightness
|
|
* @return {Array} The RGB representation
|
|
*/
|
|
function hslToRgb(h, s, l){
|
|
var r, g, b;
|
|
|
|
if(s == 0){
|
|
r = g = b = l; // achromatic
|
|
}else{
|
|
var hue2rgb = function hue2rgb(p, q, t){
|
|
if(t < 0) t += 1;
|
|
if(t > 1) t -= 1;
|
|
if(t < 1/6) return p + (q - p) * 6 * t;
|
|
if(t < 1/2) return q;
|
|
if(t < 2/3) return p + (q - p) * (2/3 - t) * 6;
|
|
return p;
|
|
}
|
|
|
|
var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
|
|
var p = 2 * l - q;
|
|
r = hue2rgb(p, q, h + 1/3);
|
|
g = hue2rgb(p, q, h);
|
|
b = hue2rgb(p, q, h - 1/3);
|
|
}
|
|
|
|
return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
|
|
}
|
|
|
|
//Reading paramaters and apply them
|
|
var parameter = findGetParameter("woh");
|
|
if(parameter === null){parameter = "white";}
|
|
if (parameter === "white") {
|
|
document.getElementById("colorWhite").checked = true;
|
|
document.getElementById("colorHue").checked = false;
|
|
} else {
|
|
document.getElementById("colorWhite").checked = false;
|
|
document.getElementById("colorHue").checked = true;
|
|
}
|
|
|
|
parameter = findGetParameter("hue");
|
|
document.getElementById("hue").value = parseInt(parameter, 10);
|
|
|
|
parameter = findGetParameter("int");
|
|
document.getElementById("intensity").value = parseInt(parameter, 10);
|
|
|
|
parameter = findGetParameter("ang");
|
|
document.getElementById("beamAngle").value = parseInt(parameter, 10);
|
|
|
|
parameter = findGetParameter("ran");
|
|
document.getElementById("range").value = parseInt(parameter, 10);
|
|
setColor();
|
|
</script>
|
|
</body>
|
|
</html>
|