Automatische Willkommensseite hinzugefügt

.gitignore

@@ -3,6 +3,7 @@ __pycache__/
 test*
 *.old
 .venv/
+.DS_Store
 media/
 *.mp4
 *.mov

Dockerfile

@@ -0,0 +1,12 @@
+FROM python:3.12-slim
+
+WORKDIR /app
+
+COPY requirements.txt ./
+RUN pip install --no-cache-dir -r requirements.txt
+
+COPY . .
+
+EXPOSE 5005
+
+CMD ["python", "app.py"]

app.py

@@ -1,7 +1,9 @@
 import os
 import json
-import socket
 import hashlib
+# Import welcome page functions
+import generate_welcome_page
+
 from datetime import datetime
 
 from flask import (
@@ -16,6 +18,7 @@ from flask_login import (
 )
 from werkzeug.utils import secure_filename
 
+
 # -------------------------------------------------
 # Grundkonfiguration
 # -------------------------------------------------
@@ -101,6 +104,87 @@ def logout():
     logout_user()
     return redirect("/login")
 
+# -------------------------------------------------
+# Customer / Willkommensseite
+# -------------------------------------------------
+@app.route("/customer", methods=["GET", "POST"])
+@login_required
+def add_customer():
+    """Add new customer with logo search and welcome page"""
+    error = None
+    success = None
+    logo_url = None
+    
+    if request.method == "POST":
+        customer_name = request.form.get("customer_name", "").strip()
+        
+        if not customer_name:
+            error = "Kundenname erforderlich"
+        else:
+            try:
+                # Search for logo
+                logo_url = generate_welcome_page.search_customer_logo(customer_name)
+                
+                if not logo_url:
+                    error = "Logo konnte nicht gefunden werden"
+                else:
+                    # Generate and save welcome page
+                    html_filename = generate_welcome_page.save_welcome_page(customer_name, logo_url)
+                    
+                    if html_filename:
+                        # Add to lobby playlist
+                        if generate_welcome_page.add_customer_to_lobby_playlist(html_filename):
+                            success = f"✅ Kunde '{customer_name}' erfolgreich hinzugefügt!"
+                        else:
+                            error = "Fehler beim Hinzufügen zur Playliste"
+                    else:
+                        error = "Fehler beim Speichern der Willkommensseite"
+            except ValueError as e:
+                error = f"Konfigurationsfehler: {str(e)}"
+            except Exception as e:
+                error = f"Fehler: {str(e)}"
+    
+    return render_template("customer.html", error=error, success=success, logo_url=logo_url)
+
+@app.route("/api/customer", methods=["POST"])
+@login_required
+def api_add_customer():
+    """API endpoint for customer creation"""
+    try:
+        data = request.get_json()
+        customer_name = data.get("customer_name", "").strip()
+        
+        if not customer_name:
+            return jsonify({"error": "Customer name required"}), 400
+        
+        # Search for logo
+        logo_url = generate_welcome_page.search_customer_logo(customer_name)
+        
+        if not logo_url:
+            return jsonify({"error": "Logo not found"}), 400
+        
+        # Generate and save welcome page
+        html_filename = generate_welcome_page.save_welcome_page(customer_name, logo_url)
+        
+        if not html_filename:
+            return jsonify({"error": "Failed to create welcome page"}), 500
+        
+        # Add to lobby playlist
+        if generate_welcome_page.add_customer_to_lobby_playlist(html_filename):
+            return jsonify({
+                "success": True,
+                "message": f"Customer '{customer_name}' added successfully",
+                "welcome_page": html_filename,
+                "logo_url": logo_url
+            }), 201
+        else:
+            return jsonify({"error": "Failed to add to playlist"}), 500
+    
+    except ValueError as e:
+        return jsonify({"error": str(e)}), 400
+    except Exception as e:
+        return jsonify({"error": str(e)}), 500
+
 # -------------------------------------------------
 # Medien ausliefern
 # -------------------------------------------------
@@ -136,6 +220,8 @@ def player(screen):
             return show_images
         if ext.endswith(".mp4"):
             return show_videos
+        if ext.endswith((".html", ".htm")):
+            return True
         return False
 
     # ------------------------------
@@ -266,7 +352,13 @@ def admin():
                 continue
 
             ext = os.path.splitext(item)[1].lower()
-            ftype = "video" if ext == ".mp4" else "image"
+            if ext == ".mp4":
+                ftype = "video"
+            if ext in (".jpg", ".jpeg", ".png"):  
+                ftype = "image"
+            if ext == ".html":
+                ftype = "html"   
+
             size = os.path.getsize(file_path) // 1024
 
             files.append({

config.json

@@ -3,36 +3,49 @@
     "enabled": true,
     "playlist": [
       {
-        "url": "https://www.meteoblue.com/en/meteotv/d7b0fd",
+        "url": "https://wbxroompresence.cancom.io/standort?find=Stuttgart",
-        "zoom": 1.0
+        "zoom": 0.8
       }
     ]
   },
   "screens": {
     "lobby": {
-      "interval": 15,
+      "interval": 10,
       "show_images": true,
       "show_videos": false,
       "playlist": [
-        "Hilfe_KI.jpg",
+        "welcome.html",
-        "e00a687f-d82a-446d-b8f3-07895fbc7309.png",
-        "Video_CANCOM_LIVE_2025_Stuttgart.MP4",
         {
-          "url": "https://wbxroompresence.cancom.io/standort?find=Stuttgart",
+          "url": "https://www.meteoblue.com/en/meteotv/d7b0fd",
-          "zoom": 0.8
+          "zoom": 1.0
-        }
+        },
+        "Cancom_Leitsatz.JPG"
       ],
-      "newsticker_text": "Herzlich willkommen bei der CANCOM - wir begr\u00fc\u00dfen unsere G\u00e4ste - wir w\u00fcnschen ihnen einen sch\u00f6nen Tag",
+      "newsticker_text": "Herzlich Willkommen bei der CANCOM - wir begr\u00fc\u00dfen unsere G\u00e4ste und w\u00fcnschen Ihnen einen angenehmen Tag! !",
       "newsticker_enabled": true
     },
     "casino": {
-      "interval": 10,
+      "interval": 15,
       "show_images": true,
       "show_videos": true,
       "playlist": [
-        "https://wbxroompresence.cancom.io/standort?find=Stuttgart"
+        "https://wbxroompresence.cancom.io/standort?find=Stuttgart",
+        {
+          "url": "https://www.meteoblue.com/en/meteotv/d7b0fd",
+          "zoom": 1.0
+        },
+        "Video_CANCOM_Jahresruckblick_2025.MP4",
+        "Video_CANCOM_LIVE_2025_Stuttgart.MP4"
       ],
-      "newsticker_text": "Hallo dies ist der Newsticker",
+      "newsticker_text": "Herzlich willkommen bei der CANCOM - wir w\u00fcnschen ihnen einen sch\u00f6nen Tag",
+      "newsticker_enabled": true
+    },
+    "videosysteme": {
+      "interval": 20,
+      "show_images": false,
+      "show_videos": false,
+      "playlist": [],
+      "newsticker_text": "Hallo dies ist ein Test f\u00fcr Michael",
       "newsticker_enabled": false
     }
   },

docker-compose.yml

@@ -0,0 +1,17 @@
+version: "3.9"
+
+services:
+  signage:
+    container_name: signage
+    build:
+      context: .
+      dockerfile: Dockerfile
+      platforms:
+        - linux/amd64
+    image: gitea.teamthiele.de/ethiele/signage:latest
+    ports:
+      - "5005:5005"
+    restart: unless-stopped
+    environment:
+      - OPENAI_API_KEY= "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"
+      - BRANDFETCH_API_KEY = "eBwCQW_DcQ_jvdqZRNph0JBtRA36XoMTufaaU4AoirOBnqXX9fMqHDw7uYfiz8kSFYMNKGMZtuHxrmud9hn0WQ"

env.sh

@@ -0,0 +1,2 @@
+export OPENAI_API_KEY="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"
+export BRANDFETCH_API_KEY="eBwCQW_DcQ_jvdqZRNph0JBtRA36XoMTufaaU4AoirOBnqXX9fMqHDw7uYfiz8kSFYMNKGMZtuHxrmud9hn0WQ"

generate_welcome_page.py

@@ -0,0 +1,241 @@
+import os
+import json
+from openai import OpenAI
+
+# -------------------------------------------------
+# Customer / Willkommensseite
+# -------------------------------------------------
+WELCOME_DIR = os.path.join(os.path.dirname(__file__), "media", "lobby")
+
+os.makedirs(WELCOME_DIR, exist_ok=True)
+
+WELCOME_FILENAME = "welcome.html"
+
+def get_openai_client():
+    """Initialize OpenAI client from environment variable"""
+    api_key = os.getenv("OPENAI_API_KEY")
+    if not api_key:
+        raise ValueError("OPENAI_API_KEY environment variable not set")
+    return OpenAI(api_key=api_key)
+
+def get_brandfetch_logo(domain):
+    """Try to fetch a logo URL from Brandfetch CDN."""
+    print(f"🔍 Versuche Brandfetch für Domain: {domain}")
+    # Direct CDN URL construction - Brandfetch provides logos via cdn.brandfetch.io
+    logo_url = f"https://cdn.brandfetch.io/{domain}?c=1idyd4Tpb2nKaXIIc8T"
+
+    # if validate_logo_url(logo_url):
+    print(f"✅ Brandfetch Logo gefunden: {logo_url}")
+    return logo_url
+
+    # return None
+
+
+def search_customer_logo(customer_name):
+    """Search for customer logo URL using OpenAI and web search"""
+    try:
+        client = get_openai_client()
+
+        response = client.chat.completions.create(
+            model="gpt-4",
+            messages=[
+                {
+                    "role": "system",
+                    "content": """Du bist ein Experte für die Suche nach Domain Namen. Du findest anhand des Firmennamens die richtige Domain dazu
+                                  Gib nur den Domain Namen zurück, keine weiteren Informationen.
+                                  FALLBACK: Wenn du kein direkt Aufrufbare Domain findest, antworte mit "FALLBACK"."""
+                },
+                {
+                    "role": "user",
+                    "content": f"Finde die Domain für dasUnternehmen: {customer_name}"
+                }
+            ],
+            temperature=0.1,
+            max_tokens=100
+        )
+
+        logo_url = response.choices[0].message.content.strip()
+        print (f"🔍 OpenAI Logo-URL: {logo_url}")
+        if logo_url.upper() == "FALLBACK":
+            logo_url = None
+
+        if logo_url:
+            brandfetch_url = get_brandfetch_logo(logo_url)
+            if brandfetch_url:
+                return brandfetch_url
+
+        return None
+    except Exception as e:
+        print(f"❌ Logo search error: {e}")
+        return None
+
+
+def generate_welcome_html(customer_name, logo_url):
+    """Generate a welcome page HTML with full-screen design"""
+    # CANCOM SVG logo inline
+    cancom_svg = '''<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xcs="https://www.xtool.com/pages/software" version="1.1" preserveAspectRatio="xMinYMin meet" width="61.682394106284505mm" height="9.909010347638684mm" viewBox="136.55880294685778 209.2954948261807 61.682394106284505 9.909010347638684" xcs:version="2.7.22"><style></style><path transform="matrix(0.158038,0,0,0.158038,133.2558,163.322122)" stroke="none" fill="#ffffff" data-view-type="laser" d="M125.9,352.1h18.9L119,291.7h-16.2l-25,60.4h18.2l14.6-38.9L125.9,352.1z M323.6,322     c0,8.8-6.1,16.4-15.4,16.4c-9.1,0-15.4-7.6-15.4-16.4s6.1-16.4,15.2-16.4C317,305.6,323.6,313.4,323.6,322 M340.5,322.3     c0-17.4-13.4-31.3-32.3-31.3c-18.7,0-32.3,14.1-32.3,31.3c0,17.4,13.4,31.3,32.3,31.3C326.9,353.6,340.5,339.4,340.5,322.3      M230.4,322.5c0-8.8,6.1-16.4,14.9-16.4c3,0,5.8,0.8,8.1,2l6.6-13.4c-3-2-8.1-3.8-14.9-3.8c-18.2,0-31.6,14.1-31.6,31.3     c0,18.2,12.6,31.1,31.6,31.1c17.2,0,26-10.6,28.8-21l-13.6-5.6c-1.8,5.8-6.3,11.6-14.4,11.6C236.5,338.4,230.4,331.4,230.4,322.5      M38,322.5c0-8.8,6.1-16.4,14.9-16.4c3,0,5.8,0.8,8.1,2l6.6-13.4c-3-2-8.1-3.8-14.9-3.8c-18.4,0-31.8,14.1-31.8,31.3     c0,18.2,12.6,31.1,31.6,31.1c17.2,0,26-10.6,28.8-21l-13.6-5.6c-1.8,5.8-6.3,11.6-14.4,11.6C44,338.4,38,331.4,38,322.5      M191.8,352.1h14.4v-59.8H190v33.1l-25-33.1h-15.4v60.1h16.2v-34.1L191.8,352.1z M411.2,352.1v-59.8h-17.7l-14.4,23.2l-14.4-23.2     h-17.7v60.1h16.4V318l15.4,23.2h0.3l15.4-23.5v34.6L411.2,352.1L411.2,352.1z" fill-rule="nonzero"></path></svg>'''
+
+    html_content = f"""<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Willkommen bei CANCOM</title>
+
+    <!-- Tabler CSS -->
+    <link rel="stylesheet"
+        href="https://unpkg.com/@tabler/core@1.0.0-beta20/dist/css/tabler.min.css">
+    <!-- Tabler JS -->
+    <script defer
+        src="https://unpkg.com/@tabler/core@1.0.0-beta20/dist/js/tabler.min.js">
+    </script>
+
+    <style>
+        * {{
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }}
+        body {{
+            width: 100vw;
+            height: 100vh;
+            overflow: hidden;
+            font-family: 'Segoe UI', 'Helvetica Neue', sans-serif;
+            background: linear-gradient(135deg, #87CEEB 0%, #B0E0E6 100%);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background-image: url("/static/wallpaper.png");
+            background-repeat: no-repeat;
+            background-size: cover;
+        }}
+        .screen {{
+            width: 100%;
+            height: 100%;
+            position: relative;
+            display: flex;
+            flex-direction: column;
+            align-items: flex-end;
+            justify-content: space-between;
+            padding: 60px;
+            background-size: cover;
+            background-position: center left;
+            background-repeat: no-repeat;
+        }}
+        .logo-section {{
+            display: flex;
+            flex-direction: column;
+            align-items: flex-end;
+            gap: 20px;
+            z-index: 10;
+        }}
+        .cancom-logo {{
+            width: 235px;
+            height: auto;
+            color: #DA002D;
+            object-fit: contain;
+            filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.1));
+        }}
+        .customer-logo {{
+            max-width: 300px;
+            max-height: 180px;
+            width: auto;
+            height: auto;
+            object-fit: contain;
+            filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.15));
+        }}
+        .content {{
+            text-align: right;
+            z-index: 10;
+            display: flex;
+            flex-direction: column;
+            gap: 30px;
+        }}
+        .headline {{
+            font-size: 4.5rem;
+            font-weight: 300;
+            letter-spacing: 2px;
+            line-height: 1.2;
+            color: #000;
+            text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.3);
+        }}
+        .headline .red {{
+            color: #DA002D;
+            font-weight: 700;
+        }}
+        .meets {{
+            font-size: 2.5rem;
+            font-weight: 400;
+            color: #000;
+            margin-bottom: 40px;
+            letter-spacing: 1px;
+        }}
+        .welcome-block {{
+            font-size: 4rem;
+            font-weight: 700;
+            line-height: 1.3;
+            color: #000;
+            text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.3);
+        }}
+    </style>
+</head>
+<body>
+    <div class="screen">
+        <div class="logo-section">
+            <div class="cancom-logo">{cancom_svg}</div>
+            <div class="meets">meets</div>
+            {f'<img src="{logo_url}" alt="Kundenlogo" class="customer-logo" crossorigin="anonymous">' if logo_url else ''}
+        </div>
+        <div class="content">
+            <div class="welcome-block">
+                Herzlich <span style="color: #DA002D;">Willkommen</span><br>
+                <span style="color: #DA002D;">in</span> unserer<br>
+                Niederlassung <span style="color: #DA002D;">Stuttgart!</span>
+            </div>
+        </div>
+    </div>
+</body>
+</html>"""
+    return html_content
+
+
+def save_welcome_page(customer_name, logo_url):
+    """Save welcome page and return filename"""
+    try:
+        filepath = os.path.join(os.path.abspath(WELCOME_DIR), WELCOME_FILENAME)
+        html_content = generate_welcome_html(customer_name, logo_url)
+
+        with open(filepath, "w", encoding="utf-8") as f:
+            f.write(html_content)
+        if os.path.getsize(filepath) == 0:
+            raise IOError("File not written")
+        print(f"✅ Willkommensseite generiert für: {customer_name}")
+        print(f"✅ Willkommensseite gespeichert in: {filepath}")
+        print(f"✅ Willkommensseite gespeichert: {WELCOME_FILENAME}")
+        return WELCOME_FILENAME
+    except Exception as e:
+        print(f"❌ Error saving welcome page: {e}")
+        return None
+
+
+def add_customer_to_lobby_playlist(html_filename):
+    """Add customer welcome page to lobby playlist"""
+    try:
+        # Import here to avoid circular imports
+        from app import load_config, save_config
+
+        config = load_config()
+        screens = config.setdefault("screens", {})
+        lobby = screens.setdefault("lobby", {})
+        playlist = lobby.setdefault("playlist", [])
+
+        full_filename = f"{html_filename}" 
+        if full_filename in playlist:
+            playlist.remove(full_filename)
+        playlist.insert(0, full_filename)
+        save_config(config)
+        print(f"✅ Willkommensseite in Lobby-Playliste platziert")
+        return True
+    except Exception as e:
+        print(f"❌ Error adding to playlist: {e}")
+        return False

requirements.txt

@@ -1,3 +1,6 @@
 flask
 flask-login
 werkzeug
+openai
+requests
+urllib3

templates/admin.html

@@ -136,6 +136,7 @@
   </a>
 
       <div class="d-none d-sm-inline">
+        <a href="/customer" class="btn">Willkommensseite</a>
         <a href="/logout" class="btn">Logout</a>
       </div>
     </div>
@@ -211,7 +212,7 @@
 
               {% if file.type == "image" %}
                 <span class="badge bg-purple text-purple-fg">Bild</span>
-              {% elif file.type == "url" %}
+              {% elif file.type == "url" or file.type == "html" %}
                 <span class="badge bg-blue text-blue-fg">URL</span>
               {% else %}
                 <span class="badge bg-orange text-orange-fg">Video</span>
@@ -367,7 +368,7 @@
 
               {% if file.type == "image" %}
                 <span class="badge bg-purple text-purple-fg">Bild</span>
-              {% elif file.type == "url" %}
+              {% elif file.type == "url" or file.type == "html" %}
                 <span class="badge bg-blue text-blue-fg">URL</span>
               {% else %}
                 <span class="badge bg-orange text-orange-fg">Video</span>

templates/customer.html

@@ -0,0 +1,133 @@
+<!doctype html>
+<html lang="de">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+  <title>Kunde hinzufügen</title>
+  <link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}">
+
+  <link rel="stylesheet"
+        href="https://unpkg.com/@tabler/core@1.0.0-beta20/dist/css/tabler.min.css">
+  <script defer
+          src="https://unpkg.com/@tabler/core@1.0.0-beta20/dist/js/tabler.min.js"></script>
+
+  <style>
+    body {
+      background-color: #F4F6F8;
+      color: #212121;
+    }
+    .navbar {
+      background-color: #DA002D;
+    }
+    .navbar-brand,
+    .navbar-brand h2,
+    .navbar-brand .page-pretitle {
+      color: #ffffff !important;
+    }
+    .card-header {
+      background-color: #eeeeee;
+      border-left: 6px solid #DA002D;
+      padding-left: 1rem;
+      font-weight: 600;
+    }
+    .btn-primary {
+      background-color: #DA002D;
+      border-color: #DA002D;
+    }
+    .btn-primary:hover {
+      background-color: #B00024;
+      border-color: #B00024;
+    }
+    .form-label {
+      font-weight: 600;
+    }
+    .card {
+      box-shadow: 0 20px 60px rgba(0,0,0,0.08);
+    }
+  </style>
+</head>
+<body>
+<div class="page">
+  <header class="navbar navbar-expand-md">
+    <div class="container-xl">
+      <a class="navbar-brand d-flex align-items-center"
+         href="/admin">
+        <img src="{{ url_for('static', filename='cancom.svg') }}"
+             alt="CANCOM"
+             height="32"
+             class="me-2">
+        <span class="page-pretitle text-white">
+          Admin Dashboard
+          <h2 class="page-title text-white">Simple Signage</h2>
+        </span>
+      </a>
+      <div class="d-none d-sm-inline">
+        <a href="/admin" class="btn">Zurück</a>
+        <a href="/logout" class="btn">Logout</a>
+      </div>
+    </div>
+  </header>
+
+  <div class="page-wrapper">
+    <div class="container-xl mt-4">
+      <div class="card mb-4">
+        <div class="card-header">
+          <div class="row align-items-center">
+            <div class="col">
+              <div class="page-pretitle">Willkommensseite</div>
+              <h2 class="page-title">Kundeninformationen eingeben</h2>
+            </div>
+          </div>
+        </div>
+        <div class="card-body">
+          {% if error %}
+            <div class="alert alert-danger">
+              {{ error }}
+            </div>
+          {% endif %}
+          {% if success %}
+            <div class="alert alert-success">
+              {{ success }}
+            </div>
+          {% endif %}
+
+          {% if logo_url %}
+            <div class="alert alert-secondary d-flex align-items-center gap-3">
+              <div>
+                <strong>Logo Vorschau</strong>
+                <div class="text-muted">Wenn das Logo erfolgreich gefunden wurde, wird es hier angezeigt.</div>
+              </div>
+              <img src="{{ logo_url }}"
+                   alt="Logo Vorschau"
+                   class="img-fluid border"
+                   style="max-height: 120px; max-width: 240px; object-fit: contain;">
+            </div>
+          {% endif %}
+
+          <form method="POST">
+            <div class="mb-3">
+              <label class="form-label" for="customer_name">Kundenname</label>
+              <input type="text"
+                     class="form-control"
+                     id="customer_name"
+                     name="customer_name"
+                     placeholder="z. B. Beispiel GmbH"
+                     required>
+            </div>
+
+            <div class="mb-3 text-muted">
+              <p class="mb-1">Das System sucht automatisch nach dem Kundenlogo</p>
+              <p class="mb-0">und erstellt eine angepasste Willkommensseite für die Lobby-Playlist.</p>
+            </div>
+
+            <button type="submit" class="btn btn-primary">
+              Kundenlogo &amp; Willkommensseite generieren
+            </button>
+          </form>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+</body>
+</html>

templates/player.html

@@ -142,6 +142,10 @@ function isImage(item) {
   return item.kind === "file" && /\.(jpg|jpeg|png)$/i.test(item.name);
 }
 
+function isHtml(item) {
+  return item.kind === "file" && /\.(html?|htm)$/i.test(item.name);
+}
+
 function getNextItem() {
   const normalizedNormal = normalFiles.map(normalizeItem);
   const normalizedPrio = prioFiles.map(normalizeItem);
@@ -234,6 +238,13 @@ function playNext() {
     vid.src = src;
     vid.onended = playNext;
     vid.play();
+  } else if (isHtml(item)) {
+    iframe.style.display = "block";
+    iframe.src = src;
+    iframe.style.width = `100vw`;
+    iframe.style.height = `100vh`;
+    iframe.style.transform = `translate(-50%, -50%)`;
+    setTimeout(playNext, interval);
   } else {
     img.style.display = "block";
     img.src = src;