Littleboy

Join Date 03/2001

+91

DXCanvas

a canvas implementation for DesktopX

Update:

This small update brings a proper shadow implementation with blurring, two new functions (textPath and textAlongPath) and a few bug fixes. textAlongPath is still somewhat buggy with multi-segment paths but otherwise works great (see the TextWave demo). I fixed a few problems with arcTo that wasn’t working as specified and made a few changes here and there. More importantly, I fixed a nasty crash bug that was sometimes happening on exit.

There is also two new utility functions available from script allowing you to suspend the canvas drawing updates. This allows you to do all the drawing necessary for a frame of animation and refresh the canvas at the end, instead of having it refresh at 30fps while your script is doing all the drawing operations.

With this new API, it was possible to fix all the flickering in the included examples! I’ve also added a few new example scripts. Check out the Polygon example, as well as all the text-related ones.

Download

Every major browser has support for it, Yahoo! Widgets has support for it, how come there isn't something for DesktopX?

Enter DXCanvas, a DesktopX drawing plugin that implements the Canvas spec (plus some DesktopX-specific additions).

How does it work

Canvas Controller

DXCanvas is a DesktopX drawing plugin, which means it takes over drawing for the object it is associated to.

In the configuration, you can set the initial size for the canvas. By default, the drawing surface size will be 300x150. You can also specify whether you want the surface to be transparent and show the other objects or windows under it, or opaque.

A canvas object is made available to scripting. To be able to draw on the canvas, you need to request a context. This is done by calling getContext(type) on the canvas object. The only supported type right now is "2d".

See the list of functions in the implementation section. Note that some are slightly different from the Canvas specification, or are completely new. This is to adjust to differences in what is possible in a browser and in DesktopX.

Canvas Controller Widget

I've made a little widget to make testing easier. It loads a list of scripts from a user-defined folder and allows you to switch between them. It support scripts written in both JScript and VBScript.

It basically associate the script to an object having the DXCanvas plugin as a capability.

Two functions are required for the scripts to work: Object_OnScriptEnter() and Object_OnScriptExit().

The canvas size is reset its default size of 300x150 when switching between scripts, so make sure to set it to the required size if needed by your script.

To add a new script to the list, create a new .js or .vbs file in a folder and select this folder in the widget preferences. A few test scripts are included in the Script folder.

It also support subfolders (only 1 folder deep), so you can organize your scripts in subfolders.

How to help

Download the Canvas Controller widget and start creating scripts!

What to look for

strange behavior: colors are not right, context is not saved or restored correctly, etc.
the output from a script is different in Firefox or Safari
crashes or memory leaks

What is broken/not working properly

Drawing still flicker (not as badly as before)
This is a DEBUG build, so it's going to be slower than normal

Links

HTML5 Spec on Canvas
Canvas Tutorial
Yahoo! Widgets Canvas Documentation (Look in Core DOM Reference -> Canvas / CanvasRenderingContext2D)

Changelog

1.1 Build 287:

Added manual drawing mode with suspendDrawing/resumeDrawing methods
(this should allow users to work around the flickering)
Fixed text position being off baseline when drawing on a path
Fixed a rare crash when drawing text on a path
Activated Pixman MMX&SSE2 fast paths
Updated Pango to fix font leak (rev 2746)
Updated Pixman (0.13.2)

1.1 Build 269:

Added textPath, textAlongPath (with stroke or fill option)
Added support for shadows
arcTo is incorrect when the three points are collinear
arcTo should draw a straight line from P0 to P1
restore() with an empty stack has no effect
Corrected order of data returned by getImageData (BRGA -> RGBA)
ImageData is now converted to non-premultiplied color
Preserve the current path when clipping
rgba colors were not converted to string properly (green had the wrong value)
Some composite operations are now handled correctly
Fixed Debug build crashing when expired
Fixed stack overflow crash on exit
Added check for font validity on assignment and fallback to default font (will raise an error in debug mode if font is incorrect)
Moved state management to its own class
Updated Cairo(1.8.4), Pixman(0.12.0), Pango(1.22.3), Glib(2.18.3) and libpng(1.2.33)

1.0 Build 225:

Fixed large canvas objects taking a lot of CPU
Log is always enabled

1.0 Build 217

Fixed drawing being incomplete in some cases
Added workaround for pink color drawing transparent. DesktopX always use pink to draw transparent surfaces, even in per-pixel mode. rgb(255, 0, 255) will be changed to rgb(255, 1, 255)

1.0 Build 214

Added per-object log files
Added more log info when creating a new context object

