1

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)] },
Hige Mynx
  • 151
  • 13
  • Hmm. I thought that there would be a few people who could help me with this but as always, nobody cares anymore. – Hige Mynx Mar 31 '21 at 23:19
  • Seems like the whole project on GitHub was abandoned too and with bad documentation (again like always) and minimal Javascript skills I can't figure it by myself. It's a shame because this widget is one of the few that are actually useful in a functional way, it even updates automatically in the background. But it looks like garbage. And all the paid apps that can provide beautiful widgets are functional garbage for example because you have to open every app manual in sequence to update their respective widgets which kinda blows the whole point of a widget doesn't it? Well it's a shame... – Hige Mynx Mar 31 '21 at 23:30

0 Answers0