midgard/zeus.ugent.be
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Merge pull request #46 from ZeusWPI/cammie

Browse source 
Cammie
This commit is contained in:
lorin 2016-08-30 21:50:11 +02:00 committed by GitHub
commit 5bf96b1c0b
4 changed files with 122 additions and 130 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
Rules
View file

@ -45,16 +45,6 @@ compile '/feed.xml' do
write '/feed.xml'
end
#
# CAMMIE
#
compile '/cammie.*' do
layout '/default.*'
filter :erb
filter :relativize_paths, type: :html
end
#
# ARCHIVES
#

32
content/assets/scripts/cammie.coffee
View file

@ -0,0 +1,32 @@
# Reworked version of the underscorejs debounce
debounce = (func, wait, initial = () -> ) ->
timeout = false
() ->
context = this
args = arguments
later = () ->
timeout = null
func.apply context, args
callNow = !timeout
clearTimeout timeout
timeout = setTimeout later, wait
initial.apply context, args if callNow
# Display controls when moving mouse
$ "#cammie-ctrls"
.mousemove debounce () ->
$ this
.removeClass 'display'
, 3000, () ->
$ this
.addClass 'display'
# Cammie controls
$ '.ctrl'
.click ->
$context = $ this
$.ajax "//kelder.zeus.ugent.be/webcam/cgi/ptdc.cgi",
data:
command: $context.data 'command'
posX: $context.data 'x'
posY: $context.data 'y'

106
content/assets/stylesheets/includes/cammie.scss
View file

@ -1,68 +1,52 @@
#cammie-container {
display: flex;
justify-content: center;
#cammie-body {
position: relative;
width: 100%;
}
.fullpage {
min-width: 100%;
min-height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
background-color: black;
}
#cammie-section {
position: relative;
height: 100%;
#cammie-body {
position: relative;
height: 100%;
}
.ctrl {
background-color: $cammie-controls-color;
color: white;
z-index: 100;
position: absolute;
// Chevron centering
#cammie-ctrls {
display: flex;
justify-content: center;
align-items: center;
justify-content: space-between;
flex-direction: column;
height: 100%;
width: 100%;
&:hover {
background-color: $zeus_orange;
z-index: 200;
cursor: pointer;
transition: opacity 1s ease-in-out;
z-index: 5;
opacity: 0;
position: absolute;
top: 0;
left: 0;
.columns {
margin: 0;
}
.center {
flex: 1;
}
&.display {
transition: opacity .5s ease-in-out;
opacity: 1;
}
.ctrl {
height: 100%;
// Center arrows
display: flex;
justify-content: space-around;
align-items: center;
background-color: $cammie-controls-color;
color: white;
&:hover {
background-color: $zeus_orange;
cursor: pointer;
}
&.diag i {
transform: rotate(45deg);
}
}
}
.left {
height: 100%;
width: 50px;
left: 0;
}
.right {
height: 100%;
width: 100px;
right: 0;
}
.up {
height: 100px;
width: 100%;
top: 0;
}
.down {
height: 100px;
width: 100%;
bottom: 0;
}
}

104
content/cammie.erb
View file

@ -2,74 +2,60 @@
navigable: true
title: Cammie
---
<section id="cammie-section" class="hero is-fullheight">
<!-- Hero header: will stick at the top -->
<div class="hero-head">
<%= render '/partials/_navbar.*' %>
</div>
<!--
<section id="cammie-section">
<div id="cammie-body">
<div id="left" class="ctrl">
<%= fa 'chevron-left', size: '2x' %>
</div>
<div id="right" class="ctrl">
<%= fa 'chevron-right', size: '2x' %>
</div>
<div id="up" class="ctrl">
<%= fa 'chevron-up', size: '2x' %>
</div>
<div id="down" class="ctrl">
<%= fa 'chevron-down', size: '2x' %>
</div>
</div>
-->
<div id="cammie-body">
<div class="columns">
<div class="column">
<div class="ctrl left">
diag up left
<img id="cammie-feed" src="https://kelder.zeus.ugent.be/webcam/video/mjpg.cgi?profileid=2">
<div id="cammie-ctrls">
<div class="columns">
<div class="column is-1 ctrl diag left" data-command="set_relative_pos" data-x="-10" data-y="10">
<%= fa 'chevron-circle-left' %>
</div>
<div class="column ctrl center" data-command="set_relative_pos" data-x="0" data-y="10">
<%= fa 'chevron-circle-up' %>
</div>
<div class="column is-1 ctrl diag right" data-command="set_relative_pos" data-x="10" data-y="10">
<%= fa 'chevron-circle-up' %>
</div>
</div>
<div class="column">
<div class="ctrl up">
up
<div class="columns center">
<div class="column is-1 ctrl left" data-command="set_relative_pos" data-x="-10" data-y="0">
<%= fa 'chevron-circle-left' %>
</div>
<div class="column">
<!-- blank space -->
</div>
<div class="column is-1 ctrl right" data-command="set_relative_pos" data-x="10" data-y="0">
<%= fa 'chevron-circle-right' %>
</div>
</div>
<div class="column">
<div class="ctrl right">
diag up right
<div class="columns">
<div class="column is-1 ctrl diag left" data-command="set_relative_pos" data-x="-10" data-y="-10">
<%= fa 'chevron-circle-down' %>
</div>
<div class="column ctrl center" data-command="set_relative_pos" data-x="0" data-y="-10">
<%= fa 'chevron-circle-down' %>
</div>
<div class="column is-1 ctrl diag right" data-command="set_relative_pos" data-x="10" data-y="-10">
<%= fa 'chevron-circle-right' %>
</div>
</div>
</div>
<div class="columns cammie-ctrls">
<div class="column ctrl left">left</div>
<div class="column ctrl center">home?</div>
<div class="column ctrl right">right</div>
</div>
<div class="columns cammie-ctrls">
<div class="column ctrl left">diag down left</div>
<div class="column ctrl center">down</div>
<div class="column ctrl right">diag down right</div>
</div>
</div>
<!-- Hero footer: will stick at the bottom -->
<div class="hero-foot">
<nav class="tabs is-boxed is-fullwidth">
<div class="container">
<ul>
<li><a>Kleine Tafel</a></li>
<li><a>Grote Tafel</a></li>
<li><a>Zetel</a></li>
</ul>
</div>
</nav>
</div>
<nav class="nav">
<div class="nav-center">
<a class="nav-item ctrl" href="#" data-command="set_pos" data-x="0" data-y="12">
Kleine tafel
</a>
<a class="nav-item ctrl" href="#" data-command="set_pos" data-x="50" data-y="10">
Grote tafel
</a>
<a class="nav-item ctrl" href="#" data-command="set_pos" data-x="50" data-y="22">
Zetel
</a>
</div>
</nav>
</section>