Hi I am using jQuery reel to display a 3D view of a site in London on my website.
This is the example.
Now I want to add some dynamic icons and text on 5 exact locations. I can place icons on one image like this but how can I do it for all the images so that the overlay icons and text move along with the background site images. These are about 40 images.
Can anyone please help.
Thanks
There isn't an automatic way to do it. The animation is based on a series of images which aren't necessarily related in a specific way.
First, You would need to map the coordinates or each of the individual images.
Second, you would need to capture the event of switching the image and move the icons accordingly. I haven't seen the plugin supporting this, though I might be mistaken.
They do it in one example, but it looks like they're using a single image there.
I have done it with annotations.
It is in the documentation.
$('#reel-image')
.reel({
images: 'sitePlans/<%=siteID%>/###.png',
frames: 20,
speed: 0,
annotations: {
'test':
{
x: [286,350,400,450,500,550,600,650,700,750,800,850,900,950],
y: [187,150,100,150,100,150,100,150,100,150,100,150,100,150],
link:
{
text: 'This is test text', target: '_blank',
href:'#'
}
}
}
});
Related
I like pixel-art games, and it's also the only kind of art I can kind of do myself. So I like to make my games in pixel-art too. The problem I have with that is that the pixels when displayed in Phaser don't have the same sizes anymore.
My issue becomes very obvious with the images:
The first picture is what it looks like in Phaser and the second image is what it's supposed to look like. As you can see the spots on the mushroom in Phaser have different sizes, even though they're supposed to be just one pixel with the same size. I don't understand this at all, and I can't find anything on the internet about it. I tried all different possibilities with scaling or no scaling and changing the game size, but nothing seems to fix it. This happened in every game I've made. There's no point in showing a specific example of a game, but I can show the game config
var config = {
width: 768,
height: 448,
pixelArt: true,
scale: {
mode: Phaser.Scale.FIT,
autoCenter: Phaser.Scale.CENTER_BOTH
},
scene: [BootScene, StartScene, MainScene, InventoryScene, InstructionsScene],
physics: {
default: "arcade",
arcade:{
//debug: true,
gravity: {y: 980}
}
}
}
I can only imagine it has something to do with my config. Because I add the images as normal sprites/images in Phaser. This perticualt spriteis animated, but other images (and text too btw) that aren't animated share the same problem. This image also has scale 2, but as I mentioned changing the scale doesn't help.
Does anybode have any idea what's causing this? Maybe I'm just overlooking something totally obvious, but this has been bothering me for months now and I just can't figure out how to solve it.
HTML element 'Canvas' provide functions getImageData and putImageData, so it is possible to read as well as to modify image-data. I need this functionality in an ExtJS (Sencha,version 5.1) project. I have to use a sprite of type 'image'. But I can't find any functions addressing neither access to pixels nor access to undrlying canvas, if such is used. Is there an another approach to achieve this?
with regards
Rafal Ziolkowski
So what you need to do is draw your sprites onto a canvas? From a browse of the ext js code there is a Ext.draw.engine.Canvas component which I believe uses a html canvas element. In this class you may be able to do what you want and get image data. If not you can always go and grab the element it renders and call the appropriate getImageData and putImageData. Hope this helps.
drawContainer = Ext.create('Ext.draw.Container', {
items: [{
mySprite
}]
});
// after render
surface = drawContainer.getSurface();
surface.flatten(size, surface); // returns the drawn image data
// do this or get the element
canvas = surface.el.down('canvas');
not sure if this is what you want but hope it helps. Consult the documentation theres plenty of information on drawing sprites.
senchadocs
This is not a: "Do all the work for me!" kind of question. I just wanna know which approach you think would be suitable for this challenge.
I have this map:
As you can see by the blue marker, I've roughly drawned some selections/areas of the map. Theese areas I want to serve as links.
But I don't quite know how to grasp this challenge, since all of the areas have quite odd shapes.
I have looked at cords, but it seems like a huge job with all of the twists and turns that I would need to do.
I would be awesome if I could just slice up the areas in Photoshop and save each of them as .png and just tell my page to ignore the transparent area! But that's just wishfull thinking I suppose.
I hope that one of you have a suggestion that I've overlooked.
Give a try to these -
http://polymaps.org/
http://www.amcharts.com/javascript-maps/
Raphael JS
You can try making an SVG version of your map and then implement it's clickiness with one of these libraries depending on which one you choose.
Here's one tutorial to do this with Raphael JS - http://parall.ax/blog/view/2985/tutorial-creating-an-interactive-svg-map
Make an image for each clickeable zone, like this:
Register to the click event of the img element from the page, this way:
var getAreaFromXY = function(x,y) {
// for each section colored map
// get pixel color on x,y (see http://stackoverflow.com/questions/8751020/how-to-get-a-pixels-x-y-coordinate-color-from-an-image)
// if the color is red, that is the zone
};
$(".post-text img").click(function(e) {
var area = getAreaFromXY(e.offsetX, e.offsetY);
});
I want to split my map into tiles/territories. So i've prepared another layer showing squares. But this layer is full of .png image files so there is no data/object for this squares.
I've also tried to draw squares with leaflet's geometry objects. But it causing performance issues, there is times to show 500+ squares.
If you develop something like that what method would you prefer? UTFGrid? GeoJSON/Geometry? Or maybe any other better solution?
UPDATE:
Actually i don't want to get data belongs to square's territory i just want to change the square's color somehow i mean somehow i want to highlight that area maybe i can create a rectangle on the fly when user mouseover.
And im trying avoid to use UTFGrid for just highlighting. But I want to ensure the UTFGrid is the only way or not.
This sounds like the exact reason that UTFGrid was created! This site links to the tutorial that I used when learning UTFGrid, and it is solid.
Updated after your update:
MarkerCluster might have the look/feel you are going after, they basically paint a polygon onto the map layer. You can check the source here, and here's a relevant snippet:
_showCoverage: function (e) {
var map = this._map;
if (this._inZoomAnimation) {
return;
}
if (this._shownPolygon) {
map.removeLayer(this._shownPolygon);
}
if (e.layer.getChildCount() > 2 && e.layer !== this._spiderfied) {
this._shownPolygon = new L.Polygon(e.layer.getConvexHull(), this.options.polygonOptions);
map.addLayer(this._shownPolygon);
}
},
when working with the jquery library flot (like this), you might want increase precision when hovering over he dots, so my question is if there is any way of making this area of whitin a dot is hovarable bigger?
Use the radius property of the series hash you pass to the $.plot function to set the radius of the clickable data point on the chart. So instead of this as it is now:
points: { show: true }
change it to, say, this:
points: { show: true, radius: 6 }
The measurement is in pixels and the default radius is 3 pixels. Personally speaking I wouldn't go much above that if the data points are close together like in the example chart: you run into the opposite problem where all the points overlap and run into each other.