how to realize vertical time or date in svg in homescreen in theme？

[liangcheng]

any blackberry SVG geeks,
how to realize vertical time or date in svg in homescreen, you can see this theme:
please see the attachment .
you see the time is in the vertical display.

can anyone share a demo code?

thank you so very much！

[russnash]

Easiest way to do this is to hide the time in Theme Studio, then implement your own in the SVG as follows:

<image id="thetime" x="145" y="290" width="200" height="50" xlink:href="x-object:/CurrentDateTime?clocktype=time&amp;width=200&amp;height=50&amp;font-family=BB Alpha Sans&amp;font-style=plain&amp;font-size=50&amp;ampmSize=20&amp;align=center">
        <animateTransform attributeName="transform" type="rotate" to="-90" fill="freeze" dur="0.01"/>
</image>

[sunnylovesalman]

Where in which part of the svg do I apply this code to get vertical time for Torch ?

Can you tell me?

Is it that I will apply the code anywhere in the svg?

[sunnylovesalman]

Please check my SVG and let me know .....I tried your code but no clock shows on the homescreen. I unchecked Time from TB 6 and imported my svg then i compiled the theme and tested . But no results.





<?xml version="1.0" encoding="UTF-8"?>
<!-- Generated by BlackBerry Composer Version: 6.0.0.21 - Apr 18 2011 -->
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.w3.org/2000/svg http://www.plazmic.com/svg/schema/svg.xsd"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:xforms="http://www.w3.org/2002/xforms"
xmlnsz="http://www.plazmic.com/plazmic_extents"
id="Untitled_4_cp_10" xml:space="default" width="100%" height="100%" viewBox="-180 -240 360 480" preserveAspectRatio="xMidYMid meet">
<g id="Layer_1">
<!-- pz:tag type="layer" -->
<g id="Theme_Button_1"
transform="translate(-35 171)">
<!-- pz:tag type="button" -->
<g id="Theme_Button_1-Contents">
<!-- pz:tag type="layer" -->
<g id="tabImage">
<image id="img_1_4_11"
x="0" y="0" width="68" height="68"
xlink:href="Images/tabImage_img_1_4.png"/>
<image id="img_11_4_12"
x="0" y="0" width="68" height="68"
xlink:href="Images/tabImage_img_1_4.png" visibility="hidden"/>
<image id="img_21_4_13"
x="0" y="0" width="68" height="68"
xlink:href="Images/tabImage_img_1_4.png" visibility="hidden"/>
<image id="img_31_4_14"
x="0" y="0" width="68" height="68"
xlink:href="Images/tabImage_img_1_4.png" visibility="hidden"/>
</g>
<g id="tabFocusImage">
<image id="img_1_4_15"
x="-96" y="9" width="260" height="50"
xlink:href="Images/tabFocusImage_img_1_4.png" visibility="hidden"/>
<image id="img_11_4_16"
x="-96" y="9" width="260" height="50"
xlink:href="Images/tabFocusImage_img_1_4.png" visibility="hidden"/>
<image id="img_21_4_17"
x="-96" y="9" width="260" height="50"
xlink:href="Images/tabFocusImage_img_1_4.png" visibility="hidden"/>
<image id="img_31_4_18"
x="-96" y="9" width="260" height="50"
xlink:href="Images/tabFocusImage_img_1_4.png" visibility="hidden"/>
</g>
<g id="normalImage">
<image id="img_1_4_19"
x="-96" y="9" width="260" height="50"
xlink:href="Images/normalImage_img_1_4.png"/>
<image id="img_11_4_20"
x="-96" y="9" width="260" height="50"
xlink:href="Images/normalImage_img_1_4.png" visibility="hidden"/>
<image id="img_21_4_21"
x="-96" y="9" width="260" height="50"
xlink:href="Images/normalImage_img_1_4.png" visibility="hidden"/>
<image id="img_31_4_22"
x="-96" y="9" width="260" height="50"
xlink:href="Images/normalImage_img_1_4.png" visibility="hidden"/>
</g>
<g id="focusImage">
<image id="img_1_4_23"
x="-96" y="9" width="260" height="50"
xlink:href="Images/focusImage_img_1_4.png" visibility="hidden"/>
<image id="img_11_4_24"
x="-96" y="9" width="260" height="50"
xlink:href="Images/focusImage_img_1_4.png" visibility="hidden"/>
<image id="img_21_4_25"
x="-96" y="9" width="260" height="50"
xlink:href="Images/focusImage_img_1_4.png" visibility="hidden"/>
<image id="img_31_4_26"
x="-96" y="9" width="260" height="50"
xlink:href="Images/focusImage_img_1_4.png" visibility="hidden"/>
</g>
</g>
</g>
</g>

