The quest for the perfect panorama viewer

[HaLo2FrEeEk]

A few nights ago I was looking through some old content that was related to a current project I'm doing and I found my Halo 3: ODST 360^o panorama I made on NMPD HQ. I took a look at the flash panorama viewer I was using and re-realized how much it sucked. When I put it out, I recommended that people download the video or the full-res picture and NOT use the pano viewer because of how bad it looked. Well, not content to have something like that on the site, I went on a quest. A quest to find the perfect panorama viewer...or at least a better one.

I searched for hours, looking for a good, FREE, player. I wanted something flash-based, and I would settle for Silverlight if I had to. Much to my dismay, I couldn't find ANY good, free panorama players, they all cost money (which is stupid, if you ask me.)

Eventually I found a site that had comparisons of a lot of different players. I came across the one I was using, called pan0, and a few of the other's I'd seen during my search, specifically one called krpano, which is great, but pricey. Finally I found a program called Panorama2Flash. The download page didn't have anything about pricing, so I thought it was free. Excited, I downloaded and installed it, only to open it up and find that it wasn't free, I needed a serial number, or I could use a trial. I decided to go with the trial, which is fully-featured but puts a watermark on the output image, and see if I could crack the program to not need a serial. I've never been good at that, and thus failed. I figured I'd just see how bad it was and imported a panorama, the ODST one, and exported it. I opened up the player file and saw my beautiful panorama...completely ruined because of the multiple copies of a watermark going straight through the middle. I wasn't going to have any of that, there was something I could do about it.

First place I thought to look was the actual flash player file, thinking the watermark was built into it and I could just remove that image. I opened the player in a flash decompiler and learned that the watermark was not built in. That left one option, the watermark was actually built into the panorama image itself. The "image" that's outputted from the Panorama2Flash program has a .jpe extension, which is technically a JPEG extension. First thing I tried was opening the image in Windows Picture Viewer, but it said that it wasn't a valid image file. Odd. Next thing I did was open it in a hex editor.

first thing I noticed was that it definitely wasn't a standard JPEG, but something caught my eye. At offset 340 there were 4 characters: JFIF. "That's a JPEG header", I thought to myself. Now, a normal JPEG header actually starts with these bytes:

FF D8 FF E0 00 10 4A 46 49 46

The "4A 46 49 46" is hex for JFIF. I noticed that in my file, my JPEG header was missing the first 2 bytes, the "FF D8." I did a quick search for the text JFIF and found that there were 12 instances, all with the standard JPEG header, minus the first two bytes. I copied from the beginning of the first header to the beginning of the second one, inserted the missing bytes, and saved. Lo and behold, there was a portion of my panorama, 1/12 the width of the original and the same height. This led me to believe that the 12 instances of JFIF that I found were actually 12 portions of my original panorama, meaning that the viewer worked by taking those 12 blocks and putting them together to form the full rotation.

Next thing I needed to find out was how the flash player knew where to look for the files and how long each one was. Since I said that the first JFIF header was at offset 340, this meant that the data I need had to be somewhere in those first 340 bytes. I looked through and noticed a pattern, there was a certain character at offset 8, then the same character at 52, then again at 76...etc. Every 24 bytes after 52 was that same character, until offset 336, the beginning of the JFIF header. Digging through a little deeper I looked at the size of the first JPEG that I'd copied, then found that value in the .jpe file. Turns out that the jpe file has a 48 byte block at the beginning, then 12 24 byte blocks until the beginning of the first JPEG header. The first 4 bytes of each 24-byte block was the number of the image, so the first block was 0, the second was 1 (counting starts at 0 in computers,) etc. The next 8 bytes I didn't know what they did, I'll get to that later though. The next 8 bytes are null, and the last 4 bytes in the block were the size in bytes of the corresponding JPEG image. Interesting.

So, armed with that information, I built a program that could open a JPE image and export it's contents based on the information in that 336-byte header, and it WORKED! My next step was to add the ability to create my own JPE files. That came easily enough, I opened my picture in panorama in photoshop and sized it down to the nearest multiple of 12. My panorama was 6556x926, 6556 isn't evenly divisible by 12, the nearest multiple meant that I had to size it down to 6552, meaning each image would be 546 pixels wide. So I sized it down and chopped it into 12 evenly-sized parts, 546x926 each. Next I used some new features of my program to import those chopped up parts into a new JPE file. Remembering that the header contained the file sizes, I reconstructed it with that information from the new files. Also remembering that each JPEG in the JPE file was missing the first 2 bytes from it's header, I removed those before embedding the files. Crossing fingers, holding breath, dying of anticipation, I saved my file and opened back up my panorama viewer.......

