manualshive.com logo in svg

SunFounder TS7-Pro, Manual, Page: 139 / 235

Share
Download
SunFounder TS7-Pro Manual Download Page 139

TS7-Pro 7-inch Touch Screen

Y can show and disappear.

Click on the Glow-Y sprite and let us write a piece of code for the Glow-Y sprite. When the

Y

on the stage is clicked,

it will repeatedly disappear and appear.

Challenge

I believe that you will be smart enough to program and implement this game soon. Next, we will add some challenges
to enrich our game content.

• Add two new sprites, one of which will blink and change color when clicked; the other will zoom and rotate

when clicked.

5.7. Scratch Projects

135

Summary of Contents for TS7-Pro

Page 1: ...TS7 Pro 7 inch Touch Screen www sunfounder com Jun 30 2022 ...

Page 2: ......

Page 3: ...50 4 6 Using as Extension Screen for PC 54 5 PROJECTS AND ACTIVITIES 57 5 1 Multimedia Options 57 5 2 Retro Games Console 60 5 3 3D Printer Monitor 67 5 4 Home Assistant 77 5 5 Cloud4RPi 103 5 6 GPIO Programming 126 5 7 Scratch Projects 127 5 8 Install Other Systems on Raspberry Pi 218 6 APPENDIX 219 6 1 Obtain the IP Address of the Raspberry Pi 219 6 2 Use the SSH Remote Control 220 7 FAQ 225 7 1...

Page 4: ...8 Copyright Notice 231 ii ...

Page 5: ...ive mounting position compatible with 2 5 inch mechanical hard disk and solid state drive If you use SSD instead of Micro SD card it can increase the capacity of Raspberry Pi as well as improve the operation speed The 40pin interface is also reserved so you can connect 40pin cable or connect sensors directly to ensure the scalability of Raspberry Pi If you encounter problems in using the process o...

Page 6: ...TS7 Pro 7 inch Touch Screen 2 CONTENTS ...

Page 7: ... play Refresh rate 60Hz External Dimensions 165 114 40mm Excluding the height of the metal support 55mm Visual Area 154 21 H 85 92 V Panel Type IPS 45 color gamut HD full view screen Response Time 5ms Contrast Ratio 800 1 Visual Angle 170 Display Color 262K Brightness 300cd m2 Input Signal HDMI HDMI Input Adjustable resolution ranging 640 480 1920 1200 Speaker 8 2W Interfaces Introduction 3 ...

Page 8: ...tion 40 Pin Female Header You can plug in your Raspberry Pi here 40 Pin Male Header This is the 40 pin header from the Raspberry Pi you can use it to do some projects or use a 40pin ribbon cable expand it to the breadboard Buttons These 5 buttons can be used to turn on off the screen adjust the volume and brightness they are used in combination see the table below for details The first row refers ...

Page 9: ...nter Sleep state Menu Open the Menu Confirm Increase Volume Increase Vol ume Increase Bright ness Decrease Volume Decrease Volume Decrease Bright ness Back Open the Brightness ad just back back back Acrylic Case Red box Holes used to hang the wall Purple box Holes used to install Pipower Yellow box Holes used to mount camera Green box Holes for mounting SSD 5 ...

Page 10: ...TS7 Pro 7 inch Touch Screen 6 Chapter 1 HARDWARE INTRODUCTION ...

Page 11: ... whether there are missing or damaged components according to the list first If there are any problems please contact us and we will solve them as soon as possible Please follow the steps on the PDF to assemble Component List and Assembly Instructions 7 ...

Page 12: ...TS7 Pro 7 inch Touch Screen 8 Chapter 2 ASSEMBLY INSTRUCTIONS ...

Page 13: ...s an operating system installed Raspberry Pi Imager is a quick and easy way to install the Raspberry Pi operating system to a Micro SD card from a computer or laptop Browse to the Raspberry Pi Imager site and download the version that matches the computer or laptop s operating system www raspberrypi org software When the download is complete launch the installer program and follow the prompts to i...

Page 14: ...o not work so it is recommended to continue using the Debian Buster version In the Raspberry Pi Imager click CHOOSE OS Raspberry Pi OS other Scroll down to the end of the newly opened page and you will see Raspberry Pi OS Legacy and Raspberry Pi OS Lite Legacy these are security updates for Debian Buster the difference between them is with or without the desktop It is recommended to install Raspbe...

Page 15: ...TS7 Pro 7 inch Touch Screen Select the SD card you are using Click the WRITE button 3 1 Install the Raspberry Pi OS 11 ...

Page 16: ...te any files already on the SD card If the SD card has any files back up these files before clicking Yes After the Imager completes installing the Operating System on the SD card click Continue to complete the installation 12 Chapter 3 QUICK USER GUIDE ...

Page 17: ...ce Raspberry Pi uses the standard rate when 1024x600 is not included you need to set the aspect ratio close to 16 9 and add the following lines below hdmi_force_hotplug 1 hdmi_cvt 1024 600 60 3 0 0 0 hdmi_cvt width height framerate aspect margins interlace value Default Description width required width in pixels height required height in pixels framerate required framerate in Hz aspect 3 aspect ra...

Page 18: ...selects the Normal HDMI mode After the modification is done save and exit For more details about configuring config txt refer to Raspberry Pi official website https www raspberrypi org documentation configuration config txt md Step 3 Reboot Raspberry Pi Reboot the Raspberry pi with the command sudo reboot sudo reboot For Raspberry Pi 4 1 Click the Raspberry Pi icon Preferences Screen Configuration...

Page 19: ...TS7 Pro 7 inch Touch Screen 2 Then choose Configure Screens HDMI 1 Resolution choose the resolution that you want 3 2 Adjust the Resolution 15 ...

Page 20: ...TS7 Pro 7 inch Touch Screen 3 After that you need to click the tick icon to save your configure 16 Chapter 3 QUICK USER GUIDE ...

Page 21: ...mand sudo apt install onboard sudo apt install at spi2 core In order to make the virtual keyboard have a better effect you need to do further settings Click the Raspberry Pi icon in the upper left corner and select Preferences Onboard Settings In the General option check the following 2 items When you check Automatically display when editing text you will be prompted to reboot you can reboot after...

Page 22: ...TS7 Pro 7 inch Touch Screen In the Window option check Dock to screen edge And in Auto show option check Auto show when editing text again 18 Chapter 3 QUICK USER GUIDE ...

Page 23: ...ext 2 items are optional the ones checked in the picture are recommended by us you can also check other ones In Layout option Small is recommanded In Theme option DarkRoom is recommanded 3 3 Install Virtual Keyboard on Raspberry Pi 19 ...

Page 24: ... 7 inch Touch Screen After the setting is complete restart Raspberry pi Every time you restart Raspberry pi you need to click General Access Onboard to enable the virtual keyboard 20 Chapter 3 QUICK USER GUIDE ...

Page 25: ...TS7 Pro 7 inch Touch Screen Now you can use this keyboard to edit your files or codes 3 3 Install Virtual Keyboard on Raspberry Pi 21 ...

Page 26: ... Enter the following command to install it For 32 bit OS wget https github com JoseExposito touchegg releases download 2 0 14 touchegg_2 0 14_armhf deb sudo apt install touchegg_2 0 14_armhf deb For 64 bit OS wget https github com JoseExposito touchegg releases download 2 0 14 touchegg_2 0 14_arm64 deb sudo apt install touchegg_2 0 14_arm64 deb After restarting you can double tap the screen to bri...

Page 27: ...y or touch angle is not correct or you need to rotate to other angles during use you can follow the tutorial below to achieve them 3 5 1 Rotate the Display Angle There are two ways to rotate the display angle one way is from the Raspberry Pi desktop and the other way is using the command line 1 Set from the Raspberry Pi Desktop Click the Raspberry Pi icon Preferences Screen Configuration 3 5 Rotat...

Page 28: ...TS7 Pro 7 inch Touch Screen Then click Configure Screens HDMI 1 Orientation then select the angle you want to rotate 24 Chapter 3 QUICK USER GUIDE ...

