← Kapat

script.js

const ileriBtn = document.getElementById('ileriBtn');
const geriBtn = document.getElementById('geriBtn');
const solBtn = document.getElementById('solBtn');
const sagBtn = document.getElementById('sagBtn');

// Durumu sunucuya gönderen fonksiyon
function gonderDurum(status) {
  fetch('db_save.php', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
    },
    body: `status=${status}` // POST verisi olarak 'status' parametresi gönderiliyor
  })
    .then(response => response.text())
    .then(data => {
      console.log('Durum güncellendi: ' + status);
    })
    .catch(error => {
      console.error('AJAX Hatası:', error);
    });
}

// Değeri 1 yap
function degeriBirYap() {
  stilDegistir(1, ileriBtn);
  gonderDurum(1);
  
}

// Değeri 0 yap
function degeriSifirYap() {
  stilDegistir(0, ileriBtn);
  stilDegistir(0, geriBtn);
  gonderDurum(0);
  
}

// Geri butonu için yeni olaylar
function degeriikiYap() {
  stilDegistir(1, geriBtn);
  gonderDurum(2); // Geri butonu için sunucuya 2 gönderiyoruz
  
}


// Masaüstü için ileri butonu olayları
ileriBtn.addEventListener('mousedown', degeriBirYap);
ileriBtn.addEventListener('mouseup', degeriSifirYap);
ileriBtn.addEventListener('mouseleave', degeriSifirYap);

// Mobil cihazlar için ileri butonu olayları
ileriBtn.addEventListener('touchstart', (e) => {
  e.preventDefault();
  degeriBirYap();
});

ileriBtn.addEventListener('touchend', (e) => {
  e.preventDefault();
  degeriSifirYap();
});

// Masaüstü için geri butonu olayları
geriBtn.addEventListener('mousedown', degeriikiYap);
geriBtn.addEventListener('mouseup', degeriSifirYap);
geriBtn.addEventListener('mouseleave', degeriSifirYap);

// Mobil cihazlar için geri butonu olayları
geriBtn.addEventListener('touchstart', (e) => {
  e.preventDefault();
  degeriikiYap();
});

geriBtn.addEventListener('touchend', (e) => {
  e.preventDefault();
  degeriSifirYap();
});

// Stil değiştirme fonksiyonu
function stilDegistir(status, button) {
  if (status === 1) {
    // Basılı tutulduğunda
    button.style.backgroundColor = "green";
    button.style.color = "white";
    button.style.transform = "scale(1.1)";
  } else {
    // Bırakıldığında
    button.style.backgroundColor = "";
    button.style.color = "";
    button.style.transform = "scale(1)";
  }
}



// Debounce fonksiyonu (Sliderda çok hızlı kaydırma yaparsan son veriyi göndersin diye)
function debounce(func, delay) {
  let timeout;
  return function (...args) {
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(this, args), delay);
  };
}




// DİKEY ÇUBUK HAREKET ETTİKÇE
const dikeyGirdi = document.getElementById("dikey-cubuk");
const dikeyDeger = document.getElementById("dikey-deger");

// Kaydırıcı değeri değiştikçe metni güncelle ve AJAX isteği gönder
dikeyGirdi.addEventListener("input", debounce(function () {
  // Kaydırıcı değerini span'a güncelle
  dikeyDeger.textContent = dikeyGirdi.value;
  

  // AJAX isteği gönder
  const value = dikeyGirdi.value;

  fetch('db_save.php', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
    },
    body: `dikey_deger=${value}` // 'dikey_deger' parametresi olarak kaydırıcı değeri gönderiliyor
  })
    .then(response => response.text()) // Yanıtı metin olarak al
    .then(data => {
      // Sunucudan gelen yanıtı kontrol et
      if (data === 'dikey_degeri_degistirildi') {
        console.log('dikey değeri güncellendi.');
      } else {
        console.error('Hata:', data);
      }
    })
    .catch(error => {
      console.error('AJAX Hatası:', error);
    });
}, 50)); // 50ms debounce süresi



