ProSliderV2_script

const url = "ws://192.168.0.16:1337/";
function init() {
  transitionToView('mainView', true);
  wsConnect(url);
}

let joyPanTilt = new JoyStick('joyPanTilt', {
  description: 'PAN/TILT',
  internalLineWidth: 1,
  internalStrokeColor: '#003300',
  externalLineWidth: 1,
  externalStrokeColor: '#2C384F',
  autoReturnToCenter: true
});

let joySlide = new JoyStick('joySlide', {
  description: 'SLIDE',
  internalLineWidth: 1,
  internalStrokeColor: '#003300',
  externalLineWidth: 1,
  externalStrokeColor: '#2C384F',
  autoReturnToCenter: true
});


// Transition time elements
const decBtn = document.querySelector('.decrement-btn');
const incBtn  = document.querySelector('.increment-btn');
const inputTime = document.querySelector('.input-time');

decBtn.addEventListener('click', () => {
  if (inputTime.value > parseInt(inputTime.min)) {
    inputTime.value = parseInt(inputTime.value) - 1;
    doSend({ time: inputTime.value });
  }
});

incBtn.addEventListener('click', () => {
  inputTime.value = parseInt(inputTime.value) + 1;
  doSend({ time: inputTime.value });
});

inputTime.addEventListener('change', () => {
  doSend({ time: inputTime.value });
});

// Top button elements
const setPointABtn = document.querySelector('.btn-set-point-a');
const setPointBBtn = document.querySelector('.btn-set-point-b');
const backBtn = document.querySelector('.btn-back');

setPointABtn.addEventListener('click', () => { transitionToView('setPointAView') });
setPointBBtn.addEventListener('click', () => transitionToView('setPointBView'));
backBtn.addEventListener('click', () => transitionToView('mainView'));

// Bottom button elements
const goToPointABtn = document.querySelector('.go-to-point-a');
const goToPointBBtn = document.querySelector('.go-to-point-b');

goToPointABtn.addEventListener('click', () => transitionToView('transitionView'));
goToPointBBtn.addEventListener('click', () => transitionToView('transitionView'));

// Transition view events
const cancelTransitionBtn = document.querySelector('.btn-cancel-transition');
cancelTransitionBtn.addEventListener('click', () => {
  doSend({ action: "cancel" });
  cancelTransition();
});

// Buttons Save positions
const btnSaveAPosition = document.querySelector('.btn-save-point-a');
const btnSaveBPosition = document.querySelector('.btn-save-point-b');

btnSaveAPosition.addEventListener('click', () => {
  doSend({ action: "savePositionA" });
});

btnSaveBPosition.addEventListener('click', () => {
  doSend({ action: "savePositionB" });
});

// Buttons Go to point A / B
const btnGoToPointA = document.querySelector('.go-to-point-a');
const btnGoToPointB = document.querySelector('.go-to-point-b');

let timeToEndTransision = 0;
let transitionTimeInterval = null;

function progressCounter() {
  timeToEndTransision = timeToEndTransision + 1;
  const precentValue = Math.ceil((timeToEndTransision/inputTime.value) * 100);
  document.querySelector('.internal-bar').style.width = `${precentValue}%`;
  document.querySelector('.transition-precentage').textContent = `${precentValue}%`;

  if (timeToEndTransision == inputTime.value) {
    cancelTransition();
  }
}

function cancelTransition() {
  clearInterval(transitionTimeInterval);
  timeToEndTransision = 0;
  setTimeout(() => {
    document.querySelector('.internal-bar').style.width = '0%';
    document.querySelector('.transition-precentage').textContent = '0%';
  }, 1000);
  setTimeout(() => transitionToView('mainView'), 2000);
}

btnGoToPointA.addEventListener('click', () => {
  doSend({ action: "goToPointA" });
  setTimeout(() => {
    transitionTimeInterval = setInterval(progressCounter, 1000);
  }, 2000);
});

btnGoToPointB.addEventListener('click', () => {
  doSend({ action: "goToPointB" });
  setTimeout(() => {
    transitionTimeInterval = setInterval(progressCounter, 1000);
  }, 2000);
});

let jsonMovement = {
  action: "movementAxis",
  slide: {
    direction: "left",
    value: 0
  },
  pan: {
    direction: "left",
    value: 0
  },
  tilt: {
    direction: "left",
    value: 0
  }
}

