Encoding.Tools is a web application that makes it easy to chain together various transformations on binary strings.
demo.mp4
The easiest and fastest way to use the application is the hosted version at https://encoding.tools/.
You can also run it locally if you want to use it offline. You need to have Node.js and NPM installed and cloned this repo.
Next, install the NPM dependencies. You only need to run this step once after the initial cloning of the repo, and once more after any updates.
npm installOnce the dependencies are installed, run this command to build the application.
npm run buildIn your browser, open the file public/index.html and it should operate locally just
like the hosted version.
If you want to modify Encoding.Tools' code, follow the steps above to get it running locally. Once that it is working, then run:
Once the dependencies are installed, start the server:
npm run devThe application will now be running on http://localhost:5000/. The server has live reloading, so everytime you edit and save a source file, it will automatically reload the application in your browser.
By default, the server will only respond to requests from localhost. To allow connections from other computers, edit the
sirvcommands in package.json to include the option--host 0.0.0.0.
The application is written in SvelteJS which is a Reactive framework that uses a compiler to make DOM updates lean and efficient. If you're new to Svelte, the following are good resources to start learning:
If you're using Visual Studio Code, you should install the official extension Svelte for VS Code. If you are using other editors you may need to install a plugin in order to get syntax highlighting and intellisense.
Gadgets are the core concept in Encoding.Tools. Each gadget is able to read an input stream of bytes, transform it in some way, and write the results to an output stream. Write a new gadget involves the following steps.
- (Optional) If your transform logic depends on an NPM package, install that package:
npm install --save-dev <PACKAGE> - (Optional) Create a new gadget family (gadgets are grouped by family in the toolbox)
- Copy the imports from one of the existing files, e.g.
src/gadgets/ChangeBaseGadget.js. - Create a
Base<Family>class that extendsBaseGadgetand overrides the constructor to set up the family name and CSS class. You may also want to set up the input and output ports in the constructor, if all gadgets in a family will have identical port setups.
- Copy the imports from one of the existing files, e.g.
- Add a new class to the chosen gadget family file (e.g.
src/gadgets/ChangeBaseGadget.js) that extends theBase<Family>class of the chosen gadget family. - Override the transform() method. This method should generally:
- Read from the gadget's input ports. Each input port has a
Bufferthat contains the data. - Update the components display state, setting it to
DisplayState.null(),DisplayState.error("error message"), orDisplayState.text("text to display"). - Write the transformed data as a
Bufferto the output ports.
- Read from the gadget's input ports. Each input port has a
- Register the new gadget in
GadgetRegistry.js, e.g.gadgetRegistry.register((...args) => new HexEncodeGadget(...args));
This application is licensed under the GNU General Public License version 3. See the LICENSE.md file included with this application for more information.
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent