Update web tutorial

developerGuide/software/build/webapp/firstApp.rst

@@ -2,13 +2,13 @@ Creating first app
 ##################
 
 Before you start creating your first application you need to set your development environment. Instructions how to do
-that are in article :ref:`Setting development environment <ssh>`. Also it's recommended to read brief System overview in order to 
+that are in article :ref:`Setting development environment <ssh>`. Also it's recommended to read brief System overview in order to
 understand what are the main components of system and how they communicate with each other.
 
 Preparations
 ************
 
-First of all you need to connect to your Red Pitaya via SSH. Follow this instructions SSH connection or simply open 
+First of all you need to connect to your Red Pitaya via SSH. Follow this instructions SSH connection or simply open
 SSH shells in Eclipse.
 After successful connection execute rw command in order to make file-system writable:
 
@@ -30,15 +30,15 @@ After installing you should configure it:
 
    $ git config --global user.name "username"
    $ git config --global user.email "username@mail.com"
-   
+
 where ``username`` is your or any other name, and ``username@mail.com`` is your email.
 
 
 When these steps are done go to root directory and clone Red Pitaya Project:
 
 .. code-block:: shell-session
 
-   $ cd /root/ 
+   $ cd /root/
    $ git clone https://github.com/RedPitaya/RedPitaya.git
 
 
@@ -53,11 +53,11 @@ As you know from System overview application contains two parts. They are fronte
 required files for working with hardware of Red Pitaya. You can find your applications in::
 
    /opt/redpitaya/www/apps/
-   
+
 This is done for ease of use all applications. All available FPGA images can be found here::
 
     /opt/redpitaya/fpga
-    
+
 All libraries you may need to link your app with can be found here::
 
     /opt/redpitaya/lib
@@ -66,12 +66,12 @@ All libraries you may need to link your app with can be found here::
 Project structure
 *****************
 
-Each application folder contains both frontend and backend files in same location. Using specific directory structure 
-you will not have a mess between UI files and your controller. Frontend is web-based application so it requires HTML 
+Each application folder contains both frontend and backend files in same location. Using specific directory structure
+you will not have a mess between UI files and your controller. Frontend is web-based application so it requires HTML
 code for layout, CSS for elements styles, and JavaScript for application logic. Let have look on it first.
-At first you need to copy "1.template" folder to "/opt/redpitaya/www/apps" directory and rename it, for example 
+At first you need to copy "1.template" folder to "/opt/redpitaya/www/apps" directory and rename it, for example
 "myFirstApp".
-   
+
 .. code-block:: shell-session
 
    $ cd /opt/redpitaya/www/apps
@@ -93,7 +93,7 @@ You can edit application name & description in /info/info.json file. ::
 
 Application icon image is "/info/icon.png". You may also change it.
 
-Modify application title in index.html file:  
+Modify application title in index.html file:
 
 .. code-block:: html
 
@@ -116,12 +116,12 @@ Modify application title in index.html file:
     </html>
 
 
-Obviously you may want to have your own unique look of application. For that case you need to edit file:: 
- 
+Obviously you may want to have your own unique look of application. For that case you need to edit file::
+
    css/style.css
 
 
-By default it contains this code: 
+By default it contains this code:
 
 .. code-block:: html
 
@@ -154,14 +154,14 @@ JavaScript application establishes connection with your Red Pitaya::
 You should change application id to name of your application folder. From::
 
     APP.config.app_id = '1.template';
-    
+
 to::
 
     APP.config.app_id = 'myFirstApp';
 
 
-Entry point of JS is **APP.startApp().** It sends request for loading application status. If status is not "OK" request 
-will be sent again. If application was loaded JS application tries to connect to Red Pitaya via WebSocket calling 
+Entry point of JS is **APP.startApp().** It sends request for loading application status. If status is not "OK" request
+will be sent again. If application was loaded JS application tries to connect to Red Pitaya via WebSocket calling
 **APP.connectWebSocket().**
 
 .. code-block:: html
