| Akron | 479994e | 2018-07-02 13:21:44 +0200 | [diff] [blame] | 1 | <!DOCTYPE html> |
| 2 | <html> |
| 3 | <head> |
| 4 | <title>Plugin demo</title> |
| Akron | e8e2c95 | 2018-07-04 13:43:12 +0200 | [diff] [blame] | 5 | |
| Akron | 479994e | 2018-07-02 13:21:44 +0200 | [diff] [blame] | 6 | <link type="text/css" rel="stylesheet" href="/css/kalamar.css" /> |
| 7 | |
| 8 | <!-- load client javascript library --> |
| Akron | a6c32b9 | 2018-07-02 18:39:42 +0200 | [diff] [blame] | 9 | <script src="/js/src/plugin/client.js" data-server="http://localhost:3003/"></script> |
| 10 | <style> |
| 11 | body, html { |
| Akron | e8e2c95 | 2018-07-04 13:43:12 +0200 | [diff] [blame] | 12 | padding: 0; |
| 13 | margin: 0; |
| 14 | box-sizing: border-box; |
| 15 | border-width: 0; |
| 16 | height: unset !important; |
| 17 | } |
| 18 | |
| 19 | body { |
| 20 | min-height: unset !important; |
| Akron | a6c32b9 | 2018-07-02 18:39:42 +0200 | [diff] [blame] | 21 | } |
| 22 | </style> |
| Akron | 479994e | 2018-07-02 13:21:44 +0200 | [diff] [blame] | 23 | </head> |
| Akron | a6c32b9 | 2018-07-02 18:39:42 +0200 | [diff] [blame] | 24 | <body style="background-color: yellow"> |
| Akron | 479994e | 2018-07-02 13:21:44 +0200 | [diff] [blame] | 25 | <h2>Example Widget!</h2> |
| Akron | a99315e | 2018-07-03 22:56:45 +0200 | [diff] [blame] | 26 | <script> |
| 27 | function flood () { |
| 28 | var i = 0; |
| 29 | for (; i < 90; i++) { |
| Akron | c300364 | 2020-03-30 10:19:14 +0200 | [diff] [blame] | 30 | KorAPlugin.sendMsg({ |
| Akron | a99315e | 2018-07-03 22:56:45 +0200 | [diff] [blame] | 31 | 'action' : '-' |
| 32 | }); |
| 33 | }; |
| 34 | }; |
| Akron | 22598cd | 2019-12-09 14:59:03 +0100 | [diff] [blame] | 35 | |
| 36 | function pluginit (p) { |
| 37 | p.onMessage = function(msg) { |
| Akron | 51ee623 | 2019-12-17 21:00:05 +0100 | [diff] [blame] | 38 | switch (msg.key) { |
| 39 | // console.log("State changed to", msg.key, msg.value); |
| 40 | case 'glemm': |
| 41 | let data = { |
| 42 | 'action' : 'pipe', |
| 43 | 'service' : 'http://glemm/' |
| 44 | }; |
| 45 | |
| 46 | if (!msg.value) { |
| 47 | data['job'] = 'del'; |
| 48 | }; |
| 49 | KorAPlugin.sendMsg(data); |
| 50 | break; |
| 51 | } |
| Akron | 22598cd | 2019-12-09 14:59:03 +0100 | [diff] [blame] | 52 | }; |
| 53 | }; |
| 54 | </script> |
| Akron | a6c32b9 | 2018-07-02 18:39:42 +0200 | [diff] [blame] | 55 | <ul> |
| 56 | <li><a onclick="KorAPlugin.log(333, 'Huhu!')">Send log!</a></li> |
| 57 | <li><a onclick="KorAPlugin.resize()">Resize</a></li> |
| Akron | 51ee623 | 2019-12-17 21:00:05 +0100 | [diff] [blame] | 58 | <li><a onclick="KorAPlugin.sendMsg({'action':'pipe','service':'Glemm'})">Add Glemm</a></li> |
| Akron | a99315e | 2018-07-03 22:56:45 +0200 | [diff] [blame] | 59 | <li><a onclick="flood()">Flood!</a></li> |
| Akron | c300364 | 2020-03-30 10:19:14 +0200 | [diff] [blame] | 60 | <li><a onclick="KorAPlugin.requestMsg({'action':'get', 'key':'KQ'}, function (d) { document.write(JSON.stringify(d.value))})">Get KQ</a></li> |
| Akron | a6c32b9 | 2018-07-02 18:39:42 +0200 | [diff] [blame] | 61 | </ul> |
| Akron | 8d646d7 | 2018-07-08 13:45:53 +0200 | [diff] [blame] | 62 | <p style="width: 2000px">------------------------------------------------------------------------------------------------------------------------</p> |
| Akron | 479994e | 2018-07-02 13:21:44 +0200 | [diff] [blame] | 63 | </body> |
| 64 | </html> |