W.I.P.

Signed-off-by: kosmas58 <kosmas.schuetz@gmx.com>
kosmas58 · Sep 5, 2011 · 80485ce · 80485ce
1 parent 6c6f097
commit 80485ce
Show file tree

Hide file tree

Showing 10 changed files with 227 additions and 19 deletions.
diff --git a/app/controllers/mobile/experiments/canvas2_controller.rb b/app/controllers/mobile/experiments/canvas2_controller.rb
@@ -0,0 +1,5 @@
+class Mobile::Experiments::Canvas2Controller < ApplicationController
+  layout 'mobile'
+
+  protect_from_forgery
+end
diff --git a/app/controllers/mobile/experiments/canvas_controller.rb b/app/controllers/mobile/experiments/canvas_controller.rb
@@ -0,0 +1,5 @@
+class Mobile::Experiments::CanvasController < ApplicationController
+  layout 'mobile'
+
+  protect_from_forgery
+end
diff --git a/app/views/mobile/experiments/canvas/_index.js.haml b/app/views/mobile/experiments/canvas/_index.js.haml
@@ -0,0 +1,35 @@
+- content_for :head_stylesheets do
+  %link{:href => "/images/demo/mobile/jquery-mobile-icon.png", :rel => "apple-touch-icon"}
+= render :partial => "/mobile/docs/docs.html.haml"
+
+- content_for :head_scripts_before_mobile do
+  :javascript
+    $(function() {
+      var sizedWindowWidth = $(window).width() / 4;
+
+      $("#canvas").width(sizedWindowWidth);
+      $("#canvas").height(sizedWindowWidth);
+
+      $("#canvasDraw").click(function(){
+        var canvas = $("#canvas").get(0);
+
+        if(canvas)
+        {
+          var canvasContext = canvas.getContext('2d');
+
+          if(canvasContext)
+          {
+            canvasContext.canvas.width  = sizedWindowWidth;
+            canvasContext.canvas.height = sizedWindowWidth;
+
+            canvasContext.font = "bold 14px serif";
+            canvasContext.fillText("Canvas is supported", 10, 20);
+            canvasContext.fillStyle = "#ff0000";
+            canvasContext.font = "italic 14px sans-serif";
+            canvasContext.fillText("Hello Canvas", 30, 40);
+            canvasContext.fillStyle = "#00ff00";
+            canvasContext.fillRect(40, 50, 70, 20);
+          }
+        }
+      });
+    });
diff --git a/app/views/mobile/experiments/canvas/index.html.haml b/app/views/mobile/experiments/canvas/index.html.haml
@@ -0,0 +1,47 @@
+-@title = "jQuery Mobile Framework - Canvas"
+-@manifest = "/manifest"
+= render :partial => "index.js.haml", :format => :js
+
+.type-interior{"data-role" => "page"}
+  %div{"data-role" => "header", "data-theme" => "b"}
+    %h1 HTML5 Canvas - Example 1
+    %a.ui-btn-left{"data-icon" => "home", "data-iconpos" => "notext", :href => "/mobile/experiments/main", :rel => "external"} Home
+  / /header
+  %div{"data-role" => "content"}
+    .content-primary
+      %canvas#canvas Canvas is not supported
+      %input#canvasDraw{:type => "button", :value => "Canvas Draw"}
+    .content-secondary
+      .ui-body-b
+        %div{"data-collapsed" => "true", "data-role" => "collapsible", "data-theme" => "b"}
+          %h3 More HTML5 and CSS3 Experiments in this section
+          %ul{"data-dividertheme" => "d", "data-role" => "listview", "data-theme" => "c"}
+            %li{"data-role" => "list-divider"} HTML5 and CSS3 Experiments
+            %li{"data-theme" => "a"}
+              %a{:href => "/mobile/experiments/canvas", :rel => "external"}
+                %img.ui-li-icon{:alt => "HTML5", :src => "/images/icons/16x16/html5.png"}
+                  HTML5 - Canvas
+            %li
+              %a{:href => "/mobile/experiments/canvas2", :rel => "external"}
+                %img.ui-li-icon{:alt => "HTML5", :src => "/images/icons/16x16/html5.png"}
+                  HTML5 - Canvas 2
+            %li
+              %a{:href => "/mobile/experiments/converter", :rel => "external"}
+                %img.ui-li-icon{:alt => "HTML5", :src => "/images/icons/16x16/html5.png"}
+                  HTML5 - Offline Converter Application
+            %li
+              %a{:href => "/mobile/experiments/list_items", :rel => "external"}
+                %img.ui-li-icon{:alt => "HTML5", :src => "/images/icons/16x16/working.png"}
+                  HTML5 - Offline Shopping List (based on Railscast 248)
+            %li
+              %a{:href => "/mobile/experiments/dst_test", :rel => "external"}
+                %img.ui-li-icon{:alt => "HTML5", :src => "/images/icons/16x16/html5.png"}
+                  HTML5 - jQuery DST Plugin
+            %li
+              %a{:href => "/mobile/experiments/media_queries", :rel => "external"}
+                %img.ui-li-icon{:alt => "Tablet", :src => "/images/icons/16x16/css3.png"}
+                  CSS3 - Using Media Queries
+  / / content
+  %div{"data-role" => "footer"}
+    %h1 Test HTML5 Canvas examples
+/ / page
diff --git a/app/views/mobile/experiments/canvas2/_index.js.haml b/app/views/mobile/experiments/canvas2/_index.js.haml
@@ -0,0 +1,51 @@
+- content_for :head_stylesheets do
+  %link{:href => "/images/demo/mobile/jquery-mobile-icon.png", :rel => "apple-touch-icon"}
+= render :partial => "/mobile/docs/docs.html.haml"
+
+- content_for :head_scripts_before_mobile do
+  :javascript
+    $(function() {
+      var canvasContext;
+      resizeCanvas();
+      $(window).resize(function() { resizeCanvas() });
+
+      function resizeCanvas()
+      {
+        var w = window.innerWidth / 1.2;
+        var h = window.innerHeight / 1.2;
+        var canvasString = 'Canvas is not supported';
+
+        $('#contentholder').empty();
+        $(canvasString).appendTo('#contentholder');
+        canvasContext = $('#mainCanvas').get(0).getContext('2d');
+
+        $('#mainCanvas').bind('tap', function(event){
+          touchX = event.pageX;
+          touchY = event.pageY;
+          canvasContext.fillStyle="#0f0";
+          canvasContext.fillRect(touchX - 75, touchY - 50, 50, 50);
+
+          canvasContext.font = "20pt Arial";
+          canvasContext.fillText("X: " + touchX + " Y: " + touchY, touchX, touchY);
+        });
+      }
+    });
+
+  :css
+    #mainCanvas
+    {
+      background-color: #000;
+      border: solid 3px #0F0;
+    }
+    body
+    {
+      background: #000;
+    }
+    #contentholder
+    {
+      width: 99%;
+      height: 99%;
+      margin: 0 auto;
+      text-align: center;
+    }
+
diff --git a/app/views/mobile/experiments/canvas2/index.html.haml b/app/views/mobile/experiments/canvas2/index.html.haml
@@ -0,0 +1,46 @@
+-@title = "jQuery Mobile Framework - Canvas"
+-@manifest = "/manifest"
+= render :partial => "index.js.haml", :format => :js
+
+.type-interior{"data-role" => "page"}
+  %div{"data-role" => "header", "data-theme" => "b"}
+    %h1 HTML5 Canvas - Example 2
+    %a.ui-btn-left{"data-icon" => "home", "data-iconpos" => "notext", :href => "/mobile/experiments/main", :rel => "external"} Home
+  / /header
+  %div{"data-role" => "content"}
+    .content-primary
+      #contentholder
+    .content-secondary
+      .ui-body-b
+        %div{"data-collapsed" => "true", "data-role" => "collapsible", "data-theme" => "b"}
+          %h3 More HTML5 and CSS3 Experiments in this section
+          %ul{"data-dividertheme" => "d", "data-role" => "listview", "data-theme" => "c"}
+            %li{"data-role" => "list-divider"} HTML5 and CSS3 Experiments
+            %li
+              %a{:href => "/mobile/experiments/canvas", :rel => "external"}
+                %img.ui-li-icon{:alt => "HTML5", :src => "/images/icons/16x16/html5.png"}
+                  HTML5 - Canvas
+            %li{"data-theme" => "a"}
+              %a{:href => "/mobile/experiments/canvas2", :rel => "external"}
+                %img.ui-li-icon{:alt => "HTML5", :src => "/images/icons/16x16/html5.png"}
+                  HTML5 - Canvas 2
+            %li
+              %a{:href => "/mobile/experiments/converter", :rel => "external"}
+                %img.ui-li-icon{:alt => "HTML5", :src => "/images/icons/16x16/html5.png"}
+                  HTML5 - Offline Converter Application
+            %li
+              %a{:href => "/mobile/experiments/list_items", :rel => "external"}
+                %img.ui-li-icon{:alt => "HTML5", :src => "/images/icons/16x16/working.png"}
+                  HTML5 - Offline Shopping List (based on Railscast 248)
+            %li
+              %a{:href => "/mobile/experiments/dst_test", :rel => "external"}
+                %img.ui-li-icon{:alt => "HTML5", :src => "/images/icons/16x16/html5.png"}
+                  HTML5 - jQuery DST Plugin
+            %li
+              %a{:href => "/mobile/experiments/media_queries", :rel => "external"}
+                %img.ui-li-icon{:alt => "Tablet", :src => "/images/icons/16x16/css3.png"}
+                  CSS3 - Using Media Queries
+  / / content
+  %div{"data-role" => "footer"}
+    %h1 Test HTML5 Canvas examples
+/ / page
diff --git a/app/views/mobile/experiments/dst_test/index.html.haml b/app/views/mobile/experiments/dst_test/index.html.haml
@@ -2,7 +2,7 @@
 -@manifest = "/manifest"
 = render :partial => "index.js.haml", :format => :js
 
