Using maker.js without the CodeMirror-Editor

DanDaHahn commented 5 years ago

Hello Dan. I came across makerjs and have a question. Before I ask the question, I want to let you know that I’am still a „Beginner“ at programming. I hope the answer to my question isn’t to obvisouly. My question is: Is it possible to use your makerjs example as it is in your github download just without the CodeMirror-JavaScript-Editor? My goal is it to display a .dxf in the viewer. I'am going to parse a .dxf into a .json and make it readable for makerjs. If I try to cut out the editor nothing works. It seems like it’s hard to imagine without it, or am I wrong? At the beginning I thought that it would be easy to cut the editor. I thought it just reads out of the editor and that’s it – seems like my guess was wrong. It seems like it is a relatively important component. Maybe I‘am totally wrong. If so, perhaps you can give me a hint how to cut out the editor and hand over the information within a function (for example if I just put an example makerjs-object in the code and read it out and display it in the viewer).

English isn’t my native language. I hope you’ll understand it and maybe give me a hint.

Best regards

danmarshall commented 5 years ago

Hi @DanDaHahn, I just now added the ability for you to render your own model in the playground:

Visit the Maker.js playground app
Open your browser's JavaScript console (F12)
The new function is MakerJsPlayground.setProcessedModel, for example you can try:
```
MakerJsPlayground.setProcessedModel(new makerjs.models.Star(5,100))
```

I think the easiest thing might be for you to just hide the editor with CSS. See the original stylesheet. And tweak it until you can't see the editor. Resize your browser to make sure it is invisible in large and small window sizes. Hope this helps! -Dan

DanDaHahn commented 5 years ago

Thank you for your responds Dan! I'am grateful that you try to help and for adding this ability to the playground. The issue is that "hiding" the editor isn't a solution I probably can consider. We would like to embed the viewer on a website. Some have concerns that it could cause security problems for example. There is no "easy" way to get rid of the editor, right? If so I probably have to build the viewer with you library. If I get it right, we are able to also use your programm logic under the license conditons, or? So I could reconstruct your viewer if so.

danmarshall commented 5 years ago

Hi @DanDaHahn , you probably can just take the JavaScript and remove bits about the editor one by one. I'm sure that it will work without it, if you keep testing your changes along the way.

This project has an Apache 2.0 license which permits you to make changes. Just make sure to keep a copy of the license with your changes. 👍

DanDaHahn commented 5 years ago

Thanks for your suggestion Dan. So only removing JavaScript could do the trick? If I remember it right I got sometimes some issues where I had to remove something in the TypeScript - file. So far I have no experience with TypeScript.

danmarshall commented 5 years ago

You only need to modify the JavaScript file 😃👍

DanDaHahn commented 5 years ago

Thank you Dan. You were right. I did something wrong at the beginning. I'am glad that you could assure me that only the JavaScript file had to be modified.

mrbluecoat commented 5 years ago

I'm also interested in this use case. I'd like to import an SVG path and display it in the web page with the blueprint, zoom, pan, and fit-to-window capabilities:

example

I've been taking playground's index.html and slowly removing elements/js etc but there's still a lot of boilerplate and codemirror references to remove and wondered if there was a ready-made version with just the GUI available?

mrbluecoat commented 5 years ago

Here's a super-ugly hack that throws a couple console errors, isn't resize-friendly, doesn't trigger a measurements calculation, and doesn't fill the entire viewport height but it might give you a sense of an approximation of my goal:

<!DOCTYPE html>
<html>
<head>
    <title>Maker.js Playground</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">

    <link href="css/playground.css" rel="stylesheet" />
    <script src="../external/pep/pep.js"></script>
    <script src="../external/marked/marked.js"></script>
    <script src="../external/bezier-js/bezier.js"></script>
    <script src="../external/opentype/opentype.js"></script>

    <script src="../target/js/browser.maker.js"></script>
    <script>
        var makerjs = require('makerjs');
    </script>

    <script src="js/iexport.js"></script>
    <script src="js/pointer.js"></script>
    <script src="../fonts/fonts.js"></script>
    <script src="js/fontloader.js"></script>
    <script src="js/playground.js"></script>
    <script src="js/format-options.js"></script>
    <script>
        //config
        MakerJsPlayground.relativePath = '../demos/js/';
        MakerJsPlayground.fontDir = '../fonts/';
    </script>