1.0 Build 211

Added support for % in rgb/rgba colors
Added "transparent" color (equivalent to "rgba(0,0,0,0)")
Added SVG colors "darkgrey", "darkslategrey", "dimgrey", "grey", "lightgray", "lightslategrey" and "slategrey"
Zero size canvas is allowed
Properly share canvas state (context style stack was not properly shared before)
DrawImage and DrawImageRegion check for negative width and height and adjust the coordinates
Only match full color strings
Accept rgb values outside [0;255] and clamp the value properly
Clamp alpha and use premultiplied color values when painting with alpha (still somewhat wrong)
Fixed leak and crash with CanvasImageData & CanvasPixelArray
Fixed crash with invalid parameters in createImageData and getImageData
Zero-length line gradients should paint nothing
Radial gradients with the same start and end circle should paint nothing
Image data now accepts negative width and height (you get the untransformed data for the resulting rectangle)
arc() with zero radius draws a line to the start point.
arcTo() has no effect if the context has no subpaths or if P0 = P1
arcTo() draws a straight line to P1 if P1 = P2 or if radius = 0
bezierCurveTo() has no effect if the context has no subpaths
lineTo() has no effect if the context has no subpaths
quadraticCurveTo() has no effect if the context has no subpaths
Updated cairo, pixman and pango libraries

1.0 Build 201

Added hsl/hsla color parsing
Added some logging (DXCanvas.log in object directory)
Fixed text stroking always drawing at position (0,0)
Fixed text baseline being off by the text height

1.0 Build 191

Added redraw calls buffering (less flickering)
Added debugMode attribute to canvas. In debug mode, passing invalid parameters will result in an error being raised instead of the invalid value being silently ignored.
No longer returns errors when passing invalid parameters to a lot of functions (as specified in Canvas specification)
CanvasPixelArray.XXX6(index, value) now takes an int instead of a char and will clamp that value to [0;255]

1.0 Build 180

Implemented toImage
Implemented createImageData, getImageData and putImageData
Added canvas support to createPattern, drawImage and drawImageRegion
Fixed createPattern, drawImage and drawImageRegion not working in VBScript
Fixed createPattern, drawImage and drawImageRegion not making a copy of the source image or canvas
Fixed drawImageRegion using wrong default values for dw and dh
Fixed drawImageRegion not creating a new path, resulting in image "corruption"

1.0 Build 168

Implemented font attribute setter/getter
Implemented fillText, strokeText and measureText (using Pango)
Implemented arcTo (using patch from Behdad Esfahbod)
Fixed image loading (SD_LOAD_IMAGE seems to be corrupting some images...)

1.0 Build 159

Implemented textAlign and textBaseline attributes setters/getters (not used yet)
Implemented createPattern, loadImage, drawImage and drawImageRegion
Update to cairo 1.7.4 (better support for text)
Statically linked to cairo lib (no need for cairo.dll anymore)

1.0 Build 149

First test version

Download

You can download a test version here. It only includes the Canvas Controller widget for now. Please do not use the DXCanvas plugin in your own objects and widgets yet. This version of the plugin will expire on the 10/01/2008.

Implementation

Under the hood, it's using Cairo, a 2D vector graphics library that also powers the Mozilla and Yahoo Widgets implementations. Right now, the Cairo library is dynamically loaded at runtime, but I hope to have it statically linked into the plugin for the final version.

Here is a list classes with their attributes and functions and the state of their implementation

Canvas

Name	Implemented	Comment
width	YES
height	YES
debugMode	YES	Invalid input will raise an error instead of being ignored.
getContext(type)	YES
toImage(path)	YES	Saves to a PNG file (replaces toDataURL)
suspendDrawing()	YES
resumeDrawing()	YES

CanvasRenderingContext2D