-#jqm.type-interior{"data-role" => "page"}
+#home.type-interior{"data-role" => "page"}
   %div{"data-role" => "header", "data-theme" => "b"}
     %a.ui-btn-right{"data-icon" => "arrow-r", "data-iconpos" => "right", "data-direction" => "slide", :href => "#native"} Native
     %h1 jQuery DST Test Page
@@ -38,33 +38,20 @@
           %input#store{:type => "button", :value => "Store"}
           %input#recall{:type => "button", :value => "Recall"}
           %input#reset{:type => "reset", :value => "Reset Form"}
+    .content-secondary
       .ui-body-b
         %div{"data-collapsed" => "true", "data-role" => "collapsible", "data-theme" => "b"}
           %h3 More HTML5 and CSS3 Experiments in this section
           %ul{"data-dividertheme" => "d", "data-role" => "listview", "data-theme" => "c"}
             %li{"data-role" => "list-divider"} HTML5 and CSS3 Experiments
             %li
-              %a{:href => "/mobile/experiments/converter", :rel => "external"}
+              %a{:href => "/mobile/experiments/canvas", :rel => "external"}
                 %img.ui-li-icon{:alt => "HTML5", :src => "/images/icons/16x16/html5.png"}
-                  HTML5 - Offline Converter Application
+                  HTML5 - Canvas
             %li
