zoomoid / demo-man Goto Github PK

The API responds with an HTTP 500 Error without further details in the logs. Need to investigate on that.

SVG rectangles are largely templatable and also require configuration files to be present.
As we mount the config files into the container using Kubernetes, we provide default configurations for usage outside of Kubernetes or without a proper ConfigMap.

The config files are JSON data which nodeJS can read directly using require / import, hence we do not need to emply JSON readers.

A example config map looks like this:

apiVersion: v1
kind: ConfigMap
metadata:
  name: demo-wave-man-config
  namespace: web
  labels:
    app: demo-man
    svc: wave-man
data:
  small.json: |
    {
      "step_width": 16,
      "height": 200,
      "color": "{{.color}}",
      "rounded": 8,
      "steps": 32,
      "gap": 7,
      "mode": "rounded_avg",
      "align": "center",
      "sr": 48000,
      "mono": true,
      "scale": 1,
      "dpi": 600,
      "preserveAspectRatio": "none" 
    }
  full.json: |
    {
      "step_width": 20,
      "height": 200,
      "color": "{{.color}}",
      "rounded": 10,
      "steps": 64,
      "gap": 4,
      "mode": "rounded_avg",
      "align": "center",
      "sr": 48000,
      "mono": true,
      "scale": 1,
      "dpi": 600,
      "preserveAspectRatio": "none"
    }

Note that the color property is used to template the color such that the API server can replace the escape string with whatever color the user requests.

Most information for the actual rectangles can be derived from the config map.

The rendering logic for the SVG rectangles should look roughly like this:

1. Take an already transformed chunk from the queue of chunks. The chunks carry both the chunks value as well as the index, such that we can derive the X position
2. Calculate the X position using the index:x := i * config.step_width
   3 Calculate the Y position of the rectangle: This depends on the mode we are in: For bottom mode, the Y position is
   y := (1 - chunk) * config.height, while for center mode, the Y position is y := (0.5 * config.height) - (0.5 * chunk * config.height), as we need to center the rectangle in the canvas.
3. Calculate the width of the rectangle: width := config.step_width - config.gap
4. Calculate the height of the rectangle: height := config.height * chunk

After this, append the rectangle to the SVG string already constructed.

Packages needed at least:

• music-metadata
• eslint
• prettier
• express

This time, we construct the SVG by hand, therefore, we do not need a package to create a canvas and add elements to it,
as we only create primitive rectangles with incremental x values