OpenLayers 3 ArcGIS Cache Server Local Files - maps
Some days ago I did an ArcGISCache visor with OpenLayers 2.12 with some tiles in this folder and file format:
_alllayers\L04\R00000009\C00000a07.png
This means that my tiles are inside "_alllayers" folder and then inside other folders that means Zoom Level (L00,L01...L21). Inside them i have some other folders with their name like: "R00000009" and then inside those folders I have the images named like: "C00000a07.png".
When I did the visor for OpenLayers 2.12 or OpenLayers 2.14 I did it well and works right. But when I have tried to do the same with OpenLayers 3, it doesn't work.
OpenLayers 2.12 / OpenLayers 2.14
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<script src="http://maps.google.com/maps/api/js?v=3&sensor=false"></script>
<meta name="apple-mobile-web-app-capable" content="yes">
<title>OpenLayers</title>
<style>
html, body, #map {
margin: 0;
width: 100%;
height: 100%;
}
</style>
<script src="lib/OpenLayers.2.14.js"></script>
<script>
var map,
cacheLayer,
testLayer,
//This layer requires meta data about the ArcGIS service. Typically you should use a
//JSONP call to get this dynamically. For this example, we are just going to hard-code
//an example that we got from here (yes, it's very big):
// http://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer?f=json&pretty=true
layerInfo = {
"currentVersion" : 10.01,
"serviceDescription" : "This worldwide street map presents highway-level data for the world and street-level data for the United States, Canada, Japan, Southern Africa, and a number of countries in Europe and elsewhere. This comprehensive street map includes highways, major roads, minor roads, railways, water features, administrative boundaries, cities, parks, and landmarks, overlaid on shaded relief imagery for added context. The street map was developed by ESRI using ESRI basemap data, AND road data, USGS elevation data, and UNEP-WCMC parks and protected areas for the world, and Tele Atlas Dynamap� and Multinet� street data for North America and Europe. Coverage for street-level data in Europe includes Andorra, Austria, Belgium, Czech Republic, Denmark, France, Germany, Great Britain, Greece, Hungary, Ireland, Italy, Luxembourg, Netherlands, Northern Ireland (Belfast only), Norway, Poland, Portugal, San Marino, Slovakia, Spain, Sweden, and Switzerland. Coverage for street-level data elsewhere in the world includes China (Hong Kong only), Colombia, Egypt (Cairo only), Indonesia (Jakarta only), Japan, Mexico (Mexico City only), Russia (Moscow and St. Petersburg only), South Africa, Thailand, and Turkey (Istanbul and Ankara only). For more information on this map, visit us \u003ca href=\"http://goto.arcgisonline.com/maps/World_Street_Map \" target=\"_new\"\u003eonline\u003c/a\u003e.",
"mapName" : "Layers",
"description" : "This worldwide street map presents highway-level data for the world and street-level data for the United States, Canada, Japan, Southern Africa, most countries in Europe, and several other countries. This comprehensive street map includes highways, major roads, minor roads, one-way arrow indicators, railways, water features, administrative boundaries, cities, parks, and landmarks, overlaid on shaded relief imagery for added context. The map also includes building footprints for selected areas in the United States and Europe and parcel boundaries for much of the lower 48 states.\n\nThe street map was developed by ESRI using ESRI basemap data, DeLorme base map layers, AND road data, USGS elevation data, UNEP-WCMC parks and protected areas for the world, Tele Atlas Dynamap� and Multinet� street data for North America and Europe, and First American parcel data for the United States. Coverage for street-level data in Europe includes Andorra, Austria, Belgium, Czech Republic, Denmark, France, Germany, Great Britain, Greece, Hungary, Ireland, Italy, Luxembourg, Netherlands, Norway, Poland, Portugal, San Marino, Slovakia, Spain, Sweden, and Switzerland. Coverage for street-level data elsewhere in the world includes China (Hong Kong only), Colombia, Egypt (Cairo only), Indonesia (Jakarta only), Japan, Mexico, Russia, South Africa, Thailand, and Turkey (Istanbul and Ankara only). For more information on this map, visit us online at http://goto.arcgisonline.com/maps/World_Street_Map\n",
"copyrightText" : "Sources: ESRI, DeLorme, AND, Tele Atlas, First American, ESRI Japan, UNEP-WCMC, USGS, METI, ESRI Hong Kong, ESRI Thailand, Procalculo Prosis",
"layers" : [
{
"id" : 0,
"name" : "World Street Map",
"parentLayerId" : -1,
"defaultVisibility" : true,
"subLayerIds" : null,
"minScale" : 0,
"maxScale" : 0
}
],
"tables" : [
],
"spatialReference" : {
"wkid" : 102100
},
"singleFusedMapCache" : true,
"tileInfo" : {
"rows" : 256,
"cols" : 256,
"dpi" : 96,
"format" : "JPEG",
"compressionQuality" : 90,
"origin" : {
"x" : -20037700,
"y" : 30241100
},
"spatialReference" : {
"wkid" : 102100
},
"lods" : [
{'level' : 0, 'resolution' : 156543.03403606807, 'scale' : 591657528},
{'level' : 1, 'resolution' : 78271.517018034036, 'scale' : 295828764},
{'level' : 2, 'resolution' : 39135.758509017018, 'scale' : 147914382},
{'level' : 3, 'resolution' : 19567.879254508509, 'scale' : 73957191},
{'level' : 4, 'resolution' : 9783.9394949623238, 'scale' : 36978595},
{'level' : 5, 'resolution' : 4891.9698797730935, 'scale' : 18489298},
{'level' : 6, 'resolution' : 2445.9849398865467, 'scale' : 9244649},
{'level' : 7, 'resolution' : 1222.992337651342, 'scale' : 4622324},
{'level' : 8, 'resolution' : 611.49616882567102, 'scale' : 2311162},
{'level' : 9, 'resolution' : 305.74808441283551, 'scale' : 1155581},
{'level' : 10, 'resolution' : 152.87417449834899, 'scale' : 577791},
{'level' : 11, 'resolution' : 76.436954957243259, 'scale' : 288895},
{'level' : 12, 'resolution' : 38.218609770552874, 'scale' : 144448},
{'level' : 13, 'resolution' : 19.109304885276437, 'scale' : 72224},
{'level' : 14, 'resolution' : 9.5546524426382184, 'scale' : 36112},
{'level' : 15, 'resolution' : 4.7773262213191092, 'scale' : 18056},
{'level' : 16, 'resolution' : 2.3886631106595546, 'scale' : 9028},
{'level' : 17, 'resolution' : 1.1943315553297773, 'scale' : 4514},
{'level' : 18, 'resolution' : 0.59716577766488865, 'scale' : 2257},
{'level' : 19, 'resolution' : 0.2984505969011938, 'scale' : 1128},
{'level' : 20, 'resolution' : 0.1492252984505969, 'scale' : 564},
{'level' : 21, 'resolution' : 0.061383456100245537, 'scale' : 282}
]
},
"initialExtent" : {
"xmin" : -20037507.0671618,
"ymin" : -20037507.0671618,
"xmax" : 20037507.0671618,
"ymax" : 20037507.0671619,
"spatialReference" : {
"wkid" : 102100
}
},
"fullExtent" : {
"xmin" : -20037507.0671618,
"ymin" : -20037507.0671618,
"xmax" : 20037507.0671618,
"ymax" : 20037507.0671619,
"spatialReference" : {
"wkid" : 102100
}
},
"units" : "esriMeters",
"supportedImageFormatTypes" : "PNG24,PNG,JPG,DIB,TIFF,EMF,PS,PDF,GIF,SVG,SVGZ,AI,BMP",
"documentInfo" : {
"Title" : "World Street Map",
"Author" : "ESRI",
"Comments" : "",
"Subject" : "streets, highways, major roads, railways, water features, administrative boundaries, cities, parks, protected areas, landmarks ",
"Category" : "transportation(Transportation Networks) ",
"Keywords" : "World, Global, 2009, Japan, UNEP-WCMC",
"Credits" : ""
},
"capabilities" : "Map"
};
function init() {
var maxExtent = new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34);
var layerMaxExtent = new OpenLayers.Bounds(
layerInfo.fullExtent.xmin,
layerInfo.fullExtent.ymin,
layerInfo.fullExtent.xmax,
layerInfo.fullExtent.ymax
);
var resolutions = [];
for (var i=0; i<layerInfo.tileInfo.lods.length; i++) {
resolutions.push(layerInfo.tileInfo.lods[i].resolution);
}
map = new OpenLayers.Map('map', {
maxExtent: maxExtent,
StartBounds: layerMaxExtent,
units: (layerInfo.units == "esriFeet") ? 'ft' : 'm',
resolutions: resolutions,
tileSize: new OpenLayers.Size(layerInfo.tileInfo.width, layerInfo.tileInfo.height),
projection: 'EPSG:' + layerInfo.spatialReference.wkid
});
cacheLayer = new OpenLayers.Layer.ArcGISCache( "AGSCache",
"http://MY_IP:MY_PORT/MY_FOLDER/Layers/_alllayers", {
isBaseLayer: false,
useArcGISServer: false,
resolutions: resolutions,
tileSize: new OpenLayers.Size(layerInfo.tileInfo.cols, layerInfo.tileInfo.rows),
tileOrigin: new OpenLayers.LonLat(layerInfo.tileInfo.origin.x , layerInfo.tileInfo.origin.y),
maxExtent: layerMaxExtent,
projection: 'EPSG:' + layerInfo.spatialReference.wkid
});
testLayer = new OpenLayers.Layer.Google(
"Google Streets",
{'sphericalMercator': true, numZoomLevels: 21}
);
map.addLayers([cacheLayer, testLayer]);
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.addControl( new OpenLayers.Control.MousePosition() );
map.zoomToExtent(new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34));
}
</script>
</head>
<body onload="init()">
<div id="map"></div>
</body>
</html>
As I said, this works fine. But when I try to do the same at OpenLayers 3, I can't. I don't know why is asking for the images like there is a service.
OpenLayers 3
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<script src="http://maps.google.com/maps/api/js?v=3&sensor=false"></script>
<meta name="apple-mobile-web-app-capable" content="yes">
<title>OpenLayers</title>
<style>
html, body, #map {
margin: 0;
width: 100%;
height: 100%;
}
</style>
<script src="lib/OpenLayers.3.js"></script>
<script>
function init(){
var url = 'http://MY_IP:MY_PORT/MY_FOLDER/Layers/_alllayers';
var layers = [
new ol.layer.Tile({
source: new ol.source.OSM()
}),
new ol.layer.Tile({
extent: [-20037507.0671618,-20037507.0671618,20037507.0671618,20037507.0671619],
source: new ol.source.TileArcGISRest({
url: url
})
})
];
var map = new ol.Map({
layers: layers,
target: 'map',
view: new ol.View({
center: [-20037700, 30241100],
zoom: 1
})
});
}
</script>
</head>
<body onload="init()">
<div id="map"></div>
</body>
</html>
When I try to load this OpenLayers 3 visor, I can see in the console some 404 error and this is the type of URL that it tries to find:
http://MY_IP:MY_PORT/MY_FOLDER/Layers/_alllayers/?F=image&FORMAT=PNG32&TRANSPARENT=true&SIZE=256%2C256&BBOX=-20037508.342789244%2C0%2C0%2C20037508.342789244&BBOXSR=3857&IMAGESR=3857&DPI=90
Pretty Print
http://MY_IP:MY_PORT/MY_FOLDER/Layers/_alllayers/?F=image
&FORMAT=PNG32
&TRANSPARENT=true
&SIZE=256%2C256
&BBOX=-20037508.342789244%2C0%2C0%2C20037508.342789244
&BBOXSR=3857
&IMAGESR=3857
&DPI=90
So, my questions are:
- Why OpenLayers 3 is asking for the images (tiles) like it was a Service behind?
- Hoy can I use my tiles in OpenLayers 3?
I have tried to change the URL with this patterns:
http://MY_IP:MY_PORT/MY_FOLDER/Layers/_alllayers/ImageServer
http://MY_IP:MY_PORT/MY_FOLDER/Layers/_alllayers/ImageServer/export
http://MY_IP:MY_PORT/MY_FOLDER/Layers/_alllayers/Tiles/{z}/{x}/{y}
Edit:
Finally I have solved! I hava made in Java a program that converts all those folders and pictures names.
I was trying to understand the pattern that the names of folders and images has, and finally I realized that the first letter of the folders meant the rows ( R -> row) and the first letter of the images meant columns ( C -> column).
Once you have removed the first letter , just needed to convert that number Hexadecimal to Decimal and save the file or folder with that new name.
If someones need some help with this, I will happy to help.
ol.source.ArcGISRest is for ArcGIS server tile services. For ArcGISCache, you will want to use an ol.source.TileImage or ol.source.XYZ with a custom tileUrlFunction or tileLoadFunction. I prefer the latter, because then I do not have to convert tile coordinates. Something like
function replacer(match, letter, value) {
var str = Number(value).toString(letter == 'L' ? 10 : 16);
var len = letter == 'L' ? 2 : 8;
while (str.length < len) {
str = '0' + str;
}
return letter + str;
}
var source = new ol.source.XYZ({
url: 'http://MY_IP:MY_PORT/MY_FOLDER/Layers/_alllayers/L{z}/R{x}/C{y}.png',
tileLoadFunction: function(image, url) {
image.getImage().src = url
.replace(/(L)([0-9]+)/, replacer)
.replace(/(R)([0-9]+)/, replacer)
.replace(/(C)([0-9]+)/, replacer);
}
});
#ahocevar solutions works. But I had to swap the x and y in the URL.
url: 'http://MY_IP:MY_PORT/MY_FOLDER/Layers/_alllayers/L{z}/R{y}/C{x}.png'
This makes sense, because y would map to rows and x to colums.
Related
How can I import all (mp3) files from a particular folder into an array in react.js?
I'm building an mp3 player with react.js and the HTML5 web audio API. I'm new to react (circa 2 weeks) but have 3 years experience with JavaScript.
It seems that in order for the mp3 files to play/load into the audio tag (within a react environment using the cmd line and localhost) I need to import them to the application(rather than just pointing to their URL in the src of the audio tag). See my question here
So at the moment I am importing the sounds in a hard-coded fashion as follows:
import React, { Component } from 'react';
import './music-player.css';
import mp3_file0 from './sounds/0010_beat_egyptian.mp3';
import mp3_file1 from './sounds/0011_beat_euphoric.mp3';
import mp3_file2 from './sounds/0014_beat_latin.mp3';
import mp3_file3 from './sounds/0015_beat_pop.mp3';
import mp3_file4 from './sounds/0027_falling_cute.mp3';
import mp3_file5 from './sounds/0028_feather.mp3';
import mp3_file6 from './sounds/0036_lose_cute.mp3';
import mp3_file7 from './sounds/0039_pium.mp3';
var mp3s = [];
mp3s[0] = mp3_file0;
mp3s[1] = mp3_file1;
mp3s[2] = mp3_file2;
mp3s[3] = mp3_file3;
mp3s[4] = mp3_file4;
mp3s[5] = mp3_file5;
mp3s[6] = mp3_file6;
mp3s[7] = mp3_file7;
const AudioPlayer = function(props) {
var mp3Src = mp3s[props.currentSoundIndex];
console.log(mp3Src);
return (<audio id="audio_player">
<source id="src_mp3" type="audio/mp3" src={mp3Src}/>
<source id="src_ogg" type="audio/ogg" src=""/>
<object id="audio_object" type="audio/x-mpeg" width="200px" height="45px" data={mp3Src}>
<param id="param_src" name="src" value={mp3Src} />
<param id="param_src" name="src" value={mp3Src} />
<param name="autoplay" value="false" />
<param name="autostart" value="false" />
</object>
</audio>
);
}
export default AudioPlayer;
That works perfect, however ideally I would like to either:
1 import the mp3 files straight into an array (instead of creating the array afterwards). I tried the following, however I am receiving an error of "unexpected token" at the [ bracket (when importing)
var mp3s = [];
import mp3s[0] from './sounds/0010_beat_egyptian.mp3';
import mp3s[1] from './sounds/0011_beat_euphoric.mp3';
2 Or even better import all files from the sounds folder without knowing their names into a zero indexed array.
Any help greatly appreciated. thanks.
I discovered that If you have multiple files (e.g images or mp3 files etc) that you want to include dynamically to your app then it is better to store them in the public folder (see the docs https://create-react-app.dev/docs/using-the-public-folder/).
Note: When storing your files in the public folder you don't need to "import" them but you must use the public environment variable (process.env.PUBLIC_URL) so that the correct path (to your public folder) will be referenced.
So my solution to this was:
I created a folder in the public folder called sounds (where I stored all of my mp3s for this project).
I then changed my the Audio component (in the original post) to the following:
.
import React, { Component } from 'react';
import './music-player.css';
const AudioPlayer = function(props) {
let mp3Src = process.env.PUBLIC_URL + props.sounds[props.currentSoundIndex].mp3;
return (<audio id="audio_player">
<source id="src_mp3" type="audio/mp3" src={mp3Src}/>
<source id="src_ogg" type="audio/ogg" src=""/>
<object id="audio_object" type="audio/x-mpeg" width="200px" height="45px" data={mp3Src}>
<param id="param_src" name="src" value={mp3Src} />
<param id="param_src" name="src" value={mp3Src} />
<param name="autoplay" value="false" />
<param name="autostart" value="false" />
</object>
</audio>
);
}
export default AudioPlayer;
Note: props.sounds in the above code refers to the following JavaScript array which I have in my src folder:
let sounds = [{"title" : "Egyptian Beat", "artist" : "Sarah Monks", "length": 16, "mp3" : "sounds/0010_beat_egyptian.mp3"},
{"title" : "Euphoric Beat", "artist" : "Sarah Monks", "length": 31, "mp3" : "sounds/0011_beat_euphoric.mp3"},
{"title" : "Latin Beat", "artist" : "Sarah Monks", "length": 59, "mp3" : "sounds/0014_beat_latin.mp3"},
{"title" : "Pop Beat", "artist" : "Sarah Monks", "length": 24, "mp3" : "sounds/0015_beat_pop.mp3"},
{"title" : "Falling Cute", "artist" : "Sarah Monks", "length": 3, "mp3" : "sounds/0027_falling_cute.mp3"},
{"title" : "Feather", "artist" : "Sarah Monks", "length": 6, "mp3" : "sounds/0028_feather.mp3"},
{"title" : "Lose Cute", "artist" : "Sarah Monks", "length": 3, "mp3" : "sounds/0036_lose_cute.mp3"},
{"title" : "Pium", "artist" : "Sarah Monks", "length": 3, "mp3" : "sounds/0039_pium.mp3"}];
Check this copeden here
var mp3_file = []
mp3_file[0] = 'file1',
mp3_file[1] = 'file2',
mp3_file[2] = 'file3',
mp3_file[3] = 'file4',
mp3_file[4] = 'file5',
mp3_file[5] = 'file6',
mp3_file[6] = 'file7',
mp3s = [];
for (let i=0; i<6; i++) {
mp3s[i] = mp3_file[i]
console.log(mp3s[i])
}
RESULT >
"file1"
"file2" and so on.
And also this could be interesting
var mp3_file = [];
var mp3s = [];
for (let i=0; i<6; i++) {
mp3_file[i = 'file' + i,
}
for (let i=0; i<mp3_file.length; i++) {
mp3s[i] = mp3_file[i]
console.log(mp3s[i])
}
Have "pros" and "contras" but I think you'll get the point.
If music in file are like ( songName_01.mp3 songName_02.mp3 songName_03.mp3 ...)
you can import all of them in your react project
Instead of using
var songCollection = [];
import song01 from '../some file/songName01.mp3'
import song02 from '../some file/songName02.mp3'
import song03 from '../some file/songName0.mp3'
import song04 from '../some file/songName04.mp3'
and then add them in array
Use this code transformation
var songCollection = []
function _interopRequireDefault(obj) {
return obj && obj.__esModule ? obj : { default: obj };
}
for(let i = 0; i< fileSize; i++ ) {
songCollection[i] = _interopRequireDefault(require(`../some file/songName_0${i+1}.mp3`));
}
And src value would be <audio src = {songName[2].default} ></audio>
Los-Track ( you can look at my repo how it works ) - https://github.com/sosumit001/los-track
Check if value exist in database and alert message
I have a data base containing following data I have a textbox to enter chqNo. How to display the status according to chqNo entered in textbox.Foreg: If we enter 5 it should alert "cancelled" otherwise "active" on textbox onchange() using angularJs
Assuming you have cheque information fetched from database and stored in a $scope object in angularjs.
$scope.chequeInfo = [
{chqNo: 1, custName : 'Bikash', status : 'active'},
{chqNo: 2, custName : 'Bikash', status : 'active'},
{chqNo: 3, custName : 'Bikash', status : 'active'},
{chqNo: 4, custName : 'Bikash', status : 'active'},
{chqNo: 5, custName : 'Bikash', status : 'cancelled'}
];
$scope.onChqChange = function(chqNo) {
angular.forEach($scope.chequeInfo, function(cheque) {
if(cheque.chqNo === chqNo) {
alert(cheque.status);
}
});
};
Bound the method to your HTML as:
<input type="number" ng-model="chqNo" ng-change="onChqChange(chqNo)"/>
See the Working demo here.
JSON-LD for more products in one page
If I have more products in one page, how can I set JSON-LD? <article> Our car dealership is here to make sure your vehicle always performs at its best. We provide a diverse range of services to the manufacturer’s high standard, and you’ll receive a nu..... </article> <article> ALFA ROME 2.0 <img ... /> </article> <article> ALFA ROME 3.0 <img ... /> <img ... /> </article>
yes i want use schema.org.
i have tried to do this for each car:
<script type="application/ld+json">
{
"#context":"http://schema.org",
"#type":"Car",
"name": "Alfa Romeo Giulietta 1.6 JTDm",
"model": "Giulietta",
"brand":"alfa romeo",
"fuelType":"Diesel",
"vehicleEngine":"Diesel - 4 cilindri in linea - Cilindrata: 1598 cm3 - 4 Valvole per cilindro - Sovralimentato - Potenza max: 88 kw (120CV) a 4.000 giri/min - Coppia max 32,6 kgm (320,0 Nm) a 1.750 giri/min - Euro 6 (715/2007 - 692/2008) - Potenza Fiscale 17 CV",
"description" : "Alfa Romeo Giulietta 1.6 JTDm - 2 120 CV Distinctive (05/2015)",
"image":"assets/img/annunci/alfa-romeo-giulietta-distinctive.jpg",
"offers":{
"#type": "Offer",
"priceCurrency": "EUR",
"price": "20.850"
}
}
</script>
<script type="application/ld+json">
{
"#context":"http://schema.org",
"#type":"Car",
"name": "FIAT Nuova Panda ",
"model": "new panda",
"brand":"fiat",
"fuelType":"Benzina",
"vehicleEngine":"Benzina - 4 cilindri in linea - Cilindrata: 1242 cm3 - 2 Valvole per cilindro - Potenza max: 51 kw (69CV) a 5.500 giri/min - Coppia max 20,4 kgm (102,0 Nm) a 3.000 giri/min - Euro 6 (715/2007 - 692/2008) Potenza Fiscale 14 CV",
"description" : "FIAT Nuova Panda 1.2 Lounge (07/2014)",
"image":"assets/img/annunci/fiat-500-x-1.6-pop-star.jpg"
}
</script>
....
but is correct (if one page have more car)? the real page is auto-calanca.it/promozioni.
AngularJS Drag and Drop
If I have a JSON like below ..
$scope.pools = [ {id: 1, poolName : 'Pool1', env : 'Env1', executionMode: 'Both',
modelets: [{id: 'm1', name : 'MM1', status : 'active', capacity : '1 GB'},
{id: 'm2', name : 'MM2', status : 'active', capacity : '1 GB'},
{id: 'm3', name : 'MM3', status : 'active', capacity : '1 GB'}]},
{id: 2, poolName : 'Pool2', env : 'Env2', executionMode: 'Both',
modelets: [{id: 'm4', name : 'MR1', status : 'active', capacity : '1 GB'},
{id: 'm5', name : 'MR2', status : 'active', capacity : '1 GB'}]
}
];
and I have to drag and drop the modelet from one pool to another. for example, if I am dragging m3 from pool1 to and dropping it into modelets of pool2, then m3 should be removed from pool1.modelets and it should be added into pool2.modelets and vice-versa.
Note : I am trying it using http://codef0rmer.github.io/angular-dragdrop/#/
Please provide me effective solution. Thanks in adnavce.
Finally, I got something which is working fine in this case ...
We need to do below changes in draggable element.
<div class="btn btn-primary" data-drag="true" data-jqyoui-options="{revert: 'invalid'}" ng-model="pool.modelets" jqyoui-draggable="{index: {{$index}},animate:true}" ng-hide="!modelet.name">{{modelet.name}}</div>
updated fiddler is working fine.
Loading images from an array
I'm trying to load an image from an array, but I can't figure out how to do so...
For text, it's good :
private var textArray:Array = [
{label:"text1", Type:"it's the text1"},
{label:"text2", Type:"it's the text2"}]
and the function setDisplay is showing one of the label in my textField
private function setDisplay(e:Event):void{
var fIndex:int = ac.aIndex;
txtField.htmlText = "<b>Title:</b><br /> " + fruitArray[fIndex].Type;
txtField.setTextFormat(titleFormat);
Now I can't figure out how to do the same thing for images...
I've tried that :
private var possibleSources:Array = [
{label:"Image1", Image: {url:"assets/smiley.jpg"}},
{label:"Image2", Image: {url:"assets/smiley2.jpg"}}];
and add in my SetDisplay function :
txtField.htmlText = "<b>Title:</b><br /> " + textArray[fIndex].Type + "<b>Images:</b><br /> " + possibleSources.Image;
The app is launching and I've got "it's the text1" for text1 and "it's the text2" for text2
But for "Images" I've got "undefined"....
Do you know what's wrong ?
Thank you for your help,
EDIT :
Thank you for your help.
Here's what I got so far :
private var possibleSources:Array = [
{label:"Image1", Image: {url:"assets/smiley1.jpg"}},
{label:"Image2", Image: {url:"assets/smiley2.jpg"}}];
private var textArray:Array = [
{label:"text1", Type:"It's the text1"},
{label:"text2", Type:"It's the text2"}]
private function setDisplay(e:Event):void{
it1.htmlText = "<b>Title :</b><br /> " + textArray[fIndex].Type +"<b>image :</b><br /> " + possibleSources[fIndex].Image.url;
And here's what I got as a result :
The smiley1.jpg is not here...
You have mistake in code where you access data about Image in the possibleSources: Correct: trace(possibleSources[0].Image.url); Also, if you want display image in the text field, url string isn't enough, read about supported html tags, and their format.