Name	Implemented	Comment
globalAlpha	YES
globalCompositeOperation	YES
strokeStyle	YES
fillStyle	YES
lineWidth	YES
lineCap	YES
lineJoin	YES
miterLimit	YES
shadowOffsetX	YES	Shadows are not implemented yet.
shadowOffsetY	YES	Shadows are not implemented yet.
shadowBlur	YES	Shadows are not implemented yet.
shadowColor	YES	Shadows are not implemented yet.
font	YES
textAlign	YES
textBaseLine	YES	Hanging and ideographic baselines are treated as alphabetic.
canvas	YES
save	YES
restore	YES
scale(x, y)	YES
rotate(angle)	YES
translate(x, y)	YES
transform(m11, m12, m21, m22, dx, dy)	YES
setTransform(m11, m12, m21, m22, dx, dy)	YES
createLinearGradient(x0, y0, x1, y1)	YES
createRadialGradient(x0, y0, r0, x1, y1, r1)	YES
createPattern(input, repeat)	YES
clearRect(x, y, w, h)	YES
fillRect(x, y, w, h)	YES
strokeRect(x, y, w, h)	YES
beginPath	YES
closePath	YES
moveTo(x, y)	YES
lineTo(x, y)	YES
quadraticCurveTo(cpx, cpy, x, y)	YES
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)	YES
arcTo(x1, y1, x2, y2, radius)	YES
rect(x, y, width, height)	YES
arc(x, y, radius, startAngle, endAngle, anticlockwise)	YES
fill()	YES
stroke()	YES
clip()	YES
isPointInPath(x, y)	YES
fillText(text, x, y)	YES
strokeText(text, x, y)	YES
measureText(text)	YES
textAlongPath(text, stroke)	YES	Adds (or draws) the specified text along the current path
pathText(text)	YES	Adds the strokes from the specified text to the current path
loadImage(path)	YES
drawImage(input, dx, dy, dw, dh)	YES
drawImageRegion(input, sx, sy, sw, sh, dx, dy, dz, dh)	YES
createImageData(sw, sh)	YES
getImageData(sx, sy, sw, sh)	YES	image data uses the BGRA format
putImageData(imageData, dx, dy, dirtyX, dirtyY, dirtyWidth, dirtyHeight)	YES

Gradient

Name	Implemented	Comment
addColorStop(offset, color)	YES

ImageData

Name	Implemented	Comment
width	YES
height	YES
data	YES

PixelArray

Name	Implemented	Comment
length	YES
XXX5(index)	YES
XXX6(index, value)	YES

TextMetrics

Name	Implemented	Comment
width	YES

desktopx

Locked Post

Advanced Search

Watch this post

Do not email me updates for this post Email me updates for this post

Successfully updated karma reason!

Great job, work fine!

Successfully updated karma reason!

Bam! Excellent work!!!

Successfully updated karma reason!

Littleboy,

When implemented, would it be possible, using one of the image handling functions (i.e. getImageData or createImageData, or the ImageData 'data' value ), to draw to a 'hidden' context and then set the object.picture property of a regular DX object with the data in the context? This would allow a DX object to have a 'dynamic' image, not based on pre-made .PNGs or states.

Thanks for developing this. This adds a LOT of power and opens a bunch of posibilities for DX.

Successfully updated karma reason!

Littleboy

Join Date 03/2001

+91

ImageData is there to be able to manipulate the raw pixels (the data attribute is a PixelArray object, with the setter and getter).

When you add the DXCanvas ability to a desktopX object, it completly takes over the painting for that object, so you don't need to set any object property to alter the object appearance - you simply make calls to the api. Does that answer your question?

And thanks for the kind words!

Successfully updated karma reason!