let jsonMovementStringify = JSON.stringify(jsonMovement);
let prevJsonMovementStringify = '';

const slideInterval = setInterval(() => {
  const xSlide = joySlide.GetX();
  const xPan = joyPanTilt.GetX();
  const yTilt = joyPanTilt.GetY();

  let newJson = JSON.parse(jsonMovementStringify);

  newJson.slide.direction = xSlide > 0 ? 'left' : 'right';
  newJson.slide.value = Math.abs(xSlide);

  newJson.pan.direction = xPan > 0 ? 'left' : 'right';
  newJson.pan.value = Math.abs(xPan);

  newJson.tilt.direction = yTilt > 0 ? 'left' : 'right';
  newJson.tilt.value = Math.abs(yTilt);

  jsonMovementStringify = JSON.stringify(newJson);

  if (jsonMovementStringify === prevJsonMovementStringify) {
    return;
  }
  doSend(JSON.parse(jsonMovementStringify));
  prevJsonMovementStringify = jsonMovementStringify;
}, 200);

// Rendering view function
function transitionToView(view, isInit) {
  clearView();
  if (view === 'mainView') {
    showElements([
      '.section-set-position-a.main-view',
      '.section-set-position-b.main-view',
      '.section-transition-time',
      '.section-btn-bottom',
      '.btn-set-point-a',
      '.btn-set-point-b',
      '.current-position.main-view',
    ]);

    if (!isInit) {
      doSend({ transitionTo: "mainPageView" });
    }
  }

  if (view === 'setPointAView') {
    showElements([
      '.btn-back',
      '.btn-set-point-b',
      '.section-set-position-a.set-point-a-view',
      '.section-joy-control',
      '.current-position.set-positon-view',
    ])

    doSend({ transitionTo: "setPointAView" });
  }

  if (view === 'setPointBView') {
    showElements([
      '.btn-back',
      '.btn-set-point-a',
      '.section-set-position-b.set-point-b-view',
      '.section-joy-control',
      '.current-position.set-positon-view',
    ])

    doSend({ transitionTo: "setPointBView" });
  }

  if (view === 'transitionView') {
    showElements([
      '.btn-set-point-a',
      '.btn-set-point-b',
      '.section-btn-bottom',
      '.section-transition',
      '.progress-bar-section',
    ])
  }
  setDisableEnableEl(view);
}

function setDisableEnableEl(view) {
  const btnDisableChange = [
    '.btn-set-point-a',
    '.btn-set-point-b',
    '.go-to-point-a',
    '.go-to-point-b'
  ];
  if (view === 'transitionView') {
    btnDisableChange.map((value) => {
      document.querySelector(value).classList.add('disabled');
    })
  } else {
    btnDisableChange.map((value) => {
      const el = document.querySelector(value);
      el.classList.remove('disabled');
    })
  }
}

function clearView() {
  hideElements([
    '.btn-set-point-a',
    '.btn-set-point-b',
    '.btn-back',
  ]);
}

function showElements(elements) {
  elements.map((value) => {
    document.querySelector(value).classList.remove('hide');
  })
}

function hideElements(elements) {
  [...document.querySelectorAll('section')].map((el) => {
    el.classList.add('hide');
  });
  elements.map((el) => {
    document.querySelector(el).classList.add('hide');
  })
}

