19 Replies Latest reply on Nov 10, 2015 8:49 AM by Jon Tara

    can't include img in div?

    MengChang Xiao

      Actually I have post a question,but no response till now.

      I found something.

      This is my source code:

        <div data-role="content" id="container" >

                <img id="imgBackground" src="/HEVSource/hevcar1920.jpg"/>

                  <script type='Text/javascript'>

              var width = window.innerWidth;

              var height = window.innerHeight;

                  var stage = new Konva.Stage({

                container: 'container',

                width: width,

                height: height,

                opacity:1

              });

              var backlayer = new Konva.Layer();

              stage.add(backlayer);

                              onaccclick = function(){   

                hev.accelerate();

              }

              onbrakeclick = function(){   

                hev.brake();

              }

      ......

      I have insert a <img> after div, but you cant find it in the spector:

      1104.png

      If I lay it out of div,it will display.

      1104.png

      I checked the definition of DIV,no such of limited.

      Why?

        • Re: can't include img in div?
          MengChang Xiao

          No people visit now?

          Waiting for help.

          • Re: can't include img in div?
            Robert Galvin

            Hi,

             

            If you are trying to add an image to your Konva canvas, you are doing it all wrong. Please check Konva's website for details:

             

             

             

            Image Tutorial | Konva - JavaScript 2d canvas framework

             

             

             

             

            <!DOCTYPE html>
            <html>
            <head>
              <script src="https://cdn.rawgit.com/konvajs/konva/0.10.0/konva.min.js"></script>
              <meta charset="utf-8">
              <title>Konva Image 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 imageObj = new Image();
                imageObj.onload = function() {
            
            
                  var yoda = new Konva.Image({
                    x: 50,
                    y: 50,
                    image: imageObj,
                    width: 106,
                    height: 118
                  });
            
            
                  // add the shape to the layer
                  layer.add(yoda);
            
            
                  // add the layer to the stage
                  stage.add(layer);
                };
                imageObj.src = 'http://konvajs.github.io/assets/yoda.jpg';
              </script>
            
            
            </body>
            </html>
            
              • Re: can't include img in div?
                MengChang Xiao

                I have done like that,but it did not work ,so I changed the method.

                I have finished in JavaScript,and it works well under chrome.

                Failed to display imge in rho.

                  • Re: can't include img in div?
                    MengChang Xiao

                    This is the javascript code,works fine:

                     

                    <!DOCTYPE html>

                    <html>

                    <head>

                      <script src="HEVCar.js" type='Text/javascript'></script>

                      <meta charset="utf-8">

                      <title>HEV Demo</title>

                    </head>

                    <body>

                      <p>

                      <input id="Acc" type="button" value="acc" onclick="onaccclick()">

                      <input id="Navi" type="button" value="navi" onclick="onnaviclick()">

                      <input id="brake" type="button" value="brake" onclick="onbrakeclick()">

                      </p>

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

                     

                      <script type='Text/javascript'>

                      var width = window.innerWidth;

                        var height = window.innerHeight;

                     

                     

                        var stage = new Konva.Stage({

                            container: 'container',

                            width: width,

                            height: height,

                      opacity:1

                        });

                      var backlayer = new Konva.Layer();

                      stage.add(backlayer);

                     

                      var imageObj = new Image();

                      imageObj.onload = function() {

                      var image = new Konva.Image({

                      x: 0,

                      y: 0,

                      width:width-300,

                      height:height,

                      image: imageObj,

                      });

                      backlayer.add(image);

                      //image.sendtoback();

                      };

                      imageObj.src = 'hevcar1920.jpg';

                     

                     

                     

                     

                      onaccclick = function(){

                      hev.accelerate();

                      }

                      onbrakeclick = function(){

                      hev.brake();

                      }

                      onnaviclick = function(){

                      hev.navigate();

                      }

                     

                      hevpos = HEVpos.createNew();

                      var hev = HEVCar.createNew(stage,hevpos);

                       

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

                      hev.work();

                      backlayer.draw();

                        },backlayer);

                     

                     

                        anim.start();

                     

                      </script>

                     

                    </body>

                    </html>

                      • Re: can't include img in div?
                        MengChang Xiao

                        I import the code into RHO like this:

                         

                        <div data-role="page"  data-url="<%= Rho::Application.startURI %>/">

                          

                          <div data-role="header" data-position="inline">

                            <script src="/HEVSource/HEVCar.js" type='Text/javascript'></script>

                          </div>

                         

                         

                         

                        <table border="0">

                        <tr>

                        <td style="width:95%">

                          <div data-role="content" id="container" >

                            

                              <script type='Text/javascript'>

                                var width = window.innerWidth;

                                var height = window.innerHeight;

                          

                                var stage = new Konva.Stage({

                                  container: 'container',

                                  width: width,

                                  height: height,

                                  opacity:1

                                });

                                var backlayer = new Konva.Layer();

                                stage.add(backlayer);

                         

                         

                                var imageObj = new Image();

                                var image = new Konva.Image({

                                      x: 0,

                                      y: 0,

                                      width:width-300,

                                      height:height,

                                      image: imageObj,

                                    });

                                backlayer.add(image);

                                imageObj.src = '/HEVSource/hevcar1920.jpg';      

                                             

                                onaccclick = function(){  

                                  hev.accelerate();

                                }

                                onbrakeclick = function(){  

                                  hev.brake();

                                }

                                onnaviclick = function(){ 

                                  hev.navigate();

                                }

                         

                         

                                hevpos = HEVpos.createNew();

                                var hev = HEVCar.createNew(stage,hevpos);

                                

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

                                  hev.work();

                                  backlayer.draw();

                                },backlayer);

                         

                         

                                anim.start();

                                onaccclick(); 

                            

                                console.log("script executed!");

                             </script> 

                         

                          </div>

                          </td>

                          <td style="width:5%">

                          <input id="Acc" type="button" value="acc" data-inline="true" onclick="onaccclick()"><p>

                          <input id="Navi" type="button" value="navi" data-inline="true"  onclick="onnaviclick()"><P>

                          <input id="brake" type="button" value="brake" data-inline="true" onclick="onbrakeclick()">

                          </td>

                        </tr>

                        </table>

                        </div>

                         

                        but when running,no image diaplay:

                        1st.png

                        after execute main->refresh,it is fine:

                        1104.png

                         

                        Why?

                        Very strange.

                        Maybe conflict exist between RHO and Konva?

                          • Re: can't include img in div?
                            Jon Tara

                            Rhodes itself has little to no influence on HTML/Javascript/CSS and the <canvas>. That's all dependent on the WebView. And, that, in turn, depends on what platform you build for, and - in some cases - what WebView you choose to use (if there is a choice on your platform.)

                             

                            Tell us what platform(s) you are having the problem on.

                             

                            And tell us what browser(s) you tried on. (Ah, I see: "Chrome").

                             

                            On desktop, or on the same device you are building for?

                             

                            In some cases, the WebView environment will be different from the browser environment. For example:

                             

                            - on iOS, from iOS 8 on, Mobile Safari uses WKWebView. But Rhodes only uses UIWebView. There are significant differences. (Before iOS8, WKWebView didn't exist.)

                             

                            - on Android, the WebView uses the system browser control. From Android 4.4, the system browser is Chrome. Before 4.4, it is Android Browser. There are differences.

                             

                            - on some platforms, you can choose to use a RhoMobile-provided WebView engine instead of the system-provided one.

                             

                            Looks like you are not using jQuery Mobile, right? That's probably a good thing, because it is difficult to use a lot of advanced Javascript libraries with JQM. But if you are not using JQM, make sure you do not load the jQuery Mobile JS or CSS patch files that come with Rhodes. You probably should not load any of the CSS that comes with Rhodes in that case.

                             

                            First thing is determine what WebView environment you are having trouble with, and then check Konva to see what issues or special instructions there are for that environment.

                            1 of 1 people found this helpful
                              • Re: can't include img in div?
                                MengChang Xiao

                                The final version will run on android device(TV box made in China,very cheap) as a app.

                                I test the javascript on chrome.

                                I hate JQuery, but don't know how to disable it.

                                • Re: can't include img in div?
                                  MengChang Xiao

                                  disable JQM and related CSS,but same bug:

                                   

                                          <!--script src="/public/jquery/jquery-1.9.1.min.js" type="text/javascript"></script>

                                          <link rel="stylesheet" href="/public/jqmobile/jquery.mobile-1.3.1.min.css">

                                          <link rel="stylesheet" href="/public/css/jqmobile-patch.css">

                                          <script type="text/javascript">

                                              $(document).bind("mobileinit", function(){

                                                  // jQuery-Mobile init options initialization goes here. For example, you may

                                                  // enable automatically generated 'Back' buttons on headers this way:

                                                  //$.mobile.page.prototype.options.addBackBtn = true;

                                                  // You can disable (with false value) or change page loading message

                                                  $.mobile.loadingMessage = false;

                                                  //$.mobile.loadingMessage = "loading"; // it is default value

                                                  // For documented init options look here:

                                                  // http://jquerymobile.com/demos/1.3.1/docs/api/globalconfig.html

                                                  // For poorly documented options search for ".prototype.options"

                                                  // in the jQuery Mobile source code

                                                  // Rhodes custom option!

                                                  // how long to wait transition end before "loading.." message will be shown

                                                  $.mobile.loadingMessageDelay = 300; // in ms

                                                  // Uncomment these options in case of performance problem in pages transition

                                                  //$.mobile.defaultPageTransition = 'none';

                                                  //$.mobile.defaultDialogTransition = 'none';

                                                  //$.mobile.ajaxEnabled = false;

                                                  //$.mobile.pushStateEnabled = false;

                                                  //$.mobile.loadingMessageDelay = 50; // in ms

                                              });

                                          </script>

                                          <script type="text/javascript" charset="utf-8" src="/public/jqmobile/jquery.mobile-1.3.1.min.js"></script>

                                          <script type="text/javascript" charset="utf-8" src="/public/js/jqmobile-patch.js"></script-->

                                    • Re: can't include img in div?
                                      Jon Tara

                                      Oh. I thought from your previous posts you weren't including jQuery Mobile. I guess you were posting incomplete markup.

                                       

                                      jQuery and jQuery Mobile are two different things. jQuery Mobile is a UI framework. It requires jQuery. jQuery is handy for things like searching the document and doing Ajax. If you use jQuery, you can almost certainly use version 2.1.4, the latest. It doesn't support Internet Explorer 6,7,8, which you don't care a bit about.

                                       

                                      Your commenting-out above disable both jQuery and jQuery Mobile.

                                       

                                      You'll need jQuery if Konva needs jQuery. Sorry, I'm unfamiliar with Konva. I took a quick look and there seems to be no mention of jQuery at all. Very surprised to not find any mention, as most developers will ask that question first! Will your app use any HTML, or just draw on the canvas? If just draw on the canvas, you probably don't need jQuery.

                                       

                                      Win7 is irrelevant - it's where you run your tools that build your Rhodes app. What is important here is your runtime environment. That said, you would have an easier go of it using a an Apple machine running OSX if you can arrange it. Windows is a rough go for developing with Rhodes, IMO, but a necessary evil if you are developing for a Microsoft platform, like Windows Phone or Windows Mobile. You aren't. Not sure if Rhodes is still supported on Linux?

                                       

                                      In any case, you need to find out exactly what WebView your target environment uses. Then you need to find out if Konva has any issues with it. It is best if you can test in a similar/same environment.

                                       

                                      What Android version? If it is 4.4 or higher, you can use desktop Chrome's remote debugging to help debug. You attach your device with USB and you can use the debugging tools in desktop Chrome to look into the WebView in your Rhodes app on the device, and then you can set breakpoints in the Javascript, examine the document, fiddle with CSS, etc.

                                       

                                      Use the Konva tutorials just as they are. None of the jQuery Mobile markup you added is REQUIRED for Rhodes. It's just an optional UI framework that happens to be included by default. Many people use simple Bootstrap, other UI frameworks, or none at all in their Rhodes apps. It looks like you can use Konva without anything else, so start there! JUST like your working example in your desktop browser. (Except don't load the .js from the Internet, of course, put a copy in /public.)

                                        • Re: can't include img in div?
                                          MengChang Xiao

                                          Thank you.

                                          But when you refresh,it works well.-----I think just a little bug to cause this,little bug,can't find it,waste me so many days.....

                                            • Re: can't include img in div?
                                              Jon Tara

                                              Nothing in the /public directory is necessary.

                                               

                                              Nothing in the layout.erb file are necessary.

                                               

                                              When you generate a Rhodes application, it "helpfully" adds jQuery, jQuery Mobile, some image files, etc. to the /public directory.  You can (and in your case, probably should) remove ALL of it.

                                               

                                              Start with an EMPTY layout.erb.

                                               

                                              None of that is really a part of Rhodes. Certainly not an essential part. Since you are working in a specialized environment, I doubt you want or need any of this.

                                               

                                              Now, follow the Konva examples exactly. If they do not work in Rhodes as they do in your desktop browser, then Konva has a problem with your particular browser (WebView) on your device, and you should follow-up with the authors of Konva.

                                               

                                              Images loaded via an <img> tag load asynchronously in browsers and WebViews. If you want to do something with an image, you need to wait for it to load. You might need to listen for a load event. Where do you load your image from? /public? Or from the Internet? If from the Internet, it will be faster to load the second time, since it will be in the browser cache. The mobile browser is almost certainly much slower than your desktop browser.

                                               

                                              I doubt your problem has anything to do with Rhodes.

                                              1 of 1 people found this helpful
                                                • Re: can't include img in div?
                                                  Mark Nongkhlaw

                                                  Well, it might have to do something with the MVC architecture of Rhodes. Mengchang says it works on a webview refresh. But he/she did not state exactly what the start page of the app is, and from there what controller method is being called or whether he/she is using a controller at all. And if a controller method is called, what does it do and whether it renders any view, if yes, what's the content of that view? So, Mengchang, it would be more helpful to you and to us all if you could zip up your whole app and attach it here for troubleshooting.

                                                  • Re: can't include img in div?
                                                    MengChang Xiao

                                                    Now,I just debug in rhoSimulator on win7 desktop pc.

                                                    Not test in real end product.

                                                     

                                                    I did not clear /public and layout.erb ,but any sentence about JQM deleted.

                                                    And if just use <img>,it works well.

                                                     

                                                    I will take your advice, test Konva sample from base.

                                                     

                                                    Thank you!

                                                      • Re: Re: can't include img in div?
                                                        Jon Tara

                                                        Now,I just debug in rhoSimulator on win7 desktop pc.

                                                        Not test in real end product.

                                                        rhoSimulator environment is different enough from the real environment as to be practically useless for debugging UI. (IMO). Especially so for specialized hardware as you are using.

                                                         

                                                        It is good, though, for debugging your Ruby models and controllers.

                                                         

                                                        As I'm sure you now know, building for Android is very time-consuming, and so it seems attractive to use RhoSimulator. But best to debug UI on the real hardware, or a very close emulation.

                                                         

                                                        Luckily, with remote Chrome inspection, you can inspect and debug your HTML/CSS/JS, and your work with Konva will be in Javascript. So, you can do a lot of debugging without re-building.

                                                         

                                                        For Android, I use GenyMotion simulator and real devices. But GenyMotion is for phones and tablets - it offers very good emulation of popular phones and tablets, but won't have your TV box. Maybe you can find a tablet that it emulates that is close enough to your real hardware. It is much faster than the official Android simulator, and uses the actual Android code for the devices it simulates. But it uses an X86 build, and so you build your Rhodes project for X86 for test.

                                                         

                                                        You really should test UI in your real product. If it is Android 4.4 or later, you can use Chrome remote debugging:

                                                         

                                                            https://developer.chrome.com/devtools/docs/remote-debugging

                                    • Re: can't include img in div?
                                      BHAKTA RANJAN SATAPATHY

                                      Hello Xiao,

                                       

                                      Could you please attach your complete sample application here, so that we can try to reproduce the same behaviour that you are seeing.

                                       

                                      Thanks

                                        • Re: can't include img in div?
                                          MengChang Xiao

                                          Thank you all.

                                          I don't want to expose the whole source,sorry.

                                          My app is very simple: just to explain the basic theory of HEV car ( TOYOTA technology ).

                                          Now ,I just use one erb: the index.erb, as displayed as upper. (Later,I will add other simple control function through COM port)

                                          Last weekend, I tried for a while,as Jon said, I add little code step by step.

                                          Now,I found something. In the inspector, Konva creat 4 canvas for 4 layers( Konva object, created in other source file). I noticed that the width and height of canvas is only 100px and 30px originally, after refreshed, they get bigger : what they should be.

                                          I will try to modify the source to confirm whether it is the reason.

                                          Maybe Konva makes those chaos.

                                            • Re: can't include img in div?
                                              MengChang Xiao

                                              Last night I solved this question.

                                              What I have done: set the stage sizes(width & height).

                                               

                                              Konva 's object structure is: stage -> layer -> elements(image/shape/sprite...), usually you don't need to set the size for stage in hand, it will fill the container automatically ,and layer will fill the stage.

                                              In chrome,there is fine.

                                              As you know, bug triggered after transplanted into rho.

                                              I think don't need to delete JQM(though I do not test).

                                               

                                              Anyway,this is not a serious bug, I spent so many days just for I'm not familiar with JS & rho.

                                              Thank you all guys.

                                                • Re: Re: can't include img in div?
                                                  Jon Tara
                                                  I think don't need to delete JQM(though I do not test).

                                                  IMO, it's probably not really appropriate for a TV device. As well, the version that comes with Rho is obsolete, and won't work right with current browsers. And I think it has a questionable future. I think it will just get in the way.

                                                   

                                                  I think what you are facing is that different browsers have different defaults. In particular, there are issues with whether <html> inherits size from <body>, and whether default width is 100% of 0.

                                                   

                                                  You might want to use a reset CSS, like normalize.css, especially if you do not use JQM. It will save you a lot of grief!