GSOC19

Read more about the article API’s in SUSI.AI BotBuilder

API’s in SUSI.AI BotBuilder

In this blog, I’ll explain the different API’s involved in the SUSI.AI Bot Builder and its working. Now if you are wondering how the SUSI.AI bot builder works or how drafts are saved, then this is the perfect blog. I’ll be explaining the different API’s grouped by different API endpoints. API Implementation fetchChatBots export function fetchChatBots() { const url = `${API_URL}/${CMS_API_PREFIX}/getSkillList.json`; return ajax.get(url, { private: 1, }); } This API is used to fetch all your saved chatbots, which are displayed on the BotBuilder Page. The API endpoint is getSkillList.json. Same endpoint is used when a user creates a skill, the difference is query parameter private is passed which then returns your chatbots. Now if you are wondering why we have same endpoint for skills and chatbots, the simple plain reason for this is chatbots are your private skills. fetchBotDetails export function fetchBotDetails(payload) { const { model, group, language, skill } = payload; const url = `${API_URL}/${CMS_API_PREFIX}/getSkill.json`; return ajax.get(url, { model, group, language, skill, private: 1, }); } This API is used to fetch details of bot/skill respectively from the API endpoint getSkill.json. Group name, language, skill name, private and model are passed as query parameters. fetchBotImages export function fetchBotImages(payload) { const { name: skill, language, group } = payload; const url = `${API_URL}/${CMS_API_PREFIX}/getSkill.json`; return ajax.get(url, { group, language, skill, private: 1, }); } This API is used to fetch skill and bot images from the API endpoint getSkill.json. Group name, language, skill name and private are passed as query parameters. uploadBotImage export function uploadBotImage(payload) { const url = `${API_URL}/${CMS_API_PREFIX}/uploadImage.json`; return ajax.post(url, payload, { headers: { 'Content-Type': 'multipart/form-data' }, isTokenRequired: false, }); } This API is used to upload the Bot image to the API endpoint uploadImage.json.The Content-Type entity header is used to indicate the media type of the resource. multipart/form-data means no characters will be encoded. This is used when a form requires a binary data like the contents of a file or image to be uploaded. deleteChatBot export function deleteChatBot(payload) { const { group, language, skill } = payload; const url = `${API_URL}/${CMS_API_PREFIX}/deleteSkill.json`; return ajax.get(url, { private: 1, group, language, skill, }); } This API is used to delete Skill and Bot from the API endpoint deleteSkill.json. storeDraft export function storeDraft(payload) { const { object } = payload; const url = `${API_URL}/${CMS_API_PREFIX}/storeDraft.json`; return ajax.get(url, { object }); } This API is used to store draft Bot to the API endpoint storeDraft.json. The object passed as parameter has the properties given by the user such as skill name,group etc., while saving the draft. readDraft export function readDraft(payload) { const url = `${API_URL}/${CMS_API_PREFIX}/readDraft.json`; return ajax.get(url, { ...payload }); } This API is used to fetch draft from the API endpoint readDraft.json. This API is called on the BotBuilder Page where all the saved drafts are shown. deleteDraft export function deleteDraft(payload) { const { id } = payload; const url = `${API_URL}/${CMS_API_PREFIX}/deleteDraft.json`; return ajax.get(url, { id }); } This API is used to delete the saved Draft from the API endpoint…

Continue ReadingAPI’s in SUSI.AI BotBuilder
Read more about the article Implementing a Chat Bubble in SUSI.AI

Implementing a Chat Bubble in SUSI.AI

