| @@ -1,112 +1,98 @@ | ||
| # [Beta.Speckle](http://beta.speckle.xyz) | ||
| *[namechange under public consideration](https://github.com/didimitrie/future.speckle/issues/12)* | ||
|
|
||
| ## About | ||
| Beta.Speckle is an online parametric model viewer. It enables sharing with your clients/stakeholders/community flexible designs, not just static artefacts. | ||
|
|
||
| Check the service in action on [http://beta.speckle.xyz](http://beta.speckle.xyz). For now, it is developed by [@idid](http://twitter.com/idid). | ||
|
|
||
| ##Why? | ||
| Design iteration has always been difficult to communicate with the right people, that's why we devised a tool to help leverage the felxibility of computational design in evnironments outside the architectural office. | ||
|
|
||
| #####**Parametric models can go beyond aesthetic and technical exploration: they can tell a story and they can be the base of collaborative decision making**. | ||
|
|
||
| ##The Approach | ||
|
|
||
| SPK has very little moving parts, and is geared towards (eventual) **deployment for a wide range of non-technical users and environements**. | ||
|
|
||
| The current front-end tech stack ensures that on any (evergreen) browser, your model is accesible - mobile devices are supported as well. This is possible one of the few requirements - accesibility and software independence. | ||
|
|
||
| All your models are pre-generated on your computer, so essentially the viewer is just loading and displaying static files. This means that there's no computational overhead and we are able to leverage native browser caching and compression - which is fast. | ||
|
|
||
| ##The Parts | ||
|
|
||
| There are three main parts: | ||
| ###1. The Backend | ||
| Contains: | ||
| - the API | ||
| - the landing page | ||
| - user registration | ||
| - user profile page | ||
|
|
||
| ###2. The Viewer | ||
| This is a static front-end that loads & displays the parametric models. It resides within the `/spkw` directory and is a littl independent module of its own. Check its readme for more information. | ||
|
|
||
| ###3. The Grasshopper Exporter | ||
| Has its **[own github repo](https://github.com/didimitrie/speckle.exporter)**. It currently only exists for Rhino/GH. | ||
| *There are other parametric software out there that hopefully you'll help us export from!* | ||
|
|
||
| ##Getting started with hacking on your local machine | ||
|
|
||
| **Important notice: build and watch systems will soon (hopefully) be unified in something more straightforward. Until then, voila the temporary instructions:** | ||
|
|
||
| 1. `npm install` | ||
| 2. 'npm run watch' | ||
| 3. Point your browser to `http://localhost:9009` and you should be good to go. | ||
|
|
||
| **If developing on windows** be sure to check [issue #25](https://github.com/didimitrie/future.speckle/issues/25). There are some platform specific troubles that are not yet fixed. | ||
|
|
||
| ###Deploying on your own server | ||
|
|
||
| If you want to deploy this to your own server (for various reasons), go ahead! You will need: | ||
| - a mongodb instance running somewhere | ||
| - an [Auth0](auth0.com/) account if you plan to support authentication | ||
|
|
||
| Please give us a heads up if you do this :bow:. | ||
|
|
||
| ##Need Help? | ||
| Hit me up [@idid](http://twitter.com/idid) or open an issue (preffered). | ||
|
|
||
| ##Contribution Guidelines | ||
|
|
||
| See the [contribution guidelines](./contributing.md). | ||
|
|
||
| ##The Project, Why FOSS, and Why Contribute | ||
|
|
||
| The infrastructure for this project is financed for the following three years. See the [Credits](https://github.com/didimitrie/future.speckle#credits). Part of our philosophy is to develop this together closely with the stakeholders and end-users, as such any contributions are welcome: feel free to propose new code architecture, features, etc. | ||
|
|
||
| ##Credits | ||
|
|
||
| Started off & currently maintained by [@idid](http://twitter.com/idid/). *Add yourself here if you contribute!* | ||
|
|
||
| The project is underway at **[The Bartlett, UCL](http://www.bartlett.ucl.ac.uk/)**, within the **[Innochain](http://innochain.net/)** Research Project. | ||
|
|
||
| **This project has received funding from the European Union’s Horizon 2020 research and innovation programme under the Marie Sklodowska-Curie grant agreement No 642877.** | ||
|
|
||
| ##License | ||
|
|
||
| The MIT License (MIT) | ||
|
|
||
| Copyright (c) 2016 Dimitrie Andrei Stefanescu & University College London (UCL) | ||
|
|
||
| Permission is hereby granted, free of charge, to any person obtaining a copy | ||
| of this software and associated documentation files (the "Software"), to deal | ||
| in the Software without restriction, including without limitation the rights | ||
| to use, copy, modify, merge, publish, distribute, sublicense, and/or sell | ||
| copies of the Software, and to permit persons to whom the Software is | ||
| furnished to do so, subject to the following conditions: | ||
|
|
||
| The above copyright notice and this permission notice shall be included in all | ||
| copies or substantial portions of the Software. | ||
|
|
||
| THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR | ||
| IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, | ||
| FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE | ||
| AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER | ||
| LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, | ||
| OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE | ||
| SOFTWARE. |
| @@ -0,0 +1,46 @@ | ||
|
|
||
| <!-- Default includes are in here. --><!DOCTYPE html> | ||
| <html><!-- | ||
| ________ _______ ________ ________ _____ ______ ________ ___ ___ ________ ________ ___ __ _______ ________ | ||
| |\ ___ \|\ ___ \ |\ __ \|\ __ \ |\ _ \ _ \|\ __ \ |\ \|\ \|\ __ \|\ ____\|\ \|\ \ |\ ___ \ |\ __ \ | ||
| \ \ \_|\ \ \ __/|\ \ \|\ \ \ \|\ \ \ \ \\\__\ \ \ \ \|\ \ \ \ \\\ \ \ \|\ \ \ \___|\ \ \/ /|\ \ __/|\ \ \|\ \ | ||
| \ \ \ \\ \ \ \_|/_\ \ __ \ \ _ _\ \ \ \\|__| \ \ \ _ _\ \ \ __ \ \ __ \ \ \ \ \ ___ \ \ \_|/_\ \ _ _\ ___ | ||
| \ \ \_\\ \ \ \_|\ \ \ \ \ \ \ \\ \| \ \ \ \ \ \ \ \\ \| ___ \ \ \ \ \ \ \ \ \ \ \____\ \ \\ \ \ \ \_|\ \ \ \\ \||\ \ | ||
| \ \_______\ \_______\ \__\ \__\ \__\\ _\ \ \__\ \ \__\ \__\\ _\|\__\ \ \__\ \__\ \__\ \__\ \_______\ \__\\ \__\ \_______\ \__\\ _\\ \ \ | ||
| \|_______|\|_______|\|__|\|__|\|__|\|__| \|__| \|__|\|__|\|__\|__| \|__|\|__|\|__|\|__|\|_______|\|__| \|__|\|_______|\|__|\|__|\/ /| | ||
| |\___/ / | ||
| \|___|/ | ||
| This is all Open Source. Let's make it grow together! | ||
| (1) https://github.com/didimitrie/viewer.speckle | ||
| (2) https://github.com/didimitrie/speckle.exporter | ||
| Yours truly, | ||
| @idid | ||
| ________ _______ _______ ___ ___ ________ ___ ___ ________ ________ ________ ___ ___ ________ ________ ___ | ||
| |\ ____\|\ ___ \ |\ ___ \ |\ \ / /|\ __ \|\ \|\ \ |\ __ \|\ __ \|\ __ \|\ \|\ \|\ ___ \|\ ___ \|\ \ | ||
| \ \ \___|\ \ __/|\ \ __/| \ \ \/ / | \ \|\ \ \ \\\ \ \ \ \|\ \ \ \|\ \ \ \|\ \ \ \\\ \ \ \\ \ \ \ \_|\ \ \ \ | ||
| \ \_____ \ \ \_|/_\ \ \_|/__ \ \ / / \ \ \\\ \ \ \\\ \ \ \ __ \ \ _ _\ \ \\\ \ \ \\\ \ \ \\ \ \ \ \ \\ \ \ \ | ||
| \|____|\ \ \ \_|\ \ \ \_|\ \ \/ / / \ \ \\\ \ \ \\\ \ \ \ \ \ \ \ \\ \\ \ \\\ \ \ \\\ \ \ \\ \ \ \ \_\\ \ \__\ | ||
| ____\_\ \ \_______\ \_______\ __/ / / \ \_______\ \_______\ \ \__\ \__\ \__\\ _\\ \_______\ \_______\ \__\\ \__\ \_______\|__| | ||
| |\_________\|_______|\|_______| |\___/ / \|_______|\|_______| \|__|\|__|\|__|\|__|\|_______|\|_______|\|__| \|__|\|_______| ___ | ||
| \|_________| \|___|/ |\__\ | ||
| \|__| | ||
| --> | ||
| <head> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
| <title>Beta.Speckle: Display and explore parametric models in your browser. </title> | ||
| <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> | ||
| <!-- add the custom stylesheet and scripts here--> | ||
| <link rel="stylesheet" href="./../css/Template.css"> | ||
| <script src="./../js/Template.js"></script> | ||
| </head> | ||
| <body> | ||
| <div id="spk-canvas"></div> | ||
| <div id="your-div-doing-some-other-amazing-stuff"></div> | ||
| </body> | ||
| </html> |
| @@ -0,0 +1,32 @@ | ||
| <!-- Default includes are in here. --><!DOCTYPE html><html><!-- | ||
| ________ _______ ________ ________ _____ ______ ________ ___ ___ ________ ________ ___ __ _______ ________ | ||
| |\ ___ \|\ ___ \ |\ __ \|\ __ \ |\ _ \ _ \|\ __ \ |\ \|\ \|\ __ \|\ ____\|\ \|\ \ |\ ___ \ |\ __ \ | ||
| \ \ \_|\ \ \ __/|\ \ \|\ \ \ \|\ \ \ \ \\\__\ \ \ \ \|\ \ \ \ \\\ \ \ \|\ \ \ \___|\ \ \/ /|\ \ __/|\ \ \|\ \ | ||
| \ \ \ \\ \ \ \_|/_\ \ __ \ \ _ _\ \ \ \\|__| \ \ \ _ _\ \ \ __ \ \ __ \ \ \ \ \ ___ \ \ \_|/_\ \ _ _\ ___ | ||
| \ \ \_\\ \ \ \_|\ \ \ \ \ \ \ \\ \| \ \ \ \ \ \ \ \\ \| ___ \ \ \ \ \ \ \ \ \ \ \____\ \ \\ \ \ \ \_|\ \ \ \\ \||\ \ | ||
| \ \_______\ \_______\ \__\ \__\ \__\\ _\ \ \__\ \ \__\ \__\\ _\|\__\ \ \__\ \__\ \__\ \__\ \_______\ \__\\ \__\ \_______\ \__\\ _\\ \ \ | ||
| \|_______|\|_______|\|__|\|__|\|__|\|__| \|__| \|__|\|__|\|__\|__| \|__|\|__|\|__|\|__|\|_______|\|__| \|__|\|_______|\|__|\|__|\/ /| | ||
| |\___/ / | ||
| \|___|/ | ||
| This is all Open Source. Let's make it grow together! | ||
| (1) https://github.com/didimitrie/viewer.speckle | ||
| (2) https://github.com/didimitrie/speckle.exporter | ||
| Yours truly, | ||
| @idid | ||
| ________ _______ _______ ___ ___ ________ ___ ___ ________ ________ ________ ___ ___ ________ ________ ___ | ||
| |\ ____\|\ ___ \ |\ ___ \ |\ \ / /|\ __ \|\ \|\ \ |\ __ \|\ __ \|\ __ \|\ \|\ \|\ ___ \|\ ___ \|\ \ | ||
| \ \ \___|\ \ __/|\ \ __/| \ \ \/ / | \ \|\ \ \ \\\ \ \ \ \|\ \ \ \|\ \ \ \|\ \ \ \\\ \ \ \\ \ \ \ \_|\ \ \ \ | ||
| \ \_____ \ \ \_|/_\ \ \_|/__ \ \ / / \ \ \\\ \ \ \\\ \ \ \ __ \ \ _ _\ \ \\\ \ \ \\\ \ \ \\ \ \ \ \ \\ \ \ \ | ||
| \|____|\ \ \ \_|\ \ \ \_|\ \ \/ / / \ \ \\\ \ \ \\\ \ \ \ \ \ \ \ \\ \\ \ \\\ \ \ \\\ \ \ \\ \ \ \ \_\\ \ \__\ | ||
| ____\_\ \ \_______\ \_______\ __/ / / \ \_______\ \_______\ \ \__\ \__\ \__\\ _\\ \_______\ \_______\ \__\\ \__\ \_______\|__| | ||
| |\_________\|_______|\|_______| |\___/ / \|_______|\|_______| \|__|\|__|\|__|\|__|\|_______|\|_______|\|__| \|__|\|_______| ___ | ||
| \|_________| \|___|/ |\__\ | ||
| \|__| | ||
| --><head><meta name="viewport" content="width=device-width, initial-scale=1"><title>Beta.Speckle: Display and explore parametric models in your browser. </title><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/hint.css/2.1.0/hint.min.css"><!-- add the custom stylesheet and scripts here--><link rel="stylesheet" href="./../css/Default.css"><script src="./../js/Default.js"></script></head><body><div id="spk-canvas"></div><div id="spk-metadata"><div class="logo"><!--img(src="http://beta.speckle.xyz/img/SPKLogo.svg")--><i class="fa fa-angle-double-right"></i><p>Made with <a href="/">Speckle</a></p></div><div class="metadata"><span class="name">Loading...</span><span class="author-date"></span></div></div><div id="spk-ui-tabs"></div><div id="spk-parameters" class="sidebar"><div id="spk-save-widget"><span data-hint="Save this instance." class="save-config hint--right"><i class="fa fa-save"></i></span><form id="instance-saver-form" class="closed"><span data-hint="To save a configuration, give it a description and hit enter." class="input-hint hint--bottom"><input placeholder="Instance description. Press enter to save."></span><span data-hint="Close" class="save-config hint--bottom-left"><i class="fa fa-close"></i></span></form></div><br><br></div><div id="spk-comments" class="sidebar sidebar-hidden"><!--formspan.hint--bottom(data-hint="To save a configuration, give it a description and hit enter.") | ||
| textarea(placeholder="To save a configuration, give it a description and hit enter." rows=3)--><div id="instance-list"></div></div><div id="spk-help" class="sidebar sidebar-hidden"><h1>Simple shortcuts to get you through the day:</h1><div class="shortcut"><div class="half-1"><p>Zoom All Objects </p></div><div class="half-2"><p> <span data-hint="Press Z on your keyboard!" class="hint--bottom">Z</span></p></div></div><div class="shortcut"><div class="half-1"><p>Toggle Ground Shadows</p></div><div class="half-2"><p> <span data-hint="Press S on your keyboard!" class="hint--bottom">S</span></p></div></div><div class="shortcut"><div class="half-1"><p>Toggle Grid</p></div><div class="half-2"><p> <span data-hint="Press G on your keyboard!" class="hint--bottom">G</span></p></div></div></div></body></html> |
| @@ -0,0 +1,31 @@ | ||
| <!-- Default includes are in here. --><!DOCTYPE html><html><!-- | ||
| ________ _______ ________ ________ _____ ______ ________ ___ ___ ________ ________ ___ __ _______ ________ | ||
| |\ ___ \|\ ___ \ |\ __ \|\ __ \ |\ _ \ _ \|\ __ \ |\ \|\ \|\ __ \|\ ____\|\ \|\ \ |\ ___ \ |\ __ \ | ||
| \ \ \_|\ \ \ __/|\ \ \|\ \ \ \|\ \ \ \ \\\__\ \ \ \ \|\ \ \ \ \\\ \ \ \|\ \ \ \___|\ \ \/ /|\ \ __/|\ \ \|\ \ | ||
| \ \ \ \\ \ \ \_|/_\ \ __ \ \ _ _\ \ \ \\|__| \ \ \ _ _\ \ \ __ \ \ __ \ \ \ \ \ ___ \ \ \_|/_\ \ _ _\ ___ | ||
| \ \ \_\\ \ \ \_|\ \ \ \ \ \ \ \\ \| \ \ \ \ \ \ \ \\ \| ___ \ \ \ \ \ \ \ \ \ \ \____\ \ \\ \ \ \ \_|\ \ \ \\ \||\ \ | ||
| \ \_______\ \_______\ \__\ \__\ \__\\ _\ \ \__\ \ \__\ \__\\ _\|\__\ \ \__\ \__\ \__\ \__\ \_______\ \__\\ \__\ \_______\ \__\\ _\\ \ \ | ||
| \|_______|\|_______|\|__|\|__|\|__|\|__| \|__| \|__|\|__|\|__\|__| \|__|\|__|\|__|\|__|\|_______|\|__| \|__|\|_______|\|__|\|__|\/ /| | ||
| |\___/ / | ||
| \|___|/ | ||
| This is all Open Source. Let's make it grow together! | ||
| (1) https://github.com/didimitrie/viewer.speckle | ||
| (2) https://github.com/didimitrie/speckle.exporter | ||
| Yours truly, | ||
| @idid | ||
| ________ _______ _______ ___ ___ ________ ___ ___ ________ ________ ________ ___ ___ ________ ________ ___ | ||
| |\ ____\|\ ___ \ |\ ___ \ |\ \ / /|\ __ \|\ \|\ \ |\ __ \|\ __ \|\ __ \|\ \|\ \|\ ___ \|\ ___ \|\ \ | ||
| \ \ \___|\ \ __/|\ \ __/| \ \ \/ / | \ \|\ \ \ \\\ \ \ \ \|\ \ \ \|\ \ \ \|\ \ \ \\\ \ \ \\ \ \ \ \_|\ \ \ \ | ||
| \ \_____ \ \ \_|/_\ \ \_|/__ \ \ / / \ \ \\\ \ \ \\\ \ \ \ __ \ \ _ _\ \ \\\ \ \ \\\ \ \ \\ \ \ \ \ \\ \ \ \ | ||
| \|____|\ \ \ \_|\ \ \ \_|\ \ \/ / / \ \ \\\ \ \ \\\ \ \ \ \ \ \ \ \\ \\ \ \\\ \ \ \\\ \ \ \\ \ \ \ \_\\ \ \__\ | ||
| ____\_\ \ \_______\ \_______\ __/ / / \ \_______\ \_______\ \ \__\ \__\ \__\\ _\\ \_______\ \_______\ \__\\ \__\ \_______\|__| | ||
| |\_________\|_______|\|_______| |\___/ / \|_______|\|_______| \|__|\|__|\|__|\|__|\|_______|\|_______|\|__| \|__|\|_______| ___ | ||
| \|_________| \|___|/ |\__\ | ||
| \|__| | ||
| --><head><meta name="viewport" content="width=device-width, initial-scale=1"><title>Beta.Speckle: Display and explore parametric models in your browser. </title><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/hint.css/2.1.0/hint.min.css"><!-- add the custom stylesheet and scripts here--><link rel="stylesheet" href="./../css/Template.css"><script src="./../js/Template.js"></script></head><body><div id="spk-canvas"></div><div id="your-div-doing-some-other-amazing-stuff"></div></body></html> |
| @@ -1,13 +1,91 @@ | ||
| #SPKW | ||
| Parametric model explorer based on on webgl (threejs) | ||
|
|
||
| ###Install | ||
| Even though you ran npm install in future.speckle, you still need to do it here too. The viewer acts as a little independent module of his own. | ||
|
|
||
| If you're coming from future.speckle, then cd in spkw/ and go ahead and: | ||
| - `npm install` / `sudo npm install` | ||
| - `npm run watch` to see live changes | ||
|
|
||
| If developing on windows, please check [issue #25](https://github.com/didimitrie/future.speckle/issues/25). There are some platform specific troubles that are not yet fixed. | ||
|
|
||
| ##Interface Architecture | ||
| A typical SPKW interface is structured around the following: | ||
| - a jade template, ie. `Default.jade` | ||
| - a sass stylesheet, ie. `Default.scss` | ||
| - a js file, ie. `Default.js` | ||
|
|
||
| **In order to register a new interface on the backend**, please pop open the `future.speckle/app/routes/viewer.js` and add yours there, with its own little prefix. You can then experiment with your model by going to `http://localhost:9009/view/**yourprefix**/modelKey`. | ||
|
|
||
| *TODO: A better system for routing to various interfaces.* | ||
|
|
||
| ####The Jade template, `YourTemplateName.jade` | ||
| Contains the basic markup of the page. It extends the `layout.jade` file, which provides some sort of basic structure and imports some basic functionality. Feel free to play around, switch menus around, etc. | ||
|
|
||
| ####The SASS stylesheet `YourTemplateName.scss` | ||
| Styles the various elements of your interface. Easy peasy. It also imports some default styles of the app, but feel free to get rid of them (or improve them). If contributing to the main repo, please keep the UX direction laid out in the default template (ie, colours, drop shadows, slider styles). | ||
|
|
||
| ####The JS file `YourTemplateName.js` | ||
| It intializes the whole stuff and it `requires` the core modules. Feel free to add your own, and require them up. | ||
|
|
||
| ##App Architecture (ie, the JS Modules) | ||
| Basically, you have *core modules* and *non-core* modules. I've ended up (against my intentions) writing a mini MVC pattern. It's bad, but there are a few advantages to it: **Low entry point** - you just need to know jQuery, and the conventions on how you handle data binding (or not) are your own. | ||
|
|
||
| **NOTE:** I am open to divine intervention - if you feel like scrathcing this up and using react/vuejs/... be my guest. It was just too much for me to handle at the moment. | ||
|
|
||
| Core modules are the ones that provide the basic functionality. Non-core modules just add **jazz** to the whole thing, ie. sliders, comments, metadata display, etc. They can interface with the html structure of the template file (most do), whereas the **non-core** modules do not, with one exception. See below. | ||
|
|
||
| ###The **Core** Modules: | ||
| - `SPK.js` - only one to interface with an html element - it needs a place to drop the canvas. | ||
| - `SPKLoader.js` - loads and parses the json file | ||
| - `SPKObjectMaker.js` - makes threejs objects from parsed json files | ||
| - `SPKConfig.js` - tells SPK what are the api endpoints (ie what urls to call on the server) | ||
|
|
||
| ###The **Non-Core** Modules: | ||
| - `SPKSliderControl.js` - makes the parameter sliders and perfomance measures from the params.json file of every model. | ||
| - `SPKLogger.js` - This is what my research is about, soz. In the future content creators will have acess to this in a nice dashboard. | ||
| - `SPKCommentsControl.js` - This one handles saving and re-instating instances (parameter key + camera postiton + user description). | ||
| - `SPKHelpControl.js` - The last tab in the `Default` interface, a bit of a help file. | ||
| - **`YOUR NEW STUFF`** - The sky's the limit. | ||
|
|
||
| ###How To Create Your Own Interface | ||
| ####1. Scaffolding your template | ||
|
|
||
| - In `spkw/src/jade/` make a copy of `Template.jade` and rename it to `MyNewInterface.jade`. | ||
| - In `spkw/src/js/` make a copy of `Template.js` and rename it to `MyNewInterface.js`. | ||
| - In `spkw/src/sass/` make a copy of `Template.scss` and rename it to `MyNewInterface.scss`. | ||
|
|
||
| Don't forget to update the links to the stylesheet and the script file inside the jade template. | ||
|
|
||
| **Please be consistent with the names to avoid messiness!** | ||
|
|
||
| ####2. Building your template | ||
|
|
||
| All **jade** and **sass** files are built automatically to `spkw/dist/html` (jade > html) and `spkw\dist\css` (sass > css), so you shouldn't worry too much about them. | ||
|
|
||
| You will need to build the js file yourself, I am afraid. Here's how to do it: | ||
|
|
||
| **Manually build the js file** | ||
| Run the following command: `browserify spkw/src/js/**MyNewInterface**.js -o spkw/dist/js/**MyNewInterface**.js` | ||
|
|
||
| You will need to run this command everytime you make a change. Want to automate, read on! | ||
|
|
||
| **Automate the js build** | ||
| In `future.speckle/package.json` add the command to the `build-js` script. It should look something like this: | ||
|
|
||
| ```json | ||
| "build-js": "browserify spkw/src/js/Default.js -o spkw/dist/js/Default.js & browserify spkw/src/js/Template.js -o spkw/dist/js/Template.js & browserify spkw/src/js/**MyNewInterface**.js -o spkw/dist/js/**MyNewInterface**.js" | ||
| ``` | ||
|
|
||
| ####3. Adding your template to the server routes | ||
| In future.speckle/app/routes/viewer.js add the following lines of code: | ||
|
|
||
| ```javascript | ||
| app.get("/view/**YOURPREFIX**/:m", isAuthorized, function(req, res) { | ||
| res.sendfile(appDir + "/spkw/dist/html/**MyNewInterface.html**"); | ||
| }); | ||
| ``` | ||
|
|
||
| Always make sure that **YOURPREFIX** is unique and doesn't confict with any of the previous ones. | ||
|
|
||
| @@ -0,0 +1,60 @@ | ||
| extends ./layout/layout.jade | ||
|
|
||
| block header | ||
| // add the custom stylesheet and scripts here | ||
| link(rel='stylesheet' href="./../css/Default.css") | ||
| script(src="./../js/Default.js") | ||
|
|
||
| block content | ||
| #spk-canvas | ||
| #spk-metadata | ||
| .logo | ||
| //img(src="http://beta.speckle.xyz/img/SPKLogo.svg") | ||
| i.fa.fa-angle-double-right | ||
| p Made with #[a(href="/") Speckle] | ||
| .metadata | ||
| span.name. | ||
| Loading... | ||
| span.author-date. | ||
|
|
||
| #spk-ui-tabs | ||
| #spk-parameters.sidebar | ||
| #spk-save-widget | ||
| span.save-config.hint--right(data-hint="Save this instance.") | ||
| i.fa.fa-save | ||
| form#instance-saver-form.closed | ||
| span.input-hint.hint--bottom(data-hint="To save a configuration, give it a description and hit enter.") | ||
| input(placeholder="Instance description. Press enter to save.") | ||
| span.save-config.hint--bottom-left(data-hint="Close") | ||
| i.fa.fa-close | ||
| br | ||
| br | ||
| #spk-comments.sidebar.sidebar-hidden | ||
| //form | ||
| span.hint--bottom(data-hint="To save a configuration, give it a description and hit enter.") | ||
| textarea(placeholder="To save a configuration, give it a description and hit enter." rows=3) | ||
| #instance-list | ||
| #spk-help.sidebar.sidebar-hidden | ||
| h1 Simple shortcuts to get you through the day: | ||
| .shortcut | ||
| .half-1 | ||
| p Zoom All Objects | ||
| .half-2 | ||
| p | ||
| span.hint--bottom(data-hint="Press Z on your keyboard!") Z | ||
| .shortcut | ||
| .half-1 | ||
| p Toggle Ground Shadows | ||
| .half-2 | ||
| p | ||
| span.hint--bottom(data-hint="Press S on your keyboard!") S | ||
| .shortcut | ||
| .half-1 | ||
| p Toggle Grid | ||
| .half-2 | ||
| p | ||
| span.hint--bottom(data-hint="Press G on your keyboard!") G | ||
|
|
||
|
|
||
|
|
||
|
|
| @@ -0,0 +1,10 @@ | ||
| extends ./layout/layout.jade | ||
|
|
||
| block header | ||
| // add the custom stylesheet and scripts here | ||
| link(rel='stylesheet' href="./../css/Template.css") | ||
| script(src="./../js/Template.js") | ||
|
|
||
| block content | ||
| #spk-canvas | ||
| #your-div-doing-some-other-amazing-stuff |
| @@ -0,0 +1,13 @@ | ||
| // Default includes are in here. | ||
| doctype html | ||
| html | ||
| include ./../includes/hc.html | ||
| head | ||
| meta(name='viewport', content='width=device-width, initial-scale=1') | ||
| title Beta.Speckle: Display and explore parametric models in your browser. | ||
| link(rel='stylesheet', href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css') | ||
| link(rel='stylesheet', href='https://cdnjs.cloudflare.com/ajax/libs/hint.css/2.1.0/hint.min.css') | ||
| block header | ||
|
|
||
| body | ||
| block content |
| @@ -0,0 +1,56 @@ | ||
|
|
||
| var $ = require('jquery') | ||
| var SPK = require('./modules/SPK.js') | ||
| var SPKMeta = require('./modules/SPKMetaDisplay.js') | ||
| var SPKSliderControl = require('./modules/SPKSliderControl.js') | ||
| var SPKCommentsControl = require('./modules/SPKCommentsControl.js') | ||
| var SPKHelpControl = require('./modules/SPKHelpControl.js') | ||
| var SPKKeyHandler = require('./modules/SPKKeyHandler.js') | ||
|
|
||
| $( function () { | ||
|
|
||
| var mySPK = new SPK( | ||
| { | ||
| canvasid : 'spk-canvas', | ||
| onInitEnd : function ( SPK ) { | ||
|
|
||
| var myMeta = new SPKMeta ( { | ||
| wrapperid : 'spk-metadata', | ||
| spk : SPK.META | ||
| } ); | ||
|
|
||
| var mySliderCtrl = new SPKSliderControl ( { | ||
| wrapperid : 'spk-parameters', | ||
| uitabid : 'spk-ui-tabs', | ||
| icon : 'fa-sliders', | ||
| data: SPK.PARAMS, | ||
| open: false, | ||
| spk : SPK | ||
| } ); | ||
|
|
||
| var myCommentCtrl = new SPKCommentsControl ( { | ||
| wrapperid : 'spk-comments', | ||
| formid : 'instance-saver-form', | ||
| uitabid : 'spk-ui-tabs', | ||
| icon : 'fa-comments', | ||
| data: SPK.PARAMS, | ||
| open : false, | ||
| spk : SPK | ||
| } ); | ||
|
|
||
| var myHelpCtrl = new SPKHelpControl ( { | ||
| wrapperid : 'spk-help', | ||
| uitabid : 'spk-ui-tabs', | ||
| icon : 'fa-info-circle' | ||
| //icon : 'fa-cogs' | ||
| }) | ||
|
|
||
| var myKeyHandler = new SPKKeyHandler ( { | ||
| spk: SPK | ||
| }) | ||
| //window.SPK = mySPK; | ||
| } | ||
| } ) | ||
|
|
||
| } ) | ||
|
|