Rahul Kumar Lohra

Intellij Plugin: Create Gql Formatter Plugin

2020-07-18T19:43:01+00:00

We will create a GQL Formatter Plugin

This is what we are going to create: Plugin link: https://plugins.jetbrains.com/plugin/14709-gql-formatter/versions/stable/92155 Full source code: https://github.com/rahul-lohra/gql-formatter-plugin

Before formatting is applied

After formatting is applied

The language used is Kotlin but the concepts will remain same so don’t worry if you don’t know Kotlin

What it does:

It will reformat your GQL query that is stored in some variable (The idea is very similar to JSON Formatter)
You can then replace this formatted GQL query into that variable

What do we need to do to build this

We will need a UI where we will see our formatted code
We need to read the code from the file
We need to write th formatted code back to the file and override the variable’s value

Concepts that will be used:

Editor
Tool windows (Swing GUI)
File Reading/Writing via PsiElementVisitor
Creating PsiElement (String template)

Why do we need it: To keep our GQL query code consistent across our project and it is also readable now

We have to cover these parts:

Setup basic project to develop plugin
Create UI where we will see our formatted Code
Format GQL query with our code
Paste the code back to the source code from your tool window
Few things about publishing plugin

1. Setup Basic Project

Click on the finish. Beware this project will download at least 500mb of data for every time you will create an IntelliJ Platform Plugin. Actually it will download IntelliJ SDK.

But we can avoid that and use from local (This is totally optional)

Original(default) build.gradle

plugins {
    id 'java'
    id 'org.jetbrains.intellij' version '0.4.21'
}

group 'org.example'
version '1.0-SNAPSHOT'

repositories {
    mavenCentral()
}

dependencies {
    testCompile group: 'junit', name: 'junit', version: '4.12'
}

intellij {
    version '2020.1.1' // this is reason for 500mb download
}
...

Now we need to pass local path of IntelliJ like below:

intellij {
    localPath "/home/rahulkumarlohra-xps/IdeaProjects/ideaIC-2020.1"
}
//If you get some errors like annotations not found then make them available like this
dependencies {
    compile group: 'org.jetbrains', name: 'annotations', version: '19.0.0'
}

Like to build.gradle: https://github.com/rahul-lohra/gql-formatter-plugin/blob/master/build.gradle

Let’s see one more file which is auto-created: plugin.xml

You might get some error initially, it is basically like a warning that you should enter the values for name,description,vendor details

Few tips:

id: Should be your package name and should be unique
description: You can use HTML tags here

2. Create UI where we will see our formatted Code

This is what we will create

Functionalities of this tool:

Import: It will get the value stored in the variable which is provided in this white box
Replace: It will set back the formatted value to the original source code file

This is how it will look once we have filled some values on it

(Optional)We are going to create a Swing GUI. If you are new to Swing GUI then watch this video to understand how to create Swing GUI : https://www.youtube.com/watch?v=5vSyylPPEko

Follow these steps to create the UI

After tapping on OK : Two files will be created for and those are:

GqlView.java
GqlView.form

GqlView.java

This file will contain all the UI elements as member variables and you can add listeners to these views

All the member variables are auto-generated and they automatically linked with their respective UIs

GqlView.form

This is actually an XML file that contains all the Swing UI elements and also how each one they are relatively placed(positioned) The IDE generally do not allow us to directly edit this XML file. It has its own drag and drop user interface to create the UI. In the below picture, you can see the

Palette window to the extreme right.
Component Tree
Actual UI

This is how the GqlView.form should look initially, right after it is created

Use this Two code snippets to create the final UI

https://github.com/rahul-lohra/gql-formatter-plugin/blob/master/src/main/java/com/rahul/gqlformat/GqlView.form

After copy-pasting the content we should see UI like this:

Since we have manually edited the GqlView.form so that’s why we also need to manually edit the GqlView

The UI should be ready now

Add this UI to a Tool Window

Things to do

Create a class that will be registered as Tool Window (creation + registration)
That class should also render the UI that we just created (Connect that class to our UI class)

Create Toolwindow

We have 2 things

Implement ToolWindowFactory: this class will be registered later
override createToolWindowContent : In this method, we are just attaching the UI to this Toolwindow

id: It will be the name displayed over your toolwindow
anchor: Position where the toolwindow will be displayed
factoryClass: Points to our newly created ToolWindowclass

3. Format GQL Query with our code

I have already written code for this. No explanation needed, but you can see some of the examples of GQL query to get an idea of that: https://graphql.org/learn/queries/

This is my code(might be difficult to understand so feel free to skip it): https://github.com/rahul-lohra/gql-formatter-plugin/blob/master/src/main/java/com/rahul/gqlformat/parser/NodeCreator.kt

Let’s just say we have an API to get formatted GQL Query:

val nodeCreator = NodeCreator()
val node = nodeCreator.createNode(unformatted text)
val nodeText = nodeCreator.prettyPrint2(node, offset)

The nodeText will return the formatted GQL query

Now we need some logic(or API) to get variable’s value which is in our kotlin file. You can say we have to parse our code and extract the necessary information. To do this we have to understand a new concept PSI (It’s super easy don’t worry)

