flammarion 0.0.1

data/lib/html/source/javascripts/websocket.coffee

@@ -0,0 +1,83 @@
+#= require vendor/jquery.js
+#= require status.coffee
+
+class WSClient
+  constructor: ->
+    host = $qs.get("host") || "localhost"
+    console.log "Path: #{$qs.get("path")}, Port: #{$qs.get("port")}, Host: #{host}"
+    @ws = new WebSocket "ws://#{host}:#{$qs.get("port")}/#{$qs.get("path")}"
+    @actions["__parent"] = this
+    document.title = $qs.get("title") || "Flammarion Unconnected"
+    @ws.onopen = (msg) ->
+      $('body').addClass("connected")
+
+    @ws.onclose = (msg) ->
+      $('body').removeClass("connected")
+
+    @ws.onmessage = (msg) =>
+      console.log(msg)
+      data = $.parseJSON(msg.data)
+      if @actions[data.action]
+        @actions[data.action](data)
+      else
+        console.error("No such action: #{data.action}")
+
+    @status = new StatusDisplay(this, $('#status > .right'))
+
+  send: (data) ->
+    @ws.send JSON.stringify(data)
+
+  check_target: (data) ->
+    return data.target_element if data.target_element
+    data.target = "default" unless data.target
+    @actions.addpane {name:data.target} if $("#console-#{data.target}").size() is 0
+    @resize_panes
+    return $("#console-#{data.target}")
+
+  resize_panes: (data) ->
+    if data.target
+      target = @check_target(data)
+    else
+      target = $('#panes')
+
+    allPanes =  target.find('> .pane')
+    height = (100.0 / allPanes.size()).toFixed(0) + "%"
+    if target.hasClass('horizontal')
+      orientation = 'horizontal'
+    else
+      orientation = 'vertical'
+
+    console.log target, allPanes.size(), 100.0 / allPanes.size(), height, orientation
+    for pane in allPanes
+      if orientation is 'horizontal'
+        $(pane).css "width", height
+        $(pane).css "height", '100%'
+      else
+        $(pane).css "height", height
+        $(pane).css "width", '100%'
+
+  escape: (text, input_options) ->
+    options =
+      raw: false
+      colorize: true
+      escape_html: true
+    $.extend(options, input_options)
+    return text if options.raw
+    text = "#{text}"
+    text = ansi_up.escape_for_html(text) if options.escape_html
+    text = ansi_up.ansi_to_html(text) if options.colorize
+    return text
+
+  add: (object, target, data) ->
+    if data.replace
+      target.html(object)
+    else
+      target.append(object)
+
+  actions:
+    __parent: null
+
+$(document).ready ->
+  window.$ws = new WSClient
+
+window.WSClient = WSClient

data/lib/html/source/spectrum_test.html.slim

@@ -0,0 +1,39 @@
+---
+layout: false
+---
+    
+doctype html
+html
+  head
+    meta[http-equiv="content-type" content="text/html; charset=UTF-8"]
+    meta charset="utf-8"
+    meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible"
+    meta[name="viewport" content="width=device-width, initial-scale=1.0"]
+    = stylesheet_link_tag("railscasts.css")
+    = stylesheet_link_tag("all")
+    = stylesheet_link_tag("scrollbar")
+    = javascript_include_tag("all")
+    javascript:
+      hljs.initHighlightingOnLoad();
+    coffee:
+      $(document).ready ->
+        $ws.actions.plot {
+          target: "default"
+          data: [-0.38,1.12,1.51,1.22,-0.41,0.12,0.71,-1.03,0.77,0.34,-0.09,-0.05,0.28,-0.04,1.62,0.42,0.19,0.66,-0.42,0.16,0.34,0.15,1.03,-0.56,1.79,-0.55,-0.53,0.25,0.69,2.57,0.71,0.8,1.09,0.56,0.16,-0.07,0.37,0.19,1.49,0.67,1.31,0.91,-0.33,-0.39,-0.13,0.13,1.37,1.82,0.7,1.06,1.02,0.68,0.03,1.48,0.07,0.78,1.6,-0.28,1.06,0.55,0.37,-0.31,0.36,0.34,0.51,-0.74,0.54,-0.54,0.93,1.29,-0.45,0.8,0.67,-0.51,0.14,1.43,1.81,0.35,0.72,0.59,1.44,0.46,0.62,0.49,0.65,0.71,0.14,2.96,-1.02,1.74,0.36,1.11,0.56,1.0,0.27,-0.5,0.52,0.12,1.49,0.73]
+          #data: [0, 1, 0, 2, 0, 1, 0]
+          id: 'ii3'
+          xscale: 0.5
+        }
+  body
+    #toolbar.hidden
+      a.tool-button[href="#"] Open
+      a.tool-button[href="#"] Save
+    #panes
+      pre#console-default.pane[style="height:100%"]
+    #dialog.hidden
+      pre#message Hi World
+      a.full-button[href="#"] Ok
+    #status
+      .left
+      .center
+      .right

