Introduction to YCanvas

Hello YCanvas, who are you? I am an open source ActionScript 3 library that provides stage3D (GPU) engine for perfectly overlapping grid based zooming projects like world maps or onBoard. What? Ok, I am the engine that statnds behind onBoard, and I can handle much more. I can implement Wall Of Fame, WebCanvas, MapQuest, ArcGIS, Open Street Map or do some experiments like Flickr gallery, all this in one flash, few lines (10-20) of specific code per mode, all running at 60 FPS. Anyhing else would you like to see implemented? Just let me know… Do you want to know more and see it in action?

Enough talking, now impress me!

This is YCanvas explorer demo (run fullscreen), you can find sources on repository.

There is also simpliest possible implementation of YCanvas available with sources as well.

FAQ:

Q: Can you run on mobile/AIR?
A: Comes hand in hand with Stage3D available in AIR for mobile.

Q: Can you run google maps?
A: Technicaly yes, on AIR there is no problem at all. In case of Flash Player, however, engine uploads BitmapData to graphic cards, in order to upload it you need the access that would be granted via crossdomain.xml, and unfortunately google maps domains do not serve one.

Q: What are the requirements?
A: wmode=direct, flash player 11.1

Q: Do you have a CPU fallback in case there is no GPU available
A: Not yet.

Q: Do you have a support for moving, rotating, zooming?
A: The YCanvas api lets you set all of these manualy, or you can use available util classes in case you want to rotate around specific point or zoom to specific place. Checkout demo and explorer sources in repository.

Q: Do you have multi touch support, gesture suppport?
A: Yes, have a look at ApplicationRemotair in sources. You can use two finger gestures to move, rotate, scale.

Q: Do you have implementation for drawing?
A: Yes! Any display object on stage can be applied/drawn as simple as by calling one function. Read more in asdoc.

Q: Can I convert points to latitude longitude?
A: Yes! Have a look at GeoUtils.as and Boundary.as.

Q: I like it and I want to support. How?
A: Cool, feel free to donate via PayPal here. Thank you.

