   .         Python  web-
 


      ,   ,    -    .         (Arduino, ESP32)       Python  -.

     ,      .

          .  ,     .exe  ,        (Eel, Electron, Neutralino)  .     :    ,       .    ,       .           .





 

   .         Python  web-



   

     -  Python  web-



 




.     


      .

     .  , , .  Arduino  ESP32,    24/7. COM-,     . , , .   ,    .

     .    ,  ,  , -.   ,    .

     .

,    ,      Excel. -   ,       . Python-  ,     GUI  .

 ,    ?

,      Arduino  COM-          ? ,      Python       ,      ? ,      ESP32      ?

   .      : Python Eel, Electron  Neutralino.

       .

  ?    ?

        ,    .   ,    .   -    COM-.   Arduino         .      ,   ,    :   ,       ?

   ,          .

   :








 1.    



 :    

          ?.      .          .

     :

 1: ,     .

 2:  Python Eel      .

 3:  Arduino     COM-.

 4:   IoT     ESP32    MQTT.

 5:        .

 :  

         .  ,  Arduino   ?     ?

    ,     (DEBUG_MODE).       ,    .     35            .

   ?

     ,     :

      Arduino/ESP32

     Chart.js + Python

  COM-  pyserial,  

IoT-  MQTT, HiveMQ Cloud, GitHub Pages

  .exe  PyInstaller,    

   ,   ,      GitHub:

https://github.com/Book-From-the-sensor-to-the-interface/sketch_for_book.git

     .   .       .            ,      ,     .

      ?    .

  ,

 .




 1.     





   ?



   ?

, ,  :   ,   Excel  Serial Monitor?

    .               .

       ,       :

 ( )

   (COM-, GPIO, )

  ( ,  ,  )

   (   ,  )

 ,   ,         ,    ,   .




1.1. Excel      


:    .        100 ,        ,  ,       .

 Excel:

    COM- (   ).

        .

       .

 Serial Monitor (Arduino IDE):

 ,  .

      (CSV/JSON).

   .

       .   .




1.2.  1:   


- ( )   .   ,     ,   USB- (  API).

 -:

   COM-  ( Python pyserial).

     (SQLite)  .

 , ,    .

.     .    10   ,          .    .    Python Eel  .




1.3.  2:    


  .   1000      .

 - (Chart.js, Plotly)   ,      .

  UI:

 :      .

:   , ,  .

 :    ,    .




1.4.  3:  


    . , ,      .

-   .  :

  .

   .

        ( ).

.        .       24/7.   ,   ,     .




1.5.  4:   


  .               .

  :

   (  50C,  5 ,  ).

   .

    (PDF/Excel).




1.6.     ?


 .     .

  , :

      (  + ).

  (   2   ).

    (, LabVIEW),     .

         ,       UX      .




1.7.   ?


  (Excel, Serial Monitor)     .

   :   , , , .

  (Eel, Electron)   -    UI.

              .

-.  

     ,      (:    ,   ,  ).

  :

2.a.     ?

2.b.       ?

2.c.     (, , , )     ?

,         .

 23 :      ?

.       .       .       4  ,       CSV.   30    .

         GUI (Tkinter, PyQt)   -,         .




 :  GUI (Tkinter, PyQt) vs WEB-



   ?

  ,    .    :   ?

   Python,       .   :     ,  ,    .

      :

 GUI (Tkinter, PyQt)   Python-.

- (Eel, Electron)    Python + HTML/CSS.

           .

    -  .

 ,          Python + Web,   -     Tkinter.




2.1.  : Tkinter  PyQt


 Python-   ,    Tkinter.    Python,       .

  Tkinter:








. 2.   Tkinter



  GUI:

:      ( PyQt).

˸: Tkinter        .

 :     -,     .

  :

:      Tkinter  ( matplotlib,      ).

¸:   ()  Tkinter    .       .

  PyQt: PyQt ,      (/),     Qt-.

 . Tkinter     /.        ,            ,      .




2.2.  : - (Hybrid Apps)


 :   Python,   .

  backend  Python (  COM-, ),  frontend   HTML/CSS/JS (,  Chart.js).   (Eel, Electron)  .

  Eel:








. 3.   Eel










. 4.   Eel ()



 -:

:   Chart.js  Plotly       .

¸: CSS     .    ,   .

 :   Python,  (  )   .

:

:         ( Eel   ,  ).

:    HTML/JS (        ).

.      Eel,       Python-. Electron ,    Node.js,     .




2.3.  :   ?


     . ,        .








. 5.



:            , -      .




