RailsConf 2 .. fix watch resize

jschementi · May 30, 2008 · e67ba72 · e67ba72
1 parent e55165d
commit e67ba72
Show file tree

Hide file tree

Showing 10 changed files with 174 additions and 162 deletions.
diff --git a/app/controllers/render_test_controller.rb b/app/controllers/render_test_controller.rb
@@ -1,5 +1,4 @@
 class RenderTestController < ApplicationController
-  layout "posts"
 
   def ruby_action
 

diff --git a/app/views/layouts/render_test.html.erb b/app/views/layouts/render_test.html.erb
@@ -7,6 +7,11 @@
   <title>Render Test: <%= controller.action_name %></title>
   <%= stylesheet_link_tag 'scaffold' %>
   <%= silverlight_include_tag :defaults %>
+  <style type="text/css">
+  body {
+    background-color: #222;
+  }
+  </style>
 </head>
 <body>
 

diff --git a/app/views/layouts/tryruby.html.erb b/app/views/layouts/tryruby.html.erb
@@ -4,14 +4,102 @@
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
   <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
-  <title>TryRuby: <%= controller.action_name %></title>
+  <title>TryIronRuby</title>
+
   <%= stylesheet_link_tag 'scaffold' %>
-  <%= silverlight_include_tag :defaults %>
+  <style type="text/css">
+    body {
+      padding: 0px; margin: 50px; background-color: #222;
+    }
+    #code, #result, #prompt {
+      border: 0px;
+      font-size: 16px;
+      line-height: 20px;
+      font-family: "Courier New";
+      background-color: black;
+      color: #eee;
+    }
+    #code {
+      width: 500px;
+    }
+    #run {
+      display: none;
+    }
+    #run_form {
+      display: inline;
+      color: white;
+    }
+    #prompt {
+      color: yellow;
+    }
+    #console {
+      padding: 15px;
+      background-color: black;
+      height: 250px;
+      overflow: auto;
+      border: 10px solid #444;
+    }
+    #tutorial {
+      background-color: #444;
+      color: white;
+      padding: 10px;
+      font-size: 15px;
+    }
+    #tutorial h2 {
+      margin: 0px; padding: 0px;
+      border-bottom: 2px solid #666;
+      border-top: 2px solid #666;
+      background-color: #555;
+      padding: 5px;
+    }
+    #instructions {
+      padding: 10px;
+      font-family: "Courier New"
+    }
+    .warning {
+      color: white;
+      background-color: #660000;
+      padding: 10px 15px;
+      border-left: 10px solid #444;
+      border-right: 10px solid #444;
+    }
+    h1 {
+      background-color: #444;
+      color: white;
+      padding: 20px 10px;
+      margin: 0px;
+    }
+  </style>
+
   <%= javascript_include_tag :defaults %>
+  <%= javascript_include_tag 'scrolling' %>
+
+  <!-- TODO: remove this when I can hook HTML keyboard events properly -->
+  <script type="text/javascript">
+    function submitenter(myField, e) {
+      var keycode;
+      if(window.event) {
+        keycode = window.event.keyCode;
+      } else if(e) {
+        keycode = e.which;
+      } else {
+        return true;
+      }
+
+      if(keycode == 13) {
+        document.getElementById('run').click();
+        return false;
+      } else {
+        return true;
+      }
+    }
+  </script>
+
+  <%= silverlight_include_tag :defaults %>
 </head>
 <body>
 
-<%= yield  %>
+  <%= yield  %>
 
 </body>
 </html>

diff --git a/app/views/tryruby/_evaluator.rb b/app/views/tryruby/_evaluator.rb
@@ -10,7 +10,7 @@ def compute
 
 def show_result
   $d.result.append(tag("span", :id => 'prompt') { "&raquo;&nbsp;" })
-  $d.result.append(@code.empty? ? tag("br") : "#{tag("span"){ @code }}#{tag("div"){ @result.inspect }}")
+  $d.result.append(@code.empty? ? tag("br") : (tag("span"){ @code } + tag("div"){ @result.inspect }))
   $d.code.value = ""
 end
 

diff --git a/app/views/tryruby/index.html.erb b/app/views/tryruby/index.html.erb
@@ -1,141 +1,10 @@
 <%= render :partial => "evaluator" %>
 
-<style type="text/css">
-body {
-  padding: 0px; margin: 50px;
-}
-#code, #result, #prompt {
-  border: 0px;
-  font-size: 16px;
-  line-height: 20px;
-  font-family: "Courier New";
-  background-color: black;
-  color: #eee;
-}
-#code {
-  width: 500px;
-}
-#run {
-  display: none;
-}
-#run_form {
-  display: inline;
-  color: white;
-}
-#prompt {
-  color: yellow;
-}
-#console {
-  padding: 15px;
-  background-color: black;
-  height: 250px;
-  overflow: auto;
-  border: 10px solid #444;
-}
-#tutorial {
-  background-color: #444;
-  color: white;
-  padding: 10px;
-  font-size: 15px;
-}
-#tutorial h2 {
-  margin: 0px; padding: 0px;
-  border-bottom: 2px solid #666;
-  border-top: 2px solid #666;
-  background-color: #555;
-  padding: 5px;
-}
-#instructions {
-  padding: 10px;
-  font-family: "Courier New"
-}
-.warning {
-  color: white;
-  background-color: #660000;
-  padding: 10px 15px;
-  border-left: 10px solid #444;
-  border-right: 10px solid #444;
-}
-h1 {
-  background-color: #444;
-  color: white;
-  padding: 20px 10px;
-  margin: 0px;
-}
-</style>
-
-<!-- TODO: remove this when I can hook HTML keyboard events properly -->
-<script type="text/javascript">
-  function submitenter(myField, e) {
-    var keycode;
-    if(window.event) {
-      keycode = window.event.keyCode;
-    } else if(e) {
-      keycode = e.which;
-    } else {
-      return true;
-    }
-
-    if(keycode == 13) {
-      document.getElementById('run').click();
-      return false;
-    } else {
-      return true;
-    }
-  }
-</script>
-
-<!-- Scrolling that uses script.aculo.us (port to SL?) -->
-<script type="text/javascript">
-  Effect.Scroll = Class.create(); 
-  Object.extend(Object.extend(Effect.Scroll.prototype, Effect.Base.prototype), { 
-    initialize: function(element) { 
-      this.element = $(element); 
-      var options = Object.extend({ 
-        x:    0, 
-        y:    0, 
-        mode: 'absolute' 
-      } , arguments[1] || {}  ); 
-      this.start(options); 
-    }, 
-    setup: function() { 
-      if (this.options.continuous && !this.element._ext ) { 
-        this.element.cleanWhitespace(); 
-        this.element._ext=true; 
-        this.element.appendChild(this.element.firstChild); 
-      } 
-
-      this.originalLeft=this.element.scrollLeft; 
-      this.originalTop=this.element.scrollTop; 
-
-      if(this.options.mode == 'absolute') { 
-        this.options.x -= this.originalLeft; 
-        this.options.y -= this.originalTop; 
-      } else { 
-
-      } 
-    }, 
-    update: function(position) {     
-      this.element.scrollLeft = this.options.x * position + this.originalLeft; 
-      this.element.scrollTop  = this.options.y * position + this.originalTop; 
-    } 
-  }); 
-
-  function moveTo(container, element) {
-    Position.prepare();
-    container_y = Position.cumulativeOffset($(container))[1]
-    element_y = Position.cumulativeOffset($(element))[1]
-    new Effect.Scroll(container, {x:0, y:(element_y-container_y)});
-    return false;
-  }
-</script>
-
 <h1>Try IronRuby: basic</h1>
 <div class="warning">
-  <b>Very early prototype</b>: Only tested in Firefox, and there is no error handling, so 
-  any error will just hang with "..." until you type something that executes 
-  successfully. Also, the up-arrow doesn't cycle through previous commands, though sometimes you 
-  will get browser auto-complete once you start typing. =)
+  <b>Very early prototype</b>: Multi-line expressions do not work, and the error messages are only 
+  limited to the exception name. Also, the up-arrow doesn't cycle through previous commands, 
+  though sometimes you will get browser auto-complete once you start typing. =)
 </div>
 
 <div id="console">

diff --git a/app/views/watch/_rwatch.rb b/app/views/watch/_rwatch.rb
@@ -3,10 +3,17 @@
 def content
   Application.current.host.content
 end
+#root.width = HtmlPage.window.eval("screen.width").to_i
+#root.height = HtmlPage.window.eval("screen.height").to_i
 