// YATAY ÇUBUK HAREKET ETTİKÇE
const yatayCubuk = document.getElementById("yatay-cubuk");
const yatayDeger = document.getElementById("yatay-deger");

// Kaydırıcı değeri değiştikçe metni güncelle ve AJAX isteği gönder
yatayCubuk.addEventListener("input", debounce(function () {
  // Kaydırıcı değerini span'a güncelle
  
  yatayDeger.textContent = yatayCubuk.value;

  // AJAX isteği gönder
  const value = yatayCubuk.value;

  fetch('db_save.php', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
    },
    body: `yatay_deger=${value}` // 'yatay_deger' parametresi olarak kaydırıcı değeri gönderiliyor
  })
    .then(response => response.text()) // Yanıtı metin olarak al
    .then(data => {
      // Sunucudan gelen yanıtı kontrol et
      if (data === 'yatay_degeri_degistirildi') {
        console.log('yatay değeri güncellendi.');
      } else {
        console.error('Hata:', data);
      }
    })
    .catch(error => {
      console.error('AJAX Hatası:', error);
    });
}, 50)); // 50ms debounce süresi

let pressTimer;
const increment = 15; // Her tıklamada yapılacak değişim
const minValue = 0;
const maxValue = 180;
const intervalDelay = 50;
let returnTimer;

// Ortak fonksiyon: değer güncelleme ve AJAX isteği
const updateValue = (direction) => {
  yatayCubuk.value = direction === 'up'
    ? Math.min(maxValue, parseInt(yatayCubuk.value) + increment)
    : Math.max(minValue, parseInt(yatayCubuk.value) - increment);

  yatayDeger.textContent = yatayCubuk.value;
  sendAjaxRequest(yatayCubuk.value);
};

const sendAjaxRequest = (value) => {
  fetch('db_save.php', {
    method: 'POST',
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
    body: `yatay_deger=${value}`
  })
    .then(response => response.text())
    .then(data => {
      if (data === 'yatay_degeri_degistirildi') {
        console.log('yatay değeri güncellendi.');
      } else {
        console.error('Hata:', data);
      }
    })
    .catch(error => console.error('AJAX Hatası:', error));
};





// Değeri 90'a döndürme fonksiyonu
const returnToDefault = () => {
  clearInterval(returnTimer);
  returnTimer = setInterval(() => {
    const currentValue = parseInt(yatayCubuk.value);
    if (currentValue > 90) {
      yatayCubuk.value = Math.max(90, currentValue - 10);
    } else if (currentValue < 90) {
      yatayCubuk.value = Math.min(90, currentValue + 10);
    } else {
      clearInterval(returnTimer);
    }
    yatayDeger.textContent = yatayCubuk.value;
    sendAjaxRequest(yatayCubuk.value);
  }, 30);
};

// Ortak olay dinleyici ekleyici
const addButtonListeners = (button, direction) => {
  const startEvent = () => {
    clearInterval(returnTimer);
    
    // Sadece ilgili butonun stilini değiştir
    if (button === solBtn) {
      stilDegistir(1, solBtn);
    } else if (button === sagBtn) {
      stilDegistir(1, sagBtn);
    }

    pressTimer = setInterval(() => updateValue(direction), intervalDelay);
  };

  const stopEvent = () => {
    clearInterval(pressTimer);
    
    // Sadece ilgili butonun stilini geri al
    if (button === solBtn) {
      stilDegistir(0, solBtn);
    } else if (button === sagBtn) {
      stilDegistir(0, sagBtn);
    }

    returnToDefault();
  };

  button.addEventListener('mousedown', startEvent);
  button.addEventListener('mouseup', stopEvent);
  button.addEventListener('mouseleave', stopEvent);
  button.addEventListener('touchstart', (e) => {
    e.preventDefault();
    startEvent();
  });
  button.addEventListener('touchend', (e) => {
    e.preventDefault();
    stopEvent();
  });
};

// Sağ ve sol butonlara olay dinleyicileri ekle
addButtonListeners(solBtn, 'down');
addButtonListeners(sagBtn, 'up');