rainSPOT Usage Examples

const container_svg_1 = document.getElementById('container_svg_1');
const rainSpot_svg_1_Data = '3222333223222322222222222222222232222223339222232'
let rainSPOT_svg_1 = create_rainSPOT_SVG({inputString: rainSpot_svg_1_Data});
container_svg_1.appendChild(rainSPOT_svg_1);
  

const container_canvas_1 = document.getElementById('container_canvas_1');
const rainSpot_canvas_1_Data = '3222333223222322222222222222222232222223339222232'
let rainSPOT_canvas_1 = create_rainSPOT_Canvas({inputString: rainSpot_canvas_1_Data});
container_canvas_1.appendChild(rainSPOT_canvas_1);
  

const options_svg_2 = {
  canvasSize: 140,
  useCSS: false,
  colorPalette: {
    0: 'rgba(255 255 255 / 1)',
    1: '#999999',
    2: '#666666',
    3: '#333333',
    9: '#cccccc'
  },
  rangeRings: {
    enabled: true,
    colors: {
      1: 'rgba(0 0 0 / 0)',
      3: 'rgba(0 0 0 / 1)',
      5: 'rgba(0 0 0 / 1)',
      7: 'rgba(0 0 0 / 0)'
    },
    strokeWidth: 3
  },
  crossHairs: {
    enabled: false,
    style: 'brackets',
    color: 'rgba(0 0 0 / 1)',
    strokeWidth: 3
  }
};
const container_svg_2 = document.getElementById('container_svg_2');
const rainSpot_svg_2_Data = '9111111991122211122221111122111111199000110010111'
let rainSPOT_svg_2 = create_rainSPOT_SVG({inputString: rainSpot_svg_2_Data, options: options_svg_2});
container_svg_2.appendChild(rainSPOT_svg_2);
  

const options_canvas_2 = {
  canvasSize: 140,
  useCSS: false,
  colorPalette: {
    0: 'rgba(255 255 255 / 0.5)', // transparent
    1: '#13eefc', // light blue 0.2mm - 1.5mm
    2: '#3aaadc', // blue 1.5mm - 5mm
    3: '#1774c4', // dark blue > 5mm
    9: '#22d690' // green 0.02mm - 02.mm
  },
  rangeRings: {
    enabled: true,
    colors: {
      1: 'rgba(255 0 0 / 1)',
      3: 'rgba(0 255 0 / 1)',
      5: 'rgba(0 0 255 / 1)',
      7: 'rgba(0 255 255 / 1)'
    },
    strokeWidth: 2
  },
  crossHairs: {
    enabled: true,
    style: 'bullseye',
    color: 'rgba(255 255 255 / 0.9)',
    strokeWidth: 3
  }
};
const container_canvas_2 = document.getElementById('container_canvas_2');
const rainSpot_canvas_2_Data = '3333333323332233333322233322222333112233231222332'
let rainSPOT_canvas_2 = create_rainSPOT_Canvas({inputString: rainSpot_canvas_2_Data, options: options_canvas_2});
container_canvas_2.appendChild(rainSPOT_canvas_2);