Programming with twenty buttons.
William Overington
Copyright 2001 William Overington
Monday 16 July 2001
This document introduces some software to simulate the minimum set of input events of a DVB-MHP terminal as if they were on a hand held infra-red control device. These are digits 0 through to 9, up down left right, enter, teletext, four colour buttons.
This makes a total of 20 buttons. They need to be fitted into space 512 pixels wide, though up and down can perhaps be arranged one above the other, so that a user friendly layout is achieved.
As I wish to keep the 25 pixel by 25 pixel square buttons, try this design.
Place the colour buttons above the digits.
Suppose that I use the notion of a 16 pixel edge around the buttons and n pixels between buttons. The value of n is to be decided depending on the space available. Two rows of buttons is 50 pixels, a top and bottom edge is 32 pixels and n pixels between the rows all added together is 82 + n pixels. So start the simulation of the hand held infra-red control device at 400 - 82 - n pixels down. This being because although the last pixel down is on row 399 of the display, both the start row and the end row are counted in determining which rows are drawn upon when drawing a filled rectangle or a button. So, if a filled rectangle were 1 row in height, it would start at row 399. If, say, that 1 is the specific value of a variable v, then that 399 for the start row is found from the expression 400 - v. If another filled rectangle were 2 rows in height, it would start at row 398. If, say, that 2 is the specific value of a variable v, then that 398 for the start row is again found from the expression 400 - v. So a filled rectangle 82 + n pixels in height has the start row of 400 - 82 - n.
Then the top row of buttons starts at 400 - 66 - n pixels down and the bottom row of buttons at 359 pixels down.
Yet what is to be the value of n?
It is determined by taking the largest whole number possible from the following.
The simulation of the hand held infra-red control device is to be 512 pixels wide. There are 15 button widths and 14 gaps between buttons to be accommodated and also a left hand end piece and a right hand end piece. The end pieces are each 16 pixels wide. So that means that a width of 480 pixels is available for the buttons and the gaps between the buttons. 15 buttons at 25 pixels each is 375 (= 15 x 25) pixels, so that leaves 105 (= 480 - 375) pixels for the 14 gaps between the buttons.
105 / 14 is 7.5 exactly, so we may use a value of 7 pixels for each gap, with 7 pixels left over. Let us distribute these 7 pixels such that 4 are to the left and two are to the right of the four direction keys on the simulated hand held infra-red control device.
Returning to the matter of the vertical layout, the value of n is 7, so that means that the top row of the simulation of the hand held infra-red control device is to be at row 311 (= 400 - 82 - 7). The top row of buttons is to start at row 327 (= 400 - 66 - 7) and the bottom row of buttons at row 359, the 359 being independent of the value of n.
Start each row of buttons with a top left corner of 16 pixels horizontally and increase by 32 (= 25 + 7) pixels for each button. That will place the digit buttons and the colour buttons effectively.
The enter button and the teletext button can be in the bottom row at the right hand end. So start at 439 (= 471 - 32) and 471 (= 512 - 16 - 25).
So it is now a matter of locating the four arrow buttons, up, down, left, right. The vertical coordinates of the top left corners are fairly straightforward. They are 327 for up and 359 for down, so that these buttons align with the colour buttons and the digit buttons respectively. Averaging 327 and 359 gives 343 for the vertical coordinate of the top left corner of the left and right buttons.
The horizontal coordinates of the top left corners of the up, down, left, right buttons are found by adding 68 (= 32 + 4 + 32), 68 (= 32 + 4 + 32) being the same again as the up and down buttons are located directly vertically with respect to each other and so their top left corners have the same horizontal coordinate, 36 (= 32 + 4), 100 (= 32 + 4 + 32 + 32) respectively to the horizontal coordinate of the top left corner of the 9 button.
The table shows the coordinate values for the top left corners of the twenty buttons using the above layout.
| button | x |
y
|
red
|
16
|
327
|
green
|
48
|
327
|
yellow
|
80
|
327
|
blue
|
112
|
327
|
0
|
16
|
359
|
1
|
48
|
359
|
2
|
80
|
359
|
3
|
112
|
359
|
4
|
144
|
359
|
5
|
176
|
359
|
6
|
208
|
359
|
7
|
240
|
359
|
8
|
272
|
359
|
9
|
304
|
359
|
up
|
372
|
327
|
down
|
372
|
359
|
left
|
340
|
343
|
right
|
404
|
343
|
enter
|
439
|
359
|
teletext
|
471
|
359
| |
The web based simulation shows the above layout in action. Only a simple program is used. In fact it places the value of obeycode for the button on the simulated screen display. The obeycode values chosen for the buttons are entirely my own design choice and do not derive from the DVB-MHP specification.
As the framework might well be used in research in developing programs for Astrolabe Channel, I have taken the opportunity to include a polyglot compatibility section.
I have also added the donothing() function that does nothing. The purpose of this is that sometimes in a program one has a sequence of if statements each of which has various computations that are carried out if the condition of the if statement is met and there is also in the underlying algorithm for the program logically a situation where one must do nothing. The donothing() function allows one to include the logical case in the software and point out that that logical case does nothing and that the programmer has accounted for that case and not accidentally left it out, thereby avoiding any possibility of a situation existing whereupon some other programmer might spend time trying to evaluate what should be done for that case, only to find out after considerable effort that nothing needs to be done for that case. I find that when I am programming the use of the donothing() function also often helps me in preparing my original program.
I would like to draw the attention of readers to one point though and that is that I am unaware at present whether the programmer of a Java program to run upon the DVB-MHP system may use the enter and teletext buttons as user input events within the program or whether they are reserved for uses by the platform, such as, perhaps, to exit from an application program. So, for the moment, although the enter and teletext buttons are active in this particular demonstration program, in general they are not used in simulations of software for Astrolabe Channel. Hopefully that uncertainty will be resolved one way or the other.
Here is a link to viewing the web based simulation. A Java enabled browser is required.
The web based simulation of programming with twenty buttons.
Here is the source code of the Java applet.
import java.awt.*;
import java.awt.event.*;
public class ast00501 extends java.applet.Applet implements
ActionListener
// Software written by William Overington
// WOverington@ngo.globalnet.co.uk
// 16 July 2001
// Copyright 2001 William Overington
//
{
int obeycode;
int storedobeycode;
Button colourButton1 = new Button("");
Button colourButton2 = new Button("");
Button colourButton3 = new Button("");
Button colourButton4 = new Button("");
Button digitButton0 = new Button("0");
Button digitButton1 = new Button("1");
Button digitButton2 = new Button("2");
Button digitButton3 = new Button("3");
Button digitButton4 = new Button("4");
Button digitButton5 = new Button("5");
Button digitButton6 = new Button("6");
Button digitButton7 = new Button("7");
Button digitButton8 = new Button("8");
Button digitButton9 = new Button("9");
Button upButton = new Button("^");
Button downButton = new Button("v");
Button leftButton = new Button("<");
Button rightButton = new Button(">");
Button enterButton = new Button("E");
Button teletextButton = new Button("T");
// polyglot compatibility section starts
String result="The value is ";
// polyglot compatibility section finishes
Font buttonsfont,displayfont;
public void init()
{
setLayout(null);
setBounds(0,0,512,400);
buttonsfont = new Font("SansSerif", Font.PLAIN, 18);
displayfont = new Font("SansSerif", Font.PLAIN, 24);
setFont(buttonsfont);
colourButton1.addActionListener(this);
colourButton1.setLocation(16,327);
colourButton1.setSize(25,25);
colourButton1.setBackground(Color.red);
add(colourButton1);
colourButton2.addActionListener(this);
colourButton2.setLocation(48,327);
colourButton2.setSize(25,25);
colourButton2.setBackground(Color.green);
add(colourButton2);
colourButton3.addActionListener(this);
colourButton3.setLocation(80,327);
colourButton3.setSize(25,25);
colourButton3.setBackground(Color.yellow);
add(colourButton3);
colourButton4.addActionListener(this);
colourButton4.setLocation(112,327);
colourButton4.setSize(25,25);
colourButton4.setBackground(Color.blue);
add(colourButton4);
digitButton0.addActionListener(this);
digitButton0.setLocation(16,359);
digitButton0.setSize(25,25);
digitButton0.setBackground(Color.lightGray);
add(digitButton0);
digitButton1.addActionListener(this);
digitButton1.setLocation(48,359);
digitButton1.setSize(25,25);
digitButton1.setBackground(Color.lightGray);
add(digitButton1);
digitButton2.addActionListener(this);
digitButton2.setLocation(80,359);
digitButton2.setSize(25,25);
digitButton2.setBackground(Color.lightGray);
add(digitButton2);
digitButton3.addActionListener(this);
digitButton3.setLocation(112,359);
digitButton3.setSize(25,25);
digitButton3.setBackground(Color.lightGray);
add(digitButton3);
digitButton4.addActionListener(this);
digitButton4.setLocation(144,359);
digitButton4.setSize(25,25);
digitButton4.setBackground(Color.lightGray);
add(digitButton4);
digitButton5.addActionListener(this);
digitButton5.setLocation(176,359);
digitButton5.setSize(25,25);
digitButton5.setBackground(Color.lightGray);
add(digitButton5);
digitButton6.addActionListener(this);
digitButton6.setLocation(208,359);
digitButton6.setSize(25,25);
digitButton6.setBackground(Color.lightGray);
add(digitButton6);
digitButton7.addActionListener(this);
digitButton7.setLocation(240,359);
digitButton7.setSize(25,25);
digitButton7.setBackground(Color.lightGray);
add(digitButton7);
digitButton8.addActionListener(this);
digitButton8.setLocation(272,359);
digitButton8.setSize(25,25);
digitButton8.setBackground(Color.lightGray);
add(digitButton8);
digitButton9.addActionListener(this);
digitButton9.setLocation(304,359);
digitButton9.setSize(25,25);
digitButton9.setBackground(Color.lightGray);
add(digitButton9);
upButton.addActionListener(this);
upButton.setLocation(372,327);
upButton.setSize(25,25);
upButton.setBackground(Color.lightGray);
add(upButton);
downButton.addActionListener(this);
downButton.setLocation(372,359);
downButton.setSize(25,25);
downButton.setBackground(Color.lightGray);
add(downButton);
leftButton.addActionListener(this);
leftButton.setLocation(340,343);
leftButton.setSize(25,25);
leftButton.setBackground(Color.lightGray);
add(leftButton);
rightButton.addActionListener(this);
rightButton.setLocation(404,343);
rightButton.setSize(25,25);
rightButton.setBackground(Color.lightGray);
add(rightButton);
enterButton.addActionListener(this);
enterButton.setLocation(439,359);
enterButton.setSize(25,25);
enterButton.setBackground(Color.lightGray);
add(enterButton);
teletextButton.addActionListener(this);
teletextButton.setLocation(471,359);
teletextButton.setSize(25,25);
teletextButton.setBackground(Color.lightGray);
add(teletextButton);
setBackground(Color.black);
obeycode=1;
storedobeycode=1;
}
public void actionPerformed(ActionEvent event)
{
Object source = event.getSource();
if (source == colourButton1)
{
obeycode=51;
repaint();
}
else
if (source == colourButton2)
{
obeycode=52;
repaint();
}
else
if (source == colourButton3)
{
obeycode=53;
repaint();
}
else
if (source == colourButton4)
{
obeycode=54;
repaint();
}
else
if (source == digitButton0)
{
obeycode=20;
repaint();
}
else
if (source == digitButton1)
{
obeycode=21;
repaint();
}
else
if (source == digitButton2)
{
obeycode=22;
repaint();
}
else
if (source == digitButton3)
{
obeycode=23;
repaint();
}
else
if (source == digitButton4)
{
obeycode=24;
repaint();
}
else
if (source == digitButton5)
{
obeycode=25;
repaint();
}
else
if (source == digitButton6)
{
obeycode=26;
repaint();
}
else
if (source == digitButton7)
{
obeycode=27;
repaint();
}
else
if (source == digitButton8)
{
obeycode=28;
repaint();
}
else
if (source == digitButton9)
{
obeycode=29;
repaint();
}
else
if (source == upButton)
{
obeycode=61;
repaint();
}
else
if (source == downButton)
{
obeycode=62;
repaint();
}
else
if (source == leftButton)
{
obeycode=63;
repaint();
}
else
if (source == rightButton)
{
obeycode=64;
repaint();
}
else
if (source == enterButton)
{
obeycode=91;
repaint();
}
else
if (source == teletextButton)
{
obeycode=92;
repaint();
}
}
public void paint(Graphics screen)
{
storedobeycode=obeycode;
screen.setFont(displayfont);
if (obeycode == 1)
{
screen.setColor(Color.white);
screen.fillRect(0,288,512,112);
screen.setColor(Color.gray);
screen.fillRoundRect(0,311,512,89,20,20);
screen.clipRect(0,0,512,288);
}
screen.setColor(Color.yellow);
screen.fillRect(0,0,512,200);
screen.setColor(Color.red);
screen.drawString("" + result + obeycode,50,100);
// result in English is "The value is "
obeycode=1;
}
public void update(Graphics screen)
{
paint(screen);
}
private void donothing()
{
// does nothing
}
}
The question that I still need to resolve is how to write a Java program that produces upon a DVB-MHP system the same graphic demonstration that appears in the upper panel of this web based simulation.
Astrolabe Channel
Copyright 2001 William Overington
This file is accessible as follows.