Difference between revisions of "1.8inch LCD for micro:bit"

From Waveshare Wiki
Jump to: navigation, search
(Created page with "{{Infobox item|colorscheme=green |img=300px| link=https://www.waveshare.com/speaker-for-micro-bit.htm |caption=Speaker for micro:bit, onb...")
 
(13 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
{{Infobox item|colorscheme=green
 
{{Infobox item|colorscheme=green
|img=[[File:Speaker-for-micro-bit-1.jpg|300px| link=https://www.waveshare.com/speaker-for-micro-bit.htm ]]
+
|img=[[File:1.8inch-LCD-for-micro-bit-1.jpg|300px| link=https://www.waveshare.com/1.8inch-lcd-for-micro-bit.htm ]]
|caption=Speaker for micro:bit, onboard speaker, volume adjustable
+
|caption=1.8inch LCD for micro:bit. 65K color
 
|brand=Waveshare
 
|brand=Waveshare
 
|{{#urlget:amazon|default}}=display
 
|{{#urlget:amazon|default}}=display
|website_cn=[http://www.waveshare.net/shop/Speaker-for-micro-bit.htm 官方中文站点]
+
|website_cn=[http://www.waveshare.net/shop/1.8inch-LCD-for-micro-bit.htm 官方中文站点]
|website_en=[https://www.waveshare.com/speaker-for-micro-bit.htm Waveshare Website]
+
|website_en=[https://www.waveshare.com/1.8inch-lcd-for-micro-bit.htm Waveshare Website]
 
|related=
 
|related=
 
{{Product List |Mini PC/Micro:bit/Expansions}}
 
{{Product List |Mini PC/Micro:bit/Expansions}}
 
}}
 
}}
 
== Introduction ==
 
== Introduction ==
{{Amazon|{{#urlget:amazon|default}}=display
 
|More = [https://www.waveshare.com/speaker-for-micro-bit.htm More]}}
 
  
This product is a mini buzzer expansion board based on micro:bit, which integrates the IC NS8002 bridge audio power amplifier, a high quality speaker, and a headphone jack output plugin. The switcher allows you to choose a playback device,and it supports volume control.
+
This is a colorful display module designed for the BBC micro:bit, 1.8inch diagonal, 160x128 pixels, capable of displaying 65K colors.
 +
 
 +
Tired of the 5x5 LED matrix? Time to get a tiny monitor for your micro:bit, this one would be the ideal choice.
  
 
===Specification===
 
===Specification===
*Dimension:36.52mm*30.72mm
+
*Driver: ST7735S
*Operating Voltage: 2.0V~5.5V
+
*Resolution: 160x128
*Volume adjustable: support
+
*Display color: RGB, 65K colors
*Earphone jack: support
+
*Operating voltage: 3.3V
 +
*Dimension: 61mm x 51.5mm
  
===Hardware connection===
+
===Pinouts===
There are two ways to connect this product
+
{|class="wikitable"
# Using the DuPont wires,
+
|-
# Using alligator clip wires
+
!PIN !! micro:bit PIN !!Description
Note:Both of these two kinds o cables come along with the product
+
|-
 
+
|Vcc||3V3||Power
[[File:Speaker_cable.png|500px|center]]
+
|-
 
+
|GND||GND||Ground
=== Device description===
+
|-
[[File:Speaker_component.png|400px|center]]
+
|MISO||P14||SPI data master input/slave output
 
+
|-
# Select audio device: Switch right for earphone output, switch left for speaker
+
|MOSI||P15||SPI data master output/slave input
# High quality speaker
+
|-
# Ear[ones jack socket
+
|SCK||P13||SPI clock input
# Volume control: Turn left to volume up, turn right to down
+
|-
 +
|LCD_CS||P16||LCD chip selection
 +
|-
 +
|RAM_CS||P2||SRAM chip selection
 +
|-
 +
|DC||P12||LCD data/command
 +
|-
 +
|RST||P8||LCD reset
 +
|-
 +
|BL||P1||LCD backlight
 +
|}
  
 
== Programming Guide ==
 
== Programming Guide ==
Line 42: Line 53:
 
The official recommendation are two programming methods: typescript and micropython. Typescript is the graphical programming language.
 
The official recommendation are two programming methods: typescript and micropython. Typescript is the graphical programming language.
  
 +
'''Note:'''For this LCD, we only provide demo code of typescript
 
=== Typescript===
 
=== Typescript===
 
Typescript is a kind of graphical programming, its website is that: https://makecode.microbit.org/#
 
Typescript is a kind of graphical programming, its website is that: https://makecode.microbit.org/#
 
* Open a browser and input the next URL
 
* Open a browser and input the next URL
 
[[File:open_make.gif]]
 
[[File:open_make.gif]]
* Playing a musical melody and setting the beat
 
Click "music" on the left side, and place "play tone" inside "on start" block. First select a note, then set its beat. If your computer has  playback device, it will play the corresponding voice.
 
  
[[File:set_music.gif]]
+
*Create a new empty project
*Playing music tones
+
Click Project->New Project to create an empty project. Rename the project as LCD or any one you like to.
First remove "play tone" by dragging it to the left side, then place “start melody” block inside "on start" block.
+
 
 +
[[File:1_Createnewproject_LCD.gif]]
 +
 
 +
* Add Packeage
 +
You can get the package of 1.8inch LCD for micro;bit from github. Click More..->Add Package, then  copy the URL to the Edittext.
 +
https://github.com/waveshare/WSLCD1in8
 +
 
 +
Note: add a space follow the address
 +
 
 +
[[File:2_getgithubpackage_LCD.gif]]
 +
 
 +
=== The Blocks===
 +
* Initiation
 +
You need to initial LCD module first.
 +
 
 +
[[File:3_initiallcd_LCD.gif]]
 +
 
 +
* Clear the screen
 +
Clear the screen to white. Create an buffer on RAM with the resolution size 160*128 and initial it to white.
 +
 
 +
[[File:4_clearlcdtowhite_LCD.gif]]
 +
 
 +
* Set the backlight
 +
[[File:5_Setbacklight_LCD.gif]]
 +
 
 +
* Send display data
 +
With this block, it will send one frame of buffer to the LCD and display. Note: it is always following drawing operation
 +
 
 +
[[File:6_senddisplaydata_LCD.gif]]
 +
 
 +
*Draw point
 +
[[File:7_drwapoint_LCD.gif]]
 +
 
 +
Place the block before send display data. You can choose the position, color and size. For the screen, (1,1) is on top-left, and (160,128) is on bottom-right
 +
 
 +
There are tow way to set the color, the one is use the color block as above, another is to set the value (RGB565) by  drag the slider.
 +
*Draw line
 +
You can choose the the line's position, color, size and its sytle
 +
 
 +
'''solid line''':
 +
 
 +
[[File:8_drawsolidline_LCD.gif]]
  
The first parameter is to chooes a melody, and the second parameter is the number of times to play the melody again.
+
'''dotted line''': just need to change the Style
  
[[File:play_music.gif]]
+
[[File:9_drawdottedline_LCD.gif]]
  
* Download
 
Connect the micro:bit to the computer. It will appear as a removable drive of 8 MB. This time you can download the program into the micro:bot
 
  
[[File:findmicrobit.gif]]
+
*Draw frame
 +
'''Draw empty rectange''':
  
 +
[[File:10_drawemptyrectange_LCD.gif]]
  
Choose a name for the project, save and download the HEX file. Copy the HEX file from the folder where it was saved and paste it onto the "MICROBIT" removable drive.
+
'''Draw full rectange''':
  
[[File:speaker_microbit_down.gif]]
+
[[File:11_drawfullrectange_LCD.gif]]
  
===Micropython===
+
*Draw circle
For micropython, there are two ways to use it, one is use online programming website: http://python.microbit.org/v/1
+
'''Draw empty circle''':
  
And another is offline program software Mu.
+
[[File:12_drawemptycircle_LCD.gif]]
*Open the software
 
[[File:open_s.png|500px]]
 
  
*Opening the programming manual
+
'''Draw full circle''':
  
Click the link below to open the micro:bit official programming manual
+
[[File:13_drawfullcircle_LCD.gif]]
  
http://microbit-micropython.readthedocs.io/en/latest/index.html
+
*Draw string
 +
[[File:14_drawstring_LCD.gif]]
  
Click '''music''' to copy the section code:
+
*Partial refresh
 +
You can set display windows and refresh it on LCD instead of full refresh
  
[[File:copy_micropython.gif]]
+
Initialize LCD, set the backlight and then draw a rectangle from (30, 30) to (80, 80)
  
*Download
+
[[File:Partial-refresh.gif]]
  
Copy the code as the below step, and past it to the Mu. Click "check" for error checking, After no error are found click Flash button, and select micro:bit and download it.
+
Then set the display windows block and set its position
  
[[File:Speaker_microbit_flash.gif]]
+
[[File:14_drawstring_LCD_2.gif]]
  
'''Note:''' For more information about the programming, please refer to the programming manual.
 
 
==Resources==
 
==Resources==
 
<!-- *[https://www.waveshare.com/w/upload/a/a4/Piano_for_microbit_User_Manual_EN.pdf User Manual] -->
 
<!-- *[https://www.waveshare.com/w/upload/a/a4/Piano_for_microbit_User_Manual_EN.pdf User Manual] -->
*[https://www.waveshare.com/w/upload/1/1f/Speak_for_microbit_Code.7z Demo code]
+
*[[:File:1.8inch_LCD_for_microbit_Schematic.pdf|Schematic]]
*[https://www.waveshare.com/w/upload/a/aa/Speaker_for_microbit-Schematic.pdf Schematic]
+
===Datasheet===
 +
*[[:File:23LC1024.pdf | 23LC1024]]
 +
*[[:File:ST7735S_V1.1_20111121.pdf|ST7735S]]
  
 
== Software ==
 
== Software ==
*[https://codewith.mu/#download Mu download]
+
*[https://makecode.microbit.org/v0 makecode website]
 +
<!--
 +
==Certification==
 +
*[https://www.waveshare.com/w/upload/c/ca/1.8inch_LCD_for_microbit_certification.rar CE RoHS]
 +
-->
  
 
==FAQ==
 
==FAQ==

Revision as of 11:19, 1 April 2019

1.8inch LCD for micro:bit
1.8inch-LCD-for-micro-bit-1.jpg

1.8inch LCD for micro:bit. 65K color
{{{name2}}}

{{{name3}}}

{{{name4}}}

{{{name5}}}

Introduction

This is a colorful display module designed for the BBC micro:bit, 1.8inch diagonal, 160x128 pixels, capable of displaying 65K colors.

Tired of the 5x5 LED matrix? Time to get a tiny monitor for your micro:bit, this one would be the ideal choice.

Specification

  • Driver: ST7735S
  • Resolution: 160x128
  • Display color: RGB, 65K colors
  • Operating voltage: 3.3V
  • Dimension: 61mm x 51.5mm

Pinouts

PIN micro:bit PIN Description
Vcc 3V3 Power
GND GND Ground
MISO P14 SPI data master input/slave output
MOSI P15 SPI data master output/slave input
SCK P13 SPI clock input
LCD_CS P16 LCD chip selection
RAM_CS P2 SRAM chip selection
DC P12 LCD data/command
RST P8 LCD reset
BL P1 LCD backlight

Programming Guide

Micor:bit has variety of programming methods like mbed, micropython, typescript and other programming methods, as well as code online websites which are abundant.

The official recommendation are two programming methods: typescript and micropython. Typescript is the graphical programming language.

Note:For this LCD, we only provide demo code of typescript

Typescript

Typescript is a kind of graphical programming, its website is that: https://makecode.microbit.org/#

  • Open a browser and input the next URL

Open make.gif

  • Create a new empty project

Click Project->New Project to create an empty project. Rename the project as LCD or any one you like to.

1 Createnewproject LCD.gif

  • Add Packeage

You can get the package of 1.8inch LCD for micro;bit from github. Click More..->Add Package, then copy the URL to the Edittext. https://github.com/waveshare/WSLCD1in8

Note: add a space follow the address

2 getgithubpackage LCD.gif

The Blocks

  • Initiation

You need to initial LCD module first.

3 initiallcd LCD.gif

  • Clear the screen

Clear the screen to white. Create an buffer on RAM with the resolution size 160*128 and initial it to white.

4 clearlcdtowhite LCD.gif

  • Set the backlight

5 Setbacklight LCD.gif

  • Send display data

With this block, it will send one frame of buffer to the LCD and display. Note: it is always following drawing operation

6 senddisplaydata LCD.gif

  • Draw point

7 drwapoint LCD.gif

Place the block before send display data. You can choose the position, color and size. For the screen, (1,1) is on top-left, and (160,128) is on bottom-right

There are tow way to set the color, the one is use the color block as above, another is to set the value (RGB565) by drag the slider.

  • Draw line

You can choose the the line's position, color, size and its sytle

solid line:

8 drawsolidline LCD.gif

dotted line: just need to change the Style

9 drawdottedline LCD.gif


  • Draw frame

Draw empty rectange:

10 drawemptyrectange LCD.gif

Draw full rectange:

11 drawfullrectange LCD.gif

  • Draw circle

Draw empty circle:

12 drawemptycircle LCD.gif

Draw full circle:

13 drawfullcircle LCD.gif

  • Draw string

14 drawstring LCD.gif

  • Partial refresh

You can set display windows and refresh it on LCD instead of full refresh

Initialize LCD, set the backlight and then draw a rectangle from (30, 30) to (80, 80)

Partial-refresh.gif

Then set the display windows block and set its position

14 drawstring LCD 2.gif

Resources

Datasheet

Software

FAQ

Support

Support

If you require technical support, please go to the Support page and open a ticket.