SUSI.AI now has a chat bubble on the bottom right of every page to assist you. Chat Bubble allows you to connect with susi.ai on just a click. You can now directly play test examples of skill on chatbot. It can also be viewed on full screen mode. Redux Code Redux Action associated with chat bubble is handleChatBubble. Redux state chatBubble can have 3 states: minimised - chat bubble is not visible. This set state is set when the chat is viewed in full screen mode.bubble - only the chat bubble is visible. This state is set when close icon is clicked and on toggle.full - the chat bubble along with message section is visible. This state is set when minimize icon is clicked on full screen mode and on toggle. const defaultState = { chatBubble: 'bubble', }; export default handleActions( { [actionTypes.HANDLE_CHAT_BUBBLE](state, { payload }) { return { ...state, chatBubble: payload.chatBubble, }; }, }, defaultState, ); Speech box for skill example The user can click on the speech box for skill example and immediately view the answer for the skill on the chatbot. When a speech bubble is clicked a query parameter testExample is added to the URL. The value of this query parameter is resolved and answered by Message Composer. To be able to generate an answer bubble again and again for the same query, we have a reducer state testSkillExampleKey which is updated when the user clicks on the speech box. This is passed as key parameter to messageSection. Chat Bubble Code The functions involved in the working of chatBubble code are: openFullScreen - This function is called when the full screen icon is clicked in the tab and laptop view and also when chat bubble is clicked in mobile view. This opens up a full screen dialog with message section. It dispatches handleChatBubble action which sets the chatBubble reducer state as minimised.closeFullScreen - This function is called when the exit full screen icon is clicked. It dispatches a handleChatBubble action which sets the chatBubble reducer state as full.toggleChat -  This function is called when the user clicks on the chat bubble. It dispatches handleChatBubble action which toggles the chatBubble reducer state between full and bubble.handleClose - This function is called when the user clicks on the close icon. It dispatches handleChatBubble action which sets the chatBubble reducer state to bubble. openFullScreen = () => { const { actions } = this.props; actions.handleChatBubble({ chatBubble: 'minimised', }); actions.openModal({ modalType: 'chatBubble', fullScreenChat: true, }); }; closeFullScreen = () => { const { actions } = this.props; actions.handleChatBubble({ chatBubble: 'full', }); actions.closeModal(); }; toggleChat = () => { const { actions, chatBubble } = this.props; actions.handleChatBubble({ chatBubble: chatBubble === 'bubble' ? 'full' : 'bubble', }); }; handleClose = () => { const { actions } = this.props; actions.handleChatBubble({ chatBubble: 'bubble' }); actions.closeModal(); }; Message Section Code (Reduced) The message section comprises of three parts the actionBar, messageSection and the message Composer. Action Bar The actionBar consists of the action buttons…

Continue ReadingImplementing a Chat Bubble in SUSI.AI
Read more about the article List SUSI.AI Devices in Admin Panel

List SUSI.AI Devices in Admin Panel

