Skip to content

Commit 13f6c49

Browse files
committed
Merge commit 'dd40a3a4937d88fdc2337adb190fb9d091e849a4' into newdesign
2 parents b345343 + dd40a3a commit 13f6c49

File tree

2 files changed

+234
-6
lines changed

2 files changed

+234
-6
lines changed

doc_docker.md

+6-6
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,10 @@ An Alpine Linux based docker version of LibreSpeed is also available here: [GitH
1111
If you just want to try it, the fastest way is:
1212

1313
```shell
14-
docker run -p 80:80 -d --name speedtest --rm ghcr.io/librespeed/speedtest
14+
docker run -p 80:8080 -d --name speedtest --rm ghcr.io/librespeed/speedtest
1515
```
1616

17-
Then go with your browser to port 80 of your server and try it out. If port 80 is already in use, adjust the first number in 80:80 above.
17+
Then go with your browser to port 80 of your server and try it out. If port 80 is already in use, adjust the first number in 80:8080 above.
1818
Default is to run in standalone mode.
1919

2020
## Docker Compose
@@ -41,9 +41,9 @@ services:
4141
#DISABLE_IPINFO: "false"
4242
#IPINFO_APIKEY: "your api key"
4343
#DISTANCE: "km"
44-
#WEBPORT: 80
44+
#WEBPORT: 8080
4545
ports:
46-
- "80:80" # webport mapping (host:container)
46+
- "80:8080" # webport mapping (host:container)
4747
```
4848
4949
Please adjust the environment variables according to the intended operating mode.
@@ -73,7 +73,7 @@ Here's a list of additional environment variables available in this mode:
7373
* __`DISABLE_IPINFO`__: If set to `true`, ISP info and distance will not be fetched from either [ipinfo.io](https://ipinfo.io) or the offline database. Default: value: `false`
7474
* __`IPINFO_APIKEY`__: API key for [ipinfo.io](https://ipinfo.io). Optional, but required if you want to use the full [ipinfo.io](https://ipinfo.io) APIs (required for distance measurement)
7575
* __`DISTANCE`__: When `DISABLE_IPINFO` is set to false, this specifies how the distance from the server is measured. Can be either `km` for kilometers, `mi` for miles, or an empty string to disable distance measurement. Requires an [ipinfo.io](https://ipinfo.io) API key. Default value: `km`
76-
* __`WEBPORT`__: Allows choosing a custom port for the included web server. Default value: `80`. Note that you will have to expose it through docker with the -p argument. This is not the port where the service is exposed outside docker!
76+
* __`WEBPORT`__: Allows choosing a custom port for the included web server. Default value: `8080`. Note that you will have to expose it through docker with the -p argument. This is not the port where the service is exposed outside docker!
7777

7878
If telemetry is enabled, a stats page will be available at `http://your.server/results/stats.php`, but a password must be specified.
7979

@@ -110,7 +110,7 @@ Here's a list of additional environment variables available in this mode:
110110
This command starts LibreSpeed in backend mode, with the default settings, on port 80:
111111

112112
```shell
113-
docker run -e MODE=backend -p 80:80 -it ghcr.io/librespeed/speedtest
113+
docker run -e MODE=backend -p 80:8080 -it ghcr.io/librespeed/speedtest
114114
```
115115

116116
### Frontend mode
+228
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,228 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no" />
6+
<title>LibreSpeed</title>
7+
<link rel="shortcut icon" href="favicon.ico">
8+
<link rel="preconnect" href="https://fonts.googleapis.com">
9+
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Open+Sans:wght@400;700&family=Noto+Color+Emoji&display=swap" rel="stylesheet">
10+
<script type="text/javascript" src="speedtest.js"></script>
11+
<script type="text/javascript">
12+
13+
//INITIALIZE SPEEDTEST
14+
var s=new Speedtest(); //create speedtest object
15+
s.setParameter("telemetry_level","basic"); //enable telemetry
16+
17+
s.onupdate=function(data){ //callback to update data in UI
18+
I("ip").textContent=data.clientIp;
19+
I("dlText").textContent=(data.testState==1&&data.dlStatus==0)?"...":data.dlStatus;
20+
I("ulText").textContent=(data.testState==3&&data.ulStatus==0)?"...":data.ulStatus;
21+
I("pingText").textContent=data.pingStatus;
22+
I("jitText").textContent=data.jitterStatus;
23+
}
24+
s.onend=function(aborted){ //callback for test ended/aborted
25+
I("startStopBtn").className=""; //show start button again
26+
if(aborted){ //if the test was aborted, clear the UI and prepare for new test
27+
initUI();
28+
} else {
29+
// Check if download speed is greater than 50 Mbit/s
30+
var dlSpeed = parseFloat(I("dlText").textContent);
31+
if (dlSpeed > 50) {
32+
I("speedMessage").textContent = "📽️👍";
33+
} else {
34+
I("speedMessage").textContent = "🙄";
35+
}
36+
}
37+
}
38+
39+
function startStop(){ //start/stop button pressed
40+
if(s.getState()==3){
41+
//speedtest is running, abort
42+
s.abort();
43+
}else{
44+
//test is not running, begin
45+
s.start();
46+
I("startStopBtn").className="running";
47+
}
48+
}
49+
50+
//function to (re)initialize UI
51+
function initUI(){
52+
I("dlText").textContent="";
53+
I("ulText").textContent="";
54+
I("pingText").textContent="";
55+
I("jitText").textContent="";
56+
I("ip").textContent="";
57+
}
58+
59+
function I(id){return document.getElementById(id);}
60+
61+
// Automatically start the test when the page loads
62+
window.onload = function() {
63+
startStop();
64+
}
65+
</script>
66+
67+
<style type="text/css">
68+
html,body{
69+
border:none; padding:0; margin:0;
70+
background:#f4f4f9;
71+
color:#333;
72+
font-family:"Roboto",sans-serif;
73+
}
74+
body{
75+
text-align:center;
76+
}
77+
h1{
78+
color:#333;
79+
margin-top:1em;
80+
}
81+
#startStopBtn{
82+
display:inline-block;
83+
margin:1em auto;
84+
color:#fff;
85+
background-color:#007bff;
86+
border:none;
87+
border-radius:0.3em;
88+
transition:all 0.3s;
89+
box-sizing:border-box;
90+
width:10em; height:3em;
91+
line-height:3em;
92+
cursor:pointer;
93+
box-shadow: 0 0 0 rgba(0,0,0,0.1), inset 0 0 0 rgba(0,0,0,0.1);
94+
font-size:1em;
95+
}
96+
#startStopBtn:hover{
97+
background-color:#0056b3;
98+
}
99+
#startStopBtn.running{
100+
background-color:#dc3545;
101+
}
102+
#startStopBtn:before{
103+
content:"Start";
104+
}
105+
#startStopBtn.running:before{
106+
content:"Abort";
107+
}
108+
#test{
109+
margin-top:2em;
110+
margin-bottom:4em;
111+
}
112+
div.testArea{
113+
display:inline-block;
114+
width:14em;
115+
height:9em;
116+
position:relative;
117+
box-sizing:border-box;
118+
margin:1em;
119+
background:#fff;
120+
border-radius:0.5em;
121+
box-shadow:0 0 10px rgba(0,0,0,0.1);
122+
padding:1em;
123+
}
124+
div.testName{
125+
position:absolute;
126+
top:0.5em; left:0;
127+
width:100%;
128+
font-size:1.2em;
129+
z-index:9;
130+
color:#555;
131+
}
132+
div.meterText{
133+
position:absolute;
134+
bottom:1.5em; left:0;
135+
width:100%;
136+
font-size:2.5em;
137+
z-index:9;
138+
color:#007bff;
139+
}
140+
div.testConclusion{
141+
position:absolute;
142+
bottom:2em; left:0;
143+
width:100%;
144+
font-size:5em;
145+
z-index:9;
146+
color:#333;
147+
text-shadow:0 0 10px #888;
148+
}
149+
#dlText{
150+
color:#007bff;
151+
}
152+
#ulText{
153+
color:#28a745;
154+
}
155+
#pingText,#jitText{
156+
color:#dc3545;
157+
}
158+
div.meterText:empty:before{
159+
color:#ccc !important;
160+
content:"0.00";
161+
}
162+
div.unit{
163+
position:absolute;
164+
bottom:2em; left:0;
165+
width:100%;
166+
z-index:9;
167+
color:#777;
168+
}
169+
div.testGroup{
170+
display:inline-block;
171+
}
172+
@media all and (max-width:65em){
173+
body{
174+
font-size:1.5vw;
175+
}
176+
}
177+
@media all and (max-width:40em){
178+
body{
179+
font-size:0.8em;
180+
}
181+
div.testGroup{
182+
display:block;
183+
margin: 0 auto;
184+
}
185+
}
186+
187+
</style>
188+
</head>
189+
<body>
190+
<h1>LibreSpeed</h1>
191+
<div id="startStopBtn" onclick="startStop()"></div>
192+
<div id="test">
193+
<div class="testGroup">
194+
<div class="testArea">
195+
<div class="testName">Download</div>
196+
<div id="dlText" class="meterText"></div>
197+
<div class="unit">Mbit/s</div>
198+
</div>
199+
<div class="testArea">
200+
<div class="testName">Upload</div>
201+
<div id="ulText" class="meterText"></div>
202+
<div class="unit">Mbit/s</div>
203+
</div>
204+
</div>
205+
<div class="testGroup">
206+
<div class="testArea">
207+
<div class="testName">Ping</div>
208+
<div id="pingText" class="meterText"></div>
209+
<div class="unit">ms</div>
210+
</div>
211+
<div class="testArea">
212+
<div class="testName">Jitter</div>
213+
<div id="jitText" class="meterText"></div>
214+
<div class="unit">ms</div>
215+
</div>
216+
</div>
217+
<div id="speedMessage" class="testConclusion">
218+
</div>
219+
<div id="ipArea">
220+
IP Address: <span id="ip"></span>
221+
</div>
222+
</div>
223+
<a href="https://github.com/librespeed/speedtest">Source code</a>
224+
<script type="text/javascript">
225+
initUI();
226+
</script>
227+
</body>
228+
</html>

0 commit comments

Comments
 (0)