IT WORKED! No watermark, perfect quality. I'd done it, I'd cracked the code.

BUT, I wasn't done. Next thing I wanted to try was if the technique worked on all images or if I just got lucky. I took another 360^o panorama and chopped it into 12 parts, used my program to create the new JPE file and tried it. Well, I knew it was too good to be true. It didn't work, it was all messed up, it looked out of order, or like the images were overlapping. Well that's weird, why would they overlap? It's like the flash file wasn't calculating the width of each image properly. Maybe those 8 bytes that I didn't think did anything...actually did do something. Research wasn't hard for this one, but it was a lucky break. I'd just gotten done exporting out my 12 parts and I happened to look at the width of the created images. Going back to the JPE file's hex code, I noticed that the int32 value of the first 4 of those 8 bytes was the width of the image. On a hunch, I looked at the height and compared it to the next 4 bytes...what do you know, there it was. Those 8 mystery bytes were the width and height of each chunk. Knowing now why my images were overlapping in my second test, I recoded my program to take into account the width and height of the 12 input images, reconstructed the header with those values, re-embedded the JPEG files and saved.

BAM. It worked. I did a few more tests on multiple different (differently sized, width and height) panoramas and they all worked.

I was so proud of myself. I'd finally done something awesome. I started with nothing, no information, no research. I took what I knew about file formats and hex and researched and learned, then I took what I knew about C# and programming to make a tool to make the process easier. And all this for a panorama viewer without a watermark. Was it worth it?

Hell yes! Now all I have to do is write a method to do ALL the work, meaning all I do is input a full panorama image and the program resizes it, slices it up, reconstructs the header, embeds the files, and saves out the JPE file.

And this all started as me just wanting a better panorama viewer. Sheesh.

What does this mean for all of you? Well, for starters it means that you just spent...idk, 5-10 minutes reading about hex code and programming. For Infectionist it means that I have a better way of showing off full cylindrical and shperical panoramas (yes, shperical, meaning up/down left/right all-around view!) For the world? Probably nothing. I'm sure Panorama2Flash will continue to sell their product, regardless of if I release this information/program. I'm sure this is of very little interest to everyone except people like me...so pretty much just me. However, for me, it means that I've gone one step further in my research and learning, I've gained knowledge about one more subject, and I have one more useful program under my figurative belt. It's getting a little tight, that belt.

I wasn't sure if I was going to tell you all about this, seeing as I knew it would be a long post, trying to explain everything. I also didn't want to see it get ignored and pushed to the bottom, especially after how long it took me to write it. I hope some of you will find this interesting, and please, if you don't have something nice to say...think of something!

<3
_________________


~HaLo2FrEeEk

[HaLo2FrEeEk]

A few nights ago I was looking through some old content that was related to a current project I'm doing and I found my Halo 3: ODST 360^o panorama I made on NMPD HQ. I took a look at the flash panorama viewer I was using and re-realized how much it sucked. When I put it out, I recommended that people download the video or the full-res picture and NOT use the pano viewer because of how bad it looked. Well, not content to have something like that on the site, I went on a quest. A quest to find the perfect panorama viewer...or at least a better one.

I searched for hours, looking for a good, FREE, player. I wanted something flash-based, and I would settle for Silverlight if I had to. Much to my dismay, I couldn't find ANY good, free panorama players, they all cost money (which is stupid, if you ask me.)

Eventually I found a site that had comparisons of a lot of different players. I came across the one I was using, called pan0, and a few of the other's I'd seen during my search, specifically one called krpano, which is great, but pricey. Finally I found a program called Panorama2Flash. The download page didn't have anything about pricing, so I thought it was free. Excited, I downloaded and installed it, only to open it up and find that it wasn't free, I needed a serial number, or I could use a trial. I decided to go with the trial, which is fully-featured but puts a watermark on the output image, and see if I could crack the program to not need a serial. I've never been good at that, and thus failed. I figured I'd just see how bad it was and imported a panorama, the ODST one, and exported it. I opened up the player file and saw my beautiful panorama...completely ruined because of the multiple copies of a watermark going straight through the middle. I wasn't going to have any of that, there was something I could do about it.

