update example

CyCoreSystems · Nov 26, 2023 · 8a6c0f9 · 8a6c0f9
1 parent b0a8a44
commit 8a6c0f9
Show file tree

Hide file tree

Showing 11 changed files with 284 additions and 8 deletions.
diff --git a/example/css/admin.css b/example/css/admin.css
@@ -0,0 +1,14 @@
+body {
+	background-color: black;
+	color: white;
+}
+
+ul li {
+	list-style: none;
+	padding-top: 20px;  
+	} 
+
+.sourceText {
+	font-size: 20px;
+}
+.referenceTime { padding-left: 7px;  }
diff --git a/example/css/master.css b/example/css/master.css
@@ -0,0 +1,97 @@
+* { 
+	box-sizing: border-box;
+	margin: 0;
+	padding: 0;
+	font-family: sans-serif;
+	font-size: 1em;
+	background: black;
+	color: white;
+	line-height: 1.1em;
+
+}
+
+ul {
+	list-style: none;
+	width: 100%;
+	height: 100%;
+	//display: flex;
+	//flex-direction: column;
+	//justify-content: space-evenly; 
+}
+
+li {
+	padding: 5px 10px;
+	//height: 1em;
+	//box-shadow: inset 0 0 5px 5px white;
+	//flex-grow: 1;
+
+}
+   li#preshow { 
+      margin-top: 3em; 
+      font-size: 2em;
+      line-height: 2.4em;
+   }
+      #big a {
+         display: block;
+         padding: 30px; 
+         background: #222;
+         margin: 20px;
+
+      }
+
+div#map {
+  background-color: cyan;
+}
+
+button#playButton {
+   width: 100%;
+   height: 100%;
+   min-height: 100%;
+	font-size: 8em;
+	line-height: 4.4em;
+}
+
+.pure-button-active {
+   background-color: blue;
+}
+
+.white { color: white; }
+
+input[type=checkbox].selector {
+   position: absolute;
+   left: -9999px;
+}
+label.selectme {
+   display: inline-block; 
+   background: #222;
+   padding: 10px 20px;
+   font-weight: bold;
+ //  font-size: 1.5em;
+   border: 1px solid #444;
+   cursor: pointer;
+   margin: 20px 0 20px 10px;
+   text-align: center;
+}
+
+div.selectorstatus {
+   display: inline-block;
+   background: #777;
+   border: 1px solid #888;
+   width: 40px; 
+   padding: 10px 0px;
+   margin: 0px 0 0 -15px;
+   content: "  ";
+}
+
+input[type=checkbox]:checked ~ div.selectorstatus {
+   background: #22bb24;
+   border: 1px solid #11aa11;
+}
+
+button#play {
+   padding: 10px 20px;
+   font-size: 1.5em;
+   border: 1px solid #efefef;
+   margin: 20px 0 20px 60px;
+   background-color: grey;
+}
diff --git a/example/css/pure.css b/example/css/pure.css
diff --git a/example/js/admin.js b/example/js/admin.js
@@ -0,0 +1,7 @@
+import {TriggerCue,BindCueStatus} from '/app/admin.js'
+
+window.triggerCue = TriggerCue
+
+window.onload = function() {
+   BindCueStatus("lastCue", "sinceLastCue")
+}
diff --git a/example/js/index.js b/example/js/index.js
@@ -0,0 +1,12 @@
+import {PerformanceTime} from '/app/app.js'
+
+window.onload = function() {
+   let performanceTime = new PerformanceTime()
+
+   // Performance redirect
+   var performanceURL = 'https://my.domain.com/live'
+
+   performanceTime.addEventListener('Speech', function() {
+      window.location.href = performanceURL
+   })
+}
diff --git a/example/js/room.js b/example/js/room.js
@@ -0,0 +1,11 @@
+import {LoadAgenda,PerformanceTime,SpatialRoom,TrackRoom} from '/app/app.js'
+
+window.onload = function() {
+   LoadAgenda(function(agenda) {
+      let room = new SpatialRoom({
+         roomName: document.getElementById("roomName").value,
+         agenda: agenda,
+      })
+   })
+}
+
diff --git a/example/js/tracks.js b/example/js/tracks.js
@@ -0,0 +1,21 @@
+import {LoadAgenda,PerformanceTime,TrackRoom} from '/app/app.js'
+
+let performanceTime = new PerformanceTime()
+let button = document.getElementById('play')
+let startCue = 'Speech'
+
+window.onload = LoadAgenda( function(agenda) {
+   TrackRoom(document.getElementById("roomName").value, agenda)
+
+   button.innerHTML = "Waiting for Performance"
+
+   performanceTime.addEventListener('timeSync', function cb() {
+      if(performanceTime.sinceCue(startCue) < 0) {
+         return
+      }
+      button.innerHTML = "Live"
+      performanceTime.removeEventListener('timeSync', cb)
+   })
+
+})
+
diff --git a/example/views/admin.html b/example/views/admin.html
@@ -0,0 +1,29 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<meta http-equiv="x-ua-compatible">
+
+	<title>Audimance - Administrative Interface</title>
+
+   <link rel="stylesheet" href="/css/admin.css">
+</head>
+<body>
+
+	<h3>Last Cue:</h3>
+	<div class="lastCue">
+		<span class="lastCueName" id="lastCue">-none-</span>
+		<span class="lastCueTime" id="sinceLastCue">-:--</span>
+	</div>
+
+	<h3>Available Cues:</h3>
+
+	<ul>
+		{{range .Cues}}
+		<li><button onclick="window.triggerCue({{.ID}})">{{.Name}}</button><span class="referenceTime">{{.FormattedReferenceTime}}</span></li>
+		{{end}}
+	</ul>
+
+	<script type="module" src="/js/admin.js"></script>
+</body>
+</html>
diff --git a/example/views/index.html b/example/views/index.html
@@ -5,16 +5,20 @@
 	<meta http-equiv="x-ua-compatible">
 
 	<title>Audimance - Room List</title>
+
+   <link rel="stylesheet" href="/css/pure.css"/>
+   <link rel="stylesheet" href="/css/master.css"/>
 </head>
 <body>
 
-	Rooms List:
-
-	<ul>
-		{{range .Rooms}}
-		<li><a href="/room/{{.ID}}">{{.LabelText}}</a></li>
-		{{end}}
-	</ul>
-
+   <ul id="preshow">
+         <li> Welcome to Audimance </li>
+         <li> Message from our sponsor: 5 minutes
+            <audio controls>
+               <source src="media/static/test.webm" />
+               <source src="media/static/test.mp3" />
+            </audio>
+         </li>
+   </ul>
 </body>
 </html>
diff --git a/example/views/live.html b/example/views/live.html
@@ -0,0 +1,33 @@
+
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<meta http-equiv="x-ua-compatible">
+   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+	<title>Audimance - WIRED Performance</title>
+
+   <link rel="stylesheet" href="/css/pure.css">
+   <link rel="stylesheet" href="/css/master.css">
+</head>
+<body>
+
+   <h3> Select your experience </h3>
+
+   <!-- this list contains links to the spatialised form of the live performance -->
+	<ul id="spatial">
+		{{range .Rooms}}
+		<li><a href="/room/{{.ID}}">Spatial Mixing {{.LabelText}}</a></li>
+		{{end}}
+	</ul>
+
+   <!-- this list contains links to the menu-based form of the live performance -->
+	<ul id="tracks">
+		{{range .Rooms}}
+		<li><a href="/tracks/{{.ID}}">Menu Mixing {{.LabelText}}</a></li>
+		{{end}}
+	</ul>
+
+</body>
+</html>
diff --git a/example/views/tracks.html b/example/views/tracks.html
@@ -0,0 +1,37 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<meta http-equiv="x-ua-compatible">
+   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+	<title>Audimance - Track-based interface</title>
+
+   <link rel="stylesheet" href="/css/pure.css">
+   <link rel="stylesheet" href="/css/master.css">
+</head>
+<body>
+
+   <!--div id="debug"></div -->
+	<input type="hidden" id="roomName" value="{{.Room.Name}}">
+
+   <h3> Status: <span id="play">Loading Program</span> </h3>
+
+   <h3> Mix your tracks: </h3>
+
+   <ul>
+      {{ range .Room.Sources }}
+      <li>
+         <label class="selectme" name="{{.ID}}" for="input-{{.ID}}">{{.Name}}</label>
+         <input type="checkbox" class="selector" name="{{.ID}}" id="input-{{.ID}}" />
+         <div class="selectorstatus">&nbsp;</div>
+         <audio id="audio-{{.ID}}"/>
+      </li>
+      {{ end }}
+   </ul>
+
+
+	<script type="module" src="/js/tracks.js"></script>
+
+</body>
+</html>