@@ -180,7 +180,7 @@ will be sent again. If application was loaded JS application tries to connect to
 
        APP.ws.onopen = function() {
            $('#hello_message').text("Hello, Red Pitaya!");
-           console.log('Socket opened');               
+           console.log('Socket opened');
        };
 
        APP.ws.onclose = function() {
@@ -189,7 +189,7 @@ will be sent again. If application was loaded JS application tries to connect to
 
        APP.ws.onerror = function(ev) {
             $('#hello_message').text("Connection error");
-            console.log('Websocket error: ', ev);         
+            console.log('Websocket error: ', ev);
        };
 
        APP.ws.onmessage = function(ev) {
@@ -213,19 +213,23 @@ Backend is a C/C++ application which controls Red Pitaya peripherals. Source cod
 | **const char *rp_app_desc(void)** - returns application description
 | **int rp_app_init(void)** - called when application was started
 | **int rp_app_exit(void)** - called when application was closed
-| **int rp_set_params(rp_app_params_t *p, int len) -** 
-| **int rp_get_params(rp_app_params_t **p) -** 
-| **int rp_get_signals(float ***s, int *sig_num, int *sig_len) -** 
+| **int rp_set_params(rp_app_params_t *p, int len) -**
+| **int rp_get_params(rp_app_params_t **p) -**
+| **int rp_get_signals(float ***s, int *sig_num, int *sig_len) -**
 | **void UpdateSignals(void)** - updates signals(you should set update interval)
 | **void UpdateParams(void)** - updates parametes(you should set update interval)
 | **void OnNewParams(void)** - called when parameters were changed
 | **void OnNewSignals(void)** - called when signals were changed
-| **void PostUpdateSignals(void)** - 
+| **void PostUpdateSignals(void)** -
 
 This functions are called by NGINX. We will add some code into this part later.
 
 Also there is a file called **fpga.conf**. It defines which FPGA image is loaded when application is started (FPGA images are located in /opt/redpitaya/fpga).
 
+.. note::
+
+    In OS 2.0, the fpga.conf file has become deprecated and is no longer used. The new file for loading fpga is called **fpga.sh**. Also, the method of loading FPGA has changed, as xdevcfg has also become deprecated and does not work on the latest versions of the linux kernel.
+    See the example for more details: :ref:`Add a button to control LED <ABCLED>`
 
 Compiling application
 *********************
@@ -238,7 +242,9 @@ To compile application run in /opt/redpitaya/www/apps/**<your_app_name>** folder
    $ make INSTALL_DIR=/opt/redpitaya
 
 
-Compiling process will start. After comping will be created file “controller.so”. Try to connect to Red Pitaya in 
-browser. Application should appear in the list. Notice: compiling is needed if you haven't compile it yet or change 
-source files. If you change only WEB files don't recompile.   
-
+Compiling process will start. After comping will be created file “controller.so”. Try to connect to Red Pitaya in
+browser. Application should appear in the list.
+
+.. note::
+    Compiling is needed if you haven't compile it yet or change source files. If you change only WEB files don't recompile.
+

developerGuide/software/build/webapp/sysOver.rst

@@ -2,7 +2,7 @@
 System overview
 ###############
 
-Almost all applications on Red Pitaya are made of two parts. We call them frontend and backend. You can see them on 
+Almost all applications on Red Pitaya are made of two parts. We call them frontend and backend. You can see them on
 the picture below.
 
 |
@@ -11,15 +11,15 @@ the picture below.
 
 |
 
-Everything that works in your browser and you can see it this is the frontend. This is the part that can visualise 
+Everything that works in your browser and you can see it this is the frontend. This is the part that can visualise
 data on screen or change some parameters to adjust settings inside your applications. Other things that are connected
-with hardware on Red Pitaya's board are called the backend. You can't see this application directly but this is the most 
-important part of application which can help you to control hardware. Backend has ability to work with Digital PINS, 
+with hardware on Red Pitaya's board are called the backend. You can't see this application directly but this is the most
+important part of application which can help you to control hardware. Backend has ability to work with Digital PINS,
 control LEDs on board, load FPGA image, work with fast inputs and outputs and lots of other things.
-The frontend and backend require communication within each other. This is mostly done with Red Pitaya network APIs which 
-are technically based on extended websocket connection. When you're writing your application you don't need to think 
-about communication and data transfer. Our network APIs take care about data transfer. All you need is simply follow 
-of some rules. You can read about this rules in How to 
+The frontend and backend require communication within each other. This is mostly done with Red Pitaya network APIs which
+are technically based on extended websocket connection. When you're writing your application you don't need to think
+about communication and data transfer. Our network APIs take care about data transfer. All you need is simply follow
+of some rules. You can read about this rules in How to
 :ref:`add a button to control LED <ABCLED>`.
 
 
@@ -32,7 +32,7 @@ Frontend
 
 |
 
-Frontend is that thing that you can see on your screen. We prefer to use high technologies for creating modern looking 
+Frontend is that thing that you can see on your screen. We prefer to use high technologies for creating modern looking
 applications with lots of possibilities. It's HTML5 for layout, CSS3 for element styles and JavaScript for
 creating fast and reliable web applications. Using all these tools you can create lots of innovative applications.
 
@@ -42,12 +42,12 @@ creating fast and reliable web applications. Using all these tools you can creat
 
 |
 
-The basic idea of the frontend is to visualize data from Red Pitaya. And this should be it! You don't need to do lots of 
+The basic idea of the frontend is to visualize data from Red Pitaya. And this should be it! You don't need to do lots of
 calculations inside UI. Let your Red Pitaya do this. So here is typical workflow of application:
 
     - User changes some settings in application in Web UI
     - Web UI may apply them immediately on the screen or
-    - Web UI may send them to controller for some specific calculations on device, for changing device state or for 
+    - Web UI may send them to controller for some specific calculations on device, for changing device state or for
       something else
     - Controller (= Backend) applies them to internal variabale and change device state (if necessary)
     - Controller does some calculation according algorithms and as result it can return
@@ -62,29 +62,40 @@ Backend
 ==========
 
 In general backend is your Red Pitaya. But when we're talking about your application backend is controller of your
-application. Controller is shared linux library with .so extension. It operates with specific memebers which are 
-called Parameters and Signals. First of them are needed for handling state of important variables of your app. 
-Another one are needed for collecting number of data inside one container. You can use lots of them at the same time. 
+application. Controller is shared linux library with .so extension. It operates with specific memebers which are
+called Parameters and Signals. First of them are needed for handling state of important variables of your app.
+Another one are needed for collecting number of data inside one container. You can use lots of them at the same time.
 None of them are necessary, so if you don't need singlas in your application you may not use them.
 
 |
 
   .. figure:: Backend.png
 
 |
-  
-System base on Nginx as fast platform for Web applications. Nginx allows us to load modules in runtime without 
+
+System base on Nginx as fast platform for Web applications. Nginx allows us to load modules in runtime without
 restarting system.
 
 Here is typical workflow of executing application:
 
     - Nginx always works as web server for providing Web UI.
     - When you click on your application in main menu Nginx will proceed with this steps:
-    
+
         - It opens your application user interface
         - It loads specified FPGA image using APIs. If there was not any image specified it leaves current image. Make sure that you're using correct image when you're developing your own application
         - It loads controller of your application
         - When controller is loaded it starts WebSocket connection. Also it notifies UI that application was loaded. This means that JavaScript code can establish WebSocket connection
         - During application workflow JavaScript and Controller can send data in JSON format to each other
         - If controller needs to get some data from peripheral devices it can request this data from Red Pitaya APIs
         - APIs can manipulate data inside FPGA
+
+Step-by-step examples of creating your own web application are here: |web_tutorial|
+
+
+.. note::
+
+   Nginx can only load one module at a time. If the next module is loaded, the previous module will be unloaded from memory. Keep this in mind when developing web applications for Red Pitaya. If internal errors occur in the module, nginx does not reload the module again. This should be taken care of by the application developer.
+
+.. |web_tutorial| raw:: html
+
+    <a href="https://github.com/RedPitaya/RedPitaya/tree/master/Examples/web-tutorial" target="_blank">Web Tutorial</a>

developerGuide/software/build/webapp/webExamples.rst

@@ -4,14 +4,13 @@ Examples
 
 .. toctree::
    :maxdepth: 2
-    
-   
+
+
    webexamples/addLEDbut
    webexamples/Ravoltagesi
    webexamples/Ravoltagesig
    webexamples/Ravoltagesiggo
    webexamples/genVolt
-   webexamples/nginx 
-   webexamples/upMarket
+   webexamples/nginx
    webexamples/simpleExample
-   
+

developerGuide/software/build/webapp/webexamples/addLEDbut.rst

@@ -22,11 +22,19 @@ Pitaya using parameters.
 
         .. group-tab:: OS version 2.00
 
+            In OS version 2.0, the algorithm for loading an FPGA has changed. The **fpgautil** utility (*/opt/redpitaya/bin/fpgautil*) is used to load the FPGA. Also, the FPGA file format has changed from |xlinx_doc|.
+            A script is used to load FPGA into memory: **overlay.sh**. It loads the overlay for the devices used in the FPGA as well as the FPGA bin file.
+
             .. code-block:: shell-session
 
                 redpitaya> overlay.sh v0.94
 
 
+
+.. |xlinx_doc| raw:: html
+
+    <a href="https://xilinx-wiki.atlassian.net/wiki/spaces/A/pages/18841847/Solution+ZynqMP+PL+Programming#SolutionZynqMPPLProgramming-BitstreamFormat" target="_blank">bit to bin</a>
+
 Web UI
 ******
 
@@ -93,7 +101,8 @@ Red Pitaya can update real LED state.
         APP.ws.send(JSON.stringify({ parameters: local }));
     });
 
