diff --git a/css/main.css b/css/main.css
index 2c75143c46d99db85938ded2ec38851daf179a78..bc78357add4bbd4312da6eaddfc74f40a33e438e 100644
--- a/css/main.css
+++ b/css/main.css
@@ -17,6 +17,15 @@ body {
user-select: none;
}
+#viewer-settings-knob {
+ position: fixed;
+ background: var(--100-color);
+ margin: 0.5rem;
+ padding: 0.5rem;
+ border-radius: 0.75rem;
+ display: none;
+}
+
menu {
display: inline-flex;
list-style-type: none;
@@ -30,9 +39,14 @@ menu button {
padding: 0.25rem 0.75rem;
margin: 0 0.5rem;
border: 1.5px solid var(--300-color);
- transition: 0.3s;
cursor: pointer;
}
+menu button#zoomIntoViewButton {
+ cursor: zoom-in;
+}
+menu button#zoomOutViewButton {
+ cursor: zoom-out;
+}
menu button.buttonRightFlat {
margin-right: 0;
border-right: none;
@@ -58,7 +72,7 @@ menu button:disabled {
menu.menu-impressum {
padding-left: 1rem;
font-size: 0.75rem;
- vertical-align: top;
+ vertical-align: bottom;
}
menu.menu-impressum li:not(:last-child)::after {
content: "\00B7";
@@ -89,10 +103,12 @@ section#viewer {
}
article#viewer-settings {
+ position: fixed;
background: no-repeat url("/icon.svg") var(--100-color);
- margin: 0 1rem;
- padding: 0.5rem 0 0 3rem;
+ margin: 0 1vw;
+ padding: 0.75rem 0 0 3rem;
outline: 2px solid var(--400-color);
+ transition: 0.3s;
}
section#tools {
@@ -170,59 +186,26 @@ article#tools-list-buttons {
padding: 0;
}
-#helpDialog ul > li > span.helpControlText {
+#helpDialog span.helpControlText {
position: absolute;
left: 3rem;
}
-/* Zdog */
-
-.zdog-canvas {
- display: block;
- width: 100%;
- height: calc(100vh - 3rem); /* 3rem is height of footer incl. margin */
-}
-
-/*ul {
- padding-left: 0;
- margin-bottom: 0;
-}
-
-#command-area {
- height: 400px;
-}
-
-#list-commands-wrapper {
- margin: 1rem 0;
- width: 300px;
- float: left;
- background-color: slategray;
- outline-radius: 10px;
+#helpDialog a {
+ text-decoration: none;
+ color: black;
}
-#list-commands > li {
- width: 200px;
- margin: 1rem auto;
- padding: 0.5rem 1rem;
- background-color: lightgray;
- outline-radius: 10px;
+#helpLogo {
+ width: 75px;
+ height: 75px;
+ float: right;
}
-#list-commands .command-active {
- background-color: white;
-}
+/* Zdog */
-#popup-edit {
- margin: 1rem 0;
- width: 300px;
- display: none;
- float: right;
- background-color: white;
- padding: 2rem 3rem;
- height: 300px;
- outline-radius: 10px;
+.zdog-canvas {
+ display: block;
+ width: 100%;
+ height: 100vh;
}
-
-#popup-edit-parameters {
- list-style: none;
-}*/
diff --git a/js/project.js b/js/project.js
index 5edcd3f9be82e6e83a0fab68b75fc833f6ed895c..1badb1d0023e42fe40bbd97cf565b26794a7fec0 100644
--- a/js/project.js
+++ b/js/project.js
@@ -81,7 +81,7 @@ class Project {
}
// Vertical center line
- new Zdog.Shape({
+ /*new Zdog.Shape({
addTo: window.illoGridGroup,
path: [
{
@@ -97,7 +97,7 @@ class Project {
],
stroke: 0.5,
color: "#111111",
- });
+ });*/
}
addLine(flow, speed, toX, toY, toZ) {
@@ -175,7 +175,13 @@ class Project {
}
break;
}
- var newMove = new Move(prevCoords.e + flowStep * i, speed, newX, newY, newZ);
+ var newMove = new Move(
+ prevCoords.e + flowStep * i,
+ speed,
+ newX,
+ newY,
+ newZ
+ );
this.model.append(newMove);
}
}
diff --git a/main.js b/main.js
index 3b0482313cdecaf6db9ec7732dd2f2e83b81757c..db606991e5a2e9292c2800f3c8e62597938955e4 100644
--- a/main.js
+++ b/main.js
@@ -15,7 +15,7 @@ var aboutText = `
`;
if (import.meta.env.VITE_APP_BRANCH == "dev") {
aboutText = `
- <i class="fa-solid fa-kiwi-bird fa-bounce"></i> TESTING</h1>
+ <i class="fa-solid fa-kiwi-bird fa-bounce"></i></h1>
<p>Version: ${import.meta.env.VITE_APP_DATE}
(${import.meta.env.VITE_APP_BRANCH}
${import.meta.env.VITE_APP_HASH})</p>
@@ -25,9 +25,12 @@ if (import.meta.env.VITE_APP_BRANCH == "dev") {
document.querySelector("#app").innerHTML = `
<main>
<section id="viewer">
+ <article id="viewer-settings-knob">
+ <i class="fa-solid fa-bars"></i>
+ </article>
<article id="viewer-settings">
<menu>
- <li>
+ <!-- <li>
<button id="zoomIntoViewButton" class="buttonRightFlat">
<i class="fa-solid fa-magnifying-glass-plus"></i>
</button>
@@ -36,18 +39,13 @@ document.querySelector("#app").innerHTML = `
<button id="zoomOutViewButton" class="buttonLeftFlat">
<i class="fa-solid fa-magnifying-glass-minus"></i>
</button>
- </li>
+ </li> -->
<li>
<button id="playViewButton">
<i class="fa-solid fa-play"></i> Simulate
</button>
</li>
</menu>
- <menu class="menu-impressum">
- <li>
- <a href="#" id="helpLink">About</a>
- </li>
- </menu>
<menu class="menu-right">
<li>
<button id="saveProjectMenuButton" class="buttonRightFlat">
@@ -80,12 +78,12 @@ document.querySelector("#app").innerHTML = `
<menu>
<li>
<button id="addLineEditButton">
- <i class="fa-solid fa-lines-leaning"></i> Add line
+ <i class="fa-solid fa-lines-leaning"></i> New line
</button>
</li>
<li>
<button id="addArcEditButton">
- <i class="fa-solid fa-bezier-curve"></i> Add arc
+ <i class="fa-solid fa-bezier-curve"></i> New arc
</button>
</li>
</menu>
@@ -106,12 +104,18 @@ document.querySelector("#app").innerHTML = `
</button>
</li>
</menu>
+ <menu class="menu-impressum">
+ <li>
+ <a href="#" id="helpLink">About Tailorbird</a>
+ </li>
+ </menu>
</article>
</section>
</main>
<!-- Dialogs -->
<dialog id="helpDialog">
+ <img src="/icon.svg" width="75" height="75" id="helpLogo">
<h1>Tailorbird 3D ${aboutText}
<h2><i class="fa-solid fa-keyboard"></i> Controls</h2>
<p>
@@ -123,13 +127,14 @@ document.querySelector("#app").innerHTML = `
<li><i class="fa-solid fa-share fa-rotate-90"></i> <span class="helpControlText">Jump to: O</span></li>
</ul>
</p>
+ <h2><i class="fa-solid fa-address-card"></i></i> Help</h2>
<p>
<ul>
<li>
- <a href="mailto:yanagibashi@kg.rwth-aachen.de">Contact</a>
+ <a href="mailto:yanagibashi@kg.rwth-aachen.de"><i class="fa-solid fa-envelope"></i> <span class="helpControlText">Contact</span></a>
</li>
<li>
- <a href="https://www.kg.rwth-aachen.de/cms/KG/Footer/Service/~vcyq/Impressum/">Impressum</a>
+ <a href="https://www.kg.rwth-aachen.de/cms/KG/Footer/Service/~vcyq/Impressum/"><i class="fa-solid fa-circle-info"></i> <span class="helpControlText">Impressum</span></a>
</li>
</ul>
</p>
@@ -178,7 +183,7 @@ document.querySelector("#app").innerHTML = `
<!-- Dialogs Edit menu -->
<dialog id="addLineDialog">
<form method="dialog" id="addLineForm">
- <h3>Add line</h3>
+ <h3>New line</h3>
<fieldset>
<legend>Position</legend>
<input
@@ -241,7 +246,7 @@ document.querySelector("#app").innerHTML = `
<dialog id="addArcDialog">
<form method="dialog" id="addArcForm">
- <h3>Add arc</h3>
+ <h3>New arc</h3>
<fieldset>
<legend>Properties</legend>
Size: <input type="text" id="addArcInputSize" /><br />
@@ -788,6 +793,24 @@ function initEditEventListeners() {
function initViewEventListeners() {
document
+ .getElementById("viewer-settings")
+ .addEventListener("click", function (e) {
+ if (e.eventPhase !== 2) return; /* make sure not triggered by bubbling */
+ if (e.offsetX > 50) return; /* only react for clicks on logo */
+ // Hide viewer settings
+ this.style.visibility = "hidden";
+ this.style.opacity = "0";
+ document.getElementById("viewer-settings-knob").style.display = "block";
+ });
+ document
+ .getElementById("viewer-settings-knob")
+ .addEventListener("click", function (e) {
+ // Hide viewer settings
+ document.getElementById("viewer-settings").style.visibility = "visible";
+ document.getElementById("viewer-settings").style.opacity = "1";
+ this.style.display = "none";
+ });
+ /*document
.getElementById("zoomIntoViewButton")
.addEventListener("click", function (e) {
// Zoom into
@@ -798,7 +821,7 @@ function initViewEventListeners() {
.addEventListener("click", function (e) {
// Zoom out
window.illo.scale.multiply(1 / 1.1);
- });
+ });*/
document
.getElementById("playViewButton")
.addEventListener("click", function (e) {