Hide menu
Step 2. Prepare JT file for Web Toolkit

Any file to be rendered with the help of CAD Exchanger Web Toolkit needs to be converted into a web-friendly format CDXFB. This can be done with the help of CAD Exchanger CLI, SDK or Cloud API. In this tutorial, we use CAD Exchanger CLI for conversions and thumbnail generation.

Installing CAD Exchanger

CAD Exchanger CLI is delivered as a part of CAD Exchanger GUI package. You can install the latest version from the site.

Generating CDXFB file

In our tutorial we will use Radial_Engine.jt file which should be copied to data/models folder. Use following command to convert the model to CDXFB format:

On Windows:

"C:\Program Files\CAD Exchanger\bin\ExchangerConv.exe" ^
-i data\models\Radial_Engine.jt ^
-e data\cdxfb\Radial_Engine.jt.cdxfb

On Linux:

"<CAD Exchanger installation dir>/bin/ExchangerCli.sh" \
-i data/models/Radial_Engine.jt \
-e data/cdxfb/Radial_Engine.jt.cdxfb

Generation PNG thumbnail

In our tutorial, we also using a thumbnail as a preview of the 3D file. For that, CLI must be invoked with additional output format PNG:

On Windows:

"C:\Program Files\CAD Exchanger\bin\ExchangerConv.exe" ^
-i data\models\Radial_Engine.jt ^
-e data\thumbnails\Radial_Engine.jt.png ^
-s data\settings.ini

On Linux:

"<CAD Exchanger installation dir>/bin/ExchangerCli.sh" \
-i data/models/Radial_Engine.jt \
-e data/thumbnails/Radial_Engine.jt.png \
-s data/settings.ini

We will use following settings for thumbnail generation:

data/settings.ini

[%7B7299022c-2011-4b30-962c-caaa39cbcb05%7D]
width=300
height=300
bgcolor=#f5f5f5
cameraprojection=perspective
displaymode=shaded

Refer to CLI documentation for details on how to generate preferred thumbnails (size, camera position, display mode, etc).

Note: CAD Exchanger CLI allows converting to CDXFB format and generating thumbnail in one call. Just specify multiple -e <path> options.

Displaying thumbnail on start page

Finally, we should also update the start page to display correct thumbnail and file name.

index.html

<body>
<div class="model-container">
<a class="model-card" href="viewer.html">
- <img class="card-image" src="data/thumbnails/Model.jt.png">
- <h4 class="card-title">Model.jt</h4>
+ <img class="card-image" src="data/thumbnails/Radial_Engine.jt.png">
+ <h4 class="card-title">Radial_Engine.jt</h4>
</a>
</div>
</body>

With that, we should see Radial_Engine.jt model name and thumbnail on the start page: