Sandify Local Install

Stoli · February 4, 2024, 3:52pm

Before I enter npm hell, can someone tell me what the minimum version(s) of node I will need to run sandify locally? I want to put it on a box running CENTOS 7 and I don’t want to upgrade it. I believe it can support node v16.0.0. I know it can’t run v18 and later.

Stoli · February 4, 2024, 5:19pm

Got impatient and opened the gate…

Used node v 16.4.0

npm install went fine. No errors. 2 severity vulnerabilities…

npm audit fix … changed 2 packages. No errors.

npm start … No errors… VITE v4.5.2 server URL http://127.0.0.1:3000

Opened with browser… Blank screen, Infinite page loading…

Opened a second browser window to same …
Received the following:

Sorry! Something went wrong.

visibleEffects.findLast is not a function

And, my record for linux apps that failed to work on the first try is still … 100%

Any ideas?

Cheers

Stoli · February 4, 2024, 7:25pm

Never mind. I realized that the problem was with the browser - I was testing it with an old version of Firefox.

Doh!

jeffeb3 · February 4, 2024, 8:13pm

It should be pretty agnostic to browser type. I do sometimes get a blank screen on my test setup, but I haven’t seen anyone else, so I assumed it was something to do with my local storage, which gets cluttered as a dev.

There is a docker compose file inside. I run it like that so other nom/node versions don’t fight with it. I always forget the commands, so I pasted them in the docker compose file. You will need a recentish version of docker and docker compose (if your version of docker is old enough to not include compose).

Stoli · February 4, 2024, 8:38pm

Thanks. I finally got it working. It also took me a little while to figure out how to expose it outside the localhost machine.

vite gives a nice clear message on startup: use --host to expose

except

npm run --hosts

doesn’t work, but

npm run – --host

works.

oh - and I did notice a blank screen once on startup, so it’s not just your machine.

Stoli · February 5, 2024, 2:43am

Jeff,

Was hoping you could give me some advice before I head down a rabbit hole that has no bottom. I am writing a web app that is basically an extension of the fluidnc WebUI. It makes it easy to choose the work coordinates, a tool, transfer a gCode file, run it, then delete the file all with one or two taps on a tablet. I was also in the process of incorporating features that create gCode on the fly from text, svg and mathematical patterns. I stumbled upon Sandify and it occurred to me that Sandify does much of what I was starting to write. So I thought if I could incorporate sandify info the app, I could save a bunch of time. The problem is, my app is mostly javascript with a java backend that crunches font curves and such, and I have no experience with node.js and react so my learning curve may be a bit steep.

So, I was wondering if you think that is an easy thing or is it complicated? I am not asking you to do this, only if you think it is doable. I could probably get away with adding a few features like the ability to input arguments (like those in an .sdf file) via a GET or POST and have the app return a page with gcode, maybe an image of the preview window, etc. Not really anything new, but, for instance, returning the gcode in a web page response instead of having to download it in a file and setting the sdf parameters without needing to upload a file. Hopefully easy stuff once I figure out the structure of react??

Any thoughts on this?

jeffeb3 · February 5, 2024, 3:02am

Sandify uses react just for the UI. The core code is mostly written as libraries and the glue that calls the functions based on what is happening in react is redux. Filling the redux state and then calling the main vertex calculate function would return the vertices from the pattern without dealing with a UI.

It also always has the constraint of never lifting a pen. Most plotters and CNCs don’t have that constraint. Sandify is self limiting that way. So just adopting the majority of it probably won’t make sense.

The algorithms or math or library code that is useful might be:

The rectangular and polar limits. This actually took a lot of work to get right.
The font to vertices code. I started with a simple thing and Bob made the fancy text.
The effects, if you’re into that kind of thing. Specifically the transform but any of them should be quick to extract.

What I don’t see working easily is to just keep sandify intact and trying to call it like an api. I doubt it will be useable that way and any future updates will immediately break it. It is 100% JavaScript and runs client side. Node/npm is just how we manay the dependencies and “build” it for testing or production.

Here is an example. This is where the limits are enforced for rectangles. This code is called in Machine.js:

github.com

