.. |br| raw:: html
.. _electron-guide-index:
Electron Guide
==============
Introduction
------------
"Electron is a framework that enables you to create desktop applications with JavaScript, HTML, and CSS." - https://www.electronjs.org/docs
Electron requires **nodejs** and **npm** on your target to run.
This article will introduce you to run Electron on one of our Modules.
Demo Video
----------
.. youtube:: xY2QZl7sgZ8
Setup
-----
Precompiled Images
~~~~~~~~~~~~~~~~~~
.. note:: There are precompiled images, including our Electron Demo, available. |br|
If you want to start developing yourself, just continue reading this guide.
+-------------------------------------+---------------------------------------------------+------------------------------------------------+
| Module | Precompiled Demo Image | Flashtools |
+=====================================+===================================================+================================================+
| QSMP-1570 | `qsmp-1570-electron-demo.zip`_ | :ref:`stm32-programmer-setup` |
+-------------------------------------+---------------------------------------------------+------------------------------------------------+
| TX8M-1610 | *tx8m-1610-electron-demo.zip* - `Download Area`_ | :ref:`uuu` |
+-------------------------------------+---------------------------------------------------+------------------------------------------------+
Debian Setup
~~~~~~~~~~~~
|br|
.. admonition:: Install the required packages
:class: success
Refer to our :ref:`debian-12-guide` guide
.. prompt::
:prompts: #
apt update
apt install -y nodejs npm
apt install -y libnss3 libatk1.0-0 libatk-bridge2.0-0 libgtk-3-0 libasound2
npm install --save-dev electron
.. admonition:: Option 1: X11
:class: tip
.. prompt::
:prompts: #
apt install -y xserver-xorg xinit
export DISPLAY=:0
xinit &
.. admonition:: Option 2: Weston
:class: tip
.. prompt::
:prompts: #
apt install -y weston
export XDG_RUNTIME_DIR=/run/user/0
export WAYLAND_DISPLAY=wayland-1
weston --backend=drm-backend.so --tty=1 --continue-without-input &
Electron needs to be be started with option **\--ozone-platform=wayland**.
See Electron Demo, package.json
.. code::
"start": "electron main.js --no-sandbox --ozone-platform=wayland",
"test": "electron --inspect --remote-debugging-port=9223 main.js --no-sandbox --ozone-platform=wayland"
Yocto Setup
~~~~~~~~~~~
For creating the neccessary RootFS, a complete Yocto build environment is required.
Depending on your module choose the correct guide - if not already set up.
.. note:: **NXP modules** use :ref:`nxp-yocto-guide-index`
.. note:: **STM and Renesas modules** use :ref:`mainline-yocto-guide-index`
1. Setup the Yocto build-directory as described in the Yocto guide for your machine. Use the following values:
* ``DISTRO=karo-xwayland``
* ``MACHINE=``
2. Append your ``conf/local.conf`` as follows.
+------------------------------------+-----------------------------------------+
| Mainline BSP | NXP BSP |
+====================================+=========================================+
| | |
| .. code-block:: text | .. code-block:: text |
| | |
| IMAGE_INSTALL:append = " \ | IMAGE_INSTALL:append = " \ |
| git \ | git \ |
| nodejs \ | nodejs \ |
| nodejs-npm \ | nodejs-npm \ |
| cups \ | cups \ |
| libxscrnsaver \ | libxscrnsaver \ |
| nss \ | at-spi2-atk \ |
| " | libxcomposite \ |
| | libxrandr \ |
| | nss \ |
| | " |
| | |
| | IMAGE_ROOTFS_EXTRA_SPACE = "1048576" |
+------------------------------------+-----------------------------------------+
3. Compile the image.
.. prompt::
:prompts: $
bitbake karo-image-weston
.. admonition:: If the build fails due to memory limits.
:class: note
A main memory size of 4 GB per core should be sufficient.
If you experience problems, you can also reduce the number of parallel builds using
`BB_NUMBER_THREADS `_
4. Program your board using our manufacturing tools. **You can also boot the image from net using tftp**.
.. note:: Use :ref:`uuu`
.. note:: For **legacy tools**, see module-specific documentation
Start Demo Application
----------------------
.. note:: The Demo was written for a 640x480 screen. |br|
Depending on the used display, the brightness control of the backlight may not work.
.. list-table::
:header-rows: 1
:widths: 30 30
* - Module Prequisites
- Host Prequisites
* - Network with Internet access
- Network connection to Module
* - Display connected
- Chrome Web Browser
* - SSH Host
- SSH Client
Boot the target, and log-in using SSH or a Serial Terminal connection.
.. tip:: Make sure your module has set the correct time to avoid any SSL/certificate errors. |br|
.. prompt::
:prompts: #
ntpdate -s -u
or execute the following from a host: |br|
.. prompt::
:prompts: #
ssh root@ "sudo date -s '$(date +'%Y-%m-%d %H:%M:%S')'"
If logged in as root, switch to the weston user.
.. prompt::
:prompts: #
su - weston
+-----------------------------------+------------------------+
| Module | Branch Name |
+===================================+========================+
| TX6, TXUL | ``tx6`` |
+-----------------------------------+------------------------+
| TXMP, QSMP | ``txmp`` |
+-----------------------------------+------------------------+
| TX8M, TX8P | ``tx8`` |
+-----------------------------------+------------------------+
| QSXP, QSXM, QS8M | ``qs8`` |
+-----------------------------------+------------------------+
| QSRZ, TXRZ | ``rz`` |
+-----------------------------------+------------------------+
Get our Demo application by cloning it from GitHub. Select the correct branch for your module.
.. prompt::
:prompts: #
git clone https://github.com/karo-electronics/electron-demo.git -b
Change into the *electron-demo* folder and install the npm dependencies.
.. prompt::
:prompts: #
cd electron-demo
npm install
Start the application.
.. prompt::
:prompts: #
npm start
.. tip:: You may need to explicitly set the display variable for X11. |br|
.. prompt::
:prompts: #
export DISPLAY=:0
.. hint:: Depending on the used module, you may need to add the flag ``--use-gl=egl`` to get GPU acceleration.
Remote Debugging
----------------
For remote debugging we will run the **test** entrypoint, which opens the port **9223** for remote debugging.
.. prompt::
:prompts: #
npm test
On our host we now have to open two SSH tunnels.
.. prompt::
:prompts: $
ssh -L 9222:localhost:9223 root@
ssh -L 9221:localhost:9229 root@
When the application is started the debug ports should be forwarded to your host.
Next open Chrome and goto: ``chrome://inspect``
Press :kbd:`Configure...` and configure like shown below.
.. figure::images/configure-debug.png
:scale: 100 %
:align: left
:figwidth: 100 %
Then the nodejs main process and the frontend should both appear and you're able to inspect/debug each of them.
.. figure::images/devtools-devices.png
:scale: 100 %
:align: left
:figwidth: 100 %
After clicking **inspect** you're able to remote control the application and debug the frontend.
.. figure::images/frontend-debug.png
:scale: 100 %
:align: left
:figwidth: 100 %
.. _`qsmp-1570-electron-demo.zip`: https://www.karo-electronics.com/fileadmin/download/demos/qsmp-1570-electron-demo.zip
.. _`Download Area`: https://www.karo-electronics.com/downloads