fbpixel
Creating an application with React Native and VSCode

Creating an application with React Native and VSCode

In this tutorial, we’ll look at how to program a smartphone application using React Native and VSCode. React Native is a powerful tool for creating cross-platform applications (Android, IOs) using the JavaScript language. Visual Studio Code is a code editor for development in C++, Python and React Native.

We’ve already seen how to create an Android application with App Inventor 2 in the context of an Arduino or Raspberry Pi project. With React Native, although more complex, you’ll be able to create more advanced applications and develop on Android and IOs.

Installing Node.js

Node.js is a Javascript runtime environment for back-end and front-end development.

To install Node.js on your Windows computer, simply download the installer

Once you’ve installed Node.js, you’ll have access to npm (Node Package Manager), which lets you install the necessary packages.

Installing and configuring Android Studio

Download and install Java JDK 11

Configure JAVA_HOME in environment variables (C:\Program Files\Microsoft\jdk-11.0.17.8-hotspot\)

Download and run the Android Studio installer

Configure ANDROID_HOME in environment variables (C:\Users\ADMIN\AppData\Local\Android\Sdk)

Open Android Studio. On the Home window, click on Configure then AVD Manager

Here you can define the virtual devices on which to test your application.

N.B.: The installation and configuration of Android Studio and the correct operation of virtual devices may depend on the installation of Android SDK, Java SDK and Gradle, etc. Check that the versions are compatible.

Installing and configuring Visual Studio Code

To install Visual Studio Code, simply download and run the installer

Once the software is installed, you can add the extensions required for development under React Native with VSCode.

Creating a React Native project

Create a folder containing your ReactNative project, then open it in VSCode.

In the terminal,

npx react-native@latest init CustomApp

Install dependencies with yarn and launch the application

cd CustomApp
npm install -g yarn  
yarn install
npx react-native start

Then press “a” to run it on Android

View the application on an Android device

On your Android phone, in “Settings”, go to “Additional settings” then “Developer options”. Look for the “USB debugging” option and enable it. This will enable you to install applications via the USB port.

You can check that your device is correctly detected and configured with the adb devices command.

Once your device is correctly configured, if you relaunch the application it will be downloaded and installed on the device.

You are now able to develop and install your application on a device.

N.B.: If you have difficulty installing a simulator or if you don’t have a device, you can also view the results on CodeSandBox to test your application.

APK generation

Once your application has been tested and validated on a simulator or real device, you can generate the APK file. This file can be downloaded to any device with a compatible OS, and is used to install the application.

In the android/build.gradle file, check that the SDK version (API level) corresponds to the target platform version

buildscript {
    ext {
        buildToolsVersion = "33.0.0"
        minSdkVersion = 21
        compileSdkVersion = 33
        targetSdkVersion = 33

        // We use NDK 23 which has both M1 support and is the side-by-side NDK version from AGP.
        ndkVersion = "23.1.7779620"
    }
    repositories {
        google()
        mavenCentral()
    }
    dependencies {
        classpath("com.android.tools.build:gradle:7.3.1")
        classpath("com.facebook.react:react-native-gradle-plugin")
    }
}

At the root of the CustomApp project, enter the following commands on VS Code

cd android
./gradlew assembleRelease

It is possible to clean up the compilation before generating the build with the command

./gradlew clean

Modify application icon

Application icons can be found in the android folder

To replace the application’s default icons, you need to create icons of different sizes. This can be done easily with the IconKitchen tool, which loads an image and generates all icon formats. Once you’ve downloaded the IconKitchen-Output folder, you can replace the following folders in your project’s res folder.

  • mipmap-hdpi
  • mipmap-mdpi
  • mipmap-xhdpi
  • mipmap-xxhdpi
  • mipmap-xxxhdpi

N.B.: Modify the file name with the original file name if necessary, or change the file name in AndroidManifest.xml

React Native: best practices

There are different ways of doing the same thing, especially in programming. However, the experience of many shows that good habits allow you to work more efficiently.

  • Add TypeScript to improve code readability and prevent bugs
  • Use responsive styles that adapt to different screen sizes
  • Use platform-dependent styles
  • Prefer functional components to class components
  • Create a theme in which you specify the interface styles
  • Define the various user paths

Applications

Sources

Install PlatformIO IDE on Visual Studio Code

Install PlatformIO IDE on Visual Studio Code

In this tutorial we will configure Visual Studio Code to run C

Hardware

  • Computer
  • Arduino UNO board or other
  • USB cable to connect Arduino board to PC

Installing Visual Studio Code and PlatformIO IDE

Follow the installation steps to download .Net 6.0

