Code Monkey home page Code Monkey logo

svg_chok's Introduction

SVGchok

A micro app written in Crystal to visualise Sverchok SVG output.

Installation

  1. Install Crystal: https://crystal-lang.org/install/
  2. Clone the repo: git clone https://github.com/wout/svg_chok
  3. Cd into the repo: cd svg_chok
  4. Run the app: shards run

Note: On the first run, the app will install the required dependencies.

Usage

When the app is booted, the svgs directory is created (configurable in config.yml). Make sure Sverchok is writing it's SVG output to that dir. It can either be directly into it or in a sub-directory if you prefer to organise your files.

The app will serve the SVGs on http://0.0.0.0:4141. Any changes to files in the svgs directory will immediately be reflected on the frontend of this app.

Why this app?

By default, Sverchok creates a HTML file which you can load into your browser. This file has some embedded JavaScript to reload the SVG file using a configurable interval (every 250ms by default). There are two drawbacks with this setup:

  1. There's a lot of unnecessary rendering of the SVG file, which may become an issue with complex scenes.
  2. Since it's just a file loaded into your browser, the output can't run through a HTTP tunnel (e.g. NGrok) to display the output on other devices.

While both arguments are not necessarily applicable to all use cases, another benefit is a nicer layout and a browsable index of all SVGs, with previews. So either way, it's always a better experience than using the default HTML file.

Contributing

  1. Fork it (https://github.com/wout/svg_chok/fork)
  2. Create your feature branch (git checkout -b my-new-feature)
  3. Commit your changes (git commit -am 'feat: add some feature')
  4. Push to the branch (git push origin my-new-feature)
  5. Create a new Pull Request

Contributors

  • Wout - creator and maintainer

svg_chok's People

Contributors

wout avatar

Stargazers

 avatar

Watchers

 avatar

svg_chok's Issues

Add fuzzy search

With many files, finding the one you're working on is sometimes difficult. Add a search in the index to find files quickly.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.