IoT Remote Access Pi Login Using Raspberry PI 3 Model B

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 2 or 3 Model B
• Windows 10 operating system
• Visual studio Universal windows platform (UWP)
• Windows IoT Remote Client App Windows Store 

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 a IoT References package, so right-click on the "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 the 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 a Raspberry Pi LOGIN page. Here is the code from MainPage.XAML 

 

 

XAML Code

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

Step 6

 

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

 

 

Step 7

 

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

 

 

Step 8

 

In this step, click on BlankPage1.xaml.

 

 

XAML Code

<Grid Background="SandyBrown">
        <StackPanel
             HorizontalAlignment="Center" VerticalAlignment="Center" >
            <TextBlock Text="Raspberry Pi Remote Connected" FontWeight="Bold"
             FontSize="25"/>
            <Button x:Name="b1" Content="LogOut" FontSize="30"
             FontWeight="Bold" Click="b1_Click"/>
        </StackPanel>
</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

if (Name.Text == "Admin")
{
 if (Pass.Password == "Admin")
 {
  this.Frame.Navigate(typeof(BlankPage1));
 }
 else
 {
  textc.Text = "Password Worng";
 }
}
else
{
 textb.Text = "UserName  Worng";
}

Step 10

 

Similarly, navigate from Blankpage1 to MainPage. 

 

 

Source Code

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

Properties Option

 

In this step, click on the Debug option.

 

 

We can change the 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.