- .. note::
+.. note::
+
     Parameter that transfers local LED state to Red Pitaya backend is called LED_STATE. You can change name of this
     parameter, but don’t forget to use the same name also in controller.
 

developerGuide/software/build/webapp/webexamples/genVolt.rst

@@ -1,8 +1,8 @@
 Generating voltage
 ##################
 
-Take Reading analog voltage from slow inputs :ref:`example <ReadAVSI>` as a basic application for this example, because it is the 
-simplest way to check generating voltage using one device. In this program we will set frequency, amplitude and 
+Take Reading analog voltage from slow inputs :ref:`example <ReadAVSI>` as a basic application for this example, because it is the
+simplest way to check generating voltage using one device. In this program we will set frequency, amplitude and
 waveform of generating signal.
 
 
@@ -73,7 +73,7 @@ In **main.cpp** (controller) we added three 3 parameters:
     CIntParameter WAVEFORM("WAVEFORM", CBaseParameter::RW, 0, 0, 0, 2);
 
 
-Minimum frequency is 1Hz and maximum - 20Hz. Minimum amplitude is 0 and maximum is 0.5, because our program can read 
+Minimum frequency is 1Hz and maximum - 20Hz. Minimum amplitude is 0 and maximum is 0.5, because our program can read
 voltage from slow inputs in range 0-3,3V and generator’s range is -1V +1V. We should set offset +0.5V and limit
 amplitude’s maximum to 0.5V to get a signal in range 0V-1V(-0.5V + 0.5V is a range of generating signal and +0.5V
 offset).
