Elm Signals and Suggestions. Working online  In general, I found working online at to be the best way to program Elmhttp://elm-lang.org/try.

Slides:



Advertisements
Similar presentations
Introduction to Web Design Lecture number:. Todays Aim: Introduction to Web-designing and how its done. Modelling websites in HTML.
Advertisements

Microsoft ® Office 2007 Overview Get up to speed with the 2007 system Leon County Schools presents:
Microsoft ® Office Training Get up to speed with the 2007 system Cecil County Government IT Department presents:
Intro to Computers!.
Microsoft Office 2007 Microsoft ® Office 2007 Training Get up to speed with the 2007 system.
Microsoft ® Office Training Get up to speed with the 2007 system presents:
Microsoft ® Office 2007 Training ILRI ICT presents:
Computer Basics Hit List of Items to Talk About ● What and when to use left, right, middle, double and triple click? What and when to use left, right,
QWERTY Keyboards.
Click left mouse button to proceed. Windows Tutorial CST-133 Lab W © Delta College CST Faculty This tutorial was created by R. Hoag in August.
Events Part III The event object. Learning Objectives By the end of this lecture, you should be able to: – Learn to use the hover() function – Work with.
2-May-15 GUI Design. 2 HMI design There are entire college courses taught on HMI (Human-Machine Interface) design This is just a very brief presentation.
Programming with Alice Computing Institute for K-12 Teachers Summer 2011 Workshop.
Data: Programming Design and Modularization IS 101Y/CMSC 101 Computational Thinking and Design Thursday, September 26, 2013 Marie desJardins University.
Functional Programming Universitatea Politehnica Bucuresti Adina Magda Florea
Click your mouse for next slide Dreamweaver – Merging, Coloring, Fonts Now it’s time to fill your page with some more interesting stuff The first thing.
1 Module 2: Fundamental Concepts Problems Programs –Programming languages.
Lecture 2: Fundamental Concepts
1 Module 2: Fundamental Concepts Problems Programs –Programming languages.
ICM Week 2. Structure - statements and blocks of code Any single statement ends with semicolon ; When we want to bunch a few statements together we use.
Creating Web Page Forms
Graphical User Interfaces A Quick Outlook. Interface Many methods to create and “interface” with the user 2 most common interface methods: – Console –
Lesson 3 Text Basics Adapted From Source:
Microsoft ® Office 2007 Get up to speed with the 2007 system Murray State University College of Education:
Mouse-Based Viewing & Navigation Glenn G. Chappell U. of Alaska Fairbanks CS 381 Lecture Notes Monday, November 3, 2003.
Programming for Artists ART 315 Dr. J. R. Parker Art/Digital Media Lab Lec 10 Fall 2010.
Key Applications Module Lesson 16 — Excel Essentials Computer Literacy BASICS.
Presented By: Lynn Ann Wiscount Office A new look to familiar programs When you open a 2007 Microsoft Office system program, you’ll see a lot that’s.
T U T O R I A L  2009 Pearson Education, Inc. All rights reserved Typing Application Introducing Keyboard Events, Menus, Dialogs and the Dictionary.
Enter the World of CELTT Hands-on technology training in a supportive and fun environment.
UNIT 14 1 Websites. Introduction 2 A website is a set of related webpages stored on a web server. Webmaster: is a person who sets up and maintains a.
1Computer Graphics Input and Interaction Lecture 8 John Shearer Culture Lab – space 2
Keyboard and Events. What about the keyboard? Keyboard inputs can be used in many ways---not just for text The boolean variable keyPressed is true if.
File Management Organizing files and folders. In this tutorial you will learn how to:  Create folders  Name files and folders  Organize your files.
A Sample Visual Tutorial The next slide is a visual tutorial handout for describing how to “capture” an image. You could print out that single slide: File.
Microsoft ® Office Training Get up to speed with the 2007 system.
Get up to speed What’s changed, and why Yes, there’s a lot of change in Excel It’s most noticeable at the top of the window. But it’s good change.
Key Applications Module Lesson 21 — Access Essentials
Shannon K. Basher, MLS Houston Academy of Medicine – Texas Medical Center Library.
EVENT-DRIVEN PROGRAMMING. โปรแกรมและอุปกรณ์ส่วนมากที่ใช้ใน ชีวิตประจำวัน จะตอบสนองกับเหตุการณ์ที่ เกิดขึ้น ตัวอย่างของเหตุการณ์ อาทิ การเคลื่อน หรือ คลิกเมาส์
CIS 3.5 Lecture 2.2 More programming with "Processing"
0 Odds and Ends in Haskell: Folding, I/O, and Functors Adapted from material by Miran Lipovaca.
1 Input and Interaction. 2 Objectives Introduce the basic input devices ­Physical Devices ­Logical Devices ­Input Modes Event-driven input Introduce double.
Interacting with your Computer Chapter 2 Learning Objectives Identify five key groups on standard computer keyboard Name six special purpose keys.
Elm A Functional Reactive Programming Language. Elm in general  Elm is a purely functional, single-assignment language  Elm syntax is strongly influenced.
Microsoft ® Office Training Get up to speed with the 2007 system.
Copyright © 2009 Pearson Education, Inc. Publishing as Pearson Addison-Wesley Chapter 4: Events Programming with Alice and Java First Edition by John Lewis.
Ten Commandments of Word Processing. I. Thou shall not use spaces n Put no more than two spaces together. n Use the key to line things up. n Better yet,
Introduction to Objective Caml. General comments ML is a purely functional language--there are (almost) no side effects There are two basic dialects of.
Objective: To describe the evolution of the Internet and the Web. Explain the need for web standards. Describe universal design. Identify benefits of accessible.
1 Introduction to Computer Graphics with WebGL Ed Angel Professor Emeritus of Computer Science Founding Director, Arts, Research, Technology and Science.
Continuous. Flow of Control Programs can broadly be classified as being –Procedural Programs are executed once in the order specified by the code varied.
Creating A Macro For Your Word Header Instructor: Glenda H. Easter ITSW 1401, Intro to Word Processing.
Implement User Input Windows Development Fundamentals LESSON 2.4A.
MICROSOFT ACCESS – CHAPTER 5 MICROSOFT ACCESS – CHAPTER 6 MICROSOFT ACCESS – CHAPTER 7 Sravanthi Lakkimsety Mar 14,2016.
Pasewark & Pasewark 1 Word Lesson 2 Basic Editing Microsoft Office 2007: Introductory.
April 9 th, Saturday PDP N° Malik Koné. I. Cells A. The Concept B. Properties, Types and Formats II. Spreadsheets A. Spreadsheet’s Elements B. Selection.
Mouseless Computing For Windows OS After completing this tutorial you will be able to navigate your computer using keyboard shortcuts.
24-Jun-16 Haskell Dealing with impurity. Purity Haskell is a “pure” functional programming language Functions have no side effects Input/output is a side.
COMPUTER INPUT DEVICE Keyboard. Keyboard cont…… Print Screen Print contents of screen Pause/Break Terminate/Interrupt Scroll Lock Modify behavior of the.
What’s changed, and why Lesson 1 By the end of this lesson you will be able to complete the following: Get a handle on the new look of Excel. Understand.
PYGAME.
Theory of Computation Lecture 4: Programs and Computable Functions II
Word Lesson 2 Basic Editing
More programming with "Processing"
Game Loop Update & Draw.
Events Part III The event object.
Presentation transcript:

