[QuakeSocrates]

Originally Posted by agentfubu

Yep, I plan to include that in the next release.

Here's what I plan to include with the preview system:

- Icons
- Wallpapers/Page Wallpapers
- Dock
- Status Bar

And the rest I will add later down the road.

Excellent, I've subscribed to this thread. Thanks for the great work

[agentfubu]

Originally Posted by QuakeSocrates

Excellent, I've subscribed to this thread. Thanks for the great work

Thanks for downloading.

This is just a small update, I'm almost done with the preview system.

New version released. Preview system added. Please re-download!

[StaticFX]

sorry but that is not correct.
In working on my own app, i discovered its done by the center of the icon image. because if you create a BIG icon, it will center in its location. it does not start it at the upper left corner.

so, locate the center of each icon, then calculate accordingly...

I know this code seems crazy, and IM SURE i could make it simpler, but here is how i calc it... a row number is passed into the sub... also, dont forget to calc for 5 icon dock.

This is done like this because i use a sub so i dont have to repeat the code.

VB.NET 2008

Dim tPlus As Integer

tPlus = 18 - ((Row - 1) * 2)
If Row = 5 Then  tPlus = 24

Dim iW As Integer = imgDct(iName).Width
Dim iH As Integer = imgDct(iName).Height
Dim iC5 As Integer = If(Row = 5 And chk5Icons.Checked, 61, 76)
Dim iCp As Integer = If(Row = 5 And chk5Icons.Checked, 0, 8)

Dim iX As Integer = (iC5 * (Col - 1)) + iCp

iX = iX + (38 - iW / 2)

Dim iY As Integer = (90 * (Row - 1)) + tPlus

iY = iY + (45 - iH / 2)

gr.DrawImage(imgDct(iName), iX, iY, iW, iH)

now what you could od is just find each icons location center (on the screen)
Then take 1/2 the width and 1/2 the height and start it there...

so say icon one starts at X:55 , Y:60 and the icon is 60x60

55-30 = 25
60-30 = 30

start the icon in X,Y = 25,30

hope this helps... took a LOOOOOONG to to figure that out!! LOL every time i thought i had it.. bam, i would find another exception to the rule (thats probably why my stupid formulas are so crazy! )

good luck!

[agentfubu]

Originally Posted by StaticFX

sorry but that is not correct.
In working on my own app, i discovered its done by the center of the icon image. because if you create a BIG icon, it will center in its location. it does not start it at the upper left corner.

so, locate the center of each icon, then calculate accordingly...

I know this code seems crazy, and IM SURE i could make it simpler, but here is how i calc it... a row number is passed into the sub... also, dont forget to calc for 5 icon dock.

This is done like this because i use a sub so i dont have to repeat the code.

VB.NET 2008

Dim tPlus As Integer

tPlus = 18 - ((Row - 1) * 2)
If Row = 5 Then  tPlus = 24

Dim iW As Integer = imgDct(iName).Width
Dim iH As Integer = imgDct(iName).Height
Dim iC5 As Integer = If(Row = 5 And chk5Icons.Checked, 61, 76)
Dim iCp As Integer = If(Row = 5 And chk5Icons.Checked, 0, 8)

Dim iX As Integer = (iC5 * (Col - 1)) + iCp

iX = iX + (38 - iW / 2)

Dim iY As Integer = (90 * (Row - 1)) + tPlus

iY = iY + (45 - iH / 2)

gr.DrawImage(imgDct(iName), iX, iY, iW, iH)

now what you could od is just find each icons location center (on the screen)
Then take 1/2 the width and 1/2 the height and start it there...

so say icon one starts at X:55 , Y:60 and the icon is 60x60

55-30 = 25
60-30 = 30

start the icon in X,Y = 25,30

hope this helps... took a LOOOOOONG to to figure that out!! LOL every time i thought i had it.. bam, i would find another exception to the rule (thats probably why my stupid formulas are so crazy! )

good luck!

