├── .gitignore ├── CONTRIBUTING.md ├── LICENSE.txt ├── README.md ├── bower.json ├── demo.html ├── elements └── paper-gui.html ├── gulpfile.js ├── package.json ├── src ├── AbstractPaperGUIController.js ├── ButtonPaperGUIController.js ├── InputPaperGUIController.js ├── PaperGUI.js ├── SelectPaperGUIController.js ├── SliderPaperGUIController.js ├── TextPaperGUIController.js ├── TogglePaperGUIController.js └── loader.js └── test ├── ButtonPaperGUIController.html ├── InputPaperGUIController.html ├── SelectPaperGUIController.html ├── SliderPaperGUIController.html ├── TogglePaperGUIController.html ├── index.html ├── loader.html └── paper-gui.html /.gitignore: -------------------------------------------------------------------------------- 1 | # dependencies 2 | bower_components 3 | node_modules 4 | 5 | # production 6 | build 7 | dist 8 | # misc 9 | .DS_Store 10 | .env 11 | npm-debug.log 12 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | Want to contribute? Great! First, read this page (including the small print at the end). 2 | 3 | ### Before you contribute 4 | Before we can use your code, you must sign the 5 | [Google Individual Contributor License Agreement] 6 | (https://cla.developers.google.com/about/google-individual) 7 | (CLA), which you can do online. The CLA is necessary mainly because you own the 8 | copyright to your changes, even after your contribution becomes part of our 9 | codebase, so we need your permission to use and distribute your code. We also 10 | need to be sure of various other things—for instance that you'll tell us if you 11 | know that your code infringes on other people's patents. You don't have to sign 12 | the CLA until after you've submitted your code for review and a member has 13 | approved it, but you must do it before we can put your code into our codebase. 14 | Before you start working on a larger contribution, you should get in touch with 15 | us first through the issue tracker with your idea so that we can help out and 16 | possibly guide you. Coordinating up front makes it much easier to avoid 17 | frustration later on. 18 | 19 | ### Code reviews 20 | All submissions, including submissions by project members, require review. We 21 | use Github pull requests for this purpose. 22 | 23 | ### The small print 24 | Contributions made by corporations are covered by a different agreement than 25 | the one above, the 26 | [Software Grant and Corporate Contributor License Agreement] 27 | (https://cla.developers.google.com/about/google-corporate). 28 | -------------------------------------------------------------------------------- /LICENSE.txt: -------------------------------------------------------------------------------- 1 | 2 | Apache License 3 | Version 2.0, January 2004 4 | http://www.apache.org/licenses/ 5 | 6 | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 7 | 8 | 1. Definitions. 9 | 10 | "License" shall mean the terms and conditions for use, reproduction, 11 | and distribution as defined by Sections 1 through 9 of this document. 12 | 13 | "Licensor" shall mean the copyright owner or entity authorized by 14 | the copyright owner that is granting the License. 15 | 16 | "Legal Entity" shall mean the union of the acting entity and all 17 | other entities that control, are controlled by, or are under common 18 | control with that entity. For the purposes of this definition, 19 | "control" means (i) the power, direct or indirect, to cause the 20 | direction or management of such entity, whether by contract or 21 | otherwise, or (ii) ownership of fifty percent (50%) or more of the 22 | outstanding shares, or (iii) beneficial ownership of such entity. 23 | 24 | "You" (or "Your") shall mean an individual or Legal Entity 25 | exercising permissions granted by this License. 26 | 27 | "Source" form shall mean the preferred form for making modifications, 28 | including but not limited to software source code, documentation 29 | source, and configuration files. 30 | 31 | "Object" form shall mean any form resulting from mechanical 32 | transformation or translation of a Source form, including but 33 | not limited to compiled object code, generated documentation, 34 | and conversions to other media types. 35 | 36 | "Work" shall mean the work of authorship, whether in Source or 37 | Object form, made available under the License, as indicated by a 38 | copyright notice that is included in or attached to the work 39 | (an example is provided in the Appendix below). 40 | 41 | "Derivative Works" shall mean any work, whether in Source or Object 42 | form, that is based on (or derived from) the Work and for which the 43 | editorial revisions, annotations, elaborations, or other modifications 44 | represent, as a whole, an original work of authorship. For the purposes 45 | of this License, Derivative Works shall not include works that remain 46 | separable from, or merely link (or bind by name) to the interfaces of, 47 | the Work and Derivative Works thereof. 48 | 49 | "Contribution" shall mean any work of authorship, including 50 | the original version of the Work and any modifications or additions 51 | to that Work or Derivative Works thereof, that is intentionally 52 | submitted to Licensor for inclusion in the Work by the copyright owner 53 | or by an individual or Legal Entity authorized to submit on behalf of 54 | the copyright owner. For the purposes of this definition, "submitted" 55 | means any form of electronic, verbal, or written communication sent 56 | to the Licensor or its representatives, including but not limited to 57 | communication on electronic mailing lists, source code control systems, 58 | and issue tracking systems that are managed by, or on behalf of, the 59 | Licensor for the purpose of discussing and improving the Work, but 60 | excluding communication that is conspicuously marked or otherwise 61 | designated in writing by the copyright owner as "Not a Contribution." 62 | 63 | "Contributor" shall mean Licensor and any individual or Legal Entity 64 | on behalf of whom a Contribution has been received by Licensor and 65 | subsequently incorporated within the Work. 66 | 67 | 2. Grant of Copyright License. Subject to the terms and conditions of 68 | this License, each Contributor hereby grants to You a perpetual, 69 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 70 | copyright license to reproduce, prepare Derivative Works of, 71 | publicly display, publicly perform, sublicense, and distribute the 72 | Work and such Derivative Works in Source or Object form. 73 | 74 | 3. Grant of Patent License. Subject to the terms and conditions of 75 | this License, each Contributor hereby grants to You a perpetual, 76 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 77 | (except as stated in this section) patent license to make, have made, 78 | use, offer to sell, sell, import, and otherwise transfer the Work, 79 | where such license applies only to those patent claims licensable 80 | by such Contributor that are necessarily infringed by their 81 | Contribution(s) alone or by combination of their Contribution(s) 82 | with the Work to which such Contribution(s) was submitted. If You 83 | institute patent litigation against any entity (including a 84 | cross-claim or counterclaim in a lawsuit) alleging that the Work 85 | or a Contribution incorporated within the Work constitutes direct 86 | or contributory patent infringement, then any patent licenses 87 | granted to You under this License for that Work shall terminate 88 | as of the date such litigation is filed. 89 | 90 | 4. Redistribution. You may reproduce and distribute copies of the 91 | Work or Derivative Works thereof in any medium, with or without 92 | modifications, and in Source or Object form, provided that You 93 | meet the following conditions: 94 | 95 | (a) You must give any other recipients of the Work or 96 | Derivative Works a copy of this License; and 97 | 98 | (b) You must cause any modified files to carry prominent notices 99 | stating that You changed the files; and 100 | 101 | (c) You must retain, in the Source form of any Derivative Works 102 | that You distribute, all copyright, patent, trademark, and 103 | attribution notices from the Source form of the Work, 104 | excluding those notices that do not pertain to any part of 105 | the Derivative Works; and 106 | 107 | (d) If the Work includes a "NOTICE" text file as part of its 108 | distribution, then any Derivative Works that You distribute must 109 | include a readable copy of the attribution notices contained 110 | within such NOTICE file, excluding those notices that do not 111 | pertain to any part of the Derivative Works, in at least one 112 | of the following places: within a NOTICE text file distributed 113 | as part of the Derivative Works; within the Source form or 114 | documentation, if provided along with the Derivative Works; or, 115 | within a display generated by the Derivative Works, if and 116 | wherever such third-party notices normally appear. The contents 117 | of the NOTICE file are for informational purposes only and 118 | do not modify the License. You may add Your own attribution 119 | notices within Derivative Works that You distribute, alongside 120 | or as an addendum to the NOTICE text from the Work, provided 121 | that such additional attribution notices cannot be construed 122 | as modifying the License. 123 | 124 | You may add Your own copyright statement to Your modifications and 125 | may provide additional or different license terms and conditions 126 | for use, reproduction, or distribution of Your modifications, or 127 | for any such Derivative Works as a whole, provided Your use, 128 | reproduction, and distribution of the Work otherwise complies with 129 | the conditions stated in this License. 130 | 131 | 5. Submission of Contributions. Unless You explicitly state otherwise, 132 | any Contribution intentionally submitted for inclusion in the Work 133 | by You to the Licensor shall be under the terms and conditions of 134 | this License, without any additional terms or conditions. 135 | Notwithstanding the above, nothing herein shall supersede or modify 136 | the terms of any separate license agreement you may have executed 137 | with Licensor regarding such Contributions. 138 | 139 | 6. Trademarks. This License does not grant permission to use the trade 140 | names, trademarks, service marks, or product names of the Licensor, 141 | except as required for reasonable and customary use in describing the 142 | origin of the Work and reproducing the content of the NOTICE file. 143 | 144 | 7. Disclaimer of Warranty. Unless required by applicable law or 145 | agreed to in writing, Licensor provides the Work (and each 146 | Contributor provides its Contributions) on an "AS IS" BASIS, 147 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or 148 | implied, including, without limitation, any warranties or conditions 149 | of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A 150 | PARTICULAR PURPOSE. You are solely responsible for determining the 151 | appropriateness of using or redistributing the Work and assume any 152 | risks associated with Your exercise of permissions under this License. 153 | 154 | 8. Limitation of Liability. In no event and under no legal theory, 155 | whether in tort (including negligence), contract, or otherwise, 156 | unless required by applicable law (such as deliberate and grossly 157 | negligent acts) or agreed to in writing, shall any Contributor be 158 | liable to You for damages, including any direct, indirect, special, 159 | incidental, or consequential damages of any character arising as a 160 | result of this License or out of the use or inability to use the 161 | Work (including but not limited to damages for loss of goodwill, 162 | work stoppage, computer failure or malfunction, or any and all 163 | other commercial damages or losses), even if such Contributor 164 | has been advised of the possibility of such damages. 165 | 166 | 9. Accepting Warranty or Additional Liability. While redistributing 167 | the Work or Derivative Works thereof, You may choose to offer, 168 | and charge a fee for, acceptance of support, warranty, indemnity, 169 | or other liability obligations and/or rights consistent with this 170 | License. However, in accepting such obligations, You may act only 171 | on Your own behalf and on Your sole responsibility, not on behalf 172 | of any other Contributor, and only if You agree to indemnify, 173 | defend, and hold each Contributor harmless for any liability 174 | incurred by, or claims asserted against, such Contributor by reason 175 | of your accepting any such warranty or additional liability. 176 | 177 | END OF TERMS AND CONDITIONS 178 | 179 | APPENDIX: How to apply the Apache License to your work. 180 | 181 | To apply the Apache License to your work, attach the following 182 | boilerplate notice, with the fields enclosed by brackets "[]" 183 | replaced with your own identifying information. (Don't include 184 | the brackets!) The text should be enclosed in the appropriate 185 | comment syntax for the file format. We also recommend that a 186 | file or class name and description of purpose be included on the 187 | same "printed page" as the copyright notice for easier 188 | identification within third-party archives. 189 | 190 | Copyright [yyyy] [name of copyright owner] 191 | 192 | Licensed under the Apache License, Version 2.0 (the "License"); 193 | you may not use this file except in compliance with the License. 194 | You may obtain a copy of the License at 195 | 196 | http://www.apache.org/licenses/LICENSE-2.0 197 | 198 | Unless required by applicable law or agreed to in writing, software 199 | distributed under the License is distributed on an "AS IS" BASIS, 200 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 201 | See the License for the specific language governing permissions and 202 | limitations under the License. 203 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # PaperGUI 2 | 3 | 4 | A clone of [dat.GUI](https://github.com/dataarts/dat.gui) using nice 5 | [Polymer (1.0)](https://www.polymer-project.org/1.0/docs/) paper elements. One of the advantages is that this makes it touch and mobile friendly. The API is intentionally similar, although not all features have been ported to PaperGUI. 6 | 7 | 8 | ## Install 9 | 10 | 11 | Building requires node, gulp and bower. 12 | ``` 13 | npm install gulp bower 14 | npm install 15 | npm run-script build 16 | ``` 17 | The `dist` folder contains the build. The `paper-gui.html` file is the only one 18 | you need if you want to use web component-style, synchronous import. 19 | Otherwise, you'll need all 3 files in the `dist` folder as `paperGUI.js` loads 20 | the other two. 21 | 22 | 23 | To try out the demo, run a webserver in the papergui root folder, eg: 24 | ```python 25 | python -m SimpleHTTPServer 8000 26 | ``` 27 | Then open http://localhost:8000/demo.html in a browser. 28 | 29 | 30 | ## Usage 31 | 32 | 33 | ### Basic usage 34 | 35 | 36 | With very little code, PaperGUI creates an interface that you can use to modify variables, exactly like [dat.GUI](https://workshop.chromeexperiments.com/examples/gui/#1--Basic-Usage) from which the below example is adapted. 37 | ```html 38 | 58 | 59 | 60 | 61 | ``` 62 | 63 | - The property must be public, i.e. defined by `this.prop = value` 64 | - PaperGUI determines controller type based on a property's initial value 65 | - Press H to show/hide all GUI's. 66 | 67 | ##### Importing PaperGUI as a web component 68 | 69 | As shown above, the `paperGUI.js` script loads a polyfill and then imports the web components necessary for the PaperGUI library to work. Once it's all set, it triggers a `PaperGUIReady` event. This allows to delay the loading of PaperGUI as much as possible. 70 | 71 | Alternatively, you can skip the loader script call and use a (blocking) import directly. Add this at the top of your HTML: 72 | 73 | ```html 74 | 75 | ``` 76 | 77 | Note that in this case no `PaperGUIReady` event will be triggered, and the import will only work on web component-ready browsers as this bypasses support detection and polyfill loading. 78 | 79 | ### Constrain 80 | 81 | 82 | You can specify limits on numbers. A number with a min and max value becomes a slider. This is exactly the [same API as dat.GUI](https://workshop.chromeexperiments.com/examples/gui/#2--Constraining-Input). 83 | 84 | 85 | ```javascript 86 | gui.add(text, 'noiseStrength').step(5); // Increment amount 87 | gui.add(text, 'growthSpeed', -5, 5); // Min and max 88 | gui.add(text, 'maxSize').min(0).step(0.25); // Mix and match 89 | ``` 90 | You can also choose to select from a dropdown of values for both numbers and strings. 91 | ```javascript 92 | // Choose from accepted values 93 | gui.add(text, 'message', [ 'pizza', 'chrome', 'hooray' ] ); 94 | 95 | 96 | // Choose from named values 97 | gui.add(text, 'speed', { Stopped: 0, Slow: 0.1, Fast: 5 } ); 98 | ``` 99 | 100 | 101 | ### Events 102 | 103 | 104 | You can listen for events on individual controllers using an event listener syntax. 105 | 106 | 107 | ```javascript 108 | var controller = gui.add(fizzyText, 'maxSize', 0, 10); 109 | 110 | 111 | controller.onChange(function(value) { 112 | // Fires on every change, drag, keypress, etc. 113 | }); 114 | ``` 115 | 116 | 117 | Note: the `onFinishChange` handler [from dat.GUI](https://workshop.chromeexperiments.com/examples/gui/#7--Events) is currently not supported. 118 | 119 | 120 | ## Styling & positioning 121 | 122 | 123 | PaperGUI exposes custom CSS properties and mixins (see [Polymer documentation](https://www.polymer-project.org/1.0/docs/devguide/styling#custom-css-properties)) through which you can change the colors and style of the UI. 124 | 125 | 126 | ### Custom properties 127 | 128 | 129 | Properties below can be used to modify the default colors of the PaperGUI interface and components: 130 | 131 | 132 | | Custom Property | Description | 133 | | ----------------------------------- |------------------------------------------------------------------------------| 134 | | `--paper-gui-accent-color` | Accent used in the floating action button, toggle buttons, sliders, etc. | 135 | | `--paper-gui-accent-contrast-color` | Applied to fonts and icons where the background uses accent color (buttons) | 136 | | `--paper-gui-background-color` | Background color of the main dialog | 137 | | `--paper-gui-text-color` | Main color for text inputs, labels, dropdown values, etc. | 138 | | `--paper-gui-ui-color` | Used in components (borders, sliders, input placeholders, etc.) | 139 | | `--paper-gui-ui-secondary-color` | Lighter shade of the above color, used in scrollbars and dividers | 140 | 141 | 142 | ##### Example 143 | 144 | 145 | In your main html file, declare the following [custom-style](https://www.polymer-project.org/1.0/docs/devguide/styling#custom-css-properties) to override default colors: 146 | 147 | 148 | ```html 149 | 158 | ``` 159 | 160 | 161 | ### Mixins 162 | If you need to further customize the edit button or the dialog, ie change their positioning or size, you can use dedicated custom mixins. 163 | 164 | 165 | | Custom Mixin | Description | 166 | | ----------------------------------- |----------------------------------------------------------------------------------------------------| 167 | | `--paper-gui-edit-button` | Use this to customize the edit button | 168 | | `--paper-gui-dialog` | Use this to override the size and positioning of the dialog (eg to place it in a different corner) | 169 | 170 | 171 | ##### Example 172 | In your main html file: 173 | 174 | 175 | ```html 176 | 193 | ``` 194 | 195 | 196 | ## Reference 197 | 198 | 199 | ### PaperGUI constructor parameters 200 | 201 | The PaperGUI constructor can accept an object containing various options (eg. `var gui = new PaperGUI({autoPlace: false});`) 202 | 203 | | Property name | Type | Description | 204 | |---------------|---------|-------------| 205 | | `autoPlace` | Boolean | Whether to automatically append the PaperGUI element to the DOM as soon as at least one controller has been added. Default is **true**. | 206 | 207 | 208 | ### PaperGUI methods 209 | 210 | PaperGUI has several methods. 211 | 212 | | Method name | Description | 213 | |-------------|-------------| 214 | | `add()` | Creates and returns a new UI controller (controller type varies depending on the arguments, see next section). | 215 | | `el()` | Returns the main Element for this PaperGUI (ie a `paper-gui` component). Useful for attaching it to the DOM manually when `autoPlace` is disabled. | 216 | | `open()` | Opens the dialog containing the controllers. Equivalent to clicking the edit button. | 217 | | `close()` | Closes the dialog containing the controllers. Equivalent to clicking the close button in the dialog. | 218 | | `hide()` | Hides all PaperGUI elements (edit button, dialog with controllers). Equivalent to pressing the 'H' key. | 219 | | `show()` | Shows all previously hidden PaperGUI elements. | 220 | 221 | 222 | 223 | ### Controller types 224 | 225 | Here's a summary of the controller types PaperGUI currently supports: 226 | 227 | 228 | | PaperGUI Controller type | Property type | Extra parameters | 229 | |--------------------------|---------------|------------------| 230 | | Button | Function | *N/A* | 231 | | Toggle | Boolean | *N/A* | 232 | | Text input | String | *N/A* | 233 | | Select box | String | **[String value]** An array of accepted values for the property, required to create a select box instead of a text input)| 234 | | Slider | Number | **Number minValue** (optional, default 0), **Number maxValue** (optional, default 100) | 235 | | Select box | Number | **{String label: Number value}** An object whose property names will be used as labels and corresponding values will be set on the property when selected. Required to create a select box instead of a slider.| 236 | 237 | 238 | ### Controller methods 239 | 240 | 241 | All controller methods return themselves, allowing to chain method calls. Here is a list of methods. 242 | 243 | 244 | | Method | Description | Controller types | 245 | |------------------------------|----------------------------------------------------------|-------------------| 246 | | `name(labelString)` | Defines the label or placeholder text for the controller | All | 247 | | `onChange(callbackFunction)` | Calls the function when the value changes | All except Button | 248 | | `min(minNumber)` | Sets the minimum authorized value | Slider | 249 | | `max(minNumber)` | Sets the maximum authorized value | Slider | 250 | | `step(stepNumber)` | Sets the step size | Slider | 251 | 252 | 253 | ## TODO 254 | 255 | 256 | - Add live demos 257 | - Add folders/tabs structure capability and other features from the original dat.GUI 258 | 259 | 260 | ## Known issues 261 | 262 | 263 | - Select box change callback fires on controller creation (intended?) 264 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "paper-gui", 3 | "version": "0.0.2", 4 | "ignore": [ 5 | "**/.*", 6 | "node_modules", 7 | "bower_components", 8 | "test", 9 | "tests" 10 | ], 11 | "dependencies": { 12 | "iron-elements": "PolymerElements/iron-elements#^1.0.0", 13 | "neon-animation": "PolymerElements/neon-animation#^1.0.0", 14 | "paper-elements": "PolymerElements/paper-elements#^1.0.0" 15 | }, 16 | "devDependencies": { 17 | "web-component-tester": "*" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /demo.html: -------------------------------------------------------------------------------- 1 | 15 | 16 | 17 | 18 | 19 | paperGUI demo 20 | 21 | 22 |

