95 lines
3.3 KiB
Plaintext
95 lines
3.3 KiB
Plaintext
---
|
|
navigable: true
|
|
title: Cammie
|
|
---
|
|
<% content_for :scripts do %>
|
|
<script src="https://code.jquery.com/jquery-3.0.0.min.js" charset="utf-8"></script>
|
|
<script src="//cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js" integrity="sha256-yr4fRk/GU1ehYJPAs8P4JlTgu0Hdsp4ZKrx8bDEDC3I=" crossorigin="anonymous"></script>
|
|
<script type="text/javascript" charset="utf-8">
|
|
var socket = io("https://kelder.zeus.ugent.be");
|
|
socket.on('replymessage', function(obj) {
|
|
alert("Kelder says: " + obj['message']);
|
|
})
|
|
</script>
|
|
<%= asset :js, :cammie %>
|
|
<%= asset :js, :message %>
|
|
<% end %>
|
|
|
|
<section id="cammie-section">
|
|
<div id="cammie-body">
|
|
<figure class="image is-16by9">
|
|
<img id="cammie-feed" alt="cammie" src="https://kelder.zeus.ugent.be/webcam/video/mjpg.cgi?profileid=2" onerror="cammie_error()">
|
|
</figure>
|
|
<div id="cammie-ctrls">
|
|
<div class="columns is-mobile">
|
|
<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="columns center is-mobile">
|
|
<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="columns is-mobile">
|
|
<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>
|
|
<nav class="nav columns">
|
|
<div class="column">
|
|
<button class="button ctrl" data-command="set_pos" data-x="24" data-y="16">
|
|
Kleine tafel
|
|
</button>
|
|
</div>
|
|
<div class="column">
|
|
<button class="button ctrl" data-command="set_pos" data-x="61" data-y="10">
|
|
Grote tafel
|
|
</button>
|
|
</div>
|
|
<div class="column">
|
|
<button class="ctrl button" data-command="set_pos" data-x="10" data-y="12">
|
|
Zetel
|
|
</button>
|
|
</div>
|
|
<div class="column">
|
|
<button class="ctrl button" data-command="set_pos" data-x="26" data-y="6">
|
|
Deur
|
|
</button>
|
|
</div>
|
|
</nav>
|
|
<div class="columns">
|
|
<p id="chat-response"></p>
|
|
<div class="field has-addons ">
|
|
<div class="field control">
|
|
<input class="input chatbox" type="text" placeholder="Zeus is de max!">
|
|
</div>
|
|
<a class="button send control">
|
|
Send to kelder
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|