×

Discussion Board

Results 1 to 15 of 15
  1. #1
    Registered User
    Join Date
    Jan 2008
    Posts
    8

    How to rotate image in widget?

    Hi,
    I want to make a clock widget, and it will use plenty of image rotation (near 20 objects). However, I found that it seems very difficult to use javascript to rotate image. How can I solve this problem? Or can I use flash or java application in widget to rotate image? (But it will be a little strange if I have to spend money more than the price of N97 to buy a Flash CS4 to make a little clock just use by myself......)

  2. #2
    Nokia Developer Moderator
    Join Date
    Mar 2003
    Location
    Lempäälä/Finland
    Posts
    29,165

    Re: How to rotate image in widget?

    you can embed Flash into WRT, or you could try searching internet for Javascript rotation code, the WRT APIs there are are not including any APIs for the rotation.

    If you want to get free development environment where you can rotate images freely, then i would suggest you to look into Symbian C++ programming.

  3. #3
    Registered User
    Join Date
    Jan 2008
    Posts
    8

    Re: How to rotate image in widget?

    Thank you for your kindly help. So I also can use a program made by symbian C++ into WRT? Maybe using the program to rotate image to a calculated angle and then put it into a calculated position by using javascript?

  4. #4
    Nokia Developer Moderator
    Join Date
    Mar 2003
    Location
    Lempäälä/Finland
    Posts
    29,165

    Re: How to rotate image in widget?

    Nope you can not really mix native & WRT code, just was mentioning as an alternative option you could look into. Though if you could find the old plug-in example from somewhere, you could potentially load that to your app, and show the rotated images in it.

  5. #5
    Nokia Developer Champion
    Join Date
    Nov 2007
    Location
    Rome, Italy
    Posts
    2,406

    Re: How to rotate image in widget?

    Hi code565472,

    you could also consider using SVGT to dynamically create the various images.

    Pit

  6. #6
    Registered User
    Join Date
    Jan 2008
    Posts
    8

    Smile Re: How to rotate image in widget?

    I create a SVG, and the chinese word in it is a png file with 57deg rotate.

    I can't believe the answer is just so simple
    Thank you jappit, now I start to study SVG

  7. #7
    Registered User
    Join Date
    Jan 2008
    Posts
    8

    Re: How to rotate image in widget?

    Uh...sorry, I have a problem with SVG in html,
    I create a .html and .svg file, and through javascript control I can let the svg image rotate by seconds in Firefox & IE. But it don't move in S60 browser, and I compress it into .wgz format and install into N97, and it don't move, too.
    The code is like below, please tell me where is wrong?

    Html file:

    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <body onLoad="init()">
    <embed id="test" src="test.svg" type="image/svg+xml">
    <script type="text/javascript">
    var RotateDeg = 0;
    var svgdoc = null;
    var svgRot;
    var transform;
    function init(){
    setInterval("GraphChange()" , 1000);
    }
    function GraphChange(){
    var object = document.getElementById("test")
    var DtNow = new Date();
    var RotateSecond = DtNow.getSeconds();
    RotateDeg = RotateSecond*6;
    svgdoc = object.getSVGDocument();
    svgRot = svgdoc.getElementById("trans1");
    transform = svgRot.getAttribute("transform")
    svgRot.setAttribute("transform" , transform = 'translate(100,100) rotate(' + RotateDeg + ')');
    }
    </script>
    </body>
    </html>

    Svg file:

    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd">
    <svg baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" width="300px" height="200px" viewBox="0 0 300 200">
    <rect x="2" y="2" width="300" height="200" fill="red" fill-opacity="0.1"/>
    <g id="trans1" transform="translate(100,100)" stroke="red" stroke-width="2">
    <line x1="0" y1="0" x2="10" y2="0" />
    <line x1="0" y1="10" x2="0" y2="-80" />
    <text id="text1" x="30" y="0" stroke="black" stroke-width="1" font-size="15" text-anchor="middle" >Rotate</text>
    </g>
    </svg>

  8. #8
    Nokia Developer Champion
    Join Date
    Nov 2007
    Location
    Rome, Italy
    Posts
    2,406

    Re: How to rotate image in widget?

    Hi code565472,

    I haven't still done extensive SVG testing in WRT widgets. Anyway, it's highly probable that some SVG features are still not supported. Will let you know if I get more infos about it.

    Pit

  9. #9
    Registered User
    Join Date
    Jan 2008
    Posts
    8

    Re: How to rotate image in widget?

    I just want to get some information like the time, and use javascript to write it into some number inside the svg file like from "rotate(0)" to "rotate(30)", and currently I cannot do this?
    There must be some way I can turn something in WRT, it can be anything if it cannot be svg, I want to learn if I know what to learn.

  10. #10
    Regular Contributor
    Join Date
    Jun 2009
    Posts
    103

    Re: How to rotate image in widget?

    hello

    If you want to draw a clock in WRT plz seen below link it's help you

    http://randomibis.com/coolclock/

    using that javascript files we drow a analog clock in my application.


    Tarun(TJ)

  11. #11
    Nokia Developer Champion
    Join Date
    Nov 2007
    Location
    Rome, Italy
    Posts
    2,406

    Re: How to rotate image in widget?

    Hi Tarun,

    CoolClock will unfortunately not work on Web Runtime, since it requires the Canvas object, currently not supported by S60 browser.

    Pit

  12. #12
    Regular Contributor
    Join Date
    Jun 2009
    Posts
    103

    Re: How to rotate image in widget?

    hi pit

    yes canvas object not supported but clock rotation is working fine.

    Tarun

  13. #13
    Regular Contributor
    Join Date
    Jun 2009
    Posts
    103

    Re: How to rotate image in widget?

    hi

    That link help you

    http://javascript.about.com/library/blclock1.htm.



    Tarun(TJ)

  14. #14
    Registered User
    Join Date
    Jan 2008
    Posts
    8

    Re: How to rotate image in widget?

    Thank you for your kindly help, I will study the codes.

    I make a clock running with Rainmeter,
    http://www.youtube.com/watch?v=ONX6RYbzb6c
    (and another clock in last 1 minute of the video)
    (The japanese clock in wiki: http://en.wikipedia.org/wiki/Japanese_clock)
    and I want to make it run in WRT, because with the location info by GPS, the clock can be full-auto. And I think I can draw true moon phase with SVG shape
    Last edited by code565472; 2009-07-11 at 00:24.

  15. #15
    Registered User
    Join Date
    Jan 2010
    Posts
    3

    Re: How to rotate image in widget?

    So did you guys ever get a working demo with WRT in regards to rotating anything? I've been both attempting to rotate an image and drawing SVG in the browser to no avail. If you've got anything working then please post some code.

Similar Threads

  1. Replies: 3
    Last Post: 2009-07-29, 14:00
  2. Opening a JPEG Image
    By ummarbhutta in forum Mobile Java Media (Graphics & Sounds)
    Replies: 8
    Last Post: 2007-02-15, 06:34
  3. how to cut some part of Image
    By mshouab in forum Mobile Java Media (Graphics & Sounds)
    Replies: 2
    Last Post: 2006-08-04, 09:05
  4. HELP: Mutable Image to Immutable Image?
    By rj_cybersilver in forum Mobile Java Media (Graphics & Sounds)
    Replies: 1
    Last Post: 2005-03-26, 09:58
  5. Nokia Image Converter
    By davidpurdie in forum General Development Questions
    Replies: 0
    Last Post: 2004-02-18, 15:31

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
×