Open DanDaHahn opened 5 years ago
Hi @DanDaHahn, I just now added the ability for you to render your own model in the playground:
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
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.
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. 👍
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.
You only need to modify the JavaScript file 😃👍
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.
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?
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>
@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:
Currently the Playground is just one big module that needs to be broken apart.
@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 :(
@roduq yes, there are a few ways you can do this:
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.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/
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.
@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.
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.
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