PDA

View Full Version : Image with Remote-URL not shown on IOS-Device/Simulator



dark_night
17 Oct 2011, 11:56 PM
Hi!

I have started with my first mobile Client which requests maps from a server. The requested maps are created and stored on the server as a png-File, an imagePath to the file is send to the client in the response (JSON).

Started in Safari on a Mac everything works fine, but when I test the client with the phonegap-iPhone-Simulator or a real iPhone device the image is not visible. I just detected that it seems that the image-tag is not converted to a HTMLImageElement like on the browser (tried to log property "hidden", it's undefined on the simulator/device). Maybe that has something to do with the problem?

Here is the code snipe with the image-template and panel update:

mainActions.js:

mainActions.mapTpl = new Ext.XTemplate(
'<img src="{imagePath}" id="image"' +
'style= height:{height}px; 'width:{width}px "' +
'onmousedown="arguments[0].preventDefault()">'
);

mainActions.requestTpl = new Ext.XTemplate(
'{"width": "{data.width}", "height": "{data.height}", "imageFormat": "{data.imageFormat}",' +
'"minX": "{data.minX}", "minY": "{data.minY}", "maxX": "{data.maxX}","maxY": "{data.maxY}","layerId": []}'
);

mainActions.showMap = function(imgData)
{
mainView.mapPanel.update(mainActions.mapTpl.applyTemplate(imgData));
mainView.mapPanel.show();

if (mainView.mapPanel.scroller.offsetBoundary.top == 0) {
mainView.mapPanel.scroller.updateBoundary();
}

mainView.mapPanel.scroller.scrollTo({
x:((imgData.width-globalVar.imgDisplayWidth)/2),
y:((imgData.height-globalVar.imgDisplayHeight)/2)});
}
};

mainActions.requestMap = function(mapParams)
{
var requestData = mainActions.requestTpl.applyTemplate(mapParams);

Ext.util.JSONP.request({
url: globalVar.mapUrl,
params: {
jsonAppRequest: requestData
},
callbackKey: 'callback',
callback: function(result) {
if (result) {
mainActions.showMap(result.data);
}
}
});
};

other code-snipes:

mainView.js:

Ext.setup({
tabletStartupScreen: 'resources/startup.png',
phoneStartupScreen: 'resources/startup.png',
icon: 'resources/client_debugger.ico',
glossOnIcon: false,

onReady: function() {
mainView.Main.init();
}
});

mainView.Main = {
init : function ()
{
mainView.viewport.doLayout();
mainView.viewport.show();
if (!globalVar.debug) {
mainView.viewport.remove(mainView.logPanel);
mainView.MapToolbar.remove(mainView.btnToggleDebugWindow);
}
mainActions.requestMap(globalVar.mapParams);
}
};

mainView.viewport = new Ext.Panel({
id: 'viewport',
fullscreen: true,
monitorOrientation: true,
layout: 'vbox',
activeItem: 1,
cardAnimation: 'pop',
defaults: {width: globalVar.imgDisplayWidth},
items: [mainView.logPanel, mainView.mapPanel, mainView.MapToolbar]
});

mainView.logPanel = new Ext.Panel({
id: 'logger',
height: globalVar.logPanelHeight,
width: globalVar.imgDisplayWidth,
autowidth: false,
scroll: 'vertical',
styleHtmlContent: true,
cls: 'debugWindow',
html: ''
});

mainView.mapPanel = new MapPanel({
id: 'map',
cls: 'mappanel',
flex: 1,
renderTo: Ext.getBody()
});

MapPanel = Ext.extend(Ext.Component, {
scroll: 'both',
initComponent : function() {
MapPanel.superclass.initComponent.call(this);
this.addListener( {
el: {
touchstart: this.handleEvent,
touchend: this.handleEvent,
scope: this
}
});
},
handleEvent: function(e) {
console.log('event '+e.type);
}
});

mainView.MapToolbar = new Ext.Toolbar({
id: 'MapToolbar',
dock : 'bottom',
layout: {
pack: 'center'
},
ui: 'light',
width: globalVar.imgDisplayWidth,
items: [mainView.btnZoomIn, mainView.btnZoomOut, mainView.BtnGotoMap, {xtype:'spacer', width:30}, mainView.BtnSetThemes, mainView.btnToggleDebugWindow]
});

globalvar.js:

globalVar.debug = true;
globalVar.resultjson = null;
globalVar.resultThemesjson = null;
globalVar.readJsonSuccessful = false;

globalVar.logPanelHeight = 100;
globalVar.imgDisplayWidth = 320;
globalVar.imgDisplayHeight = 400;
globalVar.imgBoxEnlargement = 100;
globalVar.imgBoxOverscan = 50;

globalVar.imgWidth = (globalVar.imgDisplayWidth + globalVar.imgDisplayWidth * globalVar.imgBoxEnlargement/100);
globalVar.imgHeight = (globalVar.imgDisplayHeight + globalVar.imgDisplayHeight * globalVar.imgBoxEnlargement/100);

globalVar.mapUrl = 'http://sirius:8980/mobile/getMapResult';

globalVar.mapParams = {
width: globalVar.imgWidth,
height: globalVar.imgHeight,
imageFormat: 'png',
minX: 0,
minY: 300000000,
maxX: 12345,
maxY: 303000000,
layerId: '[]'
}

styles.css:

.debugWindow {
font-size: small;
background-color: silver;
}

.mappanel {
max-height: 600px;
max-width: 800px;
height: 600px;
width: 800px;
display: -webkit-box;
background-color:#7f7f7f;
-webkit-box-orient: block-axis;
-webkit-box-align: center;
-webkit-box-pack: center;

}

models.js:

Ext.regModel('mapImage', {
fields: [
{name: 'imagePath', type: 'string'},
{name: 'minX', type: 'float'},
{name: 'maxX', type: 'float'},
{name: 'minY', type: 'float'},
{name: 'maxY', type: 'float'},
{name: 'imageFormat', type: 'string'},
{name: 'width', type: 'string'},
{name: 'height', type: 'string'},
{name: 'posX', type: 'int'},
{name: 'posY', type: 'int'},
{name: 'displayScale', type: 'float'}
]
});

Maybe only some show(), update() or other simple command is missing because I am new to Sencha Touch and javascript.

Thanks in advice,
Christian

steve1964
18 Oct 2011, 12:28 AM
Hi, your imagePath is absolute or relative? If it's relative it will work in a webapp but not with Phonegap, in this case you have to use absolute path.

dark_night
18 Oct 2011, 12:38 AM
it's an absolute path like "http://public.company.com:8085/ias/data/iasrequ_IpqeFtzm.png".
Also "*public.company.com" has been added to the ExternalHosts in phohegap.plist and the image is shown in the web-browser of the device/simulator.