Page 29: ...een Click the green checkbox to take effect Note After checking the box you need to confirm the changes by clicking OK within 10 seconds otherwise it will go back to the previous angle 3 5 Rotate the Display and Touch Angle 25 ...

Page 30: ...DE pi autostart Add the following line to the end xrandr output HDMI 1 rotate right right represents the direction of rotation and there are 4 directions to choose from normal right left and inverted After restarting the Raspberry Pi you will see the effect of rotation sudo reboot 3 5 2 Rotate Touch Angle Run the following command to open the 40 libinput conf file sudo nano usr share X11 xorg conf...

Page 31: ...x 1 0 1 0 1 1 0 0 1 270 degrees Option CalibrationMatrix 0 1 1 1 0 0 0 0 1 Note For some Raspberry Pis you may set the rotation angle of touch to 90 but eventually you find that it is not 90 and you need to manually alternate these 4 sets of values After restarting the Raspberry Pi you will see the effect of rotation sudo reboot 3 5 Rotate the Display and Touch Angle 27 ...

Page 32: ...TS7 Pro 7 inch Touch Screen 28 Chapter 3 QUICK USER GUIDE ...

Page 33: ...d drive mounting position compatible with 2 5 inch mechanical hard drive and solid state drive If you use SSD instead of Micro SD card it can increase the capacity of Raspberry Pi as well as improve the operation speed The 40pin interface is also reserved so you can connect 40pin cable or connect sensors directly to ensure the scalability of Raspberry Pi 4 1 Powered by PiPower Required Components ...

Page 34: ...wer If you buy our PiPower you can use it to power the TS7 Pro screen directly so you can easily get it for outdoor use The specific installation tutorial is as follows 1 Remove the Protective Cover Plate 30 Chapter 4 ADDING PERIPHERAL DEVICES ...

Page 35: ...TS7 Pro 7 inch Touch Screen 2 Secure the PiPower to the Protective Cover Plate Note that the M2 5x6mm screws in the PiPower are required here 4 1 Powered by PiPower 31 ...

Page 36: ...TS7 Pro 7 inch Touch Screen 3 Put the Protective Cover Plate back on 32 Chapter 4 ADDING PERIPHERAL DEVICES ...

Page 37: ...TS7 Pro 7 inch Touch Screen 4 Connect the PiPower to the Raspberry Pi with a USB cable 4 1 Powered by PiPower 33 ...

Page 38: ...TS7 Pro 7 inch Touch Screen 5 Turning the PiPower switch to ON will allow the Raspberry Pi to boot up 34 Chapter 4 ADDING PERIPHERAL DEVICES ...

Page 39: ...a Module Required Components TS7 Pro Screen Camera Module Self provided Raspberry Pi Self provided Hole size for mounting the Camera module Mount Camera Module Refer to the following tutorial to mount the camera module 4 2 Assemble and Use a Camera Module 35 ...

Page 40: ...TS7 Pro 7 inch Touch Screen 36 Chapter 4 ADDING PERIPHERAL DEVICES ...

Page 41: ...TS7 Pro 7 inch Touch Screen Enable the Camera Open Raspberry Pi Configuration In the Interfaces option Enable the Camera and then click OK 4 2 Assemble and Use a Camera Module 37 ...

Page 42: ...rt is complete use the following command line to check whether the camera is available If the camera screen appears it means that the camera is installed successfully Otherwise the FFC cable needs to be unplugged and plugged in again raspivid o vid h264 38 Chapter 4 ADDING PERIPHERAL DEVICES ...

Page 43: ...k Required Components TS 7 Pro Screen 2 5 Hard Disk Self provided Raspberry Pi 4 Self provided Hole size for mounting the hard disk Assemble the Hard Disk Follow the tutorial below to mount the Hard Disk on the TS7 Pro Screen 4 3 Mount the Hard Disk 39 ...

Page 44: ...ed for newbies it is easy to operate and less error prone But this method will make you lose the contents of your Micro SD card Using Commands For users with basic knowledge you can use this method if you don t want to lose the data of your Micro SD card Using Raspberry Pi Imager 1 Download Raspberry Pi Imager 2 Select a spare SD card the data will be erased then insert it into your computer using...

Page 45: ...TS7 Pro 7 inch Touch Screen 4 Scroll to the bottom of the page and select Misc utility images 5 Select Bootloader 4 3 Mount the Hard Disk 41 ...

Page 46: ...lect a boot mode SD card boot is recommended 7 Select SD card and then Write you will be prompted that all data on this Micro SD card will be erased so it is recommended to select a spare SD card 42 Chapter 4 ADDING PERIPHERAL DEVICES ...

Page 47: ...ch Screen 8 Once the following message appears you can unplug the card reader from the computer 9 The green activity LED will blink with a steady pattern and the screen will be green on success 4 3 Mount the Hard Disk 43 ...

Page 48: ... Power off the Raspberry Pi and remove the Micro SD card 11 Now to install the Raspberry Pi OS on your hard disk Connect your hard disk to your computer with the cable that came with the drive 44 Chapter 4 ADDING PERIPHERAL DEVICES ...

Page 49: ...rry Pi OS other Raspberry Pi OS Legacy Note Of course you can also choose the latest version of Raspberry Pi OS Debian Bullseye but Debian Bullseye version will cause some features to not work so it is recommended to continue using the Debian Buster version 4 3 Mount the Hard Disk 45 ...

Page 50: ...Touch Screen 13 After installation unplug your hard disk and plug it into the USB port of the Raspberry Pi Now power up the Raspberry Pi and you will see the Raspberry Pi desktop 46 Chapter 4 ADDING PERIPHERAL DEVICES ...

Page 51: ...ions Bootloader Version 4 Select Default for factory default settings or Latest for the latest stable bootloader release 5 After rebooting the Raspberry Pi use the following command to view the name of the storage device sudo fdisk l 6 Now clone the system from the Micro SD card Where if is followed by the sd card name and of is followed by the SSD hard drive name sudo dd if dev mmcblk0 of dev sda...

Page 52: ...black screen It may be that the Raspberry Pi is not reading the Micro SD card you need to follow the tutorial below to change the configuration of the Micro SD card now Reinsert the Micro SD card into the computer with a card reader Open the boot hard drive Double click on the cmdline txt file to open it Add sdhci debug_quirks2 4 at the beginning and then press spacebar After saving the changes re...

Page 53: ...o Breadboard This screen also retains the 40pin interface of the Raspberry Pi which can be used for projects You need to pay attention to the inserting direction of the 40pin cable to avoid burning the Raspberry Pi 4 4 Extend GPIO to Breadboard 49 ...

Page 54: ...TS7 Pro 7 inch Touch Screen 4 5 Hang on the Wall Hole size for wall hanging 50 Chapter 4 ADDING PERIPHERAL DEVICES ...

Page 55: ... Touch Screen 1 Flip the Raspberry Pi over and insert it into the expansion board of the touch screen 2 Plug in the HDMI Bridge and provide both Pi3 and Pi4 versions you can choose as you need 4 5 Hang on the Wall 51 ...

Page 56: ...TS7 Pro 7 inch Touch Screen 3 Insert the USB Bridge 52 Chapter 4 ADDING PERIPHERAL DEVICES ...

Page 57: ...s and M3 x 25 Standoff into the protective cover plate with the stanoffs on the back 5 Turn the protective cover plate over and fasten it to the wall with 4 M3xxx screws 6 Secure the TS7 Pro screen to the standoffs with 4 M3x6 screws 4 5 Hang on the Wall 53 ...

Page 58: ...screen as an extended Touch Screen for your PC then you need to connect this Touch Screen to your PC with a Micro USB cable and a HDMI cable Some computers do not have enough power supply and it is recommended to plug in extra power to the touch screen 54 Chapter 4 ADDING PERIPHERAL DEVICES ...

Page 59: ...TS7 Pro 7 inch Touch Screen 4 6 Using as Extension Screen for PC 55 ...

