UART

By

Moiz Hussain
(BECS/F18/0108)

Laiba mumtaz
(BECS/F18/0107)

DIGITAL SYSTEM AND DESIGN

Lab Title

TAYYAB AHMAD SHEIKH

Lab Instructor Name

Faculty of Engineering Sciences and Technology

Hamdard Institute of Engineering and Technology
Hamdard University, Main Campus, Karachi, Pakistan

1
 Faculty of Engineering Sciences and
Technology

HamdardInstitute of Engineering and

Technology

Hamdard University, Main Campus, Karachi.

CERTIFICATE
This project “UART”presented by Moiz Hussain and Laiba Mumtaz under the
direction of Lab Instructor Engr. TAYYAB AHMAD SHEIKH has been presented for
partial fulfillment of the requirements as a Semester Project for Bachelor of Engineering
(Computer system engineering).

______________________________
(Tayyab Ahmad Sheikh and Signature)

_________________________________
Moiz Hussain ( BECS/F18/0108)

_________________________________
(laiba Mumtaz (BECS/F18/0107)

2
 ABSTRACT
We will create three files (HTML file, a CSS file, and JavaScript File), we
also have an image of the clock that will be used in the background, and on
top of that, we will make an hour, minute, and second hand (using HTML
and CSS). These hands will rotate as per the system time (we will use the
predefined Date function of JavaScript to calculate the degree of rotations
of each hand).
 HTML: It is a simple file having the basic structure of the webpage and
ID for the clock’s body and for the second, minute, hour hands.
 CSS: The CSS is used just for making the clock actually look a bit nicer.
We have basically centered our clock in the middle of the webpage.
 JavaScript: The JavaScript file will provide the logic behind the rotation
of the hands.

The <canvas> tag in HTML is used to draw graphics on a web page using

JavaScript. It can be used to draw paths, boxes, texts, gradients, and adding
images. By default, it does not contain borders and text. Note: The
<canvas> tag is new in HTML5

ACKNOWLEDGEMENTS
3
All praises and thanks to Almighty ”ALLAH”, the most merciful, the most gracious, the
source of knowledge and wisdom endowed to mankind, who conferred us with the power
of mind and capability to take this project to the exciting ocean of knowledge. All
respects are for our most beloved Holy Prophet “HazratMUHAMMAD(Peace Be
Upon Him)”, whose personality will always be source of guidance for humanity.

Acknowledgement is due to Hamdard Institute of Engineering and Technology for

support of this Project, a highly appreciated achievement for us in the undergraduate
level.

We wish to express our appreciation to our tayyab Ahmad who served as our major
advisor. We would like to express our heartiest gratitude for their keen guidance, sincere
help and friendly manner which inspires us to do well in the project and makes it a
reality.

Many people, especially our classmates and team members itself, have made valuable
comment suggestions on this proposal which gave us an inspiration to improve our
project. We thank Tayyab Ahmad & all the people for their help directly and indirectly to
complete our project.

4
 TABLE OF CONTENTS
Abstract
Acknowledgements

1. INTRODUCTION

2. METHODOLOGY

3. RESULTS

4. CONCLUSIONS

5. APPENDICES (Program Coding)

5
 INTRODUCTION
A universal asynchronous receiver and transmitter (UART) is a circuit that sends parallel
data through a serial line. UARTs are frequently used in conjunction with the EIA
(Electronic Industries Alliance) RS-232 standard, which specifies the electrical,
mechanical, functional, and procedural characteristics of two data communication
equipment. Because the voltage level defined in RS-232 is different from that of FPGA
110, a voltage converter chip is needed between a serial port and an FPGA's 110 pins.
The S3 board has an RS-232 port with a standard nine-pin connector.

The board contains the necessary voltage converter chip and configures the various RS-
232's control signals to automatically generate acknowledgment for the PC's serial port. A
standard straightthrough serial cable can be used to connect the S3 board and PC's serial
port. The S3 board basically handles the RS-232 standard and we only need to concentrate
on design of the UART circuit. A UART includes a transmitter and a receiver.

The transmitter is essentially a special shift register that loads data in parallel and then
shifts it out bit by bit at a specific rate. The receiver, on the other hand, shifts in data bit by
bit and then reassembles the data. The serial line is 1 when it is idle. The transmission starts
with a start bit, which is 0, followed by data bits and an optional parity bit, and ends with
stop bits, which are 1.

The number of data bits can be 6, 7, or 8. The optional parity bit is used for error detection.
For odd parity, it is set to 0 when the data bits have an odd number of I 's. For even parity,
it is set to 0 when the data bits have an even number of 1 's. The number of stop bits can be
1, 1.5,. or 2. Transmission with 8 data bits, no parity, and 1 stop bit is shown Note that the
LSB of the data word is transmitted first.

No clock information is conveyed through the serial line. Before the transmission starts, the
transmitter and receiver must agree on a set of parameters in advance, which include the
baud rate (i.e., number of bits per second), the number of data bits and stop bits, and use of
the parity bit. The commonly used baud rates are 2400,4800, 9600, and 19,200 bauds. We
illustrate the design of the receiving and transmitting subsystems in the following sections.
The design is customized for a UART with a 19,200 baud rate, 8 data bits, 1 stop bit, and
no parity bit.

6
METHODOLOGY
UART RECEIVING SUBSYSTEM :

Since no clock information is conveyed from the transmitted signal, the receiver can
retrieve the data bits only by using the predetermined parameters. We use an oversampling
scheme to estimate the middle points of transmitted bits and then retrieve them at these
points accordingly.

Oversampling procedure The most commonly used sampling rate is 16 times the baud rate,
which means that each serial bit is sampled 16 times. Assume that the communication uses
N data bits and M stop bits. The oversampling scheme works as follows:

1. Wait until the incoming signal becomes 0, the beginning of the start bit, and then start
the sampling tick counter.

2. When the counter reaches 7, the incoming signal reaches the middle point of the start bit.
Clear the counter to 0 and restart.

3. When the counter reaches 15, the incoming signal progresses for one bit and reaches the
middle of the first data bit. Retrieve its value, shift it into a register, and restart the counter.

4. Repeat step 3 N-1 more times to retrieve the remaining data bits.

5. If the optional parity bit is used, repeat step 3 one time to obtain the parity bit.

6. Repeat step 3 hf more times to obtain the stop bits.

The oversampling scheme basically performs the function of a clock signal. Instead of
using the rising edge to indicate when the input signal is valid, it utilizes sampling ticks to
estimate the middle point of each bit.

7
The conceptual block diagram of a UART receiving subsystem is shown in Figure 8.2. It
consists of three major components: a UART receiver: the circuit to obtain the data word
via oversampling a Baud rate generator: the circuit to generate the sampling ticks a
Interface circuit: the circuit that provides a buffer and status between the UART receiver
and the system that uses the UART.

BAUD RATE GENERATOR

The baud rate generator generates a sampling signal whose frequency is exactly 16 times
the UART's designated baud rate. To avoid creating a new clock domain and violating the
synchronous design principle, the sampling signal should function as enable ticks rather
than the clock signal to the UART receiver.

UART RECEIVER

With an understanding of the oversampling procedure, we can derive the ASMD chart
accordingly, as shown in Figure 8.3. To accommodate future modification, two constants
are used in the description. The DBIT constant indicates the number of data bits, and the
SB-TICK constant indicates the number of ticks needed for the stop bits, which is 16, 24,
and 32 for 1, 1.5, and 2 stop bits, respectively. DBIT and SB-TICK are assigned to 8 and
16 in this design.

The chart follows the steps discussed in Section 8.2.1 and includes three major states, start,
data, and stop, which represent the processing of the start bit, data bits, and stop bit. The s-
tick signal is the enable tick from the baud rate generator and there are 16 ticks in a bit
interval. Note that the FSMD stays in the same state unless the s-tick signal is asserted.
There are two counters, represented by the s and n registers.

The s register keeps track of the number of sampling ticks and counts to 7 in the start state,
to 15 in the data state, and to SB-TICK in the stop state. The n register keeps track of the
number of data bits received in the data state. The retrieved bits are shifted into and
reassembled in the b register. A status signal, rx-done-tick, is included. It is asserted for
one clock cycle after the receiving process is completed.

UART RECEIVER( VERILOG CODE)

module uart-rx
#(
parameter DBIT = 8, // # data bits
SB-TICK = 16 // # ticks for stop bits
)
(
input wire clk, reset,
input wire rx, s-tick,
output reg rx-done-tick,
10 output wire [7:0] dout
);
// symbolic state declaration
localparam [1 : 0]
8
 idle = 2'b00,