<!-- pz:tag output="anim" -->

<loadScene xlink:href="x-exec://net_rim_application_menu" begin="Theme_Button_1.activate"/>
<animate xlink:href="#img_1_4_11" id="_anim_3" attributeName="visibility" begin="Theme_Button_1.focusin"
values="hidden;hidden"
keyTimes="0;1"
dur="0.45s" fill="freeze"
/>
<animate xlink:href="#img_1_4_11" id="_anim_4" attributeName="visibility" begin="Theme_Button_1.focusout"
values="hidden;hidden"
keyTimes="0;1"
dur="0.45s" fill="freeze"
/>
<animate xlink:href="#img_1_4_11" id="_anim_5" attributeName="visibility" begin="Theme_Button_1.activate"
values="hidden;hidden"
keyTimes="0;1"
dur="0.45s" fill="freeze"
/>
<animate xlink:href="#img_11_4_12" id="_anim_6" attributeName="visibility" begin="Theme_Button_1.focusin"
values="hidden;hidden"
keyTimes="0;1"
dur="0.45s" fill="freeze"
/>
<animate xlink:href="#img_11_4_12" id="_anim_7" attributeName="visibility" begin="Theme_Button_1.focusout"
values="hidden;hidden"
keyTimes="0;1"
dur="0.45s" fill="freeze"
/>
<animate xlink:href="#img_11_4_12" id="_anim_8" attributeName="visibility" begin="Theme_Button_1.activate"
values="hidden;hidden"
keyTimes="0;1"
dur="0.45s" fill="freeze"
/>
<animate xlink:href="#img_21_4_13" id="_anim_9" attributeName="visibility" begin="Theme_Button_1.focusin"
values="hidden;hidden"
keyTimes="0;1"
dur="0.45s" fill="freeze"
/>
<animate xlink:href="#img_21_4_13" id="_anim_10" attributeName="visibility" begin="Theme_Button_1.focusout"
values="visible;visible"
keyTimes="0;1"
dur="0.45s" fill="freeze"
/>
<animate xlink:href="#img_21_4_13" id="_anim_11" attributeName="visibility" begin="Theme_Button_1.activate"
values="hidden;hidden"
keyTimes="0;1"
dur="0.45s" fill="freeze"
/>
<animate xlink:href="#img_31_4_14" id="_anim_12" attributeName="visibility" begin="Theme_Button_1.focusin"
values="hidden;hidden"
keyTimes="0;1"
dur="0.45s" fill="freeze"
/>
<animate xlink:href="#img_31_4_14" id="_anim_13" attributeName="visibility" begin="Theme_Button_1.focusout"
values="hidden;hidden"
keyTimes="0;1"
dur="0.45s" fill="freeze"
/>
<animate xlink:href="#img_31_4_14" id="_anim_14" attributeName="visibility" begin="Theme_Button_1.activate"
values="hidden;hidden"
keyTimes="0;1"
dur="0.45s" fill="freeze"
/>
<animate xlink:href="#img_1_4_15" id="_anim_15" attributeName="visibility" begin="Theme_Button_1.focusin"
values="hidden;hidden"
keyTimes="0;1"
dur="0.45s" fill="freeze"
/>
<animate xlink:href="#img_1_4_15" id="_anim_16" attributeName="visibility" begin="Theme_Button_1.focusout"
values="hidden;hidden"
keyTimes="0;1"
dur="0.45s" fill="freeze"
/>
<animate xlink:href="#img_1_4_15" id="_anim_17" attributeName="visibility" begin="Theme_Button_1.activate"
values="hidden;hidden"
keyTimes="0;1"
dur="0.45s" fill="freeze"
/>
<animate xlink:href="#img_11_4_16" id="_anim_18" attributeName="visibility" begin="Theme_Button_1.focusin"
values="visible;visible"
keyTimes="0;1"
dur="0.45s" fill="freeze"
/>
<animateTransform xlink:href="#img_11_4_16" id="_anim_19"
attributeName="transform" type="translate"
values="0,0;0,0"
keyTimes="0;1"
dur="0.45s" fill="freeze" begin="Theme_Button_1.focusin"/>
<animate xlink:href="#img_11_4_16" id="_anim_20" attributeName="visibility" begin="Theme_Button_1.focusout"
values="hidden;hidden"
keyTimes="0;1"
dur="0.45s" fill="freeze"
/>
<animate xlink:href="#img_11_4_16" id="_anim_21" attributeName="visibility" begin="Theme_Button_1.activate"
values="hidden;hidden"
keyTimes="0;1"
dur="0.45s" fill="freeze"
/>
<animate xlink:href="#img_21_4_17" id="_anim_22" attributeName="visibility" begin="Theme_Button_1.focusin"
values="hidden;hidden"
keyTimes="0;1"
dur="0.45s" fill="freeze"
/>
<animate xlink:href="#img_21_4_17" id="_anim_23" attributeName="visibility" begin="Theme_Button_1.focusout"
values="hidden;hidden"
keyTimes="0;1"
dur="0.45s" fill="freeze"
/>
<animateTransform xlink:href="#img_21_4_17" id="_anim_24"
attributeName="transform" type="translate"
values="0,0;0,0"
keyTimes="0;1"
dur="0.45s" fill="freeze" begin="Theme_Button_1.focusout"/>
<animate xlink:href="#img_21_4_17" id="_anim_25" attributeName="visibility" begin="Theme_Button_1.activate"
values="hidden;hidden"
keyTimes="0;1"
dur="0.45s" fill="freeze"
/>
<animate xlink:href="#img_31_4_18" id="_anim_26" attributeName="visibility" begin="Theme_Button_1.focusin"
values="hidden;hidden"
keyTimes="0;1"
dur="0.45s" fill="freeze"
/>
<animate xlink:href="#img_31_4_18" id="_anim_27" attributeName="visibility" begin="Theme_Button_1.focusout"
values="hidden;hidden"
keyTimes="0;1"
dur="0.45s" fill="freeze"
/>
<animate xlink:href="#img_31_4_18" id="_anim_28" attributeName="visibility" begin="Theme_Button_1.activate"
values="visible;visible"
keyTimes="0;1"
dur="0.45s" fill="freeze"
/>
<animateTransform xlink:href="#img_31_4_18" id="_anim_29"
attributeName="transform" type="translate"
values="-2,0;2,0;-2,0;2,0;-2,0;2,0;-2,0;2,0;-2,0;2,0"
keyTimes="0;0.111111;0.222222;0.333333;0.444444;0. 555556;0.666667;0.777778;0.888889;1"
dur="0.45s" fill="freeze" begin="Theme_Button_1.activate"/>
<animate xlink:href="#img_1_4_19" id="_anim_30" attributeName="visibility" begin="Theme_Button_1.focusin"
values="hidden;hidden"
keyTimes="0;1"
dur="0.45s" fill="freeze"
/>
<animate xlink:href="#img_1_4_19" id="_anim_31" attributeName="visibility" begin="Theme_Button_1.focusout"
values="hidden;hidden"
keyTimes="0;1"
dur="0.45s" fill="freeze"
/>
<animate xlink:href="#img_1_4_19" id="_anim_32" attributeName="visibility" begin="Theme_Button_1.activate"
values="hidden;hidden"
keyTimes="0;1"
dur="0.45s" fill="freeze"
/>
<animate xlink:href="#img_11_4_20" id="_anim_33" attributeName="visibility" begin="Theme_Button_1.focusin"
values="hidden;hidden"
keyTimes="0;1"
dur="0.45s" fill="freeze"
/>
<animate xlink:href="#img_11_4_20" id="_anim_34" attributeName="visibility" begin="Theme_Button_1.focusout"
values="hidden;hidden"
keyTimes="0;1"
dur="0.45s" fill="freeze"
/>
<animate xlink:href="#img_11_4_20" id="_anim_35" attributeName="visibility" begin="Theme_Button_1.activate"
values="hidden;hidden"
keyTimes="0;1"
dur="0.45s" fill="freeze"
/>
<animate xlink:href="#img_21_4_21" id="_anim_36" attributeName="visibility" begin="Theme_Button_1.focusin"
values="hidden;hidden"
keyTimes="0;1"
dur="0.45s" fill="freeze"
/>
<animate xlink:href="#img_21_4_21" id="_anim_37" attributeName="visibility" begin="Theme_Button_1.focusout"
values="visible;visible"
keyTimes="0;1"
dur="0.45s" fill="freeze"
/>
<animate xlink:href="#img_21_4_21" id="_anim_38" attributeName="visibility" begin="Theme_Button_1.activate"
values="hidden;hidden"
keyTimes="0;1"
dur="0.45s" fill="freeze"
/>
<animate xlink:href="#img_31_4_22" id="_anim_39" attributeName="visibility" begin="Theme_Button_1.focusin"
values="hidden;hidden"
keyTimes="0;1"
dur="0.45s" fill="freeze"
/>
<animate xlink:href="#img_31_4_22" id="_anim_40" attributeName="visibility" begin="Theme_Button_1.focusout"
values="hidden;hidden"
keyTimes="0;1"
dur="0.45s" fill="freeze"
/>
<animate xlink:href="#img_31_4_22" id="_anim_41" attributeName="visibility" begin="Theme_Button_1.activate"
values="hidden;hidden"
keyTimes="0;1"
dur="0.45s" fill="freeze"
/>
<animate xlink:href="#img_1_4_23" id="_anim_42" attributeName="visibility" begin="Theme_Button_1.focusin"
values="hidden;hidden"
keyTimes="0;1"
dur="0.45s" fill="freeze"
/>
<animate xlink:href="#img_1_4_23" id="_anim_43" attributeName="visibility" begin="Theme_Button_1.focusout"
values="hidden;hidden"
keyTimes="0;1"
dur="0.45s" fill="freeze"
/>
<animate xlink:href="#img_1_4_23" id="_anim_44" attributeName="visibility" begin="Theme_Button_1.activate"
values="hidden;hidden"
keyTimes="0;1"
dur="0.45s" fill="freeze"
/>
<animate xlink:href="#img_11_4_24" id="_anim_45" attributeName="visibility" begin="Theme_Button_1.focusin"
values="visible;visible"
keyTimes="0;1"
dur="0.45s" fill="freeze"
/>
<animateTransform xlink:href="#img_11_4_24" id="_anim_46"
attributeName="transform" type="translate"
values="0,0;0,0"
keyTimes="0;1"
dur="0.45s" fill="freeze" begin="Theme_Button_1.focusin"/>
<animate xlink:href="#img_11_4_24" id="_anim_47" attributeName="visibility" begin="Theme_Button_1.focusout"
values="hidden;hidden"
keyTimes="0;1"
dur="0.45s" fill="freeze"
/>
<animate xlink:href="#img_11_4_24" id="_anim_48" attributeName="visibility" begin="Theme_Button_1.activate"
values="hidden;hidden"
keyTimes="0;1"
dur="0.45s" fill="freeze"
/>
<animate xlink:href="#img_21_4_25" id="_anim_49" attributeName="visibility" begin="Theme_Button_1.focusin"
values="hidden;hidden"
keyTimes="0;1"
dur="0.45s" fill="freeze"
/>
<animate xlink:href="#img_21_4_25" id="_anim_50" attributeName="visibility" begin="Theme_Button_1.focusout"
values="hidden;hidden"
keyTimes="0;1"
dur="0.45s" fill="freeze"
/>
<animateTransform xlink:href="#img_21_4_25" id="_anim_51"
attributeName="transform" type="translate"
values="0,0;0,0"
keyTimes="0;1"
dur="0.45s" fill="freeze" begin="Theme_Button_1.focusout"/>
<animate xlink:href="#img_21_4_25" id="_anim_52" attributeName="visibility" begin="Theme_Button_1.activate"
values="hidden;hidden"
keyTimes="0;1"
dur="0.45s" fill="freeze"
/>
<animate xlink:href="#img_31_4_26" id="_anim_53" attributeName="visibility" begin="Theme_Button_1.focusin"
values="hidden;hidden"
keyTimes="0;1"
dur="0.45s" fill="freeze"
/>
<animate xlink:href="#img_31_4_26" id="_anim_54" attributeName="visibility" begin="Theme_Button_1.focusout"
values="hidden;hidden"
keyTimes="0;1"
dur="0.45s" fill="freeze"
/>
<animate xlink:href="#img_31_4_26" id="_anim_55" attributeName="visibility" begin="Theme_Button_1.activate"
values="visible;visible"
keyTimes="0;1"
dur="0.45s" fill="freeze"
/>
<animateTransform xlink:href="#img_31_4_26" id="_anim_56"
attributeName="transform" type="translate"
values="-2,0;2,0;-2,0;2,0;-2,0;2,0;-2,0;2,0;-2,0;2,0"
keyTimes="0;0.111111;0.222222;0.333333;0.444444;0. 555556;0.666667;0.777778;0.888889;1"
dur="0.45s" fill="freeze" begin="Theme_Button_1.activate"/>
<image id="thetime" x="145" y="290" width="200" height="50" xlink:href="x-object:/CurrentDateTime?clocktype=time&amp;width=200&amp;h eight=50&amp;font-family=BB Alpha Sans&amp;font-style=plain&amp;font-size=50&amp;ampmSize=20&amp;align=center">
<animateTransform attributeName="transform" type="rotate" to="-90" fill="freeze" dur="0.01"/>
</image>
</svg>

