step7: Add img_effect and snap features

Author: GregMefford

eye/lib/eye/camera.ex

@@ -11,6 +11,10 @@ defmodule Eye.Camera do
     GenServer.call(__MODULE__, {:set_size, width, height})
   end
 
+  def set_img_effect(effect) do
+    GenServer.call(__MODULE__, {:set_img_effect, effect})
+  end
+
   defdelegate next_frame(), to: Picam
 
   # GenServer API
@@ -23,6 +27,7 @@ defmodule Eye.Camera do
     Logger.info("Configuring camera")
     conf = %Configuration{}
     Picam.set_size(conf.size.width, conf.size.height)
+    Picam.set_img_effect(conf.img_effect)
     {:ok, conf}
   end
 
@@ -39,4 +44,15 @@ defmodule Eye.Camera do
     end
   end
 
+  def handle_call({:set_img_effect, effect}, _from, conf) do
+    case Picam.set_img_effect(effect) do
+      :ok ->
+        conf = %{conf | img_effect: effect}
+        {:reply, :ok, conf}
+
+      err ->
+        {:reply, err, conf}
+    end
+  end
+
 end

eye/lib/eye/configuration.ex

@@ -7,16 +7,23 @@ defmodule Eye.Configuration do
   """
 
   defstruct [
-    size: %{width: 1280, height: 720}
+    size: %{width: 1280, height: 720},
+    img_effect: :normal
   ]
 
   @typedoc @moduledoc
   @type t ::
     %__MODULE__{
-      size: dimensions()
+      size: dimensions(),
+      img_effect: img_effect()
     }
 
   @type dimensions ::
     %{width: non_neg_integer(), height: non_neg_integer()}
 
+  @type img_effect ::
+    :normal
+    | :sketch
+    | :oilpaint
+
 end

eye_ui/assets/js/app.js

@@ -111,3 +111,30 @@ document.getElementById("1920x1080").onclick = (event) => {
   event.preventDefault();
   setResolution(absintheSocket, 1920, 1080);
 };
+
+// Image Mode Buttons
+
+const setImageMode = (socket, effect) => {
+  AbsintheSocket.send(socket, {
+    operation: `mutation {
+      imgEffect(effect: ${effect}) {
+        imgEffect
+      }
+    }`
+  });
+};
+
+document.getElementById("normal").onclick = (event) => {
+  event.preventDefault();
+  setImageMode(absintheSocket, "NORMAL");
+};
+
+document.getElementById("sketch").onclick = (event) => {
+  event.preventDefault();
+  setImageMode(absintheSocket, "SKETCH");
+};
+
+document.getElementById("oilpaint").onclick = (event) => {
+  event.preventDefault();
+  setImageMode(absintheSocket, "OILPAINT");
+};

eye_ui/lib/eye_ui/resolvers/camera.ex

@@ -9,4 +9,9 @@ defmodule EyeUi.Resolvers.Camera do
     {:ok, Eye.Camera.get_config()}
   end
 
+  def set_img_effect(_parent, args, _resolution) do
+    Eye.Camera.set_img_effect(args[:effect])
+    {:ok, Eye.Camera.get_config()}
+  end
+
 end

eye_ui/lib/eye_ui/schema.ex

@@ -30,6 +30,12 @@ defmodule EyeUi.Schema do
       resolve &Resolvers.Camera.set_size/3
     end
 
+    @desc "Set image effect"
+    field :img_effect, :camera_config do
+      arg :effect, :img_effect
+      resolve &Resolvers.Camera.set_img_effect/3
+    end
+
   end
 
   subscription name: "Subscription" do

eye_ui/lib/eye_ui/schema/camera.ex

@@ -4,11 +4,19 @@ defmodule EyeUi.Schema.CameraTypes do
   @desc "Camera configuration"
   object :camera_config do
     field :size, :dimensions
+    field :img_effect, :img_effect
   end
 
   @desc "Image dimensions"
   object :dimensions do
     field :width, :integer
     field :height, :integer
   end
+
+  @desc "Image Effects"
+  enum :img_effect do
+    value :normal, as: :none, description: "No special effects"
+    value :sketch, as: :sketch, description: "Just like at the amusement park"
+    value :oilpaint, as: :oilpaint, description: "Just like Van Gogh"
+  end
 end

eye_ui/lib/eye_ui_web/router.ex

@@ -23,6 +23,8 @@ defmodule EyeUiWeb.Router do
     socket: EyeUiWeb.UserSocket,
     interface: :simple
 
+  forward "/snap", EyeUiWeb.SnapPlug
+
   scope "/", EyeUiWeb do
     pipe_through :browser
 

eye_ui/lib/eye_ui_web/snap_plug.ex

@@ -0,0 +1,14 @@
+defmodule EyeUiWeb.SnapPlug do
+  import Plug.Conn
+
+  def init(opts), do: opts
+  def call(conn, _opts) do
+    conn
+    |> put_resp_header("Age", "0")
+    |> put_resp_header("Cache-Control", "no-cache, private")
+    |> put_resp_header("Pragma", "no-cache")
+    |> put_resp_header("Content-Type", "image/jpeg")
+    |> send_resp(200, Eye.Camera.next_frame())
+  end
+
+end

eye_ui/lib/eye_ui_web/templates/page/index.html.eex

@@ -6,6 +6,12 @@
       <a class="btn btn-secondary" href="#" role="button" id="1280x720">1280 x 720</a>
       <a class="btn btn-secondary" href="#" role="button" id="1920x1080">1920 x 1080</a>
     </div>
+    <a href="/snap" class="btn btn-secondary mr-2" role="group" aria-label="Snap">Snap</a>
+    <div class="btn-group mr-2" role="group" aria-label="Image Effects">
+      <a class="btn btn-secondary" href="#" role="button" id="normal">Normal</a>
+      <a class="btn btn-secondary" href="#" role="button" id="sketch">Sketch</a>
+      <a class="btn btn-secondary" href="#" role="button" id="oilpaint">Oil Paint</a>
+    </div>
   </div> <!-- toolbar -->
 
   <svg id="canvas" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720" style="background-image: url('video.mjpg');"/>