React Native Smart Switch App – Arduino – Part 3

This the the third part of tutorial series React Native Smart Switch App. If you have directly reached to this part of tutorial then you can check the previous part here. In the previous part we created hardware ( using Arduino) and software (i.e. Mobile App) for turning LED light on and off. In this part we will be actually building our virtual switch and App to control it.

Our Arduino connection will remain same as previous part of tutorial but we will make changes to the code. Update the old code with the code below :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
int flag = 0;
unsigned long lightStartTime;
unsigned long currentTime;
unsigned long interval = 5000;
 
void setup() {
  // put your setup code here, to run once:
  pinMode(LED_BUILTIN, OUTPUT);
  Serial.begin(9600);
}
void loop() {
  // put your main code here, to run repeatedly:
  if(Serial.available() > 0){
    char data = Serial.read();
 
    switch(data){
      case 'A': switchOn(5);
            break;
      case 'B': switchOn(10);
            break;
      case 'C': switchOn(15);
            break;
      case 'D': switchOn(20);
            break;
      case 'E': switchOn(25);
            break;
      case 'F': switchOn(30);
            break;
    }
 
  }
 
  if(flag == 1){
    currentTime = millis();
    if(lightStartTime + interval < currentTime){
      digitalWrite(LED_BUILTIN,LOW);
      flag = 0;
    }
  }
}
void switchOn(unsigned long timePeriod)
{
  digitalWrite(LED_BUILTIN,HIGH);
  lightStartTime = millis();
  flag = 1;
  interval = timePeriod*1000;
}

In the above code, above code we are first setting the pin 13 as output pin and communication speed as 9600 baud (bps). In the loop we are cheking if some data is there and reading it. If the data code is ‘A’ then we are setting time interval to 5 seconds, changing flag value to 1, turning on LED connected to pin 13 and saving the LED  lit/glow up time to ‘lightStartTime’ variable. Next, we are cheking if flag value is 1 i.e. led is turned on and current time is more than LED lit/glow up time then we are turning LED off.

We also need to update our App code with the code below :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  Button,
  FlatList,
  Switch,
  TouchableOpacity,
  ToastAndroid,
  Image
} from 'react-native';
var _ = require('lodash');
import BluetoothSerial from 'react-native-bluetooth-serial'
import Dialogflow, { Dialogflow_V2 } from "react-native-dialogflow"
 
export default class App extends Component<{}> {
  constructor (props) {
    super(props)
    this.state = {
      isEnabled: false,
      discovering: false,
      devices: [],
      unpairedDevices: [],
      connected: false,
      result: "switch on for x seconds",
      listeningState: "not started",
      audioLevel: 0,
      text: ''
    }
 
    this.count = 0
 
    Dialogflow.setConfiguration(
      "e0712137bce540b8bd4c4b5d5840be07", Dialogflow.LANG_ENGLISH
    );
 
    Dialogflow_V2.setConfiguration(
      "ya29.c.El93BfD5CZBWUrPJAyUdfWuHkmdzyjo0seL56z-reryvae4j8oVwLO38ARqrpj0Q5LxeUTndPLrA6GYPx4CyrlVmJRKvq_Dtwl9OO0zxiWTVK7boCV-aCVJVHbaFSGstgA",
      Dialogflow_V2.LANG_ENGLISH,
      'testv2-3b5ca'
    );
 
  }
  componentWillMount(){
 
    Promise.all([
      BluetoothSerial.isEnabled(),
      BluetoothSerial.list()
    ])
    .then((values) => {
      const [ isEnabled, devices ] = values
 
      this.setState({ isEnabled, devices })
    })
 
    BluetoothSerial.on('bluetoothEnabled', () => {
 
      Promise.all([
        BluetoothSerial.isEnabled(),
        BluetoothSerial.list()
      ])
      .then((values) => {
        const [ isEnabled, devices ] = values
        this.setState({  devices })
      })
 
      BluetoothSerial.on('bluetoothDisabled', () => {
 
         this.setState({ devices: [] })
 
      })
      BluetoothSerial.on('error', (err) => console.log(`Error: ${err.message}`))
 
    })
 
  }
  _onPressButton(){
 
    this.count = 0
    // V1
    Dialogflow.onListeningStarted(() => {
      this.setState({ listeningState: "started" });
    });
 
    Dialogflow.onListeningCanceled(() => {
      this.setState({ listeningState: "canceled" });
    });
 
    Dialogflow.onListeningFinished(() => {
      this.setState({ listeningState: "finished" });
    });
 
    Dialogflow.onAudioLevel(level => {
      this.setState({ audioLevel: level });
    });
 
    Dialogflow.startListening(result => {
 
      console.log(result.result.resolvedQuery);
      const text = result.result.resolvedQuery
      this.setState({ result: text });
 
      if(this.count == 0){
        // code to send signal
        if ((text.indexOf("switch") >= 0) && (text.indexOf(" on ") >= 0) && (text.split(' ').length >= 3)){
 
          var thenum = text.match(/\d/g);
          thenum = thenum.join("");
          //console.warn(thenum);
          if(thenum.length == 1 || thenum.length ==2){
          //if(0){
            const switchOffTime = parseInt(thenum);
            switch(switchOffTime){
              case 5: this.toggleSwitch("A") ;
                  break;
              case 10: this.toggleSwitch("B");
                  break;
              case 15: this.toggleSwitch("C") ;
                  break;
              case 20: this.toggleSwitch("D");
                  break;
              case 25: this.toggleSwitch("E");
                  break;
              case 30: this.toggleSwitch("F");
                  break;
            }
          }
 
          this.count = this.count + 1
        }
      }
 
    }, error => {
      this.setState({ result: JSON.stringify(error) });
    });
  }
  _adFailed(error){
    console.log(error);
  }
  connect (device) {
    this.setState({ connecting: true })
    BluetoothSerial.connect(device.id)
    .then((res) => {
      console.log(`Connected to device ${device.name}`);
 
      ToastAndroid.show(`Connected to device ${device.name}`, ToastAndroid.SHORT);
    })
    .catch((err) => console.log((err.message)))
  }
  _renderItem(item){
 
    return(<TouchableOpacity onPress={() => this.connect(item.item)}>
            <View style={styles.deviceNameWrap}>
              <Text style={styles.deviceName}>{ item.item.name ? item.item.name : item.item.id }</Text>
            </View>
          </TouchableOpacity>)
  }
  enable () {
    BluetoothSerial.enable()
    .then((res) => this.setState({ isEnabled: true }))
    .catch((err) => Toast.showShortBottom(err.message))
  }
 