data/lib/html/source/stylesheets/all.css

@@ -0,0 +1,2 @@
+//=require railscasts.css
+//=require_tree

data/lib/html/source/stylesheets/buttons.styl

@@ -0,0 +1,115 @@
+@import 'colors.styl'
+
+buttony()
+  background-color lighten($bg-color, 0%)
+  color darken($fg-color, 0%)
+  font-family Monospace
+  border $normal-border
+  padding 1em
+  text-decoration none
+  display block
+  text-align center
+  margin-top 0.5em
+  margin-bottom 0.5em
+  user-select none
+  -webkit-user-select none
+
+  &:hover
+    background-color $highlight
+  &:active
+    background-color $active-highlight
+
+.full-button
+  buttony()
+
+.inline-text-input
+  buttony()
+  text-align left
+  box-sizing border-box
+  width 100%
+  &.unclicked
+    color darken($fg-color, 50%)
+  textarea&
+    height 25em
+
+input::-webkit-input-placeholder
+    color darken($fg-color, 50%)
+
+input:focus::-webkit-input-placeholder
+      opacity 0
+
+.inline-checkbox
+  padding 0.2em
+  -webkit-user-select none
+  user-select none
+  & > span
+    vertical-align middle
+  & input[type=checkbox]
+    display: none
+  &:before
+    display inline-block
+    vertical-align middle
+    content " "
+    width 1em
+    height 1em
+    border $normal-border
+    margin-right 0.5em
+  &.checked:before
+    background-color activate($bg-color, 40%)
+  &:hover
+    background-color $highlight
+
+#toolbar
+  background-color #000
+  margin 0px
+  font-family Monospace
+  height calc(2% + 15px)
+
+.tool-button
+  float left
+  padding 0.5em
+  margin 0
+  text-decoration none
+  color $fg-color
+  border-right 1px solid
+  border-left 1px solid
+  margin-right 0.0em
+  &:hover
+    background-color #333
+
+.button-box
+  position: absolute
+  top: 0.5em
+  right: 0.5em
+  margin-right: 0.5em
+  background-color: rgba(0, 0, 0, 0.5)
+  padding: 0.5em
+  z-index: 3
+
+  & .full-button, .inline-text-input, .inline-checkbox
+    float: left
+    margin: 0
+    padding: 0.2em
+  & .full-button:active, .inline-checkbox:active
+    margin-top: 0.1em
+    margin-bottom: -0.1em
+  & .inline-text-input
+    width auto
+  & .inline-checkbox
+    border $normal-border
+    &:before
+      border 1px solid darken($fg-color, 70%)
+      height 50%
+
+.inline-button
+  buttony()
+  display inline
+
+.floating-button
+  buttony()
+  float: left
+  margin: 0
+  padding: 0.2em
+  &:active
+    margin-top: 0.1em
+    margin-bottom: -0.1em

data/lib/html/source/stylesheets/colors.styl