[sunnylovesalman]

Please see the End Result friends.

I have Applied this SVG to my theme hiding all from the TB to check its working or not. After applying on Simulator, the time rotates but stays fro just a few seconds and then I find a blank wallpaper on the device and the time never comes back.


<?xml version="1.0" encoding="UTF-8"?>
<!-- Generated by BlackBerry Composer Version: 6.0.0.21 - Apr 18 2011 -->
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.w3.org/2000/svg http://www.plazmic.com/svg/schema/svg.xsd"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:xforms="http://www.w3.org/2002/xforms"
xmlnsz="http://www.plazmic.com/plazmic_extents"
id="CLOCK_03" xml:space="default" width="100%" height="100%" viewBox="-180 -240 360 480" preserveAspectRatio="xMidYMid meet">
<g id="Layer_1">
<!-- pz:tag type="layer" -->
</g>
<image id="New_Time"

x="-10"
y="140"
width="260"
height="150"
xlink:href="x-object:/CurrentDateTime?clocktype=time&amp;
width=260&amp;
height=150&amp;
font-family=theme_test&amp;
font-style=bold&amp;
font-size=44&amp;
fill=ffffff&amp;
align=left&amp;
ampmSize=20"
transform="rotate(90)"
/>
</image>
</svg>


Please Tell Me where I am doing wrong, or what is needed to be changed in the SVG?

