mdebray/tvl-depot
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improve the styling of the piano

Browse source 
Create a more convincing representation of the piano.

I would like to compute the left-offset based on the naturalWidth. That change
is probably forthcoming.
This commit is contained in:
William Carroll 2020-04-11 11:36:37 +01:00
parent 3562343c19
commit 2f446d0441
2 changed files with 58 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
website/sandbox/chord-drill-sergeant/src/Main.elm
View file

@ -87,7 +87,7 @@ view : State -> Html Msg
view (State {selectedChord}) = view (State {selectedChord}) =
div [] [ p [] [ text (viewChord selectedChord) ] div [] [ p [] [ text (viewChord selectedChord) ]
, button [ onClick NextChord ] [ text "Next Chord" ] , button [ onClick NextChord ] [ text "Next Chord" ]
, Piano.render { highlight = [] } , Piano.render { highlight = Theory.notesForChord selectedChord }
] ]
{-| For now, I'm just dumping things onto the page to sketch ideas. -} {-| For now, I'm just dumping things onto the page to sketch ideas. -}

85
website/sandbox/chord-drill-sergeant/src/Piano.elm
View file

@ -7,22 +7,53 @@ import Html.Events exposing (..)
import Theory import Theory
{-| Convert an integer into its pixel representation for CSS. -}
pixelate : Int -> String
pixelate x = String.fromInt x ++ "px"
{-| Pixel width of the white keys. -}
naturalWidth : Int
naturalWidth = 40
{-| Pixel height of the white keys. -}
naturalHeight : Int
naturalHeight = 200
{-| Pixel width of the black keys. -}
accidentalWidth : Int
accidentalWidth = round (toFloat naturalWidth * 0.7)
{-| Pixel height of the black keys. -}
accidentalHeight : Int
accidentalHeight = round (toFloat naturalHeight * 0.6)
{-| These are the white keys on most modern pianos. -} {-| These are the white keys on most modern pianos. -}
natural : Bool -> Html a natural : Int -> Bool -> Html a
natural isHighlit = natural offset isHighlit =
li [ style "background-color" (if isHighlit then "red" else "white") div [ style "background-color" (if isHighlit then "red" else "white")
, style "height" "20px" , style "border-right" "1px solid black"
, style "border-top" "1px solid black" , style "border-top" "1px solid black"
, style "border-bottom" "1px solid black" , style "border-bottom" "1px solid black"
] [] , style "width" (pixelate naturalWidth)
, style "height" (pixelate naturalHeight)
, style "position" "absolute"
, style "left" ((String.fromInt offset) ++ "px")
] []
{-| These are the black keys on most modern pianos. -} {-| These are the black keys on most modern pianos. -}
accidental : Bool -> Html a accidental : Int -> Bool -> Html a
accidental isHighlit = accidental offset isHighlit =
li [ style "background-color" (if isHighlit then "red" else "black") div [ style "background-color" (if isHighlit then "red" else "black")
, style "height" "10px" , style "border-top" "1px solid black"
, style "width" "66%" , style "border-left" "1px solid black"
] [] , style "border-right" "1px solid black"
, style "border-bottom" "1px solid black"
, style "width" (pixelate accidentalWidth)
, style "height" (pixelate accidentalHeight)
, style "position" "absolute"
, style "left" ((String.fromInt offset) ++ "px")
, style "z-index" "1"
] []
{-| A section of the piano consisting of all twelve notes. The name octave {-| A section of the piano consisting of all twelve notes. The name octave
implies eight notes, which most scales (not the blues scale) honor. -} implies eight notes, which most scales (not the blues scale) honor. -}
@ -31,18 +62,18 @@ octave highlight =
let let
isHighlit note = List.member note highlight isHighlit note = List.member note highlight
in in
[ natural (isHighlit Theory.C) [ natural 0 (isHighlit Theory.C)
, accidental (isHighlit Theory.C_sharp) , accidental 25 (isHighlit Theory.C_sharp)
, natural (isHighlit Theory.D) , natural 40 (isHighlit Theory.D)
, accidental (isHighlit Theory.D_sharp) , accidental 65 (isHighlit Theory.D_sharp)
, natural (isHighlit Theory.E) , natural 80 (isHighlit Theory.E)
, natural (isHighlit Theory.F) , natural 120 (isHighlit Theory.F)
, accidental (isHighlit Theory.F_sharp) , accidental 145 (isHighlit Theory.F_sharp)
, natural (isHighlit Theory.G) , natural 160 (isHighlit Theory.G)
, accidental (isHighlit Theory.G_sharp) , accidental 185 (isHighlit Theory.G_sharp)
, natural (isHighlit Theory.A) , natural 200 (isHighlit Theory.A)
, accidental (isHighlit Theory.A_sharp) , accidental 225 (isHighlit Theory.A_sharp)
, natural (isHighlit Theory.B) , natural 240 (isHighlit Theory.B)
] ]
indexForNote : Theory.Note -> Int indexForNote : Theory.Note -> Int
@ -64,6 +95,4 @@ indexForNote note =
{-| Return the HTML that renders a piano representation. -} {-| Return the HTML that renders a piano representation. -}
render : { highlight : List Theory.Note } -> Html a render : { highlight : List Theory.Note } -> Html a
render {highlight} = render {highlight} =
ul [ style "width" "100px" div [ style "display" "flex" ] (octave highlight |> List.reverse |> List.repeat 1 |> List.concat)
, style "list-style" "none"
] (octave highlight |> List.reverse |> List.repeat 1 |> List.concat)