start = 2' b01,
data = 2'b10,
stop = 2'bll;
// signal declaration
reg [1: 0] state-reg , state-next ;
reg [3:0] s-reg , s-next ;
reg [2:0] n-reg , n-next ;
reg [7:0] b-reg , b-next ;

// bod,v
// FSMD state & data registers
always @( posedge clk , posedge reset)
if (reset)
begin
state-reg <= idle;
s-reg <= 0;
n-reg <= 0;
b-reg <= 0;
end
else
begin
state-reg <= state-next ;
s-reg <= s-next;
n-reg <= n-next;
b-reg <= b-next;
end
// FSMD next-state logic
always @*
begin
state-next = state-reg ;
rx-done-tick = l'bO;
s-next = s-reg; 50 n-next = n-reg;
b-next = b-reg;
case (state-reg)
idle :
if (-rx)
begin
state-next = start;
s-next = 0;
end
start :
if (s-tick)
if (s_reg==7)
begin
state-next = data;
s-next = 0;
n-next = 0;
end
9
else
s-next = s-reg + 1;
data :
if (s-tick)
if (s_reg==15)
begin
s-next = 0;
b-next = {(rx , b-reg [7 : 1] } ;
if (n-reg==(DBIT-1))
state-next = stop ;
else
n-next = n-reg + 1;
end
else
s-next = s-reg + 1;
stop:
if (s-tick)
if (s-reg==(SB-TICK-1))
begin
state-next = idle;
rx-done-tick =l'bl;
end
else
s-next = s-reg + 1;
endcase
end
// output
assign dout = b-reg;

endmodule

UART TRANSMITTING SUBSYSTEM

The organization of a UART transmitting subsystem is similar to that of the receiving

subsystem. It consists of a UART transmitter, baud rate generator, and interface circuit.
The interface circuit is similar to that of the receiving subsystem except that the main
system sets the flag FF or writes the FIFO buffer, and the UART transmitter clears the flag
FF or reads the FIFO buffer.

The UART transmitter is essentially a shift register that shifts out data bits at a specific
rate. The rate can be controlled by one-clock-cycle enable ticks generated by the baud rate
generator. Because no oversampling is involved, the frequency of the ticks is 16 times
slower than that of the UART receiver.

Instead of introducing a new counter, the UART transmitter usually shares the baud rate
generator of the UART receiver and uses an internal counter to keep track of the number of
enable ticks. A bit is shifted out every 16 enable ticks. The ASMD chart of the UART
transmitter is similar to that of the UART receiver. After assertion of the tx-start signal, the
FSMD loads the data word and then gradually progresses through the start, data, and stop
10
states to shifi out the corresponding bits. It signals completion by asserting the tx-done-tick
signal for one clock cycle. A 1-bit buffer, tx-reg, is used to filter out any potential glitch.

Uart transmitter (Verilog code)

module uart-tx
#(
parameter DBIT = 8, // # data bits
SB-TICK = 16 // # ticks for stop bits
)
(
input wire clk, reset,
input wire tx-start , s-tick,
input wire [7:0] din,
output reg tx-done-tick ,
output wire tx
);
// synlbolic state declaration
localparam [1:0]
idle = 2'b00,
start = 2'b01,
data = 2'b10,
stop = 2'bll;

// signal declaration
reg [1: 0] state-reg , state-next ;
reg [3:0] s-reg , s-next;
reg [2:0] n-reg, n-next;
2.; reg [7:0] b-reg , b-next;
reg tx-reg , tx-next ;

// FSMD state & data registers

always @(posedge clk, posedge reset)

if (reset)
begin
state-reg <= idle;
s-reg <= 0;
n-reg <= 0;
b-reg <= 0;
tx-reg <= l'bl;
end
else
begin
state-reg <= state-next;
s-reg <= s-next; n-reg <= n-next;
b-reg <= b-next;
tx-reg <= tx-next;
end
11
// FSMD next-state logic & functional units

always @*
so begin
state-next = state-reg;
tx-done-tick = lJbO;
s-next = s-reg;
n-next = n-reg;
b-next = b-reg;
tx-next = tx-reg ;
case (state-reg)
idle :
begin
tx-next = l'bl;
if (tx-start)
begin
state-next = start;
s-next = 0;
b-next = din;
end
end
start :
begin
tx-next = l'bO;
if (s-tick)
if (s_reg==15)
begin
state-next = data;
s-next = 0;
n-next = 0;
end
else
s-next = s-reg + 1;
end
data:
begin
tx-next = b-reg [0] ;
if (s-tick)
if (s_reg==15)
begin
s-next = 0;
b-next = b-reg >> 1;
if (n-reg==(DBIT-1))
state-next = stop ;
else
n-next = n-reg + 1;
end
else
s-next = s-reg + 1;
12
end
stop :
begin
tx-next = 1 'bl;
if (s-tick)
if (s-reg==(SB-TICK -1))
begin
state-next = idle;
tx-done-tick = l'bl;
end
else
s-next = s-reg + 1;
end
endcase
end
// output
assign tx = tx-reg;
endmodule