PSI : Program Structure Interface : Its responsible for parsing your file and getting meaningful data from it. Like it you can directly go to any comments, or variables or any functions. (link: https://jetbrains.org/intellij/sdk/docs/basics/architectural_overview/psi.html)

PsiElements: A file is represented as tress of PsiElements. (link: https://jetbrains.org/intellij/sdk/docs/basics/architectural_overview/psi_elements.html). It is very similar to the Tree data structure where you have many nodes connected to each other and every node might have some special property. Eg one of them can be a function or a comment or a class name or a string value or import statements

To visually see how it looks you can do this

Navigate to any file
Tools -> View PSI Structure of Current file

Now we need a way to navigate through this PSI elements and find our variable where the String is stored

We will use KtTreeVisitorVoid from package org.jetbrains.kotlin.psi. It will help to navigate through Kotlin’s PSI Element. If you want to parse a Java file then you can use JavaRecursiveElementVisitor.

To use KtTreeVisitorVoid we have to add its dependency. One thing to note is we need to add dependency on plugin.xml but not on build.gradle, like this:

<idea-plugin>
....
    <depends>org.jetbrains.kotlin</depends>

    <extensions defaultExtensionNs="com.intellij">
         <toolWindow
            id="Gql Format" anchor="right" factoryClass="com.rahul.gqlformat.MyToolWindow">
         </toolWindow>
    </extensions>
....

</idea-plugin>

Here is the documentation of plugin dependencies: https://jetbrains.org/intellij/sdk/docs/basics/getting_started/plugin_compatibility.html#declaring-plugin-dependencies

Add logic to parse the file

We will create a class named EditorLogic.kt : it is responsible for

Get currently opened file
Traversing the code
Extract the value assigned in variable
Pass that value to our NodeCreater (it will reformat the GQL)
Paste the formatted value into the ToolWindow
Replace the original value with our formatted value from ToolWindow
Currently opened file: will use FileEditorManager to get current PsiFile
Code Traversal: we will use KtTreeVisitorVoid
Value Extraction: override visitProperty(property:KtPropery)
Passing value does not require any explanation
Pasting value to our Toolwindow: we will do this : textArea.text=”our formatted text”

This diagram will be useful to understand the code flow from our input till we paste the formatted code to our tool window

Explanation of keywords:

KtBinaryExpression
KtStringTemplateExpression
KtDotQualifiedExpression Our intention is to extract the assigned value(String) from the variable. But the assigned value can be of above different types(there can be more) Here are the examples for the above elements

Now we need to see how we are passing the variable name. It’s a simple click event added on the button Import of our ToolWindow

Cool now we should be able to at least see the formatted GQL query in our tool window

4. Paste the formatted GQL query back to our file

Things to do:

Replace existing PsiElement with formatted String: Means we have to create a new PsiElement and will need to store formatted String into it and then need to replace it with the original PsiElement which has an unformatted query
Use proper indent(optional)
Handle dollar sign: because Kotlin treats dollar sign in a different way, for eg it can be used as a placeholder and much more

Replacing PsiElement

API to replace PsiElement is very simple:

PsiElement.resplace(newPsiElement)

And we just need to wrap this inside another block else we will get exceptions:

WriteCommandAction.runWriteCommandAction(project) {
    oldPsiElemet.replace(newPsiElement)
}

This is how we are creating newPsiElement

val newPsiElement = KtPsiFactory(psiElement.project).createStringTemplate(text)

Use proper indent

We need to know where should we start our string. In the below figure we need to know how FAR the variable is from the left

We have an api for this: it will tell give us the column no(start point) of the variable

val editor = FileEditorManager.getInstance(psiElement.project).selectedTextEditor
val variableCol = (editor as EditorImpl).offsetToLogicalPosition(psiElement.parent.textOffset).column

Here the PsiElemt refers to the String value, that’s why we have taken psiElement.parent

Dollar Sign

As of now, we are changing $ to ${“$”}
${“$”} will be ignored

We have used regular expression for this, the code might look difficult, but it’s very easy, just go through it doesn’t require any explanation

Cool.. we have covered all the logics. In short, this is what we did:

Full source code of EditorLogic.kt : https://github.com/rahul-lohra/gql-formatter-plugin/blob/master/src/main/java/com/rahul/gqlformat/EditorLogic.kt

5. Few things about publishing plugin

This is very straight forward and easy and there are multiple ways to upload.

From Gradle: https://jetbrains.org/intellij/sdk/docs/tutorials/build_system/deployment.html

I am showing you the simplest one. You can follow this guide: https://jetbrains.org/intellij/sdk/docs/basics/getting_started/publishing_plugin.html It is basically

Login to JetBrains account
Choose upload plugin
A form will be displayed and it will ask for jar/zip You can run this command from your root project to get the jar/zip

./gradlew buildPlugin

This will create a zip or jar in build/distributions/plugin-name.jar

You can upload this file on their site

After uploading the plugin, kindly fill as much information about your plugin as you can. Like: How to use, what things are supported, put screenshots, video links else the reviewer will tell these things to you

Full source code: https://github.com/rahul-lohra/gql-formatter-plugin

Plugin link: https://plugins.jetbrains.com/plugin/14709-gql-formatter/versions/stable/92155

Thanks for reading Please feel free to correct anything if something is wrong

Shadow Constraint Layout with Round Corners

2019-11-01T19:43:01+00:00

ConstraintLayout with its own shadow and we will apply round corners around it just like CardView

Few Good things:

No need to put ConstraintLayout inside CardView anymore
You can draw custom shadows as well
Use same technique with any view

Prequisites (Good if you know these things otherwise don’t worry):

Canvas x,y corrdinate
PorterDuffXfermode
Paint class
Path class

Things we need to do

Draw shadow
Draw a border around the view
Clip the view with RoundRorners
Fill your view with white color: so you can see the border & shadow & you must draw this over your shadow paint

Draw shadow around your view

Classes required

Paint : to paint with shadow color
Path : To give a path to shadow and that is around the view like a RECTANGLE

val porterDuffXfermode = PorterDuffXfermode(PorterDuff.Mode.SRC)
val blurMaskFilter = BlurMaskFilter(blurRadius, BlurMaskFilter.Blur.NORMAL)

shadowPaint.xfermode = porterDuffXfermode
shadowPaint.maskFilter = blurMaskFilter

The shadow is blurry that’s why we have used blurMaskFilter. And blurMaskFilter will only blur your color The shadow should not overlap the content of your constraint layout that’s why we used PorterDuffXfermode

Now we setting up paint is completed. We have to give it a path and that’s a rectangle

So the we are going to write something like this.

Goto to start point
Make a rectangle from there and at last come back from where you started

shadowPath.goToStartPosition()

shadowPath.move_to_top_left_from_top_right

shadowPath.move_to_bottom_left_from_top_left

shadowPath.move_to_bottom_right_from_bottom_left

shadowPath.move_to_top_right_from_bottom_right

"->" denotes : From

shadowPath.moveTo(width, 0f)                    //Top Right
shadowPath.lineTo(0, 0)                         // TR -> TL
shadowPath.lineTo(0,height)                     // TL -> BL 
shadowPath.lineTo(width,height)                 // BL -> BR
shadowPath.lineTo(width, shadowStartY)          // BR -> TR            

Cool the paint and path are set. We just need to pass commands to draw it on canvas

canvas.drawPath(shadowPath, shadowPaint)

That’s it.. This is what you will see

Rectangular shadow

The toughest part is done, now only comes the easy part

Draw a border around the view

We are using canvas.drawRoundRect(rect,paint) to draw. It requires a Rect and paint and we have provided both

Clip the view with RoundRorners

At the end we doing

canvas.clipPath(clipPath)

This means we want to clip this part(defined via clipPath) of canvas. And out future drawing commands must happen within the bounds of this clipPath

In real app we will do something like this

class MyLayout:View {
  fun override fun dispatchDraw(canvas: Canvas) {
    clipRoundCorners(canvas)
    super.dispatchDraw(canvas)
}

Our job is to draw round corners around our view and also ensure your child views should not be drawn on that area. So we should write this function inside dispatchDraw. We can change the canvas before a child is drawn : https://developer.android.com/reference/android/view/ViewGroup.html#dispatchDraw(android.graphics.Canvas)

Fill your view with white color

Code should look pretty straight forward.

canvas.drawRoundRect(rectBackgroundRectF, cornerRadius, cornerRadius, rectPaint)

The paint object has rectPaint.xfermode = porterDuffXfermode, to ensure the paint should come on top of shadow

Final code should be like this

class MyLayout:View {
    override fun dispatchDraw(canvas: Canvas) {
       clipRoundCorners(canvas)
       super.dispatchDraw(canvas)
    }
    override fun onDraw(canvas: Canvas){
       drawShadow(canvas)
       drawBorder(canvas)
       drawRectBackground(canvas)
       super.onDraw(canvas)
    }
}

Full source code:

Full code snipet and how to use

1 very importatnt thing you have to do this in your parent view

android:clipChildren="false"
android:clipToPadding="false"

From these two commands we are telling the Android that parent view must not clip the views of ShadowConstraintLayot if the views are getting drawn outside of its bouds.

This is the final result..

Left one is Card View & Right one is ShadowConstraintLayout

You can play with blurRadius property and also set shadow top,bottom,start,end offset to suit your needs.

Dart: Create callback via typedef

2019-05-25T19:43:01+00:00

Let’s say we have a Button class and it has a count property(member-variable), and a method tap(). Whenever we call the tap() function, we increment the count and send a callback back to caller function.

Typical callback code From Java

public class Button {
 
 int _count = 0;
 ButtonCallback callback;
 void tap(){
     ++_count;
     if(callback!=null && (_count%2) == 0){
         callback.onTrigger(_count);
      }
  }
 void setCallback(ButtonCallback callback){
     this.callback = callback;
 }
 public interface ButtonCallback {
    void onTrigger(int a);
 }
}

Unfortunately Dart doesn’t have interface like Java. But it supports functional programming: So we can just pass function as arguments. This is what we need to do for creating callbacks

Here is the Dart Code

public class Button {
  int _count = 0;
  Function(int) callback;
  
  void tap(){
     ++_count;
     if(callback!=null && (_count%2) == 0){
         callback(_count));
      }
    }
  void setCallback(Function(int) f){
    this.callback = f;
  }
}

//Main starts
main (List<String> args){ 
  Button button = new Button();
  button.setCallback((a){
    print(a);
});
for(int i=0;i<4;++i){
  button.tap();
 }
}
//Main Ends

Output in console

Code: https://gist.github.com/rahul-lohra/6f3561221564a346d060d58aabe8b659

A typedef function looks like this

  Function(int) callback

Official definition of typedef: https://dart.dev/guides/language/language-tour#typedefs

It says they are like objects and you can assign it to a variable or pass it as function arguments.

That’s it

Flutter: Create Circular Reveal Animation

2019-05-18T19:43:01+00:00

Breaking the animation:

The radius of the circle is increasing : AnimationController
Drawing of the circle : CustomPainter
There is also a fade out animation : AnimationController

Tap Behaviour (For simplicity: I will consider very minimal case)

Tap down: Radius starts to increase
Tap Up/Tap Cancel : Alpha is going from 40 to 0. (default alpha is 40 and alpha is of the reveal background)

Classes & their responsibilities:

RevealPaint:

Draw circle on our widget
Draw background with ARGB colour.

RevealAnimationController:

Manage expand animation and fadeOut animation
Send callback to State (required to frequently draw on UI)

State class:

It will have reference of the Paint class, and it will give the arguments such as alpha value and radius to the paint class, and Paint class will just draw stuff.
It will obviously manage tapUp and tapDown behaviour- which will tell when to start expand animation and when to start fade out animation

NOTE: The code is bit huge, I will only explain the very basic and core-concepts: Full source code: https://github.com/rahul-lohra/circular_reveal_widget

Code:

class RevealPaint extends CustomPainter {
  double fraction = 0.0;
    double radius = 0;
    Paint mPaint;
    Offset offset;
    int alpha = RevealAnimationController.MAX_ALPHA;
    String revealColor = "F2F3F4";

    RevealPaint() {
      mPaint = Paint();
      mPaint.color = HexColor("#$alpha$revealColor");
      mPaint.style = PaintingStyle.fill;
      offset = Offset(0, 0);
    }

    setAlpha(int alpha){
      this.alpha = alpha;
      mPaint.color = HexColor("#${alpha}$revealColor");
    }

    @override
    void paint(Canvas canvas, Size size) {
      double finalRadius = (radius * fraction);
      canvas.drawCircle(offset, finalRadius, mPaint);
    }

    @override
    bool shouldRepaint(RevealPaint oldDelegate) {
      return true;
    }
}

Drawing is happening on paint() function. Radius and fraction values will be initialised dynamically — we will see later.

We need code to start and stop the expand and fade animation. So we have RevealAnimationController here, it manages them

class RevealAnimationController{
  Animation<double> tweenExpand;  //contain animated value
  Animation<double> tweenFade;    //contain animated value
  VoidCallback tweenFadeCallback; //they are listeners to the animation
  VoidCallback tweenExpandCallback;
  AnimationController expandAnimationController;    
  AnimationController fadeAnimController;
  RevealAnimationController(
      TickerProviderStateMixin mixin, ControllerCallback callback) {
  expandAnimationController = AnimationController(
      duration: const Duration(milliseconds: 800), vsync: mixin);
  fadeAnimController = AnimationController(
      duration: const Duration(milliseconds: 300), vsync: mixin);

  tweenFade =
      Tween<double>(begin: MAX_ALPHA.toDouble(), end: MIN_ALPHA.toDouble())
          .animate(fadeAnimController);

  tweenExpand = Tween<double>(begin: MIN_TWEEN_VALUE, end: MAX_TWEEN_VALUE)
      .animate(animaController);
  }
  startAnimation() {
      expandAnimationController.forward();
  }
  startFadeOutAnim() {
      fadeAnimController.forward();
  }
  resetExpandAnim() {    
      expandAnimationController.reset();
  }
  _prepareTweenCallback() {
    tweenFadeCallback = () {
        int val = tweenFade.value.toInt();
        callback.onAlphaUpdate(val);    
    };

    tweenExpandCallback = () {
      fraction = tweenExpand.value;
        if (tweenExpand.value == MAX_TWEEN_VALUE) {
          callback.onAnimationComplete(fraction);
        } else {
          callback.onAnimationUpdate(fraction, alpha);
        }
    };
  }
}

Now we need a way to tell out Paint class to draw circle with some colours and alpha value

Now we have a ControllerCallback(custom made) interface, it will basically give updates to our State class. And this State class will force the Paint class to re-draw stuffs on our widget.

class RevealState extends State
    with TickerProviderStateMixin, ControllerCallback {
  Widget child;
  RevealAnimationController controller;
  RevealPaint revealPaint;
  RevealState(Widget child) {
    this.child = child;
    controller = RevealAnimationController(this, this);
  }
  @override
  Widget build(BuildContext context) {
    List<Widget> widgetList = List();
    widgetList.add(child);

    if (enableReveal) {
      revealPaint = RevealPaint();
      revealPaint.radius = max(renderBoxSize.height, renderBoxSize.width) + 10;
      revealPaint.fraction = controller.fraction;
      revealPaint.setAlpha(controller.alpha);
      revealPaint.offset = offset;

      widgetList.add(revealWidget(renderBoxSize, revealPaint));
    }

    return getTapWidget(widgetList);
  }
  Widget revealWidget(Size _size, CustomPainter paint) {
    return ClipRRect(
      borderRadius: BorderRadius.zero,
      child: CustomPaint(
        size: _size,
        painter: paint,
      ),
    );
  }
}

Inside the build functions we are setting arguments our Paint class

In the above class we have some callbacks

  @override
  void onAnimationUpdate(double fraction, int alpha) {
    setState(() {
      controller.fraction = fraction;
    });
  }

  @override
  void onAnimationComplete(double fraction) {
    setState(() {
      controller.fraction = fraction;
    });
  }

  @override
  void onAlphaUpdate(int alpha) {
    setState(() {
      controller.alpha = alpha;
    });
  }

We are calling setState — It will force to re-render the widget, means the build function will be called again and again.

Now how to start or stop expand and fade animations, — We will GestureDetector for this

Widget getTapWidget(List<Widget> widgetList) {
  return GestureDetector(
    child: Stack(children: widgetList),
    onLongPressMoveUpdate: (e) {
      handleFingerMove(e.globalPosition.distance);
    },
    onHorizontalDragUpdate: (e){
      handleFingerMove(e.globalPosition.distance);
    },
    onVerticalDragUpdate: (e){
      handleFingerMove(e.globalPosition.distance);
    },
    onTapUp: (e){
      handleTapUp();
    },
    onLongPressUp: (){
      handleTapUp();
    },
    onTapDown: (e) {
      handleTapDown(e);
    },
  );
}
void handleFingerMove(double pos) {
  //Codes are removed for simplicity
    handleTapUp();
}

void handleTapDown(TapDownDetails e) {
  setState(() {
  //Codes are removed for simplicity
    startAnimation();
  });
}
void handleTapUp() {
  controller.stopAnimation();
}

void startAnimation() {
  controller.startAnimation();
}

That’s it. check the readme of the library. Its very simple

Finally, this is our library’s widget

class RevealWidget extends StatefulWidget{
  Widget child;
  RevealWidget(this.child);
  @override
  State<StatefulWidget> createState() {
    return RevealState(child);
  }
}

That’s how we use it.

class ButtonWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return RevealWidget(Container(
        color: Colors.red,
        width: 100,
        height: 60,
        child: Align(
          alignment: Alignment.center,
          child: Text(
            "Hello",
            style: TextStyle(fontSize: 20),
          ),
        )));
  }
}

