Using maker.js without the CodeMirror-Editor #380

DanDaHahn · 2018-12-04T09:48:01Z

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 · 2018-12-04T19:39:44Z

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 · 2018-12-07T13:46:24Z

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 · 2018-12-07T18:48:02Z

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 · 2018-12-10T09:35:31Z

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 · 2018-12-10T18:46:32Z

You only need to modify the JavaScript file 😃👍

DanDaHahn · 2018-12-11T15:22:04Z

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 · 2018-12-15T20:57:19Z

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:

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 · 2018-12-15T23:39:13Z

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 · 2018-12-16T00:40:02Z

@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 · 2019-03-16T19:10:12Z

@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 · 2019-03-18T19:25:49Z

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

See issue Link to external js file #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 · 2019-11-10T14:20:12Z

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 · 2020-02-07T15:01:00Z

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 · 2020-02-07T21:05:49Z

@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 · 2020-02-07T21:11:17Z

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.

danmarshall mentioned this issue Mar 19, 2019

Can you load your own models into the playground? #396

Closed

danmarshall mentioned this issue Apr 23, 2019

How to create in makerjs create a grid and scale in the documentation? #398

Open

yertto mentioned this issue Jan 27, 2020

Dynamically modifying the range limits of a metaParameter #450

Open

danmarshall mentioned this issue Feb 17, 2020

Trying to add Maker.JS to Wordpres... #454

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Using maker.js without the CodeMirror-Editor #380

Using maker.js without the CodeMirror-Editor #380

DanDaHahn commented Dec 4, 2018

danmarshall commented Dec 4, 2018

DanDaHahn commented Dec 7, 2018

danmarshall commented Dec 7, 2018 •

edited

Loading

DanDaHahn commented Dec 10, 2018

danmarshall commented Dec 10, 2018

DanDaHahn commented Dec 11, 2018

mrbluecoat commented Dec 15, 2018 •

edited

Loading

mrbluecoat commented Dec 15, 2018

danmarshall commented Dec 16, 2018 •

edited

Loading

roduq commented Mar 16, 2019

danmarshall commented Mar 18, 2019

ghost commented Nov 10, 2019

Bersaelor commented Feb 7, 2020

danmarshall commented Feb 7, 2020

Bersaelor commented Feb 7, 2020

Using maker.js without the CodeMirror-Editor #380

Using maker.js without the CodeMirror-Editor #380

Comments

DanDaHahn commented Dec 4, 2018

danmarshall commented Dec 4, 2018

DanDaHahn commented Dec 7, 2018

danmarshall commented Dec 7, 2018 • edited Loading

DanDaHahn commented Dec 10, 2018

danmarshall commented Dec 10, 2018

DanDaHahn commented Dec 11, 2018

mrbluecoat commented Dec 15, 2018 • edited Loading

mrbluecoat commented Dec 15, 2018

danmarshall commented Dec 16, 2018 • edited Loading

roduq commented Mar 16, 2019

danmarshall commented Mar 18, 2019

ghost commented Nov 10, 2019

Bersaelor commented Feb 7, 2020

danmarshall commented Feb 7, 2020

Bersaelor commented Feb 7, 2020

danmarshall commented Dec 7, 2018 •

edited

Loading

mrbluecoat commented Dec 15, 2018 •

edited

Loading

danmarshall commented Dec 16, 2018 •

edited

Loading