Permalink
Browse files

[#27601841] Thermometer scales when zoomed

Needs styling update, perhaps that can be another story,
but new code and style structure now works.
  • Loading branch information...
1 parent 0aab86c commit 9e48c1f095a55d46592e6c5d6601cdea7c9ddac6 @stepheneb stepheneb committed Apr 9, 2012
@@ -1,30 +1,42 @@
class Thermometer
- constructor: (@dom_id="#thermometer") ->
- @dom_element = d3.select(@dom_id).attr('class','thermometer')
- @width = 1
- @height = 16
- @max = 0.7
- @samples = []
-
+ constructor: (@dom_id="#thermometer", @max) ->
+ @dom_element = $(@dom_id)
+ @dom_element.addClass('thermometer')
+ @samples = [0]
@last_draw_time = new Date().getTime()
@sample_interval_ms = 250
@last_draw_time -= @sample_interval_ms
- this.init_svg()
-
- init_svg: ->
- @dom_element.style("border", "1px solid black")
- @svg = @dom_element.append("svg:svg")
- .attr("width", @width + "em")
- .attr("height",@height + "em")
- .append("svg:g")
-
- @thermometer = @svg.append('svg:rect')
- .attr("width",@width + "em")
- .attr("height", @height + "em")
- .style("fill","#f4b626")
+ this.init_view()
+
+ init_view: ->
+ @width = @dom_element.width()
+ @height = @dom_element.height()
+ midpoint = @width/2
+ @y1 = @height
+ @y2 = 0
+ @x1 = @x2 = midpoint
+ this.init_thermometer_fill()
d3.select('#therm_text').attr('class','therm_text')
+ init_thermometer_fill: ->
+ @thermometer_fill = $('<div>').addClass('thermometer_fill')
+ @dom_element.append(@thermometer_fill)
+ # @thermometer_fill.addClass('vertical')
+ this.redraw()
+
+ set_scaled_value: (v) ->
+ results = @value
+ results = results * (@max - @min)
+ results = results + @min
+ results
+
+ scaled_value: ->
+ results = @value
+ results = results * (@max - @min)
+ results = results + @min
+ results
+
time_to_redraw: ->
timestamp = new Date().getTime()
timestamp > @last_draw_time + @sample_interval_ms
@@ -45,10 +57,13 @@ class Thermometer
(this.get_avg() / @max) * @height
redraw: ->
+ @width = @dom_element.width()
+ @height = @dom_element.height()
avg = this.get_avg().toFixed(4)
value = this.scaled_display_value()
- @thermometer.attr("y", @height - value + "em")
- @thermometer.attr("height", value + "em")
+ # @thermometer_fill.attr("height", value)
+ @thermometer_fill.css("bottom", "#{value-@height}px")
+ @thermometer_fill.height("#{value}px")
@last_draw_time = new Date().getTime()
d3.select('#therm_text').text("Temperature")
@@ -258,8 +258,8 @@ controllers.simpleModelController = function(layout_style, molecule_view) {
// Setup therm, epsilon_slider & sigma_slider components ... after fluid layout
// ------------------------------------------------------------
- var therm = new Thermometer('#thermometer');
- therm.max = 25;
+ var therm = new Thermometer('#thermometer', 25);
+ // therm.max = 25;
var epsilon_slider = new SliderComponent('#attraction_slider',
function (v) {
@@ -1,13 +1,29 @@
@import 'sass/bourbon/bourbon'
.thermometer
- display: inline-block
- width: 1em
- height: 16em
- margin: 0.5em 3em 0.5em 3em
- padding: 2px
- border: 1px solid #f4b626
- border-radius: 5px
+ display: list-item
+ width: 2em
+ height: 20em
+ margin: auto
+ padding-top: 0.2em
+ padding-bottom: 0.1em
+ border: 2px solid #f4b626
+ position: relative
+ @include border-top-radius(1.0em)
+ @include border-bottom-radius(0.2em)
+ div
+ display: block
+ position: relative
+ margin: 0px
+ padding: 0px
+ .thermometer_fill
+ width: 70%
+ vertical-align: bottom
+ margin-left: auto
+ margin-right: auto
+ background: #AA0E15
+ @include border-top-radius(0.5em)
+
.therm_text
display: block

0 comments on commit 9e48c1f

Please sign in to comment.