jeffeb3/sandify/blob/3b4d20b31e903c5ea40a8e7f37d20c821468cb23/src/features/machines/RectMachine.js#L270


      
                n = i
              }
            })
          
            return n
          }
          
          // The guts of logic for this limits enforcer. It will take a single line (defined by
          // start and end) and if the line goes out of bounds, returns the vertices around the
          // outside edge to follow around without messing up the shape of the vertices.
          clipSegment(start, end) {
            const quadrantStart = this.pointLocation(start)
            const quadrantEnd = this.pointLocation(end)
          
            if (quadrantStart === 0b0000 && quadrantEnd === 0b0000) {
              // The line is inside the boundaries
              return [start, end]
            }
          
            if (quadrantStart === quadrantEnd) {
              // We are in the same box, and we are out of bounds.

This where the fancy text is turned into vertices:

github.com

jeffeb3/sandify/blob/3b4d20b31e903c5ea40a8e7f37d20c821468cb23/src/features/shapes/FancyText.js#L75


      
                fancyText: "Sandify",
                fancyFont: "Garamond",
                fancyAlignment: "left",
                fancyConnectLines: "inside",
                fancyLineSpacing: 1.0,
                maintainAspectRatio: true,
              },
            }
          }
          
          getVertices(state) {
            const font = getFont(state.shape.fancyFont)
          
            if (font) {
              let words = state.shape.fancyText
                .split("\n")
                .filter((word) => word.length > 0)
              if (words.length === 0) {
                return [new Victor(0, 0)]
              }

But I’m not an expert in this either. You may see a bridge to success that I can’t. So don’t let me discourage you.

Stoli · February 5, 2024, 2:42pm

Hmmm. It wasn’t occurring to me that there is no server side once sandify is loaded. I guess that should have been obvious since that is what node.js actually does. Right?

Anyways, it may be fairly simple then. I’d have to add some handlers in sandify that expose the functions that set parameters and generate vertices, so it would have to be a local instance with some additional scripts. Then just load the modded sandify into an iframe on the same web page as the rest of my app. Then call the handlers from my app. There is a Cross Origin barrier there, since my app and sandify will originate from different ports on the server, but I believe there is an API that can get around that. The z-axis stuff isn’t a big deal for my application, but if I wanted to add a feature to change pens mid drawing, inserting something into the gcode to enable that shouldn’t be too difficult.

I think that might work.

Thanks again for your time.

jeffeb3 · February 5, 2024, 6:32pm

If you’re running javascript already, you can just copy the files into your project and reuse them, can’t you?

Stoli · February 5, 2024, 9:24pm

Well, I wanted to keep your UI intact and I thought there was some magic happening in node.js, but if it is as simple as including all the sandify javascript files in a web page and somehow sticking the UI inside a div tag, then I guess that is the way to go. Is it really that simple?

So then the questions are -

What is the best way to package all the javascript files?
What other files/libraries are needed? React, redux …
What is the code to display the app inside a div? Do I need vite?

jeffeb3 · February 5, 2024, 11:48pm

Well, I’m not really a JavaScript expert. My cup o tea is C++. So I’m not sure.

The top level “App” tag is delivered by javascript, and it is here:

github.com

jeffeb3/sandify/blob/3b4d20b31e903c5ea40a8e7f37d20c821468cb23/src/features/app/App.js#L14


      
          import { ToastContainer } from "react-toastify"
          import { ErrorBoundary } from "react-error-boundary"
          import PreviewManager from "@/features/preview/PreviewManager"
          import Header from "./Header"
          import About from "./About"
          import Sidebar from "./Sidebar"
          import store from "./store"
          import ErrorFallback from "./ErrorFallback"
          import "./App.scss"
          
          const App = () => {
            const [eventKey, setEventKey] = useState("patterns")
          
            return (
              <Provider store={store}>
                <ErrorBoundary FallbackComponent={ErrorFallback}>
                  <div className="App">
                    <ToastContainer
                      position="top-center"
                      autoClose={5000}
                      hideProgressBar={true}

That is created by the JavaScript in index.js in src.

This is JS. So there are a lot of dependencies:

github.com

jeffeb3/sandify/blob/3b4d20b31e903c5ea40a8e7f37d20c821468cb23/package.json

{
  "name": "sandify",
  "homepage": "https://sandify.org",
  "version": "1.0.0",
  "private": true,
  "dependencies": {
    "@dnd-kit/core": "^6.0.8",
    "@dnd-kit/modifiers": "^6.0.1",
    "@dnd-kit/sortable": "^7.0.2",
    "@reduxjs/toolkit": "^1.9.5",
    "array-move": "^4.0.0",
    "bootstrap": "^5.3.1",
    "buffer": "^6.0.3",
    "canvas": "^2.11.2",
    "color": "^4.2.3",
    "convexhull-js": "^1.0.0",
    "core-js": "^3.11.0",
    "curve-matcher": "^1.1.1",
    "d3": "^7.6.1",
    "d3-fisheye": "^2.0.1",

This file has been truncated. show original

Vite is only in the dev dependencies. It isn’t needed for deployment. If you do something like npm build it will do the deployment to a local folder. You can see what it does. It moves all the dependencies to CDN values, it combines all the code to one or two pages and minifies them (which makes them annoying to read, but improves loading times).

Honestly, this stuff is all at the edge of my understanding. I started with some help from James and made an example react bootstrap app. I filled in some things and Bob and I have refactored it several times since then. I could maybe fumble through it with some stack overflowing to push it together, but I couldn’t describe the right steps.

Stoli · February 6, 2024, 12:57am

I feel that everything these days is at the edge of my understanding.

I’m just an old guy with a engineer’s brain and a little bit of coding experience that can usually figure things out with enough time and a little help from Google and ChatGPT. Your Sandify project is really amazing. I can’t emphasize that enough. I really appreciate the time spent on the code development and I’m sure all the ZenXY builders do as well. I spent hours today looking at the different sand table builds. I think there is definitely one in my future.