Funksjons- og designspesifikasjon for NTNU Crestron 10” Touchpanel (HTML5)

Formål
Dette dokumentet beskriver funksjonalitet, menyer, grafisk profil, farger, typografi, ikoner, universell utforming og designkrav for HTML5-versjonen av NTNUs Crestron 10” touchpanel.
Panelet er det sentrale grensesnittet som lærere og ansatte møter i alle undervisningsrom, og fungerer som kontrollflaten for alt audiovisuelt utstyr i rommet. Herfra slår man på anlegget, velger hvilke kilder som skal vises på bildeflater, og styrer lyd, lys, blendingsgardiner, lerret og annet teknisk utstyr som er nødvendig for å gjennomføre undervisning.
Brukergruppen består både av erfarne ansatte og personer som aldri tidligere har brukt utstyret. Derfor er enkelhet og tydelighet avgjørende. Alle funksjoner skal være så intuitive som mulig, samtidig som de dekker behovene i undervisningssituasjoner. For å ivareta dette er panelet organisert med hovedmenyer for de mest brukte funksjonene, og undermenyer for utstyr og valg som benyttes mer sjelden.
I tillegg finnes det en egen tekniker-meny som kun kan åpnes med PIN-kode «00000». Denne er forbeholdt AV-ansvarlige og supportpersonell, og gir tilgang til funksjoner for feilsøking, statusvisning, oppsett og justeringer.
Enkelhet, gjenkjennbarhet og konsistens er helt sentralt i designet. Alle undervisningsrom skal ha samme logikk, struktur og grafiske uttrykk, slik at brukerne alltid møter et kjent grensesnitt uavhengig av rom.


Rammer
• Format: 16:9 liggende.
• Panelets fysiske størrelse: 10”.
• Input: kun touch. Alle knapper og elementer må være store nok til komfortabel bruk (minimum 44x44 px).
• Universell utforming: WCAG 2.1 AA minimum, helst AAA.

Overordnet stil
• Minimalistisk og rent design.
• Store hvite flater med tydelig avgrensede bokser
• Ingen unødvendige grafiske elementer – kun det som er funksjonelt.
• Høy kontrast mellom bakgrunn, ikoner og tekst.

Helhetsinntrykk
• Ryddig, oversiktlig og intuitivt.
• Enkelt nok for uerfarne brukere, men kraftig nok til å dekke alle behov.
• Designet skal være konsekvent i alle rom for gjenkjennelse og trygghet.

Funksjoner og beskrivelse av menyer:

Oppstart
Når skjermen berøres, våkner panelet.
Skjermen viser «Start rom». Når denne trykkes, trigges oppstart av systemet (lyd, bilde, kamera).

Standardoppsett ved oppstart:
• Bilde-meny vises som default i hovedfelt.
•
Fast topplinje (alltid synlig)
• Språkvalg: toggle mellom Norsk og English.
• NTNU-logo: sentrert, kun i NTNU-blå.
• Hjelp-knapp: åpner hjelpetekst eller QR-kode.
• Opptaksindikasjon: ikon som viser rødt/grønt avhengig av om opptak er aktivt/bestilt.
All tekst og info på knapper skal være tilgjengelig i både Norsk bokmål og Engelsk. Når man trigger mellom språk så skal de bytte på alle deler av designet.

Fast Høyre meny (alltid synlig)
• Programvolum opp/ned (fader som får fra 0-100%) samt + og – tegn under som også kan brukes.
• Mute-knapp for programlyd (Grønn = På, Rød = Av).

Fast bunnmeny (navigasjon)
Navigasjonslinjen er alltid synlig nederst. Knappene endrer innhold i hovedfeltet.
• Hovedmeny (ikon: hus)
• Bilde (ikon: skjerm/projektor)
• Lyd (ikon: høyttaler)
• Lys (ikon: lyspære)
• Gardin og lerret (ikon: rullegardin/lerret)
• Kamera (ikon: kamera)
• Tekniker (ikon: verktøy, skjult for lærere)
• Avslutt (ikon: power-symbol)

Hovedfelt per menyvalg
• Minimalistisk og rent design.
• Store hvite flater med tydelig avgrensede bokser for kilder og destinasjoner.