Then open Visual Studio Code.

Look for PlatformIO IDE in the “Extensions” tab in the left-hand column of Visual Studio Code and click on “install”.

Once installed, close and relaunch Visual Studio Code so that the software is properly configured with PlatformIO IDE. You should then be taken to the IDE home page.

Start your first C Project with PlatformIO IDE

To do this, click on “+ New Project” and fill in the window that appears.

Here, as an example, I’ve chosen an Arduino Uno board and the framework will also be of the Arduino type, i.e. we’ll find the setup() and loop() functions in the main main file. Project creation can take a little time.

On the left-hand side of our project workspace, you’ll find a number of subfolders. The “src” folder contains the project’s source scripts, including the main “main.cpp” file, in which we’ll write our script for programming our Arduino Uno board. In this pre-built Arduino framework, you’ll notice that the “

Getting started with a C program on PlatformIO IDE

To test your first C project on PlatformIO IDE, you’ll upload a small program to flash an LED on the Arduino Uno board and get feedback via serial link on the LED’s status on the Visual Studio Code terminal.

// Ici dans l'entête du programme, on inclut les librairies et prototypes de fonctions nécessaires
#include <Arduino.h>

// Ici on met nos initialisations
void setup() 
{ 
    Serial.begin(9600); //ouverture pour communiquer via le port série
    pinMode(13, OUTPUT); //On initialise le pin 13 qui est associé à la LED en sortie pour pouvoir l'allumer et l'éteindre
} //Fin de la fonction setup()

// Ici dans la fonction loop on vient placer le script qui se répètera en boucle dans l'Arduino
void loop() 
{
  digitalWrite(13,HIGH); //Place le pin digital 13 à l'état HAUT (5V) -> Led allumée
  Serial.println("Led allumée");//Nous renvoie par la liaison série l'état de la Led Allumé
  delay(500); //Met en pause le programme pendant la valeur de 500 en ms

  digitalWrite(13,LOW); //Place le pin digital 13 à l'état BAS (0V) -> Led éteinte
   Serial.println("Led éteinte");//Nous renvoie par la liaison série l'état de la Led éteinte
  delay(500); //Met en pause le programme pendant la valeur de 500 en ms
} // Fin de la fonction

Once you’ve copied and pasted your program, you can upload it. To upload the program, there are shortcuts that you can activate by clicking on them at the very bottom of Studio Visual Code :

  1. compile the program ;
  2. compile, clean and download the program to the Arduino board (the USB PORT used is detected automatically);
  3. clean the Terminal and the connected microcontroller card (delete the script recorded on it);
  4. test the program ;
  5. open a monitor for the Serial Link and receive (or send) data from the card. When this “Serial Monitor” is open, it is impossible to upload a program. So before uploading a new program, close the monitor by clicking once on the terminal, then pressing Ctrl + C ;
  6. Opens a Terminal.

Once you’ve clicked upload, you should get a return in a terminal that confirms the compilation and upload was successful that looks like this:

Then click on the command to open a Monitor to establish the serial link.

You can then observe the LED status feedback live on the monitor.

How to install an external library on Visual Studio Code for the PlatformIO IDE

That’s all there is to it. First, download your external library. Once you’ve got a .zipp file, you need to extract it (or copy and paste the uncompressed library folder) into that folder (in this case, the library we’ll be using as an example is ServoLib, used to facilitate servo-motor control):

You can access your project’s “lib” folder, designed to host external libraries, via Visual Studio Code.

Once a library has been installed in your project, you need to include it in the program header, such as :

Now you have all the basics you need to get started with PlatformIO IDE for C programming.

Learn to code in C#

Learn to code in C#

In this tutorial we will configure Visual Studio Code to run C# scripts

Installing Visual Studio Code

Install .Net 6.0

Then open Visual Studio Code

Installing the C# extension

Check .NET installation in terminal

dotnet --version

Creating a console application

Creating a new .NET project

dotnet new console -o app
cd app
code .

Select Yes to add compilation and debug configuration

Run the C# script

To execute the C# code

dotnet run

Or select Run > Start Debugging (F5)

Adding libraries

To add libraries, you can enter the following command, replacing with the name of the package you want to install

dotnet add package  

as an option you can select the version you want to install (e.g. 1.0.0)

dotnet add package   --version 

Creating a graphical interface

You can create a graphical interface with C#

Enter the following command to create a new winforms project (Windows only)

dotnet new winforms -o appgui
cd appgui
code .

Visual Studio code will create several files to define a graphical interface. You can modify these three files to develop your interface. We’ll look at a simple example with a label and a button.

  • Form1Designer.cs

This file contains the graphic definition of each interface component and their position.

In this example, we define a label and a button contained in a groupbox.

N.B.: For each element, you must:

  • declare it: private System.Windows.Forms.Label label1;
  • create an instance this.label1 = new System.Windows.Forms.Label();
  • set parameters (if necessary) this.label1.Text = “Hello world!
  • place it in a container this.grpbox.Controls.Add(this.label1);
namespace appgui;

partial class Form1
{
    /// <summary>
    ///  Required designer variable.
    /// </summary>
    private System.ComponentModel.IContainer components = null;

    /// <summary>
    ///  Clean up any resources being used.
    /// </summary>
    /// <param name="disposing">true if managed resources should be disposed; otherwise, false.</param>
    protected override void Dispose(bool disposing)
    {
        if (disposing && (components != null))
        {
            components.Dispose();
        }
        base.Dispose(disposing);
    }

    #region Windows Form Designer generated code

    /// <summary>
    ///  Required method for Designer support - do not modify
    ///  the contents of this method with the code editor.
    /// </summary>
    private void InitializeComponent()
    {
        this.components = new System.ComponentModel.Container();
        this.AutoScaleMode = System.Windows.Forms.AutoScaleMode.Font;
        this.ClientSize = new System.Drawing.Size(400, 250);
        this.Text = "Form1";

        // components
        this.label1 = new System.Windows.Forms.Label();
        this.button1 = new System.Windows.Forms.Button();
        this.grpbox = new System.Windows.Forms.GroupBox();

        // label1
        this.label1.AutoSize = true;
        this.label1.Location = new System.Drawing.Point(50, 50);
        this.label1.Name = "label1";
        this.label1.Size = new System.Drawing.Size(50, 10);
        this.label1.TabIndex = 3;
        this.label1.Text = "Hello world!";
        //button1
        this.button1.Location = new System.Drawing.Point(50, 70);
        this.button1.Name = "button1";
        this.button1.Size = new System.Drawing.Size(50, 20);
        this.button1.TabIndex = 0;
        this.button1.Text = "Click!";
        this.button1.UseVisualStyleBackColor = true;
        this.button1.Click += new System.EventHandler(this.button1_Click);

        //grpbox
        this.grpbox.Controls.Add(this.label1);
        this.grpbox.Controls.Add(this.button1);
        this.grpbox.Location = new System.Drawing.Point(10, 10);
        this.grpbox.Name = "grpbox";
        this.grpbox.Size = new System.Drawing.Size(380, 230);
        this.grpbox.TabIndex = 0;
        this.grpbox.TabStop = false;
        this.grpbox.Text = "Group Box";
        
        //layout
        this.Controls.Add(this.grpbox);
        
    }

    private System.Windows.Forms.Label label1;
    private System.Windows.Forms.GroupBox grpbox;
    private System.Windows.Forms.Button button1;

    #endregion
}
  • Form1.cs

This file defines how the components will react.

In this example, when the button is pressed, a message is displayed in a new window

namespace appgui;

public partial class Form1 : Form
{
    public Form1()
    {
        InitializeComponent();
    }

    private void button1_Click(object sender, EventArgs e)
    {
        MessageBox.Show("Button cliked");
    }
}
  • Program.cs

This file is used to launch the application. You shouldn’t need to modify this file just yet.

namespace appgui;

static class Program
{
    /// <summary>
    ///  The main entry point for the application.
    /// </summary>
    [STAThread]
    static void Main()
    {
        // To customize application configuration such as set high DPI settings or default font,
        // see https://aka.ms/applicationconfiguration.
        ApplicationConfiguration.Initialize();
        Application.Run(new Form1());
    }    
}

If you execute the code and press the button you should get the following result

Sources


https://dotnet.microsoft.com/en-us/download/dotnet/sdk-for-vs-code?utm_source=vs-code&utm_medium=referral&utm_campaign=sdk-install

Measurement filters with Arduino

Measurement filters with Arduino

In electronics, when working with electrical signals such as sensor measurements or audio signals, it is common practice to use filters. These filters are used to modify these signals with a view to correcting, analyzing or evaluating them correctly. This is known as signal processing.

Definition of electronic signal

A signal is the representation of information passing through a system. An electronic signal is physically limited in precision, speed and range. It can also be modified by external disturbances. For example, a sensor measurement generally contains a disturbance that causes the sensor value to vary around the measured value. This disturbance is called measurement noise and can come from electromagnetic fields and the sensitivity of the sensor. This measurement noise must be neglected or eliminated using a filter to obtain a correct value.

En noir, le signal. En rouge, le signal bruité

