content/hifi-public/cozza13/scripts/html/gridControls.html
Dale Glass 0d14e5a379 Initial data.
Needs a lot of cleanup. Data has been de-duplicated, and where identical copies existed, one of them
has been replaced with a symlink.

Some files have been excluded, such as binaries, installers and debug dumps. Some of that may still
be present.
2022-02-13 18:59:11 +01:00

167 lines
6 KiB
HTML

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script>
function loaded() {
var gridColor = { red: 0, green: 0, blue: 0 };
var gridColors = [
{ red: 0, green: 0, blue: 0 },
{ red: 255, green: 255, blue: 255 },
{ red: 255, green: 0, blue: 0 },
{ red: 0, green: 255, blue: 0},
{ red: 0, green: 0, blue: 255 },
];
elPosY = document.getElementById("horiz-y");
elMinorSpacing = document.getElementById("minor-spacing");
elMajorSpacing = document.getElementById("major-spacing");
elSnapToGrid = document.getElementById("snap-to-grid");
elHorizontalGridVisible = document.getElementById("horiz-grid-visible");
elMoveToSelection = document.getElementById("move-to-selection");
elMoveToAvatar = document.getElementById("move-to-avatar");
if (window.EventBridge !== undefined) {
EventBridge.scriptEventReceived.connect(function(data) {
data = JSON.parse(data);
if (data.origin) {
var origin = data.origin;
elPosY.value = origin.y.toFixed(2);
}
if (data.minorGridSpacing !== undefined) {
elMinorSpacing.value = data.minorGridSpacing;
}
if (data.majorGridEvery !== undefined) {
elMajorSpacing.value = data.majorGridEvery;
}
if (data.gridColor) {
gridColor = data.gridColor;
}
if (data.snapToGrid !== undefined) {
elSnapToGrid.checked = data.snapToGrid == true;
}
if (data.visible !== undefined) {
elHorizontalGridVisible.checked = data.visible == true;
}
});
function emitUpdate() {
EventBridge.emitWebEvent(JSON.stringify({
type: "update",
origin: {
y: elPosY.value,
},
minorGridSpacing: elMinorSpacing.value,
majorGridEvery: elMajorSpacing.value,
gridColor: gridColor,
snapToGrid: elSnapToGrid.checked,
visible: elHorizontalGridVisible.checked,
}));
}
}
elPosY.addEventListener("change", emitUpdate);
elMinorSpacing.addEventListener("change", emitUpdate);
elMajorSpacing.addEventListener("change", emitUpdate);
elSnapToGrid.addEventListener("change", emitUpdate);
elHorizontalGridVisible.addEventListener("change", emitUpdate);
elMoveToAvatar.addEventListener("click", function() {
EventBridge.emitWebEvent(JSON.stringify({
type: "action",
action: "moveToAvatar",
}));
});
elMoveToSelection.addEventListener("click", function() {
EventBridge.emitWebEvent(JSON.stringify({
type: "action",
action: "moveToSelection",
}));
});
var gridColorBox = document.getElementById('grid-color');
for (var i = 0; i < gridColors.length; i++) {
var colors = gridColors[i];
var box = document.createElement('div');
box.setAttribute('class', 'color-box');
box.style.background = 'rgb(' + colors.red + ', ' + colors.green + ', ' + colors.blue + ')';
document.getElementById("grid-colors").appendChild(box);
box.addEventListener("click", function(color) {
return function() {
gridColor = color;
emitUpdate();
}
}({ red: colors.red, green: colors.green, blue: colors.blue }));
}
EventBridge.emitWebEvent(JSON.stringify({ type: 'init' }));
}
</script>
</head>
<body onload='loaded();'>
<div class="section-header">
<label>Horizontal Grid</label>
</div>
<div class="grid-section">
<div class="property-section">
<label>Visible</label>
<span>
<input type='checkbox' id="horiz-grid-visible">
</span>
</div>
<div class="property-section">
<label>Snap to grid</label>
<span>
<input type='checkbox' id="snap-to-grid">
</span>
</div>
<div id="horizontal-position" class="property-section">
<label>Position (Y Axis)</label>
<span>
<input type='number' id="horiz-y" class="number" value="0.0" step="0.1"></input>
</span>
</div>
<div class="property-section">
<label>Minor Grid Size</label>
<span>
<input type='number' id="minor-spacing" min="0" step="0.01", ></input>
</span>
</div>
<div class="property-section">
<label>Major Grid Every</label>
<span>
<input type='number' id="major-spacing" min="2" step="1", ></input>
</span>
</div>
<div class="property-section">
<label>Grid Color</label>
<span id="grid-colors"></span>
</div>
<div class="property-section">
<span>
<input type="button" id="move-to-selection" value="Move to Selection">
</span>
</div>
<div class="property-section">
<span>
<input type="button" id="move-to-avatar" value="Move to Avatar">
</span>
</div>
</div>
</body>
</html>