a javascript framework for presentations and animations
play

A JavaScript Framework for Presentations and Animations on Computer - PowerPoint PPT Presentation

Oct 23, 2023 •470 likes •1.32k views

A JavaScript Framework for Presentations and Animations on Computer Science Laszlo Korte Bachelor Thesis Technical Aspects of Multimodal Systems Department of Informatics University of Hamburg 1 / 76 May 3, 2016 - Laszlo Korte - JavaScript

  1. A JavaScript Framework for Presentations and Animations on Computer Science Laszlo Korte Bachelor Thesis Technical Aspects of Multimodal Systems Department of Informatics University of Hamburg 1 / 76 May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

  2. Outline 1. Introduction 2. Web Platform ○ The Browser ○ NodeJS ○ Workflow ○ Graphical User Interface 3. Components ○ Demos 4. Architecture 2 / 76 May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

  3. Introduction Motivation 3 / 76 May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

  4. Motivation ● Computer Science deals with abstract topics ● Hard to grasp without trying ● Short feedback cycle for building intuition ➔ Interactive learning experience 4 / 76 May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

  5. Matlab Components ● Boolean expression parsing and evaluation ● Binary number encoding and decoding ● Finate-state machine simulation ● Algorithm visualisation ● … 5 / 76 May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

  6. Matlab Components - FSM finite-state machine simulator 6 / 76 May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

  7. Matlab Components - number encoding number “circle” 7 / 76 May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

  8. Matlab Components - base conversion visualisation of an algorithm for base conversion 8 / 76 May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

  9. Java Applets ● Karnaugh map editor ● Advanced FSM editor 9 / 76 May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

  10. Java Applets - Karnaugh map Karnaugh map editor 10 / 76 May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

  11. Java Applets - Karnaugh map Karnaugh map editor 11 / 76 May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

  12. Java Applets - FSM Finite-state machine editor 12 / 76 May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

  13. Java Applets - FSM Finite-state machine editor 13 / 76 May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

  14. Issues ● Matlab ○ Not free, licensing restrictions ○ Not trouble-free with current Matlab version ○ Not on mobile devices 14 / 76 May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

  15. Issues ● Matlab ○ Not free, licensing restrictions ○ Not trouble-free with current Matlab version ○ Not on mobile devices ● Java Applets ○ Not on iOS (iPad, iPhone) ○ Not usable on touch screens 15 / 76 May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

  16. Introduction Objective 16 / 76 May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

  17. Objective ● A new collection of components ○ no licensing issues ○ not limitted to a small set of devices ➔ The web as free and open platform ➔ Touch screen support ➔ Support a wide range of screen sizes 17 / 76 May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

  18. Objective - components ● Karnaugh map editor ● Finite-state machine editor ● Boolean expression editor ● Number circle ● ... ➔ Expandable later on 18 / 76 May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

  19. Web Platform The Browser 19 / 76 May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

  20. The Browser ● Display HyperText Markup Language Documents (HTML) ● Documents can be styled via Stylehsheets (CSS) ● Documents may contain code to execute (JavaScript) 20 / 76 May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

  21. The Browser - example HTML document index.html 21 / 76 May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

  22. The Browser - example HTML document index.html 22 / 76 May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

  23. + CSS index.html 23 / 76 May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

  24. + CSS index.html 24 / 76 May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

  25. + JS index.html 25 / 76 May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

  26. + JS index.html 26 / 76 May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

  27. + JS index.html 27 / 76 May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

  28. + JS index.html 28 / 76 May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

  29. + JS index.html 29 / 76 May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

  30. The Browser - example document index.html 30 / 76 May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

  31. The Browser ● HTML Document is the entry point ○ links to/embeds stylesheets ○ links to/embeds javascripts ● Most of the application is defined in JavaScript (JS) ➔ start with an almost empty document, build everything in JS 31 / 76 May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

  32. The Browser - Document Object Model ● DOM API allows querying and modifying the whole document 32 / 76 May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

  33. The Browser - JavaScript ● No module system ○ difficult to split application into modules ● No static type system ● Weird semantics ○ 5 + "5" === "55" ○ 5 * "5" === 25 ● API differences across browsers 33 / 76 May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

  34. Web Platform NodeJS 34 / 76 May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

  35. NodeJS Source: https://nodejs.org/en/about/resources/ ● JavaScript runtime environment ○ Based on Chrome’s JavaScript engine V8 ○ Run JavaScript outside the browser ➔ Large ecosystem of open source libraries and tools 35 / 76 May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

  36. NodeJS - Package Manager Source: https://www.npmjs.com/ ● Command line tool for managing dependencies ○ Like maven for Java or easy_install for python ● Access to >250.000 libraries 36 / 76 May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

  37. Web Platform Workflow 37 / 76 May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

  38. Babel Logo: https://github.com/babel/babel ESLint Logo: http://eslint.org/ Webpack Logo: https://webpack.github.io/ Workflow - Tools ● BabelJS ○ Access to future JS features (eg. module system) ● ESLint ○ Check source code for common errors ● Webpack ○ Module bundler ○ combine multiple JS files and libraries into one file 38 / 76 May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

  39. Workflow - Babel Source: https://github.com/babel/babel ES6 module import syntax 39 / 76 May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

  40. vendor/LibX Workflow - Tools moduleA.js moduleB.js main.js 40 / 76 May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

  41. Workflow - ESLint Source: http://eslint.org/ moduleA.js moduleB.js main.js 41 / 76 May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

  42. Workflow - Webpack Source: https://webpack.github.io/ moduleA.js moduleB.js bundle application.js main.js 42 / 76 May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

  43. Workflow - Webpack layout.css moduleB.css Source: https://webpack.github.io/ moduleA.js style.css application .js moduleB.js bundle application. css main.js 43 / 76 May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

  44. Workflow - Webpack Dev Server 44 / 76 May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

  45. Workflow - Webpack Dev Server ● No manual recompile ● Watches the file system for changes ● Pushes changes to browser (via websocket) 45 / 76 May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

  46. Workflow - Webpack Dev Server ● No manual recompile ● Watches the file system for changes ● Pushes changes to browser (via websocket) connect moduleA.js watch Dev Server main.js notify moduleB.js browser http://127.0.0.1:3000 file system 46 / 76 May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