-              %a{:href => "/mobile/experiments/list_items", :rel => "external"}
-                %img.ui-li-icon{:alt => "HTML5", :src => "/images/icons/16x16/working.png"}
-                  HTML5 - Offline Shopping List (based on Railscast 248)
-            %li{"data-theme" => "a"}
-              %a{:href => "/mobile/experiments/dst_test", :rel => "external"}
+              %a{:href => "/mobile/experiments/canvas2", :rel => "external"}
                 %img.ui-li-icon{:alt => "HTML5", :src => "/images/icons/16x16/html5.png"}
-                  HTML5 - jQuery DST Plugin
-            %li
-              %a{:href => "/mobile/experiments/media_queries", :rel => "external"}
-                %img.ui-li-icon{:alt => "Tablet", :src => "/images/icons/16x16/css3.png"}
-                  CSS3 - Using Media Queries
-    .content-secondary
-      .ui-body-b
-        %div{"data-collapsed" => "true", "data-role" => "collapsible", "data-theme" => "b"}
-          %h3 More HTML5 and CSS3 Experiments in this section
-          %ul{"data-dividertheme" => "d", "data-role" => "listview", "data-theme" => "c"}
-            %li{"data-role" => "list-divider"} HTML5 and CSS3 Experiments
+                  HTML5 - Canvas 2
             %li
               %a{:href => "/mobile/experiments/converter", :rel => "external"}
                 %img.ui-li-icon{:alt => "HTML5", :src => "/images/icons/16x16/html5.png"}