//....................................................................
//.FFFFFFFFFFFFFF.UUUUU.....UUUUU..NNNNN......NNNN......CCCCCCCCC.....
//.FFFFFFFFFFFFFF.UUUUU.....UUUUU..NNNNNN.....NNNN.....CCCCCCCCCCC....
//.FFFFFFFFFFFFFF.UUUUU.....UUUUU..NNNNNNN....NNNN....CCCCCCCCCCCCC...
//.FFFFFFFFFFFFFF.UUUUU.....UUUUU..NNNNNNN....NNNN...CCCCCCCCCCCCCCC..
//.FFFFF..........UUUUU.....UUUUU..NNNNNNNN...NNNN..NCCCCCC...CCCCCC..
//.FFFFF..........UUUUU.....UUUUU..NNNNNNNN...NNNN..NCCCCC.....CCCCC..
//.FFFFF..........UUUUU.....UUUUU..NNNNNNNNN..NNNN..NCCCC......CCCCC..
//.FFFFFFFFFFFFF..UUUUU.....UUUUU..NNNNNNNNN..NNNN..NCCCC.............
//.FFFFFFFFFFFFF..UUUUU.....UUUUU..NNNNNNNNNN.NNNN..NCCCC.............
//.FFFFFFFFFFFFF..UUUUU.....UUUUU..NNNNNNNNNNNNNNN..NCCCC.............
//.FFFFFFFFFFFFF..UUUUU.....UUUUU..NNNNN.NNNNNNNNN..NCCCC.............
//.FFFFF..........UUUUU.....UUUUU..NNNNN..NNNNNNNN..NCCCC......CCCCC..
//.FFFFF..........UUUUU.....UUUUU..NNNNN..NNNNNNNN..NCCCC......CCCCC..
//.FFFFF..........UUUUUU....UUUUU..NNNNN...NNNNNNN..NCCCCC....CCCCCC..
//.FFFFF..........UUUUUUU.UUUUUUU..NNNNN...NNNNNNN...CCCCCCCCCCCCCCC..
//.FFFFF...........UUUUUUUUUUUUU...NNNNN....NNNNNN...CCCCCCCCCCCCCC...
//.FFFFF...........UUUUUUUUUUUUU...NNNNN....NNNNNN....CCCCCCCCCCCC....
//.FFFFF............UUUUUUUUUUU....NNNNN.....NNNNN.....CCCCCCCCCC.....
//.....................UUUUU.............................CCCCCCC......
//....................................................................

const currentPosSlideValueEl = document.querySelectorAll('.current-position .slide-value');
const currentPosPanValueEl = document.querySelectorAll('.current-position .pan-value');
const currentPosTiltValueEl = document.querySelectorAll('.current-position .tilt-value');

const currentSetposASlideValueEl = document.querySelector(`.section-set-position-a .slide-value`);
const currentSetposAPanValueEl = document.querySelector(`.section-set-position-a .pan-value`);
const currentSetposATiltValueEl = document.querySelector(`.section-set-position-a .tilt-value`);

const currentSetposBSlideValueEl = document.querySelector(`.section-set-position-b .slide-value`);
const currentSetposBPanValueEl = document.querySelector(`.section-set-position-b .pan-value`);
const currentSetposBTiltValueEl = document.querySelector(`.section-set-position-b .tilt-value`);

function updateTime(json) {
  if (json.time) {
    inputTime.value = json.time;
  }
}

function setPoints(json) {
  if (json.action == 'updatePoints') {
    const posSlideValueEl = document.querySelectorAll(`.section-set-position-${json.point.toLowerCase()} .slide-value`);
    const posPanValueEl = document.querySelectorAll(`.section-set-position-${json.point.toLowerCase()} .pan-value`);
    const posTiltValueEl = document.querySelectorAll(`.section-set-position-${json.point.toLowerCase()} .tilt-value`);

    posSlideValueEl.forEach((el) => el.textContent = json.slide);
    posPanValueEl.forEach((el) => el.textContent = json.pan);
    posTiltValueEl.forEach((el) => el.textContent = json.tilt);
  }
}

function updateCurrentPosition(json) {
  if (json.action == 'updateCurrentPosition') {
    currentPosSlideValueEl.forEach((el) => el.textContent = json.slide);
    currentPosPanValueEl.forEach((el) => el.textContent = json.pan);
    currentPosTiltValueEl.forEach((el) => el.textContent = json.tilt);
  }
}

const setPositionChecker = setInterval(() => {
  if (
    currentPosSlideValueEl[0].textContent == currentSetposASlideValueEl.textContent &&
    currentPosPanValueEl[0].textContent == currentSetposAPanValueEl.textContent &&
    currentPosTiltValueEl[0].textContent == currentSetposATiltValueEl.textContent
  ) {
    goToPointABtn.classList.add('disabled');
  }
  if (
    currentPosSlideValueEl[0].textContent == currentSetposBSlideValueEl.textContent &&
    currentPosPanValueEl[0].textContent == currentSetposBPanValueEl.textContent &&
    currentPosTiltValueEl[0].textContent == currentSetposBTiltValueEl.textContent
  ) {
    goToPointBBtn.classList.add('disabled');
  }
}, 500);