In theory, a signal can have a simple mathematical representation as a sinusoidal function with a fixed frequency and amplitude. In practice, a signal can be described as a superposition of signals with different frequencies and amplitudes. These are the spectral components.

Electronic filter definition

In electronics, a filter is an element that modifies the spectral components of an input signal. There are three main types of filter

  • passive analogue filters using passive electronic components (resistors, capacitors, inductors)
  • active analogue filters using passive and active electronic components (transistor, operational amplifier, integrated circuit)

With analog signals, such as a sensor measurement or an audio signal, it’s common to find passive or active analog filters. Passive to filter out measurement noise; active to amplify the signal. Once the filter circuit has been installed, the filter function cannot be modified.

  • digital filters produced using a processor and a computer programme

Digital filters are managed by computer code, so they are not fixed. They are often used to process and analyze data in order to highlight certain characteristics (colors in an image, dominant frequency in a signal, etc.).

Filter types

We said that a filter modifies the spectral components of a signal. In other words, it amplifies, suppresses or attenuates a signal at a given frequency. Filters can be of different types, depending on their function:

  • low-pass: to attenuate high frequencies
  • high-pass: to eliminate low frequencies
  • band-pass: to pass a frequency range
  • notch: to attenuate a frequency range

Filter function

Electronic filters are used in many electronic systems and are often necessary for the system to function properly. A filter allows:

  • clean to get a better reading of the signal
  • remove a component at an undesirable frequency because it is parasitic or interferes with the system
  • correct to obtain a coherent signal

Example of analog filters

Analog filters are often found in audio-visual electronics. Imagine a radio on which you can boost the treble or bass.

Example of digital filters with Arduino

After these definitions, here are some common examples of signal processing with Arduino

This filter is used to remove transition noise from a digital signal, such as the detection of a push-button pressure.

The sliding average algorithm is an easy way of creating a low-pass filter and eliminating noise.

Sources

A quick look at the C pointer

A quick look at the C pointer

,

The C language pointer is a very powerful tool for carrying out certain tasks. It’s a concept you need to grasp if you want to improve your C skills. Some algorithms will be more complicated or even impossible to write without the use of pointers.

Introduction

In a program, any defined element (variables, objects, functions, etc.) is stored in memory at a specific address. To find this element, all you need to know is the memory address used by the element, or the first address used if the variable takes up several memory areas.

A pointer is a variable containing the memory address of another variable (or object). Although the value of a pointer is always an integer, its type depends on the object to which it points.

Declaring a pointer

The type of the pointer must be identical to the type of the variable it addresses.

<type> * <pointer_name> //or <type> *<pointer_name>

Ex:

float myfloat
float * myfloataddress;
int myint
int * myintaddress;

We can therefore initialize the variable and its address on the same line

int i,*pi;

Operation on pointers

The address of a variable is an integer. It is therefore possible to add and subtract an integer to an address in order to obtain a pointer of the same type to a different address.

ptr+i -> address contained in ptr + i * size of ptr type

You can also subtract two addresses that point to the same type. Subtraction is useful, for example, when the two pointers point to the same array, to find out the number of elements between the two elements pointed to.

ptr1-ptr2 -> (address pointed to by ptr1 – address pointed to by ptr2)/( type size of ptr1 and ptr2)

It is also possible to compare address values using the operators <,>,<=,>=,!= and ==.

Modify the value of a variable using a pointer

In the following example, x is an integer variable, p is an integer pointer containing the address of variable x. The value of x, initialized at 3, is changed to 21 using the pointer.

int x=3;
int * p=&amp;amp;x;

*p=21; // is equivalent to x=21;
printf("valeur de *p = %d\n",*p); // equivalent to printf("valeur de x = %d\n",x);

Modify a function input variable

In C, a function can only return a single variable. To return several values, it is possible to use the pointers of these input variables rather than returning the values themselves.

#include <iostream>

int myparam=5;
struct mystruct_T{
  int val1;
  int val2;
}STRUCT;

void change_struct( mystruct_T * mystruct, int * param) {
   mystruct-&gt;val1=10;
   *param=26;
}

int main(){
    change_struct(&amp;STRUCT, &amp;myparam);
    
    printf("Struct.val1 : %d",STRUCT.val1);
    printf("param : %d",myparam);
}

With this method, you can modify several variables as if the function returned several values.

Brief summary

  • A pointer is a variable that contains the address of another variable.
  • To access the address of the var variable we use the address operator(&): &var
  • To get the value of the variable from the address, use the indirection(*) operator: *pointer
  • When a structure pointer is used, the -> operator is used to access the structure member: mystruct->elm1
  • It is possible to point to functions

Sources