emil
/
LED-web


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899
							<!DOCTYPE html>
<html lang="sv">
<head>
    <meta charset="UTF-8">
    <title>RGB Hub</title>
    <link rel="stylesheet" type="text/css" href="css/spotlight.css">
    <link rel="stylesheet" type="text/css" href="css/nav.css">

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Raleway&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Raleway&family=Roboto&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://fonts.sandbox.google.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />

    <link rel="icon" type="image/x-icon" href="favicon.ico">

    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div class="container">
    <div class="corner"><a href="index.html">Emil Hub</a></div>

    <!--Navigation bar-->
    <div class="sideBar" id="nav"></div>
    <script>$(function(){$("#nav").load("sidebar.html");});</script>
    <!--end of Navigation bar-->

    <div class="topBar">
        <button onclick="topBarClick('spotlightContainer')">Färg och Animation</button>
        <button onclick="topBarClick('spotlightAdminContainer')">Admin</button>
    </div>

    <div id="spotlightContainer">
        <h2>Spotlight</h2>
        <div id="shelfButtonContainer">
            <button id="b0" class="shelfButton" onclick="shelfClick(0)"></button>
            <button id="b1" class="shelfButton" onclick="shelfClick(1)"></button>
            <button id="b2" class="shelfButton" onclick="shelfClick(2)"></button>
            <button id="b3" class="shelfButton" onclick="shelfClick(3)"></button>
            <button id="b4" class="shelfButton" onclick="shelfClick(4)"></button>
            <button id="b5" class="shelfButton" onclick="shelfClick(5)"></button>
            <button id="b6" class="shelfButton" onclick="shelfClick(6)"></button>
            <button id="b7" class="shelfButton" onclick="shelfClick(7)"></button>
            <button id="b8" class="shelfButton" onclick="shelfClick(8)"></button>
            <button id="b9" class="shelfButton" onclick="shelfClick(9)"></button>
            <button id="makeCluster" class="hidden" onclick="createCluster()">Skapa kluster</button>
        </div>

        <div id="spotlightSettingsContainer">
            <h2>Settings</h2>
            <p>{{clusterName}}</p>
            <div id="spotlightAnimations">
                <button id="a0" onclick="changeAnimation(0)">Off</button>
                <button id="a1" onclick="changeAnimation(1)">Rainbow</button>
                <button id="a2" onclick="changeAnimation(2)">Random Colors</button>
                <button id="a3" onclick="changeAnimation(3)">Stardust</button>
            </div>
            <p class="var1Input">{var1Name}</p>
            <input class="var1Input" onblur="changeVar(this.value, 'animationSetting1')">
            <p class="var2Input">{var2Name}</p>
            <input class="var2Input" onblur="changeVar(this.value, 'animationSetting2')">
            <p class="var3Input">{var3Name}</p>
            <input class="var3Input" onblur="changeVar(this.value, 'animationSetting3')">
            <p class="var4Input">{var4Name}</p>
            <input class="var4Input" onblur="changeVar(this.value, 'animationSetting4')">
            <p class="speedInput">Hastighet (MS)</p>
            <input class="speedInput" onblur="changeVar(this.value, 'delayTime')">
            <button id="deleteCluster" onclick="deleteCluster()"><span class="material-symbols-outlined">delete</span></button>
            <button id="sync">Synk</button>
            <div id="clusters">

            </div>
        </div>

    </div>

    <div id="spotlightAdminContainer" class="hidden">
        <h2>Uppdatera firmware</h2>
        <!--<form method='POST' action='/admin/doUpdate' enctype='multipart/form-data'><input type='file' name='update'><input type='submit' value='Update'></form>-->
        <input type="file" id="updateFirmwareInput"/><button onclick="updateFirmware()">Update</button>
        <h2>Uppdatera SD-kort</h2>
        <!--<form method="POST" action="/admin/upload_file" enctype="multipart/form-data"><input type="file" name="data"/><input type="submit" name="upload" value="Upload" title="Upload File"></form>-->
        <input type="file" id="fileUpload"/><button onclick="uploadFile()">Upload</button>
        <button onclick="resetESP()">Reset ESP</button>

        <h2>Set SD Cursor</h2>
        <input type='text' id="cursorSet">
        <button onclick="setSDCursor()">Send cursor value</button>

        <h2>Files</h2>
        <div id="fileListerDiv"></div>
        <button onclick="listESPFiles()">Reload list</button>
        <button onclick="openDirectory('/')">Back to /</button>
    </div>

    <script src="js/spotlight.js"></script>
</div>
</body>
</html>