elmでやってみるシリーズ4: 画像ギャラリー
elmでやってみるシリーズ4: 画像ギャラリー。
論文「"Concurrent FRP for Functional GUIs"」にものってた、画像ギャラリー的なもの。キーボードの矢印キーの左右で画像を選択できます。
import Keyboard -- WikipediaのURL(各画像URLの共通部分) base = "http://upload.wikimedia.org/wikipedia/commons/" -- 画像情報(タイトルとURL)をレコード型で表現する picts = [{title="Het melkmeisj", url=base++"2/20/Johannes_Vermeer_-_Het_melkmeisje_-_Google_Art_Project.jpg"}, {title="Girl with a Pearl Earring", url=base++"c/ce/Girl_with_a_Pearl_Earring.jpg" }, {title="Womanholdingabalance vermeer", url=base++"7/7e/Womanholdingabalance-vermeer.jpg" }, {title="Le Moulin de la Galette", url=base++"2/21/Pierre-Auguste_Renoir%2C_Le_Moulin_de_la_Galette.jpg"}, {title="Luncheon of the Boating Party", url=base++"e/ea/Auguste_Renoir_-_Luncheon_of_the_Boating_Party_1880-1881.jpg"} ] -- 画像情報のリストからn番目の画像情報を得る。nが負の場合やリスト長を越える場合、リスト長の剰余(mod)を取る。 nthPict n = let x = n `mod` (length picts) in (head (drop x picts)) -- 左右の矢印キーを入力シグナル(+1,-1)を累積的に保存した値をfoldpで作って、「n番目の画像を表示する」にリフト適用。 main = let f n = let {title, url} = nthPict n in flow down [plainText title, fittedImage 200 300 url, plainText "prev<- ->next"] in f <~ foldp (\it acc-> acc+it.x) 0 Keyboard.arrows
ブラウザ内で編集したり実行したい場合はこちらからどうぞ。
気づいたこと
- nthがない(定義はできる。Writing a 2048 clone in elm · Scrambled Eggsにinfixl 9 !の例がある。)