Feature: Add window displaying control instructions

src/app/app.module.ts

@@ -56,6 +56,7 @@ import { SidenavMenuComponent } from './components/sidenav-menu/sidenav-menu.com
 import { SidenavComponent } from './components/sidenav/sidenav.component';
 import { MediaTypePipe } from './pipes/media-type.pipe';
 import { MarkdownPreviewComponent } from './components/markdown-preview/markdown-preview.component';
+import { GuideComponent } from './components/guide/guide.component';
 
 @NgModule({
     declarations: [
@@ -86,6 +87,7 @@ import { MarkdownPreviewComponent } from './components/markdown-preview/markdown
         EntityFeatureSettingsLightsComponent,
         EntityFeatureSettingsMeshComponent,
         MarkdownPreviewComponent,
+        GuideComponent,
     ],
     imports: [
         BrowserModule,

src/app/components/guide/guide.component.html

@@ -0,0 +1,7 @@
+<img src="/assets/icons/guide/left_click_move.svg" alt="left click" />
+<img src="/assets/icons/guide/scroll_wheel.svg" alt="scroll" />
+<img src="/assets/icons/guide/right_click_move.svg" alt="right click" />
+<p>click & hold with 1 finger or left mouse button to rotate</p>
+<p>scroll mouse wheel or pinch to zoom in and out</p>
+<p>click & hold with 2 fingers or right mouse button to pan</p>
+<p class="dismiss">click to dismiss</p>

src/app/components/guide/guide.component.scss

@@ -0,0 +1,47 @@
+:host {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  translate: -50% -50%;
+  pointer-events: none;
+
+  display: grid;
+  grid-template-columns: repeat(3, min(25vw, 25ch));
+  grid-template-rows: 1fr auto;
+  grid-column-gap: 1rem;
+  grid-row-gap: 2rem;
+  background-color: rgba(0, 0, 0, 0.7);
+  border-radius: 0.75rem;
+  padding: 1rem;
+  column-gap: 1rem;
+
+  color: white;
+
+  align-items: center;
+  justify-items: center;
+  text-align: center;
+
+  img {
+    max-height: 8rem;
+    max-width: 4rem;
+  }
+
+  transition-property: transform, filter, backdrop-filter;
+  transition-duration: 500ms;
+  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+  filter: opacity(0);
+  transform: translateY(1rem);
+  &.visible {
+    filter: opacity(1);
+    transform: translateY(0%);
+  }
+
+  p {
+    margin: 0;
+  }
+
+  p.dismiss {
+    grid-column: span 3;
+    font-weight: bold;
+  }
+}

src/app/components/guide/guide.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { GuideComponent } from './guide.component';
+
+describe('GuideComponent', () => {
+  let component: GuideComponent;
+  let fixture: ComponentFixture<GuideComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ GuideComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(GuideComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/guide/guide.component.ts

@@ -0,0 +1,33 @@
+import { AfterViewInit, Component, HostBinding } from '@angular/core';
+import { fromEvent } from 'rxjs';
+import { LoadingscreenhandlerService } from 'src/app/services/babylon/loadingscreen';
+
+@Component({
+  selector: 'app-guide',
+  templateUrl: './guide.component.html',
+  styleUrls: ['./guide.component.scss'],
+})
+export class GuideComponent implements AfterViewInit {
+  @HostBinding('class.visible')
+  get visible() {
+    return this.isVisible;
+  }
+
+  private isVisible = false;
+
+  constructor(private loadingScreenHandler: LoadingscreenhandlerService) {}
+
+  ngAfterViewInit(): void {
+    this.loadingScreenHandler.isLoading$.subscribe(isLoading => {
+      if (isLoading) return;
+
+      setTimeout(() => {
+        this.isVisible = true;
+      }, 1_000);
+    });
+
+    fromEvent(document, 'click').subscribe(() => {
+      this.isVisible = false;
+    });
+  }
+}

src/app/components/scene/scene.component.html

@@ -3,6 +3,7 @@
     <app-annotation [annotation]="annotation"></app-annotation>
   </div>
   <app-annotationwalkthrough></app-annotationwalkthrough>
+  <app-guide></app-guide>
   <app-menu *ngIf="processing.showMenu$ | async"></app-menu>
   <app-sidenav-menu *ngIf="processing.showSidenav$ | async"></app-sidenav-menu>
   <app-sidenav></app-sidenav>

src/app/services/babylon/loadingscreen.ts

@@ -30,17 +30,17 @@ export class LoadingScreen implements ILoadingScreen {
   /**
    * Function called to display the loading screen
    */
-  public displayLoadingUI(): void {
-    if (!this.loadingScreenHandler.isLoading) {
+  public async displayLoadingUI() {
+    if (!(await firstValueFrom(this.loadingScreenHandler.isLoading$))) {
       this.loadingScreenHandler.updateOpacity('1');
     }
   }
 
   /**
    * Function called to hide the loading screen
    */
-  public hideLoadingUI(): void {
-    if (this.loadingScreenHandler.isLoading) {
+  public async hideLoadingUI() {
+    if (await firstValueFrom(this.loadingScreenHandler.isLoading$)) {
       // setTimeout of half a second to prevent pop-in
       // of some bigger meshes
       setTimeout(() => this.loadingScreenHandler.updateOpacity('0'), 500);
@@ -82,7 +82,7 @@ export class LoadingScreen implements ILoadingScreen {
 }
 
 import { Injectable } from '@angular/core';
-import { BehaviorSubject } from 'rxjs';
+import { BehaviorSubject, firstValueFrom } from 'rxjs';
 
 @Injectable({
   providedIn: 'root',
@@ -92,6 +92,8 @@ export class LoadingscreenhandlerService {
   public opacity = this.OpacitySubject.asObservable();
   private TextSubject = new BehaviorSubject<string>('Loading');
   public loadingText = this.TextSubject.asObservable();
+  private isLoading = new BehaviorSubject<boolean>(false);
+  public isLoading$ = this.isLoading.asObservable();
 
   private StyleSubject = new BehaviorSubject<any>({
     left: '0px',
@@ -102,18 +104,11 @@ export class LoadingscreenhandlerService {
 
   public loadingStyle = this.StyleSubject.asObservable();
 
-  public isLoading = false;
   public backgroundColor = '#111111';
   public logo = 'assets/img/kompakkt-icon.png';
 
-  constructor() {}
-
   public updateOpacity(newOpacity: string): void {
-    if (parseFloat(newOpacity) > 0.5) {
-      this.isLoading = true;
-    } else {
-      this.isLoading = false;
-    }
+    this.isLoading.next(parseFloat(newOpacity) > 0.5);
     this.OpacitySubject.next(newOpacity);
   }
 

src/app/services/processing/processing.service.ts

@@ -488,7 +488,8 @@ export class ProcessingService {
 
   public async loadEntity(newEntity: IEntity, overrideUrl?: string) {
     const baseURL = overrideUrl ?? this.baseUrl;
-    if (!this.loadingScreenHandler.isLoading && newEntity.processed && newEntity.mediaType) {
+    const isLoading = await firstValueFrom(this.loadingScreenHandler.isLoading$);
+    if (!isLoading && newEntity.processed && newEntity.mediaType) {
       if (!newEntity.dataSource.isExternal) {
         this.entityMediaType = newEntity.mediaType;
         await this.initialiseEntitySettingsData(newEntity);