Bilde:
Hovedfelt
• Delt i to seksjoner:
o Kilder øverst: bokser med ikoner og tekst (NTNU PC, Laptop HDMI, Dokumentkamera).
o Destinasjoner nederst: egne bokser for Projektor 1, Projektor 2 (ev. 3), med instruksjonstekst «Dra kilde hit».
o Bredde settes av kilde koksene, men destinasjon boksene skal tilpasse størrelse og midstille samt fylle feltet i menyen.
• Når en kilde dras ned til en destinasjon, legges ikon + tekst synlig inn i boksen for å bekrefte valget.
• Dersom man drar bort en kilde, blir destinasjonen tom igjen.
• Drar man ned en ny kilde til samme destinasjon, erstatter den forrige.
• Boksene skal ha avrundede hjørner og en lett skygge for å tydeliggjøre interaktive områder.


Denne menyen brukes til å rute kilder til destinasjoner ved hjelp av Drag’n Drop.
• Øverste linje viser alle kilder i en egen boks: NTNU-PC, Laptop, Dokumentkamera, Bilde Av.
• Nederste del viser destinasjoner, én boks per skjerm/projektor. Standardoppsett er to destinasjoner: «Projektor 01» og «Projektor 02», men i noen rom finnes én eller tre.

Bruk av Drag’n Drop
• Brukeren trykker og holder på ønsket kilde (ikon + tekst).
• Når kilden dras ned til en destinasjonsboks, legges ikonet med tekst synlig der som en tydelig indikasjon på valgt kilde.
• Dersom man drar en ny kilde til en destinasjon som allerede har en kilde, erstattes den forrige automatisk.
• Dersom brukeren drar kilden ut av destinasjonsboksen, blir destinasjonen tom igjen.
• Høyttalerikon i høyre hjørne på destinasjonsboksen viser hvilken kilde som gir programlyd. Sist rutet kilde blir lydkilden (grønn = aktiv, rød = inaktiv).