First place I thought to look was the actual flash player file, thinking the watermark was built into it and I could just remove that image. I opened the player in a flash decompiler and learned that the watermark was not built in. That left one option, the watermark was actually built into the panorama image itself. The "image" that's outputted from the Panorama2Flash program has a .jpe extension, which is technically a JPEG extension. First thing I tried was opening the image in Windows Picture Viewer, but it said that it wasn't a valid image file. Odd. Next thing I did was open it in a hex editor.

first thing I noticed was that it definitely wasn't a standard JPEG, but something caught my eye. At offset 340 there were 4 characters: JFIF. "That's a JPEG header", I thought to myself. Now, a normal JPEG header actually starts with these bytes:

FF D8 FF E0 00 10 4A 46 49 46

The "4A 46 49 46" is hex for JFIF. I noticed that in my file, my JPEG header was missing the first 2 bytes, the "FF D8." I did a quick search for the text JFIF and found that there were 12 instances, all with the standard JPEG header, minus the first two bytes. I copied from the beginning of the first header to the beginning of the second one, inserted the missing bytes, and saved. Lo and behold, there was a portion of my panorama, 1/12 the width of the original and the same height. This led me to believe that the 12 instances of JFIF that I found were actually 12 portions of my original panorama, meaning that the viewer worked by taking those 12 blocks and putting them together to form the full rotation.

Next thing I needed to find out was how the flash player knew where to look for the files and how long each one was. Since I said that the first JFIF header was at offset 340, this meant that the data I need had to be somewhere in those first 340 bytes. I looked through and noticed a pattern, there was a certain character at offset 8, then the same character at 52, then again at 76...etc. Every 24 bytes after 52 was that same character, until offset 336, the beginning of the JFIF header. Digging through a little deeper I looked at the size of the first JPEG that I'd copied, then found that value in the .jpe file. Turns out that the jpe file has a 48 byte block at the beginning, then 12 24 byte blocks until the beginning of the first JPEG header. The first 4 bytes of each 24-byte block was the number of the image, so the first block was 0, the second was 1 (counting starts at 0 in computers,) etc. The next 8 bytes I didn't know what they did, I'll get to that later though. The next 8 bytes are null, and the last 4 bytes in the block were the size in bytes of the corresponding JPEG image. Interesting.

So, armed with that information, I built a program that could open a JPE image and export it's contents based on the information in that 336-byte header, and it WORKED! My next step was to add the ability to create my own JPE files. That came easily enough, I opened my picture in panorama in photoshop and sized it down to the nearest multiple of 12. My panorama was 6556x926, 6556 isn't evenly divisible by 12, the nearest multiple meant that I had to size it down to 6552, meaning each image would be 546 pixels wide. So I sized it down and chopped it into 12 evenly-sized parts, 546x926 each. Next I used some new features of my program to import those chopped up parts into a new JPE file. Remembering that the header contained the file sizes, I reconstructed it with that information from the new files. Also remembering that each JPEG in the JPE file was missing the first 2 bytes from it's header, I removed those before embedding the files. Crossing fingers, holding breath, dying of anticipation, I saved my file and opened back up my panorama viewer.......

IT WORKED! No watermark, perfect quality. I'd done it, I'd cracked the code.

BUT, I wasn't done. Next thing I wanted to try was if the technique worked on all images or if I just got lucky. I took another 360^o panorama and chopped it into 12 parts, used my program to create the new JPE file and tried it. Well, I knew it was too good to be true. It didn't work, it was all messed up, it looked out of order, or like the images were overlapping. Well that's weird, why would they overlap? It's like the flash file wasn't calculating the width of each image properly. Maybe those 8 bytes that I didn't think did anything...actually did do something. Research wasn't hard for this one, but it was a lucky break. I'd just gotten done exporting out my 12 parts and I happened to look at the width of the created images. Going back to the JPE file's hex code, I noticed that the int32 value of the first 4 of those 8 bytes was the width of the image. On a hunch, I looked at the height and compared it to the next 4 bytes...what do you know, there it was. Those 8 mystery bytes were the width and height of each chunk. Knowing now why my images were overlapping in my second test, I recoded my program to take into account the width and height of the 12 input images, reconstructed the header with those values, re-embedded the JPEG files and saved.

BAM. It worked. I did a few more tests on multiple different (differently sized, width and height) panoramas and they all worked.