Page 60: ...TS7 Pro 7 inch Touch Screen 56 Chapter 4 ADDING PERIPHERAL DEVICES ...

Page 61: ...cts to choose from 5 1 Multimedia Options Watch videos read e books or play games on this screen 5 1 1 Watch Video The Raspberry Pi has a built in video player VLC Video Player Watch a local video directly by double clicking on the VLC Video Player icon or log in to the YouTube website from Google Chrome browser to watch videos 57 ...

Page 62: ...TS7 Pro 7 inch Touch Screen 5 1 2 Read E book Read online from the Google Chrome browser 58 Chapter 5 PROJECTS AND ACTIVITIES ...

Page 63: ...7 inch Touch Screen 5 1 3 Play Game Click Preferences Recommended Software Games to install games on this screen For example install Minecraft and plug in a keyboard and mouse to play 5 1 Multimedia Options 59 ...

Page 64: ...nch Touch Screen 5 2 Retro Games Console 5 2 1 Description You can turn this screen Raspberry Pi into a retro games console playing with your friends let s see how we can do it 60 Chapter 5 PROJECTS AND ACTIVITIES ...

Page 65: ...Raspberry Pi 4 as the main control board with Retro Pie as the Operating System That Raspberry Pi uploads or downloads the game system and game ROM needs taking up a large memory so it is recommended to use a large capacity SD card to avoid configuration failures When playing games a gamepad and a keyboard are needed 5 2 Retro Games Console 61 ...

Page 66: ...TS7 Pro 7 inch Touch Screen This screen is a 1280x800 LCD touch screen allowing for high resolution and sound quality to provide an excellent gaming experience 62 Chapter 5 PROJECTS AND ACTIVITIES ...

Page 67: ... to turn your Raspberry Pi ODroid C1 C2 or PC into a retro gaming machine It builds upon Raspbian OS Emulation Station RetroArch and many other projects to enable you to play your favorite Arcade home console and classic PC games with the minimum set up 5 2 Retro Games Console 63 ...

Page 68: ...TS7 Pro 7 inch Touch Screen Installing RetroPie Step 1 Download the SD image compatible with the Raspberry Pi 4 on the RetroPie official website 64 Chapter 5 PROJECTS AND ACTIVITIES ...

Page 69: ...Note Win32DiskImager requires an img file extracted from the img gz image downloaded in step 2 You can use a program like 7zip to do this For macOS use Raspberry Pi Imager Etcher Apple Pi Baker or the dd command For Linux use Raspberry Pi Imager Etcher or the dd command Note MacOS Linux users can optionally extract the img image from the downloaded img gz by using gunzip macOS users can also simpl...

Page 70: ... Screen it s another one of our products but the configuration method is the same on the RetroPie Note 1 You can also go to RetroPie official website to detailed tutorial RetroPie Docs 2 RetroPie allows you to turn your Raspberry Pi or PC into a retro gaming machine But because of the na ture complexity of copyright intellectual property law country specific RetroPie doesn t provide ROMs for games...

Page 71: ...to schedule prints and remotely control the printer Please refer to the detailed installation tutorial for OctoPrint https community octoprint org t setting up octoprint on a raspberry pi running raspbian or raspberry pi os 2337 This tutorial has written very detailed installation steps which may take a long time and requires more patience Note The Raspberry Pi Operating System will need to be ins...

Page 72: ...tostart file to be readable and writable chmod 644 config lxsession LXDE pi autostart nano config lxsession LXDE pi autostart Open the autostart file with a text editor such as Nano and add the following line to the end of the file to make the Raspberry Pi execute the startTouchUI sh script file on boot home pi startTouchUI sh After restarting the Raspberry Pi the OctoPrint s Touch UI will open in...

Page 73: ...r Cura please note that in the choose components step Open STL files with Cura has been checked by default so that stl files can be sliced If you want to slice other types of model files check the corresponding option otherwise you can install it directly 5 3 3D Printer Monitor 69 ...

Page 74: ...ouch Screen When opening Ultimaker Cura for the first time there will be a series of configuration prompts At the Add a Printer step select the model of printer used and click Next 70 Chapter 5 PROJECTS AND ACTIVITIES ...

Page 75: ...orrect printer model verify that the parameters provided by Ultimaker Cura in the Machine Settings page are correct or change the parameters directly Follow the onscreen prompts to complete the configuration of Ultimaker Cura 5 3 3D Printer Monitor 71 ...

Page 76: ...s successfully launched click the Folder icon in the upper left hand corner and browse to the folder with the stl 3D model file that needs to be sliced and click Open to add the stl file to Ultimaker Cura s library 72 Chapter 5 PROJECTS AND ACTIVITIES ...

Page 77: ... hand corner and Ultimaker Cura will automati cally perform the slicing operation After slicing is complete click the Save to Disk option in the lower right corner to save the sliced file locally Select the type of file extension recognized by the 3D printer then click Save 5 3 3D Printer Monitor 73 ...

Page 78: ...p to log in to OctoPrint Note Before logging in to the OctoPrint s web UI OctoPrint will first need to have been successfully installed on the Raspberry Pi The IP address 192 168 18 179 will need to be replaced with the local IP address of the Raspberry Pi Hover the cursor over the WiFi icon on the Raspberry Pi desktop and the local IP address will be displayed Now you have entered OctoPrint 74 Ch...

Page 79: ...TS7 Pro 7 inch Touch Screen Click the Upload option to select the sliced 3D model file 5 3 3D Printer Monitor 75 ...

Page 80: ...n The 3D printer will start to print the 3D model file after the slicing process is complete If you have transferred the sliced file to the Raspberry Pi you can also open the OctoPrint UI in Raspberry Pi to print 76 Chapter 5 PROJECTS AND ACTIVITIES ...

Page 81: ...art home devices of many brands and can easily implement voice control and automation of the devices You can run Home assistant on the Raspberry Pi without having to send your data out onto the internet This means that you have total control over your data limit the amount of internet traffic from your smart devices and tighten up security Expand Viewing Here are some projects made by others that ...

Page 82: ...d e TZ MY_TIME_ZONE v home pi homeassistant config network host ghcr io home assistant raspberrypi3 homeassistant stable If you are using Raspberry Pi 4 run the following commands to install the Home Assistant sudo docker run d name homeassistant privileged restart unless stopped e TZ MY_TIME_ZONE v home pi homeassistant config network host ghcr io home assistant raspberrypi4 homeassistant stable ...

Page 83: ...PHome is a tool which aims to make managing your ESP boards as simple as possible It reads in a YAML configuration file just like Home Assistant and creates custom firmware which it installs on your ESP device Devices or sensors added in ESPHome s configuration will automatically show up in Home Assistant s UI Installation 1 Installation dependencies sudo pip3 install cryptography 2 8 2 Install ES...

Page 84: ...oard through http localhost 6052 or http X X X X 6052 replace X X X X with your Raspberry Pi s IP address 2 Create configuration Click on the to start adding configurations Enter a name and the WiFi and password that you need to have your device connect to and then click NEXT 80 Chapter 5 PROJECTS AND ACTIVITIES ...

Page 85: ...TS7 Pro 7 inch Touch Screen Select the device type ESP32 for example 5 4 Home Assistant 81 ...

Page 86: ...ed you will see them in the Dashboard of ESPHome Note When it is not the first time to add a device click on the main page follow the prompts to enter the device name WIFI and password select the device type 82 Chapter 5 PROJECTS AND ACTIVITIES ...

Page 87: ...TS7 Pro 7 inch Touch Screen 3 Edit the yaml file Click EDIT in the bottom right corner to go inside the yaml file you will see the following default components 5 4 Home Assistant 83 ...

Page 88: ...ly only the ESPHome tool and Home Assistant use this native API ota With the OTA Over The Air update component you can upload your firmware binaries to your node without having to use a USB cable for uploads wifi This core ESPHome component sets up WiFi connections to access points for you It needs to be in your configuration or otherwise ESPHome will fail in the config validation stage captive_po...

