---
navigable: true
title: Cammie
---
<% content_for :scripts do %>
<script src="https://code.jquery.com/jquery-3.0.0.min.js" charset="utf-8"></script>
<%= asset :js, :cammie %>
<%= asset :js, :message %>
<% end %>

<section id="cammie-section">
  <div id="cammie-body">
    <figure>
      <div class="image is-16by9" style="display: inline-flex">
        <img crossorigin="anonymous" id="cammie-feed" alt="cammie" src="https://kelder.zeus.ugent.be/webcam/video/mjpg.cgi?profileid=2">
        <canvas class="overlay" id="overlaycanvas"></canvas>
      </div>
    </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>
  <input id="ghosts" type="checkbox" name="ghosts" value="ghosts" checked="true"> Display Ghosts <br>
  <nav class="nav columns">
    <div class="column">
      <button class="button ctrl" data-command="set_pos" data-x="16" data-y="16">
        Kleine tafel
      </button>
    </div>
    <div class="column">
      <button class="button ctrl" data-command="set_pos" data-x="50" data-y="10">
        Grote tafel
      </button>
    </div>
    <div class="column">
      <button class="ctrl button" data-command="set_pos" data-x="0" data-y="12">
        Zetel
      </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>
<script src="../assets/scripts/halloween/main.js" charset="utf-8"></script>