Please help anyone.

Thanks
Sunny

[sunnylovesalman]

Okay Russnash...........Now I tried your code ....Please find the below SVG Code that I applied.

<?xml version="1.0" encoding="UTF-8"?>
<!-- Generated by BlackBerry Composer Version: 6.0.0.21 - Apr 18 2011 -->
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.w3.org/2000/svg http://www.plazmic.com/svg/schema/svg.xsd"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:xforms="http://www.w3.org/2002/xforms"
xmlnsz="http://www.plazmic.com/plazmic_extents"
id="Untitled_03" xml:space="default" width="100%" height="100%" viewBox="-180 -240 360 480" preserveAspectRatio="xMidYMid meet">
<g id="Layer_1">
<!-- pz:tag type="layer" -->
</g>

<image id="thetime" x="145" y="290" width="200" height="50" xlink:href="x-object:/CurrentDateTime?clocktype=time&amp;width=200&amp;h eight=50&amp;font-family=BB Alpha Sans&amp;font-style=plain&amp;font-size=50&amp;ampmSize=20&amp;align=center">
<animateTransform attributeName="transform" type="rotate" to="-90" fill="freeze" dur="0.01"/>
</image>

</svg>

The result is the same as in the screen above . Clock comes up after applying the theme in Simulator and stays for a second and vanishes away and never comes back again.

