PIXI JS Movie Clips and Loading Assets - movieclip

In order to do a Movie Clip in PIXI.js are you required to have a JSON file? Is it possible to have the JSON inside the same file, especially if the movie clip is only a few frames and load the image like you load all other Sprites.
The only examples they have of movie clips is a bloated Fighter Jet example. Is this method possible? As MovieClip extends Sprite. I hoped to achieve this because I have multiple images with the exact same frame information and I did not wish to duplicate it all.
$(document).ready(function() {
PIXI.loader
.add('point', rootUrl + "images/games/faction/base_point_sprite.png")
.load(start);
});
functions start() {
}

are you required to have a JSON file?
No. A MovieClip only requires an Array of textures. Those textures could come from JSON file, or from separate images.
Is it possible to have the JSON inside the same file?
Not sure what you mean, but typically when loading in a Sprite sheet, you would have a png image plus a JSON file that corresponds with it.
Here is a MovieClip example that uses 4 separate images instead of a JSON file:
var imgs = ["image01.png","image02.png","image03.png","image04.png"];
var textures = [];
for (var i=0; i < 4; i++)
{
textures.push(PIXI.Texture.fromImage(imgs[i]));
};
var mc = new PIXI.MovieClip(textures);

Related

Is there a way to load every image in images.xcassets into a uicollectionview without manually typing the image name?

I want my users to be able to view every image that i have in images.xcassets in a collection view, but theres about 50 image, and I'd rather not manually type the name for every one. Is there a way that I can load them all without doing this?
its not possible according the this post
Unfortunately it is not possible to load images from any car file
aside from the one that Xcode compiles into your main bundle, as
+imageNamed: does not accept a bundle parameter, which is what is needed to do so (and even then it would only be able to open a single
asset catalog in a single bundle).
but there is always some solutions(today we have 2).
rename all images in your images.xcassets (lets say you have 20 message) to 0..19 and after that take image using loop like so:
var imageList = [UIImage]()
for i in 0 ..< 20{
imageList.append(UIImage(named: String(i))!)
}
//imageList will hold all your images
or you can put your images inside your project folder and search for file that contain the known images types like so:
let fm = NSFileManager.defaultManager()
let path = NSBundle.mainBundle().resourcePath!
let items = try! fm.contentsOfDirectoryAtPath(path)
var imageList = [UIImage]()
for item in items {
if item.hasSuffix("png") || item.hasSuffix("jpg") || item.hasSuffix("jpeg") {
imageList.append(UIImage(named: item)!)
}
}
let me know if you need more explanation

Log GPS Points to Map

Is it currently possible to use GEOLOCATION to enter points or polygons to a map layer, and access that information in form of SHP file, GPX, or KML?
The only examples I currently see render an IMAGE which is pretty much useless from a 'mapping' standpoint.
Thanks
OpenLayers 3 provides everything you need to write such an application. To track a geolocation, you can do something like this:
var geolocation = new ol.Geolocation({
tracking: true
});
var track;
geolocation.on('change:position', function() {
var coordinate = geolocation.getPosition();
if (track) {
track.appendCoordinate(coordinate);
} else {
track = new ol.geom.LineString(coordinate);
}
});
To create a GPX from the track, you can do
var gpx = new ol.format.GPX().writeFeatures([new ol.Feature(track)]);
The gpx variable now holds a string of the serialized GPX document. You can write its content to a file or upload it to a server or do whatever you want to do with it.

How to cache many images(in loop) properly using forge.file.cacheURL?

I have a list of products that I download as json file from server. Each item contains a link to the image stored on server.
Now I want to be able to see the products when offline, so I store downloaded json file into forge.prefs http://docs.trigger.io/en/v1.3/modules/prefs.html and pull it out to display items on screen. It works nice but I also need to store images localy to be displayed correctly.
To achive this, I'm trying to use forge.file.cacheURL http://docs.trigger.io/en/v1.3/features/cache.html but can't handle the correct order of operations. To cache images I run the json file and for each line I call forge.file.cacheURL and store the url back to JSON item. But here is the problem as forge.file.cacheURL runs asynchronously so my loop running over the items and gathering the local images finishes and my code continues to display images(view items) but meantime the forge.file.cacheURL still gathers and caches the images because its asynchronous operation. I need somehow to detect that last item is being cached and then refresh the view on screen to use correct image urls ... or something else that will lead to what I need.
Hopefully you understand the concept. How should I handle this properly ?
Since v1.4.26 you've been able to permanently store images (see http://docs.trigger.io/en/v1.4/release-notes.html#v1-4-26), rather than just cache them. Depending on your needs, that might be a better option than forge.file.cacheURL and forge.file.isFile.
I don't follow exactly the situation you describe, but something like this will let you wait for several asynchronous things to finish before doing something:
// e.g.
var jsonCache = {
one: "http://example.com/one.jpg",
two: "http://example.com/two.jpg",
three: "http://example.com/three.jpg"
};
var cacheCount = 0;
for (var name in jsonCache) {
if (jsonCache.hasOwnProperty(name)) {
var imageURL = jsonCache[name];
cacheCount += 1;
forge.file.cacheURL(imageURL, function (file) {
forge.prefs.set(name, file, function () {
cacheCount -= 1; // race condition, but should be fine (!)
if (cacheCount <= 0) {
alert('all cached');
}
});
});
}
}

Creating composite image from two source png in Groovy

