I have an e-commerce website where I sell illustrations from different independent artists.
I have an idea where the user turns on the camera and see how a poster (png file) looks in their wall, using the web browser of their mobile.
Is this achievable with AR.js or this is something achievable only with a native mobile app?
If so, could you share some guidance for me to start looking into?
Thanks you all!
Yes, you can, using a browser and webcam, and of course some JavaScript.
One way is to have the end user print out a marker with a defined pattern that you can then replace with an image. The Image Texture example at this URL on GitHub contains almost exactly the code you want, running in a browser.
With ARjs you can only do it if the user has a marker on their wall. You can have the users printing markers as part of your user journey. I think a better solution for you will be model-viewer. Model-viewer can recognize surfaces and add your models to this surface, the problem is that if you want to present a png, you can't. what you can do is convert this png to a 3D model (just a plane really) and present that.
You can also check out echoAR (full disclosure - I work there), and see if there are any solutions that work for you with ARjs/ model-viewer.
Hope it helps.
Related
I'm new to Lottie, have had some tutorial and tests completed, and got fascinated with the idea of mixing together After Effects animation with HTML5 animation. THANK YOU AB&B GENIES!
We're about to develop an online interactive project in which we'll cover our client's fashion collection.
The problem is, we'll have to use raster PNG images, rather than AE vector, because the client's got an exclusive waterpaint guideline for images.
Please have a look in this (closest) example of image ->Fashion woman waterpaint
We'll have different models (male and female) standing in idle position. Like, breathing, moving a little bit, like they're alive. We're planning to have their body parts and clothes in raster PNG images, animated with AE and exported with Lottie Bodymovin.
Then, we'd like to have [BUTTONS] which would help out the user to change these models clothes, like experimenting new fashion styles, colors, stamps, etc. A limited and pre-set range of PNG clothes will be used, to cover up the new collection.
How does Lottie work with changing such pre-set images, when clicking a button on runtime? Is it possible? The application will be hosted on an online server, and played on browser for an specific event, so no need to think about android or ios this time.
I'd like some references, please, I'm a bit lost around LottieAnimationView and setImageAssetDelegate, both which I can't see how to implement - if those are the proper solutions.
Thank you guys!
I've tried to ask this question before, but I failed completely there. After useful input, I decided to leave that one, and to try again.
I'm looking to create a web-based application where users can draw images built from a set of pre-defined icons. There is a need to be able to save the final image (encoded jpg/png), and also save a "current setup" that can be re-loaded later for further editing (a "settings" file?).
My question : What would be the best approach for this matter? Flash+AS3? HTML5+JS? Something else?
For better understanding of what I want to create, here are 2 screenshots that illustrate in what direction I'm thinking:
The drawing application (made in Flash): http://imgur.com/U4GNKJF
The final created picture: http://imgur.com/aCtxwo1
Thanks in advance, and I really hope I've made my question more clear this time.
Since you need advice...
Draw your icons in some art software (even online) and save as transparent PNG's
Look-up HTML5 Drag & drop tutorials that involve "Canvas". You'll want to meaure the positions of objects dragged (mouse position on Canvas) and their order. The drag function could update a JSON String (this hold entries of items, type, position, etc)
Look-up How to save JSON as text file, also how to parse text file as JSON. This becomes the "settings file".
To save images best use PHP language code. PHP must be installed on the server (most have, or is installable or else get a better host). There are tutorials on how to save an image with content from "snapshot of Canvas"
flash is unsupported on IOS and android mobile browsers and google is giving a lower index to websites using it.
I would use javascript with HTML5 canvas with PIXI.JS ,CreateJS or PANDA.JS.
These libraries make it easier to create the canvas elements you need (draggable objects, buttons ) from sprites and adding event listeners to them.
And drawing graphics on the canvas (lines, shapes).
Since you have a lot of sprites you can pack them in a spritesheet with TexturePacker for faster loading ( and PIXI works great with spritesheets).
You can package this web page to android/ios with phonegap,ionic,crosswalk, cocoonjs etc ( i recommend ionic + crosswalk webview it gives great performance)
for saving i would also use a json file to save the setting . You can use PHP to load and save it.
Can anyone suggest a good javascript library for displaying and navigating huge images in HTML?
I need a way for my users to navigate some custom maps[1], with zooming and dragging similar to Google Maps. I need the solution that works offline as I'm embedding it in an iPad html (phonegap) application[2].
I actually already have this working (mostly) with PanoJS. But it lacks a way to float widgets above items in the map, e.g. Float a button over an area of the map that can be clicked to navigate to somewhere else.
I am able to split up my large images into tiles. I'm just looking for a slightly more advanced viewer than PanoJS, without having to build it myself :)
Anyone got any ideas? Some have suggested OpenLayers. War stories?
Thankyou,
dan
[1] The maps are stylized and don't map to real world coordinates.
[2] All the images and tiles are supplied with the application and are loaded locally.
In the end I went with leaflet.js. This was able to give me the map, layers, markers and the other bits and pieces I needed. (http://leaflet.cloudmade.com/)
I spent quite a bit of time with ModestMaps.js along the way. That's a great library, but quite low level. Leaflet ended up being the best mix.
Thanks everyone for their help.
Hi I'm looking for a way to create a panorama view with a 360 degrees photo. I need a solution to do create something like QTVR. There is a lot flash based software out there (I'm trying to avoid that) and also some javascript/prototype/jquery solutions. But none of the solutions I've found have the behaviour I'm looking for. I want to eanable users to look around (just horizontal). Furniture objects on the pictures should react on mouseover, so that I might have multiple "layers" to distort. Is there a way to manipulate images in pure javascript or with jquery so, that it looks like they where bent cylindrical? Or does anyone know good libraries that support that kind of image manipulation? Might webgl be a good solution? I don't really know how to start. Is there anyone who could give me a hint. I'm just looking for a direction. google didn't bring me usable results.
Check out three.js
http://mrdoob.github.com/three.js/examples/webgl_panorama_equirectangular.html
Also, you could possibly do some of the image manipulation via canvas.
https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas
It might be easier (with canvas) to just have a fully processed panoramic image, and figure out which pixels represent your interactive object. Then listen for mouseovers on those pixels.
try out http://panorado.com/en/PanoradoJs.php
There you'll find an excellent HTML5/JS based Viewer.
There are lots of tool to do that. Have you tried www.vtility.net ? Im not sure if it had mouse over layering. But it was the only SEO friendly that I have found.
I am looking for a Flash based image uploader with resize and possibly rotate function.
I have checked many possibilities, and the very best in simplicity and unser experience I found is Kroppr at a very affordable €29/license.
The downside is, it comes with encrypted PHP code to bind the product to a subdomain. That is understandable, but while I'm perfectly happy to pay money for a tool as great as that, and ready to sign all sorts of legal agreements to protect the license, I am not ready to use encrypted PHP code, especially not from an outlet that doesn't even have a postal address on its web site.
Does anybody know an Open Source or commercial solution that comes close to Kroppr and ships with source, or allow for full customization and free definition of the server-side backend?
The features in detail:
Rectangular selection to crop image, slider or similar to zoom
Optionally: Rotating
"Accept" and "Reset" buttons, "accept" triggers a call to the server and submits the image
Full visual customizability (at least background and text colours)
Possibility to rename all controls
The server side technology would preferably be PHP.
http://deepliquid.com/content/Jcrop.html i love this one, every easy to use and tons of features. i know your searching a flash cropper but this question is tagged with js too so....
I found these three image utilities during my search:
Flex Image Cropping Component
HOW TO CROP AND RESIZE AN IMAGE USED AS BACKGROUND FOR CANVAS
Building an image-viewing widget with ActionScript 3.0
The first one is an open source flex component using an MIT license. The second one is a how to,with full source available. It doesn't have a sizable box, but it seems ok otherwise. The last one is also a how to article from adobe.com with source available.
Here is a list of good javascript based croppers:
Yahoo! UI ImageCropper
Jcrop
MooCrop
UvumiTools
PHP & jQuery Image Upload and Crop
Here is a list of action script based croppers:
Flex Image Cropping Component
Image Crop
http://www.adylevy.com/index.php/2009/07/22/multiple-files-uploader-with-preview-on-client-side/
OR
http://www.resize-before-upload.com/
...took a bit of searching =)
I would take a look at the free pixlr editor and their developers API : http://pixlr.com/wiki/developer
I've used RadActive's I-Load component before, with great success. The UI customisation options are a little limited, but as far as functionality goes, I'm pretty sure it meets all your requirements.
EDIT: You don't specify what server-side technology you're using (if any). I'm pretty sure I-Load is designed for ASP.NET - this may or may not be an issue for you.
This is also a nice once and its only $10.
http://www.shift8creative.com/projects/agile-uploader/index.html
Still doesn't have image rotation/cropping. I most definitely do plan to add that, but after checking out all the things I could find I still wasn't happy. I researched out all the particulars and just ended up building my own. You're welcome to use it if you like and haven't found something else by now. Keep checking the link, I'll update it to include the rotation and crop feature along with multiple image uploads.
Something like this?
http://matrixoft.infunity.com/agents/calvin/tmp/forPekka.html
I'm perfectly happy to pay money for a tool as great as that
To carry out the responsibility of posting the answer for stackoverflow users, here is part of the crop image code:
var tNewImage:BitmapData=new BitmapData(mouseX-vCropX,mouseY-vCropY,true,0);
iImg.getChildAt(0).x = vSize/2 -vCropX;
iImg.getChildAt(0).y = vSize/2 -vCropY;
tNewImage.draw(iImg);
Where iImg is the movieclip containing the image with the image center positioned at (0,0) , vSize is the image dimension, vCropX and vCropY is the top left cropping coordinate. The tNewImage BitmapData is used for constructing the new Cropped Bitmap image