added qrcode generator in settings

This commit is contained in:
Kristy Fournier 2024-10-17 16:26:17 -04:00
parent 9a9e54f4b9
commit c6d457efbf
2 changed files with 27 additions and 3 deletions

View file

@ -81,6 +81,11 @@ changes visibility with JS-->
<p class="italic">Volume of the music</p> <p class="italic">Volume of the music</p>
<input type="range" min="0" max="100" step="1" title="volumerange" id="volumerange"> <input type="range" min="0" max="100" step="1" title="volumerange" id="volumerange">
</div> </div>
<div class="item">
<h2>Share the remote:</h2>
<p class="italic">Hit settings icon to refresh the code</p>
<div id="qrcode"></div>
</div>
</div> </div>
</div> </div>
<!--All the buttons are down here but settings is just doing its own thing--> <!--All the buttons are down here but settings is just doing its own thing-->
@ -92,6 +97,7 @@ changes visibility with JS-->
<img class="control-button" id="search-button" src="./images/search.png" alt="search"></img> <img class="control-button" id="search-button" src="./images/search.png" alt="search"></img>
</div> </div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js" integrity="sha512-CNgIRecGo7nphbeZ04Sc13ka07paqdeTu0WR1IM4kNcpmBAUSHSQX0FslNhTDadL4O5SAGapGt4FodqL8My0mA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="scripts.js"></script> <script src="scripts.js"></script>
</body> </body>
</html> </html>

View file

@ -177,6 +177,16 @@ async function checkSettings(skipServer=false) {
} else { } else {
document.getElementById("iptextbox").value = ip; document.getElementById("iptextbox").value = ip;
} }
let tempURL = "http://" + document.location.href.split("/")[2] + "/?ip=" + ip;
document.getElementById("qrcode").innerHTML = ""
new QRCode(document.getElementById("qrcode"), {
text: tempURL,
width: 256,
height: 256,
colorDark : "#000000",
colorLight : "#eeeeee",
correctLevel : QRCode.CorrectLevel.H
});
document.getElementById("alerttimetextbox").value = alertTime document.getElementById("alerttimetextbox").value = alertTime
partyButtonState = document.getElementById("partymode-button").innerHTML; partyButtonState = document.getElementById("partymode-button").innerHTML;
x = await getFromServer({setting: "getsettings"}, "settings"); x = await getFromServer({setting: "getsettings"}, "settings");
@ -316,16 +326,24 @@ ip = params.get("ip")
if (ip == null || ip=="") { if (ip == null || ip=="") {
ip=getCookie("ip") ip=getCookie("ip")
} }
console.log(ip)
if (ip==null || ip==""){ if (ip==null || ip==""){
ip = "" ip = ""
} }
document.cookie = "ip="+ip+"; path=/;" document.cookie = "ip="+ip+"; path=/;"
alertTime = getCookie("alertTime") alertTime = getCookie("alertTime")
document.getElementById("alerttimetextbox").value = alertTime document.getElementById("alerttimetextbox").value = alertTime
if (alertTime == "") { if (alertTime == "") {
alertTime = 2; alertTime = 2;
document.cookie = "alertTime="+alertTime+"; path=/;" document.cookie = "alertTime="+alertTime+"; path=/;"
} }
let tempURL = "http://" + document.location.href.split("/")[2] + "/?ip=" + ip;
new QRCode(document.getElementById("qrcode"), {
text: tempURL,
width: 256,
height: 256,
colorDark : "#000000",
colorLight : "#eeeeee",
correctLevel : QRCode.CorrectLevel.H
});