Online Web-based Dive Planning
-Built with Backbone, jQuery, localStorage and ♥
- -The js sandbox console is a javascript playground designed to enhance demos and homepages for javascript libraries, plugins and scripts, giving visitors an easy and chilled-out way to test-drive the functionality.
- -Inspired by jsconsole.com and built with Backbone.js and jQuery.
- -Maintained by Open Exchange Rates (see it in action on the money.js library homepage).
- - -Features
- --
-
- Up/down command history (like terminal), with localStorage saving/persistence -
- Option to evaluate all commands inside a hidden
<iframe>(blocking access to global window scope) with a script loader to inject your libraries of choice
- - Basic syntax highlighting for errors and variable types -
- Special commands (like
:help,:clearand:load)
- - Fits into any container and fully embeddable -
- Easy to set up, intuitive to use -
Download / Fork
- -You can check out the latest code from the js sandbox console github repository.
- - -Installation
- -Add a <div> element, link up the stylesheet, include the templates and dependencies and add the kickoff script and you're good to go:
In your <head>:
-<link href="sandbox.css" rel="stylesheet" />- -
Wherever you want the console to appear:
-<div id="sandbox">sandbox loading...</div>- -
Anywhere between the <div> and the <script>s:
-<!-- The sandbox template -->
-<script type="text/template" id="tplSandbox">
- <pre class="output"></pre>
- <div class="input">
- <textarea rows="1" placeholder="<%= placeholder %>"></textarea>
- </div>
-</script>
-
-<!-- The command/result template (NB whitespace/line breaks matter inside <pre> tag): -->
-<script type="text/template" id="tplCommand"><% if (! _hidden) { %><span class="command"><%= command %></span>
-<span class="prefix"><%= this.resultPrefix %></span><span class="<%= _class %>"><%= result %></span>
-<% } %></script>
-
- Near the closing </body> tag, after the templates:
-<script src="js/libs/underscore.min.js"></script>
-<script src="js/libs/backbone.min.js"></script>
-<script src="js/libs/backbone-localstorage.min.js"></script><!-- opt -->
-<script src="js/libs/jquery.min.js"></script>
-
-<script src="js/sandbox-console.js"></script>
-<script type="text/javascript">
- jQuery(document).ready(function($) {
- // Create the sandbox:
- window.sandbox = new Sandbox.View({
- el : $('#sandbox'),
- model : new Sandbox.Model()
- });
- });
-</script>
-
-
- Extra Options
- -You can pass extra options in to the Sandbox Backbone Model and View to control elements of the console. They are self-explanatory - for example:
- -// Create the sandbox:
-window.sandbox = new Sandbox.View({
- // these two are required:
- model : new Sandbox.Model(), // see below for more
- el : $('#sandbox'), // or etc.
-
- // these are optional (defaults are given here):
- resultPrefix : " => ",
- helpText : "type javascript commands into the console, hit enter to evaluate. \n[up/down] to scroll through history, ':clear' to reset it. \n[alt + return/up/down] for returns and multi-line editing.",
- tabCharacter : "\t",
- placeholder : "// type some javascript and hit enter (:help for info)"
-});
-
-
- Sandboxed iFrame Mode
- -By default, the sandbox evaluates commands in the global (top-level/window) scope. To prevent users from playing with the active document (or to create a totally clean execution context to play in) you can switch on the iframe mode on the Sandbox.Model. This creates an invisible <iframe> element and evaluates all commands inside its context.
This means that visitors won't have access to globals from the page you're running (including any libraries or scripts you've included). Use sandbox.model.load() to inject js files into the <iframe> window, making them available in the sandbox.
This is the recommended way to integrate the sandbox.
- -// Create the sandbox, with `iframe` mode on:
-window.sandbox = new Sandbox.View({
- model : new Sandbox.Model({ iframe : true }),
- el : $('#sandbox')
-});
-
-// Pre-load your libraries for the iframe:
-sandbox.model.load('http://code.jquery.com/jquery-1.6.4.js');
-sandbox.model.load('my/cool/library.js');
-
-// You can also evaluate code inside the iframe after it loads:
-sandbox.model.iframeEval("var globalJoss = 'im global, bro'"); // globalJoss is now available in the iframe
-
-
- Roadmap / To-Do
- - - --
-
- Verify IE support -
- Add maximum history length option -
- Create extra CSS styles/skins and add to demo -
- Write CSS for disabled X/Y scrolling and wrapped output -
- Improve up/down action in multi-line input -
Links
- -the javascript sandbox console is open source and maintained by Open Exchange Rates - the lightweight currency data API for developers, startups and Fortune 500s.
-Feedback, support or questions? Contact Open Exchange Rates for guidance.
-Bugs, issues, suggestions or contributions? Please post them here.
- - +Can I run it NOW?
+ +You should find this hosted on: https://deco-planner.archisgore.com/
-What is this tool?
+ +This is a tool meant for executing the Buhlmann-GF (with Gradient Factors) and ZHL tissues (A, B and C) and the Variable Permeability Model B (VPM-B) (by Erik Baker) algorithms in your browser. I have compared the numbers to GUE's Deco Planner and they are more or less identical (a couple of minutes difference here and there.)
+ +The A, B, and C tissues in Buhlmann are used for different scenarios, I think - I could be wrong. I believe you use A tissues for computing NDLs. You use B tissues for Open Circuit (OC), and C tissues for CCRs (Closed Circuit Rebreathers.)
+ +The VPM-B model is code picked up from Erik Baker's repository. I have not extensively tested it for comparison/accuracy. I will spend a lot of time with Deco Planner's VPM comparison as well as V Planner, to see how it compares/fares. The VPM implementation behind-the-scenes has support for just about every configuration imaginable. This tool hides it for brevity and for the "get it out to market" aspect. However, if you dig in, you can build complex and rich plans for CCRs with set-point ppO2s and different sizes for bubble nuclei, and just a whole host of things.
+ +This tool requires no installation, and if you cloned the repo and opened the HTML file, it would open fine. Or you can find it hosted https://deco-planner.archisgore.com/.
+ +The real power of this tool is:
+ +-
+
- Share, edit and modify dive plans: because they are stored as programmatic statements. I can easily copy my program, and share it to my buddy, who can then edit or modify it, and send it back to me. This allows a collaborative back-and-forth dive plan to be generated. +
- Rapidly generate hundreds of dive plans: with different profiles, or some small modification to study and compare. For instance you can quickly compare thousands of VPM vs Buhlmann dives by increasing bottom time by a minute at each step, and see when and HOW they begin to diverge. +
- Interactively study tissue loading: You can add bottom time by one minute and then get tissue loads. Graph it, charge it, whatever. This allows you to understand how tissues load over time, and generate animations. +
- Figure out "corrections": for exceeding planned time or depth. I use this tool to generate my core plan, and then generate deco times for each 10 feet below planned depth, and each 5 minutes past planned time. It gives me a general "sense" of what and how the game changes. It tells me what my bottom line is (no pun intended.) So if I knew adding five minutes is going to increase deco time exponentially, I know where to add my focus. +
- Recreational multi-level plans possible: At any point in the buhlmanPlann, you can call getCeiling() to get what your ascent ceiling is (how high you can go - optionally with a conservativism factor passed into it), or you can ask how long you can stay at a depth while maintaining a ceiling of zero feet (also called a No-Deco Limit, often abbreviated to NDL). There are some examples below that explain how to do that. +
- Free and online: You don't pay money for using it, but moreover, you don't have to install something. You can use it RIGHT NOW in your browser. +
- Open-source: so you can study and understand WHAT is happening, and WHY it is making the decisions that it is. You are not beholden to a "trust-me" dive, which is arguably the worst type of dive, no matter where you stand on the philosophy and religion of diving. +
Examples!
+ +Buhlmann decompression profile
+ +var buhlmannDeco = dive.deco.buhlmann();
+var newPlan = new buhlmannDeco.plan(buhlmannDeco.ZH16ATissues); // 1 abs pressure in fresh water
+newPlan.addBottomGas("2135", 0.21, 0.35);
+newPlan.addDecoGas("50%", 0.5, 0.0);
+newPlan.addDepthChange(0, 50, "2135", 5);
+newPlan.addFlat(50, "2135", 25);
+var decoPlan = plan.calculateDecompression(false, 0.2, 0.8, 1.6, 30); //gradientFactorLow = 0.2, gradientFactorHigh=0.8, deco ppO2 = 1.6, and max END allowed: 30 meters.
+
+
+ VPM-B decompression profile
+ +var vpmDeco = dive.deco.vpm();
+var newPlan = new vpm.plan(); // 1 abs pressure in fresh water
+newPlan.addBottomGas("2135", 0.21, 0.35);
+newPlan.addDecoGas("50%", 0.5, 0.0);
+newPlan.addDepthChange(0, 50, "2135", 5);
+newPlan.addFlat(50, "2135", 25);
+var decoPlan = plan.calculateDecompression(false, 0.2, 0.8, 1.6, 30); //gradientFactorLow = 0.2, gradientFactorHigh=0.8, deco ppO2 = 1.6, and max END allowed: 30 meters.
+
+
+ Calculate the NDLs for different depths, on different gasses (No-deco limit)
+ +var buhlmann = dive.deco.buhlmann();
+var newPlan = new buhlmann.plan(buhlmann.ZH16BTissues);
+newPlan.addBottomGas("air", 0.21, 0.0);
+newPlan.ndl(dive.feetToMeters(100), "air");
+
+
+ Calculate NDL remaining (remaining No-Deco time)
+ +var buhlmann = dive.deco.buhlmann();
+var newPlan = new buhlmann.plan(buhlmann.ZH16BTissues);
+newPlan.addBottomGas("air", 0.21, 0.0);
+newPlan.addDepthChange(0, 30, "air", 3); //went to 100 feet from surface in 3 minutes
+newPlan.addFlat(30, "air", 10); //Stayed at 100 feet for 10 minutes
+newPlan.ndl(30, "air"); //How long do I have left so I can surface without a mandatory deco obligation?
+
+
+ Plan a multi-level recreational dive
+var buhlmann = dive.deco.buhlmann();
+var newPlan = new buhlmann.plan(buhlmann.ZH16BTissues);
+newPlan.addBottomGas("air", 0.21, 0.0);
+newPlan.addDepthChange(0, 30, "air", 3); //went to 100 feet from surface in 3 minutes
+newPlan.addFlat(30, "air", 10); //Stayed at 100 feet for 10 minutes
+newPlan.addDepthChange(30, 15, "air", 3); //Went from 100 feet to 50 feet in 3 minutes
+newPlan.ndl(15, "air"); //How long do I have left so I can surface without a mandatory deco obligation?
+
+ You can configure things like gradient factor, ppO2 exposure, and maximum END.
+How it all works - the technical mumbo jumbo.
+The purpose of the tool is to have an online dive planning tool that combines all the open source tools out there, to build a responsive, fast, efficient and install-free planning tool. You can share dive plans with others, and more importantly, you can script dive plans, to generate profiles difficult or cumbersome to generate manually.
+ +This repo combines maby public-domain repos. The main reason behind this forked franken-repo is to provide an integration point for stuff that makes no sense in the individual repos on-it's-own (for instance browserifying a script in an npm repo looks ugly, or javascript-converting a python script, looks ugly and makes no sense there.)
+ +First we start with a browserified (using the browserify tool) version of this Node.js module: + https://github.com/nyxtom/dive
+ +This exposes the entire module in the browser (under a global object called dive, declared thus:) + var dive = require("/scuba-dive.js");
+ +Secondly, there's a GUI built using AlloyUI (alloyyu.com), that allows you to construct dive plans graphically.
+ +Third, these dive plans are converted into Javascript code, which is displayed in a syntax-highlighting editor, again provided by alloyUI (alloyui.com)
+ +Finally there's a REPL-console to run individual commands, taken from: https://github.com/openexchangerates/javascript-sandbox-console
+ +All the scripts are executed in your browser's main window object. So if you opened your developer tools and your own javascript console, you should be able to walk the entire object graph and use that if you'd like!
+