Full source code: https://github.com/rahul-lohra/circular_reveal_widget

Package: https://pub.dev/packages/circular_reveal

Bluetooth Low energy Chat Application Series #3

2018-12-26T19:45:01+00:00

Bluetooth Low energy Chat Application Series

Overview of Chat application:

How Bluetooth Low energy device works #Post 1
Setting up Gatt Server #Post 2
Setting up Gatt Client
Sending Data over Bluetooth Low energy network

Post 3 - Setting up Gatt Client

Things todo:

Declare global variables
Get Bluetooth Manage
Start scanning nearby devices
Get ScanCallback
Connect with scanned devices
Setup Gatt ClientCallback
Manage onConnectionStateChange
Discover Services of Server(a.k.a Bluetooth Gatt server)
Write your very first Descriptor
Handle BluetoothGattCallback.onDescriptorWrite(…)
Write your very first message from Gatt Client
Initialise mConnectedDevices: Inside Gatt server setup

0. Declare global variables

var mGattConnectedMap = HashMap<BluetoothGatt, Boolean>()
val mDeviceGattMap = HashMap<BluetoothDevice, BluetoothGatt>()
val mGattDeviceMap = HashMap<BluetoothGatt, BluetoothDevice>()
var mScanning = false
val mScannedDeviceIds = HashSet<String>()
val mConnectedDevices: ArrayList<BluetoothDevice> = ArrayList()
val mGattClientCallbackMap = HashMap<BluetoothDevice, GattClientCallback>()
var mClientScanCallback: ScanCallback? = null
var mBluetoothLeScanner: BluetoothLeScanner? = null
val mScannedDevices = HashSet<BluetoothDevice>()

