inicio mail me! sindicaci;ón

Rotating OpenLaszlo with Webkit

October 31, 2007 at 7:24 pm · Filed under oldbrew

Recently i came across a post on the Webkit blog which demonstrates new support for transforms in the nightly builds of Apple’s Webkit (used in Safari and other browsers).

Quite simply it means that you can rotate, scale, and even skew any part of a web page. For example:

Click here

(Note that this currently only works in the nightly build of Webkit)

There is a slightly more impressive demonstration on the webkit blog. Which made me think… could i incorporate this neat functionality into OpenLaszlo’s DHTML runtime?

The answer is of course yes. OpenLaszlo already supports advanced transforms such as rotation, it’s just not implemented in the DHTML runtime as no web browser has supported it… until now that is. An extremely simple example of how to get it to work is as follows:


<class name="webkitrotatable" extends="view">
<attribute name="wrot" type="number" value="0"
setter="this.wrot = wrot; this.updateRot(wrot);"/>

<method name="updateRot" args="val">
this.sprite.__LZdiv.style['-webkit-transform'] = 'rotate(' + val + 'rad)';
</method>
</class>

This rather simple “webkitrotatable” class allows one to make a view which can be rotated by modifying the “wrot” parameter. So you can make a little rotating thing like so:


<webkitrotatable name="item" x="20" y="10" width="25" height="25" bgcolor="red">
<animatorgroup name="move" process="sequential"
duration="1000" start="true" repeat="Infinity">
<animator attribute="wrot" to="3.14159265" />
<animator attribute="wrot" to="6.2831853" />
<animator attribute="wrot" to="0" />
</animatorgroup>
</webkitrotatable>

Of course if i wanted a better solution, i’d just modify OpenLaszlo’s DHTML kernel and directly incorporate this functionality into the view class’ “rot” attribute. But for now, this is a pretty simple proof-of-concept.

Viewing 3 Comments

    • ^
    • v
    Please submit a feature request to the OpenLaszlo bug tracking system (JIRA), with your code, and we'll try and get it in!
    • ^
    • v
    henry,

    That's on my TODO list. However it is worth noting that since Webkit transform's have yet to be standardised and thus implemented in other web browsers, so it might be a bit premature to implement such functionality now.

    After a quick look around the mozilla docs, there sadly doesn't seem to be equivalent functionality for rotating elements, unless perhaps you make use of OpenLaszlo's incomplete SVG kernel.

    As for Internet Explorer, there seems to be a way you can apply transforms to elements as described "here":http://msdn2.microsoft.com/en-us/library/ms532847.aspx.

    In any case, thanks for your interest! :)

    ~ James
    • ^
    • v
    Hi James,

    I couldn't resist :). There's now support for rotation in trunk. If you pull down a copy after tonight's build you should be able to use setRotation() in webkit nightlies!

    Regards,
    Max Carlson
    Openlaszlo.org

    P.S. Here's the changeset in case you're curious how it works:
    Author: max
    Date: 2007-11-02 17:10:39 -0700 (Fri, 02 Nov 2007)
    New Revision: 7107

    Modified:
    openlaszlo/trunk/WEB-INF/lps/lfc/kernel/dhtml/LzSprite.js
    Log:
    Change 20071102-maxcarlson-n by maxcarlson@Plastik on 2007-11-02 12:16:32 PDT
    in /Users/maxcarlson/openlaszlo/trunk
    for http://svn.openlaszlo.org/openlaszlo/trunk

    Summary: Add support for setRotation() for webkit nightlies

    New Features:

    Bugs Fixed: LPP-5030 - Add setRotation() support for webkit nightlies

    Technical Reviewer: ptw
    QA Reviewer: jcrowley
    Doc Reviewer: (pending)

    Documentation:

    Release Notes:

    Details: Set capabilities.rotation to true in Safari. Add setRotation() method that sets the appropriate style per http://webkit.org/blog/130/css-transforms/


    Tests: http://localhost:8080/trunk/test/lztest/lztest-view.lzx?lzr=dhtml shows rotation in a recent build of webkit (WebKit-SVN-r27375)!



    Modified: openlaszlo/trunk/WEB-INF/lps/lfc/kernel/dhtml/LzSprite.js
    ===================================================================
    --- openlaszlo/trunk/WEB-INF/lps/lfc/kernel/dhtml/LzSprite.js 2007-11-02 23:50:37 UTC (rev 7106)
    +++ openlaszlo/trunk/WEB-INF/lps/lfc/kernel/dhtml/LzSprite.js 2007-11-03 00:10:39 UTC (rev 7107)
    @@ -303,6 +303,9 @@
    this.quirks['safari_visibility_instead_of_display'] = true;
    this.quirks['absolute_position_accounts_for_offset'] = true;
    this.quirks['canvas_div_cannot_be_clipped'] = true;
    + if (Lz.__BrowserDetect.version > 523.10) {
    + this.capabilities['rotation'] = true;
    + }
    } else if (Lz.__BrowserDetect.isOpera) {
    // Fix bug in where if any parent of an image is hidden the size is 0
    this.quirks['invisible_parent_image_sizing_fix'] = true;
    @@ -1558,6 +1561,9 @@
    return this.__contextmenu;
    }

    +LzSprite.prototype.setRotation = function(r) {
    + this.__LZdiv.style['-webkit-transform'] = 'rotate(' + r + 'deg)';
    +}

    if (LzSprite.prototype.quirks.ie_leak_prevention) {
    LzSprite.prototype.__sprites = {};
 

Trackbacks

(Trackback URL)

close Reblog this comment
Powered by Disqus · Learn more
blog comments powered by Disqus