In this blog I’ll be explaining about the Devices Tab in SUSI.AI Admin Panel. Admins can now view the connected devices of the users with view, edit and delete actions. Also the admins can directly view the location of the device on the map by clicking on the device location of that user. Implementation List Devices Devices tab displays device name, macId, room, email Id, date added, last active, last login IP and location of the device. loadDevices function is called on componentDidMount which calls the fetchDevices API which fetches the list of devices from /aaa/getDeviceList.json endpoint. List of all devices is stored in devices array. Each device in the array is an object with the above properties. Clicking on the device location opens a popup displaying the device location on the map. loadDevices = () => { fetchDevices() .then(payload => { const { devices } = payload; let devicesArray = []; devices.forEach(device => { const email = device.name; const devices = device.devices; const macIdArray = Object.keys(devices); const lastLoginIP = device.lastLoginIP !== undefined ? device.lastLoginIP : '-'; const lastActive = device.lastActive !== undefined ? new Date(device.lastActive).toDateString() : '-'; macIdArray.forEach(macId => { const device = devices[macId]; let deviceName = device.name !== undefined ? device.name : '-'; deviceName = deviceName.length > 20 ? deviceName.substr(0, 20) + '...' : deviceName; let location = 'Location not given'; if (device.geolocation) { location = ( {device.geolocation.latitude},{device.geolocation.longitude} ); } const dateAdded = device.deviceAddTime !== undefined ? new Date(device.deviceAddTime).toDateString() : '-'; const deviceObj = { deviceName, macId, email, room: device.room, location, latitude: device.geolocation !== undefined ? device.geolocation.latitude : '-', longitude: device.geolocation !== undefined ? device.geolocation.longitude : '-', dateAdded, lastActive, lastLoginIP, }; devicesArray.push(deviceObj); }); }); this.setState({ loadingDevices: false, devices: devicesArray, }); }) .catch(error => { console.log(error); }); }; View Device View action redirects to users /mydevices?email<email>&macid=<macid>. This allows admin to have full control of the My devices section of the user. Admin can change device details and delete device. Also admin can see all the devices of the user from the ALL tab. To edit a device click on edit icon in the table, update the details and click on check icon. To delete a device click on the delete device which then asks for confirmation of device name and on confirmation deletes the device. Edit Device Edit actions opens up a dialog modal which allows the admin to update the device name and room. Clicking on the edit button calls the modifyUserDevices API which takes in email Id, macId, device name and room name as parameters. This calls the API endpoint /aaa/modifyUserDevices.json. handleChange = event => { this.setState({ [event.target.name]: event.target.value }); }; render() { const { macId, email, handleConfirm, handleClose } = this.props; const { room, deviceName } = this.state; return ( <React.Fragment> <DialogTitle>Edit Device Details for {macId}</DialogTitle> <DialogContent> <OutlinedTextField value={deviceName} label="Device Name" name="deviceName" variant="outlined" onChange={this.handleChange} style={{ marginRight: '20px' }} /> <OutlinedTextField value={room} label="Room" name="room" variant="outlined" onChange={this.handleChange} /> </DialogContent> <DialogActions> <Button key={1} color="primary" onClick={() => handleConfirm(email, macId, room, deviceName)}> Change </Button> <Button key={2} color="primary" onClick={handleClose}> Cancel </Button> </DialogActions>…

Continue ReadingList SUSI.AI Devices in Admin Panel
Read more about the article Displaying Private Skills and Drafts on SUSI.AI

Displaying Private Skills and Drafts on SUSI.AI

The ListPrivateSkillService and ListPrivateDraftSkillService endpoint was implemented on SUSI.AI Server for SUSI.AI Admins to view the bots and drafts created by users respectively. This allows admins to monitor the bots and drafts created by users, and delete the ones which violate the guidelines. Also admins can see the sites where the bot is being used. The endpoint of both ListPrivateSkillService and ListPrivateDraftSkillService is of GET type. Both of them have a compulsory access_token parameter but ListPrivateSkillService has an extra optional search parameter. access_token(necessary): It is the access_token of the logged in user. It means this endpoint cannot be accessed in anonymous mode. search: It fetches a bot with the searched name. The minimum user role is set to OPERATOR. API Development ListPrivateSkillService For creating a list, we need to access each property of botDetailsObject, in the following manner: Key → Group  → Language → Bot Name  → BotList The below code iterates over the uuid of all the users having a bot, then over different groupNames,languageNames, and finally over the botNames. If search parameter is passed then it searches for the bot_name in the language object. Each botDetails object consists of bot name, language, group and key i.e uuid of the user which is then added to the botList array. JsonTray chatbot = DAO.chatbot; JSONObject botDetailsObject = chatbot.toJSON(); JSONObject keysObject = new JSONObject(); JSONObject groupObject = new JSONObject(); JSONObject languageObject = new JSONObject(); List botList = new ArrayList(); JSONObject result = new JSONObject(); Iterator Key = botDetailsObject.keys(); List keysList = new ArrayList(); while (Key.hasNext()) { String key = (String) Key.next(); keysList.add(key); } for (String key_name : keysList) { keysObject = botDetailsObject.getJSONObject(key_name); Iterator groupNames = keysObject.keys(); List groupnameKeysList = new ArrayList(); while (groupNames.hasNext()) { String key = (String) groupNames.next(); groupnameKeysList.add(key); } for (String group_name : groupnameKeysList) { groupObject = keysObject.getJSONObject(group_name); Iterator languageNames = groupObject.keys(); List languagenamesKeysList = new ArrayList(); while (languageNames.hasNext()) { String key = (String) languageNames.next(); languagenamesKeysList.add(key); } for (String language_name : languagenamesKeysList) { languageObject = groupObject.getJSONObject(language_name); If search parameter is passed, then search for a bot with the given name and add the bot to the botList if it exists. It will return all bots which have bot name as the searched name. if (call.get("search", null) != null) { String bot_name = call.get("search", null); if(languageObject.has(bot_name)){ JSONObject botDetails = languageObject.getJSONObject(bot_name); botDetails.put("name", bot_name); botDetails.put("language", language_name); botDetails.put("group", group_name); botDetails.put("key", key_name); botList.add(botDetails); } } If search parameter is not passed, then it will return all the bots created by the users. else { Iterator botNames = languageObject.keys(); List botnamesKeysList = new ArrayList(); while (botNames.hasNext()) { String key = (String) botNames.next(); botnamesKeysList.add(key); } for (String bot_name : botnamesKeysList) { JSONObject botDetails = languageObject.getJSONObject(bot_name); botDetails.put("name", bot_name); botDetails.put("language", language_name); botDetails.put("group", group_name); botDetails.put("key", key_name); botList.add(botDetails); } } } } } List of all bots, botList is return as server response. ListPrivateDraftSkillService For creating a list we need to iterate over each user and check whether the user has a draft bot. We get all the authorized clients from DAO.getAuthorizedClients(). We then iterate over each client and get their…

Continue ReadingDisplaying Private Skills and Drafts on SUSI.AI
Read more about the article CRUD operations on Config Keys in Admin Panel of SUSI.AI

CRUD operations on Config Keys in Admin Panel of SUSI.AI

SUSI.AI Admin Panel now allows the Admin to create, read, update and delete config keys present in system settings. Config keys are API keys which are used to link the application to third party services like Google Maps, Google ReCaptcha, Google Analytics, Matomo, etc. The API key is a unique identifier that is used to authenticate requests associated with the project for usage and billing purposes. CRUD Operations Create Config Key To create a config key click on “Add Config Key” Button, a dialog opens up which has two field Key Name and Key Value. this.props.actions.openModal opens up the shared Dialog Modal. On clicking on “Create”, the createApiKey is called which takes in the two parameters. handleCreate = () => { this.props.actions.openModal({ modalType: 'createSystemSettings', type: 'Create', handleConfirm: this.confirmUpdate, keyName: this.state.keyName, keyValue: this.state.keyValue, handleClose: this.props.actions.closeModal, }); }; handleSave = () => { const { keyName, keyValue } = this.state; const { handleConfirm } = this.props; createApiKey({ keyName, keyValue }) .then(() => handleConfirm()) .catch(error => { console.log(error); }); }; Read Config Key API endpoint fetchApiKeys is called on componentDidMount and when Config Key is created, updated or deleted. fetchApiKeys = () => { fetchApiKeys() .then(payload => { let apiKeys = []; let i = 1; let keys = Object.keys(payload.keys); keys.forEach(j => { const apiKey = { serialNum: i, keyName: j, value: payload.keys[j], }; ++i; apiKeys.push(apiKey); }); this.setState({ apiKeys: apiKeys, loading: false, }); }) .catch(error => { console.log(error); }); }; Update Config Key To Update a config key click on edit from the actions column, Update Config Key dialog opens up which allows you to edit the key value. On clicking on update, the createApiKey API is called. handleUpdate = row => { this.props.actions.openModal({ modalType: 'updateSystemSettings', type: 'Update', keyName: row.keyName, keyValue: row.value, handleConfirm: this.confirmUpdate, handleClose: this.props.actions.closeModal, }); }; Delete Config Key To delete a config key click on delete from actions column, delete config key confirmation dialog opens up. On clicking on Delete, the deleteApiKey is called which takes in key name as parameter. handleDelete = row => { this.setState({ keyName: row.keyName }); this.props.actions.openModal({ modalType: 'deleteSystemSettings', keyName: row.keyName, handleConfirm: this.confirmDelete, handleClose: this.props.actions.closeModal, }); }; confirmDelete = () => { const { keyName } = this.state; deleteApiKey({ keyName }) .then(this.fetchApiKeys) .catch(error => { console.log(error); }); this.props.actions.closeModal(); }; In conclusion, CRUD operations of Config Keys help admins to manage third party services. With these operations the admin can manage the API keys of various services without having to look for them in the backend. Resources What is CRUD?CRUD in React SUSI.AI repository

Continue ReadingCRUD operations on Config Keys in Admin Panel of SUSI.AI

Neurolab data transfer – Establishing serial communication between Arduino and Android

In the development process of the Neurolab Android, we needed an Arduino-Android connection for transfer of data from datasets which included String and float data type values. In this blog post, I will show you how to establish a serial communication channel between Android and Arduino through USB cable through which we can transmit data bidirectionally. Requirements Hardware: Android PhoneArduino (theoretically from any type, but I’ll be using Arduino Uno)USB 2.0 Cable Type A/B (for Arduino)OTG Cable (On The Go)Normal USB Cable (for transferring the data from Android Studio to your phone) Software: Android StudioArduino IDE Wiring and Setup Wiring must be established in the following way:                                                                                  Figure: Android-Arduino Setup Working on the Android Side We would be using the UsbSerial Library by felHR85 for establishing serial communication. 1. Adding the dependency: a) Add the following line of code to your app level build.gradle file. implementation "com.github.felHR85:UsbSerial:$rootProject.usbSerialLibraryVersion" Note: The ‘usbSerialLibraryVersion’ may change from time to time. Please keep your project with the latest library version. Updates can be found here. b) Add jitpack to your project.build.gradle file. allprojects { repositories { jcenter() maven { url "https://jitpack.io" } } } 2. Working with Arduino: We need to program the Arduino to send and receive data. We achieve that with the help of Arduino IDE as mentioned above. Verify, compile and upload a sketch to the Arduino for sending and receiving data. If you are a complete beginner in Arduino programming, there are example sketches for this same purpose. Load an example sketch from under the communication segment and choose the serial communication sketch. Here, we will be working with a simple sketch for the Arduino such that it simply echoes whatever it receives on the serial port. Here is sketch code: // the setup routine runs once when you press reset: void setup() { // initialize serial communication at 9600 bits per second: Serial.begin(9600); } // the loop routine runs over and over again forever: void loop() { char incomingByte; // If there is a data stored in the serial receive buffer, read it and print it to the serial port as human-readable ASCII text. if(Serial.available()){ incomingByte = Serial.read(); Serial.print(incomingByte); } } Feel free to compile and upload it to your own Arduino. 2. Working with Android: Firstly, we need an USBManager instance initialized with the system service - ‘USB_SERVICE’. This needs to be done in an Activity (preferably main) so that this instance can be passed to the Communication Handler class, which we are going to create next.Now, we will be working with a class for handling the serial communications with our Android device and the Arduino board. We would pass the USBManager instance to this class wherein work will be done with that to find the USBDevice and USBDeviceConnection Starting with, we need to search for any attached Arduino devices to the Android device. We create a method for this and use the ‘getDevicesList’ callback to achieve this in the following way: public void searchForArduinoDevice(Context context) { HashMap usbDevices…