1. Get Bluetooth Manager

val bluetoothManager = getSystemService(Context.BLUETOOTH_SERVICE) as BluetoothManager

2. Start scanning nearby devices

fun startScanning(){
if (mScanning) {
    return
}

val filters = ArrayList<ScanFilter>()
val settings = ScanSettings.Builder()
        .setScanMode(ScanSettings.SCAN_MODE_LOW_POWER)
        .build()
filters.add(ScanFilter.Builder()
        .setServiceUuid(ParcelUuid(SERVICE_UUID))
        .build())

mClientScanCallback = BluetoothScanCallback() // Will setup this in 3rd step
mBluetoothLeScanner = mBluetoothAdapter.bluetoothLeScanner

if (mBluetoothLeScanner == null) {
      sendLog("mBluetoothLeScanner is NULL")
} else {
    mBluetoothLeScanner?.startScan(filters, settings, mScanCallback)
}


mScanning = true
}

## 3. Get ScanCallback

 private inner class BluetoothScanCallback : ScanCallback() {
    override fun onScanResult(callbackType: Int, result: ScanResult)  
     {
        addScannedDevice(result)
     }

    override fun onBatchScanResults(results: List<ScanResult>) {
        for (result in results) {
            addScannedDevice(result)
        }
    }

    override fun onScanFailed(errorCode: Int) {
        Log.d("Scanning Failed with error code: $errorCode")
    }


    private fun addScannedDevice(result: ScanResult) {
        val device = result.device
        if (device != null && device.address != null) {
            mScannedDeviceIds.add(device.address)
        }

        if (!mScannedDevices.contains(device)) {
            mScannedDevices.add(device)
            Handler().postDelayed({ connectWithScannedDevice(device) }, 1000)
        }
    }
}

