| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>paramset-sk</title> |
| <meta charset="utf-8" /> |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <style type="text/css" media="screen"> |
| body { |
| font-family: sans-serif; |
| } |
| |
| paramset-sk { |
| display: block; |
| margin: 3em; |
| } |
| </style> |
| </head> |
| <body> |
| <h1>paramset-sk</h1> |
| |
| <paramset-sk id=set1></paramset-sk> |
| |
| <paramset-sk clickable id=set2></paramset-sk> |
| |
| <paramset-sk clickable_values id=set3></paramset-sk> |
| |
| <button id=highlight>Highlight</button> |
| <button id=clear>Clear</button> |
| |
| <h2>Events</h2> |
| <pre id=events></pre> |
| <table> |
| <tr><th>paramset-key-click </th><td><pre id=key> </pre></td></tr> |
| <tr><th>paramset-key-value-click</th><td><pre id=value></td></pre></tr> |
| </table> |
| <script type="text/javascript" charset="utf-8"> |
| const paramset = { |
| "arch": ["Arm7", "Arm64", "x86_64", "x86"], |
| "bench_type": ["micro", "playback", "recording"], |
| "compiler": ["GCC", "MSVC", "Clang"], |
| "cpu_or_gpu": ["GPU", "CPU"], |
| }; |
| |
| const paramset2 = { |
| "arch": ["Arm7", ], |
| "bench_type": ["playback", "recording"], |
| "compiler": [], |
| "cpu_or_gpu": ["GPU"], |
| }; |
| |
| const set1 = document.querySelector('#set1'); |
| const set2 = document.querySelector('#set2'); |
| const set3 = document.querySelector('#set3'); |
| |
| const key = document.querySelector('#key'); |
| const value = document.querySelector('#value'); |
| |
| set1.paramsets = {paramsets: [paramset]}; |
| set2.paramsets = {paramsets: [paramset, paramset2], titles: ["Set 1", "Set 2"]}; |
| set3.paramsets = {paramsets: [paramset], titles: ["Clickable Values Only"]}; |
| |
| set2.addEventListener('paramset-key-click', function(e) { |
| key.textContent = JSON.stringify(e.detail, null, ' '); |
| }); |
| |
| set2.addEventListener('paramset-key-value-click', function(e) { |
| value.textContent = JSON.stringify(e.detail, null, ' '); |
| }); |
| |
| set3.addEventListener('paramset-key-value-click', function(e) { |
| value.textContent = JSON.stringify(e.detail, null, ' '); |
| }); |
| |
| document.querySelector('#highlight').addEventListener('click', function() { |
| set1.highlight = {"arch": "Arm7", "cpu_or_gpu": "GPU"}; |
| set2.highlight = {"arch": "Arm7", "cpu_or_gpu": "GPU"}; |
| set3.highlight = {"arch": "Arm7", "cpu_or_gpu": "GPU"}; |
| }); |
| |
| document.querySelector('#clear').addEventListener('click', function() { |
| set1.highlight = {}; |
| set2.highlight = {}; |
| set3.highlight = {}; |
| }); |
| </script> |
| </body> |
| </html> |
