TU03 Segment Display

Logo, course, and module name: INF313 Computational Reasoning session called "Logic"

inf1339

Motivation

you want to build a number displaying machine

?

What goes in between?

?

What goes in between?

?

DATA IN

DATA OUT

What goes in between?

DATA IN

DATA OUT

Instructions

  • A) Set up truth table with four BCD inputs (W, X, Y, Z)
  • F) Use KMap to determine minimized expression for your segment
  • C) Fill in column for your assigned segment
  • G) Write JS expression and insert into code
  • B) Create column for each of 7 segments (A, B, C, D, E, F)
  • D) Write logical expression for your segment
    • e.g., A=!WXYZ + W!X!Y!Z + WX!Y!Z
  • E) Draw KMap and put your expression in the cells
  • H) Implement your minimized expression in circuit and confirm that segment behaves as expected

Write out truth table for 4 BCD inputs (W, X, Y, Z)

W X Y Z
1 1 1 1
1 1 1 0
1 1 0 1
1 1 0 0
1 0 1 1
1 0 1 0
1 0 0 1
1 0 0 0
0 1 1 1
0 1 1 0
0 1 0 1
0 1 0 0
0 0 1 1
0 0 1 0
0 0 0 1
0 0 0 0

How many rows?

4 variables → 24 = 16 rows

How to fill in?

start with 8 1s and 8 0s in left-most column

W X Y Z

1

1

1

1

1

1

1

1

0

0

0

0

0

0

0

0

then alternating groups of 4

and then groups of 2 and then 1.

Bottom ten rows correspond to our ten keys

1

2

3

4

5

6

7

8

9

0

Each segment has a name

A

G

D

 

F

 

 

E

 

 

B

 

 

C

 

Add columns for seven segments A-G

W X Y Z
1 1 1 1
1 1 1 0
1 1 0 1
1 1 0 0
1 0 1 1
1 0 1 0
1 0 0 1
1 0 0 0
0 1 1 1
0 1 1 0
0 1 0 1
0 1 0 0
0 0 1 1
0 0 1 0
0 0 0 1
0 0 0 0

1

2

3

4

5

6

7

8

9

0

A B C D E F G
W X Y Z
1 1 1 1
1 1 1 0
1 1 0 1
1 1 0 0
1 0 1 1
1 0 1 0
1 0 0 1
1 0 0 0
0 1 1 1
0 1 1 0
0 1 0 1
0 1 0 0
0 0 1 1
0 0 1 0
0 0 0 1
0 0 0 0

1

2

3

4

5

6

7

8

9

0

A B C D E F G

Fill in column for your assigned segment

W X Y Z
1 1 1 1
1 1 1 0
1 1 0 1
1 1 0 0
1 0 1 1
1 0 1 0
1 0 0 1
1 0 0 0
0 1 1 1
0 1 1 0
0 1 0 1
0 1 0 0
0 0 1 1
0 0 1 0
0 0 0 1
0 0 0 0

1

2

3

4

5

6

7

8

9

0

A B C D E F G

Write logical expression for your segment

e.g., A=!WXYZ + W!X!Y!Z + WX!Y!Z

W!X!YZ +

W!X!YZ +

!W!X!Y!Z 

!W!XY!Z +

!WX!YZ +

!WXYZ +

W!X!Y!Z +

!W!XYZ +

!WXY!Z +

A=

W X Y Z
1 1 1 1
1 1 1 0
1 1 0 1
1 1 0 0
1 0 1 1
1 0 1 0
1 0 0 1
1 0 0 0
0 1 1 1
0 1 1 0
0 1 0 1
0 1 0 0
0 0 1 1
0 0 1 0
0 0 0 1
0 0 0 0

1

2

3

4

5

6

7

8

9

0

A B C D E F G

Write logical expression for your segment

e.g., A=!WXYZ + W!X!Y!Z + WX!Y!Z

W!X!YZ +

W!X!YZ +

!W!X!Y!Z 

!W!XY!Z +

!WX!YZ +

!WXYZ +

W!X!Y!Z +

!W!XYZ +

!WXY!Z +

A=

W X Y Z
1 1 1 1
1 1 1 0
1 1 0 1
1 1 0 0
1 0 1 1
1 0 1 0
1 0 0 1
1 0 0 0
0 1 1 1
0 1 1 0
0 1 0 1
0 1 0 0
0 0 1 1
0 0 1 0
0 0 0 1
0 0 0 0

1

2

3

4

