|
1 | 1 | # LibreSpeed frontend |
2 | 2 |
|
3 | | -This is a re-implementation of the LibreSpeed user interface based on [the |
4 | | -design by fromScratch](https://github.com/librespeed/speedtest/issues/585). The |
5 | | -code that's doing the actual speed test is still the same. |
| 3 | +This directory contains the modern LibreSpeed UI assets. |
6 | 4 |
|
7 | | -### Desktop |
| 5 | +## Deployment |
8 | 6 |
|
9 | | - |
10 | | - |
11 | | -### Mobile |
12 | | - |
13 | | - |
14 | | - |
15 | | -## How to use |
16 | | - |
17 | | -Copy everything in this directory into the LibreSpeed root, next to |
18 | | -`speedtest.js` and `speedtest_worker.js`, overwriting the `index.html` file that |
19 | | -may already be there. That's it! |
| 7 | +For installation and deployment, follow the top-level [README.md](../README.md) |
| 8 | +and [DESIGN_SWITCH.md](../DESIGN_SWITCH.md). In non-Docker deployments, the |
| 9 | +contents of this directory must be copied so `styling/`, `javascript/`, |
| 10 | +`images/`, and `fonts/` sit next to the root HTML files. |
20 | 11 |
|
21 | 12 | ## Configuration |
22 | 13 |
|
23 | | -In the [`server-list.json`](./server-list.json) file you can provide a list of |
24 | | -testing servers. If you only have a single testing server, just provide a list |
25 | | -with one item in it, being your server. The frontend will then skip doing an |
26 | | -automatic server selection and will not allow the user to change servers. |
27 | | - |
28 | | -If you want to load the server list from a different URL, change the |
29 | | -`SPEEDTEST_SERVERS` variable in `index-modern.html` before |
30 | | -`javascript/index.js` is loaded. For example: |
31 | | - |
32 | | -```html |
33 | | -<script type="text/javascript"> |
34 | | - var SPEEDTEST_SERVERS = "https://example.com/custom-server-list.json"; |
35 | | -</script> |
36 | | -<script type="text/javascript" src="javascript/index.js"></script> |
37 | | -``` |
38 | | - |
39 | | -You can also provide a relative URL, for example |
40 | | -`var SPEEDTEST_SERVERS = "/speedtest/servers.json";`. |
41 | | - |
42 | | -For more advanced applications, you can override any of the settings that are |
43 | | -defined in `speedtest_worker.js` using the file |
44 | | -[`settings.json`](./settings.json). See |
45 | | -[`speedtest_worker.js`](../speedtest_worker.js) for documentation on the |
46 | | -different settings (scroll down a bit to where you find the definition of the |
47 | | -`settings` object). |
48 | | - |
49 | | -## Features |
50 | | - |
51 | | -- Shows upload and download speed and progress |
52 | | -- Shows ping and jitter |
53 | | -- Shows your IP address and internet service provider if the testing server |
54 | | - supports it |
55 | | -- Can handle a single testing server or a list of servers |
56 | | -- Can save telemetry and share results if the hosting server supports it (set |
57 | | - `telemetry_level` in [`settings.json`](./settings.json)) |
58 | | -- Does not require any build steps; implementation is pure JS & CSS |
59 | | -- Has zero dependencies |
60 | | - |
61 | | -## Limitations |
62 | | - |
63 | | -- This frontend relies heavily on modern browser features. It should work very |
64 | | - well in all modern ("evergreen") browsers, but has **no** backwards compatibility |
65 | | - with older browsers. |
66 | | - |
67 | | -## Credits |
68 | | - |
69 | | -**Design** by fromScratch Studio - 2022, 2023 |
70 | | -([www.fromscratch.io](https://www.fromscratch.io)) |
71 | | - |
72 | | -> "During Hacktoberfest 2022 & 2023, fromScratch Studio took on the request for |
73 | | -> LibreSpeed redesign and UI improvements. We ran 2 design sprints one on '22 and |
74 | | -> one on '23, and produced high-fidelity screens for LibreSpeed redesign. |
75 | | -> Furthermore, this year, we produced high-fidelity screens for mobile-view as |
76 | | -> well." |
77 | | -
|
78 | | -_-- Chris-ZoGo, https://github.com/librespeed/speedtest/issues/585_ |
79 | | - |
80 | | -**Implementation** by Timendus - 2024 |
81 | | -([https://github.com/Timendus](https://github.com/Timendus)) |
| 14 | +- `server-list.json` contains the default server list used by the modern UI. |
| 15 | +- `settings.json` overrides selected `speedtest_worker.js` settings. |
| 16 | +- `index.html` and `index-modern.html` show how the frontend is wired up. |
82 | 17 |
|
83 | | -> "I had a couple of days of free time, and I came across the design by |
84 | | -> fromScratch. I thought it looked great, and that it deserved a good |
85 | | -> implementation, so I set out to make one. I've taken the liberty of changing a |
86 | | -> couple of details, coming up with some animations and adding a few small |
87 | | -> features, but otherwise I've tried to stay as close to the "intention" of the |
88 | | -> design as I could." |
| 18 | +## Notes |
89 | 19 |
|
90 | | -_-- Timendus, https://github.com/librespeed/speedtest/pull/649_ |
| 20 | +- The modern frontend expects modern browser features and does not support old |
| 21 | + browsers. |
| 22 | +- This directory does not contain the backend or results-sharing files. |
0 commit comments