Cammie controls

This commit is contained in:
David Vandorpe 2016-08-29 00:43:21 +02:00
parent a2c7746161
commit 80f1602a14
2 changed files with 30 additions and 9 deletions

View file

@ -12,10 +12,21 @@ debounce = (func, wait, initial = () -> ) ->
timeout = setTimeout later, wait timeout = setTimeout later, wait
initial.apply context, args if callNow initial.apply context, args if callNow
# Display controls when moving mouse
$ "#cammie-body" $ "#cammie-body"
.mousemove debounce () -> .mousemove debounce () ->
$ this $ this
.removeClass 'display' .removeClass 'display'
, 3000, () -> , 3000, () ->
$ this $ this
.addClass 'display' .addClass 'display'
# Cammie controls
$ '.ctrl'
.click ->
$context = $ this
$.ajax "//kelder.zeus.ugent.be/webcam/cgi/ptdc.cgi",
data:
command: 'set_relative_pos'
posX: $context.data 'x'
posY: $context.data 'y'

View file

@ -31,26 +31,36 @@ title: Cammie
<div id="cammie-body"> <div id="cammie-body">
<div class="cammie-ctrls top-row row"> <div class="cammie-ctrls top-row row">
<div class="column ctrl left"> <div class="column ctrl left" data-x="-10" data-y="10">
diag up left diag up left
</div> </div>
<div class="column ctrl center"> <div class="column ctrl center" data-x="-10" data-y="0">
up up
</div> </div>
<div class="column ctrl right"> <div class="column ctrl right" data-x="10" data-y="10">
diag up right diag up right
</div> </div>
</div> </div>
<div class="row middle-row cammie-ctrls"> <div class="row middle-row cammie-ctrls">
<div class="column ctrl left">left</div> <div class="column ctrl left" data-x="-10" data-y="0">
left
</div>
<div class="column center">&nbsp;</div> <div class="column center">&nbsp;</div>
<div class="column ctrl right">right</div> <div class="column ctrl right" data-x="10" data-y="0">
right
</div>
</div> </div>
<div class="row bottom-row cammie-ctrls"> <div class="row bottom-row cammie-ctrls">
<div class="column ctrl left">diag down left</div> <div class="column ctrl left" data-x="-10" data-y="-10">
<div class="column ctrl center">down</div> diag down left
<div class="column ctrl right">diag down right</div> </div>
<div class="column ctrl center" data-x="0" data-y="-10">
down
</div>
<div class="column ctrl right" data-x="10" data-y="-10">
diag down right
</div>
</div> </div>
</div> </div>
<!-- Hero footer: will stick at the bottom --> <!-- Hero footer: will stick at the bottom -->