Проблемы с electronjs

@Noob32 · Регистрация: 25.03.2013

Студворк — интернет-сервис помощи студентам

Изучаю electron.js и меня интересует вот что:
1. В документации есть раздел структура API и там описаны объекты. Там есть объект, например, MemoryInfo. Как им воспользоваться? Его как-то подключать надо? Например

JavaScript
1
let mem = require('electron').MemoryInfo

2. Я хочу сделать фон прозрачным и наложить на этот фон эффект blur. Когда я создаю окно я указываю

JavaScript
1
win = new BrowserWindow({ width: 800, height: 600, frame: false, transparent: false });

но фон становится черным. (Запускаю на Linux). Это вообще я та понимаю не работает?

3. Как сделать закругленные рамки? Я к body применил стиль border-radius: 10px ничего не изменилось. Что не так делаю?

Qwerty_Wasd · 09.05.2019, 13:30

Сообщение от Noob32

В документации есть раздел структура API и там описаны объекты. Там есть объект, например, MemoryInfo. Как им воспользоваться? Его как-то подключать надо? Например

https://electronjs.org/docs/ap... fo/history

Сообщение от Noob32

Я хочу сделать фон прозрачным и наложить на этот фон эффект blur. Когда я создаю окно я указываю

JavaScript
1
2
3
new BrowserWindow({ width: 800, height: 600, frame: false, opacity: 0.5 });
// или
new BrowserWindow({ width: 800, height: 600, frame: false, transparent: true });

Сообщение от Noob32

на этот фон эффект blur

это уже к стилям страницы, что будет подгружаться при событии готовности приложения например. Программно, для многих апи blur - это потеря фокуса.

Сообщение от Noob32

Как сделать закругленные рамки?

*Скругленные границы.
Скругленные границы чего - окна? Такой возможности electron еще пока не предоставляет. Или же у элементов?

Сообщение от Noob32

к body применил стиль border-radius: 10px

чтобы Вы увидели результат, свойство border-radius должно знать размер элемента, от которого будет высчитываться - https://drafts.csswg.org/css-b... der-radius. А также нужно дать цвет родительскому фону - https://jsfiddle.net/Qwerty_Wasd/ryL2g8wx/

CSS
1
2
3
4
5
6
7
8
9
10
html, body {
  height: 100%;
}
html {
  background: white;
}
body {
  background: red;
  border-radius: 40px;
}

@Noob32 · 09.05.2019, 20:59 **[ТС]**

Сообщение от Qwerty_Wasd

https://electronjs.org/docs/api/structures/memory-info/history

Там ничего не написано. Как его использовать? я вот это не пойму

Сообщение от Qwerty_Wasd

JavascriptВыделить код
1
2
3
new BrowserWindow({ width: 800, height: 600, frame: false, opacity: 0.5 });
// или
new BrowserWindow({ width: 800, height: 600, frame: false, transparent: true });

на линуксе фон становится черным. прозрачность не работает. можно ли это как-нибудь исправить?

Qwerty_Wasd · 09.05.2019, 21:24

Noob32,

Сообщение от Noob32

Там ничего не написано. Как его использовать? я вот это не пойму

подтяните английский, там написано - "Объект MemoryInfo был документирован(читаем рекомендован), но еще не включен в релиз."

Сообщение от Noob32

можно ли это как-нибудь исправить?

Предоставьте код страницы(+ стили), что Вы подгружаете в окно или покажите как отображаете экземпляр созданного окна.

короткий пример из доки, что Вы якобы читаете - https://electronjs.org/docs/ap... ent-window

JavaScript
1
2
3
const { BrowserWindow } = require('electron')
let win = new BrowserWindow({ transparent: true, frame: false })
win.show()

Плюс ограничения :
- Событие клика не работает на прозрачной области. Мы представим API для установки формы окна для этой проблемы - https://github.com/electron/electron/issues/1335.

- Прозрачные окна не подлежат изменению. Если для свойства resizable задано значение true, прозрачное окно перестанет работать на некоторых платформах.

- В Linux нужно параметризовать командную строку --enable-transparent-visuals --disable-gpu, чтобы отключить графический процессор и позволить модулю ARGB создать прозрачное окно, это вызвано ошибкой альфа-канала, он не работает с некоторыми драйверами NVidia для Linux.

@Noob32 · 09.05.2019, 21:28 **[ТС]**

Сообщение от Qwerty_Wasd

Предоставьте код страницы(+ стили), что Вы подгружаете в окно или покажите как отображаете экземпляр созданного окна.

там подгружается пустой html, то есть с тегами html body и тд без стилей

Qwerty_Wasd · 09.05.2019, 21:35

Noob32, еще разик

Сообщение от Qwerty_Wasd

Плюс ограничения :
- Событие клика не работает на прозрачной области. Мы представим API для установки формы окна для этой проблемы - https://github.com/electron/electron/issues/1335.
- Прозрачные окна не подлежат изменению. Если для свойства resizable задано значение true, прозрачное окно перестанет работать на некоторых платформах.
- В Linux нужно параметризовать командную строку --enable-transparent-visuals --disable-gpu, чтобы отключить графический процессор и позволить модулю ARGB создать прозрачное окно, это вызвано ошибкой альфа-канала, он не работает с некоторыми драйверами NVidia для Linux.

@Noob32 · 09.05.2019, 21:52 **[ТС]**

Сообщение от Qwerty_Wasd

В Linux нужно параметризовать командную строку --enable-transparent-visuals --disable-gpu,

