/ fps_meter.html
fps_meter.html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 6 7 <title>FPS Meter — Space.js</title> 8 9 <link rel="preconnect" href="https://fonts.gstatic.com"> 10 <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto+Mono"> 11 <link rel="stylesheet" href="assets/css/style.css"> 12 13 <script type="module"> 14 import { PanelItem, UI } from './src/index.js'; 15 16 const ui = new UI({ 17 fps: true, // Hover or tap to open 18 fpsOpen: true // Always open 19 }); 20 ui.animateIn(); 21 document.body.appendChild(ui.element); 22 23 let needsUpdate = true; 24 25 const items = [ 26 { 27 name: 'FPS' 28 }, 29 { 30 type: 'divider' 31 }, 32 { 33 type: 'meter', 34 name: 'FPS', 35 noText: true, 36 noGradient: true 37 }, 38 { 39 type: 'meter', 40 name: 'FPS' 41 }, 42 { 43 type: 'meter', 44 name: 'Random', 45 value: Math.random(), 46 noText: true, 47 noGradient: true 48 }, 49 { 50 type: 'meter', 51 name: 'Random', 52 value: Math.random(), 53 noText: true 54 }, 55 { 56 type: 'meter', 57 name: 'Random', 58 precision: 2, 59 value: Math.random() 60 }, 61 { 62 type: 'meter', 63 name: 'Random', 64 suffix: 'ms', 65 range: 150, 66 value: 150 * Math.random() 67 }, 68 { 69 type: 'meter', 70 name: 'Ghost', 71 suffix: 'ms', 72 range: 150, 73 value: 150 * Math.random(), 74 ghost: 150 * Math.random(), 75 noText: true 76 }, 77 { 78 type: 'meter', 79 name: 'Ghost', 80 suffix: 'ms', 81 range: 150, 82 value: 150 * Math.random(), 83 ghost: 150 * Math.random() 84 }, 85 { 86 type: 'meter', 87 value: Math.random(), 88 noText: true, 89 noGradient: true 90 }, 91 { 92 type: 'meter', 93 suffix: 'ms', 94 range: 150, 95 value: 150 * Math.random() 96 }, 97 { 98 type: 'meter', 99 name: 'Sine', 100 precision: 2, 101 value: -180, 102 noText: true, 103 noGradient: true, 104 callback: (value, item) => { 105 // console.log('Sine callback:', value); 106 107 const x = 0.5 + 0.5 * Math.sin(value++ / 100); 108 item.update(x); 109 110 // The return value is passed back in the next frame 111 return value; 112 } 113 }, 114 { 115 type: 'meter', 116 name: 'Sine', 117 precision: 2, 118 value: -180, 119 callback: (value, item) => { 120 // console.log('Sine callback:', value); 121 122 const x = 0.5 + 0.5 * Math.sin(value++ / 100); 123 item.update(x); 124 125 // The return value is passed back in the next frame 126 return value; 127 } 128 }, 129 { 130 type: 'meter', 131 name: 'Random', 132 precision: 2, 133 value: performance.now() - 1000, 134 callback: (value, item) => { 135 // console.log('Random callback:', value); 136 137 const time = performance.now(); 138 139 // Update once per second 140 if (time - 1000 > value) { 141 value = time; 142 143 item.update(Math.random()); 144 } else { 145 item.update(); 146 } 147 148 // The return value is passed back in the next frame 149 return value; 150 } 151 }, 152 { 153 type: 'meter', 154 name: 'Meter', 155 precision: 2, 156 value: Math.random(), 157 callback: (value, item) => { 158 // console.log('Graph callback:', value); 159 160 if (needsUpdate) { 161 needsUpdate = false; 162 163 item.update(Math.random()); 164 } else { 165 item.update(); 166 } 167 168 // The return value is passed back in the next frame 169 return value; 170 } 171 }, 172 { 173 type: 'link', 174 value: 'Update', 175 callback: value => { 176 console.log('Update callback:', value); 177 178 needsUpdate = true; 179 } 180 } 181 ]; 182 183 items.forEach(data => { 184 ui.addPanel(new PanelItem(data)); 185 }); 186 187 // Call after adding to show the fps panel right away 188 // ui.animateIn(); 189 ui.header.info.animateIn(); 190 191 function animate() { 192 requestAnimationFrame(animate); 193 194 ui.update(); 195 } 196 197 requestAnimationFrame(animate); 198 </script> 199 </head> 200 <body> 201 </body> 202 </html>