@@ -90,7 +90,7 @@ value description
 ===== =============
 
 
-There is a new function - **set_generator_config()**. In this function we configurate output signal. This api function 
+There is a new function - **set_generator_config()**. In this function we configurate output signal. This api function
 sets frequency of our signal. Signal will be gererated on output channel 1(**RP_CH_1**).
 
 .. code-block:: c
@@ -128,7 +128,7 @@ And setting waveform:
         rp_GenWaveform(RP_CH_1, RP_WAVEFORM_SQUARE);
     }
 
-There can be other waveforms: **RP_WAVEFORM_TRIANGLE** (triangle), **RP_WAVEFORM_RAMP_DOWN** (reversed sawtooth), 
+There can be other waveforms: **RP_WAVEFORM_TRIANGLE** (triangle), **RP_WAVEFORM_RAMP_DOWN** (reversed sawtooth),
 **RP_WAVEFORM_DC** (dc), **RP_WAVEFORM_PWM** (pwm), **RP_WAVEFORM_ARBITRARY** (defined wave form).
 
 
@@ -138,20 +138,20 @@ In **rp_app_init()** we should set up signal and turn it on:
 
     set_generator_config();
     rp_GenOutEnable(RP_CH_1);
-
+    rp_GenResetTrigger(RP_CH_1);
 
 In **rp_app_exit()** disable signal:
 
 .. code-block:: c
 
-    rp_GenOutEnable(RP_CH_1);
+    rp_GenOutDisable(RP_CH_1);
 
 
 And in OnNewParams() update parameters:
 
 .. code-block:: c
 
-    
+
     FREQUENCY.Update();
     AMPLITUDE.Update();
     WAVEFORM.Update();