Transparent view

[MarvinMynx]

I’m trying to make the background gradient of this scriptable iOS widget more transparent but I can’t figure out how and I’m not familiar to JavaScript.

https://github.com/italoboy/Full-Weatherline-Widget

This is the code where I think the default background is generated but I don’t know how to edit this to make it less opaque.

let gradient = new LinearGradient()
 let gradientSettings = await setupGradient()
 gradient.colors = gradientSettings.color()
 gradient.locations = gradientSettings.position()  

 widget.backgroundGradient = gradient

And this should be the corresponding function that is called here.

// Set up the gradient for the widget background.
async function setupGradient() {
  
  // Requirements: sunrise
  if (!sunData) { await setupSunrise() }

  let gradient = {
    dawn: {
      color() { return [new Color("142C52"), new Color("1B416F"), new Color("62668B")] },
      position() { return [0, 0.5, 1] },
    },

    sunrise: {
      color() { return [new Color("274875"), new Color("766f8d"), new Color("f0b35e")] },
      position() { return [0, 0.8, 1.5] },
    },

    midday: {
      color() { return [new Color("3a8cc1"), new Color("90c0df")] },
      position() { return [0, 1] },
    },

    noon: {
      color() { return [new Color("b2d0e1"), new Color("80B5DB"), new Color("3a8cc1")] },
      position() { return [-0.2, 0.2, 1.5] },
    },

    sunset: {
      color() { return [new Color("32327A"), new Color("662E55"), new Color("7C2F43")] },
      position() { return [0.1, 0.9, 1.2] },
    },

    twilight: {
      color() { return [new Color("021033"), new Color("16296b"), new Color("414791")] },
      position() { return [0, 0.5, 1] },
    },

    night: {
      color() { return [new Color("16296b"), new Color("021033"), new Color("021033"), new Color("113245")] },
      position() { return [-0.5, 0.2, 0.5, 1] },
    },
  }

  const sunrise = sunData.sunrise
  const sunset = sunData.sunset

  // Use sunrise or sunset if we're within 30min of it.
  if (closeTo(sunrise)<=15) { return gradient.sunrise }
  if (closeTo(sunset)<=15) { return gradient.sunset }

  // In the 30min before/after, use dawn/twilight.
  if (closeTo(sunrise)<=45 && currentDate.getTime() < sunrise) { return gradient.dawn }
  if (closeTo(sunset)<=45 && currentDate.getTime() > sunset) { return gradient.twilight }

  // Otherwise, if it's night, return night.
  if (isNight(currentDate)) { return gradient.night }

  // If it's around noon, the sun is high in the sky.
  if (currentDate.getHours() == 12) { return gradient.noon }

  // Otherwise, return the "typical" theme.
  return gradient.midday
}

I hope someone around here can help me.

I figured out that you can add a parameter to the color function but even if I set it to 0% opacity it’ll just appear much darker.

color() { return [new Color("142C52", 0), new Color("1B416F", 0), new Color("62668B", 0)] },

[tiverive]

Hi I don't have an answer for the thing you are trying to do but this might be another option. https://gist.github.com/mzeryck/3a97ccd1e059b3afa3c6666d27a496c9