-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathdll-frame.html
86 lines (82 loc) · 2.59 KB
/
dll-frame.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
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Data Link Layer Frame</title>
<script type="text/javascript" src="d3/d3.v3.js"></script>
<script type="text/javascript" src="bs/js/d3/textbox.js"></script>
<link rel="stylesheet" href="bs/css/normalize.css" type="text/css">
<link rel="stylesheet" href="bs/css/karte.css" type="text/css">
<link rel="stylesheet" href="bs/css/textbox.css" type="text/css">
<style>
.frame_complex > .textbox body:first-of-type > div{
overflow: visible;
font-size: 4mm;
}
.drawing {
margin-top: 5mm;
}
.description {
margin-top: 3mm;
}
</style>
</head>
<body style="width:100%; height:100%" onload="create_dll_frame()">
<script>
function create_dll_frame(){
data = [
{ width: "18mm", text: "header" },
{ width: "55mm", text: "payload</br>(upper layer packet)" },
{ width: "18mm", text: "trailer" }
];
var nodes = d3.select("svg")
.append("svg")
.attr("x", ".1mm")
.attr("y", ".1mm")
.selectAll(".textbox")
.data(data)
.call(bs.d3.textbox)
.attr("class", "textbox")
.attr("height", "20mm");
data = [
{ width: "16mm", text: "start indicator" },
{ width: "14mm", text: "source mac" },
{ width: "13mm", text: "dest. mac" },
{ width: "28mm", text: "type</br>(of upper layer packet)" },
{ width: "17mm", text: "upper layer packet" },
{ width: "23mm", text: "FCS (frame checksum)" },
{ width: "17mm", text: "stop indicator" }
];
var nodes = d3.select("svg")
.append("svg")
.attr("class", "frame_complex")
.attr("x", ".1mm")
.attr("y", "30.1mm")
.selectAll(".textbox")
.data(data)
.call(bs.d3.textbox)
.attr("class", "textbox")
.attr("height", "20mm");
}
</script>
<div id=outer>
<div id=inner>
<div class="title">
<div>Frame</div>
<div class="episode">Data Link Layer</div>
</div>
<svg class="drawing" width="128.2mm" height="50.3mm">
<svg viewbox="0 0 1282 503">
<polygon class="assoz" points="0,200 0,300 710,300 180,200" />
<polygon class="assoz" points="1280,300 910,200 730,200 880,300" />
</svg>
</svg>
<div class="description">
DLL Frames können sich von Protokoll zu Protokoll stark unterscheiden.
Der obere Aufbau ist beispielhaft.
</div>
</div>
</div>
</body>
</html>
<!-- vim: set tw=80 colorcolumn=+1 : -->