  disable () {
    BluetoothSerial.disable()
    .then((res) => this.setState({ isEnabled: false }))
    .catch((err) => Toast.showShortBottom(err.message))
  }
 
  toggleBluetooth (value) {
    if (value === true) {
      this.enable()
    } else {
      this.disable()
    }
  }
  discoverAvailableDevices () {
    console.log("discovering");
    if (this.state.discovering) {
      return false
    } else {
      this.setState({ discovering: true })
      BluetoothSerial.discoverUnpairedDevices()
      .then((unpairedDevices) => {
        const uniqueDevices = _.uniqBy(unpairedDevices, 'id');
        console.log(uniqueDevices);
        this.setState({ unpairedDevices: uniqueDevices, discovering: false })
      })
      .catch((err) => console.log(err.message))
    }
  }
  toggleSwitch(code){
    BluetoothSerial.write(code)
    .then((res) => {
      console.log(res);
      console.log('Successfuly wrote to device')
      this.setState({ connected: true })
    })
    .catch((err) => console.log(err.message))
  }
  render() {
 
    return (
      <View style={styles.container}>
      <View style={styles.toolbar}>
            <Text style={styles.toolbarTitle}>Bluetooth Device List</Text>
            <View style={styles.toolbarButton}>
              <Switch
                value={this.state.isEnabled}
                onValueChange={(val) => this.toggleBluetooth(val)}
              />
            </View>
      </View>
        <Button
          onPress={this.discoverAvailableDevices.bind(this)}
          title="Scan for Devices"
          color="#841584"
        />
        <FlatList
          style={{flex:1}}
          data={this.state.devices}
          keyExtractor={item => item.id}
          renderItem={(item) => this._renderItem(item)}
        />
 
        <Text style={{ fontSize:15, alignSelf: "center"}}>Message Sent :</Text>
        <Text style={{ fontSize:20, color: "black", fontWeight: "bold", textAlign: "center"}}>{this.state.result}</Text>
 
        <TouchableOpacity onPress={this._onPressButton.bind(this)}>
          <Image
            style={{width: 100, height: 100, alignSelf:"center"}}
            source={require('./button.png')}
          />
        </TouchableOpacity>
      </View>
    );
  }
}
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5FCFF',
  },
  toolbar:{
    paddingTop:30,
    paddingBottom:30,
    flexDirection:'row'
  },
  toolbarButton:{
    width: 50,
    marginTop: 8,
  },
  toolbarTitle:{
    textAlign:'center',
    fontWeight:'bold',
    fontSize: 20,
    flex:1,
    marginTop:6
  },
  deviceName: {
    fontSize: 17,
    color: "black"
  },
  deviceNameWrap: {
    margin: 10,
    borderBottomWidth:1
  }
});

In the above code, When the user taps voice button and gives a voice command then voice is converted to text using Dialogflow API. Next we check the important keywords of the command like ‘switch’, ‘on’ and no. of seconds. If the right  keyword is there then we match the no. of seconds with specific code and transmit the code to Arduino device.  Finally our Arduino device catches the code using bluetooth and turn on LED light for specific time period.

Video Tutorial