flammarion 0.0.14 → 0.1.0

data/Readme.md

@@ -3,7 +3,7 @@
 [![Gem Version](https://badge.fury.io/rb/flammarion.svg)](https://badge.fury.io/rb/flammarion)
 
 * [Source](https://github.com/zach-capalbo/flammarion)
-* [Documentation](http://zach-capalbo.github.io/flammarion/doc/)
+* [Documentation](http://zach-capalbo.github.io/flammarion/doc/Flammarion)
 
 ## Overview
 
@@ -12,7 +12,7 @@ normally display to the command line in a slightly easier-to-access way.
 
 It is not intended to be a full fledged application development toolkit. It is
 intended instead for small scripts where you just want to show some information
-without going through too much trouble.
+or buttons without going through too much trouble.
 
 ## Installation
 
@@ -28,7 +28,7 @@ gem install flammarion
 
 or add it to your Gemfile.
 
-## Documentation
+## Tutorial
 
 The easiest way to use Flammarion, is similar to how you might use STDOUT:
 
@@ -76,9 +76,8 @@ f.button("Click Here!!!") {f.puts "You clicked the button!"}
 f.input("Placeholder > ") {|msg| f.puts "You wrote: #{msg['text'].light_magenta}"}
 ```
 
-The (_almost_) full [api documetaion](http://zach-capalbo.github.io/flammarion/doc/)
-is available at <http://zach-capalbo.github.io/flammarion/doc/>. See especially
-the [Writeable Module](http://zach-capalbo.github.io/flammarion/doc/Flammarion/Writeable.html)
+The [api documetaion](http://zach-capalbo.github.io/flammarion/doc/Flammarion)
+is available at <http://zach-capalbo.github.io/flammarion/doc/Flammarion>.
 
 ## Screenshots / Samples
 
@@ -96,7 +95,7 @@ icons = %w[thumbs-up meh-o bicycle gears star-o star] + [nil] * 5
   name = Faker::Name.name
   f.pane("contacts").button(name, right_icon:icons.sample, left_icon:icons.sample) do
     recipient = name
-    f.subpane("numer").replace(name)
+    f.subpane("number").replace(name)
   end
 end
 ```

data/lib/flammarion.rb

@@ -23,8 +23,14 @@ require_relative 'flammarion/revelator.rb'
 require_relative 'flammarion/about.rb'
 require_relative 'flammarion/engraving.rb'
 
-# This is the main namespace for Flammarion.
+# This is the main namespace for Flammarion. You really need an {Engraving} to
+# do anything useful. If you just want to test that everything is setup
+# correctly, you can use {Flammarion.about}. You can find samples and
+# screenshots at https://github.com/zach-capalbo/flammarion and some examples
+# at https://github.com/zach-capalbo/flammarion/tree/master/examples
 # @see Engraving
 # @see Writeable
+# @see https://github.com/zach-capalbo/flammarion
+# @see https://github.com/zach-capalbo/flammarion/tree/master/examples
 module Flammarion
 end

data/lib/flammarion/engraving.rb

@@ -1,10 +1,10 @@
 module Flammarion
 
   # The engraving class represents a window. It contains everything you need to
-  # display on the screen and interacts with a user. An +Engraving+ contains
+  # display on the screen and interacts with a user. An {Engraving} contains
   # one or more panes, which are containers for writeable areas. Most of the
-  # power of the panes comes from the +Writeable+ module, which is also included
-  # in +Engraving+ (operating on the default pane) for convenience.
+  # power of the panes comes from the {Writeable} module, which is also included
+  # in {Engraving} (operating on the default pane) for convenience.
   # @see Writeable
   # @note Right now, there is no persistence of Engravings. Once it is closed,
   #   everything is erased, and you'll need to set it up all over again.
@@ -12,8 +12,8 @@ module Flammarion
   #   blank window, and then display that thing.
   class Engraving
     include Revelator
-    attr_reader :chrome
-    attr_accessor :callbacks, :sockets, :on_disconnect, :on_connect, :actions
+    attr_accessor :on_disconnect, :on_connect, :actions
+    attr_accessor :callbacks, :sockets # @api private
     include Writeable
 
     # Creates a new Engraving (i.e., a new display window)
@@ -56,7 +56,7 @@ module Flammarion
       sleep 1 until @sockets.empty?
     end
 
-    # Is thie Engraving displayed on the screen.
+    # Is this Engraving displayed on the screen.
     def window_open?
       not @sockets.empty?
     end

data/lib/flammarion/pane.rb

@@ -1,10 +1,13 @@
 require_relative 'writeable.rb'
 
 module Flammarion
+  # A reference to some writeable area within the {Engraving}
   # @see Writeable
+  # @see Engraving
   class Pane
-    attr_reader :pane_name
     include Writeable
+
+    # @api private
     def initialize(engraving, name, options = {})
       @engraving = engraving
       @pane_name = name

data/lib/flammarion/revelator.rb

@@ -7,6 +7,7 @@ module Flammarion
       file_path = File.absolute_path(File.join(File.dirname(__FILE__), ".."))
       file_path = `cygpath -w '#{file_path}'`.strip if RbConfig::CONFIG["host_os"] == "cygwin"
       resource = %[file\://#{file_path}/html/build/index.html]
+      resource = "http://localhost:4567/" if ENV["FLAMMARION_DEVELOPMENT"] == "true"
       chrome_path = CHROME_PATH
       chrome_path = `cygpath -u '#{CHROME_PATH}'`.strip if RbConfig::CONFIG["host_os"] == "cygwin"
       Process.detach(spawn(chrome_path, %[--app=#{resource}?path=#{@window_id}&port=#{server.port}&title="#{options[:title] || "Flammarion%20Engraving"}"]))

data/lib/flammarion/version.rb

@@ -1,3 +1,3 @@
   module Flammarion
-    VERSION = "0.0.14"
+    VERSION = "0.1.0"
   end

data/lib/flammarion/writeable.rb

@@ -1,32 +1,47 @@
 module Flammarion
   module Writeable
+    # @api private
     attr_reader :engraving
+
+    # A way to retrieve the current value of a user interacterive component.
+    # @see Writeable#input
+    # @see Writeable#checkbox
+    # @see Writeable#dropdown
     class DeferredValue < Delegator
+      # @api private
       def initialize
         super @value
       end
+
+      # @api private
       def __setobj__(value)
         @value = value
       end
 
+      # @return [Object] the current value of the remote component
       def value
         @value
       end
 
+      # @api private
       def __getobj__
         @value
       end
 
+      # @return [String] a string representing the remote component's value
       def inspect
         "#R#{@value.inspect}"
       end
 
+      # @return [Boolean] true if the component is checked and false if it is
+      #  not. Undefined if the component is not a checkbox.
       def checked?
         return @value
       end
     end
 
-    class Spectrum
+    # A representation of a plot in a writeable area. See {Writeable#plot}
+    class Plot
       attr_reader :engraving
       def initialize(id, target, engraving)
         @id = id
@@ -105,20 +120,36 @@ module Flammarion
 
     # Creates a new plot to display single axis data
     # @param [Array<Number>] values A list of numbers to plot
-    # @todo finish documenting options
-    # @return [Spectrum] A Spectrum object for manipulation after creation.
+    # @macro add_options
+    # @option options [Integer] :number_of_ticks The number of tick marks to
+    #  display across the bottom
+    # @option options [Integer] :tick_precision The number of digits after the
+    #  decimal point to display next to the tick marks
+    # @option options [Float] :xstart (0.0) The starting value for the x-axis
+    # @option options [Float, String] :ystart ('min') The starting value for the
+    #  y-axis. Can be 'min' to start at the minimum value.
+    # @option options [Boolean] :draw_zero (true) draw a line through y = 0
+    # @option options [Boolean] :draw_mark (false) place a + at each point on
+    #  the line.
+    # @option options [Boolean] :draw_line (true) draw a line through all the
+    #  points.
+    # @option options [Boolean] :fill (false) fill in the area between the curve
+    #  and zero
+    # @note You can press 'a' while hovering the plot to reset the zoom.
+    # @return [Plot] A Plot object for manipulation after creation.
     def plot(values, options = {})
       id = @engraving.make_id
       send_json({action:'plot', data:values, id:id}.merge(options))
-      return Spectrum.new(id, @pane_name, @engraving)
+      return Plot.new(id, @pane_name, @engraving)
     end
 
+    # Adds a pretty-printed, colorful display of data or code
     # @overload highlight(data, options)
     #   Adds a pretty-printed, highlighted display of data
     #   @param text [Hash, Array] A dataset to be displayed
     #   @macro escape_options
     # @overload highlight(text, options)
-    #   Adds syntax-highlighted text or code to the writeable area
+    #   Adds syntax-highlighted code to the writeable area
     #   @param text [String] Code to be highlighed
     #   @macro escape_options
     def highlight(text, options = {})
@@ -177,7 +208,7 @@ module Flammarion
     # which can be used to get the value at any time.
     # @param label [String] The displayed placeholder text for the input. This
     #  does not set the actual value of the input field or the returned
-    #  +DeferredValue+. Use the +:value+ option for that.
+    #  {DeferredValue}. Use the +:value+ option for that.
     # @option options [Boolean] :multiline (false) Creates a large text box if
     #  true; otherwise creates a single line input box.
     # @option options [Boolean] :autoclear (false) Automatically clears the
@@ -186,7 +217,7 @@ module Flammarion
     # @option options [Boolean] :history (false) Keeps track of entered values,
     #  letting the user choose betwen them with the up and down keys.
     # @option options [String] :value Sets the starting value of the field and
-    #  the returned +DeferredValue+.
+    #  the returned {DeferredValue}.
     # @option options [Boolean] :once (false) If true, then the input box will
     #  be converted into a normal line of text once the user has changed it.
     #  The callback will still be called, but the user will no longer be able
@@ -216,7 +247,7 @@ module Flammarion
     # @param items [Array<#to_s>] The possible choices
     # @overload dropdown(items, options = {})
     #  @return [DeferredValue] An object representing the currently selected
-    #   item, which can be converted to text using +#to_s+
+    #   item, which can be retrieved using {DeferredValue#value}
     # @overload dropdown(item, options = {})
     #  @yield [message_hash] Invokes the block every time the user selects a
     #   different option. Current item text can be obtained from the +"text"+
@@ -228,7 +259,9 @@ module Flammarion
         @engraving.callbacks[id] = block
       else
         d = DeferredValue.new
-        @engraving.callbacks[id] = Proc.new {|v| d.__setobj__ v["text"]}
+        d.__setobj__(items[0]) if items.is_a? Array
+        d.__setobj__(items[items.keys.first]) if items.is_a? Hash
+        @engraving.callbacks[id] = Proc.new {|v| d.__setobj__ v["value"]}
         return d
       end
     end
@@ -261,7 +294,7 @@ module Flammarion
       send_json({action:'break'}.merge(options))
     end
 
-    # Adds raw html
+    # Renders raw html into the writeable area
     def html(data)
       send_json({action:'replace', text:data, raw:true})
     end
@@ -285,13 +318,21 @@ module Flammarion
       send_json({action: 'style', attribute: attribute, value: value})
     end
 
-    # Will render the given Slim template into the pane
-    # @param file [String] Path to the template file to render
+    # Will render the given Slim template into the Writeable area. This is
+    # useful for creating complex or custom application layouts components
+    # beyond what's built into Flammarion.
+    # @note If you just want to include html (or outut from another template
+    #  engine, you can just use {#html})
+    # @param file [String] Path to the Slim file to render
+    # @see http://slim-lang.com/
     def template(file)
       data = Slim::Template.new(file).render
       send_json({action:'replace', text:data, raw:true})
     end
 
+    # Reloads a template every time the file changes. This is mostly just useful
+    # when developing a template file.
+    # @see #template
     def live_reload_template(file)
       FileWatcher.new(file).watch {|file| template(file) }
     end
@@ -342,7 +383,7 @@ module Flammarion
     #  share the same scope, so you want to be careful with your naming.
     # @return [Pane] The newly created or already existing pane.
     # @macro pane_difference
-    # @see pane
+    # @see #pane
     def subpane(name, options = {})
       send_json({action:'subpane', name:name}.merge(options))
       return Pane.new(@engraving, name)
@@ -354,18 +395,33 @@ module Flammarion
     #  share the same scope, so you want to be careful with your naming.
     # @return [Pane] The newly created or already existing pane.
     # @macro pane_difference
-    # @see pane
-    # @see orientation=
+    # @see #pane
+    # @see #orientation=
     def pane(name, options = {})
       send_json({action:'addpane', name:name}.merge(options))
       return Pane.new(@engraving, name)
     end
 
+    # Changes the orientation of the panes within this Writeable area. If
+    # +orientation+ is +:vertical+ (the default), the panes will be stacked on
+    # top of each other, each occupying 1/nth of the height (where n is the
+    # number of panes) and 100% of the width. If +orientation+ is +:horizontal+,
+    # the panes will be placed next to each other, with each pane occupying 1/n of
+    # the width (where n is the number of panes) and 100% of the heigh.
+    # @note This applies only to panes, not to subpanes.
+    # @see #pane
+    # @param orientation [Symbol]  can be +:horizontal+ or +:vertical+
+    # @raise ArgumentError if the orientation is not one of the allowed values
     def orientation=(orientation)
       raise ArgumentError.new("Orientation must be :horizontal or :vertical") unless [:horizontal, :vertical].include?(orientation)
       send_json({action:'reorient', orientation:orientation})
     end
 
+    # Pops up a little floating writeable pane for buttons and stuff.
+    # @overload button_box()
+    #  @return [Pane] The {Writeable} associated with the button box
+    # @overload button_box(name)
+    #  @deprecated
     def button_box(name = "buttonbox")
       send_json({action:'buttonbox', name:name})
       return Pane.new(@engraving, name)
@@ -383,14 +439,25 @@ module Flammarion
       @engraving.send_json({action:'status', text: str}.merge(options))
     end
 
+    # Displays a table of data
+    # @param rows [Array<Array<#to_s>>] an array of rows, where each row is an
+    #  array of objects which will be converted to a string and diplayed in the
+    #  table.
+    # @macro escape_options
+    # @option options [Array<#to_s>] :headers An array of column headers to put
+    #  at the top of the table.
+    # @option options [Boolean] :interactive (true) Allows the user to mouse
+    #  over the table and have it styled. Set to false if you experience
+    #  performance issues with large datasets.
     def table(rows, options = {})
       send_json({action:'table', rows: rows}.merge(options))
     end
 
     # Prompts the user for a sting. Blocks until a string has been entered.
     # @param prompt [String] A prompt to tell the user what to input.
-    # @param options (See #input)
+    # @param options Same as {#input}
     # @return [String] The text that the user has entered.
+    # @see #input
     def gets(prompt = "", options = {})
       str = nil
       input(prompt, {once:true, focus:true}.merge(options)) {|msg| str = msg["text"]}
@@ -432,6 +499,7 @@ module Flammarion
       send_json({action:'map'}.merge(options))
     end
 
+    # Searches for and highlights the string in the engraving.
     def search(string)
       send_json({action:'search', text: string})
     end

data/lib/html/build/index.html

@@ -1 +1 @@
-<!DOCTYPE html><html><head><meta content="text/html; charset=UTF-8" http-equiv="content-type" /><meta charset="utf-8" /><meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible" /><meta content="width=device-width, initial-scale=1.0" name="viewport" /><title>Flammarion</title><link href="stylesheets/all.css" rel="stylesheet" type="text/css" /><script src="javascripts/all.js" type="text/javascript"></script><script>hljs.initHighlightingOnLoad();</script></head><body><div class="hidden" id="toolbar"><a class="tool-button" href="#">Open</a><a class="tool-button" href="#">Save</a></div><div id="panes"><pre class="pane" id="console-default" style="height:100%"></pre></div><div class="hidden" id="dialog"><div id="content"><pre id="message">Hi World</pre><a class="full-button" href="#" id="ok">Ok</a></div></div><div id="status"><div class="left"></div><div class="center"></div><div class="right"></div></div><div class="hidden" id="searchbar"><i class="fa fa-search"></i><input /></div></body></html>
+<!DOCTYPE html><html><head><meta content="text/html; charset=UTF-8" http-equiv="content-type" /><meta charset="utf-8" /><meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible" /><meta content="width=device-width, initial-scale=1.0" name="viewport" /><title>Flammarion</title><link href="stylesheets/all.css" rel="stylesheet" type="text/css" /><script src="javascripts/all.js" type="text/javascript"></script><script>hljs.initHighlightingOnLoad();</script></head><body><div class="hidden" id="toolbar"><a class="tool-button" href="#">Open</a><a class="tool-button" href="#">Save</a></div><div id="panes"><pre class="pane" id="console-default" style="height:100%"></pre></div><div class="hidden" id="dialog"><div id="content"><pre id="message">Hi World</pre><a class="full-button" href="#" id="ok">Ok</a></div></div><div id="status"><div class="left"></div><div class="center"></div><div class="right"></div></div><div class="hidden" id="searchbar"><i class="fa fa-search"></i><input /></div><div class="hidden" id="plot-style"><div class="tickmarks"></div><div class="markers"></div><div class="zero"></div></div></body></html>

data/lib/html/build/javascripts/all.js

@@ -7177,20 +7177,37 @@ if (typeof module !== 'undefined') {
       return target.append(element);
     },
     dropdown: function(data) {
-      var element, item, j, len, ref, target;
+      var element, item, j, k, len, option, ref, ref1, target, v;
       target = this.__parent.check_target(data);
       element = $("<select class='inline-dropdown' name='" + data.id + "'></select>");
-      ref = data.options;
-      for (j = 0, len = ref.length; j < len; j++) {
-        item = ref[j];
-        element.append($("<option>" + item + "</option>"));
+      console.log(data.options);
+      if (data.options instanceof Array) {
+        ref = data.options;
+        for (j = 0, len = ref.length; j < len; j++) {
+          item = ref[j];
+          element.append($("<option>" + item + "</option>"));
+        }
+      } else {
+        ref1 = data.options;
+        for (k in ref1) {
+          v = ref1[k];
+          option = $("<option>" + k + "</option>");
+          option.val(JSON.stringify(v));
+          element.append(option);
+        }
       }
       element.change((function(_this) {
         return function(e) {
+          var val;
+          val = element.find('option:selected').text();
+          if (element.find('option:selected')[0].value) {
+            val = $.parseJSON(element.find('option:selected')[0].value);
+          }
           return _this.__parent.send({
             id: data.id,
             action: 'callback',
             source: 'dropdown',
+            value: val,
             text: element.find('option:selected').text()
           });
         };
@@ -7281,9 +7298,9 @@ if (typeof module !== 'undefined') {
     }
   });
 
-  Plot = (function() {
-    Plot.prototype.default_options = {
-      color: $(document.body).css("color"),
+  $(document).ready(function() {
+    return Plot.prototype.default_options = {
+      color: $('#plot-style').css("color"),
       replace: true,
       size: 1.0,
       orientation: 'vertical',
@@ -7291,16 +7308,22 @@ if (typeof module !== 'undefined') {
       yscale: 1.0,
       tick_height: 15,
       number_of_ticks: 10,
-      tick_color: "rgba(255,255,255,0.5)",
+      tick_color: $("#plot-style > .tickmarks").css("color"),
       tick_precision: 2,
       id: "spec0",
       draw_zero: true,
       fill_color: null,
       draw_line: true,
       draw_marker: false,
-      marker_color: '#88F'
+      marker_color: $("#plot-style > .markers").css("color"),
+      ystart: 'min',
+      fill: false,
+      fill_color: $('#plot-style').css("background-color"),
+      zero_color: $('#plot-style > .zero').css("color")
     };
+  });
 
+  Plot = (function() {
     Plot.prototype.parse_property = function(prop) {
       return parseInt(prop.slice(0, -1));
     };
@@ -7329,7 +7352,7 @@ if (typeof module !== 'undefined') {
       mouse_x_value = relative_x_pos * this.xscaled_end_value + (1.0 - relative_x_pos) * this.xscaled_start_value;
       mouse_x_value = mouse_x_value * this.xvalue_scale;
       mouse_y_value = relative_y_pos * this.yscaled_end_value + (1.0 - relative_y_pos) * this.yscaled_start_value;
-      this.mouse_element.text((mouse_x_value.toFixed(2)) + ". " + (mouse_y_value.toFixed(2)));
+      this.mouse_element.text((mouse_x_value.toFixed(2)) + ", " + (mouse_y_value.toFixed(2)));
       if (this.mouse_is_down) {
         return this.move_zoom(event);
       }
@@ -7367,7 +7390,6 @@ if (typeof module !== 'undefined') {
       relative_yend_pos = 1.0 - (zoom_yend_pixel / this.plot_height);
       zoom_ystart_value = relative_ystart_pos * this.yscaled_end_value + (1.0 - relative_ystart_pos) * this.yscaled_start_value;
       zoom_yend_value = relative_yend_pos * this.yscaled_end_value + (1.0 - relative_yend_pos) * this.yscaled_start_value;
-      console.log(zoom_ystart_value, zoom_yend_value);
       return this.zoom_to(zoom_xstart_value, zoom_xend_value, zoom_ystart_value, zoom_yend_value);
     };
 
@@ -7474,11 +7496,14 @@ if (typeof module !== 'undefined') {
       this.ctx.moveTo(this.x_value_to_pixel(0), this.y_value_to_pixel(data[0]));
       this.ctx.closePath();
       this.ctx.fillStyle = this.options.fill_color;
-      if (this.options.fill_color) {
+      if (this.options.fill_color && this.options.fill) {
         this.ctx.fill();
       }
       this.ctx.stroke();
-      return this.draw_ticks();
+      this.draw_ticks();
+      if (this.options.draw_zero) {
+        return this.draw_zero();
+      }
     };
 
     Plot.prototype.draw_ticks = function() {
@@ -7510,6 +7535,14 @@ if (typeof module !== 'undefined') {
       return this.ctx.stroke();
     };
 
+    Plot.prototype.draw_zero = function() {
+      this.ctx.strokeStyle = this.options.zero_color;
+      this.ctx.beginPath();
+      this.ctx.moveTo(0, this.y_value_to_pixel(0));
+      this.ctx.lineTo(this.canvas_width, this.y_value_to_pixel(0));
+      return this.ctx.stroke();
+    };
+
     Plot.prototype.update = function(data) {
       this.data = data.data;
       $.extend(this.options, data);

data/lib/html/build/javascripts/input.js

@@ -357,20 +357,37 @@ void 0===c?d&&"get"in d&&null!==(e=d.get(a,b))?e:(e=n.find.attr(a,b),null==e?voi
       return target.append(element);
     },
     dropdown: function(data) {
-      var element, item, j, len, ref, target;
+      var element, item, j, k, len, option, ref, ref1, target, v;
       target = this.__parent.check_target(data);
       element = $("<select class='inline-dropdown' name='" + data.id + "'></select>");
-      ref = data.options;
-      for (j = 0, len = ref.length; j < len; j++) {
-        item = ref[j];
-        element.append($("<option>" + item + "</option>"));
+      console.log(data.options);
+      if (data.options instanceof Array) {
+        ref = data.options;
+        for (j = 0, len = ref.length; j < len; j++) {
+          item = ref[j];
+          element.append($("<option>" + item + "</option>"));
+        }
+      } else {
+        ref1 = data.options;
+        for (k in ref1) {
+          v = ref1[k];
+          option = $("<option>" + k + "</option>");
+          option.val(JSON.stringify(v));
+          element.append(option);
+        }
       }
       element.change((function(_this) {
         return function(e) {
+          var val;
+          val = element.find('option:selected').text();
+          if (element.find('option:selected')[0].value) {
+            val = $.parseJSON(element.find('option:selected')[0].value);
+          }
           return _this.__parent.send({
             id: data.id,
             action: 'callback',
             source: 'dropdown',
+            value: val,
             text: element.find('option:selected').text()
           });
         };

data/lib/html/build/javascripts/plot.js

@@ -23,9 +23,9 @@
     }
   });
 
-  Plot = (function() {
-    Plot.prototype.default_options = {
-      color: $(document.body).css("color"),
+  $(document).ready(function() {
+    return Plot.prototype.default_options = {
+      color: $('#plot-style').css("color"),
       replace: true,
       size: 1.0,
       orientation: 'vertical',
@@ -33,16 +33,22 @@
       yscale: 1.0,
       tick_height: 15,
       number_of_ticks: 10,
-      tick_color: "rgba(255,255,255,0.5)",
+      tick_color: $("#plot-style > .tickmarks").css("color"),
       tick_precision: 2,
       id: "spec0",
       draw_zero: true,
       fill_color: null,
       draw_line: true,
       draw_marker: false,
-      marker_color: '#88F'
+      marker_color: $("#plot-style > .markers").css("color"),
+      ystart: 'min',
+      fill: false,
+      fill_color: $('#plot-style').css("background-color"),
+      zero_color: $('#plot-style > .zero').css("color")
     };
+  });
 
+  Plot = (function() {
     Plot.prototype.parse_property = function(prop) {
       return parseInt(prop.slice(0, -1));
     };
@@ -71,7 +77,7 @@
       mouse_x_value = relative_x_pos * this.xscaled_end_value + (1.0 - relative_x_pos) * this.xscaled_start_value;
       mouse_x_value = mouse_x_value * this.xvalue_scale;
       mouse_y_value = relative_y_pos * this.yscaled_end_value + (1.0 - relative_y_pos) * this.yscaled_start_value;
-      this.mouse_element.text((mouse_x_value.toFixed(2)) + ". " + (mouse_y_value.toFixed(2)));
+      this.mouse_element.text((mouse_x_value.toFixed(2)) + ", " + (mouse_y_value.toFixed(2)));
       if (this.mouse_is_down) {
         return this.move_zoom(event);
       }
@@ -109,7 +115,6 @@
       relative_yend_pos = 1.0 - (zoom_yend_pixel / this.plot_height);
       zoom_ystart_value = relative_ystart_pos * this.yscaled_end_value + (1.0 - relative_ystart_pos) * this.yscaled_start_value;
       zoom_yend_value = relative_yend_pos * this.yscaled_end_value + (1.0 - relative_yend_pos) * this.yscaled_start_value;
-      console.log(zoom_ystart_value, zoom_yend_value);
       return this.zoom_to(zoom_xstart_value, zoom_xend_value, zoom_ystart_value, zoom_yend_value);
     };
 
@@ -216,11 +221,14 @@
       this.ctx.moveTo(this.x_value_to_pixel(0), this.y_value_to_pixel(data[0]));
       this.ctx.closePath();
       this.ctx.fillStyle = this.options.fill_color;
-      if (this.options.fill_color) {
+      if (this.options.fill_color && this.options.fill) {
         this.ctx.fill();
       }
       this.ctx.stroke();
-      return this.draw_ticks();
+      this.draw_ticks();
+      if (this.options.draw_zero) {
+        return this.draw_zero();
+      }
     };
 
     Plot.prototype.draw_ticks = function() {
@@ -252,6 +260,14 @@
       return this.ctx.stroke();
     };
 
+    Plot.prototype.draw_zero = function() {
+      this.ctx.strokeStyle = this.options.zero_color;
+      this.ctx.beginPath();
+      this.ctx.moveTo(0, this.y_value_to_pixel(0));
+      this.ctx.lineTo(this.canvas_width, this.y_value_to_pixel(0));
+      return this.ctx.stroke();
+    };
+
     Plot.prototype.update = function(data) {
       this.data = data.data;
       $.extend(this.options, data);

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

@@ -665,6 +665,11 @@ html {
   height: 100%;
   width: 100%;
   overflow: hidden;
+  padding: 2px;
+  padding-bottom: 0px;
+  height: calc(100% - 2px);
+  width: calc(100% - 4px);
+  box-shadow: inset 0px 0px 2px 2px #bebebe;
 }
 a {
   text-decoration: none;
@@ -708,34 +713,10 @@ p a:hover {
   width: 100%;
   box-sizing: border-box;
 }
-html {
-  padding-top: 2px;
-  box-shadow: inset 0px 0px 2px 2px #bebebe;
-}
 .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: #333;
-  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;
-}
 hr {
   width: 95%;
   background-color: #333;
@@ -3318,6 +3299,41 @@ hr {
   max-width: 45em;
   margin: auto;
 }
+.plot {
+  width: 100%;
+  height: 100%;
+  border: 1px solid #333;
+  margin: -1px;
+  overflow: none;
+}
+#plot-mouseover {
+  position: absolute;
+  background-color: rgba(190,190,190,0.5);
+  color: #333;
+  pointer-events: none;
+  font-family: Monospace;
+  padding: 0.25em;
+  box-shadow: 2px 2px 4px 2px #bebebe;
+}
+#plot-zoom-element {
+  position: absolute;
+  background-color: rgba(0,3,10,0.75);
+  pointer-events: none;
+  border: 1px solid #012;
+}
+#plot-style {
+  color: #333;
+  background-color: #d6d6d6;
+}
+#plot-style .tickmarks {
+  color: #707070;
+}
+#plot-style .markers {
+  color: #707070;
+}
+#plot-style .zero {
+  color: rgba(190,190,190,0.75);
+}
 ::-webkit-scrollbar {
   width: 0.666em;
   height: 0.666em;

data/lib/html/build/stylesheets/engraving.css

@@ -19,6 +19,11 @@ html {
   height: 100%;
   width: 100%;
   overflow: hidden;
+  padding: 2px;
+  padding-bottom: 0px;
+  height: calc(100% - 2px);
+  width: calc(100% - 4px);
+  box-shadow: inset 0px 0px 2px 2px #bebebe;
 }
 a {
   text-decoration: none;
@@ -62,34 +67,10 @@ p a:hover {
   width: 100%;
   box-sizing: border-box;
 }
-html {
-  padding-top: 2px;
-  box-shadow: inset 0px 0px 2px 2px #bebebe;
-}
 .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: #333;
-  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;
-}
 hr {
   width: 95%;
   background-color: #333;

data/lib/html/build/stylesheets/plot.css

@@ -0,0 +1,35 @@
+.plot {
+  width: 100%;
+  height: 100%;
+  border: 1px solid #333;
+  margin: -1px;
+  overflow: none;
+}
+#plot-mouseover {
+  position: absolute;
+  background-color: rgba(190,190,190,0.5);
+  color: #333;
+  pointer-events: none;
+  font-family: Monospace;
+  padding: 0.25em;
+  box-shadow: 2px 2px 4px 2px #bebebe;
+}
+#plot-zoom-element {
+  position: absolute;
+  background-color: rgba(0,3,10,0.75);
+  pointer-events: none;
+  border: 1px solid #012;
+}
+#plot-style {
+  color: #333;
+  background-color: #d6d6d6;
+}
+#plot-style .tickmarks {
+  color: #707070;
+}
+#plot-style .markers {
+  color: #707070;
+}
+#plot-style .zero {
+  color: rgba(190,190,190,0.75);
+}

data/lib/html/source/index.html.slim

@@ -32,3 +32,7 @@ html
     #searchbar.hidden
       i.fa.fa-search 
       input
+    #plot-style.hidden
+      .tickmarks
+      .markers
+      .zero

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

@@ -106,12 +106,23 @@ $.extend WSClient.prototype.actions,
   dropdown: (data) ->
     target = @__parent.check_target(data)
     element = $("<select class='inline-dropdown' name='#{data.id}'></select>")
-    element.append($("<option>#{item}</option>")) for item in data.options
+    console.log data.options
+    if data.options instanceof Array
+      element.append($("<option>#{item}</option>")) for item in data.options
+    else
+      for k, v of data.options
+        option = $("<option>#{k}</option>")
+        option.val(JSON.stringify(v))
+        element.append(option)
     element.change (e) =>
+      val = element.find('option:selected').text()
+      if element.find('option:selected')[0].value
+        val = $.parseJSON(element.find('option:selected')[0].value)
       @__parent.send({
         id:data.id
         action:'callback'
         source:'dropdown'
+        value: val
         text: element.find('option:selected').text()
         })
     @__parent.add(element, target, data)

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

@@ -11,25 +11,30 @@ $.extend WSClient.prototype.actions,
     else
       @__plots[data.id] = new Plot(target, @__parent, data)
 
-class Plot
-  default_options:
-    color: $(document.body).css("color")
-    replace: true
-    size: 1.0
-    orientation: 'vertical'
-    xscale: 1.0
-    yscale: 1.0
-    tick_height: 15
-    number_of_ticks: 10
-    tick_color: "rgba(255,255,255,0.5)"
-    tick_precision: 2
-    id: "spec0"
-    draw_zero: true
-    fill_color: null
-    draw_line: true
-    draw_marker: false
-    marker_color: '#88F'
+$(document).ready ->
+    Plot.prototype.default_options =
+      color: $('#plot-style').css("color")
+      replace: true
+      size: 1.0
+      orientation: 'vertical'
+      xscale: 1.0
+      yscale: 1.0
+      tick_height: 15
+      number_of_ticks: 10
+      tick_color: $("#plot-style > .tickmarks").css("color")
+      tick_precision: 2
+      id: "spec0"
+      draw_zero: true
+      fill_color: null
+      draw_line: true
+      draw_marker: false
+      marker_color: $("#plot-style > .markers").css("color")
+      ystart: 'min'
+      fill: false
+      fill_color: $('#plot-style').css("background-color")
+      zero_color: $('#plot-style > .zero').css("color")
 
+class Plot
   parse_property: (prop) ->
     parseInt(prop.slice(0, -1))
 
@@ -54,7 +59,7 @@ class Plot
     mouse_x_value = relative_x_pos * @xscaled_end_value + (1.0 - relative_x_pos) * @xscaled_start_value
     mouse_x_value = mouse_x_value * @xvalue_scale
     mouse_y_value = relative_y_pos * @yscaled_end_value + (1.0 - relative_y_pos) * @yscaled_start_value
-    @mouse_element.text "#{mouse_x_value.toFixed(2)}. #{mouse_y_value.toFixed(2)}"
+    @mouse_element.text "#{mouse_x_value.toFixed(2)}, #{mouse_y_value.toFixed(2)}"
 
     @move_zoom(event) if @mouse_is_down
 
@@ -94,7 +99,7 @@ class Plot
     zoom_ystart_value = relative_ystart_pos * @yscaled_end_value + (1.0 - relative_ystart_pos) * @yscaled_start_value
     zoom_yend_value = relative_yend_pos * @yscaled_end_value + (1.0 - relative_yend_pos) * @yscaled_start_value
 
-    console.log zoom_ystart_value, zoom_yend_value
+    # console.log zoom_ystart_value, zoom_yend_value
 
     @zoom_to(zoom_xstart_value, zoom_xend_value, zoom_ystart_value, zoom_yend_value)
 
@@ -178,9 +183,10 @@ class Plot
     @ctx.closePath()
 
     @ctx.fillStyle = @options.fill_color
-    @ctx.fill() if @options.fill_color
+    @ctx.fill() if @options.fill_color and @options.fill
     @ctx.stroke()
     @draw_ticks()
+    @draw_zero() if @options.draw_zero
 
   draw_ticks: ->
     @ctx.font = "#{@options.tick_height - 3}px Monospace";
@@ -210,6 +216,13 @@ class Plot
     @ctx.lineTo(@canvas_width, @plot_height)
     @ctx.stroke()
 
+  draw_zero: ->
+    @ctx.strokeStyle = @options.zero_color
+    @ctx.beginPath()
+    @ctx.moveTo(0, @y_value_to_pixel(0))
+    @ctx.lineTo(@canvas_width, @y_value_to_pixel(0))
+    @ctx.stroke()
+
   update: (data) ->
     @data = data.data
     $.extend @options, data

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

@@ -18,6 +18,13 @@ html
   width 100%
   overflow hidden
 
+  if $enable-gradients
+    padding 2px
+    padding-bottom 0px
+    height calc(100% - 2px)
+    width calc(100% - 4px)
+    box-shadow-inset()
+
 a
   text-decoration none
   p &
@@ -52,35 +59,10 @@ a
   width 100%
   box-sizing: border-box
 
-html
-  if $enable-gradients
-    padding-top 2px
-    box-shadow-inset()
-
 .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
-
 hr
   width 95%
   background-color $fg-color

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

@@ -0,0 +1,36 @@
+@import "mixins.styl"
+@import "colors.styl"
+
+.plot
+  width 100%
+  height 100%
+  border 1px solid #333
+  margin -1px
+  overflow none
+
+#plot-mouseover
+  position absolute
+  background-color rgba($active-highlight, 0.5)
+  color $fg-color
+  pointer-events none
+  font-family Monospace
+  padding 0.25em
+  drop-shadow()
+
+#plot-zoom-element
+  position absolute
+  background-color rgba(0, 3, 10, 0.75)
+  pointer-events none
+  border 1px solid #012
+
+// Note: You have to add a div with each of these to
+// index.html.slim for this to take effect.
+#plot-style
+  color $fg-color
+  background-color activate($bg-color, 10%)
+  & .tickmarks
+    color activate($fg-color, 30%)
+  & .markers
+    color activate($fg-color, 30%)
+  & .zero
+    color rgba(activate($bg-color, 20%), 0.75)

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: flammarion
 version: !ruby/object:Gem::Version
-  version: 0.0.14
+  version: 0.1.0
   prerelease: 
 platform: ruby
 authors:
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2015-11-21 00:00:00.000000000 Z
+date: 2016-01-01 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: em-websocket
@@ -183,6 +183,7 @@ files:
 - lib/html/source/layouts/layout.erb
 - lib/html/source/stylesheets/scrollbar.styl
 - lib/html/source/stylesheets/normalize.bak
+- lib/html/source/stylesheets/plot.styl
 - lib/html/source/stylesheets/leaflet.css
 - lib/html/source/stylesheets/buttons.styl
 - lib/html/source/stylesheets/all.css
@@ -242,6 +243,7 @@ files:
 - lib/html/build/stylesheets/map.css
 - lib/html/build/stylesheets/buttons.css
 - lib/html/build/stylesheets/code.css
+- lib/html/build/stylesheets/plot.css
 - lib/html/build/stylesheets/status.css
 - lib/html/build/stylesheets/ansi_colors.css
 - lib/html/build/stylesheets/font-awesome/HELP-US-OUT.txt