Please help me to solve this.

[sunnylovesalman]

The above code by Russnash did not work for Torch but the code shared by COCKYCULTURE has worked for me and now the clock is rotated.

cheers.

[russnash]

It looks like there may be something in the theme builder generated svg (inside which your own svg code gets inserted) that is causing the clock image to be hidden. Probably something to do with the orientation handling code. An export to a compile by hand setup would answer this question. This type of issue is one of the several reasons I dumped theme studio compiled themes and started building them by hand so I could have control over the entire svg file.

I'm glad you got it working!

Russ.

Posted from my CrackBerry at wapforums.crackberry.com

[sunnylovesalman]

Thanks Russnash..........I have been able to place the code in the right position that has made me to work the clock but I needed to know a few questions from you.

My code which worked was:

<image id="New_Time"

x="-10"
y="140"
width="260"
height="150"
xlink:href="x-object:/CurrentDateTime?clocktype=time&amp;
width=260&amp;
height=150&amp;
font-family=theme_test&amp;
font-style=bold&amp;
font-size=44&amp;
fill=ffffff&amp;
align=left&amp;
ampmSize=20"
transform="rotate(90)"
/>


Now the point is when I change the Fill colour to a different colour code, the clock doesnt show up.
So trying to mod this code by anything like font style or anything, the clock gets hidden.