@@ -0,0 +1,18 @@
+activate(color, ammount)
+  if dark(color)
+    lighten(color, ammount)
+  else
+    darken(color, ammount)
+
+$bg-color = #120018
+
+if dark($bg-color)
+  $fg-color = #eee
+else
+  $fg-color = #333
+
+$highlight = activate($bg-color, 10%)
+$active-highlight = activate($bg-color, 20%)
+$normal-border = 1px solid darken($fg-color, 30%)
+$scrollbar-track-color = desaturate($active-highlight, 80%)
+$scrollbar-thumb-color = desaturate(activate($scrollbar-track-color, 30%), 20%)

data/lib/html/source/stylesheets/frontend.styl

@@ -0,0 +1,109 @@
+@charset "utf-8";
+@import 'colors.styl'
+
+body
+  background-color $bg-color
+  color $fg-color
+  padding 0px
+  margin 0px
+  height 100%
+  width 100%
+  overflow hidden
+
+html
+  padding 0px
+  height 100%
+  width 100%
+  overflow hidden
+
+a
+  text-decoration none
+
+.hidden
+  display none
+
+#status
+  background-color #000
+  margin 0px
+  padding 5px
+  padding-bottom 10px
+  font-family Monospace
+  height 2%
+  &:before
+    color #781111
+    content "Detached"
+  & > .left
+    float left
+  & > .right
+    float right
+  & > .center
+  // Not working right now
+    display none
+
+  .connected &
+    &:before
+      color #378137
+      content "Attached"
+      margin-right 2em
+      float left
+
+.pane
+  margin 0px
+  overflow auto
+  padding 8px
+  width 100%
+  height 100%
+  box-sizing: border-box;
+  word-wrap: break-word;
+  position relative
+
+.pane > .pane
+  margin -8px
+  margin-right -16px
+
+#panes
+  height calc(98% - 15px)
+  width 100%
+  box-sizing: border-box
+
+.horizontal .pane
+  height 100%
+  float left
+
+.plot
+  width 100%
+  height 100%
+  border 1px solid #333
+  margin -1px
+  overflow none
+
+#plot-mouseover
+  position absolute
+  background-color rgba(0, 0, 0, 0.5)
+  color $fg-color
+  pointer-events none
+  font-family Monospace
+
+#plot-zoom-element
+  position absolute
+  background-color rgba(0, 3, 10, 0.75)
+  pointer-events none
+  border 1px solid #012
+
+.hljs
+  background-color $bg-color
+
+#dialog
+  position absolute
+  top 10%
+  left 10%
+  width 70%
+  height 70%
+  padding 1em
+  background-color darken($bg-color, 20%)
+  border $normal-border
+  & > #message
+    margin 0
+    height calc(100% - 3em)
+  & > .full-button
+    height 1em

data/lib/html/source/stylesheets/leaflet.css

