Thank you for choosing CompassCAD Core for your embedded needs! Ready to make your next generation service or software a step up in which CAD is involved. No worries, I’m here to help. Let’s get started.
CompassCAD Core requires and depends on at least JQuery 2. In this example, I will use JQuery 3. Any version of JQuery is supported. By adding this line of code to the <head>
section, you are ready to start.
<script src="<https://code.jquery.com/jquery-3.7.1.js>" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
To prevent further bugs that output unexpectedly, you would have to download the script. Starting from v1.2.0, a corefile zip will be released here. Of course you have to extract it. For the best CAD experience, please import the font real-newstroke
into your CSS file as shown.
@font-face {
font-family: "real-newstroke";
src: url("<https://raw.githubusercontent.com/zeankundev/CompassCAD/web/assets/newstroke.ttf>");
}
Don’t worry, if you are not satisfied with the font, you can change the font on the renderer source file.
During extraction, I’d recommend you putting the source files in the engine
folder. A folder other than engine
is okay, as long as the path is reachable. Your folder structure should look like this:
Here comes the fun part; the core initialization. Put this on the <body>
part of the document.
<!-- Required components -->
<script src="./engine/ComponentHandler.js"></script>
<script src="./engine/GraphicsRenderer.js"></script>
<script src="./engine/InputHandler.js"></script>
<script src="./engine/LogicDisplay.js"></script>
<!-- Optional components -->
<script src="./engine/MiscellaneousShapes.js"></script>
<script src="./engine/SVGExporter.js"></script>
ComponentHandler.js
handles all of the components and how they must be managed.GraphicsRenderer.js
is the main script and the one that handles the rendering. All calls made towards this script that are part of other components will be forwarded and using the renderer’s shared instance.InputHandler.js
handles all of the keyboard and mouse inputs (e.g. keyboard input and mouse input)