Continue ReadingNeurolab data transfer – Establishing serial communication between Arduino and Android

How to transfer data in files from different locations to app directory

In Android apps, we might have seen various instances in-app where we can import, export or save files. Now, where does the files go to or come from? There needs to be a specific folder or directory (maybe root) for a particular app which inturn contains the necessary files, the user has worked with from the app. In this blog, we will be learning about the backend of how to create directories and store files in them dynamically with proper content. Context I have been working with FOSSASIA on the project Neurolab-Android. In the app, we have various program modes, which has the option to save/record data. The saved data gets logged in a new file in the Neurolab directory/folder. Feel free to go ahead and explore the feature. The Save/Record feature in Neurolab can be found in the app bar or as an option in the drop down menu present in the app bar itself in any program mode. The feature becomes functional, once the data is imported with the import data feature which is also present in the app bar.                                               Figure: Demonstration of features in Neurolab Tutorial Now, starting off, there are apps out there wherein users can save files from different segments in the app and those saved files can be used by the app itself at other times as they belong to that app itself specifically. First off, we need to make sure we have a directory for our app, wherein the files will get stored. If the directory or folder is not present, it needs to be created. File directory = new File( Environment.getExternalStorageDirectory().getAbsolutePath() + File.separator + DIRECTORY_NAME); if (!directory.exists()) { try { directory.mkdir(); } catch (Exception e) { e.printStackTrace(); } } Now, once the directory is present, we can go ahead to keep the saved files in it. Also we will be implementing category-wise storage of the files. Simply put, we will be storing csv files in the CSV folder, xls files in the Excel folder, etc. In the below code example, we see the use case of CSV ‘category’. private void categoryWise() {File categoryDirectory = new File( Environment.getExternalStorageDirectory().getAbsolutePath() + File.separator + DIRECTORY_NAME + File.separator + category); if (!categoryDirectory.exists()) { try { categoryDirectory.mkdir(); } catch (Exception e) { e.printStackTrace(); } }} For saving a file in our app, we need to get (import) the file into our app. Once the file is imported, we can get the path of the file with the help of its URI. Let’s assign the path to a variable named ‘importedFilePath’. Then we place the imported file in the required category directory within our parent app directory depending and deciding upon the extension of the imported file. File importedFile = new File(importedFilePath); FilePathUtil.setupPath(); Date currentTime = Calendar.getInstance().getTime(); SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss"); String fileName = sdf.format(currentTime); File dst = new File(Environment.getExternalStorageDirectory().getAbsolutePath() + File.separator + DIRECTORY_NAME + File.separator + categoryDirectory + File.separator + fileName + ".$extension"); if (!dst.exists()) { try { categoryWise() transfer(importedFile, dst); } catch (IOException e) {…

Continue ReadingHow to transfer data in files from different locations to app directory
Read more about the article Dialog Component in SUSI.AI

Dialog Component in SUSI.AI

Dialog Component in SUSI.AI is rendered in App.js to remove code redundancy. Redux is integrated in the Dialog component which allows us to open/close the dialog from any component by altering the modal states. This implementation allows us to get rid of the need of having dialog component in different components. Redux Code There are two actions and reducers which control the dialog component. Default state of isModalOpen is false and modalType is an empty string. To open a dialog modal the action openModal is dispatched, which sets isModalOpen to true and the modalType. To close a dialog modal the action closeModal is dispatched, which sets isModalOpen to default state i.e. false. import { handleActions } from 'redux-actions'; import actionTypes from '../actionTypes'; const defaultState = { modalProps: { isModalOpen: false, modalType: '', }, }; export default handleActions( { [actionTypes.UI_OPEN_MODAL](state, { payload }) { return { ...state, modalProps: { isModalOpen: true, ...payload, }, }; }, [actionTypes.UI_CLOSE_MODAL](state) { return { ...state, modalProps: defaultState.modalProps, }; }, } defaultState, ); Shared Dialog Component Dialog Modal can be opened from any component by dispatching an action.  To open a Dialog Modal: this.props.actions.openModal({modalType: [modal name]}); To close a Dialog Modal: this.props.actions.closeModal(); Shared Dialog Component has a DialogData object which contains objects with two main properties : Dialog component and Dialog size. Other props can also be passed along with these two properties such as fullScreen. Dialog Content of different Dialogs are present in their respective folders. Each Dialog Content has a Title, Content and Actions.Different Dialog types present are: Confirm Delete with Input: This dialog modal is used when a user deletes account, device and skill. Confirm Dialog: This dialog modal is used where confirmation is required from the user/admin such as on changing skill status, on password reset,etc.Share Dialog: This dialog modal opens up when the share icon is clicked in the chat.Standard Action Dialog: This dialog modal opens up on restore skill, delete feedback, system settings and bot.Tour Dialog: This dialog modal opens up SUSI.AI tour. To add a new Dialog to DialogSection, the steps are: Import the Dialog Content ComponentAdd the Dialog Component to DialogData object in the following manner: const DialogData = { [dialog componet name]: { Component : [imported dialog component name], size : [size of the Dialog Component]}, } Code (Reduced) const DialogData = {   login: { Component: Login, size: 'sm' }, } const DialogSection = props => {  const {    actions,    modalProps: { isModalOpen, modalType, ...otherProps },    visited,  } = props;  const getDialog = () => {    if (isModalOpen) {      return DialogData[modalType];    }    return DialogData.noComponent;  };  const { size, Component, fullScreen = false } = getDialog(); return ( <Dialog     maxWidth={size}     fullWidth={true}     open={isModalOpen || !visited}     onClose={isModalOpen ? actions.closeModal : actions.setVisited}      fullScreen={fullScreen}    >     <DialogContainer>       {Component ? <Component {...otherProps} /> : null}     </DialogContainer>  </Dialog> ) }; In conclusion, having a shared dialog component reduces redundant code and allows to have a similar Dialog UI across the…