I've seen some Groovy code that lets you combing images and text, but not images and images ...
Essentially, I need to overlay symbols at certain coordinates on maps: I have some maps and symbols as .png files. I can do the coordinate calcs no problem, so the issue is more a case of, given two transparent pngs how do I combine them without losing transparency? (Both the map and the symbol may need to retain their transparency).
Ideally I need a function, something like
combinePngImage(background_src, foreground_src, foreground_x, foreground_y)
that would return a png combination of the two, given the top left, top right coordinates of the foreground image.
[Background: I have some maps and symbols as .png files stored in container fields in FileMaker that I need to combine within a FileMaker solution. I've tried looking in to doing it using ImageMagick and the command line, but it suddenly struck me that this may be something that could be done using ScriptMaster, which uses Groovy to create external functions. ]
Any pointers gratefully received!
Okay, for what it's worth - here's some cobbled together cookbook snippets that seem to do the job - any comments on the (poor) coding style greatfully received.
Given a ScriptMaster call to
combineImage ( backgroundImg ; foregroundImg ; x ; y )
the required code is:
import javax.imageio.ImageIO;
import java.awt.*;
import java.awt.image.BufferedImage;
import java.io.File;
import java.net.URL;
// get container data
InputStream bgImgContainer
try{
bgImgContainer = fmpro.getContainerStream(backgroundImg)
}catch(e){
throw new Exception('Could not get data from background image container (make sure container field name is passed as text)')
}
// test if container field is empty
if( bgImgContainer == null ) {
throw new Exception('Background image container field is empty')
}
bgImgName = fmpro.getContainerFileName(backgroundImg);
InputStream fgImgContainer
try{
fgImgContainer = fmpro.getContainerStream(foregroundImg)
}catch(e){
throw new Exception('Could not get data from foreground image container (make sure container field name is passed as text)')
}
// test if container field is empty
if( fgImgContainer == null ) {
throw new Exception('Foreground image container field is empty')
}
fgImgName = fmpro.getContainerFileName(foregroundImg);
int xCoord = Integer.parseInt(x);
int yCoord = Integer.parseInt(y);
// load image from container data
BufferedImage result = ImageIO.read(bgImgContainer);
BufferedImage overlay = ImageIO.read(fgImgContainer);
int fgWidth = overlay.getWidth(null);
int fgHeight = overlay.getHeight(null);
Graphics2D graphics = result.createGraphics();
// overlay the foreground at given coordinates and actual size
graphics.drawImage(overlay, xCoord, yCoord, fgWidth, fgHeight, null);
graphics.dispose();
File output = File.createTempFile(bgImgName, ".png");
ImageIO.write(result, "png", output);
return output;
Rather than using the ImageMagick command-line, you could try using Im4java, a pure Java ImageMagick API.

Monodroid Camera/imageview example

Can someone post an example of how to use the camera, capture the image, preview the image in an image view, compress the image in jpg and upload the bytes to a remote server? The closest I have been able to find is below. We have the camera, and image capture but we need to know how to preview, compress/resize jpg to 640/480px and around 120kb size then upload bytes to a remote server. Thanks to all of you for your help.
http://android-coding.blogspot.com/2010/12/intent-of-mediastoreactionimagecapture.html
Looking at your code there are some things i notice to be wrong:
-[ for the camera functionality ]-
Don't create a file yourself. This is not necessary. Use the ContentResolver.Insert function to give you back a file URI that will contain the picture, just like done here and also take over the isMounted if you want to check if there is external memory present.
You are checking if there's data and then checking if there is a thumbnail. If there's no thumbnail you'll get the full image. That doesn't make sense unless you want to make a thumb of the full version if the thumb is not given back?? Don't you just want to grab the full version or both but not this OR that?
You are retrieving a string value variable to get the URI to the full image? Just save the uri you get from the code in my first point as a property (let's say "myPhotoURI" in the activity class. In the OnActivityResult function that handles your camera intent result just recall that URI and use it as following (Yes, you're seeing it right; i'm not even using the data intent for this just the remembered uri):
Bitmap imageFromCam = MediaStore.Images.Media.GetBitmap(this.ContentResolver, Android.Net.Uri.Parse(myPhotoURI));
To grab an image from the gallery just use the SelectImageFromStorage() function from this question's answer and retrieve the URI of the chosen image in the OnActivityResult check just use:
Android.Net.Uri selectedImageUri = data.ToURI();
That's what worked like a charm for me.
-[sending the data to a webservice ]-
Assuming you're using a WCF or webservice that'll want to receive the image data as a byte array; the approved answer to this question gives a nice example of how to convert your image to an byte array (which is what a WCF webservice wants, anyway)
I think that these directions will get you going.
here is the closest example to date... this brings back Null data when the extra output is used. Still trying to get access to the full image/photo and not a thumbnail.
private void saveFullImage() {
Intent intent = new Intent(Android.Provider.MediaStore.ActionImageCapture);
string file = System.IO.Path.Combine(Android.OS.Environment.DirectoryDcim.ToString(), "test.jpg");
var outputFileUri = Android.Net.Uri.Parse(file);
intent.PutExtra(Android.Provider.MediaStore.ExtraOutput, outputFileUri);
StartActivityForResult(intent, TAKE_PICTURE);
}
protected override void OnActivityResult(int requestCode, Result resultCode, Intent data)
{
base.OnActivityResult(requestCode, resultCode, data);
if (requestCode == TAKE_PICTURE)
{
Uri imageUri = null;
// Check if the result includes a thumbnail Bitmap
if (data != null)
{
if (data.HasExtra("data"))
{
var thumbnail = data.GetParcelableArrayExtra("data");
// TODO Do something with the thumbnail
}
}
else
{
var outputFileUri = data.GetParcelableArrayExtra("outputFileuri");
// TODO Do something with the full image stored
// in outputFileUri
}
}
}

Resources