1 / 20

Creating User Interfaces

Learn about the dynamic creation of HTML elements using ProcessJS, a powerful tool that allows for flexible operations and runtime generation of code. Explore examples and tutorials to understand the process and its benefits.

donaldjking
Download Presentation

Creating User Interfaces

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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");ctx=can.getContext("2d"); ctx.drawImage(…) document.body.appendChild(can); • Can set up event (two alternate ways) can.onmousedown = startDragging; can.addEventListener("mousedown",startdragging,false);

  4. Creating HTML markup in JavaScript • Content of quiz stored in external file. See http://faculty.purchase.edu/jeanine.meyer/html5/mapmediaquiz.html • Pieces of jigsaw created in the program. See http://faculty.purchase.edu/jeanine.meyer/html5/jigsawcanvas1.html

  5. Creating HTML markup in JavaScript • Circles and arrows: http://faculty.purchase.edu/jeanine.meyer/html5/drawAndMoveCirclesAndArrows.html • Collage (shapes, photos, videos): http://faculty.purchase.edu/jeanine.meyer/html5/collagebase.html • Note object-oriented programming style

  6. Parallel structures • (poorman's database, but may be appropriate) • http://faculty.purchase.edu/jeanine.meyer/html5/statesgame.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/movingghost.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 <script src="processing.min.js"></script> <canvas data-processing-sources ="makePathThenImageTravel.pde"> </canvas>

  12. My html file: imageTravel.html <html> <title>Biker chick </title> <script src="processing.min.js"></script> <canvas data-processing-sources ="makePathThenImageTravel.pde"> </canvas> </html>

  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/ProcessingJS/imageTravel.html • I am now adding these to my site: • http://faculty.purchase.edu/jeanine.meyer/processing

  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.

More Related