jeans/WLED
jeans/WLED
1
0
Fork 0
mirror of https://github.com/wled/WLED.git synced 2025-07-21 09:46:32 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added UI feedback for file upload.

Browse Source
This commit is contained in:
Blaz Kristan 2021-06-04 23:08:30 +02:00
parent b6bbbeb9d3
commit 9dadb6da4c
4 changed files with 78 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
wled00/data/settings_leds.htm
View File

@ -18,6 +18,16 @@
function off(n){ function off(n){
d.getElementsByName(n)[0].value = -1; d.getElementsByName(n)[0].value = -1;
} }
var timeout;
function showToast(text, error = false)
{
var x = gId("toast");
x.innerHTML = text;
x.className = error ? "error":"show";
clearTimeout(timeout);
x.style.animation = 'none';
timeout = setTimeout(function(){ x.className = x.className.replace("show", ""); }, 2900);
}
function bLimits(b,p,m) { function bLimits(b,p,m) {
maxB = b; maxM = m; maxPB = p; maxB = b; maxM = m; maxPB = p;
} }
@ -317,8 +327,8 @@ Reverse (rotated 180°): <input type="checkbox" name="CV${i}">
} }
function uploadFile() { function uploadFile() {
var req = new XMLHttpRequest(); var req = new XMLHttpRequest();
//req.addEventListener('load', function(){console.log(this.responseText);}); req.addEventListener('load', function(){showToast(this.responseText)});
req.addEventListener('error', function(e){console.error(e.stack);}); req.addEventListener('error', function(e){showToast(e.stack,true);});
req.open("POST", "/upload"); req.open("POST", "/upload");
var formData = new FormData(); var formData = new FormData();
formData.append("data", d.Sf.data.files[0], "/ir.json"); formData.append("data", d.Sf.data.files[0], "/ir.json");
@ -337,7 +347,6 @@ Reverse (rotated 180°): <input type="checkbox" name="CV${i}">
</style> </style>
</head> </head>
<body onload="S()"> <body onload="S()">
<div style="display:hidden;"><form id="fileUL" name="fUL" method="POST" enctype="multipart/form-data" action="/upload" target="asFr"><iframe id="asFr" name="asFr" height="0" width="0" frameborder="0"></iframe></form></div>
<form id="form_s" name="Sf" method="post"> <form id="form_s" name="Sf" method="post">
<div class="toprow"> <div class="toprow">
<div class="helpB"><button type="button" onclick="H()">?</button></div> <div class="helpB"><button type="button" onclick="H()">?</button></div>
@ -397,6 +406,7 @@ Reverse (rotated 180°): <input type="checkbox" name="CV${i}">
<option value="8">JSON remote</option> <option value="8">JSON remote</option>
</select><span style="cursor: pointer;" onclick="off('IR')">&nbsp;&#215;</span><br> </select><span style="cursor: pointer;" onclick="off('IR')">&nbsp;&#215;</span><br>
<div id="json" style="display:none;">JSON file: <input type="file" name="data" accept=".json"> <input type="button" value="Upload" onclick="uploadFile();"><br></div> <div id="json" style="display:none;">JSON file: <input type="file" name="data" accept=".json"> <input type="button" value="Upload" onclick="uploadFile();"><br></div>
<div id="toast"></div>
<a href="https://github.com/Aircoookie/WLED/wiki/Infrared-Control" target="_blank">IR info</a><br> <a href="https://github.com/Aircoookie/WLED/wiki/Infrared-Control" target="_blank">IR info</a><br>
Relay pin: <input type="number" min="-1" max="40" name="RL" onchange="UI()" style="width:35px"> invert <input type="checkbox" name="RM"><span style="cursor: pointer;" onclick="off('RL')">&nbsp;&#215;</span><br> Relay pin: <input type="number" min="-1" max="40" name="RL" onchange="UI()" style="width:35px"> invert <input type="checkbox" name="RM"><span style="cursor: pointer;" onclick="off('RL')">&nbsp;&#215;</span><br>
<hr style="width:260px"> <hr style="width:260px">

29
wled00/data/style.css
View File

@ -75,3 +75,32 @@ td {
.d5 { .d5 {
width: 4.5em !important; width: 4.5em !important;
} }
#toast {
opacity: 0;
background-color: #444;
border-radius: 5px;
bottom: 64px;
color: #fff;
font-size: 17px;
padding: 16px;
pointer-events: none;
position: fixed;
text-align: center;
z-index: 5;
transform: translateX(-50%%); /* %% because of AsyncWebServer */
max-width: 90%%; /* %% because of AsyncWebServer */
left: 50%%; /* %% because of AsyncWebServer */
}
#toast.show {
opacity: 1;
background-color: #264;
animation: fadein 0.5s, fadein 0.5s 2.5s reverse;
}
#toast.error {
opacity: 1;
background-color: #b21;
animation: fadein 0.5s;
}

70
wled00/html_settings.h
View File

File diff suppressed because one or more lines are too long

2
wled00/wled.h
View File

@ -8,7 +8,7 @@
*/ */
// version code in format yymmddb (b = daily build) // version code in format yymmddb (b = daily build)
#define VERSION 2106041 #define VERSION 2106042
//uncomment this if you have a "my_config.h" file you'd like to use //uncomment this if you have a "my_config.h" file you'd like to use
//#define WLED_USE_MY_CONFIG //#define WLED_USE_MY_CONFIG