Elm Signals and Suggestions

Working online  In general, I found working online at to be the best way to program Elmhttp://elm-lang.org/try  Instant feedback, so you can try one change at a time and see if it worked  No good way to save your work; I did an occasional copy-all and paste into Sublime Text  The images used in the examples are on the server, not locally, so you can’t readily use them in your own program  I installed Elm and used the elm repl to test single expressions and very small bits of code  The REPL is especially useful for entering expressions to find out their type  > Signal.map : (a -> b) -> Signal.Signal a -> Signal.Signal b 2

Program structure  Elm programs have a structure very similar to MVC (Model-View-Controller)  The structure is Model - Update - View, or sometimes Model - Update - View - Signals  In Elm  The Model is typically just data, describing the current state of the program; typically this is in the form of a record named model  The Update is a set of pure functions; typically there is a function named update with a signature similar to Input -> Model -> Model  The View is a set of functions whose purpose is to display the current state; typically there is a function named view with a signature something like Input -> Model -> Element  The Signals part includes a function named main ; it collects signals together and bundles them up, sends them to update to get a new program state, and sends the result to view 3

Mouse signals  import Mouse exposing (..)  position : Signal ( Int, Int )  x : Signal Int  y : Signal Int  isDown : Signal Bool  clicks : Signal () 4

Keyboard signals  import Keyboard exposing (..)  Mouse.position : Signal (Int, Int)  arrows : Signal { x : Int, y : Int }  wasd : Signal { x : Int, y : Int }  enter, space, ctrl, shift, alt, meta are all Signal Bool  type alias KeyCode = Int  isDown : KeyCode -> Signal Bool  keysDown : Signal (Set KeyCode)  presses : Signal KeyCode -- most recent key pressed 5

Time signals  import Time exposing (..)  fps : number -> Signal Time  fps (frames per second) will produce a signal the given number of times every second  fpsWhen : number -> Signal Bool -> Signal Time  Same as the fps function, but you can turn it on and off  every : Time -> Signal Time  Takes a time interval t and produces a signal updated every t  delay : Time -> Signal a -> Signal a  Delays a time signal  There a few additional functions 6

