demo/index.html at master · cityflow-project/demo · 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
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>Simulator</title>
    <link rel="stylesheet" href="library/bootstrap.min.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="library/spinner.css">
    <script src="library/pixi.min.js"></script>
    <script src="library/viewport.js"></script>
    <script src="library/axios.min.js"></script>
    <script src="Point.js"></script>
</head>


<body class="noselect">
<div class="container-fluid w-100 h-100 pt-0 pb-0">
    <div class="row h-100">
        <div class="col-2 pt-4 shadow-lg mr-0 status-panel bg-light">
            <!-- <i class="fas fa-car h2"></i> -->
            <h2 class="pb-3 border-bottom ">CityFlow</h2>
            <table class="table table-borderless table-hover border-bottom">
                <tbody>
                <tr>
                    <th scope="row" class="pl-0">Number of vehicles</th>
                    <td class="text-right" id="car-num">0</td>
                </tr>
                <tr class="d-none">
                    <th scope="row" class="pl-0">Total number of simulation step</th>
                    <td class="text-right" id="total-step-num">0</td>
                </tr>
                <tr>
                    <th scope="row" class="pl-0">Current step</th>
                    <td class="text-right" id="current-step-num">0</td>
                </tr>
                <tr class="d-none">
                    <th scope="row" class="pl-0">Current simulation progress</th>
                    <td class="text-right" id="progress-percentage">0</td>
                </tr>
                <tr class="d-none" id="speed-tr">
                    <th scope="row" class="pl-0">Average speed on lanes</th>
                    <td class="text-right" id="speed">0</td>
                </tr>
<!--                <tr>-->
<!--                    <th scope="row" class="pl-0">Selected Entity</th>-->
<!--                    <td class="text-right" id="selected-entity"></td>-->
<!--                </tr>-->
                </tbody>
            </table>
            <div id="control-box " class="border-bottom">
                <h5 class="mt-4">Control Box</h5>
                <table class="table table-borderless table-hover mb-0">
                    <tbody>
                    <tr style="line-height: 10px; height: 10px;">
                        <th scope="row" class="pl-0" id="stats-name">Replay Speed</th>
                        <td class="text-right" id="replay-speed">0</td>
                    </tr>
                    </tbody>
                </table>
                <div class="row no-gutters">
                    <div class="col-1 text-center">
                        <span class="fas fa-minus" style="cursor: pointer"></span>
                    </div>
                    <div class="col-10">
                        <input type="range" class="custom-range" id="replay-control">
                    </div>
                    <div class="col-1 text-center">
                        <span class="fas fa-plus" style="cursor: pointer"></span>
                    </div>
                </div>
                <div class="row m-3">
                    <div class="col-12 text-center">
                        <button class="btn btn-primary w-100" id="pause">Pause</button>
                    </div>
                </div>
            </div>
            <div class = "mt-4">
                <h5>Navigation Keys</h5>
                <ul class="list-group">
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                        Pause
                        <span class="badge badge-secondary">P</span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                        Slow Down
                        <span class="badge badge-secondary">1</span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                        Speed Up
                        <span class="badge badge-secondary">2</span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                        Step Forward
                        <span class="badge badge-secondary">]</span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                        Step Backward
                        <span class="badge badge-secondary">[</span>
                    </li>
                </ul>

            </div>
            <h5 class="mt-4">Info Box</h5>
            <div id="info"></div>
        </div>
        <div class="col-10 h-100 d-flex flex-column p-0">
            <div id="simulator-canvas" class="flex-grow-1">
                <div id="spinner" class="spinner">
                    <div class="rect1"></div>
                    <div class="rect2"></div>
                    <div class="rect3"></div>
                    <div class="rect4"></div>
                    <div class="rect5"></div>
                </div>
            </div>
        </div>
    </div>
</div>


<script src="script.js"></script>
</body>

</html>