Page 89: ...her components There are a lot of components in the ESPHome official website including Sensor Components Output Components Light Components etc Here we take Binary Light in Light Components as an example Add the following code to the end of the yaml file Example configuration entry light platform binary name Desk Lamp output light_output output id light_output platform gpio pin GPIO16 5 4 Home Ass...

Page 90: ... choose Wirelessly and USB Port But for the first installation you need to connect the ESP32 board to the Raspberry Pi using USB and then choose the second installation method At a later time you can install and compile via Wirelessly It takes about 10 minutes to download the dependencies during the first compilation so please be patient 86 Chapter 5 PROJECTS AND ACTIVITIES ...

Page 91: ...ill need to fill in this IP when you add ESPHome to Home Assistant Note If there is no response when clicking INSTALL please clear the browser cache and INSTALL again sudo rm rf cache chromium ESPHome configuration is complete and you can now add it to Home Assistant 5 4 3 Log In 1 Please set up a username and password for your Home Assistant 5 4 Home Assistant 87 ...

Page 92: ...TS7 Pro 7 inch Touch Screen 2 Create a name for your home and select your region 88 Chapter 5 PROJECTS AND ACTIVITIES ...

Page 93: ...TS7 Pro 7 inch Touch Screen 3 Select the content you want to share to Home Assistant 5 4 Home Assistant 89 ...

Page 94: ...Screen 4 You can choose to configure the device now or later It is recommended that beginners configure the device later as the configuration is described in detail later in the tutorial 90 Chapter 5 PROJECTS AND ACTIVITIES ...

Page 95: ...p enter your login username and password in the login screen Note If the login screen does not jump automatically please open Home Assistant again via http localhost 8123 After logging in successfully you will enter your Home 5 4 Home Assistant 91 ...

Page 96: ...make your DIY device with ESP32 and add it in In this section you will learn how to add your smart devices You need to make sure that your smart device has been assigned an IP You can complete this step through the corre sponding APP of the smart device For example the picture below shows a bedside lamp configured with HomeKit 92 Chapter 5 PROJECTS AND ACTIVITIES ...

Page 97: ...TS7 Pro 7 inch Touch Screen Now back to home assistant refer to Log In click Configuration in the left column select Intergrations 5 4 Home Assistant 93 ...

Page 98: ...l display the corresponding integration which can be eas ily added with just a few clicks If your smart device has not been discovered yet don t worry click the ADD INTEGRATION button at the bottom right and search for your integration in the list 94 Chapter 5 PROJECTS AND ACTIVITIES ...

Page 99: ...Screen Each integration may be different in use you can visit Home Assistant Integration for details Return to the Overview page If the device you just added does not appear you need to Edit Dashboard 5 4 Home Assistant 95 ...

Page 100: ...make your DIY device with ESP32 and add it in In this section you will learn how to add your DIY device Before you start the following operations you need to complete Install and configure ESPHome Add Integration 1 Now visit http ip 8123 to access your Home Assistant then click Configuration in the left column and select Intergrations 96 Chapter 5 PROJECTS AND ACTIVITIES ...

Page 101: ...evice on your network it will display the corresponding integration which can be easily added with just a few clicks If your smart device is not yet discovered don t worry you can add it via the ADD INTERGATION button at the bottom right 5 4 Home Assistant 97 ...

Page 102: ...e your esp light in the bedroom kitchen or other area of your choice 4 After clicking Finish you will see it in the list Edit Dashboard Now a CARD needs to be added to control this esp light Click Overview Edit Dashboard ADD CARD you can select the corresponding CARD according to your needs for example select Button here and then select the corresponding Entity 98 Chapter 5 PROJECTS AND ACTIVITIES...

Page 103: ...ouch Screen After clicking SAVE you will be able to use this Button to control the esp light if you connect an LED to GPIO16 in ESP32 board click on the Button to make the LED light up or turn off 5 4 Home Assistant 99 ...

Page 104: ...f boot interface first Please close the already open Home Assistant URL and run chromium browser start fullscreen http localhost 8123 If you want to automatically display the Home Assistant interface in full screen after booting then do the following 1 Go to the autostart folder cd home pi config autostart Note If the autostart folder does not exist you need to create a new one sudo mkdir p home p...

Page 105: ...mouse to the upper column of the screen and click the exit button that appears Method 3 Right click the pop up menu select Exit full screen Touch screen Long press the blank space to pop up the menu click the exit button at the top of the screen or select Exit full screen 5 4 Home Assistant 101 ...

Page 106: ...irectory structure is as follows storage directory contains a lot of user related information including user login information user name password encrypted in auth_provider homeassistant file configuration yaml User edited configuration files home assistant log Run log cleared with each reboot home assistant_v2 db Database storage Various elements of front end configuration 102 Chapter 5 PROJECTS ...

Page 107: ...sudo apt update sudo apt upgrade y Install update the required packages sudo apt install git python3 python3 pip y Install Cloud4RPi with the following command sudo pip3 install cloud4rpi Note This tutorial provides the installation method for Python 3 0 and above For lower versions of Python the commands may need to be modified Login to Cloud4RPi on Your Computer Open Chromium Web Browser and ent...

Page 108: ...ections and Control Panels to display the information received or sent from the Raspberry Pi on the webpage Connect Your Raspberry Pi to Cloud4RPi After logging in click the Devices option and then click New Device Give the new device a name and copy the current Device token to the clipboard 104 Chapter 5 PROJECTS AND ACTIVITIES ...

Page 109: ...cd cloud4rpi raspberrypi python sudo nano control py Find the following line of code DEVICE_TOKEN __YOUR_DEVICE_TOKEN__ Replace __YOUR_DEVICE_TOKEN__ with the Device token copied from the Cloud4RPi Press Ctrl X to complete the modification DEVICE_TOKEN 556UfPaRw6r6rDKYfzx5Nd1jd Run the sample file control py sudo python3 control py Browse back to the Cloud4RPi server page If your Raspberry Pi is c...

Page 110: ...the conponents or display sensor data After entering Control Panels click the New Control Panel button Note Always run the control py file before using the Control Panel Enter a Control Panel name and then click on the Add Widget button Before clicking the Add Widget button again you need to select the appropriate widget and the variable to be dis played 106 Chapter 5 PROJECTS AND ACTIVITIES ...

Page 111: ...TS7 Pro 7 inch Touch Screen For example we select the Text widget and then select Hot Water C so that we can see it on the newly created control panel 5 5 Cloud4RPi 107 ...

Page 112: ...for each one and you need to fill in the variable DEVICE_TOKEN with the correct device token in order to connect to the corresponding device DEVICE_TOKEN 556UfPaRw6r6rDKYfzx5Nd1jd variables is a 2 dimensional dictionary and the value corresponding to each of its keys is also a dictionary The keys of the variables dictionary are Room Temp LED On CPU Temp STATUS Location which are all data displayed...

Page 113: ...rns the humidity value in the corresponding bind key variables Room Temp type numeric if ds_sensors else string bind ds_sensors 0 if ds_sensors else sensor_not_connected LED On type bool value False bind led_control CPU Temp type numeric bind rpi cpu_temp STATUS type string bind listen_for_events Location type location bind get_location The vdiagnostics stores information about the Raspberry Pi an...

Page 114: ...n Cloud4RPi Experimental Procedures Build the circuit Open the code cd home pi cloud4rpi raspberrypi python sudo nano temperature_and_humidity_acquisition py Find the line below and fill in the correct device token DEVICE_TOKEN __YOUR_DEVICE_TOKEN__ Run the code sudo python3 temperature_and_humidity_acquisition py Go to Cloud4RPi add a new Control Panel named project1 and click Add Widget 110 Chap...

Page 115: ...TS7 Pro 7 inch Touch Screen Select a Chart widget with both Room Temp and CPU Temp as the variables to be displayed 5 5 Cloud4RPi 111 ...