First of let me say thank you, that was a big post and not many people would even post this. So thanks :P

And about 10 mins after I posted that, I realized the same thing. I realized this because I had all had 57x57 icons, and if I generated a preview with 60x60 they wouldn't fit.

And not many people would share code, so thanks so much. But sadly I'm coding with c# so I can't use that code . But don't worry your post was helpful. Sharing the routine will make it easy to replicate in c#.

Originally Posted by StaticFX

sorry but that is not correct.
In working on my own app, i discovered its done by the center of the icon image. because if you create a BIG icon, it will center in its location. it does not start it at the upper left corner.
....

So I went back and re-wrote my code with your suggestion and my findings in mind, and here's my code.

            int i = 0; 
            foreach (ListViewItem item in listView1.CheckedItems)
            {
                i++;
                if (System.IO.File.Exists(item.SubItems[1].Text))
                {
                    if (i <= 20)
                    {
                        System.Drawing.Image icon = System.Drawing.Image.FromFile(item.SubItems[1].Text,false);
                        
                        int w = (icon.Width / 2);
                        int h = (icon.Height / 2);
                        if (i == 1)
                        {
                            g.DrawImage(icon, (46 - w), (61 - h), icon.Width, icon.Height);
                        }
                        if (i == 2)
                        {
                            g.DrawImage(icon, (122 - w), (61 - h), icon.Width, icon.Height);
                        }
                        if (i == 3)
                        {
                            g.DrawImage(icon, (198 - w), (61 - h), icon.Width, icon.Height);
                        }
                        if (i == 4)
                        {
                            g.DrawImage(icon, (274 - w), (61 - h), icon.Width, icon.Height);
                        }
                        if (i == 5)
                        {
                            g.DrawImage(icon, (46 - w), (150 - h), icon.Width, icon.Height);
                        }
                        if (i == 6)
                        {
                            g.DrawImage(icon, (122 - w), (150 - h), icon.Width, icon.Height);
                        }
                        if (i == 7)
                        {
                            g.DrawImage(icon, (198 - w), (150 - h), icon.Width, icon.Height);
                        }
                        if (i == 8)
                        {
                            g.DrawImage(icon, (274 - w), (150 - h), icon.Width, icon.Height);
                        }
                        if (i == 9)
                        {
                            g.DrawImage(icon, (46 - w), (238 - h), icon.Width, icon.Height);
                        }
                        if (i == 10)
                        {
                            g.DrawImage(icon, (122 - w), (238 - h), icon.Width, icon.Height);
                        }
                        if (i == 11)
                        {
                            g.DrawImage(icon, (198 - w), (238 - h), icon.Width, icon.Height);
                        }
                        if (i == 12)
                        {
                            g.DrawImage(icon, (274 - w), (238 - h), icon.Width, icon.Height);
                        }
                        if (i == 13)
                        {
                            g.DrawImage(icon, (46 - w), (326 - h), icon.Width, icon.Height);
                        }
                        if (i == 14)
                        {
                            g.DrawImage(icon, (122 - w), (326 - h), icon.Width, icon.Height);
                        }
                        if (i == 15)
                        {
                            g.DrawImage(icon, (198 - w), (326 - h), icon.Width, icon.Height);
                        }
                        if (i == 16)
                        {
                            g.DrawImage(icon, (274 - w), (326 - h), icon.Width, icon.Height);
                        }
                        if (i == 17)
                        {
                            g.DrawImage(icon, (46 - w), (428 - h), icon.Width, icon.Height);
                        }
                        if (i == 18)
                        {
                            g.DrawImage(icon, (122 - w), (428 - h), icon.Width, icon.Height);
                        }
                        if (i == 19)
                        {
                            g.DrawImage(icon, (198 - w), (428 - h), icon.Width, icon.Height);
                        }
                        if (i == 20)
                        {
                            g.DrawImage(icon, (274 - w), (428 - h), icon.Width, icon.Height);
                        }
                    }
                }
            }