Yep, answers my question...But generates a new one. I assume that loadImage(path)will allow you to load an external image into the context (replacing DX's object.picture = "c:\myimage.png"), then the drawing functions would draw 'on' the loaded image?

Successfully updated karma reason!

Littleboy

Join Date 03/2001

+91

Not exactly. loadImage will load an image and encapsulate it into a CanvasImage object. You will then be able to pass that object to createPattern and drawImage.

From script, you will simply do something like this:

var ctx = canvas.getContext("2d");

// load an image
var img = ctx.loadImage(Object.Directory + "image.png");

// Draw the image at context coordinates (5,5)
ctx.drawImage(img, 5, 5);

See this tutorial on using images.

Of course, you can also create a pattern using this image and then draw a rectangle with this pattern as a fill or stroke style.

When you create a pattern (be it gradient, radial or image/canvas-based) or load an image, you get an object back that can be used in latter drawing steps. But it doesn't draw anything on the context at that time.

Successfully updated karma reason!

Nice work. Did a couple of calendar scripts which clarified the need for text like you said. Guess it depends on how interactive you want things.

Not sure if I borked something or it's how your plugin works but, scripting the cursor seems to be inconsistent. A good example is the navigation script within these three scripts I uploaded Click me, you know you want to!

Successfully updated karma reason!

Littleboy

Join Date 03/2001

+91

Not sure if I borked something or it's how your plugin works but, scripting the cursor seems to be inconsistent.

I'm not intercepting any window messages yet (although I will probably add a configuration option in the future, so you can drag things around the canvas), so there should not be any impact on how DesktopX functions work.

I've been working on image and patterns today, but text is coming after that.

It's getting a bit late here (plus I worked through last night) and I'm not seeing any obvious problem with the script. Can you point to me what exactly is not working correctly (and how it should behave)?

Thanks for the feedback (and for writing a few scripts to add to my test collection

Successfully updated karma reason!

Did I mention that this Rocks!

Successfully updated karma reason!

You're welcome. The scripts are the least I can to do help out.

Can you point to me what exactly is not working correctly (and how it should behave)?

When you load the Navigation script, the cursor should change to hand when you mouse over the left/right edges (10px) then when you leave those regions the cursor should return to default.

I even tried scripting x,y with the mouse enter/leave functions with the same effects. Actually, I think this may be a DX issue because essentially what I'm trying to do is script regions. A timer should resolve this.

Successfully updated karma reason!

Littleboy

Join Date 03/2001

+91

Ah, but OnMouseEnter and OnMouseLeave are only called when the mouse enters or leaves the object, so you won't be able to update the cursor per region. Does this work with a standard object?

Using OnMouseMove(x, y) should work.


'Called on mouse over object
Function Object_OnMouseMove(x, y)
		If x < 10 Then				
			Object.Cursor = 14
		ElseIf x > Object.Width-10 Then	
			Object.Cursor = 14
		ElseIf x > 10 And x < Object.Width-10 Then
			Object.Cursor = 0
		End If
End Function

Successfully updated karma reason!

I don't think it does as this is why I use object overlay's. A refresh object command would be a nice option but, using a timer triggered on focus might do it.

Successfully updated karma reason!

Littleboy

Join Date 03/2001

+91

New build with image support!

Also updated the canvas controller to support subfolders.

And drawing is still flickering like mad...

Successfully updated karma reason!

Littleboy

Join Date 03/2001

+91

Text! That is if boxes qualify as text

The cairo text api (aptly named the toy text api) wasn't going to cut it, so I switched to pango, which has a cairo path for drawing text. And oy, what a mess. There are so many dependencies, it's not even funny. Of course, the win32 makefiles are badly broken, and forget about getting a static lib to build without diving into the code.

After a lot of fumbling with all those libs, I finally got it to build with all its dependencies. It's know processing the text using the fill or stroke style, but it fails to get any font, so it draws boxes instead...

Turns out I might be missing some engine module (dynamically loaded, but you can link them statically apparently). Gah, yet more work!

Successfully updated karma reason!

Littleboy,

I can't get the latest build to draw. The Canvas Controller loads, populates the listbox with scripts, but nothing happens when you select a script and the 'ok'

Successfully updated karma reason!

Littleboy

Join Date 03/2001

+91

Try re-setting the script directory to the new location. I changed the application folder name and it might still point to the old location. Sorry about those changes! For the next version, you should be able to overwrite the previous one and it will continue to work.

Successfully updated karma reason!

I noticed that cairo.dll is missing from the new version zip. I copied it over from the original version but still nothing, even after resetting the script directory. The original Canvas Controller still works.

Successfully updated karma reason!

Littleboy

Join Date 03/2001

+91

cairo.dll is not needed anymore. The plugin is self-contained now.

Hum, maybe I know what's happening: I might have exported it from my second monitor and it's showing off screen. I'll add a reset icon in the next build

You can redownloaded the package, it should be working now.

Successfully updated karma reason!

Thanks! It works now.

Successfully updated karma reason!

Littleboy

Join Date 03/2001

+91

Success!

It still needs some tweaking but it's better than squares

Successfully updated karma reason!

Looking good!

Successfully updated karma reason!

this looks really wild.. need to play with it when im not loaded up on drugs.. lol

Successfully updated karma reason!

Littleboy

Join Date 03/2001

+91

New build with text support is available!

Limitations:
- the text baseline property is ignored in some cases
- you can't stroke or draw text along a path (a spec limitation). I will add new methods to do that in the future.

The previous build was supposed to support images, but it was broken and showed corruption with a lot of images. I'm now using GDI+ instead of relying on SD_LOAD_IMAGE to load images.

The canvas controller has a new option to reset the position of the widget and canvas surface (just check the box in preferences).

Successfully updated karma reason!

Works great!

Just did a basic run with one of the calendar scripts. Have to update them anyway since I seem to have left the month out.

Successfully updated karma reason!

Littleboy

Join Date 03/2001

+91

New build with several bugs fixed (images were not working correctly from VBScript).

Finished implementing put/get/createImageData. Check the Edge Detection filter for an example of what is possible.

Successfully updated karma reason!