|
1 | | - _ ____ _ _ __ _ ___ |
2 | | - | | _ \ / \ | |/ / __ _/ | / _ \ |
3 | | - _ | | |_) / _ \ | ' / \ \ / / || | | | |
4 | | - | |_| | __/ ___ \| . \ \ V /| || |_| | |
5 | | - \___/|_| /_/ \_\_|\_\ \_/ |_(_)___/ |
6 | | - |
| 1 | + _ ____ _ _ __ ____ ___ |
| 2 | + | | _ \ / \ | |/ / __ _|___ \ / _ \ |
| 3 | + _ | | |_) / _ \ | ' / \ \ / / __) || | | | |
| 4 | + | |_| | __/ ___ \| . \ \ V / / __/ | |_| | |
| 5 | + \___/|_| /_/ \_\_|\_\ \_/ |_____(_)___/ |
| 6 | + |
7 | 7 | Description |
8 | | -======== |
| 8 | +=========== |
9 | 9 |
|
10 | 10 | **JPAK** is a multi-use Javascript Package System, developed for loading several files at once with only one package. |
11 | 11 |
|
12 | 12 | For what this can be used? |
13 | | -======== |
| 13 | +========================== |
14 | 14 |
|
15 | 15 | **JPAK** can be used for many things. From game assets to webpage assets. It makes easier to preload all images and resources that you need for website. |
16 | 16 |
|
17 | 17 | What is done |
18 | 18 | ======== |
19 | | -* Javascript Loader |
20 | | -* Python Packer |
21 | | -* JPAK 1.0 Specification file |
22 | | -* Load progress event |
23 | | -* Get file as Base64 |
24 | | -* Get file as HTML Data URI (for hide from Network Requests) |
25 | | -* GZIP Decompress Support, forked from https://github.com/jsxgraph/jsxgraph/ |
26 | | -* Simple C# Windows Tool for Exploring and Export Content from JPAK Files |
27 | | -* C++ Extension |
| 19 | +* Javascript Loader / Packer for 2.0 |
| 20 | +* Python Packer for 1.0 |
| 21 | +* JPAK 1.0 Specification file |
| 22 | +* JPAK 2.0 Extended Specification file |
| 23 | +* Load progress event |
| 24 | +* Get file as Base64 |
| 25 | +* Get file as HTML Data URI (for hide from Network Requests) |
| 26 | +* GZIP Decompress Support, forked from https://github.com/jsxgraph/jsxgraph/ |
| 27 | +* Simple C# Windows Tool for Exploring and Export Content from JPAK Files (v1.0) |
| 28 | +* C++ Extension |
| 29 | +* Partial Loading of data |
28 | 30 |
|
29 | 31 | TODO |
30 | 32 | ======== |
31 | | -* Load files from JPAK only when needed. A.K.A. - Fetch only the necessary parts from jpak file. |
32 | | -* Add option to compress files on packing. |
33 | | -* More stuff on JPAK Explorer for Windows |
34 | | -* JPAK Explorer for Linux |
35 | | -* Documents for C#, C++ |
36 | | -* Zlib Decompress for C++ |
37 | | - |
38 | | -How to use it |
39 | | -======== |
| 33 | +* Add option to compress files on packing. |
| 34 | +* More stuff on JPAK Explorer for Windows |
| 35 | +* JPAK Explorer for Linux |
| 36 | +* Documents for C#, C++ |
| 37 | +* Zlib Decompress for C++ |
| 38 | +* C++ Library for JPAK 2.0 EXT |
40 | 39 |
|
41 | | -**JPAK** is made to be simple. You can use for any file you want. First, you need to create a JPAK package. |
| 40 | +Generating JPAK1 Packages |
| 41 | +============= |
42 | 42 |
|
43 | | -You can use the python script called **packer.py** at `packer` folder. The sintax is simple, just create a folder and thrown what you want on that package inside it. |
| 43 | +**JPAK** is made to be simple. You can use for any file you want. First, you need to create a JPAK package. |
| 44 | +You can use the python script called **packer.py** at `tools` folder. The sintax is simple, just create a folder and thrown what you want on that package inside it. |
44 | 45 |
|
45 | 46 | ```shellscript |
46 | | -python packer.py PackageFolder |
| 47 | +python packer1.py PackageFolder |
47 | 48 | ``` |
48 | | - |
49 | 49 | This will generate a file called `PackageFolder.jpak`, with that we can try it at web. |
50 | 50 |
|
51 | | -For the webpage, you need to create a JPAK.jpakloader object with a `file` parameter for it, pointing to the package file, and set a onload function. |
52 | | -```javascript |
53 | | -var Package = new JPAK.jpakloader({"file" : "PackageFolder.jpak"}); |
54 | | -Package.onload = function() { |
55 | | - alert("Package loaded!"); |
56 | | -}; |
57 | | -``` |
58 | | - |
59 | | -After that, you need to call the load function, to start loading the file. At the end of processing, it will execute the `onload` function (if it has been defined). |
| 51 | +Generating JPAK 2 Ext (JMS) Packages |
| 52 | +==================================== |
60 | 53 |
|
61 | | -```javascript |
62 | | -Package.Load(); |
| 54 | +For creating a **JMS** package you should use the `extpacker.js` inside the tools folder like below: |
| 55 | +```shellscript |
| 56 | +./extpacker.js package.jms volume.jds folder/* |
63 | 57 | ``` |
64 | 58 |
|
65 | | -By that, you are ready to use it and get the files. I will show two examples of how you can manage files. One image, and one text. |
| 59 | +This should generate a metadata file called `package.jms`, a data storage volume called `volume.jds` using contents of `folder`. Everytime you load this package, you will load the `package.jms` file, that will point out where are the volumes and which files are inside. |
66 | 60 |
|
67 | | -You have two functions to get files. |
68 | | - |
69 | | -```javascript |
70 | | -jpakloader.GetFile(path, type) |
71 | | -``` |
72 | | -Arguments: |
73 | | -* `path` -> That is the relative path to the package. If the file before packaging was at `PackageFolder/test.jpg` here you would put `/test.jpg` |
74 | | -* `type` -> The mimetype of the file. Used in construction of the blob. Defaults to `application/octet-stream` |
75 | | -* `returns` -> Returns a blob file with the contents of the file |
76 | | - |
77 | | -```javascript |
78 | | -jpakloader.GetFileURL(path, type) |
| 61 | +You can append data to a JMS by running the same command again with another volume: |
| 62 | +```shellscript |
| 63 | +./extpacker.js package.jms volume2.jds folder2/* |
79 | 64 | ``` |
80 | | -* Same as GetFile, but returns a local `URL` to the blob content. |
81 | 65 |
|
82 | | -So basicly, for images you can do something like: |
| 66 | +Using the Webloader |
| 67 | +=================== |
83 | 68 |
|
84 | | -```javascript |
85 | | -var imagetest = Package.GetFileURL("/test.jpg", "image/jpeg"); |
86 | | -$("body").append('<img src="'+imagetest+'">'); |
87 | | -``` |
| 69 | +When implementing the new Web Loader (for both JPAK1 and JMS) we decided to change the way it works to be more usefull and work for both files. This broke the compatibility with the older JPAK Loader, so if you are upgrading it, you will need to change how it works. |
88 | 70 |
|
89 | | -and you can do for HTML (text/plain) for example: |
| 71 | +First you need to initialize a loader by doing: |
90 | 72 |
|
91 | 73 | ```javascript |
92 | | -var testdothtml = Package.GetFile("/test.html", "text/html"); |
93 | | -var reader = new FileReader(); |
94 | | -reader.onloadend = function(evt) { |
95 | | - $("body").append(evt.target.result); |
96 | | -}; |
97 | | -reader.readAsText(testdothtml); |
| 74 | +var myJpakLoader = new JPAK.Loader({"file" : "packtest.jms"}); // you can do the same thing for a jpak file just by replacing the file name. |
98 | 75 | ``` |
99 | 76 |
|
100 | | - |
101 | | -Class |
102 | | -======== |
103 | | - |
104 | | -The **JPAK** script has a few features. It caches the already loaded blobs to reduce the memory load, for example. |
105 | | -Here are few functions for now: |
106 | | - |
| 77 | +Then you can make the loader start loading metadata and filling the object and use a promise to get the callback when its done. |
107 | 78 | ```javascript |
108 | | -jpakloader.ls(path) |
| 79 | +myJpakLoader.load().then(function() { |
| 80 | +// Called when its loaded |
| 81 | +}); |
109 | 82 | ``` |
110 | 83 |
|
111 | | -Lists the content of the path |
112 | | - |
113 | | -Arguments: |
114 | | -* `path` -> The path you want to list |
115 | | -* `returns` -> Returns an object `{ "dirs" : [ arrayofdirs ], "files" : [ arrayoffiles ], "error" : "An error message, if happens" }` |
116 | | - |
| 84 | +So after it is loaded, you can load files in the old loader fashion: |
117 | 85 | ```javascript |
118 | | -jpakloader.GetFile(path, type) |
| 86 | +myJpakLoader.load().then(function() { |
| 87 | +// Called when its loaded |
| 88 | + myJpakLoader.getFileURL("/img/python-logo-official.png", "image/png").then(function(data) { |
| 89 | + $("body").append('<BR>/img/python-logo-official.png: <BR><BR> <img src="'+data+'">'); |
| 90 | + console.log("Loaded /img/python-logo-official.png"); |
| 91 | + }); |
| 92 | +}); |
119 | 93 | ``` |
120 | 94 |
|
121 | | -Return a blob of the file |
122 | | - |
123 | | -Arguments: |
124 | | -* `path` -> The file path to get |
125 | | -* `type` -> The mime type. Defaults to **application/octet-binary** |
126 | | -* `returns` -> Returns an blob |
| 95 | +API |
| 96 | +=== |
127 | 97 |
|
| 98 | +You have about the same calls as the older loader, but in a promise way. |
128 | 99 | ```javascript |
129 | | -jpakloader.GetFileURL(path, type) |
| 100 | +myJpakLoader.getFile(path, type).then(function (data) { |
| 101 | + // data is a BLOB |
| 102 | +}); |
130 | 103 | ``` |
131 | | - |
132 | | -Return a Blob URL to embed as resource. |
133 | | - |
134 | 104 | Arguments: |
135 | | -* `path` -> The file path to get |
136 | | -* `type` -> The mime type. Defaults to **application/octet-binary** |
137 | | -* `returns` -> Returns an string containing the Blob Data URL |
| 105 | +* `path` -> That is the relative path to the package. If the file before packaging was at `PackageFolder/test.jpg` here you would put `/test.jpg` |
| 106 | +* `type` -> The mimetype of the file. Used in construction of the blob. Defaults to `application/octet-stream` |
138 | 107 |
|
139 | 108 | ```javascript |
140 | | -jpakloader.GetFileArrayBuffer(path, type) |
| 109 | +myJpakLoader.getFileURL(path, type).then(function(url) { |
| 110 | + // url is a URL to local blob content |
| 111 | +}); |
141 | 112 | ``` |
142 | 113 |
|
143 | | -Return an ArrayBuffer with contents of the file |
144 | | - |
145 | | -Arguments: |
146 | | -* `path` -> The file path to get |
147 | | -* `type` -> The mime type. Not used directly for this function, but for cache. Defaults to **application/octet-binary** |
148 | | -* `returns` -> Returns an ArrayBuffer with contents of the file |
149 | | - |
150 | | - |
| 114 | +So basicly, for images you can do something like: |
151 | 115 |
|
152 | 116 | ```javascript |
153 | | -jpakloader.GetBase64File(path, type) |
| 117 | +myJpakLoader.getFileURL("/test.jpg", "image/jpeg").then(function(url) { |
| 118 | + $("body").append('<img src="'+url+'">'); |
| 119 | +}); |
154 | 120 | ``` |
155 | 121 |
|
156 | | -Return a Base64 Encoded Data from the File |
157 | | - |
158 | | -Arguments: |
159 | | -* `path` -> The file path to get |
160 | | -* `type` -> The mime type. Not used directly for this function, but for cache. Defaults to **application/octet-binary** |
161 | | -* `returns` -> Returns an string of Base64 Encoded data. |
| 122 | +and you can do for HTML (text/plain) for example: |
162 | 123 |
|
163 | 124 | ```javascript |
164 | | -jpakloader.GetHTMLDataURIFile(path, type, encoding) |
| 125 | +myJpakLoader.getFile("/test.html", "text/html").then(function(data) { |
| 126 | + var reader = new FileReader(); |
| 127 | + reader.onloadend = function(evt) { |
| 128 | + $("body").append('<BR>/test.html:<BR><BR>'+evt.target.result); |
| 129 | + }; |
| 130 | + reader.readAsText(data); |
| 131 | +}); |
165 | 132 | ``` |
166 | 133 |
|
167 | | -Return a HTML Data URI to embed as resource. |
168 | | -This is useful if you want to hide the image load process inside the script, as the browser doesn`t make network requests. |
169 | | - |
170 | | -Arguments: |
171 | | -* `path` -> The file path to get |
172 | | -* `type` -> The mime type. Defaults to **application/octet-binary** |
173 | | -* `encoding` -> The Encoding of the file. *Optional* |
174 | | -* `returns` -> Returns an string of HTML Data URI in format: `data:[<MIME-type>][;charset=<encoding>][;base64],<data>` |
175 | | - |
176 | | -Events: |
177 | | -======== |
178 | | - |
179 | | -* `onload` -> Executed when the **jpackloader** ends loading the JPAK file |
180 | | -* `onprogress`-> Executed when new progress is available. It has one object argument `{"loaded":loadedbytes,"total":totalbytes,"percent": percentComplete}` |
181 | | -* `onerror` -> Executed when an error has ocurred. It has one object argument `{"text": errormessage, "errorcode": errorcode}` - The Error Code can be HTML error or `jpakloader` specific error. |
182 | | - |
183 | | -JPAK Loader Error Codes: |
184 | | -======== |
185 | | - |
186 | | -* 100->600 - HTML Status Code. Consult **RFC-2616** for details. |
187 | | -* 8000 - Wrong file magic |
| 134 | +Compiling the Library / Running Examples |
| 135 | +===================== |
| 136 | +There is a already minified version at `dist/jpak.min.js` but if you want to compile by yourself or run the examples locally, you can do: |
188 | 137 |
|
| 138 | +```shellscript |
| 139 | +npm install |
| 140 | +npm install -g bower |
| 141 | +npm install -g grunt-cli |
| 142 | +bower install |
| 143 | +sudo grunt dev |
| 144 | +``` |
189 | 145 |
|
190 | | -GZIP Support: |
191 | | -======== |
| 146 | +This should setup a local enviroment for testing the JPAK Library. Then you can open in your browser `http://localhost:8082/test/` to see the examples. |
192 | 147 |
|
193 | | -The GZIP Decompress support is a modified version of **zip.js** from https://github.com/jsxgraph/jsxgraph/ project. For now, the default behaviour of `jpakloader` is to check the `compressed` flag at file entry. If its true, it tryes to decompress the file. |
194 | | -For **zip.js** license, consult the file or the JSXGraph Github |
195 | | - |
196 | | -For compatible GZIPPing a file on Python you can do: |
197 | | -```python |
198 | | -import zlib |
199 | | -f = open("uncompressed", "rb") |
200 | | -data = f.read() |
201 | | -f.close() |
202 | | -data = zlib.compress(data, 9) # Level 9 is important |
203 | | -f = open("compressed", "wb") |
204 | | -f.write(data) |
205 | | -f.close() |
| 148 | +If you just want to build it, do the same as before, but instead `sudo grunt dev` do: |
| 149 | +```shellscript |
| 150 | +grunt concat uglify |
206 | 151 | ``` |
207 | 152 |
|
208 | | -* TODO on Tools: Add option to compress files on packer.py |
| 153 | +This will generate the minified version `jpak.min.js` and the non-minified version `jpak.js`. |
209 | 154 |
|
210 | 155 | C# JPAK Tool: |
211 | 156 | ======== |
|
0 commit comments