@@ -0,0 +1,478 @@
+/* required styles */
+
+.leaflet-map-pane,
+.leaflet-tile,
+.leaflet-marker-icon,
+.leaflet-marker-shadow,
+.leaflet-tile-pane,
+.leaflet-tile-container,
+.leaflet-overlay-pane,
+.leaflet-shadow-pane,
+.leaflet-marker-pane,
+.leaflet-popup-pane,
+.leaflet-overlay-pane svg,
+.leaflet-zoom-box,
+.leaflet-image-layer,
+.leaflet-layer {
+	position: absolute;
+	left: 0;
+	top: 0;
+	}
+.leaflet-container {
+	overflow: hidden;
+	-ms-touch-action: none;
+	}
+.leaflet-tile,
+.leaflet-marker-icon,
+.leaflet-marker-shadow {
+	-webkit-user-select: none;
+	   -moz-user-select: none;
+	        user-select: none;
+	-webkit-user-drag: none;
+	}
+.leaflet-marker-icon,
+.leaflet-marker-shadow {
+	display: block;
+	}
+/* map is broken in FF if you have max-width: 100% on tiles */
+.leaflet-container img {
+	max-width: none !important;
+	}
+/* stupid Android 2 doesn't understand "max-width: none" properly */
+.leaflet-container img.leaflet-image-layer {
+	max-width: 15000px !important;
+	}
+.leaflet-tile {
+	filter: inherit;
+	visibility: hidden;
+	}
+.leaflet-tile-loaded {
+	visibility: inherit;
+	}
+.leaflet-zoom-box {
+	width: 0;
+	height: 0;
+	}
+/* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */
+.leaflet-overlay-pane svg {
+	-moz-user-select: none;
+	}
+
+.leaflet-tile-pane    { z-index: 2; }
+.leaflet-objects-pane { z-index: 3; }
+.leaflet-overlay-pane { z-index: 4; }
+.leaflet-shadow-pane  { z-index: 5; }
+.leaflet-marker-pane  { z-index: 6; }
+.leaflet-popup-pane   { z-index: 7; }
+
+.leaflet-vml-shape {
+	width: 1px;
+	height: 1px;
+	}
+.lvml {
+	behavior: url(#default#VML);
+	display: inline-block;
+	position: absolute;
+	}
+
+
+/* control positioning */
+
+.leaflet-control {
+	position: relative;
+	z-index: 7;
+	pointer-events: auto;
+	}
+.leaflet-top,
+.leaflet-bottom {
+	position: absolute;
+	z-index: 1000;
+	pointer-events: none;
+	}
+.leaflet-top {
+	top: 0;
+	}
+.leaflet-right {
+	right: 0;
+	}
+.leaflet-bottom {
+	bottom: 0;
+	}
+.leaflet-left {
+	left: 0;
+	}
+.leaflet-control {
+	float: left;
+	clear: both;
+	}
+.leaflet-right .leaflet-control {
+	float: right;
+	}
+.leaflet-top .leaflet-control {
+	margin-top: 10px;
+	}
+.leaflet-bottom .leaflet-control {
+	margin-bottom: 10px;
+	}
+.leaflet-left .leaflet-control {
+	margin-left: 10px;
+	}
+.leaflet-right .leaflet-control {
+	margin-right: 10px;
+	}
+
+
+/* zoom and fade animations */
+
+.leaflet-fade-anim .leaflet-tile,
+.leaflet-fade-anim .leaflet-popup {
+	opacity: 0;
+	-webkit-transition: opacity 0.2s linear;
+	   -moz-transition: opacity 0.2s linear;
+	     -o-transition: opacity 0.2s linear;
+	        transition: opacity 0.2s linear;
+	}
+.leaflet-fade-anim .leaflet-tile-loaded,
+.leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
+	opacity: 1;
+	}
+
+.leaflet-zoom-anim .leaflet-zoom-animated {
+	-webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1);
+	   -moz-transition:    -moz-transform 0.25s cubic-bezier(0,0,0.25,1);
+	     -o-transition:      -o-transform 0.25s cubic-bezier(0,0,0.25,1);
+	        transition:         transform 0.25s cubic-bezier(0,0,0.25,1);
+	}
+.leaflet-zoom-anim .leaflet-tile,
+.leaflet-pan-anim .leaflet-tile,
+.leaflet-touching .leaflet-zoom-animated {
+	-webkit-transition: none;
+	   -moz-transition: none;
+	     -o-transition: none;
+	        transition: none;
+	}
+
+.leaflet-zoom-anim .leaflet-zoom-hide {
+	visibility: hidden;
+	}
+
+
+/* cursors */
+
+.leaflet-clickable {
+	cursor: pointer;
+	}
+.leaflet-container {
+	cursor: -webkit-grab;
+	cursor:    -moz-grab;
+	}
+.leaflet-popup-pane,
+.leaflet-control {
+	cursor: auto;
+	}
+.leaflet-dragging .leaflet-container,
+.leaflet-dragging .leaflet-clickable {
+	cursor: move;
+	cursor: -webkit-grabbing;
+	cursor:    -moz-grabbing;
+	}
+
+
+/* visual tweaks */
+
+.leaflet-container {
+	background: #ddd;
+	outline: 0;
+	}
+.leaflet-container a {
+	color: #0078A8;
+	}
+.leaflet-container a.leaflet-active {
+	outline: 2px solid orange;
+	}
+.leaflet-zoom-box {
+	border: 2px dotted #38f;
+	background: rgba(255,255,255,0.5);
+	}
+
+
+/* general typography */
+.leaflet-container {
+	font: 12px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif;
+	}
+
+
+/* general toolbar styles */
+
+.leaflet-bar {
+	box-shadow: 0 1px 5px rgba(0,0,0,0.65);
+	border-radius: 4px;
+	}
+.leaflet-bar a,
+.leaflet-bar a:hover {
+	background-color: #fff;
+	border-bottom: 1px solid #ccc;
+	width: 26px;
+	height: 26px;
+	line-height: 26px;
+	display: block;
+	text-align: center;
+	text-decoration: none;
+	color: black;
+	}
+.leaflet-bar a,
+.leaflet-control-layers-toggle {
+	background-position: 50% 50%;
+	background-repeat: no-repeat;
+	display: block;
+	}
+.leaflet-bar a:hover {
+	background-color: #f4f4f4;
+	}
+.leaflet-bar a:first-child {
+	border-top-left-radius: 4px;
+	border-top-right-radius: 4px;
+	}
+.leaflet-bar a:last-child {
+	border-bottom-left-radius: 4px;
+	border-bottom-right-radius: 4px;
+	border-bottom: none;
+	}
+.leaflet-bar a.leaflet-disabled {
+	cursor: default;
+	background-color: #f4f4f4;
+	color: #bbb;
+	}
+
+.leaflet-touch .leaflet-bar a {
+	width: 30px;
+	height: 30px;
+	line-height: 30px;
+	}
+
+
+/* zoom control */
+
+.leaflet-control-zoom-in,
+.leaflet-control-zoom-out {
+	font: bold 18px 'Lucida Console', Monaco, monospace;
+	text-indent: 1px;
+	}
+.leaflet-control-zoom-out {
+	font-size: 20px;
+	}
+
+.leaflet-touch .leaflet-control-zoom-in {
+	font-size: 22px;
+	}
+.leaflet-touch .leaflet-control-zoom-out {
+	font-size: 24px;
+	}
+
+
+/* layers control */
+
+.leaflet-control-layers {
+	box-shadow: 0 1px 5px rgba(0,0,0,0.4);
+	background: #fff;
+	border-radius: 5px;
+	}
+.leaflet-control-layers-toggle {
+	background-image: url(images/layers.png);
+	width: 36px;
+	height: 36px;
+	}
+.leaflet-retina .leaflet-control-layers-toggle {
+	background-image: url(images/layers-2x.png);
+	background-size: 26px 26px;
+	}
+.leaflet-touch .leaflet-control-layers-toggle {
+	width: 44px;
+	height: 44px;
+	}
+.leaflet-control-layers .leaflet-control-layers-list,
+.leaflet-control-layers-expanded .leaflet-control-layers-toggle {
+	display: none;
+	}
+.leaflet-control-layers-expanded .leaflet-control-layers-list {
+	display: block;
+	position: relative;
+	}
+.leaflet-control-layers-expanded {
+	padding: 6px 10px 6px 6px;
+	color: #333;
+	background: #fff;
+	}
+.leaflet-control-layers-selector {
+	margin-top: 2px;
+	position: relative;
+	top: 1px;
+	}
+.leaflet-control-layers label {
+	display: block;
+	}
+.leaflet-control-layers-separator {
+	height: 0;
+	border-top: 1px solid #ddd;
+	margin: 5px -10px 5px -6px;
+	}
+
+
+/* attribution and scale controls */
+
+.leaflet-container .leaflet-control-attribution {
+	background: #fff;
+	background: rgba(255, 255, 255, 0.7);
+	margin: 0;
+	}
+.leaflet-control-attribution,
+.leaflet-control-scale-line {
+	padding: 0 5px;
+	color: #333;
+	}
+.leaflet-control-attribution a {
+	text-decoration: none;
+	}
+.leaflet-control-attribution a:hover {
+	text-decoration: underline;
+	}
+.leaflet-container .leaflet-control-attribution,
+.leaflet-container .leaflet-control-scale {
+	font-size: 11px;
+	}
+.leaflet-left .leaflet-control-scale {
+	margin-left: 5px;
+	}
+.leaflet-bottom .leaflet-control-scale {
+	margin-bottom: 5px;
+	}
+.leaflet-control-scale-line {
+	border: 2px solid #777;
+	border-top: none;
+	line-height: 1.1;
+	padding: 2px 5px 1px;
+	font-size: 11px;
+	white-space: nowrap;
+	overflow: hidden;
+	-moz-box-sizing: content-box;
+	     box-sizing: content-box;
+
+	background: #fff;
+	background: rgba(255, 255, 255, 0.5);
+	}
+.leaflet-control-scale-line:not(:first-child) {
+	border-top: 2px solid #777;
+	border-bottom: none;
+	margin-top: -2px;
+	}
+.leaflet-control-scale-line:not(:first-child):not(:last-child) {
+	border-bottom: 2px solid #777;
+	}
+
+.leaflet-touch .leaflet-control-attribution,
+.leaflet-touch .leaflet-control-layers,
+.leaflet-touch .leaflet-bar {
+	box-shadow: none;
+	}
+.leaflet-touch .leaflet-control-layers,
+.leaflet-touch .leaflet-bar {
+	border: 2px solid rgba(0,0,0,0.2);
+	background-clip: padding-box;
+	}
+
+
+/* popup */
+
+.leaflet-popup {
+	position: absolute;
+	text-align: center;
+	}
+.leaflet-popup-content-wrapper {
+	padding: 1px;
+	text-align: left;
+	border-radius: 12px;
+	}
+.leaflet-popup-content {
+	margin: 13px 19px;
+	line-height: 1.4;
+	}
+.leaflet-popup-content p {
+	margin: 18px 0;
+	}
+.leaflet-popup-tip-container {
+	margin: 0 auto;
+	width: 40px;
+	height: 20px;
+	position: relative;
+	overflow: hidden;
+	}
+.leaflet-popup-tip {
+	width: 17px;
+	height: 17px;
+	padding: 1px;
+
+	margin: -10px auto 0;
+
+	-webkit-transform: rotate(45deg);
+	   -moz-transform: rotate(45deg);
+	    -ms-transform: rotate(45deg);
+	     -o-transform: rotate(45deg);
+	        transform: rotate(45deg);
+	}
+.leaflet-popup-content-wrapper,
+.leaflet-popup-tip {
+	background: white;
+
+	box-shadow: 0 3px 14px rgba(0,0,0,0.4);
+	}
+.leaflet-container a.leaflet-popup-close-button {
+	position: absolute;
+	top: 0;
+	right: 0;
+	padding: 4px 4px 0 0;
+	text-align: center;
+	width: 18px;
+	height: 14px;
+	font: 16px/14px Tahoma, Verdana, sans-serif;
+	color: #c3c3c3;
+	text-decoration: none;
+	font-weight: bold;
+	background: transparent;
+	}
+.leaflet-container a.leaflet-popup-close-button:hover {
+	color: #999;
+	}
+.leaflet-popup-scrolled {
+	overflow: auto;
+	border-bottom: 1px solid #ddd;
+	border-top: 1px solid #ddd;
+	}
+
+.leaflet-oldie .leaflet-popup-content-wrapper {
+	zoom: 1;
+	}
+.leaflet-oldie .leaflet-popup-tip {
+	width: 24px;
+	margin: 0 auto;
+
+	-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
+	filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
+	}
+.leaflet-oldie .leaflet-popup-tip-container {
+	margin-top: -1px;
+	}
+
+.leaflet-oldie .leaflet-control-zoom,
+.leaflet-oldie .leaflet-control-layers,
+.leaflet-oldie .leaflet-popup-content-wrapper,
+.leaflet-oldie .leaflet-popup-tip {
+	border: 1px solid #999;
+	}
+
+
+/* div icon */
+
+.leaflet-div-icon {
+	background: #fff;
+	border: 1px solid #666;
+	}