@@ -121,6 +108,14 @@
           %h3 More HTML5 and CSS3 Experiments in this section
           %ul{"data-dividertheme" => "d", "data-role" => "listview", "data-theme" => "c"}
             %li{"data-role" => "list-divider"} HTML5 and CSS3 Experiments
+            %li
+              %a{:href => "/mobile/experiments/canvas", :rel => "external"}
+                %img.ui-li-icon{:alt => "HTML5", :src => "/images/icons/16x16/html5.png"}
+                  HTML5 - Canvas
+            %li
+              %a{:href => "/mobile/experiments/canvas2", :rel => "external"}
+                %img.ui-li-icon{:alt => "HTML5", :src => "/images/icons/16x16/html5.png"}
+                  HTML5 - Canvas 2
             %li
               %a{:href => "/mobile/experiments/converter", :rel => "external"}
                 %img.ui-li-icon{:alt => "HTML5", :src => "/images/icons/16x16/html5.png"}

diff --git a/app/views/mobile/experiments/list_items/index.html.haml b/app/views/mobile/experiments/list_items/index.html.haml
@@ -33,6 +33,14 @@
           %h3 More HTML5 and CSS3 Experiments in this section
           %ul{"data-dividertheme" => "d", "data-role" => "listview", "data-theme" => "c"}
             %li{"data-role" => "list-divider"} HTML5 and CSS3 Experiments
+            %li
+              %a{:href => "/mobile/experiments/canvas", :rel => "external"}
+                %img.ui-li-icon{:alt => "HTML5", :src => "/images/icons/16x16/html5.png"}
+                  HTML5 - Canvas
+            %li
+              %a{:href => "/mobile/experiments/canvas2", :rel => "external"}
+                %img.ui-li-icon{:alt => "HTML5", :src => "/images/icons/16x16/html5.png"}
+                  HTML5 - Canvas 2
             %li
               %a{:href => "/mobile/experiments/converter", :rel => "external"}
                 %img.ui-li-icon{:alt => "HTML5", :src => "/images/icons/16x16/html5.png"}

diff --git a/app/views/mobile/experiments/main/index.html.haml b/app/views/mobile/experiments/main/index.html.haml
@@ -39,6 +39,14 @@
             Weather forecast
     %ul{"data-dividertheme" => "b", "data-inset" => "true", "data-role" => "listview", "data-theme" => "c"}
       %li{"data-role" => "list-divider"} HTML5 and CSS3 Experiments
+      %li
+        %a{:href => "/mobile/experiments/canvas", :rel => "external"}
+          %img.ui-li-icon{:alt => "HTML5", :src => "/images/icons/16x16/html5.png"}
+            HTML5 - Canvas
+      %li
+        %a{:href => "/mobile/experiments/canvas2", :rel => "external"}
+          %img.ui-li-icon{:alt => "HTML5", :src => "/images/icons/16x16/html5.png"}
+            HTML5 - Canvas 2
       %li
         %a{:href => "/mobile/experiments/converter", :rel => "external"}
           %img.ui-li-icon{:alt => "HTML5", :src => "/images/icons/16x16/html5.png"}

diff --git a/app/views/mobile/experiments/media_queries/index.html.haml b/app/views/mobile/experiments/media_queries/index.html.haml
@@ -80,6 +80,14 @@
           %h3 More HTML5 and CSS3 Experiments in this section
           %ul{"data-dividertheme" => "d", "data-role" => "listview", "data-theme" => "c"}
             %li{"data-role" => "list-divider"} HTML5 and CSS3 Experiments
+            %li
+              %a{:href => "/mobile/experiments/canvas", :rel => "external"}
+                %img.ui-li-icon{:alt => "HTML5", :src => "/images/icons/16x16/html5.png"}
+                  HTML5 - Canvas
+            %li
+              %a{:href => "/mobile/experiments/canvas2", :rel => "external"}
+                %img.ui-li-icon{:alt => "HTML5", :src => "/images/icons/16x16/html5.png"}
+                  HTML5 - Canvas 2
             %li
               %a{:href => "/mobile/experiments/converter", :rel => "external"}
                 %img.ui-li-icon{:alt => "HTML5", :src => "/images/icons/16x16/html5.png"}