Lyd
• Justering av mikrofonvolum opp/ned på fader. (Mic1, Mic2, Mic3, Mic4) og en mute knapp for hver mikrofon.
• Mulighet til å velge eller overstyre hvilken kilde som sender ut programlyd. (list alle bildekilder og mulighet til å velge blandt de hvem som skal gå ut på anelegget. Denne overstyrer da funksjon som vbruker siste valgte kilde.
Lys
Presets med Av/På-funksjon:
• Alt lys Av/På
• Podielys Av/På
• Tavlelys Av/På
• Videolys Av/På
Faders (0–100 %):
• Lys i sal
• Lys på podie

Gardin og lerret
• Lerret 1 og 2: opp, ned, stopp.
• Gardiner: opp, ned, stopp.

Kamera (lærer)
Preset-basert styring:
• Tavle (default ved oppstart)
• Kateter
• Podium
• Tavle venstre
• Tavle midt
• Tavle høyre
Egne knapper for tracking: Kamera tracking På / Av.

Avslutt
• Dialog med valg: Avslutt, Tilbake til hovedmeny, Avbryt.
• Tilbakemeldingsspørsmål: «Hvordan fungerte rommet i dag?»
• Bruker velger grønn, gul eller rød smiley. Resultat lagres og vises i teknikermeny + eksternt system.

Teknikermeny (skjult for lærere)
Passordbeskyttet meny med avanserte funksjoner.
Valg:
• Systeminnstillinger
• Lydmikser
• Videomikser
• Pare mikrofon
• Kamera (full PTZ)
• Tilbakemeldinger
• Feilsøking
Systeminnstillinger
Endring av teknikerpassord. Viser Crestron-versjon, sist endret, programmerer/firma.
Lydmikser
Inputs: Mic1–Mic4, mute og ±20 dB justering.
Outputs: Panopto, ZoomRom, tappinger, med ±20 dB justering.
Videomikser
Ruting til Panopto input 1–3 og tappinger.
Pare mikrofon
«Pair now»-knapper for Sennheiser-mottakere.
Kamera (tekniker)
Full PTZ-kontroll. Lagre og overskrive presets.
Tilbakemeldinger
Oversikt over antall grønne/gule/røde smileys siste måned.
Feilsøking
Viser status for alle enheter. Panelet pinger enheter hvert minutt, viser grønn/rød status.

Grafisk profil
Farger
Primærfarge: NTNU-blå
• RGB: 0,80,158
• HEX: #00509e
• CMYK: 100,75,0,5
Sekundærfarger: sort og grå.
Støttefarger (med lys/mørk variasjon):
• Lys blå (#6096d0, #3e628a, #cfdaf1)
• Blågrå (#253a55, #9db7e1)
• Beige (#7d705a, #eee5d5)
• Brun (#3d3732, #e0d0af)
• Oransje (#ef8114, #f4ac67, #90552a, #fdd9b5)
• Turkis (#3cbfbe, #2e7578, #d1eaeb)
• Gul (#f7d019, #fbdf7b, #8d7835, #fdf0c4)
• Lilla (#b01b81, #c871ac, #75225e, #e3bcda)
• Mørk lilla (#482776, #7f619c, #372557, #beafd0)
• Grønn (#bcd025, #7c8934, #ebf0c4)
Bruk alltid NTNU-blå som grunnmur. Støttefarger kun i kombinasjon med blå, og maksimalt én per skjermbilde.

Skrifttyper og typografi
• Open Sans er obligatorisk. Arial kun som fallback.
• Tre nivåer:
o Nivå 1: Hovedtitler og viktige knapper. Open Sans Bold, 18–20 pt.
o Nivå 2: Menyelementer og navigasjon. Open Sans Semibold, 16–18 pt.
o Nivå 3: Brødtekst og status. Open Sans Regular, 14–16 pt.
• Linjeavstand: 120–140 % av fontstørrelse.
• Ingen bruk av kursiv eller versaler i hele ord.
• Bold brukes kun for hierarki, ikke i løpende tekst.

Ikoner
Ikoner skal være universelt gjenkjennelige og alltid ledsages av tekst.
Standard: hus (hovedmeny), skjerm/projektor (bilde), høyttaler (lyd), lyspære (lys), rullegardin (gardin/lerret), kamera (kamera), verktøy (tekniker), power (avslutt).
Ikonfarge: hvit på blå bakgrunn, blå på lys bakgrunn.

Layout og universell utforming
• God avstand mellom interaktive elementer for å unngå feiltrykk.
• Tydelig kontrast mellom aktiv og inaktiv status.
• Luftige flater og asymmetrisk balanse (jf. NTNUs designprinsipper).

README.md

@@ -1,10 +1,13 @@
 ---
-title: Edutouch Control Hub
-emoji: 🏃
-colorFrom: indigo
-colorTo: gray
+title: EduTouch Control Hub 🎛️
+colorFrom: purple
+colorTo: green
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://deepsite.hf.co).

index.html

@@ -1,19 +1,269 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>EduTouch Control Hub</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        ntnu: {
+                            DEFAULT: '#00509e',
+                            100: '#cfdaf1',
+                            500: '#00509e',
+                            700: '#253a55',
+                            900: '#0a1a2d'
+                        },
+                        accent: {
+                            green: '#bcd025',
+                            red: '#ef4444',
+                            yellow: '#f7d019',
+                            orange: '#ef8114'
+                        }
+                    },
+                    fontFamily: {
+                        sans: ['Open Sans', 'Arial', 'sans-serif']
+                    }
+                }
+            }
+        }
+    </script>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap');
+        body {
+            font-family: 'Open Sans', sans-serif;
+            touch-action: manipulation;
+        }
+        .drag-source {
+            touch-action: none;
+            user-select: none;
+        }
+        .drop-target {
+            transition: all 0.2s ease;
+        }
+        .drop-target.active {
+            box-shadow: 0 0 0 2px #00509e;
+        }
+        .icon-btn {
+            min-width: 44px;
+            min-height: 44px;
+        }
+    </style>
+</head>
+<body class="bg-ntnu-100 text-ntnu-900 h-screen overflow-hidden flex flex-col">
+    <!-- Top Bar -->
+    <header class="bg-ntnu-500 text-white p-2 flex items-center justify-between">
+        <div class="flex items-center space-x-4">
+            <button class="icon-btn p-2 rounded-full hover:bg-ntnu-700 transition">
+                <i data-feather="globe"></i>
+            </button>
+            <span class="font-bold">NO/EN</span>
+        </div>
+        <div class="flex-1 flex justify-center">
+            <img src="http://static.photos/white/320x240/1" alt="NTNU Logo" class="h-10">
+        </div>
+        <div class="flex items-center space-x-4">
+            <button class="icon-btn p-2 rounded-full hover:bg-ntnu-700 transition">
+                <i data-feather="help-circle"></i>
+            </button>
+            <div class="w-8 h-8 rounded-full bg-accent-red flex items-center justify-center">
+                <i data-feather="circle" class="text-white" fill="currentColor"></i>
+            </div>
+        </div>
+    </header>
+
+    <!-- Main Content -->
+    <main class="flex-1 flex overflow-hidden">
+        <!-- Right Audio Panel -->
+        <div class="w-20 bg-ntnu-700 text-white flex flex-col items-center p-4 space-y-6">
+            <div class="text-center">
+                <p class="text-sm mb-1">Volume</p>
+                <input type="range" min="0" max="100" value="75" 
+                    class="w-8 h-32 -rotate-90 mt-16 accent-white">
+            </div>
+            <button class="icon-btn bg-accent-green rounded-full p-2 flex flex-col items-center">
+                <i data-feather="volume-2" class="text-white"></i>
+                <span class="text-xs mt-1">Mute</span>
+            </button>
+        </div>
+
+        <!-- Central Content -->
+        <div class="flex-1 p-6 overflow-auto">
+            <div class="max-w-4xl mx-auto">
+                <h1 class="text-2xl font-bold mb-6 text-ntnu-900">Bilde</h1>
+                
+                <!-- Sources Section -->
+                <div class="mb-8">
+                    <h2 class="text-lg font-semibold mb-4">Kilder</h2>
+                    <div class="grid grid-cols-3 gap-4">
+                        <div class="drag-source bg-white rounded-lg shadow-md p-4 flex flex-col items-center justify-center cursor-move"
+                            draggable="true" data-source="ntnu-pc">
+                            <i data-feather="monitor" class="text-ntnu-500 w-10 h-10 mb-2"></i>
+                            <span class="font-medium">NTNU PC</span>
+                        </div>
+                        <div class="drag-source bg-white rounded-lg shadow-md p-4 flex flex-col items-center justify-center cursor-move"
+                            draggable="true" data-source="laptop">
+                            <i data-feather="laptop" class="text-ntnu-500 w-10 h-10 mb-2"></i>
+                            <span class="font-medium">Laptop HDMI</span>
+                        </div>
+                        <div class="drag-source bg-white rounded-lg shadow-md p-4 flex flex-col items-center justify-center cursor-move"
+                            draggable="true" data-source="doc-cam">
+                            <i data-feather="video" class="text-ntnu-500 w-10 h-10 mb-2"></i>
+                            <span class="font-medium">Dokumentkamera</span>
+                        </div>
+                    </div>
+                </div>
+                
+                <!-- Destinations Section -->
+                <div>
+                    <h2 class="text-lg font-semibold mb-4">Destinasjoner</h2>
+                    <div class="grid grid-cols-2 gap-6">
+                        <div class="drop-target bg-white rounded-lg shadow-md p-6 h-48 flex flex-col justify-center items-center border-2 border-dashed border-ntnu-100"
+                            data-destination="projector-1">
+                            <p class="text-ntnu-700 mb-4">Dra kilde hit</p>
+                            <div class="source-placeholder hidden flex-col items-center">
+                                <i data-feather="monitor" class="text-ntnu-500 w-10 h-10 mb-2"></i>
+                                <span class="font-medium"></span>
+                                <div class="mt-4 w-8 h-8 rounded-full bg-accent-green flex items-center justify-center">
+                                    <i data-feather="volume-2" class="text-white w-4 h-4"></i>
+                                </div>
+                            </div>
+                            <span class="mt-4 font-medium">Projektor 1</span>
+                        </div>
+                        <div class="drop-target bg-white rounded-lg shadow-md p-6 h-48 flex flex-col justify-center items-center border-2 border-dashed border-ntnu-100"
+                            data-destination="projector-2">
+                            <p class="text-ntnu-700 mb-4">Dra kilde hit</p>
+                            <div class="source-placeholder hidden flex-col items-center">
+                                <i data-feather="monitor" class="text-ntnu-500 w-10 h-10 mb-2"></i>
+                                <span class="font-medium"></span>
+                                <div class="mt-4 w-8 h-8 rounded-full bg-ntnu-100 flex items-center justify-center">
+                                    <i data-feather="volume-x" class="text-ntnu-700 w-4 h-4"></i>
+                                </div>
+                            </div>
+                            <span class="mt-4 font-medium">Projektor 2</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </main>
+
+    <!-- Bottom Navigation -->
+    <nav class="bg-white shadow-lg p-2">
+        <div class="flex justify-around max-w-2xl mx-auto">
+            <button class="icon-btn flex flex-col items-center text-ntnu-500">
+                <i data-feather="home" class="w-6 h-6"></i>
+                <span class="text-xs mt-1">Hjem</span>
+            </button>
+            <button class="icon-btn flex flex-col items-center text-ntnu-500 bg-ntnu-100 rounded-lg">
+                <i data-feather="monitor" class="w-6 h-6"></i>
+                <span class="text-xs mt-1">Bilde</span>
+            </button>
+            <button class="icon-btn flex flex-col items-center text-ntnu-500">
+                <i data-feather="volume-2" class="w-6 h-6"></i>
+                <span class="text-xs mt-1">Lyd</span>
+            </button>
+            <button class="icon-btn flex flex-col items-center text-ntnu-500">
+                <i data-feather="sun" class="w-6 h-6"></i>
+                <span class="text-xs mt-1">Lys</span>
+            </button>
+            <button class="icon-btn flex flex-col items-center text-ntnu-500">
+                <i data-feather="layers" class="w-6 h-6"></i>
+                <span class="text-xs mt-1">Gardin</span>
+            </button>
+            <button class="icon-btn flex flex-col items-center text-ntnu-500">
+                <i data-feather="video" class="w-6 h-6"></i>
+                <span class="text-xs mt-1">Kamera</span>
+            </button>
+            <button class="icon-btn flex flex-col items-center text-ntnu-500">
+                <i data-feather="settings" class="w-6 h-6"></i>
+                <span class="text-xs mt-1">Tekniker</span>
+            </button>
+            <button class="icon-btn flex flex-col items-center text-ntnu-500">
+                <i data-feather="power" class="w-6 h-6"></i>
+                <span class="text-xs mt-1">Avslutt</span>
+            </button>
+        </div>
+    </nav>
+
+    <script>
+        feather.replace();
+        
+        // Drag and Drop functionality
+        document.addEventListener('DOMContentLoaded', () => {
+            const dragSources = document.querySelectorAll('.drag-source');
+            const dropTargets = document.querySelectorAll('.drop-target');
+            
+            let draggedItem = null;
+            
+            // Drag start
+            dragSources.forEach(source => {
+                source.addEventListener('dragstart', (e) => {
+                    draggedItem = source;
+                    e.dataTransfer.setData('text/plain', source.dataset.source);
+                    setTimeout(() => {
+                        source.classList.add('opacity-0');
+                    }, 0);
+                });
+                
+                source.addEventListener('dragend', () => {
+                    source.classList.remove('opacity-0');
+                });
+            });
+            
+            // Drag over
+            dropTargets.forEach(target => {
+                target.addEventListener('dragover', (e) => {
+                    e.preventDefault();
+                    target.classList.add('active');
+                });
+                
+                target.addEventListener('dragleave', () => {
+                    target.classList.remove('active');
+                });
+                
+                target.addEventListener('drop', (e) => {
+                    e.preventDefault();
+                    target.classList.remove('active');
+                    
+                    if (draggedItem) {
+                        const sourceType = draggedItem.dataset.source;
+                        const placeholder = target.querySelector('.source-placeholder');
+                        const icon = placeholder.querySelector('i');
+                        const text = placeholder.querySelector('span');
+                        
+                        // Update placeholder with dragged item content
+                        const draggedIcon = draggedItem.querySelector('i');
+                        const draggedText = draggedItem.querySelector('span');
+                        
+                        icon.setAttribute('data-feather', draggedIcon.getAttribute('data-feather'));
+                        text.textContent = draggedText.textContent;
+                        
+                        placeholder.classList.remove('hidden');
+                        target.querySelector('p').classList.add('hidden');
+                        
+                        // Update audio indicator (green for last selected)
+                        const audioIndicators = document.querySelectorAll('.drop-target .source-placeholder > div');
+                        audioIndicators.forEach(indicator => {
+                            indicator.classList.remove('bg-accent-green');
+                            indicator.classList.add('bg-ntnu-100');
+                            indicator.querySelector('i').setAttribute('data-feather', 'volume-x');
+                        });
+                        
+                        target.querySelector('.source-placeholder > div').classList.remove('bg-ntnu-100');
+                        target.querySelector('.source-placeholder > div').classList.add('bg-accent-green');
+                        target.querySelector('.source-placeholder > div i').setAttribute('data-feather', 'volume-2');
+                        
+                        feather.replace();
+                    }
+                });
+            });
+        });
+    </script>
+</body>
 </html>