u/Accomplished-Rain-52

Hello! DCS gamer here. I've been working with DCS since the past week with my Big Screen Beyond 2 headset, and need some help assigning some controls that are currently on the keyboard, and one being on my Virpil stick, but can't get it to work.

I have these, which I assume will work out :

LCtrl + LShift + LAlt + T

- use hat button at top right (button press)

Cold Start

- use red button

Engine Shutdown

- use black button

Zoom in slow / zoom out slow

- use side black button (below joystick button)

But if there are better buttons to use, I'd appreciate some suggestions. I tried the button for the zoom, but as soon as I pressed it, it zoomed right back out. It wouldn't stay zoomed.

Previously while I had TrackIR, I used this button, and it zoomed in and out, in increments, which is what I still need, but now that I am on the BSB 2, it won't do this.

It's a long time I am trying to figure out why my moon phase is not updating at all. I have this JS :

document.addEventListener("DOMContentLoaded", () => {

const weatherDiv = document.querySelector("#weather");

function weatherCodeToIconURL(condition, isDay) {

condition = Number(condition);

const openMeteoToIcon = {

0: "https://i.ibb.co/b5FRsR3Q/sunny.png",

1: "https://i.ibb.co/b5FRsR3Q/sunny.png",

2: "https://i.ibb.co/CpC9BdgV/partly-cloudy.png", // Added your icon here!

3: "https://i.ibb.co/21mKY1QZ/cloudy.png",

45: "https://i.ibb.co/21mKY1QZ/cloudy.png",

48: "https://i.ibb.co/21mKY1QZ/cloudy.png",

51: "https://i.ibb.co/HLpF110S/rain.png",

53: "https://i.ibb.co/HLpF110S/rain.png",

55: "https://i.ibb.co/HLpF110S/rain.png",

61: "https://i.ibb.co/HLpF110S/rain.png",

63: "https://i.ibb.co/qF3rc1gY/heavy-rain.png",

65: "https://i.ibb.co/qF3rc1gY/heavy-rain.png",

71: "https://i.ibb.co/dw2S3P8K/snow.png",

73: "https://i.ibb.co/dw2S3P8K/snow.png",

75: "https://i.ibb.co/dw2S3P8K/snow.png",

80: "https://i.ibb.co/HLpF110S/rain.png",

81: "https://i.ibb.co/qF3rc1gY/heavy-rain.png",

82: "https://i.ibb.co/qF3rc1gY/heavy-rain.png",

95: "https://i.ibb.co/TDgsry34/storm.png",

96: "https://i.ibb.co/TDgsry34/storm.png",

99: "https://i.ibb.co/TDgsry34/storm.png"

};

// 🌙 DYNAMIC MOON MODE

if (!isDay) {

const { phase } = window.getRealMoonPhase();

const position = 20 + (phase / 100) * 60;

const now = new Date();

const lat = 39.082222;

const lon = -77.482222;

const moonPos = SunCalc.getMoonPosition(now, lat, lon);

// You can adjust this 'calibrationOffset' to match the Moon's tilt exactly

// to your visual preference or your specific moon.png asset rotation.

const calibrationOffset = -4;

const rotation = (moonPos.parallacticAngle * (180 / Math.PI)) + calibrationOffset;

`return ``

<div class="glow"></div>

<div class="moon-phase-wrapper">

<img src="https://i.ibb.co/NgB0677Z/moon.png"

class="moon-icon"

style="--moon-pos: ${position}%; transform: rotate(${rotation}deg);">

</div>

\;`

}

// ☀️ DAY MODE

return '<img src="' +

(openMeteoToIcon[condition] || openMeteoToIcon[0]) +

'" class="weather-icon">';

}

function parseWeather(data) {

// Checks 'current' path first, falls back to 'current_weather' path if needed

const code = Number(data.current?.weather_code ?? data.current_weather?.weathercode ?? 0);

const isDay = (data.current?.is_day ?? data.current_weather?.is_day) === 1;

console.log("Parsed weather code:", code);

return { code, isDay };

}

// 🌙 MOON PHASE FUNCTION (UNCHANGED — GOOD)

function getRealMoonPhase() {

const now = new Date();

const synodicMonth = 29.53058867;

const knownNewMoon = new Date(Date.UTC(2000, 0, 6, 18, 14, 0));

let daysSince = (now - knownNewMoon) / (1000 * 60 * 60 * 24);

let moonAge = daysSince % synodicMonth;

if (moonAge < 0) moonAge += synodicMonth;

const normalized = moonAge / synodicMonth;

const phase = normalized * 100;

return { phase };

}

window.getRealMoonPhase = getRealMoonPhase;

async function getWeather(lat, lon, city) {

const targetCity = city || "Lansdowne";

const targetLat = lat || 39.082222;

const targetLon = lon || -77.482222;

const url = "https://api.open-meteo.com/v1/forecast" +

"?latitude=" + targetLat +

"&longitude=" + targetLon +

"&current=weather_code,is_day" + // Requesting the code explicitly here

"&current_weather=true" + // Keeping your current setting

"&daily=temperature_2m_max,temperature_2m_min" +

"&forecast_days=1" +

"&temperature_unit=fahrenheit" +

"&timezone=auto";

try {

weatherDiv.innerHTML = 'Loading weather... 🌤️';

const response = await fetch(url);

console.log("STATUS:", response.status);

const data = await response.json();

console.log("API RESPONSE:", data);

console.log("DATA:", data);

const weather = parseWeather(data);

const currentTemp = Math.round(data.current_weather?.temperature ?? 0);

const lowTemp = Math.floor(data.daily?.temperature_2m_min?.[0] ?? 0);

const highTemp = Math.ceil(data.daily?.temperature_2m_max?.[0] ?? 0);

console.log("FINAL VALUES:", {

targetCity,

currentTemp,

lowTemp,

highTemp

});

weatherDiv.innerHTML =

'<p style="font-size: 16px; color: #fff; text-align: center; margin: 0;">' +

targetCity +

'</p>' +

'<div class="weather-stack">' +

weatherCodeToIconURL(weather.code, weather.isDay) +

'<div class="temp-overlay">' + currentTemp + '°F</div>' +

'</div>' +

'<div class="weather-lowhigh">' +

'<p style="font-size: 14px; color: #87CEEB; margin: 0;">Low: ' + lowTemp + '°F</p>' +

'<p style="font-size: 14px; color: #FFA07A; margin: 0;">High: ' + highTemp + '°F</p>' +

'</div>';

} catch (err) {

console.error(err);

weatherDiv.innerHTML = "Weather unavailable";

}

}

function fetchLocationAndWeather() {

fetch("https://ip-api.com/json/")

.then(r => r.json())

.then(d => getWeather(d.lat, d.lon, d.city))

.catch(() => getWeather(39.082222, -77.482222, "Lansdowne"));

}

fetchLocationAndWeather();

setInterval(fetchLocationAndWeather, 600000);

});

