[HTC Excalibur] Cyclonezephyrxz7:
Tutorial Continued

[Tutorial Part 4] - Venturing On: Digging Deeper into the CPR File

[Tutorial Part 4.1] - Looking at more of the essentials

Go back to the CPR file you had opened for [Tutorial Part 2]. Let us start off by looking at a snippet of code below what we analyzed earlier. This is what I refer to :

<TitaniumListView ID="HomeNav" Width="320" Height="185" Columns="1" Rows="5" ItemWidth="320" ItemHeight="34">

<Layer ID="Focus" Width="320" Height="67" Clip="False">

<Image ID="Image Default" Left="0" Top="-6" Width="320" Height="82" ScalingAlgorithm="TriLinear" Opacity="1.0" />

<ControlSequence ID="Action Sequence" FramesPerSecond="30" Loop="False">

<Image ID="Image" Left="0" Top="0" Width="320" Height="67" ScalingAlgorithm = "TriLinear" Opacity="1.0" />

</ControlSequence>

</Layer>

<Layer ID="ListItem" Visible="False" />

<Layer ID="No Items" Opacity="0">

<Text ID="Text" Width="100" Height="19" FontFamily="Segoe Condensed" FontSize="8" FontStyle="Bold" Wrap="False" Trimming="EllipsisCharacter">No Items</Text>

</Layer>

</TitaniumListView>
​

This is quite a large snippet, and may look confusing, but in reality it does just the very basic functions of setting up the Today Screen. To start off, a new tag is called "TitaniumListView." In older roms, this is named "BronzeListView." The Titanium part makes it so that the middle panel (CClock on default set-ups) is centered on the screen in default position. So in this CPR, the Today Screen Panels are given 320 pixels across (the full screen width) and only 185 pixels top-to-bottom to fit into. These values can be changed, but be warned that they will change most everything. The effect of changing the screen size will be discussed in greater detail later on when I go over specific object positioning.

The first tag under "TitaniumListView" is "Layer", which, as mentioned earlier, is creating a new layer for objects ontop of everything prior. This layer is titled "Focus" and it is a vague name, but think of the Today Screen. You have the main panel and the semi-hidden panels, so the MAIN one must be the FOCUSED one. Now that that is understood, let us see what it is saying. It is defining the DEFAULT width and height for a Focused panel. The parameter "Clip = False" is just saying that 'if an image/text goes out of the boundaries assigned, do not omit it from rendering, render it on top of layers before it anyway'. So usually that is a good thing, since nobody wants half an image or part of their text to be cut off randomly.

Next up, it is describing an image that is being loaded to be rendered onto the screen. The location of this image is found in the registry, which will be discussed with greater detail later on.

This is obviously clean code, since everything opens and closes correctly. It isn't recommended to tinker with these values too much unless you have a backup and are willing to get some funky results.

Moving on...

Below this snippet, you see comments about NPI and MPI. What the heck is a NPI? Well, the NPI is actually the arrows you see when on a multi-page panel. Feel free to reposition them to your liking. As far as the MPI, I will be honest, I do not entirely know what it is. I have changed its values and have yet to have results, but fear not, I am venturing!

Moving on...

Below this snippet, you may see a Branding Comment. This is just a Text tag which writes to the screen at the given coordinates a "branding" message to show people who made the CPR or ROM. For the sake of being nice and not stealing, leave this alone (unless you make a custom CPR).

Moving on...

[Tutorial Part 4.2] - Looking at the CClock Panel

Finally! You get to see the code behind the most well-known panel out there, the CClock Panel! So lets take it slow and savor the joy:

<Layer ID="ClockExpanded" Visible="False" Width="320" Height="82" Clip="False">

<Layer ID="Page" Clip="False">
​

In just these two lines of code, the Today Screen is instructed to do many things. It is told to make a new Panel called "ClockExpanded" (which goes back to Focus) with a width of 320 and a height of 82, and to be nice, clip is set to false. But wait, How does it know where to put the panel?!?! Well remember about the TitaniumListView VS BronzeListView ... well in Titanium it is centerbased, in Bronze it is top based! (Ohhhh!)

But wait! It says Visible is false? How do I see it?! Well, as far as I know from the tinkering I have done, that is like a Switch. The default is set to false for every panel to avoid issues, however when the Today Screen is shifting panels, it will flip these switches. So I wouldn't concern myself with this too much.

Next up, it is creating a Layer , within a Layer. This is just to make sure that objects created from then on are put to the "top" of the screen, visible to everyone.

Moving on...

<Image ID="ImageFixed" Source="\Program Files\TitaniumWeather\condicons\CurrentIcon.png" Left="205" Top="-30" Width="120" Height="100" />
​

Okay, this looks simple enough... For starters, the CPR file is telling the Today Screen to create an image called ImageFixed at (205, -30) ... wait ... -30? Well look closer. The parameter says "Top="-30"", and I mentioned earlier that Top refers to position from the top of the layer. And since this layer is located in the middle of the screen and is only 80~ pixels tall, without clipping, we can place images anywhere! Have fun, try changing this value and see what happens! Continuing on, the image is given the size of 120 x 100.

You now know how the Image on the 'top' right of the CClock panel got there!

<Image ID="ImageFixed" Source="\Windows\carrier.png" Left="-3" Top="3" Width="30" Height="15" ScaleStyle="Fit"/>

<Text ID="Network Name" Left="22" Top="3" Width="100" Height="18" FontFamily="Segoe Condensed" FontSize="7" FontStyle="Regular" Wrap="False" VerticalAlignment="Top" Trimming="EllipsisCharacter" HorizontalAlignment="Left">

<TextStage TextOffsetType="TextOffsetDropBottomRight" Color="#00000000" TextOffset="1" BlurFactor="3" Alpha="1.0"/>

<TextStage TextOffsetType="TextOffsetNone" Color="#FFFFFFFF"/>

</Text>
​

Let us analyze! This snippet starts off with creating another Image called ImageFixed whose source is a carrier.png. Luckily, the creator of this CPR was nice and made things easy to comprehend. Obviously this is making the little "bars" and Operator text on the panel. Now that we know what it is, lets see how it comes to be. (Which takes up to the next part of the tutorial.)

[Tutorial Part 4.2.1] - The ID 'parameter' and How it is Helpful!

Looking at the Text tag, one thing comes to mind...I know what the result is, but where on earth is it getting this data from! Well I have been mentioning the registry a lot and saying I will explain later, well...I am not going to fully explain now since this is just the basics!, but I will do a brief fill-in on the topic. In the registry is a Key set up to let this panel operate. Inside of it are values that tell the Today Screen what to make the SoftKeys do, what the text should be, image sources, etc. But how does it all get accessed? Well the ID is also like a variable! The ID (in many cases) is compared to the Registry Key for the panel, and the resulting output is what is located in the registry under that ID name (for that reason, making two ID's the same name is dangerous!).

[[CONTINUED IN NEXT POST]]