IoT Remote Access Pi Login Using Raspberry PI 3 Model B

This is an introduction of Raspberry Pi 3 Model B. We will explore what Raspberry Pi 3 has to offer in terms of its features and performance.

Introduction

This is an introduction to Raspberry Pi 3 Model B. We will explore what Raspberry Pi 3 has to offer in terms of its features and performance. I would like to introduce Raspberry Pi as the world’s most inexpensive and powerful Single Board Computer. Ever since the launch of Raspberry Pi in 2012, we have seen several versions of it. This is the world’s cheapest microprocessor unit specially built for learners and makers. We can easily learn how software and hardware work together without worrying about damage/cost.

Requirements

Raspberry Pi 3 Model B

 

Pi 3 Image - In-built Wireless Network (WIFI) And Bluetooth(BT)

Microsoft Platform contributed IoT ( "RASPBERRY PI" )

 

Step 1

Open Visual Studio. I have VS 2017. Go to File>>New>>Project Select Visual C#>>Windows Universal>>Blank App (Windows Universal).

 

Step 2

Then, you need IoT References package, so right click on "Add" option.

 

Step 3

Select Universal Windows, extract Extensions, select Windows IoT Extensions for the UWP newer version 10.0.1439, and then click on OK button.

 

Step 4

In this step, click on MainPage.xaml page.

 

 We will create own things but I am creating a login page with examples.

Step 5

In this step, add Raspberry Pi LOGIN page. Here is the code from MainPage.XAML 

 

XAML Code

  1. <Grid Background="SandyBrown">  
  2.         <Image  Source="Image/ras1.png" Margin="36,10,30,432"/>  
  3.         <StackPanel Background="Gray"  
  4.              HorizontalAlignment="Center" VerticalAlignment="Center" Height="299" Margin="373,459,347,10" Width="304" >  
  5.             <TextBlock x:Name="textblock" Text="LogIn" FontSize="40" FontWeight="Bold" Margin="10"/>  
  6.             <TextBox x:Name="Name" />  
  7.             <PasswordBox x:Name="Pass" />  
  8.             <Button x:Name="ClickMe" Content="Click IoT"  Margin="102,10,106,10" HorizontalAlignment="Center"  
  9.              Click="ClickMe_Click" Height="40" Width="96"/>  
  10.             <TextBlock x:Name="textb"/>
  11.             <TextBlock x:Name="textc"/>
  12.         </StackPanel>  
  13.      </Grid>  

Step 6

After this, we are adding the Navigation Page. This page sets condition true to go to next page.

 

Step 7

Add new item>>Visual C# >>XAML>>Blank Page.

 

Step 8

In this step, click on BlankPage1.xaml.

 

XAML Code

  1. <Grid Background="SandyBrown">  
  2.         <StackPanel  
  3.              HorizontalAlignment="Center" VerticalAlignment="Center" >  
  4.             <TextBlock Text="Raspberry Pi Remote Connected" FontWeight="Bold"   
  5.              FontSize="25"/>  
  6.             <Button x:Name="b1" Content="LogOut" FontSize="30"   
  7.              FontWeight="Bold" Click="b1_Click"/>  
  8.         </StackPanel>  
  9. </Grid>  

Step 9

After this, in MainPage.XAML.CS, write the backend code for a very simple conditional statement.

 

I have given source code.

Source Code

  1. if (Name.Text == "Admin")  
  2.             {  
  3.                 if (Pass.Password == "Admin")  
  4.                 {  
  5.                     this.Frame.Navigate(typeof(BlankPage1));  
  6.                 }  
  7.                 else  
  8.                 {  
  9.                     textc.Text = "Password Worng";  
  10.                 }  
  11.             }  
  12.               else  
  13.             {  
  14.                 textb.Text = "UserName  Worng";  
  15.             }  

Step 10

Similarly, navigate from Blankpage1 to MainPage. 

 

Source Code

  1. private void b1_Click(object sender, RoutedEventArgs e)  
  2.         {  
  3.             this.Frame.Navigate(typeof(MainPage));  
  4.         }  

Properties Option

In this step, click on Debug option.

 

We can change IoT Properties IP Address... 

Step 11

Connect Raspberry Pi and OS to the same network.

 

Step 12

In this step, just open your Windows IoT Remote Client App, then write Pi IP.

 

Step 13

Navigate page shows that Raspberry Pi is remotely connected. 

Iot Remote Machine execution is complete.

 

SUMMARY

In this article, you learned how to create a LoginPage for Raspberry Pi.

If you have any questions/ feedback/ issues, please write in the comment box.