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

▶
a javascript framework for presentations and animations
SMART_READER_LITE
LIVE PREVIEW

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

Oct 23, 2023 470 likes •1.33k 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

slide-1
SLIDE 1

May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

/ 76

A JavaScript Framework for Presentations and Animations on Computer Science

Bachelor Thesis Technical Aspects of Multimodal Systems Department of Informatics University of Hamburg

Laszlo Korte

1

slide-2
SLIDE 2

May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

/ 76

Outline

  • 1. Introduction
  • 2. Web Platform

○ The Browser ○ NodeJS ○ Workflow ○ Graphical User Interface

  • 3. Components

○ Demos

  • 4. Architecture

2

slide-3
SLIDE 3

May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

/ 76

Motivation

3

Introduction

slide-4
SLIDE 4

May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

/ 76

Motivation

  • Computer Science deals with abstract topics
  • Hard to grasp without trying
  • Short feedback cycle for building intuition

➔ Interactive learning experience

4

slide-5
SLIDE 5

May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

/ 76

Matlab Components

  • Boolean expression parsing and evaluation
  • Binary number encoding and decoding
  • Finate-state machine simulation
  • Algorithm visualisation
  • …

5

slide-6
SLIDE 6

May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

/ 76

Matlab Components - FSM

6

finite-state machine simulator

slide-7
SLIDE 7

May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

/ 76

Matlab Components - number encoding

7

number “circle”

slide-8
SLIDE 8

May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

/ 76

Matlab Components - base conversion

8

visualisation of an algorithm for base conversion

slide-9
SLIDE 9

May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

/ 76

Java Applets

  • Karnaugh map editor
  • Advanced FSM editor

9

slide-10
SLIDE 10

May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

/ 76

Java Applets - Karnaugh map

10

Karnaugh map editor

slide-11
SLIDE 11

May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

/ 76

Java Applets - Karnaugh map

11

Karnaugh map editor

slide-12
SLIDE 12

May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

/ 76

Java Applets - FSM

12

Finite-state machine editor

slide-13
SLIDE 13

May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

/ 76

Java Applets - FSM

13

Finite-state machine editor

slide-14
SLIDE 14

May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

/ 76

Issues

  • Matlab

○ Not free, licensing restrictions ○ Not trouble-free with current Matlab version ○ Not on mobile devices

14

slide-15
SLIDE 15

May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

/ 76

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

slide-16
SLIDE 16

May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

/ 76

Objective

16

Introduction

slide-17
SLIDE 17

May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

/ 76

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

slide-18
SLIDE 18

May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

/ 76

Objective - components

  • Karnaugh map editor
  • Finite-state machine editor
  • Boolean expression editor
  • Number circle
  • ...

➔ Expandable later on

18

slide-19
SLIDE 19

May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

/ 76

The Browser

19

Web Platform

slide-20
SLIDE 20

May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

/ 76

The Browser

  • Display HyperText Markup Language Documents

(HTML)

  • Documents can be styled via Stylehsheets

(CSS)

  • Documents may contain code to execute

(JavaScript)

20

slide-21
SLIDE 21

May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

/ 76

The Browser - example HTML document

21

index.html

slide-22
SLIDE 22

May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

/ 76

The Browser - example HTML document

22

index.html

slide-23
SLIDE 23

May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

/ 76 23

index.html

+ CSS

slide-24
SLIDE 24

May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

/ 76 24

index.html

+ CSS

slide-25
SLIDE 25

May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

/ 76 25

index.html

+ JS

slide-26
SLIDE 26

May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

/ 76 26

index.html

+ JS

slide-27
SLIDE 27

May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

/ 76 27

index.html

+ JS

slide-28
SLIDE 28

May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

/ 76 28

index.html

+ JS

slide-29
SLIDE 29

May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

/ 76 29

index.html

+ JS

slide-30
SLIDE 30

May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

/ 76

The Browser - example document

30

index.html

slide-31
SLIDE 31

May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

/ 76

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

slide-32
SLIDE 32

May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

/ 76

The Browser - Document Object Model

  • DOM API allows querying and modifying the

whole document

32

slide-33
SLIDE 33

May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

/ 76

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

slide-34
SLIDE 34

May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

/ 76

NodeJS

34

Web Platform

slide-35
SLIDE 35

May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

/ 76

NodeJS

  • JavaScript runtime environment

○ Based on Chrome’s JavaScript engine V8 ○ Run JavaScript outside the browser

➔ Large ecosystem of open source libraries and tools

35

Source: https://nodejs.org/en/about/resources/

slide-36
SLIDE 36

May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

/ 76

NodeJS - Package Manager

  • Command line tool for managing

dependencies

○ Like maven for Java or easy_install for python

  • Access to >250.000 libraries

36

Source: https://www.npmjs.com/

slide-37
SLIDE 37

