Tutorial 1: Display Image on Unihiker
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.
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
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
#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
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
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.
Once you have selected your image, hit the upload button in front of image name as shown below
Now the image should appear on the home directory as shown below
After you have selected your desired image, click on upload button in front of image name as shown below to upload the image to UNIHIKER board.
Copy the name of the image and edit the name in the code as shown below
Click on run button in the top bar as shown below
Now, the image must be displayed on the UNIHIKER, here is an image of my UNIHIKER board.