paperGUI demo

23 |

24 | 25 | 59 | 60 | 
 61 |     // Build a basic demo. All config variables are placed in a JS Object.
 62 |     var myDemo = {};
 63 |     myDemo.sayHello = function() {
 64 |       var message = '';
 65 |       for (var i = 0; i < myDemo.times; i++) {
 66 |         message += (myDemo.toggle ? 'hello ' : 'good bye ') + myDemo.message + '<br>';
 67 |       }
 68 |       document.getElementById('demo').innerHTML = message;
 69 |     }
 70 |     myDemo.toggle = true;
 71 |     myDemo.message = 'world';
 72 |     myDemo.times = 1;
 73 |     myDemo.sayHello();
 74 | 
 75 |     
 76 |     // Now let's create a fancy paper GUI!
 77 |     document.addEventListener('PaperGUIReady', function(e) {
 78 |       // Polymer elements are loaded asynchronously, we wait for them to be ready before creating the GUI.
 79 |       var myGUI = new PaperGUI();
 80 |       myGUI.add(myDemo, 'toggle').name('Hello').onChange(myDemo.sayHello);
 81 |       myGUI.add(myDemo, 'message').name('Who are you?');
 82 |       myGUI.add(myDemo, 'sayHello').name('Update text');
 83 |       myGUI.add(myDemo, 'times').max(10).min(1).step(0.01).onChange(myDemo.sayHello);
 84 |       myGUI.add(myDemo, 'nothing', -5, 5).name('Another one that does nothing');
 85 |       myGUI.add(myDemo, 'message', ['earth', 'world', 'moon', 'system']).name('Yay, menus!')
 86 |           .onChange(function(val) {
 87 |             console.log(val);
 88 |             myDemo.sayHello();
 89 |           });
 90 |       myGUI.add(myDemo, 'times', {'Once':1, 'Twice':2, '10X':10})
 91 |           .name('Yay, menus with labels!').onChange(myDemo.sayHello);
 92 |     });
 93 |     
 94 |
