Add: Ping1D widget

[RaulTrombin]

Add sonar1d components.

└── widgets
├── sonar1d
│ ├── Ping1D_loader.vue
│ ├── Ping1D.vue
│ ├── WaterfallDisplay.vue
│ └── WaterfallShader.vue
└── WebsocketClient.vue

Ping1D is specific for our device, Waterfall components are generic and can be shared reused.
Ping1D_loader is used to load component on TryOut menu.

Need:

• Add frontend build #24

Preview:
https://github.com/user-attachments/assets/7fdb8b45-91de-45e1-961d-f06608ec9e55

Added Ping-view original color palletes plus 4 new ones,

users can chose the colors of components as well, made this thinking on custom options and acessibility for color blindness. (Maybe we can add some special modes for this)

  props: {
    width: { type: Number, default: 500 },
    height: { type: Number, default: 400 },
    maxDepth: { type: Number, default: 200 },
    minDepth: { type: Number, default: 0 },
    columnCount: { type: Number, default: 200 },
    sensorData: { type: Array, default: () => [] },
    colorPalette: { type: String, default: "ocean" },
    currentDepth: { type: Number, default: 0 },
    accuracy: { type: Number, default: 0 },
    confidence: { type: Number, default: 0 },
    depthLineColor: { type: String, default: "#FFFFFF" },
    depthTextColor: { type: String, default: "#FFFFFF" },
    currentDepthColor: { type: String, default: "#FFFF00" },
    confidenceColor: { type: String, default: "#00FF00" },
    textBackground: { type: String, default: "rgba(0, 0, 0, 0.5)" },
    depthArrowColor: { type: String, default: "#FF0000" },
    tickCount: { type: Number, default: 5 },
  },