I was so proud of myself. I'd finally done something awesome. I started with nothing, no information, no research. I took what I knew about file formats and hex and researched and learned, then I took what I knew about C# and programming to make a tool to make the process easier. And all this for a panorama viewer without a watermark. Was it worth it?

Hell yes! Now all I have to do is write a method to do ALL the work, meaning all I do is input a full panorama image and the program resizes it, slices it up, reconstructs the header, embeds the files, and saves out the JPE file.

And this all started as me just wanting a better panorama viewer. Sheesh.

What does this mean for all of you? Well, for starters it means that you just spent...idk, 5-10 minutes reading about hex code and programming. For Infectionist it means that I have a better way of showing off full cylindrical and shperical panoramas (yes, shperical, meaning up/down left/right all-around view!) For the world? Probably nothing. I'm sure Panorama2Flash will continue to sell their product, regardless of if I release this information/program. I'm sure this is of very little interest to everyone except people like me...so pretty much just me. However, for me, it means that I've gone one step further in my research and learning, I've gained knowledge about one more subject, and I have one more useful program under my figurative belt. It's getting a little tight, that belt.

I wasn't sure if I was going to tell you all about this, seeing as I knew it would be a long post, trying to explain everything. I also didn't want to see it get ignored and pushed to the bottom, especially after how long it took me to write it. I hope some of you will find this interesting, and please, if you don't have something nice to say...think of something!

<3
_________________


~HaLo2FrEeEk

[Kool012]

wow that was very long, interesting read through. To bad I did not understand some of it since I have not learned what C# is yet in web design. In about a week, we will be starting Dreamweaver, so I can get some basic knowledge in that. I have the highest grade in my class, which is a 93%, but all we have done so far is basic HTML. We just finished learning about how to make forms to submit information to a web server running CGI. I know all about <input> tags and the like. =) Hopefully I will learn more in Web Design 2. =)
_________________
I moderate and post Bungie News

[Kool012]

wow that was very long, interesting read through. To bad I did not understand some of it since I have not learned what C# is yet in web design. In about a week, we will be starting Dreamweaver, so I can get some basic knowledge in that. I have the highest grade in my class, which is a 93%, but all we have done so far is basic HTML. We just finished learning about how to make forms to submit information to a web server running CGI. I know all about <input> tags and the like. =) Hopefully I will learn more in Web Design 2. =)
_________________
I moderate and post Bungie News

[HaLo2FrEeEk]

You won't learn anything about C# in web design. You most likely won't learn anything about any sort of programming languages in Web Design. I took that class in high school for an easy A. On the first day I raised my hand and correctly answered every single one of the teacher's questions, and even corrected him a few times. He asked me if I'd redesign the school site and in return he'd give me an A in the class and I wouldn't have to do any of the classwork. I did, and I got my A, and the next year I was a Teacher's Assistant for that same class, even taught it a few times. Good times.

Anywho, HTML isn't a programming language, it's a markup language. Javascript isn't a programming language either, it's a scripting language. Javascript is not Java, they are completely different. CGI isn't really a language either, it's a language base. For example, Infectionist's server is running PHP as CGI. Being able to submit a form is pretty neat though, that's the basis of almost every data entry method on the internet, in fact when you typed a post you submitted a form to the server.

And for the record, C# is classified as a very-high-level programming language. I wrote my Xbox 360 Theme Extractor using C#, for example.
_________________


~HaLo2FrEeEk

[HaLo2FrEeEk]

You won't learn anything about C# in web design. You most likely won't learn anything about any sort of programming languages in Web Design. I took that class in high school for an easy A. On the first day I raised my hand and correctly answered every single one of the teacher's questions, and even corrected him a few times. He asked me if I'd redesign the school site and in return he'd give me an A in the class and I wouldn't have to do any of the classwork. I did, and I got my A, and the next year I was a Teacher's Assistant for that same class, even taught it a few times. Good times.

Anywho, HTML isn't a programming language, it's a markup language. Javascript isn't a programming language either, it's a scripting language. Javascript is not Java, they are completely different. CGI isn't really a language either, it's a language base. For example, Infectionist's server is running PHP as CGI. Being able to submit a form is pretty neat though, that's the basis of almost every data entry method on the internet, in fact when you typed a post you submitted a form to the server.

And for the record, C# is classified as a very-high-level programming language. I wrote my Xbox 360 Theme Extractor using C#, for example.
_________________


~HaLo2FrEeEk

[Kool012]