//...................................................................................................
//..........................................SSSSS....................................................
//.WWWW..WWWWW..WWWW..........bbbb........SSSSSSSSS.......................ckkk.................ttt...
//.WWWW..WWWWW..WWWW..........bbbb........SSSSSSSSSS......................ckkk.................ttt...
//.WWWW..WWWWW..WWWW..........bbbb.......SSSSSSSSSSS......................ckkk.................ttt...
//..WWWW.WWWWW.WWWW..eeeeeee..bbbbbbbbb..SSSS...SSSS...ooooooo....cccccc..ckkk.kkkkk.eeeeeee.eetttt..
//..WWWWWWWWWWWWWWW..eeeeeeee.bbbbbbbbbb.SSSSSS.......ooooooooo..cccccccc.ckkk.kkkkk.eeeeeeeeeetttt..
//..WWWWWWWWWWWWWWW.eeeeeeeee.bbbbbbbbbb.SSSSSSSSS...Sooooooooo.ccccccccccckkkkkkkk.keeeeeeeeeetttt..
//..WWWWWWWWWWWWWWW.eeee..eeeebbbbb.bbbbb.SSSSSSSSSS.Sooo..ooooocccc..ccccckkkkkkk..keee..eeee.ttt...
//...WWWWWW.WWWWWW..eeeeeeeeeebbbb...bbbb..SSSSSSSSS.Sooo...oooocccc......ckkkkkk...keeeeeeeee.ttt...
//...WWWWWW.WWWWWW..eeeeeeeeeebbbb...bbbbSSSS..SSSSSSSooo...oooocccc......ckkkkkkk..keeeeeeeee.ttt...
//...WWWWWW.WWWWWW..eeee......bbbb..bbbbbSSSS....SSSSSooo..ooooocccc..ccccckkkkkkkk.keee.......ttt...
//....WWWWW.WWWWW...eeeeeeeeeebbbbbbbbbb.SSSSSSSSSSSSSooooooooo.ccccccccccckkkkkkkk.keeeeeeeee.tttt..
//....WWWW...WWWW...eeeeeeeee.bbbbbbbbbb.SSSSSSSSSSS..ooooooooo.ccccccccc.ckkk.kkkkkkeeeeeeee..tttt..
//....WWWW...WWWW....eeeeeeee.bbbbbbbbb...SSSSSSSSS...oooooooo...cccccccc.ckkk..kkkk.eeeeeeee..tttt..
//.....................eeee........bbb......SSSSSS......ooooo......cccc................eeee.....ttt..
//...................................................................................................
function wsConnect(url) {
  websocket = new WebSocket(url);
  websocket.onopen = function (evt) { onOpen(evt) };
  websocket.onclose = function (evt) { onClose(evt) };
  websocket.onmessage = function (evt) { onMessage(evt) };
  websocket.onerror = function (evt) { onError(evt) };
}

function onOpen(evt) {
  console.log("Connected");
}

function onClose(evt) {
  console.log("Disconnected");
  setTimeout(function () { wsConnect(url) }, 2000);
}

function onMessage(evt) {
  const { data } = evt;
  const json = JSON.parse(data);

  console.log(json);

  updateTime(json);
  setPoints(json);
  updateCurrentPosition(json);
}

function onError(evt) {
  console.log("ERROR: " + evt.data);
}

function doSend(message) {
  console.log("Sending: " + JSON.stringify(message, null, 2));
  websocket.send(JSON.stringify(message));
}
//............................
//.iii.............iii........
//.iii.............iii..tttt..
//.iii.............iii..tttt..
//.iii.............iii..tttt..
//.iii..innnnnnnn..iii.itttt..
//.iii..innnnnnnn..iii.itttt..
//.iii..innnnnnnn..iii.itttt..
//.iii..innn.nnnn..iii..tttt..
//.iii..inn...nnn..iii..tttt..
//.iii..inn...nnn..iii..tttt..
//.iii..inn...nnn..iii..tttt..
//.iii..inn...nnn..iii..tttt..
//.iii..inn...nnn..iii..tttt..
//.iii..inn...nnn..iii..tttt..
//........................tt..
//............................
init();