а как это сделать?

Добавлено через 10 минут
https://geekquestion.com/15206... hlektrona/
нашел как сделать
всеравно не работает

Qwerty_Wasd · 09.05.2019, 23:24

Сообщение от Noob32

всеравно не работает

хм.... на всякий случай спрошу:
требования платформы то удовлетворены? - https://electronjs.org/docs/de... requisites

Если требования платформы Ваш терминал и среда разработки удовлетворяют, и при разработке Вы в точности следуете документации, а у Вас все еще возникает эта проблема, то мысли осталось всего две:
1. Начать сначала. При этом обновить все зависимости вплоть до npm и ноды. Возможен вариант, что при ls -depth=0 у Вас конфликты.
2. Написать собственно разрабам в баг-трекер, сообщив не только о проблеме, но и описав ттх девайса и структуру среды разработки. Сделать это можно здесь - https://github.com/electron/electron/issues

Но... Вы уж извините.. у меня дикие сомнения в том, что косяк в их апи. Думаю Вы просто где-то поленились почитать\перевести, включая эту тему. Ни разу с такой траблой не сталкивался - ни в винде, ни в бубунте на ноуте, ни на арче. С остальными дистрами ради Вас я тестировать не буду, без обид.

@Noob32 · 10.05.2019, 00:07 **[ТС]**

Сообщение от Qwerty_Wasd

Но... Вы уж извините.. у меня дикие сомнения в том, что косяк в их апи. Думаю Вы просто где-то поленились почитать\перевести, включая эту тему.

на винде transparent тоже не работает
но работает opacity
а что там следоваь инструкции в доке? я просто через npm установил electron. по идее все нормально должно быть?
и что за

Сообщение от Qwerty_Wasd

ls -depth=0

как это проверить?

Qwerty_Wasd · 10.05.2019, 01:26

Noob32,

Code
1
npm ls -D --depth=0

в директории проекта

Сообщение от Noob32

на винде transparent тоже не работает

из чего можно сделать вывод, что у Вас так настроена тема рабочего стола, то есть отключены все эффекты, либо отключены параметры безопасности UAC(Контроль учётных записей). Процесс dwm.exe напрямую от него зависит. Этот процесс также не включен в ряд дистров Windows 7.

Одно из ограничений

Code
1
{transparent : true}

-

On Windows operating systems, transparent windows will not work when DWM is disabled.

Если opacity пашет, чем оно не устроило?

@Noob32 · 10.05.2019, 11:17 **[ТС]**

Сообщение от Qwerty_Wasd

Если opacity пашет, чем оно не устроило?

потому что она все элементы прозрачными сделает
а мне нужно чтобы только фон был прозрачным

Qwerty_Wasd · 10.05.2019, 16:55

Noob32,

Сообщение от Noob32

а мне нужно чтобы только фон был прозрачным

transparent сделает тоже самое с окном, что и opacity. Не понятно что Вы пытаетесь сделать..

Сообщение от Noob32

фон был прозрачным

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

ЕСЛИ ВЫ, СОГЛАСНО ДОКУМЕНТАЦИИ, ВХОДИТЕ В СПИСОК ОГРАНИЧЕНИЙ ДЛЯ ИСПОЛЬЗОВАНИЯ TRANSPARENT, ТО ВЫ НУ НИКАК НЕ СМОЖЕТЕ СДЕЛАТЬ ОКНО ПРОЗРАЧНЫМ, С ПОМОЩЬЮ ЭТОГО АПИ!!!!!!! (это не крик, это я так подчеркнул важность каждого слова).

Упреждая возможный вопрос с Вашей стороны - да!!! логично найти другое апи для выполнения задачи.

А еще на лине проверьте - может у вас какой-либо графлибы нет(libglapi.so, libdrm.so) ?

Новые блоги и статьи Все статьи Все блоги /
Доступность команды формы по условию Maks 07.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: сделать доступной кнопку (команда формы "ЗавершитьСписание") при. . .	Уведомление о неверно выбранном значении справочника Maks 06.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "НарядПутевка", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если в документе выбран неверный склад. . .	Установка Qt Creator для C и C++: ставим среду, CMake и MinGW без фреймворка Qt 8Observer8 05.04.2026 Среду разработки Qt Creator можно установить без фреймворка Qt. Есть отдельный репозиторий для этой среды: https:/ / github. com/ qt-creator/ qt-creator, где можно скачать установщик, на вкладке Releases:. . .	AkelPad-скрипты, структуры, и немного лирики.. testuser2 05.04.2026 Такая программа, как AkelPad существует уже давно, и также давно существуют скрипты под нее. Тем не менее, прога живет, периодически что-то не спеша дополняется, улучшается. Что меня в первую очередь. . .
Отображение реквизитов в документе по условию и контроль их заполнения Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеСпецтехники", разработанного в конфигурации КА2. Данный документ берёт данные из другого нетипового документа. . .	Фото всей Земли с борта корабля Orion миссии Artemis II kumehtar 04.04.2026 Это первое подобное фото сделанное человеком за 50 лет. Снимок называют новым вариантом легендарной фотографии «The Blue Marble» 1972 года, сделанной с борта корабля «Аполлон-17». Новое фото. . .	Вывод диалогового окна перед закрытием, если документ не проведён Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать программный контроль на предмет проведения документа. . .	Программный контроль заполнения реквизитов табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: 1. Реализовать контроль заполнения реквизита. . .