Open MarvinMynx opened 3 years ago
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)] },
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
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.
And this should be the corresponding function that is called here.
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)] },