95 | 96 |

Then, at the end of the HTML file, start loading paperGUI:

97 | 
  <script src="dist/paperGUI.js"></script>
 98 |

This asynchronously loads the webcomponent polyfill then the paperGUI library and elements.

99 | 100 |

Alternatively, you can use a (blocking) webcomponent import instead of this loader.

101 | 
  <link rel="import" href="dist/paper-gui.html">
 102 |

Note that the PaperGUIReady event won't be triggered and the import will only work on webcomponent-ready browsers as this bypasses support detection and polyfill loading.

103 | 104 | 105 | 106 | 107 | -------------------------------------------------------------------------------- /elements/paper-gui.html: -------------------------------------------------------------------------------- 1 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 174 | 175 | 196 | 197 | 198 | 199 | 231 | 232 | 233 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * Copyright 2016 Google Inc. All rights reserved. 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express 13 | * or implied. See the License for the specific language governing 14 | * permissions and limitations under the License. 15 | */ 16 | 'use strict'; 17 | 18 | var gulp = require('gulp'); 19 | var $ = require('gulp-load-plugins')(); 20 | 21 | var runSequence = require('run-sequence'); 22 | var del = require('del'); 23 | 24 | var browserify = require('browserify'); 25 | var source = require('vinyl-source-stream'); 26 | var babelify = require('babelify'); 27 | 28 | var debug = false; 29 | 30 | 31 | /** Clean up */ 32 | gulp.task('clean', function(done) { 33 | return del(['dist', 'build']); 34 | }); 35 | 36 | 37 | /** EM5-compile, bundle and minify the js */ 38 | function buildBundle(file) { 39 | return browserify({ 40 | entries: [file], 41 | debug: debug 42 | }) 43 | .transform(babelify, {presets: ['es2015']}) // es6 -> e5 44 | .bundle(); 45 | } 46 | 47 | 48 | /** Build the main PaperGUI js */ 49 | gulp.task('jslibrary', function() { 50 | return buildBundle('src/PaperGUI.js') 51 | .pipe(source('lib.js')) 52 | .pipe($.streamify($.uglify({ 53 | mangle: !debug 54 | }))) 55 | .pipe(gulp.dest('build')); 56 | }); 57 | 58 | 59 | /** Build the loader script */ 60 | gulp.task('jsloader', function() { 61 | return gulp 62 | .src('src/loader.js') 63 | .pipe($.rename('paperGUI.js')) 64 | .pipe($.uglify({ 65 | mangle: !debug, 66 | output: {comments: /^!|@preserve|@license|@cc_on/i} 67 | })) 68 | .pipe(gulp.dest('dist')); 69 | }); 70 | 71 | 72 | /** Copy the webcomponents polyfill to the dist folder */ 73 | gulp.task('copyWc', function () { 74 | return gulp 75 | .src('bower_components/webcomponentsjs/webcomponents-lite.min.js') 76 | .pipe(gulp.dest('dist')); 77 | }) 78 | 79 | 80 | /** Vulcanize */ 81 | gulp.task('vulcanize', function() { 82 | return gulp.src('./elements/paper-gui.html') 83 | .pipe($.vulcanize({ 84 | inlineCss: true, 85 | inlineScripts: true, 86 | stripComments: true, 87 | stripExcludes: ['iron-icons/iron-icons.html'] 88 | })) 89 | .pipe($.htmlmin({ 90 | collapseWhitespace: true, 91 | minifyCSS: true, 92 | minifyJS: true 93 | })) 94 | .pipe(gulp.dest('dist')); 95 | }); 96 | 97 | 98 | gulp.task('default', function () { 99 | return runSequence('clean', 'copyWc', 'jslibrary', 'vulcanize', 'jsloader'); 100 | }); 101 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "papergui", 3 | "version": "0.2.0", 4 | "license": "Apache-2.0", 5 | "description": "A clone of dat.GUI using Polymer: similar API but with Material Design UI and touch/mobile friendly.", 6 | "repository": { 7 | "type": "git", 8 | "url": "https://github.com/google/paper-gui.git" 9 | }, 10 | "keywords": ["gui", "prototyping", "polymer", "dat.gui"], 11 | "scripts": { 12 | "postinstall": "bower install", 13 | "build": "node node_modules/gulp/bin/gulp.js" 14 | }, 15 | "author": "Google", 16 | "dependencies": { 17 | "babel": "^5.8.12" 18 | }, 19 | "devDependencies": { 20 | "babel-preset-es2015": "^6.1.18", 21 | "babelify": "^7.2.0", 22 | "bower": "^1.4.1", 23 | "browserify": "^12.0.1", 24 | "del": "^2.1.0", 25 | "gulp": "^3.9.0", 26 | "gulp-babel": "^5.1.0", 27 | "gulp-load-plugins": "^1.1.0", 28 | "gulp-htmlmin": "^2.0.0", 29 | "gulp-rename": "^1.2.2", 30 | "gulp-streamify": "^1.0.2", 31 | "gulp-uglify": "^1.5.1", 32 | "gulp-vulcanize": "^6.1.0", 33 | "run-sequence": "^1.1.5", 34 | "vinyl-source-stream": "^1.1.0" 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /src/AbstractPaperGUIController.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * Copyright 2016 Google Inc. All rights reserved. 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express 13 | * or implied. See the License for the specific language governing 14 | * permissions and limitations under the License. 15 | */ 16 | export default class AbstractPaperGUIController { 17 | constructor(object, propertyName, opt_args) { 18 | if (this.constructor === AbstractPaperGUIController) { 19 | throw new TypeError('Abstract class "AbstractPaperGUIController" cannot be instantiated directly.'); 20 | } 21 | this.createElement_(object, propertyName, opt_args); 22 | this.name(propertyName); 23 | this.changeCallback_ = new Function(); 24 | } 25 | 26 | getElement() { 27 | return this.el_; 28 | } 29 | 30 | createElement_(object, propertyName, opt_args) { 31 | throw new Error('Abstract method createElement_ not implemented!'); 32 | } 33 | 34 | name() { 35 | throw new Error('Abstract method name not implemented!'); 36 | } 37 | 38 | onChange(callback) { 39 | this.changeCallback_ = callback; 40 | return this; 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /src/ButtonPaperGUIController.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * Copyright 2016 Google Inc. All rights reserved. 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express 13 | * or implied. See the License for the specific language governing 14 | * permissions and limitations under the License. 15 | */ 16 | import AbstractPaperGUIController from './AbstractPaperGUIController'; 17 | 18 | export default class ButtonPaperGUIController extends AbstractPaperGUIController { 19 | constructor(object, propertyName) { 20 | if (typeof object[propertyName] !== 'function') { 21 | throw new TypeError('Invalid property type, expecting a function.'); 22 | } 23 | super(object, propertyName); 24 | } 25 | 26 | createElement_(object, propertyName) { 27 | if (this.el_) { 28 | return; 29 | } 30 | this.el_ = document.createElement('paper-button'); 31 | this.el_.raised = true; 32 | this.el_.addEventListener('click', object[propertyName]); 33 | } 34 | 35 | name(label) { 36 | if (this.el_) { 37 | Polymer.dom(this.el_).innerHTML = label; 38 | } 39 | return this; 40 | } 41 | 42 | onChange() { 43 | throw new Error('onChange is not available for a Function-type property'); 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /src/InputPaperGUIController.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * Copyright 2016 Google Inc. All rights reserved. 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express 13 | * or implied. See the License for the specific language governing 14 | * permissions and limitations under the License. 15 | */ 16 | import AbstractPaperGUIController from './AbstractPaperGUIController'; 17 | 18 | export default class InputPaperGUIController extends AbstractPaperGUIController { 19 | constructor(object, propertyName) { 20 | if (typeof object[propertyName] !== 'string') { 21 | throw new TypeError('Invalid property type, expecting a string.'); 22 | } 23 | super(object, propertyName); 24 | } 25 | 26 | createElement_(object, propertyName) { 27 | if (this.el_) { 28 | return; 29 | } 30 | this.el_ = document.createElement('paper-input'); 31 | this.el_.value = object[propertyName]; 32 | this.el_.label = propertyName; 33 | this.el_.addEventListener('change', evt => { 34 | object[propertyName] = evt.target.value; 35 | this.changeCallback_(evt.target.value); 36 | }); 37 | } 38 | 39 | name(label) { 40 | if (this.el_) { 41 | this.el_.label = label; 42 | } 43 | return this; 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /src/PaperGUI.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * Copyright 2016 Google Inc. All rights reserved. 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express 13 | * or implied. See the License for the specific language governing 14 | * permissions and limitations under the License. 15 | */ 16 | import ButtonPaperGUIController from './ButtonPaperGUIController'; 17 | import InputPaperGUIController from './InputPaperGUIController'; 18 | import SelectPaperGUIController from './SelectPaperGUIController'; 19 | import SliderPaperGUIController from './SliderPaperGUIController'; 20 | import TogglePaperGUIController from './TogglePaperGUIController'; 21 | import TextPaperGUIController from './TextPaperGUIController'; 22 | 23 | export default class PaperGUI { 24 | constructor(options) { 25 | options = options || {}; 26 | this.rootEl_ = document.createElement('paper-gui'); 27 | this.controllers_ = []; 28 | this.autoPlace_ = 29 | options['autoPlace'] == undefined ? true : options['autoPlace']; 30 | // Use the 'h' key to toggle the gui completely. 31 | document.body.addEventListener('keydown', evt => { 32 | if (evt.target == document.body && (evt.which || evt.keyCode) == 72) { 33 | this.rootEl_.hidden = !this.rootEl_.hidden; 34 | } 35 | }); 36 | return this; 37 | } 38 | 39 | add(object, propName) { 40 | var args = []; 41 | for (var i = 0; i < arguments.length; i++) { 42 | args.push(arguments[i]); 43 | } 44 | let controller = this._controllerFactory(object, propName, args); 45 | this._append(controller.getElement()); 46 | if (!this.rootEl_.isAttached && this.autoPlace_) { 47 | document.body.appendChild(this.rootEl_); 48 | } 49 | this.controllers_.push(controller); 50 | return controller; 51 | } 52 | 53 | open() { 54 | this.rootEl_.open(); 55 | } 56 | 57 | close() { 58 | this.rootEl_.close(); 59 | } 60 | 61 | hide() { 62 | this.rootEl_.hidden = true; 63 | } 64 | 65 | show() { 66 | this.rootEl_.hidden = false; 67 | } 68 | 69 | el() { 70 | return this.rootEl_; 71 | } 72 | 73 | _controllerFactory(object, propName, args) { 74 | switch(typeof object[propName]) { 75 | case 'function': 76 | return new ButtonPaperGUIController(object, propName, args); 77 | case 'boolean': 78 | return new TogglePaperGUIController(object, propName, args); 79 | case 'string': 80 | if (typeof args[2] == 'object') { 81 | // A list of possible values are provided, create a selector. 82 | return new SelectPaperGUIController(object, propName, args); 83 | } 84 | return new InputPaperGUIController(object, propName, args); 85 | case 'number': 86 | if (typeof args[2] == 'object') { 87 | // A list of possible values are provided, create a selector. 88 | return new SelectPaperGUIController(object, propName, args); 89 | } 90 | return new SliderPaperGUIController(object, propName, args); 91 | default: 92 | throw new TypeError('Property type not supported yet'); 93 | break; 94 | } 95 | } 96 | 97 | _append(el) { 98 | this.rootEl_.appendController(el); 99 | } 100 | } 101 | 102 | // Make PaperGUI global to avoid obfuscation. 103 | window.PaperGUI = PaperGUI; 104 | -------------------------------------------------------------------------------- /src/SelectPaperGUIController.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * Copyright 2016 Google Inc. All rights reserved. 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express 13 | * or implied. See the License for the specific language governing 14 | * permissions and limitations under the License. 15 | */ 16 | import AbstractPaperGUIController from './AbstractPaperGUIController'; 17 | 18 | export default class SelectPaperGUIController 19 | extends AbstractPaperGUIController { 20 | constructor(object, propertyName, args) { 21 | // Supported arguments: valueList {Array|Object}. 22 | 23 | if (typeof object[propertyName] !== 'string' && 24 | typeof object[propertyName] !== 'number') { 25 | throw new TypeError('Invalid property type for property '+ propertyName 26 | + ', expecting a string or a number.'); 27 | } 28 | if (typeof args[2] !== 'object') { 29 | throw new TypeError('Invalid values list for property '+ propertyName 30 | +', expecting an object.'); 31 | } 32 | super(object, propertyName, args); 33 | } 34 | 35 | createElement_(object, propertyName, args) { 36 | if (this.el_) { 37 | return; 38 | } 39 | this.el_ = document.createElement('paper-dropdown-menu'); 40 | let listEl = document.createElement('paper-listbox'); 41 | listEl.classList.add('dropdown-content'); 42 | 43 | // Create the actual contents of the dropdown. 44 | var valuesList = args[2]; 45 | var values = []; 46 | var labels = []; 47 | for (let i in valuesList) { 48 | values.push(valuesList[i]); 49 | let itemEl = document.createElement('paper-item'); 50 | Polymer.dom(itemEl).value = valuesList[i]; 51 | Polymer.dom(itemEl).innerHTML = isFinite(i) ? valuesList[i] : i; 52 | Polymer.dom(listEl).appendChild(itemEl); 53 | } 54 | listEl.select(values.indexOf(object[propertyName])); 55 | Polymer.dom(this.el_).appendChild(listEl); 56 | this.el_.addEventListener('iron-select', evt => { 57 | var selectedValue = Polymer.dom(this.el_.selectedItem).value; 58 | object[propertyName] = selectedValue; 59 | this.changeCallback_(selectedValue); 60 | }); 61 | } 62 | 63 | name(label) { 64 | this.el_.label = label; 65 | return this; 66 | } 67 | } 68 | -------------------------------------------------------------------------------- /src/SliderPaperGUIController.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * Copyright 2016 Google Inc. All rights reserved. 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express 13 | * or implied. See the License for the specific language governing 14 | * permissions and limitations under the License. 15 | */ 16 | import AbstractPaperGUIController from './AbstractPaperGUIController'; 17 | 18 | export default class SliderPaperGUIController extends AbstractPaperGUIController { 19 | constructor(object, propertyName, opt_args) { 20 | // Supported optional arguments: minValue, maxValue. 21 | 22 | if (typeof object[propertyName] !== 'number') { 23 | throw new TypeError('Invalid property type, expecting a number.'); 24 | } 25 | super(object, propertyName, opt_args); 26 | } 27 | 28 | createElement_(object, propertyName, opt_args) { 29 | if (this.el_) { 30 | return; 31 | } 32 | this.el_ = document.createElement('div'); 33 | this.labelEl_ = document.createElement('label'); 34 | this.el_.appendChild(this.labelEl_); 35 | this.sliderEl_ = document.createElement('paper-slider'); 36 | this.sliderEl_.editable = true; 37 | this.sliderEl_.addEventListener('change', evt => { 38 | object[propertyName] = evt.target.value; 39 | this.changeCallback_(evt.target.value); 40 | }); 41 | // Set max and min prior to setting the value. 42 | if (typeof opt_args[2] == 'number') { 43 | this.min(opt_args[2]); 44 | if (typeof opt_args[3] == 'number') { 45 | this.max(opt_args[3]); 46 | } 47 | } 48 | this.sliderEl_.value = object[propertyName]; 49 | 50 | this.el_.appendChild(this.sliderEl_); 51 | } 52 | 53 | name(label) { 54 | this.labelEl_.hidden = !label || label == ''; 55 | this.labelEl_.innerHTML = label; 56 | return this; 57 | } 58 | 59 | max(num = 100) { 60 | if (typeof num == 'number') { 61 | this.sliderEl_.max = num; 62 | } 63 | return this; 64 | } 65 | 66 | min(num = 0) { 67 | if (typeof num == 'number') { 68 | this.sliderEl_.min = num; 69 | } 70 | return this; 71 | } 72 | 73 | step(num = 1) { 74 | if (typeof num == 'number') { 75 | this.sliderEl_.step = num; 76 | } 77 | return this; 78 | } 79 | } 80 | -------------------------------------------------------------------------------- /src/TextPaperGUIController.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * Copyright 2016 Google Inc. All rights reserved. 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express 13 | * or implied. See the License for the specific language governing 14 | * permissions and limitations under the License. 15 | */ 16 | import AbstractPaperGUIController from './AbstractPaperGUIController'; 17 | 18 | export default class TextPaperGUIController extends AbstractPaperGUIController { 19 | constructor(text) { 20 | if (typeof text !== 'string') { 21 | throw new TypeError('Invalid object type, expecting a string.'); 22 | } 23 | super(text, text); 24 | } 25 | 26 | createElement_(text) { 27 | if (this.el_) { 28 | return; 29 | } 30 | this.el_ = document.createElement('p'); 31 | this.name(text); 32 | } 33 | 34 | name(text) { 35 | if (this.el_) { 36 | Polymer.dom(this.el_).innerHTML = text; 37 | } 38 | return this; 39 | } 40 | 41 | onChange() { 42 | throw new Error('onChange cannot trigger on static text content.'); 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /src/TogglePaperGUIController.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * Copyright 2016 Google Inc. All rights reserved. 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express 13 | * or implied. See the License for the specific language governing 14 | * permissions and limitations under the License. 15 | */ 16 | import AbstractPaperGUIController from './AbstractPaperGUIController'; 17 | 18 | export default class TogglePaperGUIController extends AbstractPaperGUIController { 19 | constructor(object, propertyName) { 20 | if (typeof object[propertyName] !== 'boolean') { 21 | throw new TypeError('Invalid property type, expecting a boolean.'); 22 | } 23 | super(object, propertyName); 24 | } 25 | 26 | createElement_(object, propertyName) { 27 | if (this.el_) { 28 | return; 29 | } 30 | this.el_ = document.createElement('paper-toggle-button'); 31 | this.el_.checked = object[propertyName]; 32 | this.el_.addEventListener('change', evt => { 33 | object[propertyName] = evt.target.checked; 34 | this.changeCallback_(evt.target.checked); 35 | }); 36 | } 37 | 38 | name(label) { 39 | if (this.el_) { 40 | Polymer.dom(this.el_).innerHTML = label; 41 | } 42 | return this; 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /src/loader.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * Copyright 2016 Google Inc. All rights reserved. 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express 13 | * or implied. See the License for the specific language governing 14 | * permissions and limitations under the License. 15 | */ 16 | 17 | /** This code loads the webComponents polyfill if necessary, then asynchronously loads PaperGUI and its dependencies. */ 18 | 19 | (function() { 20 | 21 | function samePathAsMe(fileName) { 22 | return document.querySelector('script[src$="paperGUI.js"]').src.replace('paperGUI.js', fileName); 23 | } 24 | 25 | // Conditionally load webcomponents polyfill. 26 | // Credit: Glen Maddern (geelen on GitHub) 27 | var webComponentsSupported = ('registerElement' in document 28 | && 'import' in document.createElement('link') 29 | && 'content' in document.createElement('template')); 30 | 31 | if (!webComponentsSupported) { 32 | var wcPoly = document.createElement('script'); 33 | wcPoly.src = samePathAsMe('webcomponents-lite.min.js'); 34 | wcPoly.onload = lazyLoadElements(); 35 | document.head.appendChild(wcPoly); 36 | } else { 37 | lazyLoadElements(); 38 | } 39 | 40 | function lazyLoadElements () { 41 | if (window.PaperGUI) { 42 | return; 43 | } 44 | window.Polymer = window.Polymer || {}; 45 | window.Polymer.dom = 'shadow'; 46 | var elImport = document.createElement('link'); 47 | elImport.rel = 'import'; 48 | elImport.href = samePathAsMe('paper-gui.html'); 49 | elImport.onload = function() { 50 | document.dispatchEvent(new CustomEvent("PaperGUIReady", { bubbles: true })); 51 | }; 52 | document.head.appendChild(elImport); 53 | } 54 | 55 | })(); 56 | -------------------------------------------------------------------------------- /test/ButtonPaperGUIController.html: -------------------------------------------------------------------------------- 1 | 15 | 16 | 17 | 18 | 19 | 20 | PaperGUI tests - ButtonPaperGUIController 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 88 | 89 | 90 | 91 | -------------------------------------------------------------------------------- /test/InputPaperGUIController.html: -------------------------------------------------------------------------------- 1 | 15 | 16 | 17 | 18 | 19 | 20 | PaperGUI tests - InputPaperGUIController 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 111 | 112 | 113 | 114 | -------------------------------------------------------------------------------- /test/SelectPaperGUIController.html: -------------------------------------------------------------------------------- 1 | 15 | 16 | 17 | 18 | 19 | 20 | PaperGUI tests - SelectPaperGUIController 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 131 | 132 | 133 | 134 | -------------------------------------------------------------------------------- /test/SliderPaperGUIController.html: -------------------------------------------------------------------------------- 1 | 15 | 16 | 17 | 18 | 19 | 20 | PaperGUI tests - SliderPaperGUIController 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 171 | 172 | 173 | 174 | -------------------------------------------------------------------------------- /test/TogglePaperGUIController.html: -------------------------------------------------------------------------------- 1 | 15 | 16 | 17 | 18 | 19 | 20 | PaperGUI tests - TogglePaperGUIController 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 94 | 95 | 96 | 97 | -------------------------------------------------------------------------------- /test/index.html: -------------------------------------------------------------------------------- 1 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | PaperGUI tests 22 | 23 | 24 | 25 | 26 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /test/loader.html: -------------------------------------------------------------------------------- 1 | 15 | 16 | 17 | 18 | 19 | 20 | PaperGUI tests - Async JS loader 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 50 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /test/paper-gui.html: -------------------------------------------------------------------------------- 1 | 15 | 16 | 17 | 18 | 19 | 20 | PaperGUI tests 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 39 | 40 | 41 | 209 | 210 | 211 | 212 | --------------------------------------------------------------------------------