Subhra's Lab
Insights on different Embedded & Internet technologies like Android, Nodejs, Firebase, esp8266 etc. Projects like reading from and writing to google sheet using esp8266 devices, putting math symbols in your web sites, setting up your own wamp stack (each component separately) on your local pc, extracing hex code from unicode char code, developing firebase messaging system for your users android devices using nodejs server etc are described elaborately. More projects to come..
Tuesday, 27 December 2022
Monday, 26 December 2022
Monday, 6 June 2022
Read and Write to Google Sheet from your ESP8266 device.
In this article we access our google sheet data
from our google drive with our ESP8266 device.
Google Sheet
Figure1
ESP8266
Esp8266 is a wifi module along with a microcontroller widely used in IOT (internet of things) technology. As the ESP devices has inbuilt microcontroller, this small device can be used as a small computer (without monitor and terminal) at any place at convenient. It just work silently. There are variants of these devices like ESP8266-01, ESP8266 Node MCU, ESP32 etc.
How ESP Devices Collects Data and Outputs Data:
An ESP device collects data through its sensors
connected to its pins and send it to the defined internet address. Similarly,
it collects data from the defined internet address and send it to its output
pins for actions.
Usages: case 1: Suppose, you have a display
unit. You want to display records collected from a remote location through
various meas like sensors and other input devices. Here you can use an ESP
device as the data collector and provider to your display unit.
Case 2: Say, you organized a conference. You
want to get the number of total members present at any time in the conference
hall from a remote place. You can deploy ESP8266 here to collect the data
through the sensors and send it your mobile device silently.
Case 3: Nowadays, Fastag has been introduced in
Indian National Roadways. It works through the RFID sensors at traffic gates.
The device modules at the gates get the data about the vehicle and do the toll
operations without stopping the vehicle any more. We can achieve this type of
performances also with these ESP devices.
Now, we will follow the steps below to connect
he google spreadsheets and do read/write operations on it.
STEP1: Bill of Materials:
(hardwares)
(i) An ESP8266 module device
(ii) An ESP8266 burner (if it is a node mcu,
burner is inbuilt)
[Note: burner device is required only for
ESP-01 devices, for others, we just need to connect the ESP Node MCU to the computer
USB Cables.]
(iii) A Personal Computer to prepare the
software and upload it to ESP
Software
(i) We will use Windows 10 to prepare &
upload it to ESP8266
[Note: Different versions of Arduino IDE are
available for different OS versions]
(ii) We need to install Arduino IDE for our
working environment.
STEP2:
(i) Download ReadSheetData zip library from this
link.ReadSheetData
(ii) Go to google Sheet. It you can get it in
your google.com page inside Google apps at the top right corner region.
Figure 2
Figure3
(III) create a spread sheet like below
Figure4
(iv) copy the spread sheet id from the url
address like below:
See the address bas: docs.google.com/spreasheet…
From here copy the part within ‘../d/’ and ‘/edit..’. This will be used as the
spreadsheet id in the app script.
(v) add another sheet clicking the bottom left (+) button. (we can toggle between sheets clicking the sheet1 and sheet2 tab).
Figure5
(vi) Go to tools>Script editor
(vii) Script editor will be opened in a new tab.
(viii) copy the contents MyAppScript.gs file
from the ReadSheetData.zip library and paste it here.https://github.com/subhramukherjee/ESP8266_Logger.git
(ix) Replace the spreadsheet id with that copied at point (iv) in step2.
Figure6
(ix)Now deploy your app script as a web app and
collect the ScriptID. Click Deploy>New
Deployment
Follow the following steps:
Figure7
Figure 8
Figure9
Now select Anyone in ‘Who has access’ drop-down list. Click Deploy. The system will ask for your authorization. Follow the subsequent steps. In the process following a security warning may come. Go ahead and give authorization (as you know, it is your app script & it is not going to case any harm to any system).
Figure10
We can now test our App Script in any web
browser. Just copy and paste the web address ( we get it on Manage Deployment
tab in the drop-down list we get by clicking Deploy button of the App Script
window) to the address bar of any web browser.
Remember: Whenever we make any
change to our app script and again go to deploy our app, we must select ‘New
Deployment’ from the list.
After all are done, we will get the following window:
Now copy the Google App ScriptID to your
secure space. This ID will be required in our ESP8266 code.
Now, Google Script setup is over. Follow the
net step.
STEP3:
(i) Download HTTPSRedirect zip library from
Github (You can download the ConnectSheet.zip file from this link also, unzip
it). Now open the Arduino IDE. Go to Sketch>Include Library>Add .ZIP
Library…
Here select the HTTPSRedirect.zip file, the
HTTPSRedirect library will added to your library list in Sketch>Include
Library.
You can import it as a header file in your .ino
code file.
(ii) You can also download the ReadSheetData.zip
from the following github resource. https://github.com/subhramukherjee/ESP8266_Logger.git
(ii). Click File>Open. Get the ReadSheetData.ino
by unzipping the ConnectSheet.zip file you just downloaded.
(iii) Replace the ssid and password with your
wifi ssid and password.
(iv) Replace the GScriptId value with the
ScriptID you just collected when deploying your Google AppScript.
(v) Do any necessary changes as per your need.
(vi) upload the .ino file to your ESP8266.
(vii) Go to Tools>Serial Monitor
We will see that the spread sheet data is being
displayed on the serial monitor of Arduino IDE.
You can use these data in many purposes like
operating other devices, display units etc. We can also send valuable data
collected through sensors to the Google sheet.
To write to the google sheet input some text in
the Serial input bar. And wait. You will see that your input has been inserted
in the Google sheet.
Sunday, 22 May 2022
EXTRACT
ONE BYTE HEX CODE FROM UTF-8 BYTES REPRESENTING A UNICODE CHARACTER (UTF-8
TRICKS)
[This
article assumes the reader knows the hexadecimal number system]
What is
UTF8?
Multilingual
characters are indexed in a table having each a 16 bit address. This is Unicode
table. Thus, using two bytes (each having 8 bits) we could represent any
character other than English. But as the English characters are represented in
a single byte, we need an encoding which is universal for supporting all the
scripts accepted worldwide. More over after addition of more charsets from
scripts in different parts of the world (as extended Unicode, in a vow to
include all the character and symbols around the globe), the 16 bits became
insufficient for Unicode. The UTF-8 brought the solution. Utf-8 is such an encoding
system which gives us this privilege to represent any character used anywhere
within same common encoding system.
The utf-8 encoding system needs one to four
bytes in a stream to represent a character or a symbol.
The Utf-8
byte sequences follow a definite unique pattern. The pattern is used to
validate the correct utf8 sequence. Below is the demonstration of the utf8
pattern:
Single
Byte UTF-8
For single
byte utf-8 encoding, used pattern is:0xxxxxxx (7 bits are used)
Thus it can
represent 00000000 to 01111111 i.e.
Unicode U+0000 to U+007F. So, these are sufficient to express English
characters.
Two Byte
UTF-8
For 2 byte
utf-8 encoding, used pattern is: 110xxxxx 10xxxxxx. (Here, 5 + 6 = 11 bits are
used)
Thus, it can
represent U+0080 to U+07FF. This is used for scripts like Greek, Arabic etc.
Three
Byte UTF-8
For 3 byte
utf-8 encoding, used pattern is: 1110xxxx 10xxxxxx 10xxxxxx. Thus it uses total
4 + 6 + 6 = 16 bits. Thus, we can represent U+0800 to U+FFFF. This is used for
scripts like Devanagari, Bengali, Gurumukhi and others Indic language script
characters falls in this range.
After this
we need more than 16 bits to represent extended Unicode characters.
Four Byte
UTF-8
For 4 byte
UTF-8 encoding, used pattern is: 11110xxx 10xxxxxx 10xxxxxx 10xxxxxx. Thus, it
uses a total of 21 bits (3 + 6 + 6 + 6). Thus, it can represent from U+10000 to
U+10FFFF.
This unique
pattern of utf8 encoding system is required to validate the true utf8 sequence.
Example
Decode
In the
following example we will extract a single byte hex code from a three byte utf8
stream. The hex code will be unique within the Unicode range used for that
script.
The utf-8
sequence for Bengali ী is E0 A7 80 and the position of ী in Unicode table is U+09C0.
Now, utf-8
pattern for Bengali characters(3 bytes sequence) is :1110 xxxx - 10xx xxxx - 10xx xxxx.
Now, 1st
byte is E0; thus, in this case 1st byte becomes 1110 0000
The 2nd
byte is A7, thus it becomes, 1010 0111
The 3rd
byte is 80, thus it becomes, 1000 0000
Thus, the
whole bit sequence for ী becomes 0000 1001 – 1100 0000 (if we
extract pattern identification bits). Thus, converting to HEX, it becomes
U+09C0 as per the Unicode table.
Now, we will
do the same through coding:
For this, we made the third byte as
the base, replaced its the leading 10 with the last two bits from the middle
byte. The rest leading bits will always form a 9 which is not required for this
range of Unicode characters.
. uint8_t a[3];
. a[0]
= 0xE0;
. a[1]
= 0xA7;
. a[2]
= 0x80; [utf8 sequence for ী ]
. uint8_t
x = a[1]&0x03; [we take
last 2 bits only]
. x
= x<<6; [shift
bits by 6 steps left]
. uint8_t
y = a[2]&0x3F; [resets the
left most 2 bits to 0]
. y
= x|y;
This is 0xC0 which is the hex code of ী ,
unique up to the required range.
Thursday, 17 February 2022
How to
implement Phone Verification (OTP Verification) using Firebase Authentication
in your Android App (in brief)
1. Create a
project in Android Studio.
2. Go
Firebase Console, open a firebase account.
3. Sign-in
& Add your Android Project to Firebase using package name.
4. Go to Preject
Settings>General tab page from the left pane of the firebase console. From
here, download the google-services.json. Put this file under the app root folder of your Android Studio project.
5. Now, in
your android project add dependency for Firebase Authentication in module level
(app level) build gradle file.
dependencies {
implementation
platform(‘com.google.firebase:firebase-bom:29.1.0’)
//declare dependencies for Firebase
authentication library
//no need to specify version number
if firebase bom is used
implementation ‘com.google.firebase:firebase-auth’
}
No need to
put firebase-auth library version as firebase-bom version is mentioned.
6. Set app’s
SHA-1, SHA-256 hash in firebase console. To do so, go to authentication tool
from left pane of the project’s firebase console.
To get the
SHA-1 & SHA-256 of the Android app, go to signing report from Gradle (right
pane of the Android Studio) ->Android->task
7. To enable
phone number signing in (OTP verification) for your android app go to Firebase
Console à Authentication section.
From the
sign-in method page enable Phone number sign-in method.
8. Enable
app verification.
To enable
app verification, do so through safetyNet , i) enable Android DeviceCheck API
from Google Cloud Console. The default firebase API key will be used.
Ii) If
SHA-256 is not added, do so from setting page of the firebase console.
Now, we
can implement phone verification in our android app.
A. To
implements phone verification first create an UI to accept users phone number in our Android Studio platform.
B. Pass this
phone number along with other options to request to firebase to verify the
phone number through the following method-
PhoneAuthOptions
options =
PhoneAuthOptions.newBuilder(mAuth)
.setPhoneNumber(phoneNumber) // Phone
number to verify
.setTimeout(60L, TimeUnit.SECONDS) // Timeout and unit
.setActivity(this)
// Activity (for callback binding)
.setCallbacks(mCallbacks)
// OnVerificationStateChangedCallbacks
.build();
PhoneAuthProvider.verifyPhoneNumber(options);
mAuth is an instance of FirebaseAuth
class. Get mAuth in the way following,
FirebaseAuth
mAuth = FirebaseAuth.getInstance();
FirebaseAuth
instance is created depending upon the google-services.json settings file we
downloaded in step 4 and saved it in the app root folder of the project.
C. The
callback used in firebase phone verification is an instance of
OnVerificationStateChangedCallbacks. So, implement it in your Activity.
mCallbacks = new PhoneAuthProvider.OnVerificationStateChangedCallbacks() {
@Override
public void onVerificationCompleted(PhoneAuthCredential credential) {
// This callback will be invoked in two situations:
// 1 - Instant verification. In some cases the phone number can be instantly
// verified without needing to send or enter a verification code.
// 2 - Auto-retrieval. On some devices Google Play services can automatically
// detect the incoming verification SMS and perform verification without
// user action.
Log.d(TAG, "onVerificationCompleted:" + credential);
signInWithPhoneAuthCredential(credential);
}
@Override
public void onVerificationFailed(FirebaseException e) {
// This callback is invoked in an invalid request for verification is made,
// for instance if the the phone number format is not valid.
Log.w(TAG, "onVerificationFailed", e);
if (e instanceof FirebaseAuthInvalidCredentialsException) {
// Invalid request
} else if (e instanceof FirebaseTooManyRequestsException) {
// The SMS quota for the project has been exceeded
}
// Show a message and update the UI
}
@Override
public void onCodeSent(@NonNull String verificationId,
@NonNull PhoneAuthProvider.ForceResendingToken token) {
// The SMS verification code has been sent to the provided phone number, we
// now need to ask the user to enter the code and then construct a credential
// by combining the code with a verification ID.
Log.d(TAG, "onCodeSent:" + verificationId);
// Save verification ID and resending token so we can use them later
mVerificationId = verificationId;
mResendToken = token;
}
};
D. After the
user entering the phone number and click to pass the data to firebase through
the verification method, the firebase will send a verification code to the
user’s phone.
E. Create UI
to accept the verification code (OTP).
F. The app
will get a verification ID (not OTP) once when the data is sent to firebase through its
verification method (look at the onCodeSent() method of the callback). We need to create a PhoneAuthCredential Object using this
verificationID and the verification code (OTP) that user will receive in
his/her phone.
PhoneAuthCredential credential = PhoneAuthProvider.getCredential(verificationId, code);
G. Now the
user can be signed in with the credential through the following FirebaseAuth.signInWithCredential
method.
private void signInWithPhoneAuthCredential(PhoneAuthCredential credential) {
mAuth.signInWithCredential(credential)
.addOnCompleteListener(this, new OnCompleteListener<AuthResult>() {
@Override
public void onComplete(@NonNull Task<AuthResult> task) {
if (task.isSuccessful()) {
// Sign in success, update UI with the signed-in user's information
Log.d(TAG, "signInWithCredential:success");
FirebaseUser user = task.getResult().getUser();
// Update UI
} else {
// Sign in failed, display a message and update the UI
Log.w(TAG, "signInWithCredential:failure", task.getException());
if (task.getException() instanceof FirebaseAuthInvalidCredentialsException) {
// The verification code entered was invalid
}
}
}
});
}
The
FirebaseUser object that we get from the above signInWithPhoneCredential() method
holds all related information of the FirebaseUser client.
Sunday, 13 February 2022
Install
Node.js and NPM on Windows
Step
1: Download the Node.js Installer
From any web browser, navigate to https://nodejs.org/en/download/. Click the Windows
Installer button to download the latest default version.
At the time when this article is written, version 10.16.0-x64 is the latest
version. The NPM package manager is included within the Node.js installer.
You may need the other versions for the older systems (32 bit system).
For users, new to Node.js, choose LTS (Long Term Support).
Step
2: Install the Node.js and NPM
1. Once after the installer is downloaded, launch the installer. Double-click it
to launch.
2. The system will prompt you whether you want to run the software –
click Run.
3. Node.js wizard will open, Click Next.
4. Review the license agreement. Click Next to agree & install the
software.
5. The installer will ask for the installation location. Go through the
default location, if not you have any special need. Click Next.
6. The wizard will guide you to select components to include or exclude
from the installation. Unless you have any special requirement, you should go
for the defaults by clicking Next.
7. Finally, click the Install button
to run the installer. After installation is finished, click Finish.
Step
3: Verify your Installation
Open the command prompt, and enter the following:
node –v
The system will display the Node.js version installed on your system. Same can be done for NPM:
npm –v