Page 116: ...h Screen Once added you will see the temperature Room Temp and humidity CPU Temp curves over time and you can adjust the display window by clicking on the options at the bottom right 112 Chapter 5 PROJECTS AND ACTIVITIES ...

Page 117: ...erature result 1 is obtained by this function and the function will not be interrupted until the reading is successful def getHum result dht11 get_result while True if result break else result dht11 get_result return result 0 The humidity result 0 is obtained by this function and the function will not be interrupted until the reading is successful variables Room Temp continues on next page 5 5 Clo...

Page 118: ...cognized by the web page Remote Switch In this project we will learn to use Cloud4RPi s Switch to control the relay thereby controlling the relay s load LED You can also change the load of the relay to household appliances but with safety in mind Experimental Procedures Build the circuit Open the code cd home pi cloud4rpi raspberrypi python sudo nano remote_switch py Find the line below and fill i...

Page 119: ...7 Pro 7 inch Touch Screen Go to Cloud4RPi add a new Control Panel named project2 and click Add Widget to add a Switch widget Once added you can use the Switch widget to control the relay 5 5 Cloud4RPi 115 ...

Page 120: ...vel of the relay Note Since the relay works at high level the relay closes when the switch state is True and opens when the switch state is False variables LED On type bool value False bind relay_control By setting the value of the value key we can set the initial value of the Switch widget then always read the value of the value key and send the current level of RELAY_PIN the value returned by th...

Page 121: ...ud4rpi raspberrypi python sudo nano smart_light py Find the line below and fill in the correct device token DEVICE_TOKEN __YOUR_DEVICE_TOKEN__ Run the code sudo python3 smart_light py Go to Cloud4RPi add a new Control Panel named project3 and click Add Widget to add a Slider widget 5 5 Cloud4RPi 117 ...

Page 122: ...TS7 Pro 7 inch Touch Screen Once added you can use the Slider widget to control the brightness of the LED 118 Chapter 5 PROJECTS AND ACTIVITIES ...

Page 123: ...tial value of the Slider widget then always read the value of the value key and send the current level of LED_PIN the value returned by the function led_control to Cloud4RPi Smart Curtain In this project we will simulate a scenario where the curtains are automatically opened or closed according to the brightness of the room When the photoresistor detects that the room brightness is too bright Rasp...

Page 124: ...udo nano smart_curtain py Find the line below and fill in the correct device token DEVICE_TOKEN __YOUR_DEVICE_TOKEN__ Run the code sudo python3 smart_curtain py Go to Cloud4RPi add a new control panel named project4 and add 3 widgets Switch Text and Chart widgets via the Add Widget button 120 Chapter 5 PROJECTS AND ACTIVITIES ...

Page 125: ... You can see the change over time in the Chart widget Code Explanation def getValue analogVal ADC0834 getResult if analogVal 100 move clockwise sleep 5 move stop elif analogVal 20 move contrarotate sleep 5 move stop return analogVal Read the value of channel CH0 with photoresistor connected of the ADC0834 If the value is 100 the motor rotates clockwise for 5 seconds If the value is less than 20 th...

Page 126: ...ttendance system In this project we use MFRC522 RFID Module and Cloud4RPi to make a system you can view the attendance information on Cloud4RPi or open the local csv file to view the attendance records Due to the delay of network data transmission the project only allows you to punch in when the green LED is on and upload data when the red LED is on Experimental Procedures Build the circuit 122 Ch...

Page 127: ... to Cloud4RPi add a new control panel named project5 and add 2 widgets text and chart widgets via the Add widget button Once added you can view the clock in records for different time periods on the Chart widget when the value of LED ON is True it means someone clocked in and then view the number of people who clocked in on the Text widget Also you can find the csv file with the date under the pat...

Page 128: ...the ID of different MFRC522 RFID modules and on the right is the time of punching in Note If the person s name is written to the MFRC522 RFID Module in advance and then the id is replaced with text in the code which will be mentioned later in the code explanation so that the attendance sheet records the name of each person rather than the ID of the card 124 Chapter 5 PROJECTS AND ACTIVITIES ...

Page 129: ...d text reader read print ID s nText s id text GPIO output RedPin GPIO LOW GPIO output GreenPin GPIO HIGH First we set attendance to False which means that no one is clocked in Then set GreenPin to low level to light it and RedPin to high level to keep it off indicating that the current attendance system is working normally When someone punches in the id and text information of the card will be pri...

Page 130: ...tions for extending the 40 pins of the Raspberry Pi to a breadboard SunFounder has a very complete course system about Raspberry Pi GPIO learning kits such as the following two learning kits Electronic Kit for Raspberry Pi and Arduino This basic learning kit is suitable for the Raspberry Pi and Arduino novice This kit teaches basic circuit design and introduces Python programming for beginners Da ...

Page 131: ...6 Germany https www amazon ca dp product B07KH2C215 5 7 Scratch Projects In this chapter you will learn to use Scratch on this screen which includes 10 examples If you are a user who has just used Scratch we recommend that you try the teaching examples in order so that you can quickly get started with Scratch If the Raspberry Pi system you downloaded comes with recommended software you can find Sc...

Page 132: ...he letters in the name they will become active Click the green flag to start Or click Animate A Name and then learn online tutorial on the Scratch official website Required Components A Screen Scratch 3 either online or offline You Will Learn Choose the sprite you want Program different sprites separately Make the sprite change color Let the sprite spin Let the sprite zoom Let the sprite flash Les...

Page 133: ...TS7 Pro 7 inch Touch Screen First delete the original sprite we don t need it Then choose a sprite 5 7 Scratch Projects 129 ...

Page 134: ...TS7 Pro 7 inch Touch Screen Find the Letter sprite Repeat several times to spell out your name like me Abby 130 Chapter 5 PROJECTS AND ACTIVITIES ...

Page 135: ...TS7 Pro 7 inch Touch Screen 5 7 Scratch Projects 131 ...

Page 136: ...et s write a bit of code for it When A is clicked it changes its color Click on the sprite find when this sprite cliked in Events and drag it to the right coding area Drag change color effect by from Looks to the bottom of when this sprite cliked 132 Chapter 5 PROJECTS AND ACTIVITIES ...

Page 137: ...e click on the letter A on the stage and it will change its color B can rotate 360 Click on the Glow B sprite let s write a code for the Glow B wizard When the letter B on the stage is clicked it will rotate in a circle 5 7 Scratch Projects 133 ...

Page 138: ...rees 24 times Because 24 15 360 it turns 360 degrees B2 can zoom in and out Click on the Glow B2 sprite and let us write a code for the Glow B2 sprite When the second B on the stage is clicked it will zoom in and then zoom out 134 Chapter 5 PROJECTS AND ACTIVITIES ...

Page 139: ...he stage is clicked it will repeatedly disappear and appear Challenge I believe that you will be smart enough to program and implement this game soon Next we will add some challenges to enrich our game content Add two new sprites one of which will blink and change color when clicked the other will zoom and rotate when clicked 5 7 Scratch Projects 135 ...

Page 140: ...ag to start Or click Create a Story and then learn online tutorial on the Scratch official website Required Components A Screen Scratch 3 either online or offline You Will Learn Choose the sprite you want Let the sprites move around Let the sprites talk to each other Switch scenes Lesson Guide This is a happy Monkey named Harley In the lower right corner of the Scratch there are two areas the char...

Page 141: ...en First the current sprite and then click the Choose a Sprite button to add the sprite Here we need to find Monkey click on it You can use the search box above to find it Here we give it a name Harley 5 7 Scratch Projects 137 ...

Page 142: ...erry where is the banana Click on your Harley sprite and then click on the Event category Drag when clicked to the coding area on the right Click on the Looks category and drag say Hello for 2 second to the bottom of when clicked 138 Chapter 5 PROJECTS AND ACTIVITIES ...

Page 143: ... 7 inch Touch Screen Change what it says and how long it says in the input box Perry had seen bananas in the park so he told Harley Perry is a Frog add Frog sprite and Forest backdrop 5 7 Scratch Projects 139 ...