4. Connect with scanned devices

fun connectWithScannedDevice(device: BluetoothDevice) {
    Log.d("connectDevice")
    var mGattClientCallback = mGattClientCallbackMap[device]
    if (mGattClientCallback == null) {
        mGattClientCallback = GattClientCallback()
        mGattClientCallbackMap[device] = mGattClientCallback
    }
    val mGatt = device.connectGatt(context, false, mGattClientCallbackMap[device])
    mDeviceGattMap[device] = mGatt
    mGattDeviceMap[mGatt] = device
}

5. Setup Gatt client callback

inner class GattClientCallback : BluetoothGattCallback() {

    //SENDER
    override fun onCharacteristicWrite(gatt: BluetoothGatt?, characteristic: BluetoothGattCharacteristic?, status: Int) {
        super.onCharacteristicWrite(gatt, characteristic, status)
        handleOnCharacteristicWriteOfSender(gatt, characteristic, status)
    }

    
    override fun onDescriptorWrite(gatt: BluetoothGatt?, descriptor: BluetoothGattDescriptor?, status: Int) {
        super.onDescriptorWrite(gatt, descriptor, status)
        handleDescriptorWriteOfSender(gatt, descriptor, status)
    }

   
    override fun onConnectionStateChange(gatt: BluetoothGatt, status: Int, newState: Int) {
        super.onConnectionStateChange(gatt, status, newState)
        handleOnConnectionStateChange(gatt, status, newState)
    }

   
    override fun onServicesDiscovered(gatt: BluetoothGatt?, status: Int) {
        super.onServicesDiscovered(gatt, status)
        handleOnServicesDiscovered(gatt, status)
    }

   
    override fun onCharacteristicChanged(gatt: BluetoothGatt?, characteristic: BluetoothGattCharacteristic?) {
        super.onCharacteristicChanged(gatt, characteristic)
        handleOnCharacteristicChanged(gatt, characteristic)

    }

}

