WRITING THE MANAGEMENT SYSTEM APPLICATION

Size: px

Start display at page:

Download "WRITING THE MANAGEMENT SYSTEM APPLICATION"

Theodora Fields
5 years ago
Views:

Chapter 10 WRITING THE MANAGEMENT SYSTEM APPLICATION We are going to write an application which will read and evaluate the data coming from our Arduino card reader application.

1 Chapter 10 WRITING THE MANAGEMENT SYSTEM APPLICATION We are going to write an application which will read and evaluate the data coming from our Arduino card reader application. We are going to make this application with Universal Windows Application so that it can work both on the desktops and raspberry pi cards. We create a new Universal Windows project in the Visual Studio. We choose the platform version from the following window. There is a monitor sizing option of the project on the top left of our application. This option is set for telephones as default.

We change this option according to the monitor type we are using. For example we choose the following option because we are going to use a laptop in our application.

2 We change this option according to the monitor type we are using. For example we choose the following option because we are going to use a laptop in our application. For the images we are going to use in the project, we create a folder called images in Solution Explorer and we add the photos of students and other folders and files that we are going to use in form design. We add our file called class.xml into the images folder. We create our XML file with sample data in it as: <?xml version="1.0" encoding="utf-8"?> <Class> <Student> <id>0</id> <CardID>00f0d4d3</CardID> <NameSurName>Ahmet Kaan Akkus</NameSurName> <Number>110</Number> <ClassID>ATP-11A</ClassID> <Privileged>yok</Privileged> </Student> <Student> <id>1</id> <CardID>e463bd58</CardID> <NameSurName>Mahmut Sakar</NameSurName> <Number>100</Number> <ClassID>ATP-11A</ClassID> <Privileged>var</Privileged> </Student> <Student> <id>2</id> <CardID>5474ac04</CardID> <NameSurName>Abdulkadir Delikaya</NameSurName> <Number>36</Number> <ClassID>TL-12A</ClassID> <Privileged>var</Privileged> </Student> </Class> In our project, to display the images, we are going to use an open source SDK called UWP Community Toolkit which was published by Microsoft. This SDK includes many helpful methods, libraries and additional controls. Firstly, we install the SDK called Microsoft.Toolkit.UWP.UI.Controls by using Project / Manage NuGet Packages menu.

After that, into the XAML code in Page tag, we add: xmlns:controls="using:microsoft.toolkit.uwp.ui.controls" line, and to the C# code we add: usingmicrosoft.toolkit.uwp.ui.controls; line.

3 After that, into the XAML code in Page tag, we add: xmlns:controls="using:microsoft.toolkit.uwp.ui.controls" line, and to the C# code we add: usingmicrosoft.toolkit.uwp.ui.controls; line. While installing the related SDK, we choose our project s platform version as minimum Windows 10 (10.0; Build 10586). Otherwise, it will give error. For the Hamburger menu code, firstly we add DataTemplate codes in the MainPage.xaml page. <Page.Resources> <DataTemplate x:name="hamburgerdefaulttemplate"> <Grid Width="240" Height="48"> <Grid.ColumnDefinitions> <ColumnDefinition Width="48" /> <ColumnDefinition /> </Grid.ColumnDefinitions> <SymbolIcon Grid.Column="0" Symbol="Binding Icon" Foreground="White" /> <TextBlock Grid.Column="1" Text="Binding Name" FontSize="16" VerticalAlignment="Center" Foreground="White" /> </Grid> </DataTemplate> </Page.Resources> So that the menu elements can be viewed in the hamburger menu in our code, we perform the necessary actions. In the C# part, we are going to define the menu elements. Finally in the XAML part, we write the codes which constitute our menu. <UWPToolkit:HamburgerMenu x:name="hamburgermenucontrol"

