Creating User Interfaces

1
Creating User Interfaces

• Dynamic creation of HTML elements.
• ProcessJS.
• Homework Complete User Observation Studies and
  prepare to present.

2
Dynamic creation of elements

• Why?
• Don't know what they will be until runtime
• Provides way to produce more flexible operations
• Why not make the computer generate the code?

3
Creating HTML elements

• Create, probably give value, probably append
• can document.createElement("canvas")ctxcan.g
  etContext("2d")
• ctx.drawImage()
• document.body.appendChild(can)
• Can set up event (two alternate ways)
• can.onmousedown startDragging
• can.addEventListener("mousedown",startdragging,fal
  se)

4
Creating HTML markup in JavaScript

• Content of quiz stored in external file. See
  http//faculty.purchase.edu/jeanine.meyer/html5/ma
  pmediaquiz.html
• Pieces of jigsaw created in the program. See
  http//faculty.purchase.edu/jeanine.meyer/html5/ji
  gsawcanvas1.html

5
Creating HTML markup in JavaScript

• Circles and arrows http//faculty.purchase.edu/je
  anine.meyer/html5/drawAndMoveCirclesAndArrows.html
  
• Collage (shapes, photos, videos)
  http//faculty.purchase.edu/jeanine.meyer/html5/co
  llagebase.html
• Note object-oriented programming style

6
Parallel structures

• (poorman's database, but may be appropriate)
• http//faculty.purchase.edu/jeanine.meyer/html5/st
  atesgame.html
• Multiple types of moves
• Option to save jigsaw in process
• HTML as opposed to HTML5

7
canvas operations

• http//faculty.purchase.edu/jeanine.meyer/html5/mo
  vingghost.html
• Family does not like this
• Custom cursor tip
• Clip operation

8
Another example

• More recent project http//faculty.purchase.edu/
  jeanine.meyer/html5/jigsaw/dance1.html
• Must be tested (run) on a server.
• getImageData and putImageData
• Need to make sure video is loaded.
• Formula for grayscale
• Works on Android phone, computer, but not iPAD

C
9
Processingjs

• Way to run Processing on (in) a browser.
• Sister project to Processing.
• Note there was an older way to produce Java
  applications that was discontinued.

10
Steps

• Produce Processing sketch in normal way.
• You will be uploading the .pde file and anything
  in the data folder
• Download latest file(s) from processingjs.org
• I used processing.min.js
• Create a small html file (see next)
• Use ftp program such as Filezilla to upload files
  to your website

11
The minimum html file

• ltscript src"processing.min.js"gtlt/scriptgt
• ltcanvas
• data-processing-sources
• "makePathThenImageTravel.pde"gt
• lt/canvasgt

12
My html file imageTravel.html

• lthtmlgt
• lttitlegtBiker chick lt/titlegt
• ltscript src"processing.min.js"gtlt/scriptgt
• ltcanvas
• data-processing-sources
• "makePathThenImageTravel.pde"gt
• lt/canvasgt
• lt/htmlgt

13
Files to be uploaded

• makePathThenImageTravel.pde
• processing.min.js
• bikerchickWGrant.jpg
• imageTravel.html

14
Access on the web

• usual way, by a URL
• http//faculty.purchase.edu/jeanine.meyer/Processi
  ngJS/imageTravel.html
• I am now adding these to my site
• http//faculty.purchase.edu/jeanine.meyer/processi
  ng

15
p5js

• Something else http//p5js.org/
• Different language combining Processing and
  JavaScript
• Weak typing var statements, not datatypes.
• Claim faster executing code
• An IDE in development. Now use Sublime, other
  text editor.
• NOTE this means you do not have error checking
  during edit time.

16
My Processing examples

• are mostly on the moodle site for my CS1 class.
  Guests access is allowed.

17
Reminder

• Your final project is to produce a program that
  teaches something, with attention to usability
• Effectiveness Did the program work? Did the
  student learn?
• Efficiency How easily in terms of time, effort,
  etc. for the student and for you?
• Satisfaction. Was the student pleased by
  experience? Likely to come back for more?

18
Implementation

• Works on a browser
• HTML5 JavaScript or
• Processing JS
• Though this may be buggy
• P5js
• I am even less familiar with this and it seems to
  be .

19
Homework

• User observation studies
• Prepare 1-pagers (one per team, everyone's name
  printed on page)
• Remember summary! Decide on most significant
  finding or findings
• Choose most significant screen shot(s)
• Spell check and proofread
• Give page a good title, include all the names
• PowerPoint or Prezi or ???
• Make it formal presentation
• Don't dis your subjects

20
Consider

• Using Google Docs to work on and produce the
  charts. This is very similar to PowerPoint.
• You do need a gmail account.