Блог

У меня настроено несколько мониторов (с 4 мониторами), и я хочу создать приложение, которое будет охватывать 3 из них следующим образом: — все мониторы включены extend mode .

Это веб-приложение, поэтому оно должно находиться внутри окна браузера. Я не знаю, как придать окну Chrome такую форму. Из того, что я вижу, окно браузера должно иметь прямоугольную форму.

Я не могу изменить дизайн приложения, я перепробовал много макетов.. Я не хочу терять функциональность… наличие всех этих мониторов просто плохо, я не могу делать то, что хочу, со всем пространством. Таким образом, окончательный макет должен быть чем-то вроде этой красной фигуры, которую вы видите выше..

Вместо большого окна Chrome, которое будет занимать все 4 монитора (а также скрывать за ним мой терминал или какую-либо другую программу), я думаю, что было бы неплохо разделить мое приложение на несколько небольших окон Chrome — в зависимости от функциональности.

Например:

 -- main module - this holds my app
   -- module 1
   -- module 2
   -- module 3
   -- module 4 .. etc
  

Я хочу, чтобы они были примерно такими:

— одно и то же приложение, несколько компонентов / модулей в нескольких окнах Chrome.

Если я расположу их ближе друг к другу и скрою окно (кнопка сворачивания, кнопка закрытия и т.д.), визуально я получу очень красивое приложение в нужной мне форме.

Chrome поддерживает это множественное окно для одного и того же поведения приложения.. Вы можете увидеть это в консоли разработчика, где вы что-то изменяете на панели Style Css, и страница обновляется в режиме реального времени.

Инструменты разработчика каким-то образом взаимодействуют со страницей. — возможно, это не то, что мне нужно, но эта идея изменения чего-либо внутри приложения из другого, совершенно другого окна присутствует. Chrome developer tools работает на основе браузера, а также может быть открыт как отдельное окно.

Что касается этого поведения — я нашел эту библиотеку с этой демонстрацией, которая позволяет передавать информацию между двумя окнами Chrome в одном домене — но это точно такое же приложение, с тем же контентом! Не являются частями более крупного приложения... вот в чем проблема. Что я хочу, так это 2 окна с разным содержимым — для взаимодействия — как инструменты разработчика с веб-страницей.

Архитектура elm хорошо подходит для передачи изменений, но я не знаю, как я могу реализовать обновление во всех моих окнах. Если я нажимаю что-то на модуле 4 монитора 1, я хочу увидеть результат в модуле 2 монитора 2.

Вопросы:

1. Возможно ли это вообще? Вообще — не только elm, но и в целом .. можно сделать на JavaScript?

2. Есть идеи по адаптации его к архитектуре elm?

3. учитывая, что это возможно, но несовместимо с архитектурой elm. Если я решу создавать полностью отдельные приложения elm — для каждой части функциональности / для каждого модуля — как я могу заставить их взаимодействовать без задержек? Конечно, я могу использовать сервер, но даже задержка в 60-100 мс здесь не подходит. Должны выполняться как можно быстрее в режиме реального времени.

Я в неведении. Любые идеи приветствуются 🙂

Вы могли бы попробовать использовать SharedWorker для обмена контекстом между различными вкладками. Этот API довольно новый, поэтому он может иметь некоторые последствия.

Более простой альтернативой является реагирование на изменения хранилища с помощью StorageEvent

Короче говоря, вы можете отслеживать изменения в локальном хранилище.

 let counter = 0;

if (window.localStorage.getItem('counter') === null) {
  setInterval(
    () => {
      document.body.innerText = counter;
      window.localStorage.setItem('counter', counter)
      counter  
    },
    1000
  )
} else {
  window.addEventListener('storage', event => {
    document.body.innerText = event.newValue;
  })
}
  

Попробуйте открыть эту демонстрационную версию JS Bin на нескольких вкладках (не забудьте очистить хранилище, если захотите просмотреть его дважды).

Интегрируйте ваше приложение Elm со всем этим волшебством, используя JavaScript Interop, и все готово.