6. Manage onConnectionStateChange

fun handleOnConnectionStateChange(gatt: BluetoothGatt, status: Int, newState: Int){
if (status == BluetoothGatt.GATT_FAILURE) {
       disconnectFromGattServer(gatt)
       return
   } else if (status != BluetoothGatt.GATT_SUCCESS) {
       disconnectFromGattServer(gatt, true)
       return
   }
   if (newState == BluetoothProfile.STATE_CONNECTED) {
       handleConnectedStateOfClient(gatt)
   } 
      else if (newState == BluetoothProfile.STATE_DISCONNECTED) {
       disconnectFromGattServer(gatt, true)
   }
}
fun handleConnectedStateOfClient(bluetoothGatt: BluetoothGatt){
   mGattConnectedMap[bluetoothGatt] = true
   mDeviceGattMap[bluetoothGatt.device] = bluetoothGatt
   mGattDeviceMap[bluetoothGatt] = bluetoothGatt.device
   bluetoothGatt.discoverServices()
}
fun disconnectFromGattServer(gatt: BluetoothGatt, retry: Boolean = false){
   mGattConnectedMap[gatt] = false
   if (retry) {
       gatt.connect()
   } else {
       gatt.disconnect()
       gatt.close()
   }
}

bluetoothGatt.discoverServices will call BluetoothGattCallback.onServicesDiscovered(…) . We have to handle this now

7. Discover Services of Server(a.k.a Bluetooth Gatt server)
fun handleOnServicesDiscovered(gatt: BluetoothGatt?, status: Int){
   if (status != BluetoothGatt.GATT_SUCCESS) {
       return
   }
   if (gatt != null) {
      writeFirstDescriptor(gatt)
   }
}
8. Write your very first Descriptor
fun writeFirstDescriptor(gatt: BluetoothGatt){
   val service = gatt.getService(SERVICE_UUID)
   var metaDataCharacteristic = 
       service.getCharacteristic(USER_META_DATA_UUID)
   if (metaDataCharacteristic != null) {
       metaDataCharacteristic.writeType =     
       BluetoothGattCharacteristic.WRITE_TYPE_NO_RESPONSE
var descriptor =  
   metaDataCharacteristic.getDescriptor(USER_META_DATA_DESCRIPTOR_UUID)
   descriptor?.value = 
   BluetoothGattDescriptor.ENABLE_NOTIFICATION_VALUE
  if (descriptor != null) {
      val descriptorWriteStartedSuccess = 
            gatt.writeDescriptor(descriptor)
        //check whether write is success or not
    } else {
        Log.d("DESCRIPTOR is null")
   }
  }
}
The important thing about writing first descriptor is basically that, the client will now receive a callback on BluetoothGattCallback.onDescriptorWrite(…) If we get a successful then it means two devices can now talk

9. Handle BluetoothGattCallback.onDescriptorWrite(…)

fun handleDescriptorWriteOfSender (gatt: BluetoothGatt?, descriptor: BluetoothGattDescriptor?, status: Int){
    if (status == BluetoothGatt.GATT_SUCCESS) {
       sendYourVeryFirstMessage(gatt)
   } else {
       if (gatt != null && mGattDeviceMap[gatt] != null) {         
     handleFailureOfDescriptionWrite(mGattDeviceMap[gatt]!!.address)
    }
  }
}

