website/about.html at master · cosmiccableltd/website · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="description" content="Cosmic Cable Ltd. - Who the funk is that?" />
    <meta name="author" content="Cosmic Cable Ltd." />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>About – Cosmic Cable Ltd.</title>
    <link rel="icon" href="assets/CCLtd_fav.png" type="image/png" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"
    />
    <link href="css/normalize.css" rel="stylesheet" />
    <link href="css/skeleton.min.css" rel="stylesheet" />
    <link href="css/about.css" rel="stylesheet" />
  </head>
  <body>
    <main class="container">

      <a href="index.html" class="back-link">
        <i class="fas fa-arrow-left"></i> Back
      </a>

      <h1>About Cosmic Cable Ltd.</h1>
      <p>
        Cosmic Cable is the lost cause of a post-bureaucratic telephone network provider mostly run by a crew of the best rogue technicians.<br/>
        Founded in 2016 as an alternative to the bad mobile network at Lärz, Germany, it provides the most stylish telephone booths at both <a href="http://www.fusion-festival.de/" target="_blank">Fusion Festival</a> and <a href="https://www.attension-festival.de/en/festival" target="_blank">at.tension Festival</a> to connect participants. The telephone network is complemented by additional well-known Cosmic Cable services like the “Status Box” which provides asynchronous communication for guests as well as yearly changing entertainment options.
      </p>

     <h1 class="about-title">ARTWORKS</h1>

<div class="carousel-container">
  <button class="nav-arrow left">‹</button>
  <div class="carousel-track">
     <div class="card" data-index="0">
      <img src="assets/poster/2025.jpg" alt="Fusion 2024" data-year="2025" />
    </div>
    <div class="card" data-index="1">
      <img src="assets/poster/2024.jpg" alt="Fusion 2024" data-year="2024" />
    </div>
    <div class="card" data-index="2">
      <img src="assets/poster/2023.jpg" alt="Fusion 2023" data-year="2023" />
    </div>
    <div class="card" data-index="3">
      <img src="assets/poster/2022.jpg" alt="Fusion 2022" data-year="2022" />
    </div>
    <div class="card" data-index="4">
      <img src="assets/poster/2019.jpg" alt="Fusion 2019" data-year="2019" />
    </div>
    <div class="card" data-index="5">
      <img src="assets/poster/2018.jpg" alt="Fusion 2018" data-year="2018" />
    </div>
    <div class="card" data-index="6">
      <img src="assets/poster/2016.jpg" alt="Fusion 2016" data-year="2016" />
    </div>
  </div>
  <button class="nav-arrow right">›</button>
</div>

<div class="poster-info">
  <h2 class="poster-title">Fusion</h2>
</div>

<div class="dots">
  <div class="dot active" data-index="0"></div>
  <div class="dot" data-index="1"></div>
  <div class="dot" data-index="2"></div>
  <div class="dot" data-index="3"></div>
  <div class="dot" data-index="4"></div>
   <div class="dot" data-index="5"></div>
</div>

<!-- Lightbox -->
<div class="lightbox" id="lightbox">
  <span class="close-btn" id="closeBtn">&times;</span>
  <img class="lightbox-img" id="lightboxImg" src="" alt="Poster Großansicht" />
</div>

<h2 class="about-title">IMPRESSIONS</h2>
<div class="impressions-gallery">
  <img src="assets/impressions/imression_1.jpg" alt="Impression 1" class="impression" />
  <img src="assets/impressions/imression_2.jpg" alt="Impression 2" class="impression" />
  <img src="assets/impressions/imression_3.jpg" alt="Impression 3" class="impression" />
    <img src="assets/impressions/imression_4.jpg" alt="Impression 4" class="impression" />
  <img src="assets/impressions/imression_5.jpg" alt="Impression 5" class="impression" />
  <img src="assets/impressions/imression_6.jpg" alt="Impression 6" class="impression" />
</div>


      <h2>Technical Setup</h2>
      <p>
        Within the Cosmic Cable network, everything starts with a classic rotary dial telephone. Since building a whole analog telephone network is very time-consuming, we initially used old Fritz!Box devices (Texas Instruments AR7 single-core MIPS4K SoC with Infineon SLICs) to adapt the telephones to a TCP/IP-based network. From then on, we used all kinds of standard networking gear. On the festival site, we often use Ubiquiti gear to establish radio links when no cable links are available. As a software PBX, we run an <a href="https://www.asterisk.org/" target="_blank">Asterisk</a> setup, which implements the service features that Cosmic Cable offers. The configuration is <a href="https://github.com/cosmiccableltd" target="_blank">publicly available on GitHub</a>.<br/>
        Another important part of attractive telephone booths is the audiovisual ringing, which combines the classic ringtone with other effects such as blinking lights and a flamethrower. To trigger such events, we have used two different concepts over the years.<br/>
        First, we used custom relay and driver PCBs connected to the second analog port on the Fritz!Box. The Asterisk server then automatically called the corresponding number in response to specific events. We developed our so-called 'Mystery Box', which features an analog telephone pass-through and a 12V output that toggles continuously while the line is ringing. The box also provides connection terminals for 12V-powered lighting as well as a passive PoE injector to power the Nanostations.<br/>
        Although rotary dial phones are awesome, they come with significant limitations. The most important thing is to adapt them to a digital network in a simple but flexible way. The old Fritz!Boxes were cheap and easy to acquire, but configuration was impossible to automate; there was no software support; and — most annoyingly — once dialing was complete, you couldn't enter additional numbers, preventing the use of interactive menus.<br/>
        We therefore started to use more and more new and even cheaper router boxes (Arcadyan ARV7506PW11 aka Alice/O2 IAD 4421, based on Lantiq Danube dual-core MIPS34KEc SoC with Infineon SLICs) which can be flashed with up-to-date open-source firmware based on OpenWrt/Linux. This allows us to run Asterisk on the device itself and control almost every aspect of the telephony stack, overcoming the limitations of the ancient Fritz!Box's proprietary firmware. In addition, we gained a USB 2.0 port as well as a Ralink Rt3592 802.11n 2.4 GHz WiFi chip.<br/>
        After an initial test run in 2024, we replaced all Fritz!Boxes and began working on a new revision of the Mystery Box, which, instead of being a simple relay hooked to an analog phone line, is now based on an ESP32 microcontroller, connects via USB, and provides all sorts of fancy features, including the control of LED pixels and DMX gear.
