9 Replies Latest reply on Jul 25, 2015 10:19 AM by MengChang Xiao

    How to use canvas in view?

    MengChang Xiao

      There is no explanation on how to get DOM object.

      Anyone can tell me how to do it?

      I want to use canvas in view, I know it is a little strange,but RHO can interact with COMM / bluetooth/camera/light ..., then ,can't access DOM! it is impossible.

        • Re: How to use canvas in view?
          Pietro Francesco Maggi

          You can access the DOM from JavaScript as always, putting/including your code in the *.erb files.

          It's true that there's no API from Ruby, but this is not what you usually do on the "server side" of a Rhodes application.


          ~Pietro

            • Re: How to use canvas in view?
              MengChang Xiao

              So, we can mix JS & RubyScript in .erb files?

              Later I will test.

               

              But,I have to say,ruby scripts in .erb can't access DOM, it is a serious weak point, it should be resolved in the future.

               

               

              Thank you.

                • Re: Re: How to use canvas in view?
                  Jon Tara

                  So, we can mix JS & RubyScript in .erb files?

                  You can, but it's best not to. Don't write your JS directly in the .erb file. Put your JS in a .js file, and link from the .erb.

                  But,I have to say,ruby scripts in .erb can't access DOM, it is a serious weak point, it should be resolved in the future.

                  It is true that Ruby scripts in the .erb can't access the DOM. It would be impossible for them to do so!

                   

                  Keep in mind, the .erb is just a template. It CREATES an HTML page, which is then sent to the webview (browser control). You can do anything you can do in a browser.

                   

                  When you build your project, Rhodes build system creates Ruby code from your .erb. It creates a Ruby method that uses the parameters and embedded ERB markup to create an HTML page in a string. That Ruby code is further compiled to Ruby bytecode and that compiled Ruby bytecode becomes part of the runnable application.

                   

                  When the browser requests a page, the controller calls the Ruby method that was created from the .erb, and the browser gets the HTML that the Ruby method created. As far as that Ruby method is concerned, it is only creating a string. It has one job - take the template, parameters, and ERB markup, and make a string from it.


                  To the browser, it is only requesting a page of HTML, it doesn't care of know how the page was created.

                   

                  Once it is a page in the browser, it is treated like any other page. It doesn't matter where it came from. Nothing about HTML/CSS/JS presentation or execution happens in the Rhodes controller or in the .erb itself.

                   

                  Can you see, now, why a Ruby script in the .erb cannot access the DOM? It's because when the Ruby method (compiled .erb) runs, the DOM doesn't exist yet. The .erb and any Ruby code you write in it is only making the page that will be loaded into the browser in a few moments. Time travel - even for a few moments into the future - is not something we have solved yet. If Zebra manages, though, they will get the Nobel Prize!

                    • Re: How to use canvas in view?
                      MengChang Xiao

                      Nice explanation, I got it.

                      But, rho still can deal with JS, I don't know the backgrounds, but I'm sure rho can get rid of JS.

                      Pure ruby world is better,I believe.

                      For it is difficult to across JS-context and RS-context, and sometimes we need to keep the same context.

                       

                      But all of us should admit : Internet is a mixture, so, that is natural for rho is mixture too. 

                • Re: How to use canvas in view?
                  Jon Tara

                  You can use any native browser (webview) API, including canvas API. You can use native browser APIs or jQuery (assuming you load jQuery) to find DOM objects. Of course, you need to do this in Javascript, you don't have access from Ruby controller, except by using WebView.executeJavascript() to run some JS code. (Probably just call your defined function(s).

                   

                  Rhodes itself has no specific functionality for canvas or DOM objects, beyond what is offered by the native Javascript APIs and whatever additional Javascript libraries that you load.

                   

                  Availability will depend on specific device platform. It will be implemented on all modern devices.

                   

                  Canvas API at MDN:

                   

                      Canvas API - Web API Interfaces | MDN

                   

                  miAudit-ECNC in the RhoMobile App Gallery shows what's possible in a Rhodes app using the canvas.

                  1 of 1 people found this helpful
                  • Re: How to use canvas in view?
                    Robert Galvin

                    There are a few Canvas.js based JS frameworks out there so you do not have to recreate the wheel.

                     

                    I have used: Konva - JavaScript 2d canvas framework on numerous projects and it seems to work quite nicely.

                    1 of 1 people found this helpful
                      • Re: How to use canvas in view?
                        MengChang Xiao

                        Rob:

                        How to compose the knova with Rho?

                        Just include the knova.js in .erb files?

                        • Re: How to use canvas in view?
                          MengChang Xiao

                          whatis wrong? show nothing:

                           

                          <!DOCTYPE html>

                          <html>

                          <head>

                              <script src="https://cdn.rawgit.com/konvajs/konva/0.9.5/konva.min.js"></script>

                              <meta charset="utf-8">

                              <title>Konva Animate Position Demo</title>

                              <style>

                                  body {

                                      margin: 0;

                                      padding: 0;

                                      overflow: hidden;

                                      background-color: #F0F0F0;

                                  }

                              </style>

                          </head>

                          <body>

                          <div id="container"></div>

                          <script>

                              var width = window.innerWidth;

                              var height = window.innerHeight;

                           

                           

                              var stage = new Konva.Stage({

                                  container: 'container',

                                  width: width,

                                  height: height

                              });

                           

                           

                              var layer = new Konva.Layer();

                              var backlayer = new Konva.Layer();

                           

                           

                              var hexagon = new Konva.RegularPolygon({

                                  x: stage.getWidth() / 2,

                                  y: stage.getHeight() / 2,

                                  sides: 6,

                                  radius: 20,

                                  fill: 'red',

                                  stroke: 'black',

                                  strokeWidth: 4

                              });

                           

                           

                              layer.add(hexagon);

                              //stage.add(layer);

                           

                           

                              var imageObj = new Image();

                              imageObj.onload = function() {

                           

                           

                              var yoda = new Konva.Image({

                                  x: 50,

                                  y: 50,

                                  image: imageObj,

                                  //width: 106,

                                  //height: 118

                                });

                              backlayer.add(imageObj);

                              stage.add(backlayer,layer);

                              imageObj.src='http://konvajs.github.io/assets/yoda.jpg';

                           

                           

                              var amplitude = 100;

                              var period = 2000;

                              // in ms

                              var centerX = stage.getWidth() / 2;

                           

                           

                              var anim = new Konva.Animation(function(frame) {

                                  hexagon.setX(amplitude * Math.sin(frame.time * 2 * Math.PI / period) + centerX);

                              },backlayer, layer);

                           

                           

                              anim.start();

                          </script>

                           

                           

                          </body>

                          </html>