mcumgr-web/index.html at main · boogie/mcumgr-web · GitHub

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
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="Andras Barthazi">
    <title>mcumgr web</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/mcumgr.css?v=12" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css" rel="stylesheet">
    <meta name="theme-color" content="#563d7c">
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">
            <span id="device-name">Connect your device</span>
        </a>
        <a class="text-light text-decoration-none" href="https://github.com/boogie/mcumgr-web"
           target="_blank" rel="noopener" title="View source on GitHub">
            <i class="bi-github fs-5 align-middle"></i>
            <span class="ms-1 align-middle d-none d-sm-inline">GitHub</span>
        </a>
    </div>
</nav>
<main role="main" class="container">

<div class="starter-template">
    <!-- Initial/Login Screen -->
    <div class="content" id="initial-screen">
        <div class="row justify-content-center">
            <div class="col-md-10 col-lg-8">
                <div class="card shadow-lg login-card">
                    <div class="card-body p-5">
                        <div class="text-center mb-4">
                            <i class="bi-bluetooth display-1 text-primary"></i>
                            <h1 class="h2 mt-3 mb-2">mcumgr web</h1>
                            <p class="text-muted">Web Bluetooth Device Manager</p>
                        </div>

                        <div class="alert alert-primary" role="alert" id="bluetooth-is-available">
                            <i class="bi-info-circle-fill me-2"></i>
                            <strong><span id="bluetooth-is-available-message"></span></strong>
                            <p class="mb-0 mt-2 small">
                              This tool is compatible with desktops (or laptops) with the <b>latest Chrome and Edge</b> browsers (other Chromium-based browsers may also work), and working
                              Bluetooth connection (most laptops have them these days). You can also try it from Chrome on Android, or Bluefy on iOS/iPadOS.
                            </p>
                        </div>

                        <div class="alert alert-danger position-relative" role="alert" id="connection-error" style="display: none; padding-right: 3rem;">
                            <i class="bi-x-circle-fill position-absolute" id="close-connection-error" style="cursor: pointer; font-size: 1.2rem; top: 1rem; right: 1rem;"></i>
                            <div>
                                <i class="bi-exclamation-triangle-fill me-2"></i>
                                <strong>Connection Failed</strong>
                            </div>
                            <p class="mb-2 mt-2" id="connection-error-message"></p>
                            <div class="small" id="connection-error-tips">
                                <strong>Troubleshooting tips:</strong>
                                <ul class="mb-0 mt-1 ps-0 list-unstyled">
                                    <li>• Make sure the device is powered on and in range</li>
                                    <li>• Check if the device is already connected to another app or browser tab</li>
                                    <li>• Try forgetting the device in your OS Bluetooth settings and reconnect</li>
                                    <li>• Power cycle the device (turn it off and on)</li>
                                    <li>• Refresh this page and try again</li>
                                </ul>
                            </div>
                        </div>

                        <div id="connect-block" style="display: none;">
                            <div class="mb-3">
                                <label for="device-name-input" class="form-label">Device Name Filter (Optional)</label>
                                <div class="form-text mb-2">Only show devices whose name starts with this prefix</div>
                                <input id="device-name-input" type="text" class="form-control form-control-lg" placeholder="e.g., 'Quantum' to filter devices starting with Quantum">
                            </div>
                            <div class="d-grid">
                                <button id="button-connect" type="submit" class="btn btn-primary btn-lg">
                                    <i class="bi-bluetooth me-2"></i> Connect to Device
                                </button>
                            </div>
                        </div>

                        <div class="credits-section mt-4 pt-4 border-top border-light text-center">
                            <p class="small text-muted mb-1">
                                Created by <a href="https://github.com/boogie/mcumgr-web" target="_blank" class="text-decoration-none fw-semibold">András Bártházi</a>
                            </p>
                            <p class="small text-muted mb-0">
                                Thanks to all <a href="https://github.com/boogie/mcumgr-web/graphs/contributors" target="_blank" class="text-decoration-none">contributors</a> for their valuable contributions
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Connecting Screen -->
    <div class="content" id="connecting-screen" style="display: none;">
        <div class="row justify-content-center">
            <div class="col-md-6">
                <div class="card shadow-lg">
                    <div class="card-body text-center p-5">
                        <div class="modern-spinner mb-4">
                            <div class="spinner-circle"></div>
                            <div class="spinner-circle"></div>
                            <div class="spinner-circle"></div>
                        </div>
                        <h4>Connecting to device...</h4>
                        <p class="text-muted">Please wait while we establish connection</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Connected Screen -->
    <div class="content" id="connected-screen" style="display: none;">
        <!-- Device Controls Card -->
        <div class="card shadow-sm mb-4">
            <div class="card-header bg-primary text-white">
                <h5 class="mb-0"><i class="bi-tools me-2"></i>Device Controls</h5>
            </div>
            <div class="card-body">
                <div class="d-flex gap-2 flex-wrap">
                    <button id="button-echo" type="submit" class="btn btn-outline-primary">
                        <i class="bi-soundwave me-2"></i>Echo
                    </button>
                    <button id="button-reset" type="submit" class="btn btn-outline-info">
                        <i class="bi-arrow-clockwise me-2"></i>Reset
                    </button>
                    <button id="button-disconnect" type="submit" class="btn btn-outline-secondary ms-auto">
                        <i class="bi-x-square me-2"></i>Disconnect
                    </button>
                </div>
            </div>
        </div>

        <!-- Images Card -->
        <div class="card shadow-sm mb-4">
            <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
                <h5 class="mb-0"><i class="bi-file-earmark-binary me-2"></i>Images</h5>
                <button id="button-image-state" type="submit" class="btn btn-sm btn-light">
                    <i class="bi-arrow-clockwise me-1"></i>Refresh
                </button>
            </div>
            <div class="card-body">
                <div id="image-list" class="mb-3"></div>
                <div class="d-flex gap-2 flex-wrap">
                    <button id="button-erase" type="submit" class="btn btn-warning">
                        <i class="bi-eraser-fill me-2"></i>Erase Slot
                    </button>
                    <button id="button-test" type="submit" class="btn btn-primary" disabled>
                        <i class="bi-play-circle me-2"></i>Test Slot #1 on Reboot
                    </button>
                    <button id="button-confirm" type="submit" class="btn btn-success" disabled>
                        <i class="bi-check-circle me-2"></i>Make Slot #0 Permanent
                    </button>
                </div>
            </div>
        </div>

        <!-- Image Upload Card -->
        <div class="card shadow-sm">
            <div class="card-header bg-primary text-white">
                <h5 class="mb-0"><i class="bi-cloud-upload me-2"></i>Image Upload</h5>
            </div>
            <div class="card-body">
                <div class="upload-drop-zone" id="upload-drop-zone">
                    <input type="file" class="d-none" id="file-image" accept=".bin,.img" />
                    <div class="upload-drop-content">
                        <i class="bi-cloud-arrow-up upload-icon" id="upload-icon"></i>
                        <h5 class="mt-3 mb-2" id="upload-drop-title">Drop firmware image here</h5>
                        <p class="text-muted mb-3" id="upload-drop-subtitle">or click to browse</p>
                        <div class="upload-status-info">
                            <div id="file-status" class="mb-2">No file selected</div>
                            <div id="file-info" class="text-muted small"></div>
                        </div>
                    </div>
                </div>
                <div class="form-check mt-3">
                    <input class="form-check-input" type="checkbox" id="fast-upload" />
                    <label class="form-check-label fw-semibold" for="fast-upload">Fast upload</label>
                    <div class="form-text small mt-1">
                        Sends larger chunks with no pacing delay — often several times
                        faster, especially over links that negotiate a large MTU (e.g.
                        macOS). If a chunk is too large for the device it automatically
                        falls back, but if an upload still fails or stalls, turn this
                        <strong>off</strong>: it then uses small, paced chunks that work
                        reliably on any device.
                    </div>
                </div>
                <div class="d-flex gap-2 mt-2">
                    <button class="btn btn-primary btn-lg" id="file-upload" disabled>
                        <i class="bi-upload me-2"></i>Upload Firmware
                    </button>
                    <button class="btn btn-outline-secondary btn-lg" id="file-cancel" style="display: none;">
                        <i class="bi-x-lg me-2"></i>Cancel
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="js/cbor.js"></script>
<script src="js/mcumgr.js?v=12"></script>
<script src="js/index.js?v=12"></script>
</main>