forked from benjaminaigner/avr109-webserial
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
131 lines (105 loc) · 4.47 KB
/
index.html
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
<!doctype html>
<html>
<head>
<title>QVEX Flasher</title>
<link rel="icon" type="image/x-icon" href="images/favicon.ico">
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div id="mainContainer">
<div style="text-align: center;">
<img id="flasherLogo" src="images/qvex-flasher-logo-white.svg"><br><hr>
Tool for flashing Intel HEX files onto QVEX Lynepad and other Avr109 compatible boards.<br><br>
<div>
<span style="color:#f33; padding: 1em; border: solid #f33 1px;">Currentely in testing, use at your own risk.</span><br><br>
<span style="color:orange; font-size: 0.85em; padding: 0.5em; border: solid orange 1px;">Works only in Chromium-based browsers</span><br><br>
</div>
</div>
<div class="step-section">
<div>
<span>Select firmware file (.hex):</span><br><br>
<input id="fileInput" tabindex="-1" type="file" accept=".hex"/>
</div>
</div>
<div id="instructSection" class="step-section" style="display:none;">
<div>
Once you hit the "ready" button bellow:<br><br>
1. An empty authorization window will pop up<br>
2. Reset the device into bootloader (reset Lynepad with the provided SIM tool)<br>
3. Authorize the device that appears, you got about 7 seconds to do that
</div>
<button id="readyButton" disabled>I'm ready</button>
</div>
</div>
<script src="js/flasher.js"></script>
<script>
const readyButtonElement = document.getElementById("readyButton");
const fileInputElement = document.getElementById('fileInput');
const mainContainer = document.getElementById("mainContainer");
const instructSectionElement = document.getElementById("instructSection");
let progressSection = undefined;
function writeProgress(progress, error=undefined)
{
if (progress == 0 && error == undefined)
{
if (progressSection)
{
progressSection.remove();
progressSection = undefined;
}
return;
}
if (progressSection == undefined)
{
const section = document.createElement("div");
section.style = "text-align:center;";
section.innerHTML =
`<progress value="0" max="100"></progress><br>
<span>0 %</span>`;
progressSection = mainContainer.appendChild(section);
progressSection.scrollIntoView({ behavior: "smooth"});
}
if (error)
{
progressSection.querySelector("progress").value = 100;
progressSection.querySelector("progress").classList.add("progress-fail");
progressSection.querySelector("span").innerHTML = error;
return;
}
progressSection.querySelector("progress").value = progress;
progressSection.querySelector("span").innerHTML = progress + " %";
if (progress == 100)
{
progressSection.querySelector("progress").classList.add("progress-complete");
progressSection.querySelector("span").innerHTML = "Done!";
}
}
readyButtonElement.addEventListener("click",(e)=>
{
const file = fileInput.files[0];
const fileReader = new FileReader();
fileReader.onload = async function (event)
{
const flasher = new AVR109Flasher(event.target.result,0x2341,0x0036,writeProgress);
flasher.flash().catch((error)=>{writeProgress(0, error);});
}
fileReader.readAsText(file);
});
fileInputElement.addEventListener('change', (event) =>
{
if (event.target.files[0])
{
readyButtonElement.disabled = false;
instructSectionElement.style = "";
instructSectionElement.scrollIntoView({ behavior: "smooth"});
}
else
{
readyButtonElement.disabled = true;
instructSectionElement.style = "display:none;";
}
writeProgress(0);
});
</script>
</body>
</html>