May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

/ 76

Workflow

37

Web Platform

slide-38
SLIDE 38

May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

/ 76

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

Babel Logo: https://github.com/babel/babel ESLint Logo: http://eslint.org/ Webpack Logo: https://webpack.github.io/

slide-39
SLIDE 39

May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

/ 76

Workflow - Babel

39

ES6 module import syntax

Source: https://github.com/babel/babel

slide-40
SLIDE 40

May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

/ 76

Workflow - Tools

40

moduleA.js main.js moduleB.js vendor/LibX

slide-41
SLIDE 41

May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

/ 76

Workflow - ESLint

41

moduleA.js main.js moduleB.js

Source: http://eslint.org/

slide-42
SLIDE 42

May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

/ 76

Workflow - Webpack

42 moduleA.js main.js moduleB.js

bundle application.js

Source: https://webpack.github.io/

slide-43
SLIDE 43

May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

/ 76

Workflow - Webpack

43 moduleA.js main.js moduleB.js

bundle application.js

Source: https://webpack.github.io/

moduleB.css style.css

application.css

layout.css

slide-44
SLIDE 44

May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

/ 76

Workflow - Webpack Dev Server

44

slide-45
SLIDE 45

May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

/ 76

Workflow - Webpack Dev Server

45

  • No manual recompile
  • Watches the file system for changes
  • Pushes changes to browser (via websocket)
slide-46
SLIDE 46

May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

/ 76

Workflow - Webpack Dev Server

46

  • No manual recompile
  • Watches the file system for changes
  • Pushes changes to browser (via websocket)

main.js moduleB.js moduleA.js

Dev Server http://127.0.0.1:3000 watch notify connect

browser file system

slide-47
SLIDE 47

May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

/ 76

Graphical User Interface

47

Web Platform

slide-48
SLIDE 48

May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

/ 76

GUI - Graphical User Interface

  • JavaScript provides multiple APIs for

building GUIs ➔ HTML / CSS ➔ Canvas (2D bitmap) ➔ Scalable Vector Graphics (SVG)

48

slide-49
SLIDE 49

May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

/ 76

GUI - HTML / CSS

  • Layout calculations are done by the browser

○ text wrapping, adjusting height of elements

  • Native support for responsive layouts
  • API for user interactions
  • Only rectangular shapes

49

slide-50
SLIDE 50

May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

/ 76

GUI - Canvas (2D Bitmap)

  • Fine grained control on a pixel level
  • All kinds of shapes (arcs, bézier curves…)
  • Hard to support multiple screen sizes
  • Hittesting needs to be done manually

50

slide-51
SLIDE 51

May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

/ 76

GUI - Scalable Vector Graphics (SVG)

  • XML based format for vector graphics
  • Embeddable into HTML
  • All kinds of shapes (arcs, bézier curves…)
  • Support for Stylesheets
  • API for user interactions (event handling)
  • sharp on all display sizes
  • Manual layout (text wrapping, element height)

51

slide-52
SLIDE 52

May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

/ 76

GUI

  • HTML / CSS for base layout
  • SVG for advanced visualisations and icons
  • no Canvas

52

slide-53
SLIDE 53

May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

/ 76

Demo

53

Components

  • Logic expression editor
  • Logic expression checker
  • Karnaugh map editor
  • LED editor
  • Number circle
  • FSM editor

https://thesis.laszlokorte.de/

slide-54
SLIDE 54

May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

/ 76

Demo - Logic expression editor

  • Parse boolean expression

○ In various dialects

  • Generate a function table
  • Generate an operator tree

○ Color branches

  • Enter multiple expressions

54

thesis.laszlokorte.de/demo/logic-editor.html

slide-55
SLIDE 55

May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

/ 76

Demo - Logic expression editor - Details

  • Expressions are parsed by PEG.js via

parsing expression grammar

  • Tree is drawn via Buchheim algorithm