2.4.    Eel   ?


     Electron, NW.js  Eel  .      :

Python   .    Arduino,        Python. Eel     .

Electron .   Node.js    .           .

Eel   .       -.    Python  JS   ,     Python.

 .   -.  -     ,  Python    .




2.5.  -   Tkinter?


   .  ,  -  :

 .        ,    5 .

   .       2  .     .

 .         (,  ).

  90%       (Python + Web)   .

  ?

 GUI (Tkinter) ,      .

-        .

Eel   :   Python,   HTML.

    :    ,  -  Tkinter.

      Eel     .

-.  

      Tkinter   - (,  Grafana   -).

  :

2.a.    ?

2.b.    ?

     (  1):

?       Tkinter,       ?

?   Eel       Chart.js?

   (23 ):       ?

.      4    .  Tkinter       matplotlib.  Eel     Chart.js  1 .  Eel.

       : Python Eel, Electron  Neutralino.      ,  Eel     .




  : Python Eel, Electron, Neutralino.      



   ?

  ,       -     .

         :

Python Eel     Python-.

Electron      .

Neutralino      Node.js.

    :

.         .

.       .

.          .

.          .

       ,  ,    .




3.1. Python Eel:    


  

Eel   2017    :

    HTML/CSS/JS  ,      Python?

   Electron  Neutralino, Eel   .   :

  -  Python ( bottle  gevent-websocket).

    (Chrome, Edge, Safari).

 Python  JavaScript  HTTP/WebSocket.

 Eel:

  -.  -     ,  Python    .

 








 2.  



.    

  : 10  Python + 10  HTML =  .

    Python: pyserial, pandas, numpy, scikit-learn, opencv     .

  :    JavaScript      .

    GUI:  ,  , .

.  

     API :  , ,    ( .   pystray).

  UI:   (drag-and-drop, )  ,   Electron.

 :   Python ? JS   HTTP/WebSocket (   95% ).

  .exe:  PyInstaller,       .

  .   Arduino

    Eel-   (  ):








. 6.










. 7. Python Eel:     ()



   :

      Arduino

     Chart.js + Python

  .exe  PyInstaller,    

.        Eel   ,        : Python  , HTML  .




3.2. Electron: -   


  

Electron   2013    GitHub      Atom.   :

      ,    ,    ?

 Electron:

׸  : Main- (Node.js)  , Renderer- (Chromium)   UI.

   ,   .

 








 3.  



.  

 : electron-builder, DevTools, TypeScript-.

׸    .

   .

   API : , , ,     .

   -: React, Vue, Svelte.

.    

  :      Chromium (~150  ).

  :  ~5070    Hello World.

  :   IPC, preload, sandbox.

  Node.js:     Python    Flask- .

  . Electron + Python (Flask)

  Electron       Python-:








. 8.



  :

   UI (,    ).

  ( , , ).

   (, , ).

.      . Electron       ,       .




3.3. Neutralino: ˸  


  

Neutralino      (  2020 ).  :

       Node.js    .

 Neutralino:

  WebView ( Eel),    API   Node.js.

 








 4.  



.  

 :  ~25  ( 1020   Electron!).

  Node.js:  ,  .

 WebView:  Edge WebView2 (Windows), WebKit (macOS), GTK (Linux).

 API:    , ,     .

:   ,  Node.js  .

.  

 :  , ,  .

 API:  ,    Electron,   .

  JavaScript:    JS, Python  .

  : DevTools ,    ,   Electron.

  . ˸  








. 9. ˸  



  :

    ( ).

    (,    ).

 UI (, , )   .




3.4.    









 5.



*  Eel    Python-: pandas + numpy ? +50 , torch ? +500 .




3.5.   ?


 -

 Python Eel, .  Python Eel, :

    Python (pyserial, pandas, numpy).

UI : , , , .

    (, ).

 :   ,   .

    /.

.    80%  .

 Electron, .  Electron, :

   UI (, IDE, ).

     .

   (, , , ).

    ( ).

  JavaScript ,  Python.

 Neutralino, .  Neutralino, :

   (< 20 ).

    (   ,  ).

 UI,     (, ).

    Node.js.

    .




3.6.     


     Electron, NW.js  Eel  .      :








. 10.



 .   -.  -     ,  Python    .




3.7.  :  Arduino  


        :








. 11.         



  ?

 Eel           .

 COM-        .

 IoT    ESP32    .

  Electron     ,    .

  ?

Eel    Python-,   GUI    JavaScript.

Electron    ,   ,   .

Neutralino         .

          .

   Eel      Python    .

-.  

   :