4 PaneBackground="Black" Foreground="White" ItemClick="OnMenuItemClick" ItemTemplate= "StaticResource hamburgerdefaulttemplate" OptionsItemClick="OnMenuItemClick"> <Frame x:name="contentframe" /> </UWPToolkit:HamburgerMenu> We define OnMenuItemClick process which is going to be called when menu elements are clicked in our code and we create a Frame control in the hamburger menu so that the related pages are called and viewed. We write the following codes in the MainPage.xaml.cs page. public MainPage() this.initializecomponent(); var items = new List<MenuItem> new MenuItem() Icon = Symbol.People,Name = "LOGIN", new MenuItem() Icon = Symbol.Manage, Name = "OPERATIONS", new MenuItem() Icon = Symbol.Setting, Name = "SETTINGS" ; hamburgermenucontrol.itemssource = items; public class MenuItem public Symbol Icon get; set; public string Name get; set; private void OnMenuItemClick(object sender, ItemClickEventArgs e) var menuitem = e.clickeditem as MenuItem; if (menuitem.name == "OPERATIONS") contentframe.navigate(typeof(operations)); else if (menuitem.name == "LOGIN") contentframe.navigate(typeof(userlogin)); We add the menu elements into a list we defined in our code. We define the Symbol and Name properties for each of the menu elements. The icons we are going to use for the menu elements are ready in the Symbol option. By using the OnMenuItemClick method, we indicate the pages that will be viewed in the contentframe when menu elements are clicked. After that we are going to design a page on which we will carry out rfid processes. On this page, we are going to carry out processes like following the card reading processes, and logging them. Let s add a new page to our application by using Add Page option from the Project menu. We call our page Operations. Let s change the background color of our form. The XAML code of the background color of our form is as the following: <Grid Background="ThemeResource ApplicationPageBackgroundThemeBrush"> </Grid>

We edit this code as: <Grid > <Grid.Background> <LinearGradientBrush> <GradientStop Color="#FFE7E8EC" Offset="0" /> <GradientStop Color="#FF5E7988" Offset="1" /> </LinearGradientBrush> </Grid.

5 We edit this code as: <Grid > <Grid.Background> <LinearGradientBrush> <GradientStop Color="#FFE7E8EC" Offset="0" /> <GradientStop Color="#FF5E7988" Offset="1" /> </LinearGradientBrush> </Grid.Background> </Grid> We make horizontal color transition by using LinearGradientBrush in our code. The view of our form will be as: Card data which has been read with rfid reader on Arduino, where there is no internet access in our project, are being sent via XBee modules. We read the data sent by using wireless serial communication protocol with the device called xbee explorer usb which we are going to connect to our computer from the usb port. In order to perform processes on the serial port in Universal Windows applications, we add the following lines under the <Capabilities> title in Package.appxmanifest file. <Capabilities> <DeviceCapability Name="serialcommunication"> <Device Id="any"> <Function Type="name:serialPort" /> </Device> </DeviceCapability> </Capabilities> To read the information that is coming from the serial port, we define an asynchronous method called Serial( ) in our code. The methods we use to reach the port information and serial port communication are under the Windows.Devices.Enumeration and Windows.Devices.SerialCommunication namespaces. First of all, we make the following definitions about the serial port. string devices = SerialDevice.GetDeviceSelector("COM4");

6 var dev = await DeviceInformation.FindAllAsync(devices); SerialDevice SerialPort = await SerialDevice.FromIdAsync(dev[0].Id); With the SerialDevice.GetDeviceSelector( ) method, we choose the Com port to which our xbee explorer usb device is connected. We take the information of the device which is connected to the com port with DeviceInformation.FindAllAsync() method. And by creating a SerialDevice item with the SerialDevice.FromIdAsync( ) method and reaching the device via the Id of the device, we start an asynchronous process. And then we make the settings about the serial port. SerialPort.WriteTimeout = TimeSpan.FromMilliseconds(1000); SerialPort.ReadTimeout = TimeSpan.FromMilliseconds(1000); SerialPort.BaudRate = 9600; SerialPort.Parity = SerialParity.None; SerialPort.StopBits = SerialStopBitCount.One; SerialPort.DataBits = 8; With the WriteTimeout ve ReadTimeout properties, we define the writing and reading timeout durations in our code. We assign 1000 milliseconds (1 second) as a value. Baud Rate indicates the data communication speed. It is expressed in bytes per second (bps). Its default value is Parity byte is used to control whether the sent data is wrong or not. Before sending new data, the stop byte must be sent. Data byte is used to define the data length. It can take a value between 5 and 8. 8 value is equal to one byte and it can be used for nearly all kinds of data. We create a continuous while loop in our Serial( ) method. We are going to perform the processes of reading from the serial port in the loop. var rbuffer = (new byte[1]).asbuffer(); await SerialPort.InputStream.ReadAsync(rbuffer, 1, InputStreamOptions.Partial); To hide the values coming from the serial port in the code lines first, we define a variable called rbuffer which is in byte string type. AsBuffer, restores IBuffer type interface which represents a byte series. With the ReadAsync method, values are read asynchronously from a stream. Its usage is as the following: ReadAsync(IBuffer buffer, uint count, InputStreamOptions options) buffer, indicates the IBuffer type variable which represents byte stream. Count, indicates the byte number which is going to be read. Options, indicates the type of the asynchronous reading process. In order to use this parameter you must add Windows.Storage.Streams namespace to the project. It can have None, Partial and ReadAhead values. In the partial option, when one or more bytes are read, reading process is completed. When the process is done, all the byte values that are wanted may not be applicable. In the ReadAhead option, reading process read more byte values by being taken forward optionally. It decreases the delay time and increases the performance. if ((char)rbuffer.toarray()[0]!= 'n')

