Skip to content
This repository has been archived by the owner on Jun 19, 2020. It is now read-only.

Commit

Permalink
update index.html
Browse files Browse the repository at this point in the history
  • Loading branch information
Weijian Zeng committed Feb 28, 2020
1 parent cf0ca2c commit 271e3f3
Show file tree
Hide file tree
Showing 7 changed files with 1,426 additions and 154 deletions.
45 changes: 11 additions & 34 deletions web/www/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ new Vue({
controls: {
enable_camera: false,
// enable_processing: false,
camera_mode: 'BAY'
camera_mode: 'RAW'
},
targets: []
},
Expand All @@ -16,43 +16,20 @@ new Vue({
var self = this;
start_camera_stream("/processed/ws", "processed_image");
},
watch: {
'controls.camera_mode': function(){
Socket.send({'controls':this.controls})
}
},
methods: {
onTargetUpdate: function(key, value, isNew) {
//console.log(value);
this.targets = value
},
enableRaw: function() {
var self = this;
self.controls.camera_mode = 'RAW';
Socket.send({'controls':self.controls})

},
enableBall: function(){
var self = this;
self.controls.camera_mode = 'BALL';
Socket.send({'controls':self.controls})
},
enableHex: function(){
var self = this;
self.controls.camera_mode = 'HEXAGON'
Socket.send({'controls':self.controls})
},
enableBay: function(){
var self = this;
self.controls.camera_mode = 'BAY'
Socket.send({'controls':self.controls})
},

// enableProcessing: function(){
// var self = this;
// if(self.controls.enable_processing == false){
// self.controls.enable_processing = true;
// }
// else{
// self.controls.enable_processing = false;
// }
// Socket.send(self.controls)
// },

update: function() {
var self = this;
// self.controls.camera_mode = mode;
// Socket.send({'controls':self.controls})
}
}
});
202 changes: 82 additions & 120 deletions web/www/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,150 +8,112 @@
<link rel="stylesheet" href="/spectre-icons.min.css">

<style>