A)      4   (COM-, ,   CSV).

B) -      (  ,    ).

C) ˸     ( < 20 ,      ).

  :

2.a.     .

2.b.     (: Eel,      Python  UI ).

:         ?

?    ?

 .  :

A) Eel    Python (pyserial), UI  ( Chart.js),   .

B) Electron + Flask     ,  ,  .

C) Neutralino   ,    ,  UI.

     ,  ,      :   Eel, Electron  Neutralino?   ,    .




 :    ?



   ?

     :

Python Eel   ,    Python.

Electron       UI.

Neutralino       .

       .     :

.         (, , ).

.        .

.        ,      (, COM-, ).

        ,       .




4.1.    


   ,    .      .

1.      ?

Python? ?  , Eel.

: pyserial, pandas, numpy     .      JavaScript.

JavaScript/TypeScript? ? Electron  Neutralino.

:      JS (, -),    Python-.

2.    ?

 , , ? ? Eel  .

:   Arduino,  .

 , drag-and-drop,  ? ? Electron.

: IDE,   .

,  ? ? Neutralino.

3.       ?

COM-, GPIO, ? ? Eel ( Python)  Electron ( Node.js).

:  Eel    serial.Serial().  Electron   npm-   preload.

,  , ? ? Electron ().

:  Eel  .  (pystray),  Neutralino   API.

4.   ?

   / ? ? Eel  Neutralino.

:    .exe  .

  ( )? ? Electron.

:  ,  ,   ,  .

5.      ?

   < 20 ? ? Neutralino.

: Electron  ~150    Hello World. Eel    (pandas + numpy = +100 ).

 > 300   ? ?  Electron   .

:   Electron    Chromium.




4.2.  :  


   . ,           .








 6.



.  Eel    Python-.    30 .  pandas + numpy     150 .




4.3.  :  


  :

 1:    Python?

 ?    2.

 ?    Electron  Neutralino.

 2:    UI (, )?

 (, , ) ? Python Eel.

 ? Electron ( Python-  Flask/SocketIO).

 3:     (< 20 )?

 ? Neutralino (     JS   Python- ).

 ?   Eel.

 4:     COM-?

 ? Eel     (pyserial).

.     . ,     Python ( subprocess  Electron), UI   React.       .




4.4.       ?


         .  !

 , :

    5  ?    Tauri (Rust + WebView).

:  , .

