mirror of
https://github.com/warmcat/libwebsockets.git
synced 2025-03-16 00:00:07 +01:00
test html add tabs
Signed-off-by: Andy Green <andy.green@linaro.org>
This commit is contained in:
Andy Green
parent
228ecc6e56
commit
466defa72d
1 changed files with 161 additions and 60 deletions
|
|
@ -6,10 +6,60 @@
|
||||||
<style type="text/css">
|
<style type="text/css">
|
||||||
div.title { font-size:18pt; font: Arial; font-weight:normal; text-align:center; color:#000000; }
|
div.title { font-size:18pt; font: Arial; font-weight:normal; text-align:center; color:#000000; }
|
||||||
.browser { font-size:18pt; font: Arial; font-weight:normal; text-align:center; color:#ffff00; vertical-align:middle; text-align:center; background:#d0b070; padding:12px; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px;}
|
.browser { font-size:18pt; font: Arial; font-weight:normal; text-align:center; color:#ffff00; vertical-align:middle; text-align:center; background:#d0b070; padding:12px; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px;}
|
||||||
.group2 { width:600px; vertical-align:middle; text-align:center; background:#f0f0e0; padding:12px; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; }
|
.group2 { vertical-align:middle;
|
||||||
.explain { vertical-align:middle; text-align:center; background:#f0f0c0; padding:12px; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; color:#404000; }
|
text-align:center;
|
||||||
|
background:#f0f0e0;
|
||||||
|
padding:12px;
|
||||||
|
-webkit-border-radius:10px;
|
||||||
|
-moz-border-radius:10px;
|
||||||
|
border-radius:10px; }
|
||||||
|
.explain { vertical-align:middle;
|
||||||
|
text-align:center;
|
||||||
|
background:#f0f0c0; padding:12px;
|
||||||
|
-webkit-border-radius:10px;
|
||||||
|
-moz-border-radius:10px;
|
||||||
|
border-radius:10px;
|
||||||
|
color:#404000; }
|
||||||
.content { vertical-align:top; text-align:center; background:#fffff0; padding:12px; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; }
|
.content { vertical-align:top; text-align:center; background:#fffff0; padding:12px; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; }
|
||||||
.canvas { vertical-align:top; text-align:center; background:#efefd0; padding:12px; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; }
|
.canvas { vertical-align:top; text-align:center; background:#efefd0; padding:12px; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; }
|
||||||
|
.tabs {
|
||||||
|
position: relative;
|
||||||
|
min-height: 750px; /* This part sucks */
|
||||||
|
clear: both;
|
||||||
|
margin: 25px 0;
|
||||||
|
}
|
||||||
|
.tab {
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
.tab label {
|
||||||
|
background: #eee;
|
||||||
|
padding: 10px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
margin-left: -1px;
|
||||||
|
position: relative;
|
||||||
|
left: 1px;
|
||||||
|
}
|
||||||
|
.tab [type=radio] {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.content {
|
||||||
|
position: absolute;
|
||||||
|
top: 28px;
|
||||||
|
left: 0;
|
||||||
|
background: white;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
padding: 20px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
}
|
||||||
|
[type=radio]:checked ~ label {
|
||||||
|
background: white;
|
||||||
|
border-bottom: 1px solid white;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
[type=radio]:checked ~ label ~ .content {
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
|
|
@ -19,33 +69,67 @@
|
||||||
|
|
||||||
<table><tr><td>
|
<table><tr><td>
|
||||||
|
|
||||||
<table width="100%"><tr><td valign=middle align=center><a href="https://libwebsockets.org"><img src="/libwebsockets.org-logo.png"></a></td><td>
|
<table width=600px>
|
||||||
<section class="browser">Detected Browser: <div id=brow>...</div></section></td></tr></table>
|
<tr>
|
||||||
|
<td valign=middle align=center>
|
||||||
|
<a href="https://libwebsockets.org">
|
||||||
|
<img src="/libwebsockets.org-logo.png"></a></td><td>
|
||||||
|
<section class="browser">Detected Browser:
|
||||||
|
<div id=brow>...</div></section>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
</td></tr><tr><td>
|
|
||||||
|
|
||||||
<section id="increment" class="group2">
|
|
||||||
<div class="title">libwebsockets "dumb-increment-protocol"</div>
|
|
||||||
<table><tr><td>
|
|
||||||
<table class="content" width="200px">
|
|
||||||
<tr><td align=center><input type=button id=offset value="Reset counter" onclick="reset();" ></td></tr>
|
|
||||||
<tr><td width=200px align=center><div id=number> </div></td></tr>
|
|
||||||
<tr><td id=wsdi_statustd align=center class="explain"><div id=wsdi_status>Not initialized</div></td></tr>
|
|
||||||
</tr>
|
|
||||||
</table>
|
</table>
|
||||||
</td><td class="explain">
|
</td></tr>
|
||||||
The incrementing number is coming from the server and is individual for
|
<tr><td colspan=2 align=center>
|
||||||
|
Click <a href="/leaf.jpg" target="_blank">Here</a> to
|
||||||
|
have the test server send a big picture by http.
|
||||||
|
</td></tr>
|
||||||
|
<tr><td colspan=2>
|
||||||
|
<div class="tabs">
|
||||||
|
|
||||||
|
<div class="tab">
|
||||||
|
<input type="radio" id="tab-1" name="tab-group-1" checked>
|
||||||
|
<label for="tab-1">Dumb Increment Demo</label>
|
||||||
|
|
||||||
|
<div class="content">
|
||||||
|
<div id="dumb" class="group2">
|
||||||
|
<table>
|
||||||
|
<tr>
|
||||||
|
<td width=200px id=wsdi_statustd align=center class="explain">
|
||||||
|
<div id=wsdi_status>Not initialized</div>
|
||||||
|
</td>
|
||||||
|
|
||||||
|
<td align=center><div id=number> </div></td>
|
||||||
|
<td align=center>
|
||||||
|
<input type=button id=offset value="Reset counter" onclick="reset();" >
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="explain" colspan=3>
|
||||||
|
The incrementing number is coming from the server at 20Hz and is individual for
|
||||||
each connection to the server... try opening a second browser window.
|
each connection to the server... try opening a second browser window.
|
||||||
<br/><br/>
|
<br/><br/>
|
||||||
The button zeros just this connection's number.
|
The button sends a message over the websocket link to ask the server
|
||||||
<br/><br/>
|
to zero just this connection's number.
|
||||||
Click <a href="/leaf.jpg" target="_blank">Here</a> to have the test server send a big picture by http.
|
</td>
|
||||||
</td></tr></table>
|
</tr>
|
||||||
</section>
|
</table>
|
||||||
<br>
|
</div>
|
||||||
<section id="mirror" class="group2">
|
</div>
|
||||||
<div class="title">libwebsockets "lws-mirror-protocol"</div>
|
</div>
|
||||||
<div class="explain">
|
|
||||||
|
<div class="tab">
|
||||||
|
<input type="radio" id="tab-2" name="tab-group-1">
|
||||||
|
<label for="tab-2">Mirror Demo</label>
|
||||||
|
|
||||||
|
<div class="content">
|
||||||
|
<div id="mirror" class="group2">
|
||||||
|
<table>
|
||||||
|
<tr>
|
||||||
|
<td colspan="3">
|
||||||
|
<div class="title">libwebsockets "lws-mirror-protocol"</div>
|
||||||
|
<div class="explain">
|
||||||
Use the mouse to draw on the canvas below -- all other browser windows open
|
Use the mouse to draw on the canvas below -- all other browser windows open
|
||||||
on this page see your drawing in realtime and you can see any of theirs as
|
on this page see your drawing in realtime and you can see any of theirs as
|
||||||
well.
|
well.
|
||||||
|
|
@ -56,53 +140,70 @@ protocol, including the guy who sent the packet.
|
||||||
<br/><br/>
|
<br/><br/>
|
||||||
<b>libwebsockets-test-client</b> joins in by spamming circles on to this shared canvas when
|
<b>libwebsockets-test-client</b> joins in by spamming circles on to this shared canvas when
|
||||||
run.
|
run.
|
||||||
</div>
|
</div>
|
||||||
<table class="content">
|
</td>
|
||||||
<tr>
|
</tr>
|
||||||
<td>Drawing color:
|
<tr>
|
||||||
<select id="color" onchange="update_color();">
|
<td>Drawing color:
|
||||||
<option value=#000000>Black</option>
|
<select id="color" onchange="update_color();">
|
||||||
<option value=#0000ff>Blue</option>
|
<option value=#000000>Black</option>
|
||||||
<option value=#20ff20>Green</option>
|
<option value=#0000ff>Blue</option>
|
||||||
<option value=#802020>Dark Red</option>
|
<option value=#20ff20>Green</option>
|
||||||
</select>
|
<option value=#802020>Dark Red</option>
|
||||||
</td>
|
</select>
|
||||||
<td id=wslm_statustd align=center class="explain"><div id=wslm_status>Not initialized</div></td>
|
</td>
|
||||||
</tr>
|
<td colspan=2 id=wslm_statustd align=center class="explain">
|
||||||
<tr>
|
<div id=wslm_status>Not initialized</div>
|
||||||
<td colspan=2 width=500 class="content">
|
</td>
|
||||||
<div id="wslm_drawing">
|
</tr>
|
||||||
</div></td>
|
<tr>
|
||||||
</tr>
|
<td colspan=3 width=500 height=320>
|
||||||
</table>
|
<div id="wslm_drawing" style="background:white"></div>
|
||||||
</section>
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<section id="ot" class="group2">
|
<div class="tab">
|
||||||
|
<input type="radio" id="tab-3" name="tab-group-1">
|
||||||
|
<label for="tab-3">Close Testing</label>
|
||||||
|
|
||||||
|
<div class="content">
|
||||||
|
<div id="ot" class="group2">
|
||||||
|
<table>
|
||||||
|
<tr>
|
||||||
|
<td colspan=3>
|
||||||
<div class="title">libwebsockets "open and close testing"</div>
|
<div class="title">libwebsockets "open and close testing"</div>
|
||||||
<table><tr><td>
|
</td></tr>
|
||||||
<table class="content" width="200px">
|
|
||||||
<tr>
|
<tr>
|
||||||
<td align=center><input type=button id=ot_open_btn value="Open" onclick="ot_open();" ></td>
|
<td align=center><input type=button id=ot_open_btn value="Open" onclick="ot_open();" ></td>
|
||||||
<td align=center><input type=button id=ot_close_btn disabled value="Close" onclick="ot_close();" ></td>
|
<td align=center><input type=button id=ot_close_btn disabled value="Close" onclick="ot_close();" ></td>
|
||||||
<td align=center><input type=button id=ot_req_close_btn disabled value="Request Server Close" onclick="ot_req_close();" ></td>
|
<td align=center><input type=button id=ot_req_close_btn disabled value="Request Server Close" onclick="ot_req_close();" ></td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr><td colspan="3" id=ot_statustd align=center class="explain"><div id=ot_status>Not initialized</div></td></tr>
|
<tr><td id=ot_statustd align=center class="explain">
|
||||||
</tr>
|
<div id=ot_status>Not initialized</div>
|
||||||
</table>
|
</td>
|
||||||
</td><td class="explain">
|
<td class="explain" colspan=2>
|
||||||
To help with open and close testing, you can open and close a connection by hand using
|
To help with open and close testing, you can open and close a connection by hand using
|
||||||
the buttons. "Request Server Close" sends a message asking the server to
|
the buttons.<br>
|
||||||
initiate the close.
|
"<b>Close</b>" closes the connection from the browser with code 3000
|
||||||
|
and reason 'Bye!".<br>
|
||||||
|
"<b>Request Server Close</b>" sends a message asking the server to
|
||||||
|
initiate the close, which it does with code 1001 and reason "Seeya".
|
||||||
|
</td></tr></table>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
</td></tr></table>
|
</td></tr></table>
|
||||||
</section>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
</td></tr><tr><td>
|
|
||||||
Looking for support? <a href="https://libwebsockets.org">https://libwebsockets.org</a>, <a href="https://github.com/warmcat/libwebsockets">https://github.com/warmcat/libwebsockets</a></a><br/>
|
Looking for support? <a href="https://libwebsockets.org">https://libwebsockets.org</a>, <a href="https://github.com/warmcat/libwebsockets">https://github.com/warmcat/libwebsockets</a></a><br/>
|
||||||
Join the mailing list: <a href="https://libwebsockets.org/mailman/listinfo/libwebsockets">https://libwebsockets.org/mailman/listinfo/libwebsockets</a>
|
Join the mailing list: <a href="https://libwebsockets.org/mailman/listinfo/libwebsockets">https://libwebsockets.org/mailman/listinfo/libwebsockets</a>
|
||||||
|
|
||||||
</td></tr></table>
|
|
||||||
|
|
||||||
</article>
|
</article>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue