Team2890/PhotonVision
4
0
Fork 0
mirror of https://github.com/PhotonVision/photonvision synced 2026-06-19 00:41:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added sidenav and random logo

Browse Source
This commit is contained in:
Sagi Frimer
2019-03-02 21:17:48 +02:00
parent 81e6a917c4
commit 34a8def31f
5 changed files with 59 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
Python/app/ChameleonVisionApp.py
View File

@@ -14,7 +14,8 @@ class ChameleonApplication(tornado.web.Application):
handlers = [(r"/", MainHandler),
(r"/websocket", ChameleonWebSocket),
(r"/CSS/(.*)", tornado.web.StaticFileHandler, {'path': os.path.join(os.path.dirname(__file__), "../../Site/CSS")}),
(r"/JS/(.*)", tornado.web.StaticFileHandler, {'path': os.path.join(os.path.dirname(__file__), "../../Site/JS")})]
(r"/JS/(.*)", tornado.web.StaticFileHandler, {'path': os.path.join(os.path.dirname(__file__), "../../Site/JS")}),
(r"/assets/(.*)", tornado.web.StaticFileHandler, {'path': os.path.join(os.path.dirname(__file__), "../../Site/assets")})]
settings = dict(
template_path=os.path.join(os.path.dirname(__file__), "../../Site")

35
Site/CSS/Main.css
View File

@@ -1,16 +1,41 @@
body{
body {
background: #212121;
}
.nav{
.nav {
background: #343334;
box-shadow: 0 8px 5px #383838;
box-shadow: 0 3px 5px #343334;
}
.nav > a{
.nav > a, .sidenav a {
color: whitesmoke;
font-family:Verdana;
font-weight: 500;
}
.nav > a:hover{
.nav > a:hover, .sidenav a:hover {
color: #17a2b8;
}
.sidenav {
height: 100%;
width: 80px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
padding-top: 20px;
box-shadow: 3px 0px 5px #111;
}
.main {
margin-left: 80px;
}
#logo {
width: 100%;
height: 80px;
}

45
Site/Index.html
View File

@@ -1,28 +1,23 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Chameleon Vision</title>
<link rel="stylesheet" type="text/css" href="CSS/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="CSS/Main.css" >
</head>
<body>
<div>
<nav class="nav">
<a class="nav-link active" href="#">Input</a>
<a class="nav-link" href="#">Filter</a>
<a class="nav-link" href="#">Thresholds</a>
<a class="nav-link" href="#">3D</a>
</nav>
</div>
<script>
var ws = new WebSocket("ws://localhost:8888/websocket");
ws.onopen = function () {
ws.send("hello");
}
ws.onmessage = function (ev) {
alert(ev.data);
}
</script>
</body>
<head>
<meta charset="utf-8">
<title>Chameleon Vision</title>
<link rel="stylesheet" type="text/css" href="CSS/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="CSS/main.css" >
</head>
<body>
<div class="sidenav">
<a href="#"><img id="logo" src="assets/logo.png"></a>
</div>
<div class="main">
<nav class="nav">
<a class="nav-link active" href="#">Input</a>
<a class="nav-link" href="#">Filter</a>
<a class="nav-link" href="#">Thresholds</a>
<a class="nav-link" href="#">3D</a>
</nav>
</div>
<script src="JS/main.js"></script>
</body>
</html>

7
Site/JS/main.js Normal file
View File

@@ -0,0 +1,7 @@
let ws = new WebSocket("ws://localhost:8888/websocket");
ws.onopen = function () {
ws.send("hello");
}
ws.onmessage = function (ev) {
alert(ev.data);
}

BIN
Site/assets/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB