| |
| <!-- |
| Licensed to the Apache Software Foundation (ASF) under one |
| or more contributor license agreements. See the NOTICE file |
| distributed with this work for additional information |
| regarding copyright ownership. The ASF licenses this file |
| to you under the Apache License, Version 2.0 (the |
| "License"); you may not use this file except in compliance |
| with the License. You may obtain a copy of the License at |
| |
| http://www.apache.org/licenses/LICENSE-2.0 |
| |
| Unless required by applicable law or agreed to in writing, |
| software distributed under the License is distributed on an |
| "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY |
| KIND, either express or implied. See the License for the |
| specific language governing permissions and limitations |
| under the License. |
| --> |
| |
| <!-- labs page : this is not included in the menu, but by entering the url |
| http://localhost:8081/#/labs |
| this page will load, showing colours and doing other experiments --> |
| <div class="container container-fluid single-main-container brooklyn-labs-page"> |
| <div id="labs-page"> |
| |
| <!-- --> |
| <!-- demo the colour themese we use --> |
| |
| <h1>Colours</h1><br/> |
| |
| <style media="screen" type="text/css"> |
| .swatch { |
| padding: 10px 10px 10px 5px; |
| margin: 10px 5px; |
| display: inline-block; |
| border: 2px solid #A0A0A0; |
| } |
| </style> |
| |
| <script> |
| var swatch = function(bg, fg, bo) { |
| var bgR = bg ? bg : '#808080'; |
| var fgR = fg ? fg : '#202020'; |
| var boR = bo ? bo : '#A0A0A0'; |
| $('#swatches').append('<div class="swatch" style="background-color: '+bgR+'; color: '+fgR+'; border: 2px solid '+boR+';">' |
| +'<div>'+(bg ? 'bg:'+bg : ' ')+'</div>' |
| +'<div>'+(fg ? 'fg:'+fg : ' ')+'</div>' |
| +'<div>'+(bo ? 'bo:'+bo : ' ')+'</div>' |
| +'</div>'); |
| } |
| |
| $(document).ready(function() { |
| // display standard color themese we use for easy reference |
| var colors = [ |
| // border colors |
| //'#EEE', '#CCC', '#793', |
| // text colors |
| //'#F0F4E8' |
| // background colors |
| //'#A8B8B0', '#e0f0e0', '#e0e8e0', |
| ]; |
| |
| swatch('#492') |
| swatch('#58AA33') |
| swatch('#77AA3E') |
| swatch('#98B890') // selected alt |
| swatch('#A8B8B0') // paging numbers |
| swatch('#A8B8B0', null, '#CCC') |
| swatch('#A8B8B0', null, '#EEE') |
| swatch('#B8C8B0') // selected |
| swatch('#d0d8d0') // app content |
| swatch('#D8E0D4') // opened row |
| swatch('#d8e4d0') // table body |
| swatch('#E0E4E0') // table row hover, table header |
| swatch('#e8e8e8') // app content |
| swatch('#f0f4f0') // app content |
| swatch('#F9F9F9') // table odd |
| swatch('#FFFFFF') // table even |
| swatch('#261', '#F0F4E8', null) |
| swatch(null, '#182018') // tree node |
| swatch(null, '#382') // links |
| swatch(null, '#65AA34') // hover for above |
| swatch(null, '#273') |
| swatch('#f9f9f9', null, '#d4d4d4') // tabs |
| swatch('#f9f9f9', '#505050', '#a1cb8c') // add app |
| swatch('#f9f9f9', '#58a82e', '#58a82e') // add app hover |
| |
| |
| |
| for (c in colors) { |
| // $('#swatches').append('<div class="swatch" style="background-color: '+colors[c]+';">'+colors[c]+'</div>'); |
| } |
| }) |
| </script> |
| |
| <div id="swatches"> |
| </div> |
| |
| |
| <br/><br/> |
| <h1>Icons</h1><br/> |
| |
| <div><b>Glyphs</b></div><br/> |
| <img src="./assets/img/glyphicons-halflings.png"/> |
| |
| |
| <br/><br/> |
| <h1>Experimental Config</h1><br/> |
| |
| <br/><br/> |
| <div><b>Refresh pages (globally in JS)</b></div><br/> |
| |
| <script> |
| var updateGlobalRefreshDisplay = function() { |
| require(["brooklyn"], function(b) { |
| $('#globalRefresh').html(''+b.refresh) |
| }) |
| } |
| |
| var toggleGlobalRefresh = function() { |
| require(["brooklyn"], function(b) { |
| b.toggleRefresh(); |
| updateGlobalRefreshDisplay(); |
| }) |
| } |
| |
| $(document).ready(function() { |
| updateGlobalRefreshDisplay() |
| }) |
| </script> |
| |
| Brooklyn Global Auto Refresh is: <b><span id="globalRefresh">?</span> |
| <span onclick="javascript:toggleGlobalRefresh()"><i>[change]</i></span></b> |
| <br/><span><i>(this setting controls whether things do auto refresh; |
| disabling globally can be helpful when testing)</i></span> |
| |
| |
| |
| |
| <br/><br/> |
| <h1>Debug</h1><br/> |
| |
| |
| <br/><br/> |
| <div><b>Fade Practice</b></div><br/> |
| |
| <script> |
| var fadeHello = function() { |
| require(["view/viewutils"], function(v) { |
| log('fading') |
| v.fadeToIndicateInitialLoad($('#hello')) |
| }) |
| } |
| var showHello = function() { |
| require(["view/viewutils"], function(v) { |
| log('unfading') |
| v.cancelFadeOnceLoaded($('#hello')) |
| }) |
| } |
| </script> |
| <div id="hello">I'm a region which fades.</div> |
| <div><span onclick="javascript:fadeHello()">fade</span> <span onclick="javascript:showHello()">show</span></div> |
| |
| |
| |
| <br/><br/> |
| <div><b>Ajax Practice</b></div><br/> |
| |
| <script type="text/javascript"> |
| function fetchSummat() { |
| log("fetching") |
| $.ajax({ |
| type:"GET", |
| url:"/v1/applications/dI6fIDvw/entities/dI6fIDvw/sensors/service.state", |
| success:function (data) { |
| log("fetch success - "+data) |
| var a = data; |
| log(typeof a) |
| log(a) |
| }, |
| error: function(data) { |
| log("fetch fail") |
| }}) |
| } |
| </script> |
| |
| <div> |
| <span onclick="javascript:fetchSummat()">fetch</span> |
| </div> |
| |
| |
| |
| </div> |
| </div> |