Resource paths, Emulation & Live Layout Editing Do Not Match

[Kevin_G_2]

The live layout editing isn't loading my images using standard relative paths and the EMULATE isn't loading them at all. I'm not sure how to resolve this in XDK. I'll put some screen shots below to demonstrate what I mean.

To make it work in Live Layout Editing I have to reference all my resources including the www of the development engine. So my CSS and HTML5 pages all have to refer to images and links like this /www/ in front of them. Editing by text editor I only have to use the ./ version.On the EMULATE side the CSS and Images just can't be found. The path changes entirely there. 

In my HTML5 I include this  <link rel="stylesheet" href="/www/css/site.css"> in the head tags. in the CSS I refer to the images like this background-image: url('/www/images/menu-hover.png');

As long as I include the /www/ I can see everything in Live Layout Editing. Regardless of how I do it I don't see any presentation in EMULATE. Either way I don't want to have to search and replace all references to /www/ with ./ before going live.

Live Layout Screen shot. 

EMULATE screen shot

[Elroy_A_Intel]

I recommend trying to put your index.html and site.css file in the same directory then reference your css file with href="site.css" in your index.html. If this works in the Emulator, your issue may reside with your file locations.

Also, your index.html should always be in the www directory.

[Kevin_G_2]

Elroy,

I didn't choose the location. Intel XDK creates the WWW directory and puts your project into that directory. It is poor practice to mix all files into the default root directory (in this case WWW) so I made the css directory. Even so, with the CSS in the WWW directory there are still differences with the EMULATE version. See screen shots below. in the live layout you can see the background header and the background for the menu. However in the EMULATE version you can see the menu background is missing. They're both using the same index.html and the same CSS file from the WWW folder.

[Elroy_A_Intel]

I recommend evaluating the styling for your project using the Chrome Developer tools in the Chrome Browser for Live Layout and in the Emulate Tab by clicking the debug button.

You should compare the differences of how the styles are being applied specific to what you are seeing. Also I recommend that if you are aiming to have this run on mobile devices that you test directly on the device via the Test Tab or Debug Tab. 

[Kevin_G_2]

Elroy,

I see that the EMULATE can't find a file - but the file is there. Here is a screen shot showing the missing background image on the menu, the actual file on the disk and the debug output showing it can't find the file in that location.

[PaulF_IntelCorp]

The Emulate tab is being replaced in the next release with something that is more reliable. However, it will still be rendered by a Chromium 38 runtime engine. If you are using some features that Chromium 38 does not support, this could be part of the problem. In the meantime, to preview how your app is going to look, you might want to use the Debug tab or Test tab and see it rendered on real devices. You can also use a Chrome browser to simply open your index.html file and use that viewport emulation feature inside of it to see how it responds to different sized devices.

[Kevin_G_2]

Thank you Paul. At least now I know that Intel recognises there are issues with the EMULATE tab and I'll stop reporting them. When it gets updated I'd report anything I find then.