Page 144: ...TS7 Pro 7 inch Touch Screen Click on the Frog sprite add a 3 second delay block wait for Harley to finish speaking and then it speaks 140 Chapter 5 PROJECTS AND ACTIVITIES ...

Page 145: ...t Harley went to the park and found bananas on the table Now click on the Backdrop and let it switch after 6 seconds after the conversation ends Now by clicking on the green flag we can see that the Perry and Harley come to the park together after the conversation 5 7 Scratch Projects 141 ...

Page 146: ...park alone and there should be bananas on the table So we have to make Perry disappear Click on the Frog sprite add an event when backdrop switches to and find hide and show in Looks Let the Perry appear at the right time 142 Chapter 5 PROJECTS AND ACTIVITIES ...

Page 147: ...TS7 Pro 7 inch Touch Screen Add the Banana sprite and adjust the angle 5 7 Scratch Projects 143 ...

Page 148: ...TS7 Pro 7 inch Touch Screen Also let it appear at the right time 144 Chapter 5 PROJECTS AND ACTIVITIES ...

Page 149: ...3 Make Music Description Everyone has been to the concert hall It is filled with a dazzling array of musical instruments These musical instruments make wonderful sounds under the performance of musicians Today we will also be a musician and add some musical instruments on the stage of Scratch When you click on different instruments they will emit corresponding instrument sounds Click the green fla...

Page 150: ...rite Let the sprites do some actions Lesson Guide We Need the Drums Click on the Add Extension icon at the bottom left of Scratch select Music and then you will find a new extension Music on the left side of Scratch Delete the original sprite add Drum highhat sprite and Drum snare sprite Adjust the Drum highhat sprite and Drum snare sprite to the appropriate size 146 Chapter 5 PROJECTS AND ACTIVIT...

Page 151: ...TS7 Pro 7 inch Touch Screen 5 7 Scratch Projects 147 ...

Page 152: ...rum highhat sprite and drag out the play drum block in the Music expansion module Change the option to 5 Open Hi Hat then use the next costume block to switch the appearance of Drum highhat Now you can play the Drum highhat 148 Chapter 5 PROJECTS AND ACTIVITIES ...

Page 153: ...k on the Drum snare sprite and drag out the play drum block in the Music expansion module Change the option to 1 Snare Drum then use the next costume block to switch the appearance of Drum snare Now you can play theDrum snare 5 7 Scratch Projects 149 ...

Page 154: ...200 3 Side Stick Drum Kit 150 2 Bass Drum Drum cymbal 200 4 Crash Cymbal 5 7 4 Clicker Game Description Today we will play a game of poking balloons Click the green flag to start Or click Clicker Game and then learn online tutorial on the Scratch official website Required Components A Screen Scratch 3 either online or offline You Will Learn Pick random number Change the position size and color of ...

Page 155: ...TS7 Pro 7 inch Touch Screen Set the balloon to a random position 5 7 Scratch Projects 151 ...

Page 156: ...TS7 Pro 7 inch Touch Screen Let it change the color and size randomly 152 Chapter 5 PROJECTS AND ACTIVITIES ...

Page 157: ...the stage area Click on the balloon to add score Now we need to establish a scoring mechanism Whenever the balloon is clicked the score will increase by one Create a variable it can help us keep track of and store the score In Variables select Make a Variable and named score 5 7 Scratch Projects 153 ...

Page 158: ...n We will see it in the upper left corner of the stage When the balloon is clicked the score is increased by one When you click the green flag the game starts the score will be reset to zero 154 Chapter 5 PROJECTS AND ACTIVITIES ...

Page 159: ...u click on it you will lose score 5 7 5 Shooting Game Description Have you seen those shooting games on TV The closer a contestant shoots a bullet on the target to the bullseye the higher his score Today we are also doing a shooting game in Scratch In the game let the Crosshair shoot as far as possible to the bullseye to get a higher score Click on the green flag to start Use the space bar to shoo...

Page 160: ...er Lesson Guide Arrange the Crosshair and targets First delete the previous sprite upload the Crosshair sprite and the target background you can find them under the path ts7 pro scratch materials You have downloaded from github ts7 pro before Click the icon below the sprite list select Upload Sprite Option find the Cross Hair svg file and upload it Similarly upload the backdrop Target jpg 156 Chap...

Page 161: ...TS7 Pro 7 inch Touch Screen 5 7 Scratch Projects 157 ...

Page 162: ...TS7 Pro 7 inch Touch Screen 158 Chapter 5 PROJECTS AND ACTIVITIES ...

Page 163: ...ouch Screen Let s take aim When aiming the Crosshair will slightly shake we are now going to use the glide block to achieve this effect Set the random position and size of the Crosshair sprite 5 7 Scratch Projects 159 ...

Page 164: ...stable Or is it more swaying Let s shoot We are now going to express the effect of shooting bullets how is it Stop the crosshair moving and then let it shrink quickly to create a shooting effect This means that when the space bar is pressed we need to stop shaking the code of the Crosshair and keep the size of the Crosshair sprite shrinking 160 Chapter 5 PROJECTS AND ACTIVITIES ...

Page 165: ...mechanism Shooting different color circles will get different scores The closer to the bullseye the higher the score For example a shot in the red area can score 200 points Let s use the Touching Color block to judge This block has a color picker and we use it to pick up the red color on the target 5 7 Scratch Projects 161 ...

Page 166: ...TS7 Pro 7 inch Touch Screen Use the same method to set corresponding scores for different color circles 162 Chapter 5 PROJECTS AND ACTIVITIES ...

Page 167: ...TS7 Pro 7 inch Touch Screen 5 7 Scratch Projects 163 ...

Page 168: ...use the scratch stage to simulate an underwater world and then add the Star sprite and fish sprite to make a hit the magic fish mini game Click on the green flag to Start Press the space bar to launch the Starfish Or click Hit the magic fish and then learn online tutorial on the Scratch official website Required Components A Screen Scratch 3 either online or offline You Will Learn Let the sprite b...

Page 169: ...at the coordinates 240 120 and then let it swim left and right Use the if on edge bounce block to make the Fish sprite fold back from the edge When it hits the wall it will fold back in the opposite direction to the original 5 7 Scratch Projects 165 ...

Page 170: ...ar is rising Let the Star appear at 0 120 If we press the or key on the keyboard it will go left and right We use the key pressedblock to determine the keyboard and use change x by to move the sprite 166 Chapter 5 PROJECTS AND ACTIVITIES ...

Page 171: ...TS7 Pro 7 inch Touch Screen Next launch the Star If the space bar is pressed the y coordinate value of the Star sprite will increase and the Star sprite will rise 5 7 Scratch Projects 167 ...

Page 172: ...TS7 Pro 7 inch Touch Screen Something is wrong The Star sprite should continue to rise until it reaches the height of the Fish sprite remember 168 Chapter 5 PROJECTS AND ACTIVITIES ...

Page 173: ...lock to determine whether it hits the Fish When the Star sprite hits the Fish sprite we need to tell the Fish sprite about this and let it do the corresponding behavior change its shape We set up a Hit broadcast This broadcast will tell the entire program that something called Hit has happened All sprite and even the backdrop can hear this broadcast and respond accordingly 5 7 Scratch Projects 169...

Page 174: ... inch Touch Screen Back to the programming interface of the Fish sprite use a when I receive block to receive the Hit broadcast and then use Next costumeto change your form 170 Chapter 5 PROJECTS AND ACTIVITIES ...

Page 175: ... increase by 1 Note This does not involve the calculation of sprites and backdrops We tend to put such codes in backdrops Countdown Add a time mechanism When the green flag is clicked the timer is set to 30s and then decreases by 1 every second until the event is reset to zero to end the game But if you hear the Hit broadcast let the timer increase by one to increase the game time 5 7 Scratch Proj...

Page 176: ...ion Do you understand binary numbers binary is a number system widely used in computing technology so understand ing binary numbers is an important step for understanding the computer world Click on the green flag to start A random number will appear in the middle of the screen and you need to know the corresponding binary number For example 5 the corresponding Binary number should be 0101 press t...

