Skip to content

Commit 55e1a3c

Browse files
committed
Organization of the repository
* Updated README.md to new WebLoader and removed JSDocs (Fix #17) * Added dist folder with the latest version of the library * Removed old library and merged. (Fix #7) * Renamed Examples in test folder
1 parent 22e5f06 commit 55e1a3c

16 files changed

Lines changed: 4010 additions & 3927 deletions

.gitignore

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,2 @@
11
node_modules
22
3rdparty
3-
dist

README.md

Lines changed: 94 additions & 149 deletions
Original file line numberDiff line numberDiff line change
@@ -1,211 +1,156 @@
1-
_ ____ _ _ __ _ ___
2-
| | _ \ / \ | |/ / __ _/ | / _ \
3-
_ | | |_) / _ \ | ' / \ \ / / || | | |
4-
| |_| | __/ ___ \| . \ \ V /| || |_| |
5-
\___/|_| /_/ \_\_|\_\ \_/ |_(_)___/
6-
1+
_ ____ _ _ __ ____ ___
2+
| | _ \ / \ | |/ / __ _|___ \ / _ \
3+
_ | | |_) / _ \ | ' / \ \ / / __) || | | |
4+
| |_| | __/ ___ \| . \ \ V / / __/ | |_| |
5+
\___/|_| /_/ \_\_|\_\ \_/ |_____(_)___/
6+
77
Description
8-
========
8+
===========
99

1010
**JPAK** is a multi-use Javascript Package System, developed for loading several files at once with only one package.
1111

1212
For what this can be used?
13-
========
13+
==========================
1414

1515
**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.
1616

1717
What is done
1818
========
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
2830

2931
TODO
3032
========
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
4039

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+
=============
4242

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.
4445

4546
```shellscript
46-
python packer.py PackageFolder
47+
python packer1.py PackageFolder
4748
```
48-
4949
This will generate a file called `PackageFolder.jpak`, with that we can try it at web.
5050

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+
====================================
6053

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/*
6357
```
6458

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.
6660

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/*
7964
```
80-
* Same as GetFile, but returns a local `URL` to the blob content.
8165

82-
So basicly, for images you can do something like:
66+
Using the Webloader
67+
===================
8368

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.
8870

89-
and you can do for HTML (text/plain) for example:
71+
First you need to initialize a loader by doing:
9072

9173
```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.
9875
```
9976

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.
10778
```javascript
108-
jpakloader.ls(path)
79+
myJpakLoader.load().then(function() {
80+
// Called when its loaded
81+
});
10982
```
11083

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:
11785
```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+
});
11993
```
12094

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+
===
12797

98+
You have about the same calls as the older loader, but in a promise way.
12899
```javascript
129-
jpakloader.GetFileURL(path, type)
100+
myJpakLoader.getFile(path, type).then(function (data) {
101+
// data is a BLOB
102+
});
130103
```
131-
132-
Return a Blob URL to embed as resource.
133-
134104
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`
138107

139108
```javascript
140-
jpakloader.GetFileArrayBuffer(path, type)
109+
myJpakLoader.getFileURL(path, type).then(function(url) {
110+
// url is a URL to local blob content
111+
});
141112
```
142113

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:
151115

152116
```javascript
153-
jpakloader.GetBase64File(path, type)
117+
myJpakLoader.getFileURL("/test.jpg", "image/jpeg").then(function(url) {
118+
$("body").append('<img src="'+url+'">');
119+
});
154120
```
155121

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:
162123

163124
```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+
});
165132
```
166133

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:
188137

138+
```shellscript
139+
npm install
140+
npm install -g bower
141+
npm install -g grunt-cli
142+
bower install
143+
sudo grunt dev
144+
```
189145

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.
192147

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
206151
```
207152

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`.
209154

210155
C# JPAK Tool:
211156
========

0 commit comments

Comments
 (0)