5

6

7

8

9

0

A B C D E F G

Write logical expression for your segment

e.g., A=!WXYZ + W!X!Y!Z + WX!Y!Z

W!X!YZ +

W!X!YZ +

!W!X!Y!Z 

!W!XY!Z +

!WX!YZ +

!WXYZ +

W!X!Y!Z +

!W!XYZ +

!WXY!Z +

A=

W X Y Z
1 1 1 1
1 1 1 0
1 1 0 1
1 1 0 0
1 0 1 1
1 0 1 0
1 0 0 1
1 0 0 0
0 1 1 1
0 1 1 0
0 1 0 1
0 1 0 0
0 0 1 1
0 0 1 0
0 0 0 1
0 0 0 0

1

2

3

4

5

6

7

8

9

0

A B C D E F G

Write logical expression for your segment

e.g., A=!WXYZ + W!X!Y!Z + WX!Y!Z

W!X!YZ +

W!X!YZ +

!W!X!Y!Z 

!W!XY!Z +

!WX!YZ +

!WXYZ +

W!X!Y!Z +

!W!XYZ +

!WXY!Z +

A=

W X Y Z
1 1 1 1
1 1 1 0
1 1 0 1
1 1 0 0
1 0 1 1
1 0 1 0
1 0 0 1
1 0 0 0
0 1 1 1
0 1 1 0
0 1 0 1
0 1 0 0
0 0 1 1
0 0 1 0
0 0 0 1
0 0 0 0

1

2

3

4

5

6

7

8

9

0

A B C D E F G

Write logical expression for your segment

e.g., A=!WXYZ + W!X!Y!Z + WX!Y!Z

W!X!YZ +

W!X!YZ +

!W!X!Y!Z 

!W!XY!Z +

!WX!YZ +

!WXYZ +

W!X!Y!Z +

!W!XYZ +

!WXY!Z +

A=

W X Y Z
1 1 1 1
1 1 1 0
1 1 0 1
1 1 0 0
1 0 1 1
1 0 1 0
1 0 0 1
1 0 0 0
0 1 1 1
0 1 1 0
0 1 0 1
0 1 0 0
0 0 1 1
0 0 1 0
0 0 0 1
0 0 0 0

1

2

3

4

5

6

7

8

9

0

A B C D E F G

Write logical expression for your segment

e.g., A=!WXYZ + W!X!Y!Z + WX!Y!Z

W!X!YZ +

W!X!YZ +

!W!X!Y!Z 

!W!XY!Z +

!WX!YZ +

!WXYZ +

W!X!Y!Z +

!W!XYZ +

!WXY!Z +

A=

W X Y Z
1 1 1 1
1 1 1 0
1 1 0 1
1 1 0 0
1 0 1 1
1 0 1 0
1 0 0 1
1 0 0 0
0 1 1 1
0 1 1 0
0 1 0 1
0 1 0 0
0 0 1 1
0 0 1 0
0 0 0 1
0 0 0 0

1

2

3

4

5

6

7

8

9

0

A B C D E F G

Write logical expression for your segment

e.g., A=!WXYZ + W!X!Y!Z + WX!Y!Z

W!X!YZ +

W!X!YZ +

!W!X!Y!Z 

!W!XY!Z +

!WX!YZ +

!WXYZ +

W!X!Y!Z +

!W!XYZ +

!WXY!Z +

A=

W X Y Z
1 1 1 1
1 1 1 0
1 1 0 1
1 1 0 0
1 0 1 1
1 0 1 0
1 0 0 1
1 0 0 0
0 1 1 1
0 1 1 0
0 1 0 1
0 1 0 0
0 0 1 1
0 0 1 0
0 0 0 1
0 0 0 0

1

2

3

4

5

6

7

8

9

0

A B C D E F G

Write logical expression for your segment

e.g., A=!WXYZ + W!X!Y!Z + WX!Y!Z

W!X!YZ +

W!X!YZ +

!W!X!Y!Z 

!W!XY!Z +

!WX!YZ +

!WXYZ +

W!X!Y!Z +

!W!XYZ +

!WXY!Z +

A=

W X Y Z
1 1 1 1
1 1 1 0
1 1 0 1
1 1 0 0
1 0 1 1
1 0 1 0
1 0 0 1
1 0 0 0
0 1 1 1
0 1 1 0
0 1 0 1
0 1 0 0
0 0 1 1
0 0 1 0
0 0 0 1
0 0 0 0

1

2

3