Well thanks for telling me those things.
Our school has many different Web Design class, and I'm going to take Web Design 2 next year.
Hopefully I could learn something in those classes that could be used on Infectionist. =)
EDIT: I was just looking at Infectionist's source for this page and I was wondering why the break tags are <br /> and not </br>.
_________________
I moderate and post Bungie News

[Kool012]

Well thanks for telling me those things.
Our school has many different Web Design class, and I'm going to take Web Design 2 next year.
Hopefully I could learn something in those classes that could be used on Infectionist. =)
EDIT: I was just looking at Infectionist's source for this page and I was wondering why the break tags are <br /> and not </br>.
_________________
I moderate and post Bungie News

[Poisonblood]

I cant even remember how to make an error box with tooltips, bold text, enter text, ect. Guess when I learned that? Only 5-6 months ago. You got quite a mind H2F. Good job :D

(Oh, and I didnt understand most of it, too.) lululullulu
_________________

[Poisonblood]

I cant even remember how to make an error box with tooltips, bold text, enter text, ect. Guess when I learned that? Only 5-6 months ago. You got quite a mind H2F. Good job :D

(Oh, and I didnt understand most of it, too.) lululullulu
_________________

[KJdog23]

Pretty nice read, but only took 2 mins, not 10...

Anyways, pretty sweet how you figured all it out like some detective. Now you just need to make your own panorama viewer program :P
_________________

[HaLo2FrEeEk]

I was actually thinking of making a program for viewing panoramas, but I want it to be freely available and web-accessible, C# programs are written in .NET, and only websites running ASP can run .NET programs. Since Infectionist is running PHP it wouldn't be possible. I do plan on improving the program so I don't have to cut the image up in photoshop, I just put in the whole panorama image and the program does all the work.

And Kool, line break tags don't need to be ended. XHTML uses <br /> and HTML uses <br>. The forum is XHTML, though it's not valid (not my fault, phpBB's fault). The frontpage uses HTML 4.01, which uses <br> line break tags, and it's fully HTML 4.01 compliant. There are a few examples of tags that don't require closing tags. For example, list items:

[HaLo2FrEeEk]

I was actually thinking of making a program for viewing panoramas, but I want it to be freely available and web-accessible, C# programs are written in .NET, and only websites running ASP can run .NET programs. Since Infectionist is running PHP it wouldn't be possible. I do plan on improving the program so I don't have to cut the image up in photoshop, I just put in the whole panorama image and the program does all the work.

And Kool, line break tags don't need to be ended. XHTML uses <br /> and HTML uses <br>. The forum is XHTML, though it's not valid (not my fault, phpBB's fault). The frontpage uses HTML 4.01, which uses <br> line break tags, and it's fully HTML 4.01 compliant. There are a few examples of tags that don't require closing tags. For example, list items:

[Kool012]

oh ok I have not worked with XHTML yet so i didn't now, but thanks for telling me.
Do you know what Dreamweaver is, if so is it difficult to use?
(Not the song btw)^
_________________
I moderate and post Bungie News

[Kool012]

oh ok I have not worked with XHTML yet so i didn't now, but thanks for telling me.
Do you know what Dreamweaver is, if so is it difficult to use?
(Not the song btw)^
_________________
I moderate and post Bungie News

[HaLo2FrEeEk]

Yes I know what adobe dreamweaver is, I've never used it. I hate with a passion programs like that, page designers. It takes no skill to make a webpage in a program that writes all the code for you. I write all my code by hand in a php editor.
_________________


~HaLo2FrEeEk

[HaLo2FrEeEk]

Yes I know what adobe dreamweaver is, I've never used it. I hate with a passion programs like that, page designers. It takes no skill to make a webpage in a program that writes all the code for you. I write all my code by hand in a php editor.
_________________


~HaLo2FrEeEk

[HaLo2FrEeEk]

So it turns out this technique only works with cylindrical panoramas. When working with a spherical panorama it uses a completely different format. I'll have to do some more research and see how spherical panorama JPEs are created and modify my program to suit those as well.

Edit: I did some research and finally nailed down what each value in the file does (except one). I wrote up a little whitepaper for it:

[HaLo2FrEeEk]

So it turns out this technique only works with cylindrical panoramas. When working with a spherical panorama it uses a completely different format. I'll have to do some more research and see how spherical panorama JPEs are created and modify my program to suit those as well.

Edit: I did some research and finally nailed down what each value in the file does (except one). I wrote up a little whitepaper for it: