TI.Image: Difference between revisions

From Hackspire
Jump to navigation Jump to search
No edit summary
 
(10 intermediate revisions by 2 users not shown)
Line 5: Line 5:
The examples here, as the encoded strings visible in .lua files sometimes show letters and symbols instead of expected "\xxx" characters. This is because the "\xxx" is actually a representation of a non-printable character, and when, by chance, the character is printable the editor displays its value, which can be a letter, a symbol etc.
The examples here, as the encoded strings visible in .lua files sometimes show letters and symbols instead of expected "\xxx" characters. This is because the "\xxx" is actually a representation of a non-printable character, and when, by chance, the character is printable the editor displays its value, which can be a letter, a symbol etc.


==Header==
==Bytes and Data sections==
 
All the data in a Ti.image is formatted in what we call bytes.
A byte can look like this (without the quotes): "<tt>\255</tt>", "<tt>\129</tt>", "<tt>\045</tt>" or "<tt>.</tt>".
If the byte number is reprecentable in ascii (and the nspire supports that char), it is allowed to just use the ascii version as byte, to lower the size of the image. For example, you can change "<tt>\046</tt>" to "<tt>.</tt>".


The format has a header specifying the total buffer length.
A data section is a group of bytes used to represent some header data or a pixel.
The header is 20 decimal numbers long.
For example, it might look like this: "<tt>\255\123</tt>".
What is very important to understand is that the data is not written logically, in fact, the position of the bytes is swapped.
For example, let's take a picture with the width 320, and you want to convert the width size to put in your header:


Example header :
1. You first convert the number to binary: <tt>320 --> 101000000</tt>.<br>
''.\000\000\000\018\000\000\000\000\000\000\000\092\000\000\000\016\000\001\000''
2.Then you have to add the extra zeros to make it fit in the header (width is 4 bytes):<br>
<tt>00000000000000000000000101000000</tt><br>
3.This is then splited in four (4 bytes):<br>
<tt>00000000 - 00000000 - 00000001 - 01000000</tt><br>
4.Then converted back to decimal:<br>
<tt>000 - 000 - 001 - 064</tt><br>


We currently know that it is encoded as follow :
You would expect to put this then as "<tt>\000\000\001\064</tt>" in the header, but no, you have to swap it: "<tt>\064\001\000\000</tt>"<br><br>
[image WIDTH]\000\000\000\[Image HEIGHT]\000\000\000\000\000\000\000\[image Data WIDTH]\000\000\000\[image Depth]\000\001\000
You can also change the "<tt>\064</tt>" in the header to "<tt>@</tt>", since that is its ASCII representation.
Finally, the data would look like this: "<tt>@\001\000\000</tt>"


[image Data WIDTH] is the width of one data row (normally 2*[image WIDTH])
==Header==
The numbers must be between 000 and 255 (00 to FF in hex)
The header is 20 "bytes" long, and can be devided in the following 6 data sections:<br>
<tt>[IMAGE WIDTH, 4 bytes][IMAGE HEIGHT, 4 bytes][EMPTY, 4 bytes][IMAGE BUFFER SIZE, 4 bytes][IMAGE DEPTH, 2 bytes][UNKNOWN, 2 bytes]</tt>
The header is the first data of the Ti.image format.
<tt>[IMAGE WIDTH, 4 bytes]</tt> : This is the width of your image, and is four bytes long.<br>
<tt>[IMAGE HEIGHT, 4 bytes]</tt> : This is the height of your image, and is four bytes long.<br>
<tt>[EMPTY, 4 bytes]</tt> : This space is just filled with zeroes ("\000\000\000\000"), and is four bytes long<br>
<tt>[IMAGE BUFFER SIZE, 4 bytes]</tt> : Amount of bytes in one buffer row , this is normally 2*width. 4 bytes long.<br>
<tt>[IMAGE DEPTH, 2 bytes]</tt> : This is the image, normally just 16 ,two bytes long (actaully the image is 15 bit, but if you count the alpha channel it is 16)<br>
<tt>[UNKNOWN, 2 bytes]</tt> : Unknown, maybe compression type? Two bytes long, and has 1 as default value.<bt>


We also know that when we change the second triplet of number (in the example above, it would be the first \000 sequence, because the first characters in the string is printable, as a "." (dot)) from \000 to \001, the image becomes x-repeated and y-shifted for each iteration.


Some modifications on other triplets can cause some buffer overflow and segmentation faults errors.
Example header and description:<br>
<tt>.\000\000\000\018\000\000\000\000\000\000\000\092\000\000\000\016\000\001\000</tt>


==Data==
The first four bytes ("<tt>.\000\000\000</tt>") shows that the width is 46px.<br>
The next four bytes ("<tt>\018\000\000\000</tt>") shows that the height 18px.<br>
The next four bytes is empty.<br>
The four bytes ("<tt>\092\000\000\000</tt>") after this is the buffer row size (2*width)<br>
The next two bytes ("<tt>\016\000</tt>") is the image depth.
The next two bytes ("<tt>\001\000</tt>") are unkown.


The image data comes directly after the header, and is written in the same pattern.
==Pixel data==
The data is in bitmap form, 2 bytes for each pixel.
The pixel data commes directly after the header. Each pixel has a data section of two bytes.
It contains the rgb values, and the alpha channel.
Here is how it is structured (in binary):
<tt>A - RRRRR - GGGGG - BBBBB</tt><br>
Example : <tt>1 - 11111 - 10001 - 00000</tt><br>
A is the alpha channel, 1 for not transparent, 0 for fully transparent. R, G, and B or the color levels.
To convert this to valid pixel data it has to be cut in two:
ARRRRRGG - GGGBBBBB
11111110 - 00100000
    ||          || Converter to decimal
    \/          \/
    254        032
And finally, swapped:
"\032\254"
This is then added to the data buffer.


2 bytes for each pixel means 16 bits, but we only use 15 bit for the colors, 5 for each color:<br>
S - RRRRR - GGGGG - BBBBB<br>
If S is 0, the pixel is NOT shown. If it is 1 it is shown. (alpha, 0 is fully transparent)<br>
Example :  1111010111100001<br>


http://upload.wikimedia.org/wikipedia/commons/a/a0/SLNotation55510.png
==Examples==


To convert this to a format that the nspire understands we have to split the number in two (2 * 8 bit) and convert both binary numbers to decimal:
<tt>'''\007\000\000\000\008\000\000\000\000\000\000\000\014\000\000\000\016\000\001\000'''alalalalalalalal\000\244\000\244al\000\244\000\244al\000\244\000\244\000\244\000\244\000\244\000\244\000\244\000\244\000\244\000\244\000\244\000\244\000\244\000\244al\000\244\000\244\000\244\000\244\000\244alalal\000\244\000\244\000\244alalalalal\000\244alalalalalalalalalal5</tt>
<code>
11110101 - 11100001
    ||        ||
    \/        \/
  245        225
</code>
You then have to add this as \245\225 in the data list.


''Extra compression:''
As said previously, numbers which are displayable in the ascii table (on the nspire) are replaced with the corresponding character. \105 is for example replaced with 'i'. This is not necessary though.


==External Links==
==External Links==