Can you help me on this?


And may be as This has worked I would ask for a small help from you to provide me the code for this clock: 12
45

[sunnylovesalman]

I meant to say: 12
45

[russnash]

Thats a little strange about changing the fill color and the clock not showing up, I know this does indeed work as I used that method on my reflex theme to dull the color of the reflected time (and other banner items) slightly to improve the reflection effect. I also used a custom font for the time in reflex, so it cannot be that which is causing the issue.

I take it you are still using a hexadecimal style fill code, i.e. ababab or fcfcfc and not trying to substitute a name such as 'gray' etc?

To your other clock question, I assume you are referring to the clocks that have the hour above the minutes? I've never ventured to try and do this myself but will have a think about it and post back if I come up with something. Perhaps, meanwhile, if one of the devs that has done this wants to chime in and share some code.......

[sunnylovesalman]

Hi Russnash,
You are correct . I used Hexadecimal colour code and the clock disappeared.I placed the colour code for Orange and the clock didnot show up.

Now a quick Question: I have a font named DECODER.TTF

And I want to Place that in the Theme in this slanted way.Now I need the Clock to move to the rith hand side bottom corner.

Please suggest me in the code modification , so that I can have an idea of how to do it for the rest of my themes.

Please find the attached Picture. Perhaps make me understand what does this mean.?

Thanks
Sunny

[sunnylovesalman]

Please help me with this ...............

Thanks
Sunny

[russnash]

Your color code has seven characters, it should be six.

Posted from my CrackBerry at wapforums.crackberry.com

[sunnylovesalman]

Yeah I have been able to change the colour code of my clock and the position too.
But my question is to develop a new clock in the format of 12
45 I mean to say BOB STYLE.