45 comments so far

  1. […] […]

  2. […] the same time I released YCanvas, I have spotted an interesting starling experiment. I realized I can do this for YCanvas easily […]

  3. […] Introduction to YCanvas at Jozef Chúťka's blog From blog.yoz.sk – Today, 8:18 AM […]

  4. Cory November 8, 2012 12:07

    Hey Jozef, this is fantastic work. I haven’t dug into the code yet, but would it be easy to implement local tileset in the zoomify format? I guess I’ll have to give it a try. If you’ve done it already, let me know, if not maybe I can throw it back to you if I get it working.

  5. Jozef Chúťka November 8, 2012 13:37

    Hi cory,
    I have not done it myself yet, and do not have much knowledge about local tilesets from zoomify, but I have just replied zoomify question on starling forum with following:

    With YCanvas you can implement any tile overlapings projects… I am looking at zoomify requests right now and I do not see any reason why this could not be implemented:
    http://www.zoomify.com/images/folders/parisSatellite/TileGroup0/4-1-4.jpg
    http://www.zoomify.com/images/folders/parisSatellite/TileGroup1/5-6-10.jpg
    you just have to figure out how to translate ycanvas coordinates into request. Have a look at https://github.com/jozefchutka/YCanvas examples code and fork Partition.as to load images from zoomify.
    …zoomify does not provides crossdomain.xml though so you have to figure out that one

  6. LeF03X January 17, 2013 17:00

    Jozef, Super library man. We are currently looking for an alternative for our GIS (flex based on openscales) component. Mainly because of the requested gpu acceleration. Have you had any experience with a real GIS application using Ycanvas? I mean translating local x,y coords to geospatial coords for markers and such?

    Thx for the work!
    LeF03X

  7. Jozef Chúťka January 17, 2013 17:52

    hi LeF03X,
    I am actualy using the lib for much more. Have a look at trainlord.com , there is YCancas implemented directly into the game, using osm vector data to overlay over the tiles. translating x, y coords (pixels) use the same implementation as the osm one. I can share if you have difficulties writing in as3.
    here is the lib using markers http://ycanvas.yoz.sk/markers/

  8. LeF03X January 23, 2013 18:10

    I’ve played with trainlord.com and I must say that I love the concept. Using open data to create a game the way you did with trainlord is I think the future. I must say that earning a profit (within the game) is really hard, and there are still a couple of bugs, but great work so far.

    We want to use ycanvas instead of openscales, and we have a lot of streaming sources with point information (lat/lon). So I guess the only thing I am needing is a conversion from lat/lon to ycanvas coords and vice versa.

    I will take a look at the markers library to see if this is enough for me to implement our gis application.

    Thanks for the reply!

  9. LeF03X January 23, 2013 18:27

    Got another question. Looking at the markers project, I guess it should be easy to make a mapnik version for local use (we have OSM data and some other geo data in our own postgis/postgres repository) we use mapnik to render the osm data. Do you have any experience with such a setup?

    Greetz,
    LeF03X

  10. Jozef Chúťka January 23, 2013 19:34

    I sent you GeoUtils.as by email. Not sure what is the output of mapnit, in case it is map tiles, it should be easy to implement “localhost” in Partition.as load request

  11. LeF03X January 23, 2013 21:17

    Thx for the class. Mapnik produces tiles (png) so it shouldn’t be to difficult to add support for it. When I’ve added it I will share it with you…

  12. LeF03X January 24, 2013 11:49

    Do you have any experience in a flex/ycanvas combination project for AIR? Is it possible to make a ycanvas map component and use it in a flex application?

  13. Jozef Chúťka January 24, 2013 12:04

    I have an experience running YCanvas in flex project – Train Lord e.g. But even I personally have no experience running it in AIR I believe there are no obstacles as air supports stage3d

  14. LeF03X January 24, 2013 13:37

    Super! Thx for the help so far and the effort of developing ycanvas!

  15. LeF03X January 26, 2013 16:48

    I’m trying to use YCanvas within a Flex application (AIR) with sdks 4.6.0 and air 3.5. I’m seeing the buttons etc, but Im not seeing the tiles (openstreetmap). I get a response from the openstreetmap partition load (onCOmplete) but after that I’m kinda lost for the moment (no tiles visible)… There must be a simple solution for this. Can you help me?

    Should I ask these kind of questions here, or is there a development forum or something?

    Thx!

  16. Jozef Chúťka January 28, 2013 11:36

    my guess, is you are missing renderMode=direct in your window properties. have a look at http://help.adobe.com/en_US/air/build/WS2d929364fa0b81374fa5df4f129dca62884-8000.html . I think this is a good place to ask

  17. LeF03X January 28, 2013 11:56

    It was something much simpler… I forgot to set the backgroundalpha to 0…
    I’ve noticed that the tiles do not honor the flex view hierarchy in respect to the position of their parent..
    Is it something youve encountered before?

  18. Jozef Chúťka January 28, 2013 12:22

    I think I know what you mean. Have a look at http://www.adobe.com/devnet/flashplayer/articles/how-stage3d-works.html esp. “Figure 3. Understanding how Stage3D is displayed as the stage behind the Stage.” Basicaly stage3D (ycanvas) is always under stage (flex component). Its not possible to show any stage DisplayObjects/flex components under stage3D content as this is how flash player handles stages.

  19. LeF03X January 28, 2013 18:33

    Thx for the link. Do you have by chance a class which depicts the current scale of the map? And if so, would you care to share it? If not, than I will build one and share it with you. BTW, you already have Mapnik support! The opernsctreetmap partition is usable for Mapnik. If you want to see a local mapnik server, than just change server part in the partition.

  20. Jozef Chúťka January 28, 2013 23:15

    yeah osm, cloudmade, mapbox and other works with the same x, y, z coordinates for tiles, I just didnt know the system is called mapnik. What exactly do you mean by “depicts the current scale of the map” there is a layer.level to “z” conversion in OpenStreetMapsPartition get url() method implementation

  21. LeF03X January 29, 2013 16:01

    I’m looking for a component for the user to read of the current scale of the map. It normally states what 1km is on the map by a line or something. 1cm on map is … km in real world.. That kind of information.
    I just updated the starling part of the library to the new 1.3 in order to use filters and such. I din’t have to change a lot of code to get it to work with Ycanvas, but I think there are improvements in starling 1.3 you could make ycanvas even better!
    Got one question for u. I keep getting starling outpu that it uses directx 9 or something but I’ve got 11 (and capable gpu) installed on my computer. How do I tell straling to use that fdriver instead?

  22. Jozef Chúťka January 29, 2013 16:42

    Have a look at GeoUtils.pixelsPerMeter, GeoUtils.distance. The resolution is a function of both scale and latitude (mercator projection). There are methods in YCanvas that translates viewport points to x/y, you translate to lon/lat, that can be used in GeoUtils.distance to discover the distance.
    Cool to hear that there was not much changes necessary for latest starling, once I have some time I will update, I havent done yet as I tought it contains just some filtering stuff that would not help improve performance and stuff…
    Stage3d requires just a subset of directx features so it runs the same on every machine, so I think that 9 is how its implemented in flash player…

  23. LeF03X January 29, 2013 16:49

    Thx a lot for everything so far. We are now sure that ycanvas is the answer to our openscales problem. Maybe we could work together to create an alternative to openscales with at its core your fantastic work on Ycanvas?

  24. Jozef Chúťka January 29, 2013 17:37

    You are welcome LeF03X, I am glad YCanvas fits your requirements. Openscales seems to contain much more tools than YCanvas does, but map pan/zoom performs much smoother with YCanvas. Unfortunately I am running multiple projects and can not focus on YCanvas these days. Feel free to use and continue implementing stuff in it and if interested push another app into YCanvas main repository

  25. LeF03X January 29, 2013 17:55

    Openscales has more options and tools, only no-one uses them (at least that’s my assumption based on answers to questions I’ve posted) so an alternative to openscales should be able to show maps and let people draw area’s etc on them and show markers etc…I think Ycanvas has everything in place for these requirements.

    What other projects are you working on?

  26. LeF03X January 29, 2013 18:03

    The small rotating progres meter in the right upper corner in onBoard project, care to share it?

  27. Jozef Chúťka January 30, 2013 14:26

    My current projects are my fulltime job and Train Lord :-)
    I use http://blog.yoz.sk/2010/06/urlrequestbuffer-buffer-your-requests/ in onBoard – the number comes from buffer.countWaiting + buffer.countActive. The rotating thing is somewhere in my fla-s, I think you can make one in 15 minutes.

  28. LeF03X January 30, 2013 15:15

    Thx again. My background is ux design and agile requirements engineering (elicitation of requirements by using rapid prototyping and agile methods), I’m however not a graphical designer. I can recognize great graphical design fast, but I’m much slower when it comes to (re)creating it myself :)

  29. LeF03X January 30, 2013 20:34

    Another question. I try to create multiple instances of ycanvas in one application. It’s working almost out of the box, only it seems the viewports are shared between instances resulting in the two instances overlapping while reacting to their correct handlers and such. The tiles seem to be overlapping on exactly the last viewport created. The extra buttons (zoomer/rotator) are drawn on the correct location. Only the tiles are overlapping… any thoughts?

  30. Jozef Chúťka January 31, 2013 01:53

    I have spent some time figuring out multiple instances of YCanvas. It seems to be possible, it just needs a little trick because Starling unfortunately uses some static properties.
    1. make engine property public in YCanvasStage3D
    2. pass canvas.engine into partitionFactory e.g. new PartitionFactory(canvas.engine);
    3. pass engine to every Partition in PartitionFactory e.g. new Partition(engine, layer, x, y);
    4. prior creating every texture Texture.fromBitmapData() in Partition you have to call engine.makeCurrent();
    5. make sure to pass diferent stage3d for each YCanvas (stage.stage3Ds[0], stage.stage3Ds[1] …)
    6. now you can see multiple instances of YCanvas in your project

    … what happens is that as Starling uses static properties, it tries to be smart enough to get context for texture staticaly from Starling class, however there are 2 context already and we need a texture to be created for a correct one, in order to do so you have to call makeCurrent on starling.

  31. LeF03X January 31, 2013 12:38

    Thx man you are the best! I already had roughly the same idea after reading tons of starling stuff and examining the ycanvas code, but this makes it a lot easier to create multiple instances of ycanvas… We want to use it to follow multiple contacts at the same time and create a map component for each monitor at our disposal…

    So what do you do for your day job? do you have your own company?

  32. Jozef Chúťka February 1, 2013 21:36

    Yeah, it will be easier to make multiple instances as I havent expected multiple engines in one when developed. there are 4 stage3ds avaialble in flash player. I work for http://www.kitd.com/

  33. Derek Adams February 6, 2013 02:54

    Hi Jozef,

    First, I’d like to say thanks for making this code available! It’s rare you find a library as cleanly written and well documented as this. I am working on a mapping application in AIR mobile and noticed you mentioned above that you had done work with lat/long data. I am trying to figure out the right approach for adding lat/long points and overlaying vector data like you do in Train Lord. Any help you can give me on the subject would be much appreciated!

    Thanks!
    Derek

  34. Jozef Chúťka February 6, 2013 10:28

    hi Derek,
    I have updated the article and added link to GeoUtils sources that will help you translate points to lat/lon. AFAIK, you can not overlay vector data in flash, you have to rasterize it first. This is what is done in TL. I draw paths, rasterize and upload to gpu as a texture. In order to hanldle multiple layers lets say map tiles in lower and some tooltips in another, checkout ApplicationMarkers from github esp. CanvasRoot.as to see how to handle multiple layers within ycanvas.
    good luck with your air app. If you succeed I would be glad if you could share
    Jozef

  35. Derek Adams February 7, 2013 04:53

    Thanks for adding the reference for GeoUtils. It will be a huge help! Have you taken a look at https://github.com/unwrong/Starling-Extension-Graphics for drawing vector graphics in Starling? I’ve seen the approach where people use Flex to create vector graphics from components, then sample them into bitmaps for use in Starling. It’s pretty easy code-wise but I’ve heard it is slow when adding many objects. I’m still playing around with the various approaches to see which works best. If I figure something out that can be reused, I will definitely contribute it back!

  36. Jozef Chúťka February 7, 2013 10:15

    interesting approach, I will give it a try once I have some time.

  37. LeF03X February 11, 2013 14:49

    Hi there,

    I have followed your advise on how to get multiple instance of canvas in an application. I’ve noticed that with ech instance, the framerate is negatively affected. Is there a cure for this (for I have more than one GPU… or is that the cost of having more than one instance? (1 canvas = 60Hz, 2 canvasses = 30Hz, 4 canvasses = 15Hz = not nice on the eyes…)

    Thanks!

  38. Jozef Chúťka February 12, 2013 10:35

    hi, as I remember I havent noticed any impact running multiple instances of ycanvas/starling. I am not aware of what can cause it on your side either, I have a common pc configuration. I think it would be worthy to update ycanvas to handle multiple instances within one starling in your case.

  39. LeF03X February 26, 2013 09:40

    First let me say that YCanvas and Starling are both great pieces of software. Currently I’m trying to create some sort of drawing functionality for drawing on a map (polygons and lines). Do you have by chance some code snippets where you do this?
    Furthermore I’m looking into implementing multiple instances of yvanvas within one starling as you recommended..

    Thx!

  40. Jozef Chúťka February 26, 2013 09:48

    hi There, nice to hear from you again, I hope dev goes fine. Regarding drawing, there is applyDisplayObject() and applyIBitmapDrawableWithMatrix() methods in AbstractYCanvas with instructions in asdoc. Basicaly if you have display object added on stage, you can simply call the function and each Partition will recieve it with proper matrix (according to partition and source object coordinates). From within partition you can simply call some partitionBitmapData.draw(dispayObject, matrix)

  41. LeF03X April 23, 2013 10:40

    Dev goes great! We succeeded in creating multiple instances of YCanvas over multiple monitors (native windows) without the performance penalty and we have made our first delivery of the product to our customers (which was received very well BTW). Thx again for the ground work and the extra effort of helping me understand your code better!

  42. Jozef Chúťka April 23, 2013 11:47

    great to hear that LeF03X! do you think you can share any more details from your project? – it may help others as more devs asked me to create starling/feathers component of YCanvas. Do you create multiple YCanvas/starling instances or you modifed the YCanvas into component that can be created within one starling multiple times?

  43. mikeciz July 30, 2013 16:06

    Jozef,
    I really love what you’ve done with YCanvas! I think I understand fairly well how it works to load in the bitmapdata through the URL Requests. I’d like to cut up an image during runtime and display it in YCanvas directly.

    How would you recommend doing that? I have done a test that works by cutting up my image into separate images, saves the image tiles and then loads them as necessary in my class that extends Partition. What would be nice is to use my array of image tiles stored in memory to continuously update the map instead of needing to use the loader. I can’t quite figure out how to make this array available to the partitions. My map only has about 30 tiles total.

    Thanks for this awesome library!!

    Mike

  44. Jozef Chúťka July 31, 2013 09:26

    hi Mikeciz,
    I believe it should not be difficult to implement what you need. Notice, partition implementation in demo app has layer, x and y parameters, but you can extend it (+factory) to include more. In your case, you have to reimplement load() method to use your own source of BitmapData instead of URLRequest. Based on how you store your cahced BitmapData you can take advantage of x, y and layer.level values to get what you need from any source you want. Feel free to ping me on my email.

  45. […] months before today I released and open sourced YCanvas library. Since it powers some of my projects nicely (onBoard, Train Lord), some of you requested me […]

Leave a comment

Please be polite and on topic. Your e-mail will never be published.