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

From Waveshare Wiki
Jump to: navigation, search
(11 intermediate revisions by the same user not shown)
Line 10: Line 10:
 
}}
 
}}
 
== Introduction ==
 
== Introduction ==
{{Amazon|{{#urlget:amazon|default}}=display
 
|More = [https://www.waveshare.com/speaker-for-micro-bit.htm More]}}
 
  
 
This is a colorful display module designed for the BBC micro:bit, 1.8inch diagonal, 160x128 pixels, capable of displaying 65K colors.
 
This is a colorful display module designed for the BBC micro:bit, 1.8inch diagonal, 160x128 pixels, capable of displaying 65K colors.
Line 55: 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.
 
  
The first parameter is to chooes a melody, and the second parameter is the number of times to play the melody again.
+
[[File:1_Createnewproject_LCD.gif]]
  
[[File:play_music.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
  
* Download
+
Note: add a space follow the address
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]]
+
[[File:2_getgithubpackage_LCD.gif]]
  
 +
=== The Blocks===
 +
* Initiation
 +
You need to initial LCD module first.
  
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.
+
[[File:3_initiallcd_LCD.gif]]
  
[[File:speaker_microbit_down.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.
  
===Micropython===
+
[[File:4_clearlcdtowhite_LCD.gif]]
For micropython, there are two ways to use it, one is use online programming website: http://python.microbit.org/v/1
 
  
And another is offline program software Mu.
+
* Set the backlight
*Open the software
+
[[File:5_Setbacklight_LCD.gif]]
[[File:open_s.png|500px]]
 
  
*Opening the programming manual
+
* 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
  
Click the link below to open the micro:bit official programming manual
+
[[File:6_senddisplaydata_LCD.gif]]
  
http://microbit-micropython.readthedocs.io/en/latest/index.html
+
*Draw point
 +
[[File:7_drwapoint_LCD.gif]]
  
Click '''music''' to copy the section code:
+
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
  
[[File:copy_micropython.gif]]
+
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
  
*Download
+
'''solid line''':
  
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.
+
[[File:8_drawsolidline_LCD.gif]]
  
[[File:Speaker_microbit_flash.gif]]
+
'''dotted line''': just need to change the Style
 +
 
 +
[[File:9_drawdottedline_LCD.gif]]
 +
 
 +
 
 +
*Draw frame
 +
'''Draw empty rectange''':
 +
 
 +
[[File:10_drawemptyrectange_LCD.gif]]
 +
 
 +
'''Draw full rectange''':
 +
 
 +
[[File:11_drawfullrectange_LCD.gif]]
 +
 
 +
*Draw circle
 +
'''Draw empty circle''':
 +
 
 +
[[File:12_drawemptycircle_LCD.gif]]
 +
 
 +
'''Draw full circle''':
 +
 
 +
[[File:13_drawfullcircle_LCD.gif]]
 +
 
 +
*Draw string
 +
[[File: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)
 +
 
 +
[[File:Partial-refresh.gif]]
 +
 
 +
Then set the display windows block and set its position
 +
 
 +
[[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.