4

5

6

7

8

9

0

A B C D E F G

Write logical expression for your segment

e.g., A=!WXYZ + W!X!Y!Z + WX!Y!Z

W!X!YZ +

W!X!YZ +

!W!X!Y!Z 

!W!XY!Z +

!WX!YZ +

!WXYZ +

W!X!Y!Z +

!W!XYZ +

!WXY!Z +

A=

Draw KMap and insert 1s for your expression

W!X!YZ +

!W!X!Y!Z 

!W!XY!Z +

!WX!YZ +

!WXYZ +

W!X!Y!Z +

!W!XYZ +

!WXY!Z +

A=

Add "don't care" states to the map

W!X!YZ +

!W!X!Y!Z 

!W!XY!Z +

!WX!YZ +

!WXYZ +

W!X!Y!Z +

!W!XYZ +

!WXY!Z +

A=

Use KMap to minimize expression

Use KMap to minimize expression

Use KMap to minimize expression

           yz
wx		 00 01 11 10

00
 
 
​
​

01
 
​
​
​

11
 
 
 
 
 

10
 
​
​
 
 
W X Y Z A
- 1 1 1 1
- 1 1 1 0
- 1 1 0 1
- 1 1 0 0
- 1 0 1 1
- 1 0 1 0
9 1 0 0 1
8 1 0 0 0
7 0 1 1 1
6 0 1 1 0
5 0 1 0 1
4 0 1 0 0
3 0 0 1 1
2 0 0 1 0
1 0 0 0 1
0 0 0 0 0

!X!Z

W

Y

XZ

1

0

-

1

1

1

1

1

1

1

0

-

-

-

-

-

1

0

-

1

1

1

1

1

1

1

0

-

-

-

-

-

A

+

=

+

+

Write JS expression and insert into code

!X!Z

W

Y

XZ

A

+

=

+

+

var a =
 !x && !z 
||
w
y
(x && z)
 !x &&    
 !x       
(!x && !z)
||
||
 x && z 
 x &&   
 x

JavaScript Tip Sheet

not is ! before a variable or expression

and is &&

or is ||

Try it yourself...

Write the JavaScript expression for 

!W!X!Y + Z + !XZ

(!W!X!Y) + Z + (!XZ)

(!W !X !Y) + Z + (!X Z)

(!W && !X && !Y) + Z + (!X && Z)

(!W && !X && !Y) || Z || (!X && Z)

Show Solution

Tutorial Step G

Write the JavaScript expression for your segment.

Fork this Pen

HTML buttons for keypad

HTML table for 7 segment display

HTML

CSS

  • styles for turning segments on/off
  • styles for defining shape of table cells for the display

JS

behind the scenes code

dec2bcd(dec)

bools2chars(a,b,c,d,e,f,g)

illuminate (ssd)

code we'll change

https://codepen.io/
team/DanR/pen/dyRqVxG

Draw your expression as a circuit & confirm behaviour

!X!Z

W

Y

XZ

A

+

=

+

+

w

x

y

z

!X!Z

XZ

A

!X!Z+W

Y+XZ

!X!Z+W+Y+XZ

TEST: Does it illuminate for 1000?

!X!Z

W

Y

XZ

A

+

=

+

+

w

x

y

z

!X!Z

XZ

!X!Z

W

+

Y

XZ

+

A

Extras

Tables in HTML

Three Tags

<table></table>

<tr></tr>

<td></td>

table

table row

table data element (cell)

Example

<table>
   <tr>
      <td>A</td>
      <td>B</td>
      <td>C</td>
   </tr>
   <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
   </tr>
   <tr>
      <td>4</td>
      <td>5</td>
      <td>6</td>
   </tr>
</table>
A B C
1 2 3
4 5 6

Styling Tables with CSS

Example

        <table>
             <tr class="h10">
                 <td class="w10"></td>
                 <td class="w30 red">A</td>
                 <td class="w10"></td>
             </tr>
             <tr class="h30">
                 <td class="h30 w10 red">F</td>
                 <td class="h30 w30"></td>
                 <td class="h30 w10 red">B</td>
             </tr>
             <tr class="h10">
                 <td class="w10"></td>
                 <td class="w30 red">G</td>
                 <td class="w10"></td>
             </tr>
        </table>
A
F B
G 
.red {background-color: red;}
.clear {background-color: white;}
.h10 {height: 10px;} 
.w10 {width: 10px;}
.h30 {}
.w30 {width: 30px;}