Basically how mine works is it runs through that once for each checked icon in the list, and depending on what icon number it is it puts it in the right position. It is a lot simpler then your code but also there's a lot more code so it is less efficient.

Here's a little cleaned up version I just changed:

            foreach (ListViewItem item in listView1.CheckedItems)
            {
                i++;
                if (System.IO.File.Exists(item.SubItems[1].Text))
                {
                    if (i <= 20)
                    {
                        System.Drawing.Image icon = System.Drawing.Image.FromFile(item.SubItems[1].Text,false);
                        
                        int w = (icon.Width / 2);
                        int h = (icon.Height / 2);
                        if (i == 1)                        
                            g.DrawImage(icon, (46 - w), (61 - h), icon.Width, icon.Height);                        
                        else if (i == 2)
                            g.DrawImage(icon, (122 - w), (61 - h), icon.Width, icon.Height);
                        else if (i == 3)
                            g.DrawImage(icon, (198 - w), (61 - h), icon.Width, icon.Height);                        
                        else if (i == 4)
                            g.DrawImage(icon, (274 - w), (61 - h), icon.Width, icon.Height);
                        else if (i == 5)
                            g.DrawImage(icon, (46 - w), (150 - h), icon.Width, icon.Height);
                        else if (i == 6)
                            g.DrawImage(icon, (122 - w), (150 - h), icon.Width, icon.Height);
                        else if (i == 7)
                            g.DrawImage(icon, (198 - w), (150 - h), icon.Width, icon.Height);
                        else if (i == 8)
                            g.DrawImage(icon, (274 - w), (150 - h), icon.Width, icon.Height);
                        else if (i == 9)
                            g.DrawImage(icon, (46 - w), (238 - h), icon.Width, icon.Height);
                        else if (i == 10)
                            g.DrawImage(icon, (122 - w), (238 - h), icon.Width, icon.Height);
                        else if (i == 11)
                            g.DrawImage(icon, (198 - w), (238 - h), icon.Width, icon.Height);
                        else if (i == 12)
                            g.DrawImage(icon, (274 - w), (238 - h), icon.Width, icon.Height);
                        else if (i == 13)
                            g.DrawImage(icon, (46 - w), (326 - h), icon.Width, icon.Height);
                        else if (i == 14)
                            g.DrawImage(icon, (122 - w), (326 - h), icon.Width, icon.Height);
                        else if (i == 15)
                            g.DrawImage(icon, (198 - w), (326 - h), icon.Width, icon.Height);
                        else if (i == 16)
                            g.DrawImage(icon, (274 - w), (326 - h), icon.Width, icon.Height);
                        else if (i == 17)
                            g.DrawImage(icon, (46 - w), (428 - h), icon.Width, icon.Height);
                        else if (i == 18)
                            g.DrawImage(icon, (122 - w), (428 - h), icon.Width, icon.Height);
                        else if (i == 19)
                            g.DrawImage(icon, (198 - w), (428 - h), icon.Width, icon.Height);
                        else if (i == 20)
                            g.DrawImage(icon, (274 - w), (428 - h), icon.Width, icon.Height);                        
                    }
                }
            }

I will re-release the preview system with this update.

New version released!

[StaticFX]

glad to help

the reason im using a sub routine is because the user in my app is allowed to select the icon to use and which spot to put it. So i had to load all icons into memory, then pass each one into the sub with its row/col

remember to test it by looking at the preview in your app, then with the same thing on the ipod. Screenshot the ipod, and screenshot your app, drop them both in an image editor and overlay one on the other then you can check exactly

i look forward to seeing your "preview"

[agentfubu]

Originally Posted by StaticFX

glad to help

the reason im using a sub routine is because the user in my app is allowed to select the icon to use and which spot to put it. So i had to load all icons into memory, then pass each one into the sub with its row/col

remember to test it by looking at the preview in your app, then with the same thing on the ipod. Screenshot the ipod, and screenshot your app, drop them both in an image editor and overlay one on the other then you can check exactly