7 In the line above, we control if it is a new start of row. If it is not, we transfer the value which is read in the strbuilder.append((char)rbuffer.toarray()[0]); line into our StringBuilder item called strbuilder. If it is a new start of row, in the following line, we search for the.bmp expression and we acquire the file name information. temp = strbuilder.tostring().substring(strbuilder.tostring(). IndexOf(".bmp")-3,3); Because the file names of the students photos are in the form of the students numbers, we are going to use this information to reach the student photos. We keep the information about the students in both locally and on the web. We keep them in SQL Azure database in the Web, and in an xml file in the project folder locally. To reach the information in the XML file, we perform the following processes: var file = await StorageFile.GetFileFromApplicationUriAsync(new Uri("msappx:///images/class.xml")); In this line, by using the GetFileFromApplicationUriAsync() method of the StorageFile class, we reach the class.xml file under the images folder. To reach the local files in the UWP applications, we add the ms-appx:/// expression in front of the file path. This expression indicates the type of the file system. using (var inputstream = await file.openreadasync()) In the line above, we read the xml file content in the Windows Runtime stream type with OpenReadAsync( ) method. using (var classicstream = inputstream.asstreamforread()) In the line above, it converts the Windows Runtime stream type to Windows Store stream type. using (var streamreader = new StreamReader(classicStream)) while (streamreader.peek() >= 0) strcontent = streamreader.readtoend(); In these lines, after checking that the file end has been reached or not with the Peek( ) method, if it is not the end of the file, the file content is transformed to string variable called strcontent with the ReadToEnd( ) method.

8 After that, we are going to parse the xml content. We are going to use the methods under System.Xml.Linq namespace. First of all we define the variables to which we are going to transfer the values we read from inside the xml. string name=null,priv=null,cid = null; Then XDocument doc = XDocument.Parse(strContent); In this line transfer the elements of the xml file to the doc variable in XDocument type. name = (from x in doc.descendants("student") where x.element("number").value == temp select (string)x.element("namesurname").value).firstordefault(); In this line, we compare the value of number element under Student tag with the Number value which comes from serial port and which we keep in the temp variable. If the results are equal, we get the NameSurName value under the Student tag again. By making comparison according to the value of Number element this way we can obtain other elements, too. For our example, we take the values in the NameSurName, Privileged and ClassID parts and we transfer these to name, priv and cid variables. Afterwards, we are going to write our codes with which we are going to view the instant processes in GridView called grdoperations. For this, let s add a new class named StudentData with Project/Add Class option to our project. We are going to define the columns that are going to be viewed in GridView. Our code will be as: class StudentDataCollection: ObservableCollection<StudentData> public class StudentData public string Name get; set; public string Number get; set; public string Privileged get; set; public string Time get; set; By defining ObservableCollection in our code, we enable the changes to be automatically transferred into GridView when there are any changes on property. After that we are going to write the DataTemplate codes in XAML code part of GridView. We add the following codes into the GridView XAML codes: <GridView.ItemTemplate> <DataTemplate> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="120"/> <ColumnDefinition Width="50"/> <ColumnDefinition Width="150"/> <ColumnDefinition Width="160"/> </Grid.ColumnDefinitions>

9 <TextBlock Grid.Column="0" Text="Binding Name"/> <TextBlock Grid.Column="1" Text="Binding Number"/> <TextBlock Grid.Column="2" Text="Binding Privileged"/> <TextBlock Grid.Column="3" Text="Binding Time"/> </Grid> </DataTemplate> </GridView.ItemTemplate> After this, we write our C# code necessary for listing in GridView. grdoperations.items.add((new StudentData.StudentData() Name = name, Number = temp, Privileged = "Çıkış İzni="+priv, Time=DateTime.Now.ToString() )); In our code, we linked the values we extracted from XML to the corresponding columns in the GridView. grdoperations.selecteditem = grdoperations. Items[grdOperations.Items.Count - 1]; grdoperations.scrollintoview(grdoperations.items[grdoperations. Items.Count - 1], ScrollIntoViewAlignment.Leading); In these lines, firstly we choose the last line which was added into the GridView and make the scroll down process automatically. After this process, we are going to view the student photos. Photos are going to be listed collectively in dimmed color in a red frame according to the class name. And then, according to the card information, the photo of the related student is going to have a normal color and it is going to be shown in a black frame. However we keep all the read information in a Dictionary so that the student photo can be viewed differently as each student s information comes from the rfid reader. First of all we define a Dictionary named readingnames. Dictionary<string, string> readingnames = new Dictionary<string, string>(); After that we add the student number and class information into the Dictionary. readingnames.add(temp, cid); Then we add a VariableSizedWrapGrid control called wrpsiniflistesi to view the photos. With this control we can reach child elements in it by indicating the column and line values. wrpsiniflistesi.children.clear(); In this line we clean the elements in VariableSizedWrapGrid in our code first. String path = Directory.GetCurrentDirectory() In this line we get the folder path in which the photos of the related class are kept by using the class name value which is kept in cid variable.