RESULT

13
CONCLUSION
HTML: It is a simple file having the basic structure of the webpage and ID
for the clock’s body and for the second, minute, hour hands.
CSS: The CSS is used just for making the clock actually look a bit nicer. We
have basically centered our clock in the middle of the webpage.
14
JavaScript: The JavaScript file will provide the logic behind the rotation of
the hands.

The <canvas> tag in HTML is used to draw graphics on a web page using
JavaScript. It can be used to draw paths, boxes, texts, gradients, and
adding images. By default, it does not contain borders and text. Note: The
<canvas> tag is new in HTML5.

APPENDICES (Program Coding)

<!DOCTYPE html>
<html>
<body>

<canvas id="canvas" width="400" height="400"

style="background-color:#DEB887">
</canvas>

<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var radius = canvas.height / 2;
ctx.translate(radius, radius);
radius = radius * 0.90
setInterval(drawClock, 1000);

function drawClock() {
drawFace(ctx, radius);
drawNumbers(ctx, radius);
drawTime(ctx, radius);
}

function drawFace(ctx, radius) {

var grad;
ctx.beginPath();
ctx.arc(0, 0, radius, 0, 2*Math.PI);
ctx.fillStyle = '#008B8B';
ctx.fill();
grad = ctx.createRadialGradient(0,0,radius*0.95, 0,0,radius*1.05);
grad.addColorStop(0, '#F0F8FF');
grad.addColorStop(0.5, '#F0F8FF');
grad.addColorStop(1, '#F0F8FF');
ctx.strokeStyle = grad;
ctx.lineWidth = radius*0.1;
ctx.stroke();
ctx.beginPath();
ctx.arc(0, 0, radius*0.1, 0, 2*Math.PI);
ctx.fillStyle = '#F0F8FF';
ctx.fill();
15
}

function drawNumbers(ctx, radius) {

var ang;
var num;
ctx.font = radius*0.15 + "px arial";
ctx.textBaseline="middle";
ctx.textAlign="center";
for(num = 1; num < 13; num++){
ang = num * Math.PI / 6;
ctx.rotate(ang);
ctx.translate(0, -radius*0.85);
ctx.rotate(-ang);
ctx.fillText(num.toString(), 0, 0);
ctx.rotate(ang);
ctx.translate(0, radius*0.85);
ctx.rotate(-ang);
}
}

function drawTime(ctx, radius){

var now = new Date();
var hour = now.getHours();
var minute = now.getMinutes();
var second = now.getSeconds();
//hour
hour=hour%12;
hour=(hour*Math.PI/6)+
(minute*Math.PI/(6*60))+
(second*Math.PI/(360*60));
drawHand(ctx, hour, radius*0.5, radius*0.07);
//minute
minute=(minute*Math.PI/30)+(second*Math.PI/(30*60));
drawHand(ctx, minute, radius*0.8, radius*0.07);
// second
second=(second*Math.PI/30);
drawHand(ctx, second, radius*0.9, radius*0.02);
}

function drawHand(ctx, pos, length, width) {

ctx.beginPath();
ctx.lineWidth = width;
ctx.lineCap = "round";
ctx.moveTo(0,0);
ctx.rotate(pos);
ctx.lineTo(0, -length);
ctx.stroke();
ctx.rotate(-pos);
}
16
</script>

</body>
</html>

17