Window signals  import Window exposing (..)  dimensions : Signal ( Int, Int )  width : Signal Int  height : Signal Int  When you embed Elm in a it gives the dimensions of the container, not the whole window 7

Monads  Signal is a monad type  Signals, by definition, vary over time  Clearly, this is inappropriate for a pure functional language  Monads “isolate” impure operations  The main function in the Signals part of an Elm program: 1. Collects signals together and bundles them up 2.Extracts the data from the signals and sends them to the pure function update to get a new program state 3.Sends the new program state to view 8

Bind  Remember “bind” ( >>= ) in Haskell?  bind takes a value out of a monad, applies a function to it, and puts the result back into a monad: (>>=) :: Monad m => m a -> (a -> m b) -> m b  Elm has something similar but not identical  Signal.map : (a -> b) -> Signal a -> Signal b  This allows us to take a Signal a, use it to call a pure function (a -> b), and get the result as a Signal b  The arguments are reversed from those of >>= but in the same order as those of List.map  List.map : (a -> b) -> List a -> List b  <~ is an alias for Signal.map 9

Signal.map n  Signal.map applies a pure function to the value inside a Signal, producing another Signal  Signal.map : (a -> b) -> Signal a -> Signal b  However, you often have pure functions that take more than a single argument  map2 : (a -> b -> result) -> Signal a -> Signal b -> Signal result  The result type is, of course, up to the supplied function, but is often a tuple  map3 : (a -> b -> c -> result) -> Signal a -> Signal b -> Signal c -> Signal result  map4 : (a -> b -> c -> d -> result) -> Signal a -> Signal b -> Signal c -> Signal d -> Signal result  map5 -- the obvious type is omitted for reasons of space 10

Warning! lift  Elm is a new and rapidly changing language  If you find examples using the functions lift, lift2, lift3, etc., these functions no longer exist  They have been replaced by map, map2, map3, etc.  The old functions have the same signature as the new, and as far as I know, is just a name change 11

Sampling  import Signal exposing (..)  sampleOn : Signal a -> Signal b -> Signal b  Sample from the second input every time an event occurs on the first input. For example, (sampleOn clicks (every second)) will give the approximate time of the latest click  The value of the first signal ( Signal a ) is discarded  I believe that the purpose of sampleOn is to restrict the number of events that must be handled by the update and view parts of the program  Mouse.position can probably produce hundreds of events a second 12

foldp  foldp folds signals “over time”  From the documentation: foldp : (a -> state -> state) -> state -> Signal a -> Signal state Create a past-dependent signal. Each update from the incoming signals will be used to step the state forward. The outgoing signal represents the current state. 13

Mario example I  main : Signal Element main = Signal.map2 view Window.dimensions (Signal.foldp update mario input)  view : (Int, Int) -> Model -> Element  update : (Float, Keys) -> Model -> Model 14

Mario example II  main : Signal Element main = Signal.map2 view Window.dimensions (Signal.foldp update mario input)  input : Signal (Float, Keys) input = let delta = Signal.map (\t -> t/20) (fps 30) in Signal.sampleOn delta (Signal.map2 (,) delta Keyboard.arrows) 15

Modified Mario I  I modified the Mario example to also accept mouse position signals  main : Signal Element main = Signal.map3 view Window.dimension Mouse.position (Signal.foldp update mario input)  view : (Int, Int) -> (Int, Int) -> Model -> Element  update : (Float, Keys) -> Model -> Model 16

Modified Mario II  main : Signal Element main = Signal.map3 view Window.dimension Mouse.position (Signal.foldp update mario input)  input : Signal (Float, Keys, Location) input = let delta = Signal.map (\t -> t/20) (fps 30) in Signal.sampleOn delta (Signal.map3 (,,) delta Keyboard.arrows Mouse.position) 17

Modified Mario III  type alias Model = { x : Float, y : Float, vx : Float, vy : Float, dir : Direction, mouse : (Int, Int) }  update : (Float, Keys, Location) -> Model -> Model update (dt, keys, position) mario = mario |> gravity dt |> jump keys |> walk keys |> physics dt |> attract position -- defined as type alias Location = (Int, Int) 18

Questions  main : Signal Element main = Signal.map3 view Window.dimension Mouse.position (Signal.foldp update mario input) input : Signal (Float, Keys, Location) input = let delta = Signal.map (\t -> t/20) (fps 30) in Signal.sampleOn delta (Signal.map3 (,,) delta Keyboard.arrows Mouse.position)  Why isn’t Window.dimension handled in input ?  Why do I need to mention Mouse.position twice? 19

Collage example  A Collage is used to display things on the screen  view : (Int, Int) -> (Int, Int) -> Model -> Element view (w',h') mario = let -- many definitions omitted: w, h, marioImage, etc. in collage w' h' [ rect w h |> filled (rgb ), rect w 50 |> filled (rgb ) |> move (0, 24 - h/2), marioImage |> toForm |> move position ] 20

21 The End