renderview/src/tester.html at ce382a37defeb402a8097f7c12559ec191ab8019 · pygfx/renderview · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!DOCTYPE html>
<html>

<head>
    <title>renderview tester</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="The RenderView tester">
    <!-- renderview.js is loaded as plain script here. This is simpler and nice for debugging, but in production it's better to load it as a module or wrap it in a IIFE -->
    <script src="renderview.js"></script>
    <link rel="stylesheet" href="renderview.css">
    <style>
        body {
            height: 210vh;
            padding: 20px;
        }
    </style>
    <script type="module">

        class TesterRenderView extends BaseRenderView {

            constructor(viewElement, wrapperElement) {
                super(viewElement, wrapperElement)

                this._drawRequested = false
                this._events = []
                this._eventCount = 0
            }

            onEvent(event) {
                const events = this._events
                this._eventCount += 1

                if (events.length > 0 && events[0].type == event.type) {
                    events[0] = event
                } else {
                    events.unshift(event)
                    this._events = this._events.slice(0, 32)
                }

                if (event.type == 'resize') {
                    this.viewElement.width = event.pwidth
                    this.viewElement.height = event.pheight
                    this.draw()
                }
                if (!this._drawRequested) {
                    this._drawRequested = true
                    window.requestAnimationFrame(this.draw.bind(this))
                }
            }

            draw() {
                this._drawRequested = false

                const ctx = this.viewElement.getContext('2d')  // CanvasRenderingContext2D
                ctx.fillStyle = '#abc'
                ctx.fillRect(0, 0, this.viewElement.width, this.viewElement.height)

                const fontSize = 16
                const lineSpacing = fontSize * 2.5
                const x = 20
                let y = 10 + lineSpacing

                ctx.font = `${fontSize * window.devicePixelRatio}px sans`;
                ctx.fillStyle = `rgba(0, 0, 0, 1)`

                ctx.fillText(`${this._eventCount} events`, x, y)
                y += lineSpacing

                let a = 1
                for (let event of this._events) {
                    y += lineSpacing
                    a = Math.max(0, a - 0.04)
                    ctx.fillStyle = `rgba(0, 0, 0, ${a})`
                    ctx.fillText(eventToString(event), x, y)
                }
            }
        }

        const floatKeys = ['x', 'y', 'dx', 'dy', 'timestamp']
        function eventToString(event) {
            let s = '{ '
            for (let [key, value] of Object.entries(event)) {
                let v = JSON.stringify(value)
                if (floatKeys.includes(key)) {
                    let i = v.indexOf('.')
                    if (i > 0) { v = v.slice(0, i + 2) } else { v += '.0' }
                    let pad = 6 - v.length
                    if (pad > 0) { v = ' '.repeat(pad) + v }
                }
                s += `${key}: ${v}, `
            }
            s += " }"
            return s
        }

        let element1 = document.getElementById('canvas1')
        let canvas1 = element1
        let view1 = new TesterRenderView(canvas1, null)

        let element2 = document.getElementById('canvas2')
        let canvas2 = document.createElement('canvas')
        let view2 = new TesterRenderView(canvas2, element2)

        // Great for debugging to be able to access the views
        window.view1 = view1
        window.view2 = view2

    </script>
</head>

<body>

    <h1>RenderView tester</h1>

    <p>
        A simple web page to test and check the RenderView reference implementation.
    </p>

    <h2>Plain canvas</h2>
    <canvas id='canvas1' style='width: 100%; height: 480px; background: #aaa;'></canvas>

    <h2>Canvas with wrapper</h2>
    <div id='canvas2' class='renderview-wrapper has-titlebar is-resizable'
        style='width: 800px; height: 480px; background: #aaa'>
        Loading ...
    </div>

    <br><br><br><br><br>
    <i>Below a lot of whitespace to make sure we can scroll the canvas out of view.</i>
</body>

</html>