i look forward to seeing your "preview"

Yep thank you. I'm pretty sure I've found all of the centers, it's just a little tricky because Apple's default icons are 57x57 and you can't have 1/2 pixels...

And my preview lines up, I just don't use any text but besides that it's all good. Thanks for your help again.

[StaticFX]

np!

[agentfubu]

No more feedback from anyone?

I'd think after 800 downloads someone would have something to say?

[Nizmir]

well, this wouldn't probably go on this thread, but can anyone explain what UIImages are?

[agentfubu]

Originally Posted by Nizmir

well, this wouldn't probably go on this thread, but can anyone explain what UIImages are?

From: iPhone Theming on WinterBoard - Jay Freeman (saurik)

Cached .artwork ThemesFinally, the most complex example of image-based themes I've so far seen has to do with .artwork files. These files exist as loading lots of small .png files from disk can be irritatingly time consuming, so instead they are loaded as block and stored (I believe) in a shared memory cache. As these tiny graphics are often used to build all aspects of the interface these represent the ultia thule of iPhone theming.
Messing with them, though, is currently really hard: you have to use special tools to unpack the files and all you get out of them are a bunch of numerically-named png files (.artwork files don't have filenames in them). You then have to carefully make new images of the same size and rebuild the complete .artwork file, which then has to be installed on the phone with a rickety package that attempts to backup and restore the original. Yeek!
After I heard about this, I set out to fix this with WinterBoard: I want theming to be a fun, safe experience that can be taken up by anybody without special tools. To do this I first analyzed how .artwork files worked, and lo and behold there actually are filenames that go with all of those png files people were compressing (already this makes the task a million times easier.
At first I implemented this by providing a folder in your theme called UIImages/ in which you can store replacements for these files. As an example, you might have UIImages/UISearchFieldIcon.png (which happens to be the name of the little magnifying glass used at the left of text fields to indicate you can search with them).
However, I have since figured out that these .artwork files are actually designed to be a cache of files that are otherwise part of a bundle and should really be stored in Folders/UIKit.framework/. The UIImages/ path will be maintained for backwards compatibility. This new understanding, combined with some code updates, means that we can now theme any .artwork file (such as those used for MobilePhone.app).
I'm writing this documentation a little bit before the WinterBoard release related to it, so for right now you need to keep using UIImages/. The support for MobilePhone.app is in there, but hooking back to UIKit.framework/ is not.


Of course, you need to know what you can put there to make this feature useful. For a list of filenames you can theme you can grab this text file, but just having the names isn't really helpful. While I currently feel uncomfortable distributing a copy of these images from Apple as a file on my website, I have released a tool as part of WinterBoard that will let you quickly extract them for yourself called, yep, UIImages. Here's how you use it:

$ mkdir /tmp/images $ cd /tmp/images $ /Applications/WinterBoard.app/UIImages $ ls UISearchFieldIcon.png -la -rw-r--r-- 1 root wheel 468 Aug 4 03:13 UISearchFieldIcon.png

One final variant are things that are loaded from a "mapped image domain". Common examples of this are the TextInput localization bundles. The way you specify these is using Domains/TextInput_ru/std-kb-ru.png.

[Nizmir]

Thanks ... I think
so UIimages are just regular images?
does UI stand for user interface?

[agentfubu]

Originally Posted by Nizmir

Thanks ... I think
so UIimages are just regular images?
does UI stand for user interface?

Basically yeah they're regular images, they theme the iPhone's user interface (UI as you said, that's correct).
They're things like buttons that are the same systemwide.

[agentfubu]

Sorry for no updates in a while, I've been really busy. Does any have any ideas of what I could add for a next version?


Thanks

[agentfubu]

(I don't like double/triple posting but I kind of have to...)
Version 7 released!
Added:
- String support
- Built in feedback system

[o_0!]

can't wait to see its OSX vision