Continue ReadingDialog Component in SUSI.AI
Read more about the article My Devices in SUSI.AI

My Devices in SUSI.AI

In this blog I’ll be explaining how to view, edit and delete connected devices from SUSI.AI webclient. To connect a device open up the SUSI.AI android app, and fill the details accordingly. Device can also be connected by logging in to your raspberry pi. Once the devices is connected you can edit, delete and access specific features for the device from the web client. My Devices All the connected devices can be viewed in My Devices tab in the Dashboard. In this tab all the devices connected to your account are listed in a table along with their locations on the map. Each device table row has three action buttons - view, edit and delete. Clicking on the view button takes to device specific page. Clicking on the edit button makes the fields name and room editable in table row. Clicking on the delete button opens a confirm with input dialog. Device can be deleted by entering the device name and clicking on delete. To fetch all the device getUserDevices action is dispatched on component mounting which sets the reducer state devices in settings reducer. initialiseDevices function is called after all the devices are fetched from the server. This function creates an array of objects of devices with name, room, macId, latitude, longitude and location. componentDidMount() { const { accessToken, actions } = this.props; if (accessToken) { actions .getUserDevices() .then(({ payload }) => { this.initialiseDevices(); this.setState({ loading: false, emptyText: 'You do not have any devices connected yet!', }); }) .catch(error => { this.setState({ loading: false, emptyText: 'Some error occurred while fetching the devices!', }); console.log(error); }); } document.title = 'My Devices - SUSI.AI - Open Source Artificial Intelligence for Personal Assistants, Robots, Help Desks and Chatbots'; } initialiseDevices = () => { const { devices } = this.props; if (devices) { let devicesData = []; let deviceIds = Object.keys(devices); let invalidLocationDevices = 0; deviceIds.forEach(eachDevice => { const { name, room, geolocation: { latitude, longitude }, } = devices[eachDevice]; let deviceObj = { macId: eachDevice, deviceName: name, room, latitude, longitude, location: `${latitude}, ${longitude}`, }; if ( deviceObj.latitude === 'Latitude not available.' || deviceObj.longitude === 'Longitude not available.' ) { deviceObj.location = 'Not found'; invalidLocationDevices++; } else { deviceObj.latitude = parseFloat(latitude); deviceObj.longitude = parseFloat(longitude); } devicesData.push(deviceObj); }); this.setState({ devicesData, invalidLocationDevices, }); } }; Device Page Clicking on the view icon button in my devices redirects to mydevices/:macId. This page consists of device information in tabular format, local configuration settings and location of the device on the map. User can edit and delete the device from actions present in table. Local configuration settings can be accessed only if the user is logged in the local server. Edit Device To edit a device click on the edit icon button in the actions column of the table. The name and room field become editable.On changing the values handleChange function is called which updates the devicesData state. Clicking on the tick icon saves the new details by calling the onDeviceSave function. This function class the addUserDevice…