[[User:AdRiWeB|AdRiWeB]] made [http://www.youtube.com/watch?v=YQhrMHNkL3A a video] showing some direct manipulations of the TI-Image, in order to understand better how the format in general.
[[User:AdRiWeB|AdRiWeB]] made [http://www.youtube.com/watch?v=YQhrMHNkL3A a video] showing some direct manipulations of the TI-Image, in order to understand better the format in general.


[[User:jimbauwens|Jimbauwens]] made [http://bwns.be/jim/tiimg.html a image previewer]. You have to paste the image data, and it will display it.
[[User:jimbauwens|Jimbauwens]] made [http://bwns.be/jim/tiviewer.html a image previewer], [http://bwns.be/jim/sprite.html a sprite creator] and a basic [http://bwns.be/jim/convert.py python image converter] (you need PythonMagick to run this)


==References==
==References==
http://en.wikipedia.org/wiki/Highcolor
http://en.wikipedia.org/wiki/Highcolor

Latest revision as of 12:41, 4 May 2011

The TI.Image format is a type of image used in several places in the Nspire documents, such as Lua scripts.

The format is some form of bitmap, with almost no compression at all.

The examples here, as the encoded strings visible in .lua files sometimes show letters and symbols instead of expected "\xxx" characters. This is because the "\xxx" is actually a representation of a non-printable character, and when, by chance, the character is printable the editor displays its value, which can be a letter, a symbol etc.

Bytes and Data sections

All the data in a Ti.image is formatted in what we call bytes. A byte can look like this (without the quotes): "\255", "\129", "\045" or ".". If the byte number is reprecentable in ascii (and the nspire supports that char), it is allowed to just use the ascii version as byte, to lower the size of the image. For example, you can change "\046" to ".".

A data section is a group of bytes used to represent some header data or a pixel. For example, it might look like this: "\255\123". What is very important to understand is that the data is not written logically, in fact, the position of the bytes is swapped. For example, let's take a picture with the width 320, and you want to convert the width size to put in your header:

1. You first convert the number to binary: 320 --> 101000000.
2.Then you have to add the extra zeros to make it fit in the header (width is 4 bytes):
00000000000000000000000101000000
3.This is then splited in four (4 bytes):
00000000 - 00000000 - 00000001 - 01000000
4.Then converted back to decimal:
000 - 000 - 001 - 064

You would expect to put this then as "\000\000\001\064" in the header, but no, you have to swap it: "\064\001\000\000"

You can also change the "\064" in the header to "@", since that is its ASCII representation. Finally, the data would look like this: "@\001\000\000"

Header

The header is 20 "bytes" long, and can be devided in the following 6 data sections:
[IMAGE WIDTH, 4 bytes][IMAGE HEIGHT, 4 bytes][EMPTY, 4 bytes][IMAGE BUFFER SIZE, 4 bytes][IMAGE DEPTH, 2 bytes][UNKNOWN, 2 bytes]

The header is the first data of the Ti.image format.

[IMAGE WIDTH, 4 bytes] : This is the width of your image, and is four bytes long.
[IMAGE HEIGHT, 4 bytes] : This is the height of your image, and is four bytes long.
[EMPTY, 4 bytes] : This space is just filled with zeroes ("\000\000\000\000"), and is four bytes long
[IMAGE BUFFER SIZE, 4 bytes] : Amount of bytes in one buffer row , this is normally 2*width. 4 bytes long.
[IMAGE DEPTH, 2 bytes] : This is the image, normally just 16 ,two bytes long (actaully the image is 15 bit, but if you count the alpha channel it is 16)
[UNKNOWN, 2 bytes] : Unknown, maybe compression type? Two bytes long, and has 1 as default value.<bt>


Example header and description:
.\000\000\000\018\000\000\000\000\000\000\000\092\000\000\000\016\000\001\000

The first four bytes (".\000\000\000") shows that the width is 46px.
The next four bytes ("\018\000\000\000") shows that the height 18px.
The next four bytes is empty.
The four bytes ("\092\000\000\000") after this is the buffer row size (2*width)
The next two bytes ("\016\000") is the image depth. The next two bytes ("\001\000") are unkown.

Pixel data

The pixel data commes directly after the header. Each pixel has a data section of two bytes. It contains the rgb values, and the alpha channel.

Here is how it is structured (in binary):

A - RRRRR - GGGGG - BBBBB
Example : 1 - 11111 - 10001 - 00000
A is the alpha channel, 1 for not transparent, 0 for fully transparent. R, G, and B or the color levels.

To convert this to valid pixel data it has to be cut in two:

ARRRRRGG - GGGBBBBB
11111110 - 00100000

   ||          || Converter to decimal
   \/          \/
	
   254        032

And finally, swapped:

"\032\254"

This is then added to the data buffer.


Examples

\007\000\000\000\008\000\000\000\000\000\000\000\014\000\000\000\016\000\001\000alalalalalalalal\000\244\000\244al\000\244\000\244al\000\244\000\244\000\244\000\244\000\244\000\244\000\244\000\244\000\244\000\244\000\244\000\244\000\244\000\244al\000\244\000\244\000\244\000\244\000\244alalal\000\244\000\244\000\244alalalalal\000\244alalalalalalalalalal5


External Links

AdRiWeB made a video showing some direct manipulations of the TI-Image, in order to understand better the format in general.

Jimbauwens made a image previewer, a sprite creator and a basic python image converter (you need PythonMagick to run this)

References

http://en.wikipedia.org/wiki/Highcolor