During the events, we also visualize the ongoing phone calls on a map. See the GitHub repository at <a href='https://github.com/dronus/asterisk_vis'>github.com/dronus/asterisk_vis</a>.
      </p>
    </main>

    <footer class="footer">
      <a href="index.html" class="back-link">
        <i class="fas fa-arrow-left"></i> Back
      </a>
      <a href="https://github.com/cosmiccableltd" target="_blank" rel="noopener noreferrer">
        <i class="fab fa-github"></i> Cosmic Configuration on GitHub
      </a>
      <a href="http://cosmic.cable.limited/intern/" target="_blank">
        <i class="fas fa-tools"></i> Entrée technicienne
      </a>
    </footer>
  <script>
  const cards = document.querySelectorAll(".card");
  const dotsContainer = document.querySelector(".dots");
  const posterTitle = document.querySelector(".poster-title");
  const leftArrow = document.querySelector(".nav-arrow.left");
  const rightArrow = document.querySelector(".nav-arrow.right");

  const lightbox = document.getElementById("lightbox");
  const lightboxImg = document.getElementById("lightboxImg");
  const closeBtn = document.getElementById("closeBtn");

  let currentIndex = 0;
  let isAnimating = false;

  dotsContainer.innerHTML = "";
  cards.forEach((_, i) => {
    const dot = document.createElement("div");
    dot.classList.add("dot");
    if (i === 0) dot.classList.add("active");
    dot.dataset.index = i;
    dotsContainer.appendChild(dot);
  });

  const dots = document.querySelectorAll(".dot");

  function getPosterYear(index) {
    const img = cards[index].querySelector("img");
    return img?.dataset.year || "";
  }

  function updateCarousel(newIndex) {
    if (isAnimating) return;
    isAnimating = true;

    currentIndex = (newIndex + cards.length) % cards.length;

    cards.forEach((card, i) => {
      const offset = (i - currentIndex + cards.length) % cards.length;
      card.classList.remove("center", "left-1", "left-2", "right-1", "right-2", "hidden");

      if (offset === 0) card.classList.add("center");
      else if (offset === 1) card.classList.add("right-1");
      else if (offset === 2) card.classList.add("right-2");
      else if (offset === cards.length - 1) card.classList.add("left-1");
      else if (offset === cards.length - 2) card.classList.add("left-2");
      else card.classList.add("hidden");
    });

    dots.forEach((dot, i) => {
      dot.classList.toggle("active", i === currentIndex);
    });

    posterTitle.textContent = "Fusion " + getPosterYear(currentIndex);

    setTimeout(() => {
      isAnimating = false;
    }, 800);
  }

  // Navigation
  leftArrow.addEventListener("click", () => updateCarousel(currentIndex - 1));
  rightArrow.addEventListener("click", () => updateCarousel(currentIndex + 1));

  dots.forEach((dot) => {
    dot.addEventListener("click", () => updateCarousel(parseInt(dot.dataset.index)));
  });

  // Bild in Lightbox öffnen
  cards.forEach((card) => {
    card.addEventListener("click", () => {
      const img = card.querySelector("img");
      lightboxImg.src = img.src;
      lightbox.style.display = "flex";
    });
  });

  document.querySelectorAll(".impression").forEach((img) => {
  img.addEventListener("click", () => {
    lightboxImg.src = img.src;
    lightbox.style.display = "flex";
  });
});

  // Lightbox schließen
  closeBtn.addEventListener("click", () => {
    lightbox.style.display = "none";
    lightboxImg.src = "";
  });

  lightbox.addEventListener("click", (e) => {
    if (e.target === lightbox) {
      lightbox.style.display = "none";
      lightboxImg.src = "";
    }
  });

  // Touch support
  let touchStartX = 0;
  let touchEndX = 0;

  document.addEventListener("touchstart", (e) => {
    touchStartX = e.changedTouches[0].screenX;
  });

  document.addEventListener("touchend", (e) => {
    touchEndX = e.changedTouches[0].screenX;
    const swipeThreshold = 50;
    const diff = touchStartX - touchEndX;

    if (Math.abs(diff) > swipeThreshold) {
      if (diff > 0) updateCarousel(currentIndex + 1);
      else updateCarousel(currentIndex - 1);
    }
  });

  // Tastatursteuerung
  document.addEventListener("keydown", (e) => {
    if (e.key === "ArrowLeft") updateCarousel(currentIndex - 1);
    else if (e.key === "ArrowRight") updateCarousel(currentIndex + 1);
  });

  updateCarousel(0);
</script>
  </body>
</html>