body {
background-color: black;
color:white;
}
.cosmic {
height:100vh;
background-image: radial-gradient( circle farthest-corner at 0.5% 97.2%, #2fad5b 0%, #93c4ff 100.2% );
}

.vid {
position: absolute;
top: 0; left:0;
width: 100%; height: 100%;
z-index: -1;
}

background-image: radial-gradient( circle farthest-corner at 0.5% 97.2%, #2fad5b 0%, #93c4ff 100.2% );
.vidContain {
width:300px; height:200px;
position:relative;
display:inline-block;
margin:10px;
}

.target {
background: #00000091
}

.vector {
background: url(up.gif) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}


</style>
</head>
<body class="cosmic">
<body>
<script src="/jquery-3.1.1.min.js"></script>

<!-- development version, includes helpful console warnings -->
<script src="/vue.js"></script>


<script type="text/x-template" id="main-template">
<div class="container" style="padding:100px">

<div class="container" >

<div class="columns">
<div class="column col-auto"></div>
<div class="column col">

<header class="navbar">
<section class="navbar-section">
<span href="..." class="navbar-brand mr-2">NetworkTables Controls</span>
</section>
</header>

<table class="table">
<thead>
<tr>
<th>name</th>
<th>value</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>enable camera</td>
<td><!-- form switch control -->

</td>
<td>
<div class="form-group">
<label class="form-switch">
<input type="checkbox" v-model="controls.enable_camera">
<i class="form-icon"></i>
</label>
<div class="column col-3">
</div>
</td>
</tr>
<tr>
<td>camera MODE</td>
<td><!-- form switch control -->
</td>
<td>
<div class="form-group">
<label class="form-radio form-inline">
<input type="radio" name="gender" checked="" @click="enableRaw"><i class="form-icon"></i> RAW
</label>
<div class="column col-6">
<center>
<div class="form-group">
<label class="form-radio form-inline">
<input type="radio" v-model="controls.camera_mode" value="OFF" name="mode" @click="update"><i class="form-icon"></i> OFF
</label>
<label class="form-radio form-inline">
<input type="radio" v-model="controls.camera_mode" name="mode"value="RAW" @click="update"><i class="form-icon"></i> RAW
</label>
<label class="form-radio form-inline">
<input type="radio" v-model="controls.camera_mode" value="BAY" name="mode" @click="update"><i class="form-icon"></i> BAY
</label>
<label class="form-radio form-inline">
<input type="radio" name="mode" v-model="controls.camera_mode" value="BALL" @click="update"><i class="form-icon"></i> BALL
</label>
<label class="form-radio form-inline">
<input type="radio" name="mode" v-model="controls.camera_mode" value="HEXAGON" @click="update"><i class="form-icon"></i> HEX GOAL
</label>
</div>
</center>
</div>
<div class="form-group">
<label class="form-radio form-inline">
<input type="radio" name="gender" @click="enableBay"><i class="form-icon"></i> BAY DETECT
</label>
</div>
<div class="form-group">
<label class="form-radio form-inline">
<input type="radio" name="gender" @click="enableBall"><i class="form-icon"></i> BALL DETECT
</label>
</div>
<div class="form-group">
<label class="form-radio form-inline">
<input type="radio" name="gender" @click="enableHex"><i class="form-icon"></i> HEX GOAL DETECT
</label>
</div>
</td>
</tr>
</tbody>
<!-- <tbody v-if="color_profile">
<tr>
<td>RGB Red Threshod</td>
<td>{{ color_profile.rgb.red.min }} - {{ color_profile.rgb.red.max }} </td>
<td>Min:
<input class="slider tooltip"
v-model="color_profile.rgb.red.min"
@change="updateColors"
type="range" min="0" max="255">
Max:
<input class="slider tooltip"
v-model="color_profile.rgb.red.max"
@change="updateColors"
type="range" min="0" max="255">
</td>
</tr>
<tr>
<td>RGB Green Threshod</td>
<td>{{ color_profile.rgb.green.min }} - {{ color_profile.rgb.green.max }} </td>
<td>Min:
<input class="slider"
v-model="color_profile.rgb.green.min"
@change="updateColors"
type="range" min="0" max="255">
Max:
<input class="slider"
v-model="color_profile.rgb.green.max"
@change="updateColors"
type="range" min="0" max="255">
</td>
</tr>
<tr>
<td>RGB Blue Threshod</td>
<td>{{ color_profile.rgb.blue.min }} - {{ color_profile.rgb.blue.max }} </td>
<td>Min:
<input class="slider"
v-model="color_profile.rgb.blue.min"
@change="updateColors"
type="range" min="0" max="255">
Max:
<input class="slider"
v-model="color_profile.rgb.blue.max"
@change="updateColors"
type="range" min="0" max="255">
</td>
</tr>
</tbody> -->
</table>
</div>

</div>
</div>
</div>

</script>

<div class="columns">
<div class="column col-6">
<canvas id="canvas"
width="640"
height="480"
style="border:1px solid black"></canvas>
</div>
<div class="column col-5">
<img id="processed_image" src="">
</div>

<header class="navbar">
<section class="navbar-section">
</section>
<section class="navbar-center">
<a href="" class="btn">Tracking</a>
<a href="/calibrate/" class="btn btn-primary">Calibrate</a>
<a href="/camera/" class="btn btn-primary">Cameras</a>
<!-- centered logo or brand -->
</section>
<section class="navbar-section">
</section>
</header>

<div class="columns vector">
<div class="column col-10 col-mx-auto">
<center>
<canvas id="canvas"
class="target"
width="640"
height="480"
style="border:1px solid black"></canvas>
</center>
</div>
</div>

<div id="app"></div>

Expand Down
Loading

0 comments on commit 271e3f3

Please sign in to comment.