If you want to send messages in queue fashion use a proper data structure for that. You also have to customise sendYourVeryFirstMessage(gatt). Remember the MTU(Maximum transfer unit) size for BLE will range from 23 bytes till 512 bytes

And you can definitely request to increase but I won’t recommend that because it will vary from device to device and OS to OS

10. Write your very first message from Gatt Client

fun sendYourVeryFirstMessage(gatt: BluetoothGatt?, characteristicUuid: UUID = USER_META_DATA_UUID, bytes: ByteArray? = null){
try {
    if (gatt != null) {
        val mGattConnected = mGattConnectedMap[gatt]
        if ((mGattConnected == null || !mGattConnected) && !mConnectedDevices.contains(gatt.device)) {
            handleFailureOfSendingMessage()
            return
        }
        val service = gatt.getService(SERVICE_UUID)
        if (service != null) {
            val characteristic = service.getCharacteristic(characteristicUuid)
            characteristic?.value = bytes
            characteristic?.writeType = BluetoothGattCharacteristic.WRITE_TYPE_NO_RESPONSE
            val success = gatt.writeCharacteristic(characteristic)
            //check for success writing
            //You will get the message on    
            //GattServerCallback.onCharacteristicWriteRequest(..)
        } else {
            handleFailureOfSendingMessage()
        }
    } else {
        handleFailureOfSendingMessage()
    }
} catch (E: NullPointerException) {
    handleFailureOfSendingMessage()
}
}

mConnectedDevices: A new variable, it should be defined in Gatt Server setup. I will show you the code below. handleFailureOfSendingMessage(): This functions basically handles the failed messages. For now we will do nothing

11. Initialise mConnectedDevices: Inside Gatt server setup

inner class GattServerCallback : BluetoothGattServerCallback() {
...
override fun onConnectionStateChange(device: BluetoothDevice?, status: Int, newState: Int){
    super.onConnectionStateChange(device, status, newState);
    handleOnConnectionStateChangeServer(device, status, newState)
}
...
}//end of inner class GattServerCallback
fun handleOnConnectionStateChangeServer(bleDevice: BluetoothDevice?, status: Int, newState: Int){
if (bleDevice != null) {
    if (newState == BluetoothProfile.STATE_CONNECTED) {
          mConnectedDevices.add(bleDevice)
          connectNewDevice(bleDevice)
      } else if (newState == BluetoothProfile.STATE_DISCONNECTED) {
          mConnectedDevices.remove(bleDevice)
      }
   }
  }

fun connectNewDevice(device:BluetoothDevice){
  var mGattClientCallback = mGattClientCallbackMap[device]
  if (mGattClientCallback == null) {
  // Means a new device, so add it
      mGattClientCallback = GattClientCallback()
      mGattClientCallbackMap[device] = mGattClientCallback
      val mGatt = device.connectGatt(context, false,  
                  mGattClientCallbackMap[device])
      mDeviceGattMap[device] = mGatt
      mGattDeviceMap[mGatt] = device
  }
}

Important Notes:

Our device is acting as both client and server, that’s why we have to save device’s reference from handleOnConnectionStateChangeServer(..)

At last, setting up Gatt client is completed 😌

Code: https://github.com/iamdangerous/Ble-Chat-Android-app/blob/post_3_setup_gatt_client/app/src/main/java/com/rahullohra/blechatapp/BluetoothController.kt

References

https://www.bignerdranch.com/blog/bluetooth-low-energy-part-1/
https://www.bignerdranch.com/blog/bluetooth-low-energy-part-2/

Bluetooth Low energy Chat Application Series #2

2018-12-26T19:44:01+00:00

Bluetooth Low energy Chat Application Series

Overview of Chat application:

How Bluetooth Low energy device works #Post 1
Setting up Gatt Server
Setting up Gatt Client #Post 3
Sending Data over Bluetooth Low energy network

Post 2 - Setting up Gatt Server

Add permissions
Setup UUIDs for your service, Characteristics and meta-data
Setup Gatt Server

Add permissions

<uses-permission android:name="android.permission.BLUETOOTH"/>
<uses-permission android:name="android.permission.BLUETOOTH_ADMIN"/>
<uses-feature android:name="android.hardware.bluetooth_le" android:required="true"/>

Setup UUIDs