10 foreach (String imgurl in Directory.GetFiles(path)) In this line we read the file paths of photo files in the folder one by one with foreach loop. String filename = Path.GetFileName(imgurl); Uri uri = new Uri("ms-appx:///" + filename); var image = new Image Source = new BitmapImage(uri) ; We define the photo source from the file path by creating a new BitmapImage item. In the UWP applications, to reach the local files we add ms-appx:/// expression in front of the file path. This expression shows the type of the file system type. Button btn = new Button(); In this line we define a new Button item. var brush = new ImageBrush(); In this line we define a new ImageBrush item. We are going perform some editing processes on the button by using this. btn.borderbrush = new SolidColorBrush(Windows.UI.Colors.Red); btn.borderthickness = new Thickness(5, 5, 5, 5); First we specify a red border on the button with the BorderBrush option and we choose the thickness of the border with BorderThickness option. BitmapImage btpimg = new BitmapImage(); btpimg.urisource = new Uri(@"ms-appx:///images/photos/"+ cid+"/" + filename); brush.imagesource = btpimg; In these lines we define a BitMapImage called btpimage and we give the file path of the read photo in the loop in the related class as the file path. btn.background = brush; In this line we transfer all the properties for brush item to the BackGround property of the button. btn.background.opacity = 0.4; We make the photo dim by adjusting the opacity value of the button. btn.verticalcontentalignment = VerticalAlignment.Bottom; We align the button content as the photo above and the text below.

11 btn.name = "btn" + System.IO.Path.GetFileNameWithoutExtension(filename); We name the buttons according to the file names automatically to reach them in the code. btn.minheight = 70; btn.minwidth = 60; We specify the height and width of the buttons. btn.margin = new Thickness(3); We adjust the margins of the button. And finally, in the following line, we add the button control in VariableSizedWrapGrid. wrpsiniflistesi.children.add(btn); After the buttons are added, we will display them on the buttons, according to the incoming card information, according to the photos of the related student. foreach (KeyValuePair<string, string> eleman in readingnames) foreach (Button btn in wrpsiniflistesi.children) if ((cid==eleman.value) & (btn.name.tostring(). Substring(3) == eleman.key)) var brush = new ImageBrush(); btn.borderbrush = new SolidColorBrush(Windows.UI.Colors.Black); btn.borderthickness = new Thickness(1, 1, 1, 1); BitmapImage btpimg = new BitmapImage(); btpimg.urisource = new Uri(@"ms-appx:///images/photos/"+ cid+"/" + btn.name.tostring().substring(3)+".jpg"); brush.imagesource = btpimg; btn.background = brush; break; In the foreach loop in our code, we choose the buttons in VariableSizedWrapGrid. By using the if structure, if the class name value kept in cid variable is equal to the value kept in the Dictionary called readingnames and the button name which is read is compatible with the key kept in the Dictionary called readingnames, we make the process. By defining a new brush item, we add a black border with BorderBrush property and we define the border thickness with the

BorderThickness property. After that we define a BitmapImage item and as the file path we give the file path of the student photo coming from button name.

12 BorderThickness property. After that we define a BitmapImage item and as the file path we give the file path of the student photo coming from button name. From inside the button called btnportopen, we run our Serial( ) method by calling it as seen in the following line. private async void btnportopen_click(object sender, RoutedEventArgs e) Serial(); While defining our method we defined it as an asynchronous method by adding the async expression in front of it. Until the running of the asynchronous methods ends, running the other program lines is continued by going back to the application. When we read the card information from the RFID reader, the information in the Operations page will be viewed as:

Note: This demo app created for this lab uses the Visual Studio 2015 RTM and Windows Tools SDK ver

Windows 10 UWP Hands on Lab Lab 2: Note: This demo app created for this lab uses the Visual Studio 2015 RTM and Windows Tools SDK ver 10240. 1. Select the Models folder and bring up the popup menu and