Tutorial 1: Display Image on Unihiker

Padmalaya Rawal Nov 06.2023

0 2657 Medium

Before displaying an image, we should know how to get started with the board. Although there are multiple methods which are available in the official documentation but the one which I personally love and will be using in this and upcoming tutorials is using the Jupyter Notebook and that's because it requires very less setup time.

Buy UNIHIKER here: https://www.dfrobot.com/product-2691.html?tracking=tVcXfXiPS5XY5uKq2JfouThkn6LxiRq93hXoX9E57SO6BQfo2HTZwSz9TkHcvygZ

STEP 1

Connect Unihiker to your PC / Laptop using the provided cable

STEP 2

Enable Jupyter Notebook

To enable Jupyter notebook. Open any browser (Except IE) and enter the website address http://10.1.2.3 to access the local web page menu on the UNIHIKER.

Note: It should not be https://10.1.2.3 (it should be http not https)

Hit enter, and the below page will pop up

Click on Service toggle. 2 option in the left menu bar, indicated below

When you click on Service toggle, the below page will pop up

Click on start button as indicated in the image below

After you hit start button, the disabled indication will change to enabling as shown below

Once the enabling process gets completed, the enabling indication will change to enabled as shown below

Now our jupyter notebook is enabled, hit open page button, a new window as shown in image below

STEP 3

Create a new Jupyter notebook

Click on new button and select python 3(ipykernel) as shown in image below

A new window will pop up where will write our code as shown below

STEP 4

Coding time

CODE

#Code to show an image on the screen

#  -*- coding: UTF-8 -*-
from unihiker import GUI  # Import the package
import time
gui = GUI()               # Instantiate the GUI class

# Load and display an image at (120, 150) with a width of 320 and height of 200
# The image is centered and a lambda function is assigned to the onclick event
img_image = gui.draw_image(x=120, y=150, w=320, h=200, image='name of image with extension', origin='center', onclick=lambda: print("image clicked"))

while True:
    # Add a sleep to prevent the program from exiting and getting stuck
    time.sleep(1)

Copy and paste the above code as shown in image below

STEP 5

Change the name of Jupyter note book

This step is completely option and can be done at any stage and to demonstrate that it can be done at any step I am doing the same after writing the code.

Click on the Untitled 1, which is the default name

A new window will pop up where you will change the name and hit Rename button as shown in image below

I changed the name to "Display image", you can name it anything what you want

STEP 6

Upload your image

Now let's upload an image which you wanted to show, for that you have to go back to home page which you can do so by clicking on the Jupyter notebook icon on the top left. The below is what should appear after you click on Jupyter notebook icon.

Click on upload button as shown below

A new window will pop up from where you have to select an image which you wanted to display as shown below. Select that image and hit open button.