</head>
<body class="no-notes collapse-annotation collapse-flow collapse-insert-menu">
    <main>  
        <section id="blueprint-canvas">
            <svg id="grid">
                <defs>
                    <pattern id="pattern1" x="0" y="0" width=".1" height=".1">
                        <line x1="0" y1="0" x2="0" y2="100%" class="grid-line-1"></line>
                        <line x1="0" y1="0" x2="100%" y2="0" class="grid-line-1"></line>
                    </pattern>
                    <pattern id="pattern10" x="0" y="0" width="1" height="1">
                        <line x1="0" y1="0" x2="0" y2="100%" class="grid-line-10"></line>
                        <line x1="0" y1="0" x2="100%" y2="0" class="grid-line-10"></line>
                    </pattern>
                    <pattern id="gridPattern" x="0" y="0" width="100" height="100" patternUnits="userSpaceOnUse" patternTransform="translate(0,0)">
                        <rect id="gridPatternFill" fill="url(#pattern1)" width="100" height="100" x="0" y="0"></rect>
                        <rect fill="url(#pattern10)" width="100%" height="100%" x="0" y="0"></rect>
                    </pattern>
                </defs>
                <rect fill="url(#gridPattern)" width="100%" height="100%" x="0" y="0"></rect>
                <g id="crosshairs">
                    <line x1="-100%" x2="100%" y1="0" y2="0"></line>
                    <line x1="0" x2="0" y1="-100%" y2="100%"></line>
                </g>
            </svg>

            <div id="view-params">
                <div id="view" touch-action="none" class="noselect">
                    <div id="view-svg-container"></div>
                    <svg id="pointers" xmlns="http://www.w3.org/2000/svg"></svg>
                    <div id="touch-shield"></div>
                </div>
                <div id="rendering-options-menu" class="noselect">
                    <div class="view-controls">
                        <br><div><label><input id="check-fit-on-screen" type="checkbox" checked onclick="if (this.checked) { MakerJsPlayground.fitOnScreen(); } else { MakerJsPlayground.fitNatural(); } MakerJsPlayground.render();" /> fit on screen <span id="zoom-display" class="zoom-unit"></span></label></div>
                        <div><label><input id="check-show-origin" type="checkbox" checked onclick="MakerJsPlayground.toggleClass('collapse-origin'); MakerJsPlayground.updateZoomScale();" /> show grid <span id="grid-unit" class="zoom-unit"></span></label></div>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <script>
        setTimeout(function(){
            var pathData = "M 95 35 L 59 35 L 48 0 L 36 35 L 0 35 L 29 56 L 18 90 L 48 69 L 77 90 L 66 56 Z";
            var model = makerjs.importer.fromSVGPathData(pathData);
            MakerJsPlayground.setProcessedModel(makerjs.model.center(model));
        }, 100);
    </script>
</body>
</html>

danmarshall commented 5 years ago

@mrbluecoat thanks for the examples! I recently refactored the repo to be a monorepo so that modular development would be easier. The goal is to make each of these available as separate components:

zoomable SVG area
input parameters

Currently the Playground is just one big module that needs to be broken apart.

roduq commented 5 years ago

@danmarshall Could you please help me and explain how to implement your own code that I created in playground in such a way that when opening the HTML with playground it is already loaded and ready for customization? It is probably obivious but I'm having hard time with it :(

danmarshall commented 5 years ago

@roduq yes, there are a few ways you can do this:

See issue #220 about loading an external script, by passing a script url as a prameter. Here is an example: http://microsoft.github.io/maker.js/playground/?script=https://gist.githubusercontent.com/danmarshall/8eb60f82ca765f477f0bc3a73966317a/raw/ebfeb4fa2db63726f6e9d30580f1df9f83b54ca1/heart.js - caveats are that your server must accept cross-origin requests, and the Playground will load with the "external script" warning before showing your model.
Add your model to the gallery here - if you are comfortable shaing your code and your model is useful to others. Add your code to this folder and send a pull request.
Fork this repo, and enable GitHub pages. You can run your own copy of Maker.js for free. Here is an example of that running with my own username: https://danmarshall.github.io/maker.js/ - then you can modify your own gallery as you like.
Ideally we should break out playground into reusable components so that you can create your own page... this will require some work.

ghost commented 4 years ago

Hello, I also need the beautiful blueprint for an ongoing project. So I made this little module. If it helps :) https://onlfait.github.io/svg-blueprint/docs/

Bersaelor commented 4 years ago

Hey, @lautr3k @danmarshall , I really loved both your work !

So I ended up building a react-component with "blueprint, zoom, pan, and fit-to-window" functionality: https://github.com/Bersaelor/react-blueprint-svg Would love to know what you think?

I was hoping a library that presents maker.js models nicely in a react web app will allow for a wider audience for makerjs.

At looc.io we have a react based CMS, where clients upload 3D objects that we show in AR client apps. Then we modify uploaded CNC shapes and put out a modified shape that goes to the milling machine.

danmarshall commented 4 years ago

@lautr3k @Bersaelor great to see you guys modularizing this! The Playground is in dire need of modularization, I originally wrote it as a small proof of concept, then added one thing after another. This was before there was great tooling for components, which we have now in 2020. Would love to collaborate with your componentry, perhaps use it in the new playground.

Bersaelor commented 4 years ago

That would be great, although I should admit I'm pretty new to typescript and react, been mostly working with Swift and C-like languages in past years.

The component is working in the example I put in the repo, but I do still have to work out some kinks when embedding it as a small component of a larger react app. Hoping to finish this work in the next weeks.

microsoft / maker.js

Using maker.js without the CodeMirror-Editor #380