diff options
| author | stuebinm | 2021-03-15 18:38:02 +0100 |
|---|---|---|
| committer | stuebinm | 2021-03-15 18:38:02 +0100 |
| commit | 0596b9f6c561daa67945adb81570efd30650dffd (patch) | |
| tree | 4e86c41cd264dd9220d24cc9fe564a93b7a84f12 | |
| parent | 393186f9ebf0bf43a1add8bd8d0e37be566ae8cc (diff) | |
Add a display view which does nothing but display the slides
(should be useful e.g. as input for a screen recorder)
| -rw-r--r-- | picarones-elm/default.nix | 3 | ||||
| -rw-r--r-- | picarones-elm/display.html | 34 | ||||
| -rw-r--r-- | picarones-elm/slide.html | 4 | ||||
| -rw-r--r-- | picarones-elm/src/Display.elm | 32 | ||||
| -rw-r--r-- | picarones-elm/src/Main.elm | 6 | ||||
| -rw-r--r-- | picarones-elm/src/Switcher.elm | 39 |
6 files changed, 109 insertions, 9 deletions
diff --git a/picarones-elm/default.nix b/picarones-elm/default.nix index 2fc650b..45106b4 100644 --- a/picarones-elm/default.nix +++ b/picarones-elm/default.nix @@ -47,11 +47,12 @@ in mkDerivation { patchPhase = '' substituteInPlace index.html --replace "{{ baseurl }}" ${lib.escapeShellArg baseurl} substituteInPlace slide.html --replace "{{ serverurl }}" ${lib.escapeShellArg serverurl} + substituteInPlace display.html --replace "{{ serverurl }}" ${lib.escapeShellArg serverurl} ''; srcs = ./elm-srcs.nix; src = ./.; - targets = ["Main" "Cover"]; + targets = ["Display" "Switcher" "Cover"]; srcdir = "./src"; outputJavaScript = true; } diff --git a/picarones-elm/display.html b/picarones-elm/display.html new file mode 100644 index 0000000..88bebf1 --- /dev/null +++ b/picarones-elm/display.html @@ -0,0 +1,34 @@ +<!DOCTYPE HTML> +<html> +<head> + <meta charset="UTF-8"> + <title>Main</title> + <script src="Display.js"></script> + <link rel="stylesheet" type="text/css" href="document.css" /> +</head> + +<body> + <div id="elm"></div> + <script> + let args = location.hash.split("#").slice(1); + + var app = Elm.Display.init({ + node: document.getElementById('elm'), + flags: [args[0], parseInt(args[1])] + }); + + let ws = new WebSocket("{{ serverurl }}") + + ws.onopen = () => ws.send (JSON.stringify ({room:args[0]})); + + ws.onmessage = function(msg) { + console.log(msg.data) + app.ports.recvPort.send(msg.data) + } + + app.ports.sendPort.subscribe(function(msg) { + ws.send(msg) + }) + </script> +</body> +</html> diff --git a/picarones-elm/slide.html b/picarones-elm/slide.html index a72fb3c..4c63f97 100644 --- a/picarones-elm/slide.html +++ b/picarones-elm/slide.html @@ -3,7 +3,7 @@ <head> <meta charset="UTF-8"> <title>Main</title> - <script src="Main.js"></script> + <script src="Switcher.js"></script> <link rel="stylesheet" type="text/css" href="document.css" /> </head> @@ -12,7 +12,7 @@ <script> let args = location.hash.split("#").slice(1); - var app = Elm.Main.init({ + var app = Elm.Switcher.init({ node: document.getElementById('elm'), flags: [args[0], parseInt(args[1])] }); diff --git a/picarones-elm/src/Display.elm b/picarones-elm/src/Display.elm new file mode 100644 index 0000000..20fcfe7 --- /dev/null +++ b/picarones-elm/src/Display.elm @@ -0,0 +1,32 @@ +module Display exposing (..) + +import Browser +import Html exposing (Html, button, div, text, br, input, img) +import Html.Attributes exposing (style, class, value, placeholder, src) +import Html.Events exposing (onInput, onClick) +import Html.Lazy exposing (lazy) +import List exposing (foldr) + +import Main exposing (..) + +main = Browser.document + { init = init + , update = update + , view = view + , subscriptions = subscriptions + } + + +{- VIEW COMPONENTS -} + + -- our body consists of a slide container and a couple controls +body : Model -> Html Msg +body model = div [class "display"] (slideView model.slide model.max model.prefix) + + +view : Model -> Browser.Document Msg +view model = { title = "Picarones" + , body = [body model] + } + + diff --git a/picarones-elm/src/Main.elm b/picarones-elm/src/Main.elm index 6e69fe4..f4a4dc2 100644 --- a/picarones-elm/src/Main.elm +++ b/picarones-elm/src/Main.elm @@ -12,12 +12,6 @@ import Protocol exposing (decodeState, encodeState) import Json.Decode as D -main = Browser.document - { init = init - , update = update - , view = view - , subscriptions = subscriptions - } -- subscribe to messages from the websocket subscriptions : Model -> Sub Msg diff --git a/picarones-elm/src/Switcher.elm b/picarones-elm/src/Switcher.elm new file mode 100644 index 0000000..e1a7709 --- /dev/null +++ b/picarones-elm/src/Switcher.elm @@ -0,0 +1,39 @@ +module Switcher exposing (..) + +import Browser +import Html exposing (Html, button, div, text, br, input, img) +import Html.Attributes exposing (style, class, value, placeholder, src) +import Html.Events exposing (onInput, onClick) +import Html.Lazy exposing (lazy) +import List exposing (foldr) + +import Main exposing (..) + +main = Browser.document + { init = init + , update = update + , view = view + , subscriptions = subscriptions + } + + +{- VIEW COMPONENTS -} + + -- our body consists of a slide container and a couple controls +body : Model -> Html Msg +body model = div [] + [ div [class "slides"] (slideView model.slide model.max model.prefix) + , div [class "controls"] + [ button [ onClick PrevSlide ] [ text "←" ] + , text (String.fromInt (model.slide+1)) + , button [ onClick NextSlide ] [ text "→" ] + ] + ] + + +view : Model -> Browser.Document Msg +view model = { title = "Picarones" + , body = [body model] + } + + |