The HTML :

<div id="weather" style="display: flex; flex-direction: column; font: normal 12px Helvetica, Arial, sans-serif; color: #fff; "></div>

And the CSS :

/* LEFT COLUMN CSS */

#weather p {

margin: 0;

}

#weather {

display: flex;

flex-direction: column;

align-items: center;

gap: 2px;

transition: opacity 0.3s ease;

}

.weather-lowhigh {

display: flex;

flex-direction: row;

gap: 20px;

}

.weather-stack {

position: relative;

display: flex;

align-items: center;

justify-content: center;

}

.weather-icon {

width: 110px;

height: 110px;

object-fit: contain;

display: block;

}

.temp-overlay {

position: absolute;

top: 60%;

left: 78%;

transform: translate(-50%, -50%);

font-size: 24px;

font-weight: bold;

color: white;

filter: drop-shadow(-4px 0 2px #000);

padding: 2px 6px;

border-radius: 6px;

z-index: 3;

}

.moon-icon,

.cloud-icon {

position: absolute;

inset: 0;

width: 100%;

height: 100%;

object-fit: contain;

z-index: 1;

display: block;

/* Use a hard-coded value temporarily to test */

-webkit-mask-image: radial-gradient(circle at 65% 50%, transparent 40%, black 45%);

mask-image: radial-gradient(circle at 65% 50%, transparent 40%, black 45%);

}

.cloud-icon {

opacity: 0.9;

}

.moon-phase-wrapper {

position: relative;

width: 120px;

height: 120px;

overflow: hidden;

border-radius: 50%;

}

.glow {

position: absolute;

inset: 50%;

width: 160px;

height: 160px;

transform: translate(-50%, -50%);

border-radius: 50%;

background: radial-gradient(

circle,

rgba(255,255,220,0.5) 0%,

rgba(255,255,200,0.15) 45%,

transparent 70%

);

filter: blur(20px);

z-index: 0;

pointer-events: none;

}

This has been driving me nuts, and whatever AI I use is shit crazy, and messes up my code. I don't know what to do. It seems I can't get any help.

u/boomer1204 - thanks for pointing it out, going to share the prob here too :

So basically it's a weather widget, with the moon in it, and a moon phase. Problem : the phase is not updating. So idk where in my JS I need to change so it updates correctly.

I have been struggling to find out why my JS weather widget will not update the image strip to the correct icon. I have this :

<script>
fetch('https://api.open-meteo.com/v1/forecast?latitude=39.082222&longitude=-77.482222&daily=temperature_2m_max,temperature_2m_min&hourly=temperature_2m&timezone=auto&current_weather=true&forecast_days=1')

.then(response => response.json())

.then(data => {

console.log(data);

const weather = data.current_weather;

const daily = data.daily;

const targetLat = 39.082222;

const targetLon = -77.482222;

console.log('Low (F):', daily.temperature_2m_min[0]);

console.log('High (F):', daily.temperature_2m_max[0]);

console.log('Low (F):', Math.round(daily.temperature_2m_min[0] * 9/5 + 32));

console.log('High (F):', Math.round(daily.temperature_2m_max[0] * 9/5 + 32));

const targetCity = 'Lansdowne, VA';

const currentTemp = Math.round(weather.temperature * 9/5 + 32);

const iconCode = weather.weathercode;

// FIX: If currentTemp is much higher than the morning low, we adjust the displayed low

// to reflect the expected upcoming night low instead of the passed morning cold.

let lowF = Math.round(daily.temperature_2m_min[0] * 9/5 + 32);

console.log('Low (F):', lowF);

const lowTemp = lowF;

const highTemp = Math.round(daily.temperature_2m_max[0] * 9/5 + 32);

const weatherDiv = document.getElementById('weather');

console.log('Weather widget loaded completely.');

console.log('Icon code:', iconCode);

});

const weatherDiv = document.getElementById('weather');

const img = new Image();

img.src = 'https://i.ibb.co/WptyQH9y/image-strip-weather.jpg';

img.onload = () => console.log('Image loaded!');

img.onerror = () => console.log('Image error!');

function weatherCodeToIconURL(code) {

console.log('wttr code:', code, typeof code);

// FIXED: Translation map connecting Open-Meteo codes directly to your image strip positions

const openMeteoToSprite = {

0: "01d", // Sunny / Clear Sky -> First Icon

1: "02d", // Mainly Clear -> Second Icon

2: "02d", // Partly Cloudy -> Second Icon

3: "03d", // Overcast -> Third Icon (Your default)

45: "50d", // Fog -> Fog/Mist Icon

48: "50d", // Depositing Rime Fog -> Fog/Mist Icon

51: "09d", // Drizzle -> Light Rain Icon

53: "09d",

55: "09d",

61: "09d", // Slight Rain -> 4th/5th Rain Cloud Icon

63: "10d", // Moderate Rain -> Heavier Rain Icon

65: "10d", // Heavy Rain

71: "13d", // Snow Fall -> Snow Cloud Icon

73: "13d",

75: "13d",

80: "09d", // Rain Showers

81: "10d",

82: "10d",

95: "11d", // Thunderstorm -> Lightning/Storm Icon

96: "11d",

99: "11d"

};

// 1. ADD THIS SPECIFIC LINE BACK RIGHT HERE:

const spriteKey = openMeteoToSprite[code] || '03d';

// FIXED: Crisp percentage shifts that line up flawlessly when the image is scaled to cover the box

const positions = {

"01d": "0px 0px", // Sun

"01n": "0px 0px",

"02d": "-120px 0px", // Sun/Cloud

"02n": "-120px 0px",

"03d": "-240px 0px", // Cloud

"03n": "-240px 0px",

"09d": "-360px 0px", // Rain

"09n": "-360px 0px",

"10d": "-480px 0px", // Rain variation

"10n": "-480px 0px",

"11d": "-600px 0px", // Thunderstorm

"11n": "-600px 0px",

"13d": "-720px 0px", // Snow

"13n": "-720px 0px",

"50d": "-720px 0px",

"50n": "-720px 0px"

};

// CRITICAL CHANGE: We wrap the final variable so it fits your string perfectly

const pos = positions[spriteKey];

if (pos) {

// FIXED: Added transform: scale(2.5) to magnify the icon to a clear, readable size

return \<div style="display: inline-block; width: 3em; height: 3em; background: url('https://i.ibb.co/WptyQH9y/image-strip-weather.jpg') no-repeat center; background-position: ' + pos + '; background-size: auto; transform: scale(1.5); vertical-align: middle;"></div>`;`

}

// ADD THESE THREE LINES RIGHT HERE BELOW IT:

return 'Unknown code';

}

async function getWeather(lat, lon, city) {

var targetCity = city || 'Lansdowne';

var targetLat = lat || 39.082222;

var targetLon = lon || -77.482222;

var base = 'https://api.open-meteo.com/v1/forecast';

var query = '?latitude=' + targetLat + '&longitude=' + targetLon + '&daily=temperature_2m_max,temperature_2m_min&current=weather_code&timezone=auto&current_weather=true&forecast_days=2';

var url = base + query;

try {

var response = await fetch(url);

if (!response.ok) throw new Error('Status: ' + response.status);

var data = await response.json();

console.log('Min:', data.daily.temperature_2m_min[0]);

console.log('Max:', data.daily.temperature_2m_max[0]);

// Extract current conditions

var currentTemp = Math.round(data.current_weather.temperature * 9/5 + 32);

console.log('currentTemp:', currentTemp);

var iconCode = data.current_weather.weathercode;

// Initialize search tracking counters

var trueHigh = -Infinity;

var trueLow = Infinity;

if (data.daily.temperature_2m_min[0] < trueLow) {

trueLow = data.daily.temperature_2m_min[0];

}

if (data.daily.temperature_2m_max[0] > trueHigh) {

trueHigh = data.daily.temperature_2m_max[0];

}

// Convert raw Celsius trackers into Fahrenheit

var finalHigh = Math.round(data.daily.temperature_2m_max[0] * 9/5 + 32);

var finalLow = Math.round(data.daily.temperature_2m_min[1] * 9/5 + 32);

// FIXED: Directly assign lowTemp and highTemp to use your final calculations

var lowTemp = finalLow;

var highTemp = finalHigh;

weatherDiv.innerHTML = '<p style="font-size: 16px; color: #fff; text-align: center; margin: 0 0 8px 0;">' + targetCity + '</p>' + '<div style="position: relative; text-align: center; margin-bottom: 8px;">' + weatherCodeToIconURL(iconCode) + '<span style="position: absolute; top: 60%; left: 57%; transform: translate(-50%, -50%); font-size: 24px; font-weight: bold; color: #fff; filter: drop-shadow(-3px 0 2px #000);">' + currentTemp + '°F</span>' + '</div>' + '<div style="display: flex; justify-content: space-between; width: 154px; margin: 0 auto;">' + '<p style="font-size: 14px; color: #87CEEB; margin: 0;">Low: ' + lowTemp + '°F</p>' + '<p style="font-size: 14px; color: #FFA07A; margin: 0;">High: ' + highTemp + '°F</p>' + '</div>';

console.log('Weather widget loaded completely. Low Temp:', lowTemp);

// --- NOTE ---

// If you have lines that update 'weatherDiv.innerHTML', ensure they are right here!

} catch (error) {

console.error('Weather widget error:', error);

}

}

function fetchLocationAndWeather() {

// FIXED: Replaced slow browser popups with a silent, instant IP location lookup

fetch('https://ip-api.com')

.then(response => response.json())

.then(data => {

// Sends the visitor's dynamic coordinates and city name directly to your weather builder

getWeather(data.lat, data.lon, data.city);

})

.catch(error => {

console.error('Location error, falling back to Lansdowne:', error);

// Safety fallback: if the IP service fails, default to Lansdowne so the widget doesn't break

getWeather(39.082222, -77.482222, 'Lansdowne');

});

}

// FIXED: Added back the missing '/data/reverse-geocode-client?latitude=' string block

// RUN IT IMMEDIATELY

weatherDiv.innerHTML = 'Loading weather... 🌤️';

setTimeout(function() {

fetchLocationAndWeather();

}, 100);

// SET THE INTERVAL to repeat every minute

setInterval(fetchLocationAndWeather, 60000);
</script>

And here is the CSS :

#weather {

display: flex;

flex-direction: column;

font: normal 12px Helvetica, Arial, sans-serif;

color: #fff;

}

And the HTML :

<div id="weather" style="display: flex; flex-direction: column; font: normal 12px Helvetica, Arial, sans-serif; color: #fff; "></div>

I really don't know what to do at this point... I'd appreciate any feedback, corrections, ....etc.