diff --git a/.formatter.exs b/.formatter.exs
index 5b2bcb7..86e85ef 100644
--- a/.formatter.exs
+++ b/.formatter.exs
@@ -1,5 +1,6 @@
# Used by "mix format"
[
+ import_deps: [:phoenix],
inputs: ["*.{ex,exs}", "{config,lib,test}/**/*.{ex,exs}"],
locals_without_parens: [
field: 3
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index ef0ed51..ceff364 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -12,8 +12,12 @@ jobs:
with:
otp-version: 23.0
elixir-version: 1.10.3
+ - name: Install Nerves bootstrap
+ run: mix archive.install --force hex nerves_bootstrap
- name: Checkout repository
uses: actions/checkout@v2
+ - name: Get dependencies
+ run: mix deps.get
- name: Check code formatting
run: mix format --check-formatted
diff --git a/.gitignore b/.gitignore
index b03e8b8..e81fdb0 100644
--- a/.gitignore
+++ b/.gitignore
@@ -7,7 +7,7 @@
# The directory Mix downloads your dependencies sources to.
/deps/
-# Where third-party dependencies like ExDoc output generated docs.
+# Where 3rd-party dependencies like ExDoc output generated docs.
/doc/
# Ignore .fetch files in case you like to edit your project deps locally.
@@ -15,3 +15,20 @@
# If the VM crashes, it generates a dump, let's ignore it too.
erl_crash.dump
+
+# Also ignore archive artifacts (built via "mix archive.build").
+*.ez
+
+# Ignore package tarball (built via "mix hex.build").
+xebow-*.tar
+
+# If NPM crashes, it generates a log, let's ignore it too.
+npm-debug.log
+
+# The directory NPM downloads your dependencies sources to.
+/assets/node_modules/
+
+# Since we are building assets from assets/,
+# we ignore priv/static. You may want to comment
+# this depending on your deployment strategy.
+/priv/static/
diff --git a/assets/.babelrc b/assets/.babelrc
new file mode 100644
index 0000000..ce33b24
--- /dev/null
+++ b/assets/.babelrc
@@ -0,0 +1,5 @@
+{
+ "presets": [
+ "@babel/preset-env"
+ ]
+}
diff --git a/assets/css/app.scss b/assets/css/app.scss
new file mode 100644
index 0000000..7cb79ef
--- /dev/null
+++ b/assets/css/app.scss
@@ -0,0 +1,120 @@
+/* This file is for your main application css. */
+@import './phoenix.css';
+@import '../node_modules/nprogress/nprogress.css';
+
+/* LiveView specific classes for your customizations */
+.invalid-feedback {
+ color: #a94442;
+ display: block;
+ margin: -1rem 0 2rem;
+}
+
+.phx-no-feedback.invalid-feedback,
+.phx-no-feedback .invalid-feedback {
+ display: none;
+}
+
+.phx-click-loading {
+ opacity: 0.5;
+ transition: opacity 1s ease-out;
+}
+
+.phx-disconnected {
+ cursor: wait;
+}
+.phx-disconnected * {
+ pointer-events: none;
+}
+
+.phx-modal {
+ opacity: 1 !important;
+ position: fixed;
+ z-index: 1;
+ left: 0;
+ top: 0;
+ width: 100%;
+ height: 100%;
+ overflow: auto;
+ background-color: rgb(0, 0, 0);
+ background-color: rgba(0, 0, 0, 0.4);
+}
+
+.phx-modal-content {
+ background-color: #fefefe;
+ margin: 15% auto;
+ padding: 20px;
+ border: 1px solid #888;
+ width: 80%;
+}
+
+.phx-modal-close {
+ color: #aaa;
+ float: right;
+ font-size: 28px;
+ font-weight: bold;
+}
+
+.phx-modal-close:hover,
+.phx-modal-close:focus {
+ color: black;
+ text-decoration: none;
+ cursor: pointer;
+}
+
+/* Alerts and form errors */
+.alert {
+ padding: 15px;
+ margin-bottom: 20px;
+ border: 1px solid transparent;
+ border-radius: 4px;
+}
+.alert-info {
+ color: #31708f;
+ background-color: #d9edf7;
+ border-color: #bce8f1;
+}
+.alert-warning {
+ color: #8a6d3b;
+ background-color: #fcf8e3;
+ border-color: #faebcc;
+}
+.alert-danger {
+ color: #a94442;
+ background-color: #f2dede;
+ border-color: #ebccd1;
+}
+.alert p {
+ margin-bottom: 0;
+}
+.alert:empty {
+ display: none;
+}
+
+// my styles
+
+.container {
+ max-width: 120rem;
+ color: white;
+}
+
+body {
+ background-color: #222;
+}
+
+div.screen {
+ position: relative;
+ top: 25px;
+ left: 25px;
+ height: 325px;
+}
+
+span.key,
+span.led {
+ display: inline-block;
+ position: absolute;
+ border: 1px solid #222;
+}
+
+span.led {
+ border-radius: 25px;
+}
diff --git a/assets/css/phoenix.css b/assets/css/phoenix.css
new file mode 100644
index 0000000..3767b31
--- /dev/null
+++ b/assets/css/phoenix.css
@@ -0,0 +1,101 @@
+/* Includes some default style for the starter application.
+ * This can be safely deleted to start fresh.
+ */
+
+/* Milligram v1.3.0 https://milligram.github.io
+ * Copyright (c) 2017 CJ Patoilo Licensed under the MIT license
+ */
+
+*,*:after,*:before{box-sizing:inherit}html{box-sizing:border-box;font-size:62.5%}body{color:#000000;font-family:'Helvetica', 'Arial', sans-serif;font-size:1.6em;font-weight:300;line-height:1.6}blockquote{border-left:0.3rem solid #d1d1d1;margin-left:0;margin-right:0;padding:1rem 1.5rem}blockquote *:last-child{margin-bottom:0}.button,button,input[type='button'],input[type='reset'],input[type='submit']{background-color:#0069d9;border:0.1rem solid #0069d9;border-radius:.4rem;color:#fff;cursor:pointer;display:inline-block;font-size:1.1rem;font-weight:700;height:3.8rem;letter-spacing:.1rem;line-height:3.8rem;padding:0 3.0rem;text-align:center;text-decoration:none;text-transform:uppercase;white-space:nowrap}.button:focus,.button:hover,button:focus,button:hover,input[type='button']:focus,input[type='button']:hover,input[type='reset']:focus,input[type='reset']:hover,input[type='submit']:focus,input[type='submit']:hover{background-color:#606c76;border-color:#606c76;color:#fff;outline:0}.button[disabled],button[disabled],input[type='button'][disabled],input[type='reset'][disabled],input[type='submit'][disabled]{cursor:default;opacity:.5}.button[disabled]:focus,.button[disabled]:hover,button[disabled]:focus,button[disabled]:hover,input[type='button'][disabled]:focus,input[type='button'][disabled]:hover,input[type='reset'][disabled]:focus,input[type='reset'][disabled]:hover,input[type='submit'][disabled]:focus,input[type='submit'][disabled]:hover{background-color:#0069d9;border-color:#0069d9}.button.button-outline,button.button-outline,input[type='button'].button-outline,input[type='reset'].button-outline,input[type='submit'].button-outline{background-color:transparent;color:#0069d9}.button.button-outline:focus,.button.button-outline:hover,button.button-outline:focus,button.button-outline:hover,input[type='button'].button-outline:focus,input[type='button'].button-outline:hover,input[type='reset'].button-outline:focus,input[type='reset'].button-outline:hover,input[type='submit'].button-outline:focus,input[type='submit'].button-outline:hover{background-color:transparent;border-color:#606c76;color:#606c76}.button.button-outline[disabled]:focus,.button.button-outline[disabled]:hover,button.button-outline[disabled]:focus,button.button-outline[disabled]:hover,input[type='button'].button-outline[disabled]:focus,input[type='button'].button-outline[disabled]:hover,input[type='reset'].button-outline[disabled]:focus,input[type='reset'].button-outline[disabled]:hover,input[type='submit'].button-outline[disabled]:focus,input[type='submit'].button-outline[disabled]:hover{border-color:inherit;color:#0069d9}.button.button-clear,button.button-clear,input[type='button'].button-clear,input[type='reset'].button-clear,input[type='submit'].button-clear{background-color:transparent;border-color:transparent;color:#0069d9}.button.button-clear:focus,.button.button-clear:hover,button.button-clear:focus,button.button-clear:hover,input[type='button'].button-clear:focus,input[type='button'].button-clear:hover,input[type='reset'].button-clear:focus,input[type='reset'].button-clear:hover,input[type='submit'].button-clear:focus,input[type='submit'].button-clear:hover{background-color:transparent;border-color:transparent;color:#606c76}.button.button-clear[disabled]:focus,.button.button-clear[disabled]:hover,button.button-clear[disabled]:focus,button.button-clear[disabled]:hover,input[type='button'].button-clear[disabled]:focus,input[type='button'].button-clear[disabled]:hover,input[type='reset'].button-clear[disabled]:focus,input[type='reset'].button-clear[disabled]:hover,input[type='submit'].button-clear[disabled]:focus,input[type='submit'].button-clear[disabled]:hover{color:#0069d9}code{background:#f4f5f6;border-radius:.4rem;font-size:86%;margin:0 .2rem;padding:.2rem .5rem;white-space:nowrap}pre{background:#f4f5f6;border-left:0.3rem solid #0069d9;overflow-y:hidden}pre>code{border-radius:0;display:block;padding:1rem 1.5rem;white-space:pre}hr{border:0;border-top:0.1rem solid #f4f5f6;margin:3.0rem 0}input[type='email'],input[type='number'],input[type='password'],input[type='search'],input[type='tel'],input[type='text'],input[type='url'],textarea,select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:0.1rem solid #d1d1d1;border-radius:.4rem;box-shadow:none;box-sizing:inherit;height:3.8rem;padding:.6rem 1.0rem;width:100%}input[type='email']:focus,input[type='number']:focus,input[type='password']:focus,input[type='search']:focus,input[type='tel']:focus,input[type='text']:focus,input[type='url']:focus,textarea:focus,select:focus{border-color:#0069d9;outline:0}select{background:url('data:image/svg+xml;utf8,
+
+ <%= @id %>:
+
+
+ <%= @value %>
+
+
+
+
+
+
+ <%= @id %>:
+
+
+
+
+
+
+ Animations:
+
+
+ ← previous
+ next →
+
+
+ <%= for led <- @leds do %>
+
+ phx-click="key_pressed"
+ phx-value-key-id="<%= led.id %>"
+ <% end %>
+ style="
+ left: <%= led.x %>px;
+ top: <%= led.y %>px;
+ width: <%= led.width %>px;
+ height: <%= led.height %>px;
+ background-color: <%= led.color %>
+ "
+ >
+ <% end %>
+
+
+
+ <%= get_flash(@conn, :info) %>
+ <%= get_flash(@conn, :error) %>
+ <%= @inner_content %>
+
diff --git a/lib/xebow_web/templates/layout/live.html.leex b/lib/xebow_web/templates/layout/live.html.leex
new file mode 100644
index 0000000..8dcded5
--- /dev/null
+++ b/lib/xebow_web/templates/layout/live.html.leex
@@ -0,0 +1,11 @@
+
+ <%= live_flash(@flash, :info) %>
+
+ <%= live_flash(@flash, :error) %>
+
+ <%= @inner_content %>
+
diff --git a/lib/xebow_web/templates/layout/root.html.leex b/lib/xebow_web/templates/layout/root.html.leex
new file mode 100644
index 0000000..7cfb577
--- /dev/null
+++ b/lib/xebow_web/templates/layout/root.html.leex
@@ -0,0 +1,32 @@
+
+
+
+