Your 2 pictures are a good start, but need to see more really. Don't concern yourself with the BC547, since your display board is already a working unit, it is likely it will already have transistors of some sort on it.
To answer your question what are the BC547 needed for : Your 7 segment display has 7 individual LEDS, each taking approx 15mA to illuminate to full brightness, if you display '8' all segments will be lit and total anode/cathode current would be 7*15mA=105mA . What is the maximum pin current of your microcontroller?
This is likely not relevant since your display board is already a functional display, all you need to do is tap off the signal wires and ground and couple them up to your Arduino. However, imagine that you wanted your Arduino to drive that same display, then those transistors are not only required because your Arduino has a limit per pin of 40mA, but if you wanted to get creative, you could also drive the LED at variable brightness, not just 'full on'.
digitalRead() is involved, although there are other ways, that would be the easiest for you to play and learn .....
The problem you immediately face, is whether the 1,2,3,4 pins are active High or active Lo, not that it is a problem, but whichever way around they are, it will affect your programming.
example....
#define inPin1 12
#define inPin2 13
#define inPin3 14
#define inPin4 15
#define inPina 16
#define inPinb 17
#define inPinc 18
#define inPind 19
#define inPine 20
#define inPinf 21
#define inPing 22
#define inPindp 23
int units, tens, hundreds, thousands, finalvalue, number;
bool val1, val2, val3, val4, a, b, c, d, e, f, g, dp;
int readsegments()
{ // a
a = digitalRead(inPina); // _
b = digitalRead(inPinb); // f /g/ b
// etc for all the pins // e /_/ c
f = digitalRead(inPinf); // d
g = digitalRead(inPing);
if ( a && b && c && d && e && f && !g) return 0;
if ( !a && b && c && !d && !e && !f && !g) return 1;
if ( a && b && !c && d && e && !f && g) return 2;
//etc for all digits
if ( a && b && c && !d && !e && f && g) return 9;
}
void setup() {
// put your setup code here, to run once:
}
void loop() {
val1 = digitalRead(inPin1); // =1's cathode/anode ? 1000's cathode/anode
val2 = digitalRead(inPin2); // =10's cathode/anode ? 100's cathode/anode
val3 = digitalRead(inPin3); // =100's cathode/anode ? 10's cathode/anode
val4 = digitalRead(inPin4); // =1000's cathode/anode ? 1's cathode/anode
if (val1 == 1) // 1= active high 0=active low
{
number = readsegments();
units = number;
}
if (val2 == 1) // 1= active high 0=active low
{
number = readsegments();
tens = number;
}
if (val3 == 1) // 1= active high 0=active low
{
number = readsegments();
hundreds = number;
}
if (val4 == 1) // 1= active high 0=active low
{
number = readsegments();
thousands = number;
}
finalvalue = thousands + hundreds + tens + units;
}
You are only expecting 1 of the 1,2,3,4 pins to be high (or low) at the same time, the remaining 3 pins will be low (or high).
The example code is fraught with problems, for example there is no protection built in for if the number changes when you are only half way through reading the 4 digits..... There is no action taken for decimal point or -ve numbers.... But you should have enough of an idea now to get you started :
Regards,
Graham