:   Rust  .

   (, 3D) ?   (C++, C#, Qt).

:    .

:   ,  .

    ? Electron/Eel/Neutralino    iOS/Android.

: Flutter, React Native  Kivy (Python).

. Tauri    Electron    ~35 ,     Rust.       ,      Python  -  .




4.5.   









 7.




4.6.     


     Electron, NW.js  Eel  .      :








 8.



 .   -.  -     ,  Python    .

  ?

     ,    .

    : Python ? Eel, JS ? Electron/Neutralino.

Eel     (COM-, , Python-).

Electron       .

Neutralino         .

       .

-.  

      (12 ).

:         .

      4.3.

 :








 9.



 :       ?

 .  :

:     Arduino.

: Python (pyserial, threading).

UI:  ,  /.

API: COM- .

: Eel  ,       Python        GUI  HTML/Chart.js. Electron , Neutralino      Python.

      .

  2    Python Eel:        .

  3  Arduino     COM-.

  4   IoT  ESP32  MQTT.

     !




 2. Python Eel    





   Eel. ,  ,  



   ?

  Python Eel     ,        .

       .    :

 Eel   .

      .

    10 .

       .

,  Python  JavaScript   .

       ,       , ,   COM-.




5.1.  Eel?   



   ,    :   Eel?








 10.



 .     -.      Python-   . Eel   .

Eel   ,   .

Python   : , COM-, , .

HTML/CSS/JS   : , , .

Eel      .




5.2.  Eel: 



Eel      Python  pip.

 1.  Python

,     Python 3.7  :








. 12. ,     Python 3.7  



.      Python,  py -3 --version (Windows)  python3 --version (macOS/Linux).

 2.    ()

      :








. 13.       



.   ?       .exe ( 8), PyInstaller    ,     .       .

 3.  Eel








. 14.



 4.  

  test.py  :








. 15.   test.py  



     !




5.3.  :    



           .

   Eel-:








. 16.    Eel-



 :  HTML/CSS/JS-    ,     eel.init().     www.

  ?








 11.   ?




5.4.  :  



  ,      Python  JavaScript.

 1: main.py ()








. 17.  1: main.py ()










. 18.  1: main.py () ()










. 19.  1: main.py () ()



 .  @eel.expose     JavaScript.      Python.

 2: www/index.html ()








. 20.  2: www/index.html ()










. 21.  2: www/index.html () ()










. 22.  2: www/index.html () ()



 3: www/style.css ()








. 23.  3: www/style.css ()










. 24.  3: www/style.css () ()










. 25.  3: www/style.css () ()










. 26.  3: www/style.css () ()










. 27.  3: www/style.css () ()



 4: www/app.js ( )








. 28.  4: www/app.js ( )




5.5.  



 1.   








. 29.



 2.  ?

Python   - (  http://localhost:8000).

     .

       .

 3.  

 220   .

 5   .

  .

 : : 1100.00 

!         Python Eel!




5.6.   ?   



 ,    ,    .








. 30.



 :

 : Eel  --  Python ( bottle  gevent-websocket).

 : Eel    ( Electron).     Chrome, Edge  Safari.

  : eel.func()()      Python,      Promise.




5.7.   Eel



Eel     :








 12. Eel     



  :








. 31.   




5.8.    










 13.




5.9.    :  



       COM-  Arduino.         ?

    (DEBUG_MODE)   .

      main.py:








. 32.       main.py



.       10,      :   ,   .

  ?

Eel   1   pip install eel.

 : main.py +  www/  HTML/CSS/JS.

 Python ? JS:  @eel.expose +  eel.func()().

    10     .

       .

         .exe.

-.  

      5.3.

    .

 :

3.a.   :  ().

3.b.  Python- calculate_resistance(voltage, current),      : R = U / I.

3.c.       .

   :

4.a.     (800, 600).

4.b.  mode='chrome'  mode='edge'    ?

  :

5.a.  ,   0      ?

5.b.    Python      .

.    3.b:








. 33.    3.b



       :     (, ),   JavaScript  Python    .         .




 Python  JS.  ,  ,    UI



   ?

      Eel  ,  Python  JavaScript   .       ,   .

    :

  Python-  JavaScript ( )   .

     , , JSON-.

 UI    COM-    .

  threading ()  *    .

      .

         * -     ,       (  ). :    ,   ,    API,  (  ),   .

      ,        ,   .




6.1.  :   



Eel    Python  JavaScript   -.      JS  Python ( ),     .








. 34.



 : Eel   .  ,  JavaScript    Python    .       await.




6.2.  Python  JavaScript:  



 

     Python-  JavaScript:








. 35.      Python-  JavaScript



   ?

   .  :








. 36.    .  



. await eel.function_name(args)()     Eel.

 

Python-   JavaScript   Promise:








. 37. Python-   JavaScript   Promise










. 38. Python-   JavaScript   Promise ()




6.3.   



Eel   ,     JSON:








. 39. Eel   ,    



:  








. 40. :  










. 41. :   ()



:     








. 42. :     










. 43. :      ()




6.4.  JavaScript  Python



     Python  ,      .

 








. 44.  










. 45.   ()



. JS-,   Python,    ( window).   const  let   function  window.functionName.




6.5. :    UI



      .

:    COM-

,      Arduino:








. 46. ,      Arduino



 :

   

Python    Arduino (  )

      

   UI 

. threading   

     :








. 47.      










. 48.       ()










. 49.       ()










. 50.       ()



 :

UI         

         

       

      




6.6.  :   



  DEBUG_MODE   .       :








. 51.










. 52.  :    ()










. 53.  :    ()



.       .    ,  Arduino   .




6.7.     



Python ? JavaScript








. 54. Python ? JavaScript










. 55. Python ? JavaScript ()



JavaScript ? Python








. 56. JavaScript ? Python










. 57. JavaScript ? Python ()




6.8.    










. 58.



  ?

 Python  JS: await eel.function_name(args)()     .

 JS  Python: eel.js_function()()     .

 :   JSON-  (, ).

:   (COM-, )    threading.

 :     DEBUG_MODE.

 :   success/error  .

-.  

   :

1.a.       EMULATOR.

1.b.       .

1.c.     .

1.d.      .

  :

2.a.  DEBUG_MODE = True   main.py.

2.b.   emulate_data()    .

2.c. ,     Arduino.

  :

3.a.  ,   ?

3.b.  ,      ?

3.c.      .

  :




  .


   .

   ,     (https://www.litres.ru/book/navi-tulag/ot-datchika-do-interfeysa-prakticheskoe-rukovodstvo-po-sozdaniu-73829051/)  .

      Visa, MasterCard, Maestro,    ,   ,     ,  PayPal, WebMoney, ., QIWI ,       .