-root.width = HtmlPage.window.eval("screen.width").to_i
-root.height = HtmlPage.window.eval("screen.height").to_i
+# Toggle indiglow =) ##########################################
+root.DayButton.mouse_left_button_down do |s, e|
+  animation = @day ? root.Night : root.Day
+  animation.begin
+  @day = !@day
+end
 
+# Side watch buttons ########################################## 
 root.BottomButton.mouse_left_button_down do |s, e|
   s.PressBottomButton.begin
   s.StartChronograph.stop
@@ -45,12 +52,8 @@ def content
   end
 end
 
-root.DayButton.mouse_left_button_down do |s, e|
-  animation = @day ? root.Night : root.Day
-  animation.begin
-  @day = !@day
-end
 =begin
+# Informational buttons #######################################
 def open_link(s, e)
   HtmlPage.window.navigate(s.tag, "_blank")
 end
@@ -66,6 +69,8 @@ def show_about
 root.AboutButton.mouse_left_button_down {|s,e| show_about}
 root.About.mouse_left_button_down {|s,e| show_about}
 =end
+
+# Fullscreen/Resizing #########################################
 root.FullScreen.mouse_left_button_down do |s,e|
   content.IsFullScreen = !content.IsFullScreen
 end
@@ -76,6 +81,20 @@ def on_resized
 content.resized {|s,e| on_resized}
 content.full_screen_changed {|s,e| on_resized}
 
+def resize(width, height)
+  return if width == 0 || height == 0
+  width = [width, HtmlPage.window.eval('screen.width').to_i].min
+  height = [height, HtmlPage.window.eval('screen.height').to_i].min
+  scalex = width / root.Watch.width
+  scaley = height / root.Watch.height
+  scale = [scalex, scaley].min
+  root.PageScale.ScaleX = scale
+  root.PageScale.ScaleY = scale
+  root.PageTranslation.x = (width - root.Watch.width * scale) / 2.0
+  root.PageTranslation.y = (height - root.Watch.height * scale) / 2.0
+end
+
+# Actual Clock logic; set up second animations ##########################
 def update_second_animation(name)
   animation = root.send(name) 
   animation.key_frames.clear
@@ -90,6 +109,7 @@ def update_second_animation(name)
   end
 end
 
+# Start the clock with "now" time #######################################
 def run
   time = DateTime.Parse(Time.now.to_s);
   root.Run.begin
@@ -98,26 +118,16 @@ def run
   root.Day.begin
 end
 
-def resize(width, height)
-  return if width == 0 || height == 0
-  width = [width, root.Watch.width].min
-  height = [height, root.Watch.height].min
-  scalex = width / root.Watch.width
-  scaley = height / root.Watch.height
-  scale = [scalex, scaley].min
-  root.PageScale.ScaleX = scale
-  root.PageScale.ScaleY = scale
-  root.PageTranslation.x = (width - root.Watch.width * scale) / 2
-  root.PageTranslation.y = (height - root.Watch.height * scale) / 2
-end
-
 @about_shown = false
 @day = true
 @top_button_pressed = false
 @bottom_button_pressed = false
 @chronograph_state = 0 # 0=stopped, 1=running, 2=paused
 
+#root.width = HtmlPage.window.eval('screen.width').to_i
+#root.height = HtmlPage.window.eval('screen.height').to_i
 resize(content.actual_width, content.actual_height)
+
 update_second_animation("SecondAnimation")
 update_second_animation("ChronographSecondAnimation")
 run
diff --git a/app/views/watch/index.html.erb b/app/views/watch/index.html.erb
@@ -1 +1 @@
-<%= render :partial => "rwatch", :properties => { :width => "100%", :height => "100%", :type => "Canvas" } %>
+<%= render :partial => "rwatch", :properties => { :width => "100%", :height => "100%", :type => "Canvas", :background => "#FF000000" } %>
diff --git a/public/index.html b/public/index.html
@@ -213,7 +213,7 @@ <h1>Demos</h1>
                 <h2>Making an appearance @ RailsConf
                 <ol>
                     <li>
-                        <h2><a href="/tryruby">TryRuby basic</a></h2>
+                        <h2><a href="/tryruby">TryIronRuby basic</a></h2>
                         <p>Ruby console in the browser, with a tutorial
                             to follow along with</p>
                     </li>