Page 177: ...rrange a small binary abacus at the bottom of the screen First we delete the previous sprite Upload the Zero png file and Enter png file in the sprite list you have downloaded them from github ts7 pro before Then we upload the One png file in the Costumes option of the Zero sprite so that the Zero sprite has Zero costume and One costume Then we copy the Zero sprite with the right mouse button and ...

Page 178: ... and num4 respectively and initialize the positions of the four sprites The program in the figure below is the program of the Zero sprite The other three Zero sprites modify the variable names and increase the X coordinate by 80 to make the effect arranged in order from left to right 174 Chapter 5 PROJECTS AND ACTIVITIES ...

Page 179: ...TS7 Pro 7 inch Touch Screen When we click the sign in front of the variable the variable will disappear from the stage 5 7 Scratch Projects 175 ...

Page 180: ...TS7 Pro 7 inch Touch Screen 176 Chapter 5 PROJECTS AND ACTIVITIES ...

Page 181: ...me every time the Zero sprite switches costume Copy the program for the remaining three Zero sprites and modify the variable names Conversion of binary numbers and decimal numbers Before programming the Enter sprite let s first understand the Binary number A binary number is a number expressed in the base 2 numeral system or binary numeral system which uses only two symbols typically 0 zero and 1 ...

Page 182: ... the decimal number of 1010 1 2 3 0 2 2 1 2 1 0 2 0 10 Programming the Backdrop When the game starts a random integer between 1 16 appears in the middle of our screen as a decimal number that needs to be converted by binary and it is stored in the variable random Whether we receive a right result or a wrong result we have to regenerate the random number and proceed to the next round of the game 17...

Page 183: ...iable when the Enter sprite is clicked We convert the binary number composed of the num1 variable num2 variable num3 variable and num4 variable into a decimal number and save the result in the result variable Then use the result variable to compare the value of the random variable If they are equal we broadcast a right message otherwise we broadcast a wrong message 5 7 Scratch Projects 179 ...

Page 184: ...d a Zero sprite to convert random integers between 1 32 When you click on the Zero sprite a Pop sound effect will be emitted 1 point will be deducted for incorrect answers 5 7 8 Flappy Parrot Description Today we made the parrot Devin avoid the trees for food Click on the green flag to start Or click Flappy Parrot and then learn online tutorial on the Scratch official website Required Components A...

Page 185: ...ange the parrot and background image First we delete the default sprites and add Parrot sprites and Blue Sky backdrop Change the size of the Parrot sprite to 20 Upload the Trees sprite select the Upload Sprite option find the Trees png file and upload it Click Costumes and then click the Upload Costume option to upload Trees2 png Trees3 png Trees4 png and Trees5 png 5 7 Scratch Projects 181 ...

Page 186: ...TS7 Pro 7 inch Touch Screen Copy out the second Trees 182 Chapter 5 PROJECTS AND ACTIVITIES ...

Page 187: ...TS7 Pro 7 inch Touch Screen 5 7 Scratch Projects 183 ...

Page 188: ...ng on the stage Set the initial position and movement of the Trees sprite so that it can reach the far left from the far right of the stage Then randomly changing costumes reappear on the far right side of the stage The code of the Trees2 sprite is almost the same as the Trees sprite the only difference is that it hides for 1 5 seconds at the beginning 184 Chapter 5 PROJECTS AND ACTIVITIES ...

Page 189: ...TS7 Pro 7 inch Touch Screen Now click on the green flag to see the effect of this flight Very good the Parrot sprite seems to be flying to the right side of the stage 5 7 Scratch Projects 185 ...

Page 190: ...button control Parrot to fly When the game starts Parrot will continue to drop down that is the y coordinate will continue to decrease When we press the space button the y coordinate of Parrot will increase 186 Chapter 5 PROJECTS AND ACTIVITIES ...

Page 191: ...TS7 Pro 7 inch Touch Screen Constantly increase the speed of Parrot falling through variables Parrot drop is a bit slow we add flight variables to make Parrot drop more and more 5 7 Scratch Projects 187 ...

Page 192: ...TS7 Pro 7 inch Touch Screen Change the costume so that Parrot has flight animation When we press the Space button Parrot s clothing switches to Parrot b 188 Chapter 5 PROJECTS AND ACTIVITIES ...

Page 193: ...TS7 Pro 7 inch Touch Screen 5 7 Scratch Projects 189 ...

Page 194: ...to the right side of the Parrot sprite it means that Parrot has crossed the Trees and Trees2 At this time we will add score 1 In order to avoid always adding points we need to add it after score 1 Wait 1 second for the code This code is required in both Trees and Trees2 sprites 190 Chapter 5 PROJECTS AND ACTIVITIES ...

Page 195: ... enrich our game content When the game fails it switches to a cursing background screen Add a countdown screen to the game start screen let us prepare for the game 5 7 9 Paint Box Description Have you ever had a Paint Box You can use the colorful brushes in the Paint Box to paint a colorful world Today we are also making an exclusive Paint Box on scratch Let s take action Click on the green flag t...

Page 196: ...tion of the cursor Use the slider to modify the value of the variable Lesson Guide Lay out the drawing board add Pen expansion function First we delete the previous sprite and then add the Pencil sprite and Block X sprite to Scratch Upload Eraser svg Red png Blue png Green png Yellow png and other files in the Sprite list You have down loaded from github ts7 pro before and finally set the size of ...

Page 197: ...TS7 Pro 7 inch Touch Screen Then we add the Pen extension function 5 7 Scratch Projects 193 ...

Page 198: ...l sprite First we need to make the Pencil sprite move with the mouse If the mouse button is pressed we call the pen down block in the Pen extension function which can draw along the track of the cursor Otherwise call thepen up block to stop drawing 194 Chapter 5 PROJECTS AND ACTIVITIES ...

Page 199: ... inch Touch Screen Click on the green flag and try to control the Pencil sprite with the mouse to draw a smiley face You will find that the image is not drawn from the tip of the Pencil 5 7 Scratch Projects 195 ...

Page 200: ... Pencil sprite and move it until the Pencil tip is aligned with the cross cursor Let the Pencil sprite change the painting color How to achieve that when we click on the color option below the stage the Pencil sprite will switch the corresponding color First we write code for the Red sprite when it is clicked we broadcast a new red message 196 Chapter 5 PROJECTS AND ACTIVITIES ...

Page 201: ... the code of the Pencil sprite and when it receives the red message we change the color of the Pencil to red In the same way we also write code for the Blue sprite and when it is clicked we broadcast a new blue message 5 7 Scratch Projects 197 ...

Page 202: ...of clear drawing image Sometimes accidents happen when we draw so we need to add a clear function First select the Block X sprite when it is clicked we clear all the screens Next we set a new costume for the Pencil sprite click the Costumes tab and then select the Upload Costume option from the icon on the bottom left to upload the Eraser svg file Modify the size of the Eraser garment appropriatel...

Page 203: ...encil sprite When it receives the eraser message it will change to the Eraser costume so that when we click on the Eraser sprite we can change the Pencil sprite s costume to look like an Eraser sprite Then change the color to white that is consistent with the background color of the stage so as to achieve the function of partial removal 5 7 Scratch Projects 199 ...

Page 204: ...rite is switched to Eraser we need to switch the costume of the Pencil sprite to the Pencil a costume by clicking the red and blue on the drawing board so when we receive the red message and the blue message We want to switch back to the original Pencil a costume 200 Chapter 5 PROJECTS AND ACTIVITIES ...

Page 205: ...we need to be able to change the width of the Pencil at any time Create a new variable named width then right click the width variable on the stage select slider and then you will see a slider on the stage that can change the value of the width variable 5 7 Scratch Projects 201 ...

Page 206: ...TS7 Pro 7 inch Touch Screen Use the value of the variable width as the size of the Pencil 202 Chapter 5 PROJECTS AND ACTIVITIES ...

