Skip to content

Commit 31aee82

Browse files
committed
Change the start page to the about page with a new start button
1 parent af76c9a commit 31aee82

8 files changed

Lines changed: 114 additions & 58 deletions

File tree

dist/assets/css/about.css

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,50 @@ html[data-bs-theme="dark"] #uhh-light {
7878
display: none;
7979
}
8080

81+
.start-btn {
82+
display: block; /* Makes it behave like a button */
83+
font-size: 200%;
84+
align-content: center;
85+
padding: 10px 20px; /* Adjust padding for spacing */
86+
background-image: url('/assets/img/ispy-webgl-screenshot-1.0.0.png'); /* Replace with your image path */
87+
background-size: cover; /* Ensure the image covers the entire button */
88+
background-position: center; /* Center the image */
89+
background-repeat: no-repeat; /* Prevent the image from repeating */
90+
text-align: center; /* Center text inside the button */
91+
color: white; /* Text color */
92+
border: none; /* Remove default border */
93+
border-radius: 8px; /* Add rounded corners */
94+
cursor: pointer; /* Change cursor to pointer */
95+
margin: 1em auto; /* Center the button horizontally */
96+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Add a shadow for depth */
97+
transition: transform 0.2s, box-shadow 0.2s; /* Smooth hover/click effects */
98+
height: 300px;
99+
width: 40%;
100+
}
101+
102+
/* Center the button on the line */
103+
.start-btn-container {
104+
text-align: center;
105+
}
106+
107+
/* Hover effect */
108+
.start-btn:hover {
109+
transform: scale(1.05); /* Slightly enlarge the button */
110+
box-shadow: 0 6px 8px rgba(0, 0, 0, 0.3); /* Enhance the shadow */
111+
}
112+
113+
/* Click effect */
114+
.start-btn:active {
115+
transform: scale(0.95); /* Slightly shrink the button */
116+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Reduce the shadow */
117+
}
118+
119+
.start-btn p {
120+
font-weight: bold;
121+
background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background for readability */
122+
width: 100%;
123+
}
124+
81125
.guide-container {
82126
display: none;
83127
padding: 1rem 2rem 2rem 2rem;

dist/assets/locales/de.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,8 @@
5151
"photo": "Foto",
5252
"left": "Links",
5353
"right": "Rechts",
54-
"links": "Nützliche Links und Physikangebote:"
54+
"links": "Nützliche Links und Physikangebote:",
55+
"start": "Event-Display starten"
5556
},
5657
"help": {
5758
"title": "Hilfe",

dist/assets/locales/en.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,8 @@
5151
"photo": "Photo",
5252
"left": "Left",
5353
"right": "Right",
54-
"links": "Useful links and physics offers:"
54+
"links": "Useful links and physics offers:",
55+
"start": "Start Event Display"
5556
},
5657
"help": {
5758
"title": "Help",

index.html

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
<header class="bg-primary" id="js-titlebar"><span id="application-name">Masterclass @ Hamburg</span><span id="js-event-loaded" class="header-event"></span>
2525
<div class="btn-toolbar header-nav">
2626
<div class="btn-group btn-group-sm" id="tutorial-view" role="group">
27-
<a class="btn btn-info" role="button" id="js-about-btn"><i class="fas fa-info-circle"></i></a><button class="btn btn-primary active" id="js-event-display" type="button"><i class="fas fa-cubes"></i></button><a class="btn btn-info" role="button" id="js-help-btn"><i class="fas fa-question-circle"></i></a>
27+
<a class="btn btn-info active" role="button" id="js-about-btn"><i class="fas fa-info-circle"></i></a><button class="btn btn-primary" id="js-event-display" type="button"><i class="fas fa-cubes"></i></button><a class="btn btn-info" role="button" id="js-help-btn"><i class="fas fa-question-circle"></i></a>
2828
</div>
2929
<div class="btn-group btn-group-sm" id="tutorial-display" role="group">
3030
<button class="btn btn-primary display-mode" id="js-display-mode" type="button" title="Toggle Light/Dark Mode"><i class="fas fa-sun"></i><i class="fas fa-moon"></i></button>
@@ -34,7 +34,7 @@
3434
</div>
3535
</div>
3636
</header>
37-
<div class="bg-secondary toolbar" id="js-toolbar" role="toolbar">
37+
<div class="bg-secondary toolbar" id="js-toolbar" style="display: none;" role="toolbar">
3838
<div id="js-primary-toolbar" class="primary-toolbar">
3939
<div class="btn-group" id="tutorial-open" role="group">
4040
<button class="btn btn-primary" type="button" data-bs-toggle="modal" data-bs-target="#open-files" title="Open Files"><i class="fas fa-folder-open"></i></button>
@@ -80,18 +80,21 @@
8080
</div>
8181
</div>
8282
</div>
83-
<main id="js-display">
83+
<main id="js-display" hidden>
8484
<div id="js-axes" class="axes-div"></div>
8585
<div id="js-event-info" class="event-info-div"><img class="img-fluid" width="128" height="128" id="js-cms-logo" src="assets/img/cms-color-medium.png" alt="CMS logo"><span id="js-event-text"></span></div>
8686
<div id="js-menu-container" class="menu-container"></div>
8787
</main>
88-
<main id="js-about" class="page" hidden>
88+
<main id="js-about" class="page">
8989
<section class="clean-block clean-services dark">
9090
<div class="container">
9191
<div class="block-heading">
9292
<h1 class="text-info">Masterclasses @ Hamburg</h1>
9393
<h2 data-i18n="about.title"></h2>
9494
<p data-i18n="about.description"></p>
95+
<div id="js-start-event" class="start-btn">
96+
<p data-i18n="about.start"></p>
97+
</div>
9598
<p><span data-i18n="about.github"></span><a class="btn btn-primary" role="button" href="https://github.com/haddadanas/Masterclass_UHH" target="_blank" rel="noopener noreferrer"><i class="fab fa-github"></i>&nbsp;Masterclass_UHH @ stable</a></p>
9699
<p><span data-i18n="about.sponsors"></span><br><a href="https://www.uni-hamburg.de/" target="_blank" rel="noopener noreferrer"><img src="assets/img/up-uhh-logo-u-2010-u-png.png" loading="lazy" alt="UHH Logo" height="70px" id="uhh-light" title="Universität Hamburg" data-bs-toggle="tooltip"><img src="assets/img/uhh-logo-2010-farbnegativ-rgb.png" loading="lazy" alt="UHH Logo" height="70px" id="uhh-dark" title="Universität Hamburg" data-bs-toggle="tooltip"></a><a href="https://www.desy.de/" target="_blank" rel="noopener noreferrer"><img src="https://pr.desy.de/common/desy_logo_3c_web.svg" loading="lazy" title="Deutsches Elektronen-Synchrotron, Standort Hamburg" alt="DESY Logo" height="70" data-bs-toggle="tooltip"></a><br><span class="img-remark">Logos: (<span data-i18n="about.left"></span>) &copy; UHH (<span data-i18n="about.right"></span>) &copy; DESY</span></p>
97100

ts/config.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,7 @@ export const ispy: Ispy = {
5050
ig_data: null,
5151
ievent: 0,
5252
loaded_local: false,
53+
initialized: false,
5354

5455
// Detector and collections
5556
detector: { Collections: {} },

ts/controls.ts

Lines changed: 56 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -25,12 +25,59 @@ import {
2525
prevEvent,
2626
prevSelectedEvent,
2727
showWebFiles,
28+
loadWebFiles,
2829
} from "./files-load.js";
2930
import { toggleAnimation } from "./animate.js";
3031
import { resetView, showView, setXY, setYZ, setZX, setPerspective, setOrthographic } from "./display.js";
31-
import { setDisplayVerticalHeight, setFramerate } from "./setup.js";
32+
import { setDisplayVerticalHeight, setFramerate, init, initLight, initControlPanel, run } from "./setup.js";
3233
import { buildFileSummary, createCSV } from "./analysis.js";
3334
import { startTutorial } from "./tutorial.js";
35+
import { addGroups } from "./tree-view.js";
36+
37+
// Initialization of display
38+
function setupKeyboardListeners() {
39+
// Add keyboard listeners for shortcuts
40+
document.addEventListener("keydown", (e: KeyboardEvent) => {
41+
// Instead of a button, make output of 3D to JSON a "secret" key binding
42+
if (e.key === "E") {
43+
exportScene();
44+
}
45+
if (e.key === "ArrowUp" && e.shiftKey) {
46+
zoomIn();
47+
}
48+
if (e.key === "ArrowDown" && e.shiftKey) {
49+
zoomOut();
50+
}
51+
if (e.key === "ArrowRight") {
52+
nextEvent();
53+
}
54+
if (e.key === "ArrowLeft") {
55+
prevEvent();
56+
}
57+
if (e.key === "A") {
58+
toggleAnimation();
59+
}
60+
if (e.key === "m") {
61+
showMass();
62+
}
63+
});
64+
}
65+
66+
function initEventDisplay() {
67+
if (ispy.initialized) {
68+
return;
69+
}
70+
setupKeyboardListeners();
71+
init();
72+
addGroups();
73+
initLight();
74+
initControlPanel();
75+
loadWebFiles();
76+
setLanguage(ispy.lang);
77+
console.log("Initialization complete.");
78+
run();
79+
ispy.initialized = true;
80+
}
3481

3582
// Display Controls
3683
/**
@@ -123,16 +170,10 @@ function reload() {
123170
*/
124171
function invertColors() {
125172
const htmlEl = document.documentElement;
126-
assertDefined(ispy.renderer, "Renderer is not defined");
127173
ispy.inverted_colors = !ispy.inverted_colors;
128-
129-
if (!ispy.inverted_colors) {
130-
ispy.renderer.setClearColor(new Color(0x232323), 1);
131-
htmlEl.setAttribute("data-bs-theme", "dark");
132-
} else {
133-
ispy.renderer.setClearColor(new Color(0xefefef), 1);
134-
htmlEl.setAttribute("data-bs-theme", "light");
135-
}
174+
htmlEl.setAttribute("data-bs-theme", ispy.inverted_colors ? "light" : "dark");
175+
if(!ispy.renderer) return;
176+
ispy.renderer.setClearColor(ispy.inverted_colors ? new Color(0xefefef) : new Color(0x232323), 1);
136177
}
137178

138179
/**
@@ -405,6 +446,7 @@ function switchMain(view: "about" | "display" | "help") {
405446
});
406447
if (view === "display") {
407448
showToolbarButtons();
449+
initEventDisplay();
408450
showEventName();
409451
} else {
410452
hideToolbarButtons();
@@ -463,7 +505,8 @@ export function setupControls() {
463505
const jsBasicsTutorialBtn = getHTMLObject("js-basics-tutorial-btn");
464506
const jsControlsTutorialBtn = getHTMLObject("js-controls-tutorial-btn");
465507
const jsAnalysisTutorialBtn = getHTMLObject("js-analysis-tutorial-btn");
466-
508+
const jsStartBtn = getHTMLObject("js-start-event");
509+
467510
// Tutorial button
468511
jsBasicsTutorialBtn.addEventListener("click", () => {
469512
switchMain("display");
@@ -477,8 +520,9 @@ export function setupControls() {
477520
switchMain("display");
478521
startTutorial("analysis");
479522
});
480-
523+
481524
// connect functions to the buttons
525+
jsStartBtn.addEventListener("click", () => switchMain("display"));
482526
jsAboutBtn.addEventListener("click", () => switchMain("about"));
483527
jsHelpBtn.addEventListener("click", () => switchMain("help"));
484528
jsDisplayBtn.addEventListener("click", () => switchMain("display"));
@@ -560,31 +604,3 @@ export function setupControls() {
560604
});
561605
}
562606
}
563-
564-
export function setupKeyboardListeners() {
565-
// Add keyboard listeners for shortcuts
566-
document.addEventListener("keydown", (e: KeyboardEvent) => {
567-
// Instead of a button, make output of 3D to JSON a "secret" key binding
568-
if (e.key === "E") {
569-
exportScene();
570-
}
571-
if (e.key === "ArrowUp" && e.shiftKey) {
572-
zoomIn();
573-
}
574-
if (e.key === "ArrowDown" && e.shiftKey) {
575-
zoomOut();
576-
}
577-
if (e.key === "ArrowRight") {
578-
nextEvent();
579-
}
580-
if (e.key === "ArrowLeft") {
581-
prevEvent();
582-
}
583-
if (e.key === "A") {
584-
toggleAnimation();
585-
}
586-
if (e.key === "m") {
587-
showMass();
588-
}
589-
});
590-
}

ts/ispy.interfaces.d.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,7 @@ interface Ispy {
7070
// File and Event Information
7171
file_name?: string;
7272
version: string;
73+
initialized: boolean;
7374
lang: string;
7475
guiLangData: Record<string, string>;
7576
event_index: number;

ts/ispy.ts

Lines changed: 1 addition & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,10 @@
11
import { ispy } from "./config.js";
2-
import { setupControls, setupKeyboardListeners } from "./controls.js";
3-
import { loadWebFiles } from "./files-load.js";
4-
import { init, initLight, initControlPanel, run } from "./setup.js";
5-
import { addGroups } from "./tree-view.js";
2+
import { setupControls } from "./controls.js";
63
import { setLanguage, setupTooltips } from "./utils.js";
74

85
document.addEventListener("DOMContentLoaded", () => {
96
ispy.lang = localStorage.getItem("language") || navigator.language || "en";
107
setupTooltips();
11-
setupKeyboardListeners();
128
setupControls();
13-
init();
14-
addGroups();
15-
initLight();
16-
initControlPanel();
17-
loadWebFiles();
189
setLanguage(ispy.lang);
19-
console.log("Initialization complete.");
20-
run();
2110
});

0 commit comments

Comments
 (0)