initial commit
Louis Pearson
commit
b6cb2a2750
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,29 @@
|
||||||
|
{
|
||||||
|
"type": "application",
|
||||||
|
"source-directories": [
|
||||||
|
"src"
|
||||||
|
],
|
||||||
|
"elm-version": "0.19.1",
|
||||||
|
"dependencies": {
|
||||||
|
"direct": {
|
||||||
|
"NoRedInk/elm-json-decode-pipeline": "1.0.1",
|
||||||
|
"elm/browser": "1.0.2",
|
||||||
|
"elm/core": "1.0.5",
|
||||||
|
"elm/html": "1.0.0",
|
||||||
|
"elm/http": "2.0.0",
|
||||||
|
"elm/json": "1.1.3",
|
||||||
|
"elm/random": "1.0.0"
|
||||||
|
},
|
||||||
|
"indirect": {
|
||||||
|
"elm/bytes": "1.0.8",
|
||||||
|
"elm/file": "1.0.5",
|
||||||
|
"elm/time": "1.0.0",
|
||||||
|
"elm/url": "1.0.0",
|
||||||
|
"elm/virtual-dom": "1.0.3"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"test-dependencies": {
|
||||||
|
"direct": {},
|
||||||
|
"indirect": {}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,59 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<link rel="stylesheet" href="http://elm-in-action.com/styles.css">
|
||||||
|
<link rel="stylesheet" href="http://elm-in-action.com/range-slider.css">
|
||||||
|
<script src="http://elm-in-action.com/range-slider.js"></script>
|
||||||
|
<script>
|
||||||
|
class RangeSlider extends HTMLElement {
|
||||||
|
connectedCallback() {
|
||||||
|
var input = document.createElement("input");
|
||||||
|
this.appendChild(input);
|
||||||
|
|
||||||
|
var jsr = new JSR(input, {
|
||||||
|
max: this.max,
|
||||||
|
values: [this.val],
|
||||||
|
sliders: 1,
|
||||||
|
grid: false
|
||||||
|
});
|
||||||
|
|
||||||
|
var rangeSliderNode = this;
|
||||||
|
|
||||||
|
jsr.addEventListener("update", function(elem, value) {
|
||||||
|
var event = new CustomEvent("slide", {
|
||||||
|
detail: {userSlidTo: value}
|
||||||
|
});
|
||||||
|
|
||||||
|
rangeSliderNode.dispatchEvent(event);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
window.customElements.define("range-slider", RangeSlider);
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div id="app"></div> <!-- Elm application renders into this div --!>
|
||||||
|
|
||||||
|
<script src="http://elm-in-action.com/pasta.js"></script>
|
||||||
|
<script src="app.js"></script> <!-- PhotoGroove.elm will get compiled into app.js --!>
|
||||||
|
<script>
|
||||||
|
var app = Elm.PhotoGroove.init({
|
||||||
|
node: document.getElementById("app"),
|
||||||
|
flags: Pasta.version
|
||||||
|
}); // Elm object comes from app.js
|
||||||
|
|
||||||
|
app.ports.setFilters.subscribe(function(options) {
|
||||||
|
requestAnimationFrame(function() {
|
||||||
|
Pasta.apply(document.getElementById("main-canvas"), options);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
Pasta.addActivityListener(function(activity) {
|
||||||
|
console.log("Got some activity to send to Elm:", activity);
|
||||||
|
app.ports.activityChanges.send(activity);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,281 @@
|
||||||
|
port module PhotoGroove exposing (main)
|
||||||
|
|
||||||
|
import Array exposing (Array)
|
||||||
|
import Browser
|
||||||
|
import Html exposing (..)
|
||||||
|
import Html.Attributes as Attr exposing (class, classList, id, name, src, title, type_)
|
||||||
|
import Html.Events exposing (onClick, on)
|
||||||
|
import Http
|
||||||
|
import Json.Decode exposing (Decoder, at, int, list, string, succeed)
|
||||||
|
import Json.Decode.Pipeline exposing (optional, required)
|
||||||
|
import Json.Encode
|
||||||
|
import Random
|
||||||
|
|
||||||
|
urlPrefix : String
|
||||||
|
urlPrefix =
|
||||||
|
"https://elm-in-action.com/"
|
||||||
|
|
||||||
|
type Msg
|
||||||
|
= ClickedPhoto String
|
||||||
|
| SetSize ThumbnailSize
|
||||||
|
| ClickedSurpriseMe
|
||||||
|
| GotRandomPhoto Photo
|
||||||
|
| GotActivity String
|
||||||
|
| GotPhotos (Result Http.Error (List Photo))
|
||||||
|
| SlidHue Int
|
||||||
|
| SlidRipple Int
|
||||||
|
| SlidNoise Int
|
||||||
|
|
||||||
|
view : Model -> Html Msg
|
||||||
|
view model =
|
||||||
|
div [ class "content" ] <|
|
||||||
|
case model.status of
|
||||||
|
Loaded photos selectedUrl ->
|
||||||
|
viewLoaded photos selectedUrl model
|
||||||
|
|
||||||
|
Loading ->
|
||||||
|
[]
|
||||||
|
|
||||||
|
Errored errorMessage ->
|
||||||
|
[ text ("Error: " ++ errorMessage) ]
|
||||||
|
|
||||||
|
viewFilter : (Int -> Msg) -> String -> Int -> Html Msg
|
||||||
|
viewFilter toMsg name magnitude =
|
||||||
|
div [ class "filter-slider" ]
|
||||||
|
[ label [] [ text name ]
|
||||||
|
, rangeSlider
|
||||||
|
[ Attr.max "11"
|
||||||
|
, Attr.property "val" (Json.Encode.int magnitude)
|
||||||
|
, onSlide toMsg
|
||||||
|
]
|
||||||
|
[]
|
||||||
|
, label [] [ text (String.fromInt magnitude) ]
|
||||||
|
]
|
||||||
|
|
||||||
|
viewLoaded : List Photo -> String -> Model -> List (Html Msg)
|
||||||
|
viewLoaded photos selectedUrl model =
|
||||||
|
[ h1 [] [ text "Photo Groove" ]
|
||||||
|
, button
|
||||||
|
[ onClick ClickedSurpriseMe ]
|
||||||
|
[ text "Surprise Me!" ]
|
||||||
|
, div [ class "activity" ] [ text model.activity ]
|
||||||
|
, div [ class "filters" ]
|
||||||
|
[ viewFilter SlidHue "Hue" model.hue
|
||||||
|
, viewFilter SlidRipple "Ripple" model.ripple
|
||||||
|
, viewFilter SlidNoise "Noise" model.noise
|
||||||
|
]
|
||||||
|
, h3 [] [ text "Thumbnail Size:" ]
|
||||||
|
, div [ id "choose-size" ]
|
||||||
|
(List.map viewSizeChooser [ Small, Medium, Large ])
|
||||||
|
, div [ id "thumbnails", class (sizeToString model.chosenSize) ]
|
||||||
|
(List.map (viewThumbnail selectedUrl) photos)
|
||||||
|
, canvas [ id "main-canvas", class "large" ] []
|
||||||
|
]
|
||||||
|
|
||||||
|
viewThumbnail : String -> Photo -> Html Msg
|
||||||
|
viewThumbnail selectedUrl thumb =
|
||||||
|
img
|
||||||
|
[ src (urlPrefix ++ thumb.url)
|
||||||
|
, title (thumb.title ++ " [" ++ String.fromInt thumb.size ++ " KB]")
|
||||||
|
, classList [ ( "selected", selectedUrl == thumb.url ) ]
|
||||||
|
, onClick (ClickedPhoto thumb.url)
|
||||||
|
]
|
||||||
|
[]
|
||||||
|
|
||||||
|
viewSizeChooser : ThumbnailSize -> Html Msg
|
||||||
|
viewSizeChooser size =
|
||||||
|
label []
|
||||||
|
[ input [ type_ "radio", name "size", onClick (SetSize size) ] []
|
||||||
|
, text (sizeToString size)
|
||||||
|
]
|
||||||
|
|
||||||
|
sizeToString : ThumbnailSize -> String
|
||||||
|
sizeToString size =
|
||||||
|
case size of
|
||||||
|
Small ->
|
||||||
|
"small"
|
||||||
|
Medium ->
|
||||||
|
"medium"
|
||||||
|
Large ->
|
||||||
|
"large"
|
||||||
|
|
||||||
|
type ThumbnailSize
|
||||||
|
= Small
|
||||||
|
| Medium
|
||||||
|
| Large
|
||||||
|
|
||||||
|
port setFilters : FilterOptions -> Cmd msg
|
||||||
|
|
||||||
|
port activityChanges : (String -> msg) -> Sub msg
|
||||||
|
type alias FilterOptions =
|
||||||
|
{ url : String
|
||||||
|
, filters : List { name : String, amount : Float }
|
||||||
|
}
|
||||||
|
|
||||||
|
type alias Photo =
|
||||||
|
{ url : String
|
||||||
|
, size : Int
|
||||||
|
, title : String
|
||||||
|
}
|
||||||
|
|
||||||
|
photoDecoder : Decoder Photo
|
||||||
|
photoDecoder =
|
||||||
|
succeed Photo
|
||||||
|
|> required "url" string
|
||||||
|
|> required "size" int
|
||||||
|
|> optional "title" string "(untitled)"
|
||||||
|
|
||||||
|
type Status
|
||||||
|
= Loading
|
||||||
|
| Loaded (List Photo) String
|
||||||
|
| Errored String
|
||||||
|
|
||||||
|
type alias Model =
|
||||||
|
{ status : Status
|
||||||
|
, activity : String
|
||||||
|
, chosenSize : ThumbnailSize
|
||||||
|
, hue : Int
|
||||||
|
, ripple : Int
|
||||||
|
, noise : Int
|
||||||
|
}
|
||||||
|
|
||||||
|
update : Msg -> Model -> ( Model, Cmd Msg )
|
||||||
|
update msg model =
|
||||||
|
case msg of
|
||||||
|
GotActivity activity ->
|
||||||
|
( { model | activity = activity }, Cmd.none)
|
||||||
|
|
||||||
|
GotPhotos (Ok photos) ->
|
||||||
|
case photos of
|
||||||
|
first ::rest ->
|
||||||
|
applyFilters
|
||||||
|
{ model
|
||||||
|
| status =
|
||||||
|
case List.head photos of
|
||||||
|
Just photo ->
|
||||||
|
Loaded photos photo.url
|
||||||
|
|
||||||
|
Nothing ->
|
||||||
|
Loaded [] ""
|
||||||
|
}
|
||||||
|
|
||||||
|
[] ->
|
||||||
|
( { model | status = Errored "0 photos found"}, Cmd.none )
|
||||||
|
|
||||||
|
GotPhotos (Err _) ->
|
||||||
|
( model, Cmd.none )
|
||||||
|
|
||||||
|
GotRandomPhoto photo ->
|
||||||
|
applyFilters { model | status = selectUrl photo.url model.status }
|
||||||
|
|
||||||
|
ClickedPhoto url ->
|
||||||
|
applyFilters { model | status = selectUrl url model.status }
|
||||||
|
|
||||||
|
SetSize size ->
|
||||||
|
( { model | chosenSize = size }, Cmd.none )
|
||||||
|
|
||||||
|
ClickedSurpriseMe ->
|
||||||
|
case model.status of
|
||||||
|
Loaded (firstPhoto :: otherPhotos) _ ->
|
||||||
|
( model
|
||||||
|
, Random.generate GotRandomPhoto
|
||||||
|
(Random.uniform firstPhoto otherPhotos)
|
||||||
|
)
|
||||||
|
|
||||||
|
Loaded [] _ ->
|
||||||
|
( model, Cmd.none )
|
||||||
|
|
||||||
|
Loading ->
|
||||||
|
( model, Cmd.none )
|
||||||
|
|
||||||
|
Errored errorMessage ->
|
||||||
|
( model, Cmd.none )
|
||||||
|
|
||||||
|
SlidHue hue ->
|
||||||
|
applyFilters { model | hue = hue }
|
||||||
|
|
||||||
|
SlidRipple ripple ->
|
||||||
|
applyFilters { model | ripple = ripple }
|
||||||
|
|
||||||
|
SlidNoise noise ->
|
||||||
|
applyFilters { model | noise = noise }
|
||||||
|
|
||||||
|
applyFilters : Model -> ( Model, Cmd msg )
|
||||||
|
applyFilters model =
|
||||||
|
case model.status of
|
||||||
|
Loaded photos selectedUrl ->
|
||||||
|
let
|
||||||
|
filters =
|
||||||
|
[ { name = "Hue", amount = toFloat model.hue / 11}
|
||||||
|
, { name = "Ripple", amount = toFloat model.ripple / 11}
|
||||||
|
, { name = "Noise", amount = toFloat model.noise / 11}
|
||||||
|
]
|
||||||
|
|
||||||
|
url =
|
||||||
|
urlPrefix ++ "large/" ++ selectedUrl
|
||||||
|
in
|
||||||
|
( model, setFilters { url = url, filters = filters } )
|
||||||
|
|
||||||
|
Loading ->
|
||||||
|
( model, Cmd.none )
|
||||||
|
|
||||||
|
Errored errorMessage ->
|
||||||
|
( model, Cmd.none )
|
||||||
|
|
||||||
|
selectUrl : String -> Status -> Status
|
||||||
|
selectUrl url status =
|
||||||
|
case status of
|
||||||
|
Loaded photos _ ->
|
||||||
|
Loaded photos url
|
||||||
|
Loading ->
|
||||||
|
status
|
||||||
|
Errored errorMessage ->
|
||||||
|
status
|
||||||
|
|
||||||
|
initialModel : Model
|
||||||
|
initialModel =
|
||||||
|
{ status = Loading
|
||||||
|
, activity = ""
|
||||||
|
, chosenSize = Medium
|
||||||
|
, hue = 5
|
||||||
|
, ripple = 5
|
||||||
|
, noise = 5
|
||||||
|
}
|
||||||
|
|
||||||
|
initialCmd : Cmd Msg
|
||||||
|
initialCmd =
|
||||||
|
Http.get
|
||||||
|
{ url = "http://elm-in-action.com/photos/list.json"
|
||||||
|
, expect = Http.expectJson GotPhotos (list photoDecoder)
|
||||||
|
}
|
||||||
|
|
||||||
|
main : Program Float Model Msg
|
||||||
|
main =
|
||||||
|
Browser.element
|
||||||
|
{ init = init
|
||||||
|
, view = view
|
||||||
|
, update = update
|
||||||
|
, subscriptions = subscriptions
|
||||||
|
}
|
||||||
|
|
||||||
|
init : Float -> ( Model, Cmd Msg )
|
||||||
|
init flags =
|
||||||
|
let
|
||||||
|
activity =
|
||||||
|
"Initializing Pasta v" ++ String.fromFloat flags
|
||||||
|
in
|
||||||
|
( { initialModel | activity = activity }, initialCmd )
|
||||||
|
|
||||||
|
subscriptions : Model -> Sub Msg
|
||||||
|
subscriptions model =
|
||||||
|
activityChanges GotActivity
|
||||||
|
|
||||||
|
rangeSlider : List (Attribute msg) -> List (Html msg) -> Html msg
|
||||||
|
rangeSlider attributes children =
|
||||||
|
node "range-slider" attributes children
|
||||||
|
|
||||||
|
onSlide : (Int -> msg) -> Attribute msg
|
||||||
|
onSlide toMsg =
|
||||||
|
at [ "detail", "userSlidTo" ] int
|
||||||
|
|> Json.Decode.map toMsg
|
||||||
|
|> on "slide"
|
||||||
Loading…
Reference in New Issue