Use this url to generate UUID - (https://www.uuidgenerator.net/)

val SERVICE_ID = "364710c0-6359-4bdf-9946-9f54d07eb8d3"
val USER_META_DATA_ID = "770bf5dc-53f8-4d55-8506-15a51baee22d"
val SERVICE_UUID = UUID.fromString(SERVICE_ID)
val USER_META_DATA_UUID = UUID.fromString(USER_META_DATA_ID)

Setup Gatt Server

Get BluetoothManager - Goto step 2 after some delay eg - 2 seconds
Setup BluetoothLeAdvertiser
Create GattServerCallback - in this callback you will receive message
Open GattServer
Add your service to the GATT server
Create AdvertiseCallback - to know whether scan is started or not
Start advertising your GATT server

Note - All above points are necessary

1. Get BluetoothManager

val bluetoothManager = getSystemService(Context.BLUETOOTH_SERVICE) as BluetoothManager
# Goto to step 2 after some delay eg - 2 seconds
# Eg - Use a handler 
Handler.postDelayed({callStep2()}, 2000L)

2. Setup BluetoothLeAdvertiser

val mBluetoothLeAdvertiser = mBluetoothAdapter.bluetoothLeAdvertiser;

3. Create GattServerCallback

    inner class GattServerCallback : BluetoothGattServerCallback() {

        override fun onDescriptorReadRequest(device: BluetoothDevice?, requestId: Int, offset: Int, descriptor: BluetoothGattDescriptor?) {

        }

        override fun onConnectionStateChange(device: BluetoothDevice?, status: Int, newState: Int) {
            super.onConnectionStateChange(device, status, newState);
            
        }

        //RECEIVER END    
        override fun onCharacteristicWriteRequest(device: BluetoothDevice?, requestId: Int, characteristic: BluetoothGattCharacteristic?, preparedWrite: Boolean, responseNeeded: Boolean, offset: Int, value: ByteArray?) {        

        }

        override fun onCharacteristicReadRequest(device: BluetoothDevice?, requestId: Int, offset: Int, characteristic: BluetoothGattCharacteristic?) {
            super.onCharacteristicReadRequest(device, requestId, offset, characteristic)
        }

        override fun onDescriptorWriteRequest(device: BluetoothDevice?, requestId: Int, descriptor: BluetoothGattDescriptor?, preparedWrite: Boolean, responseNeeded: Boolean, offset: Int, value: ByteArray?) {
            super.onDescriptorWriteRequest(device, requestId, descriptor, preparedWrite, responseNeeded, offset, value)

        }
    }
    val gattServerCallback = GattServerCallback()

4. Open GATT Server

var mGattServer: BluetoothGattServer? = mBluetoothManager.openGattServer(context, gattServerCallback)

5. Add service to the GATT Server

val service = BluetoothGattService(SERVICE_UUID, BluetoothGattService.SERVICE_TYPE_PRIMARY)

service.addCharacteristic(BleMessageUtil.prepareCharateristic(USER_META_DATA_UUID, USER_META_DATA_DESCRIPTOR_UUID))

service.addCharacteristic(BleMessageUtil.prepareCharateristic(ONE_TO_ONE_MSG_UUID, ONE_TO_ONE_MSG_DESCRIPTOR_UUID))

mGattServer?.addService(service)

6. Create AdvertiseCallback

val mAdvertiseCallback = object : AdvertiseCallback() {
        override fun onStartSuccess(settingsInEffect: AdvertiseSettings) {
            sendLog("Peripheral advertising started.")
        }

        override fun onStartFailure(errorCode: Int) {
            sendLog("Peripheral advertising failed: $errorCode")
        }
    }

7. Start advertising your GATT server

if (mBluetoothLeAdvertiser == null) {
            return
        }
val settings = AdvertiseSettings.Builder()
                .setAdvertiseMode(AdvertiseSettings.ADVERTISE_MODE_BALANCED)
                .setConnectable(true)
                .setTimeout(0)
                .setTxPowerLevel(AdvertiseSettings.ADVERTISE_TX_POWER_LOW)
                .build()

val parcelUuid = ParcelUuid(SERVICE_UUID)
val data = AdvertiseData.Builder()
                .setIncludeDeviceName(false)// because data is greater than 31 bytes
                .addServiceUuid(parcelUuid)
                .build()

mBluetoothLeAdvertiser?.startAdvertising(settings, data, mAdvertiseCallback);

Reference

https://developer.android.com/guide/topics/connectivity/bluetooth-le
https://www.bignerdranch.com/blog/bluetooth-low-energy-part-1/

Bluetooth Low energy Chat Application Series #1

2018-12-26T19:43:01+00:00

Bluetooth Low energy Chat Application Series

Overview of Chat application -

How Bluetooth Low energy device works
Setting up Gatt Server #Post 2
Setting up Gatt Client #Post 3
Sending Data over Bluetooth Low energy network

Post 1 - How Bluetooth Low energy device works in general

Key components

Ble - Bluetooth Low energy device

GATT - Defines protocol(set of rules) on how data should be exchanged

GATT Server - Provides functionality to create Services and broadcast itself so other Gatt Client can connect to it. (can be slightly confusing, I know but don’t worry, this will be cleared later). Treat it as a web server.

Gatt Client - It is responsible for scanning nearby GATT Server, connecting to it and exchanging data(in terms of Characteristics).

Service - A service is a collection of characteristics. For example, you could have a service called “Heart Rate Monitor” that includes characteristics such as “heart rate measurement.”

Characteristics - It contains a value and a list of descriptors

Descriptors - It contains a value and generally it is used as attributes of a Characteristics

UUID - Just a unique identifier, on how to uniquely identify/create a Service or a characteristics or a descriptor.

For exchanging data over http network, we need two devices one will act as a server and another will act as client. Eg - that’s how website work

This same thing applies in Ble network, we need two devices one will act as a Gatt server and another will act as Gatt client for exchanging of data.

And a device can be both Gatt Server and Gatt client.

There are still some concepts left, I will teach them when they are used.

For Android chat application, we will have two devices and they both will act as a Gatt Server and Gatt Client.

Reference - https://developer.android.com/guide/topics/connectivity/bluetooth-le