(C. Buchheim, M. J Unger, and S. Leipert. Improving Walker's algorithm to run in linear time.)

  • Labelled expressions are sorted

topologically

55

slide-56
SLIDE 56

May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

/ 76

Demo - Logic expression checker

  • Simplified GUI for comparing two

expressions

  • Highlight differences in function table

56

thesis.laszlokorte.de/demo/logic-checker.html

slide-57
SLIDE 57

May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

/ 76

Demo - Karnaugh map editor

  • Create Karnaugh maps of various sizes
  • Creating loops on a touch screen
  • Show Programmable Logic Array
  • Import and export expressions

57

thesis.laszlokorte.de/demo/kvd-editor.html

slide-58
SLIDE 58

May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

/ 76

Demo - Karnaugh map editor - details

  • PLA view is it’s own component

58

slide-59
SLIDE 59

May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

/ 76

Demo - LED editor

  • Build function tables for 7-segment display…
  • … or other displays

59

thesis.laszlokorte.de/demo/led-editor.html

slide-60
SLIDE 60

May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

/ 76

Demo - Number circle

  • Arrange binary numbers in a circle
  • Adjusting the circle size
  • Compare various encodings
  • Highlight overflows

60

thesis.laszlokorte.de/demo/number-circle.html

slide-61
SLIDE 61

May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

/ 76

Demo - Finite-state machine editor

  • Edit Moore and Mealy machines
  • Edit transition graph
  • Not yet implemented:

○ Accept logic expressions as transition conditions ○ simulating the machine

61

thesis.laszlokorte.de/demo/fsm-editor.html

slide-62
SLIDE 62

May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

/ 76

Architecture

62

slide-63
SLIDE 63

May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

/ 76

Architecture

  • Based on Functional Reactive Programming
  • Each component is a pure function, that

transforms input to output

  • Components do not modify any outside state
  • inspired by Cycle.js library

63

Source: http://cycle.js.org

slide-64
SLIDE 64

May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

/ 76

Architecture - Functional Reactive Programming

  • Events and state are modelled as streams
  • Streams represent data over time
  • A component takes stream of events (clicks,

key presses…) as input

  • A component produces a stream of state

(document state) as output

64

slide-65
SLIDE 65

May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

/ 76

Architecture - Functional Reactive Programming

65

Logic Expression Field

Stream<KeyPress> Stream<MouseClick> Stream<DocumentTree> Stream<AbstrSyntaxTree>

slide-66
SLIDE 66

May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

/ 76

Architecture - Functional Reactive Programming

66

23 16 42 8 23 42

filter((x) => x > 20)

time

slide-67
SLIDE 67

May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

/ 76

Architecture - Functional Reactive Programming

67

23 16 42 8

map((x) => x * 2)

time

46 32 84 16

slide-68
SLIDE 68

May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

/ 76

Architecture - Functional Reactive Programming

68

23 16 42 8

scan((acc, x) => acc + x, 0)

time

23 39 81 89

slide-69
SLIDE 69

May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

/ 76

Architecture - Functional Reactive Programming

69

  • many more operators available (reactivex.io)
  • The whole GUI is built via stream

transformation

  • especially drag-drop and touch gestures

are easy to build on top of event streams

slide-70
SLIDE 70

May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

/ 76

Conclusion

70

slide-71
SLIDE 71

May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

/ 76

Conclusion

71

  • Componenents work across all major

browsers:

○ Chrome, Firefox, Opera, Safari, IE11, Edge

  • usable on various screen sizes

○ (sharp on retina screens)

  • usable on touch screens
slide-72
SLIDE 72

May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

/ 76

Conclusion

72

Stats:

  • ~12.000 lines of JavaScript
  • 217 JavaScript files
  • 610 Git Commits
slide-73
SLIDE 73

May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

/ 76

Conclusion

73

Potential improvements:

  • Performance could be improved
  • Printing support would be nice

○ eg. export expression tree or function table as PDF

  • Expression parser via command line
  • Splitting component into separate projects
slide-74
SLIDE 74

May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

/ 76

Conclusion

74

Potential improvements (Cont.):

  • Output file size could be further reduced

○ by tree shaking vendor libraries ○ currently ~500KB for Karnaugh maps

  • For long term maintanance use a stronger

language than JavaScript

○ eg. PureScript or TypeScript

slide-75
SLIDE 75

May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

/ 76

Conclusion

75

Potential improvements (Cont.):

  • No animations yet!

○ easy to built via stream transformation… ○ … or CSS animations

slide-76
SLIDE 76

May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

/ 76

Thank you for your attention! Questions?

76

  • Web Platform

○ The Browser ○ NodeJS, NPM ○ Workflow (Babel, ESLint, Webpack) ○ Graphical User Interface (HTML, Canvas, SVG)

  • Components

○ Logic Expression editor/checker ○ Karnaugh Maps ○ LED editor ○ Number Circle ○ FSM editor

  • Architecture
slide-77
SLIDE 77

May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

/ 76

Bonus - Karnaugh map recursion

77

slide-78
SLIDE 78

May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

/ 76

Bonus - Karnaugh map recursion (Cont.)

78

slide-79
SLIDE 79

May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

/ 76

Bonus - Karnaugh map recursion (Cont. 2)

79

slide-80
SLIDE 80

May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

/ 76

Bonus - Karnaugh map drag-’n-drop

80

slide-81
SLIDE 81

May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

/ 76

Bonus - Karnaugh map layout #1

81

slide-82
SLIDE 82

May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

/ 76

Bonus - Karnaugh map layout #2

82

slide-83
SLIDE 83

May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

/ 76

Bonus - Karnaugh map layout #3 a

83

slide-84
SLIDE 84

May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

/ 76

Bonus - Karnaugh map layout #3 b

84