Recommend

This presentation contains animations which require PDF browser which accepts JavaScript. For

This presentation contains animations which require PDF browser which accepts JavaScript. For

This presentation contains animations which require PDF browser which accepts JavaScript. For best results use Acrobat Reader. RSK problems theorem: bumping routes proof, the easy part proof, science fiction the end R obinson- S chensted- K

1.11k views • 85 slides
Animations Animations with Timers Double Buffering 1 CS 349 - Animations Animation A

Animations Animations with Timers Double Buffering 1 CS 349 - Animations Animation A

Animations Animations with Timers Double Buffering 1 CS 349 - Animations Animation A simulation of movement created by displaying a series of pictures, or frames. Animation: drawing frames at a consistent rate . Goals: Move

350 views • 13 slides
iOS Animation with Swift Part 5: Keyframe Animations Keyframe Animations Keyframe Animations

iOS Animation with Swift Part 5: Keyframe Animations Keyframe Animations Keyframe Animations

iOS Animation with Swift Part 5: Keyframe Animations Keyframe Animations Keyframe Animations 25% 25% 50% 10% start time end time total duration KeyFrame Animation APIs UIView.animateKeyframesWithDuration(1.5, delay: 0.0, options: nil,

195 views • 7 slides
Selenium Tutorial What is Selenium? Javascript framework that runs in your web- browser

Selenium Tutorial What is Selenium? Javascript framework that runs in your web- browser

Selenium Tutorial What is Selenium? Javascript framework that runs in your web- browser Works anywhere Javascript is supported Hooks for many other languages Java, Ruby, Python Can simulate a user navigating through pages and

310 views • 17 slides
GUI$Applica+ons$ Concurrent$Swing$ Niklas$Fors$ 2013>11>13$

GUI$Applica+ons$ Concurrent$Swing$ Niklas$Fors$ 2013>11>13$

GUI$Applica+ons$ Concurrent$Swing$ Niklas$Fors$ 2013>11>13$ Swing$$A$GUI$framework$in$Java$ Swing$ Swing$is$ single'threaded $ Android$UI,$SWT,$QT,$MacOS$Cocoa,$X$Windows$ (However,$there$are$some$methods$that$are$

311 views • 14 slides
JavaScript Primer Basic Introduction of JavaScript JavaScript History Why (re)introduce

JavaScript Primer Basic Introduction of JavaScript JavaScript History Why (re)introduce

JavaScript Primer Basic Introduction of JavaScript JavaScript History Why (re)introduce JavaScript? Notorious for being worlds most misunderstood programming language o (Douglas Crockford -

432 views • 11 slides
Introduction to JavaScript Niels Olof Bouvin 1 Overview A brief history of JavaScript and

Introduction to JavaScript Niels Olof Bouvin 1 Overview A brief history of JavaScript and

Introduction to JavaScript Niels Olof Bouvin 1 Overview A brief history of JavaScript and ECMAScript JavaScript for Java developers The JavaScript ecosystem Getting access to JavaScript Some language basics A look at the Node.js standard

1.1k views • 57 slides
Introduction to JavaScript Niels Olof Bouvin 2 Overview A brief history of JavaScript and

Introduction to JavaScript Niels Olof Bouvin 2 Overview A brief history of JavaScript and

Introduction to JavaScript Niels Olof Bouvin 2 Overview A brief history of JavaScript and ECMAScript JavaScript for Java developers The JavaScript ecosystem Getting access to JavaScript Some language basics A look at the Node.js standard

1.03k views • 54 slides
CE419 Session 5: JavaScript Web Programming 1 What is JavaScript? JavaScript is a dynamic

CE419 Session 5: JavaScript Web Programming 1 What is JavaScript? JavaScript is a dynamic

CE419 Session 5: JavaScript Web Programming 1 What is JavaScript? JavaScript is a dynamic programming language. Introduced in 1995 as a way to add programs to web pages in the Netscape Navigator browser. It has made modern web

795 views • 35 slides
The Point of Holly Schinsky devgirlfl devgirl.org Vue.js is The Progressive JavaScript

The Point of Holly Schinsky devgirlfl devgirl.org Vue.js is The Progressive JavaScript

Exploring JavaScript Frameworks The Point of Holly Schinsky devgirlfl devgirl.org Vue.js is The Progressive JavaScript Framework Creator - Evan You Initial release in Feb 2014 Previously worked at Google and Meteor W orks on Vue full

556 views • 30 slides
Constraint Satisfaction Problems R&N Chapter 5 Animations from

Constraint Satisfaction Problems R&N Chapter 5 Animations from

Constraint Satisfaction Problems R&N Chapter 5 Animations from http://www.cs.cmu.edu/~awm/animations/constraint 1 Outline Definitions Standard search Improvements Backtracking Forward checking Constraint

878 views • 46 slides
KadOH Kademlia over HTTP a Javascript framework bringing DHT to mobile applications What have

KadOH Kademlia over HTTP a Javascript framework bringing DHT to mobile applications What have

Alexandre Lachze Pierre Guilleminot KadOH Kademlia over HTTP a Javascript framework bringing DHT to mobile applications What have been done so far in the DHT landscape ? * * Distributed Hash Table Theoretical resuts Chord Kademlia

1.19k views • 40 slides
JavaScript: The Good Parts vs. JavaScript: The Definitive Guide CS 252: Advanced Programming

JavaScript: The Good Parts vs. JavaScript: The Definitive Guide CS 252: Advanced Programming

JavaScript: The Good Parts vs. JavaScript: The Definitive Guide CS 252: Advanced Programming Language Principles Introduction to JavaScript Prof. Tom Austin San Jos State University History of JavaScript In 1995, Netscape hired Brendan

395 views • 16 slides
Advanced JavaScript dates JavaScript timing events JavaScript Lars Larsson cookies Graceful

Advanced JavaScript dates JavaScript timing events JavaScript Lars Larsson cookies Graceful

Advanced JavaScript Lars Larsson Today JavaScript strings JavaScript Advanced JavaScript dates JavaScript timing events JavaScript Lars Larsson cookies Graceful degradation AJAX Summary Lecture #11 Advanced JavaScript 1

831 views • 38 slides
Using animations within L A T EX documents Michael Doob Department of Mathematics University of

Using animations within L A T EX documents Michael Doob Department of Mathematics University of

Using animations within L A T EX documents T EX Users Group meetingJuly 30, 2014 Michael Doob Using animations within L A T EX documents Michael Doob Department of Mathematics University of Manitoba July 30, 2014 Using animations

497 views • 23 slides
Land Certication and Schooling in Rural Ethiopia Heather Congdon Fors 1 ,Kenneth Houngbedji 2 ,

Land Certication and Schooling in Rural Ethiopia Heather Congdon Fors 1 ,Kenneth Houngbedji 2 ,

Land Certication and Schooling in Rural Ethiopia Heather Congdon Fors 1 ,Kenneth Houngbedji 2 , Annika Lindskog 1 June 7, 2016 1 University of Gothenburg 2 Paris School of Economics Congdon Fors, Houngbedji, Lindskog Land Certication and

2.16k views • 75 slides
JavaScript Concepts JavaScript is pretty hard to escape if you want to do anything for the web C

JavaScript Concepts JavaScript is pretty hard to escape if you want to do anything for the web C

JavaScript Concepts JavaScript is pretty hard to escape if you want to do anything for the web C of the Internet Take JavaScript for instance. It's widely criticized in the POPL community for getting many things wrong. But it must have

655 views • 44 slides
The central role of low-resolution FORS 1/2 spectropolarimetric observations for the

The central role of low-resolution FORS 1/2 spectropolarimetric observations for the

The central role of low-resolution FORS 1/2 spectropolarimetric observations for the investigation of magnetic fields in massive pulsating stars Markus Schller, Swetlana Hubrig, Alexander Kholtygin, et al. Polarization V spectra observed

407 views • 18 slides
Animation Models 3D Graphics What we see today Skeleton-based animations o Suitable to

Animation Models 3D Graphics What we see today Skeleton-based animations o Suitable to

Animation Models 3D Graphics What we see today Skeleton-based animations o Suitable to animate human-like models Blendshape-based animations o Suitable to animate faces Data-driven animations o Allow to model motion of human-like

1.09k views • 47 slides
Game Development In JavaScript First Impressions Javascript Designed for web application

Game Development In JavaScript First Impressions Javascript Designed for web application

Game Development In JavaScript First Impressions Javascript Designed for web application Had a rough childhood Very misunderstood Performance difference across browsers Benchmark Pros/Cons JavaScript: WebGL & Canvas

939 views • 18 slides
J AVA S CRIPT JavaScript is the programming language of HTML and the Web. JavaScript

J AVA S CRIPT JavaScript is the programming language of HTML and the Web. JavaScript

J AVA S CRIPT JavaScript is the programming language of HTML and the Web. JavaScript Java JavaScript is interpreted by the browser JavaScript 1/15 JS W HERE T O <!DOCTYPE html> <html> <head> <script

591 views • 15 slides
TESTING JAVASCRIPT BUILDING JAVASCRIPT APPLICATIONS YOU WON'T HATE 1/45 Testing Javascript

TESTING JAVASCRIPT BUILDING JAVASCRIPT APPLICATIONS YOU WON'T HATE 1/45 Testing Javascript

TESTING JAVASCRIPT BUILDING JAVASCRIPT APPLICATIONS YOU WON'T HATE 1/45 Testing Javascript Called Testing JS but really about embracing the front end Classic JS meme about "this" This tweet could have ended half way through and

844 views • 45 slides
Animations with AL (and stack views) Marin Todorov Swift 2.0 Swift 2.0

Animations with AL (and stack views) Marin Todorov Swift 2.0 Swift 2.0

Animations with AL (and stack views) Marin Todorov Swift 2.0 Swift 2.0 UIView.animateWithDuration(1.0, animations: { redSquare.center.x = 200.0 }) Stack Overflow Q: How to do this one animation thing in my app? A: Include

597 views • 18 slides
Introduction to Jest testing framework Painless JavaScript Testing platform Vasyl Boroviak

Introduction to Jest testing framework Painless JavaScript Testing platform Vasyl Boroviak

Introduction to Jest testing framework Painless JavaScript Testing platform Vasyl Boroviak Transform your inspection process with smart, mobile forms. checklists into digital forms and access them on site, in the field, where Typical set of

405 views • 28 slides

More recommend