Continue ReadingMy Devices in SUSI.AI

How to fix undetected Arduino boards in Android

In the development process of the Neurolab Android app, we needed an Arduino-Android connection. This blog explains how to  establish the connection and getting the Arduino board detected in my Android device Context-connecting the board and getting it detected Arduino boards are primarily programmed from the Desktop using the Arduino IDE, but they are not limited to the former. Android devices can be used to program the circuit boards using an application named Arduinodroid. Arduino is basically a platform for building various types of electronic projects and the best part about it is that, it is open-sourced. Arduino, the company has got two products The physical programmable circuit board (often referred to as a microcontroller).  Examples of Arduino circuit boards - UNO, UNO CH340G, Mega, etc. Find more here. Connecting the board and getting it detected Arduino boards are primarily programmed from the Desktop using the Arduino IDE, but they are not limited to the former. Android devices can be used to program the circuit boards using an application named Arduinodroid. In this blog, we are going to use Arduinodroid app for establishing a connection between the Arduino board and the Android device, getting the board detected in the Android phone and uploading a sketch to it. Materials/Gadgets required:- Arduino board (UNO preferably)Arduino-USB CableOTG CableAndroid device Now, one of the most frequent issues, while establishing a connection and getting the Arduino board detected with the Android device, is the error message of: “No Arduino boards detected” in the Arduinodroid app. There can be a few core reasons for this - Your Android mobile device isn’t USB-OTG supported - Probably because it is an old model or it might be a company/brand-specific issue.Disabled OTG Mode - Be sure to enable USB-OTG mode (only if your device has one) from the Developer options in your Android device settings. Even after trying and making sure of these above points, if you still continue to get an error while uploading a sketch from the Arduinodroid app like this:                                                             Figure 1: The Error Message Follow the steps below carefully and simultaneously one after the other: Look for any external module attached to your Arduino board using jumper wires. If so, remove those connections completely and press the reset button on the Arduino circuit board. The attached modules can be one of the following: Micro SD Card module, Bluetooth module, etc.Remove pin connections, if any from the TX and RX pin-slots in the Arduino board. These pre-attached pins can cause unnecessary signal transfers which can hinder and make the actual port of Arduino board busy.Before connecting the Arduino to the Android device, go to the drop down menu in the app at the top-right corner -> Settings -> Board Type -> Arduino -> UNONow, you need to code a sketch and make it ready for compile and upload to the circuit board. We will use a basic example sketch for this case. Feel free to try out your own custom coded Arduino sketches. Go to the…

Continue ReadingHow to fix undetected Arduino boards in Android