Page 207: ...TS7 Pro 7 inch Touch Screen 5 7 Scratch Projects 203 ...

Page 208: ...e Pencil Only when the Pencil enters the drawing area can painting be allowed When the pen enters the toolbar that is when the y coordinate is less than or equal to 120 we need to call the pen up function to stop painting 204 Chapter 5 PROJECTS AND ACTIVITIES ...

Page 209: ...TS7 Pro 7 inch Touch Screen 5 7 Scratch Projects 205 ...

Page 210: ...t more bananas To play the game against a white background click on the green flag to start Move colored objects in front of the camera to control the Monkey sprite Or click Eating Banana Game and then learn online tutorial on the Scratch official website Required Components A Screen Scratch 3 either online or offline You Will Learn Install camera on this screen Add Video Sensing expansion module ...

Page 211: ...ange monkeys and bananas First we delete the original sprite then add Monkey sprite and Bananas sprite and change their sizes to 50 Let Bananas appear randomly Bananas disappears after encountering the Monkey which means it was eaten by the Monkey and reappears randomly 5 7 Scratch Projects 207 ...

Page 212: ...een Let the Monkey appear in the center of the stage and initialize the camera data transparency is set to 20 If the camera detects an object moving let the Monkey move towards the object 208 Chapter 5 PROJECTS AND ACTIVITIES ...

Page 213: ...ite background to prevent interference from other objects Challenge I believe that you will be smart enough to program and implement this game soon Next we will add some challenges to enrich our game content When Monkey eats banana we add 1 to the score Within 30s see who has the highest score When Monkey eats a banana it emits a suitable sound effect 5 7 Scratch Projects 209 ...

Page 214: ...turn this screen into a game screen playing with your friends a smart alarm showing the weather and time a display monitoring your robot s action and many other things This article will show you how to DIY a Musical Instrument Let s take a look 210 Chapter 5 PROJECTS AND ACTIVITIES ...

Page 215: ...rd Button 10k Ohm Resistor Several Jumper Wires You Will Learn Use note functions on Scratch Input the button value from the GPIO pins Lesson Guide Build the Circuit First connect the GPIO Extension Board please read Extend GPIO to Breadboard for specific steps Insert the T type GPIO extension board into the breadboard and build the circuit as shown below 5 7 Scratch Projects 211 ...

Page 216: ... in other two functions Music and Raspberry Pi GPIO The Music function to play instruments and drums and the Raspberry Pi GPIO function can be used to control the whole pins of Raspberry Pi Tap Add icon at lower left corner and choose Music and Raspberry Pi GPIO to add two functions on the left of the main page of the Scratch 3 Finished the program 212 Chapter 5 PROJECTS AND ACTIVITIES ...

Page 217: ...TS7 Pro 7 inch Touch Screen Press these three buttons on the breadboard and there emits the tones Do Re Mi 5 7 Scratch Projects 213 ...

Page 218: ...urn this screen into a game screen playing with your friends a smart alarm showing the weather and time a display monitoring your robot s action and many other things This article will show you how to DIY a Monitor Device Let s take a look 214 Chapter 5 PROJECTS AND ACTIVITIES ...

Page 219: ...3 either online or offline Micro SD Card Reader 40P Ribbon Cable T Type GPIO Extension Board Breadboard PIR Module Camera Module FFC Cable Jump Wire F M You Will Learn Use Raspberry Pi extensions on Scratch Use audio functions on Scratch Use PIR module 5 7 Scratch Projects 215 ...

Page 220: ...d build the circuit For the camera installation tutorial please refer to Assemble and Use a Camera Module Programming with Scratch 3 In this step you will learn how to upload the prepared music to the Scratch Tap the Sounds option on the left upper cornerthen tap the speaker icon and choose Upload Sound icon to upload the prepared music file hello finally tap Open to confirm 216 Chapter 5 PROJECTS...

Page 221: ... lower left corner and choose Video Sensing and Raspberry Pi GPIO to add two functions Back to the main page drag a when gpio 0 is high from Raspberry Pi GPIO function and a play sound hello until done to the coding area 5 7 Scratch Projects 217 ...

Page 222: ...t we used before Raspberry Pi also supports other operating systems Here we only provide a link for learning reference You can try it again according to the operation steps above the link Note We have only tested Raspberry Pi OS Ubuntu MATE RetroPie on Raspberry Pi If you have other systems installed but some of them may have some bugs that make some of the functions unusable we can only suggest y...

Page 223: ...I cable 1 Screen 1 Mouse 1 Keyboard 1 Insert the micro SD card with the Raspberry Pi OS image into the micro SD card slot on the underside of the Raspberry Pi 2 Plug in the Mouse and Keyboard 3 Connect the screen to the Raspberry Pi s HDMI port Make sure the screen is plugged into a wall socket and turned on Note For the Raspberry Pi 4 models connect the screen to the HDMI0 port nearest to the pow...

Page 224: ...2 Network Segment Scanning Network scanning applications can be used to look up the IP address of Raspberry Pi such as Advanced IP Scanner Scan the IP range set and the names of all connected devices will be displayed The default hostname of the Raspberry Pi OS is raspberrypi 6 2 Use the SSH Remote Control Bash is the standard default shell of Linux and can be opened on the Raspberry Pi by using S...

Page 225: ...address is the IP address of the Raspberry Pi For example ssh pi 192 168 18 197 At the prompt type yes in lowercase The default password is raspberry Note The characters do not display when typing in the password Make sure to input the correct password 6 2 Use the SSH Remote Control 221 ...

Page 226: ... next step For Windows Users Windows users can use SSH with the PuTTY application Download PuTTY open the application and click Session on the left of the tree like structure Enter the IP address of the Raspberry Pi in the text box under Host Name and enter 22 under Port 222 Chapter 6 APPENDIX ...

Page 227: ...re will be a security prompt Click Yes to continue When the PuTTY window prompts login as type in pi for the user name of the Raspberry Pi The default password is raspberry Note The characters do not display when typing in the password Make sure to input the correct password 6 2 Use the SSH Remote Control 223 ...

Page 228: ...TS7 Pro 7 inch Touch Screen Here we get the Raspberry Pi connected and it is time to conduct the next steps 224 Chapter 6 APPENDIX ...

Page 229: ...EVEN FAQ 7 1 Black border appears on the display Select the correct resolution Click the Raspberry Pi icon Preferences Screen Configuration Then choose Configure Screens HDMI 1 Resolution choose the 1280x800 225 ...

Page 230: ...ch Screen After that you need to click the tick icon to save your configure Disable Overscan Underscan When using Raspberry Pi Imager to install a system on a Micro SD you can check the Disable overscan 226 Chapter 7 FAQ ...

Page 231: ... Pro 7 inch Touch Screen Or when you get to the desktop click the Raspberry Pi icon Preferences Raspberry Pi Configu ration Disable Overscan in the Display page 7 1 Black border appears on the display 227 ...

Page 232: ...eakers Make sure that the speaker wires are well connected Adjust the volume level by using the buttons on the driver board If there is still no sound please contact us 7 3 The screen shows No Signal after the device is turned on Please check if all the cables are plugged in properly Check if the control board Raspberry Pi is on Check if the SD card has the correct system installed 228 Chapter 7 F...

Page 233: ... if the touch module is damaged if so please contact us 7 5 Use of the touch pen This display works with passive capacitive stylus while active capacitive does not 7 6 The LCD display cannot be turned on without connecting other devices This is a normal phenomenon please use it after connecting Raspberry Pi or other devices 7 4 Can t touch 229 ...

Page 234: ...TS7 Pro 7 inch Touch Screen 230 Chapter 7 FAQ ...

Page 235: ... it for personal study investigation enjoyment or other non commercial or nonprofit purposes under therelated regulations and copyrights laws without infringing the legal rights of the author and relevant right holders For any individual or organization that uses these for commercial profit without permission the Company reserves the right to take legal action 231 ...

Reviews:

No comments