GUI programming
Posted: Fri Sep 20, 2013 8:47 pm
Hi some help with making a GUI driver in ASM(if can C++/C is fine).
And i pmode and it must use the entire screen.
And i pmode and it must use the entire screen.
Code: Select all
#include <sys/api.h>
Code: Select all
#include <sys/window.h>
Code: Select all
gcc myprog.c -lwindow -o myprog
Here's the codeobjectKey windowNew(int processId, const char *title)
Create a new window, owned by the process 'processId', and with the title 'title'. Returns an object key to reference the window, needed by most other window functions below (such as adding components to the window)
int windowSetVisible(objectKey window, int visible)
Tell the windowing system whether to make 'window' visible or not. Non-zero 'visible' means make the window visible. When windows are created, they are not visible by default so you can add components, do layout, set the size, etc.
Code: Select all
#include <sys/api.h>
objectKey window;
void main(void)
{
// Create a new window, and save a global reference to it
window = windowNew(multitaskerGetCurrentProcessId(), "MyProg");
if (window == NULL)
return;
windowSetVisible(window, 1);
while (1);
}
When we create a component, we need to supply some component parameters (defined in <sys/window.h>)objectKey windowNewTextLabel(objectKey parent, const char *text, componentParameters *params)
Get a new text labelComponent to be placed inside the parent object 'parent', with the given component parameters 'params', and using the text string 'text'. If the params 'font' is NULL, the default font will be used.
objectKey windowNewButton(objectKey parent, const char *label, image *buttonImage, componentParameters *params)
Get a new button component to be placed inside the parent object 'parent', with the given component parameters, and with the (optional) label 'label', or the (optional) image 'buttonImage'. Either 'label' or 'buttonImage' can be used, but not both.
Code: Select all
// This structure is needed to describe parameters consistent to all
// window components
typedef struct {
int gridX; // Grid X coordinate
int gridY; // Grid Y coordinate
int gridWidth; // Grid span width
int gridHeight; // Grid span height
int padLeft; //
int padRight; // Pixels of empty space (padding)
int padTop; // around each side of the component
int padBottom; //
int flags; // Attributes - See WINDOW_COMPFLAG_*
componentXOrientation orientationX; // orient_left, orient_center, orient_right
componentYOrientation orientationY; // orient_top, orient_middle, orient_bottom
color foreground; // Foreground drawing color
color background; // Background frawing color
objectKey font; // Font for text
} componentParameters;
Code: Select all
#include <sys/api.h>
#include <sys/window.h>
#include <string.h>
objectKey window;
objectKey okButton;
void main(void)
{
componentParameters params;
// Create a new window, and save a global reference to it
window = windowNew(multitaskerGetCurrentProcessId(), "MyProg");
if (window == NULL)
return;
// Set up the parameters for our label
memset(¶ms, 0, sizeof(componentParameters));
params.gridX = 0;
params.gridY = 0;
params.gridWidth = 1;
params.gridHeight = 1;
// Create the label
windowNewTextLabel(window, "Welcome to my program", ¶ms);
// Reuse the parameters from the label, but change the grid coordinate
params.gridY = 1;
// Create the button, and save a global reference to it
okButton = windowNewButton(window, "OK", NULL, ¶ms);
windowSetVisible(window, 1);
while (1);
}
Lets add some more to our component parameters to fix the layout:void windowDebugLayout(objectKey window)
This function draws grid boxes around all the grid cells containing components (or parts thereof).
Code: Select all
#include <sys/api.h>
#include <sys/window.h>
#include <string.h>
objectKey window;
objectKey okButton;
void main(void)
{
componentParameters params;
// Create a new window, and save a global reference to it
window = windowNew(multitaskerGetCurrentProcessId(), "MyProg");
if (window == NULL)
return;
// Set up the parameters for our label
memset(¶ms, 0, sizeof(componentParameters));
params.gridX = 0;
params.gridY = 0;
params.gridWidth = 1;
params.gridHeight = 1;
params.padTop = 5; // Add some padding
params.padLeft = 5; // around the top,
params.padRight = 5; // left, and bottom
params.orientationX = orient_center; // Center of the cell
params.orientationY = orient_middle; // middle of the cell
// Create the label
windowNewTextLabel(window, "Welcome to my program", ¶ms);
// Reuse the parameters from the label, but change the grid coordinate,
// add some padding on the bottom, and prevent the button from expanding
// to fill its cell
params.gridY = 1;
params.padBottom = 5;
params.flags = (WINDOW_COMPFLAG_FIXEDHEIGHT | WINDOW_COMPFLAG_FIXEDWIDTH);
// Create the button, and save a global reference to it
okButton = windowNewButton(window, "OK", NULL, ¶ms);
//windowDebugLayout(window);
windowSetVisible(window, 1);
while (1);
}
Now I want to add a new Name5 with values, delete Name1 with its values, edit Value1 of Name3 and display the values of Name2.Name1*Value1*Value2
Name2*Value1*Value2
Name3*Value1*Value2
Name4*Value1*Value2
Code: Select all
int kernelConfigRead(const char *, variableList *);
int kernelConfigWrite(const char *, variableList *);
int kernelConfigGet(const char *, const char *, char *, unsigned);
int kernelConfigSet(const char *, const char *, const char *);
int kernelConfigUnset(const char *, const char *);
Code: Select all
int configRead(const char *, variableList *);
int configWrite(const char *, variableList *);
int configGet(const char *, const char *, char *, unsigned);
int configSet(const char *, const char *, const char *);
int configUnset(const char *, const char *);
Code: Select all
icon.name.computer=Computer
icon.computer.image=/system/icons/compicon.ico
icon.computer.command=/programs/computer
This was nice to read... Still waiting for the next installment, whenever you have the timeandymc wrote:I'll start with some general background.
A lot of the GUI basics of Visopsys are built right into the kernel (it is intended to be a "visual" operating system, after all). So, much of what you'll need comes directly from kernel API calls. These calls are for creating and laying out windows, creating the basic GUI components, and interacting with the windowing system. Here's a link to the documentation for these functions:
http://visopsys.org/developers/kernel_API.php#window
To use the API functions in C, you needThere is some additional functionality that comes from a window library. The library has code for things like dialog boxes, composite window components, and runtime event dispatching. Here's the documentation for the library functions:Code: Select all
#include <sys/api.h>
http://visopsys.org/developers/window_library.php
To use the window library in C, you needand you'll need to link the library into your executable with -lwindow, i.e.Code: Select all
#include <sys/window.h>
Here's a simple example. To get started, you'll probably want to create a main window, and make it visible. We'll need 2 function callsCode: Select all
gcc myprog.c -lwindow -o myprog
Here's the codeobjectKey windowNew(int processId, const char *title)
Create a new window, owned by the process 'processId', and with the title 'title'. Returns an object key to reference the window, needed by most other window functions below (such as adding components to the window)
int windowSetVisible(objectKey window, int visible)
Tell the windowing system whether to make 'window' visible or not. Non-zero 'visible' means make the window visible. When windows are created, they are not visible by default so you can add components, do layout, set the size, etc.And here's what we get: Cute, but not too useful yet. We'll have to start putting some components in there.Code: Select all
#include <sys/api.h> objectKey window; void main(void) { // Create a new window, and save a global reference to it window = windowNew(multitaskerGetCurrentProcessId(), "MyProg"); if (window == NULL) return; windowSetVisible(window, 1); while (1); }
There are several different types of basic components:We'll start with a label and a button. Here are the functions for creating them:
- button
- canvas
- checkbox
- divider
- icon
- image
- list (and list item)
- menu (and menu item)
- menu bar
- password field
- progress bar
- radio button
- scrollbar
- slider
- text area
- text field
- text label
When we create a component, we need to supply some component parameters (defined in <sys/window.h>)objectKey windowNewTextLabel(objectKey parent, const char *text, componentParameters *params)
Get a new text labelComponent to be placed inside the parent object 'parent', with the given component parameters 'params', and using the text string 'text'. If the params 'font' is NULL, the default font will be used.
objectKey windowNewButton(objectKey parent, const char *label, image *buttonImage, componentParameters *params)
Get a new button component to be placed inside the parent object 'parent', with the given component parameters, and with the (optional) label 'label', or the (optional) image 'buttonImage'. Either 'label' or 'buttonImage' can be used, but not both.Windows are laid out somewhat like tables in HTML. Each component occupies one grid cell. The gridX and gridY values specify which cell. If the cell should span the width or height of adjacent cells, then gridWidth and gridHeight are used for that. Here's the code now when we add our components:Code: Select all
// This structure is needed to describe parameters consistent to all // window components typedef struct { int gridX; // Grid X coordinate int gridY; // Grid Y coordinate int gridWidth; // Grid span width int gridHeight; // Grid span height int padLeft; // int padRight; // Pixels of empty space (padding) int padTop; // around each side of the component int padBottom; // int flags; // Attributes - See WINDOW_COMPFLAG_* componentXOrientation orientationX; // orient_left, orient_center, orient_right componentYOrientation orientationY; // orient_top, orient_middle, orient_bottom color foreground; // Foreground drawing color color background; // Background frawing color objectKey font; // Font for text } componentParameters;
It doesn't look great, but at least our window now has something in it: The following function can help us to see how the grid layout is being interpreted:Code: Select all
#include <sys/api.h> #include <sys/window.h> #include <string.h> objectKey window; objectKey okButton; void main(void) { componentParameters params; // Create a new window, and save a global reference to it window = windowNew(multitaskerGetCurrentProcessId(), "MyProg"); if (window == NULL) return; // Set up the parameters for our label memset(¶ms, 0, sizeof(componentParameters)); params.gridX = 0; params.gridY = 0; params.gridWidth = 1; params.gridHeight = 1; // Create the label windowNewTextLabel(window, "Welcome to my program", ¶ms); // Reuse the parameters from the label, but change the grid coordinate params.gridY = 1; // Create the button, and save a global reference to it okButton = windowNewButton(window, "OK", NULL, ¶ms); windowSetVisible(window, 1); while (1); }
Lets add some more to our component parameters to fix the layout:void windowDebugLayout(objectKey window)
This function draws grid boxes around all the grid cells containing components (or parts thereof).Here's how it looks now (with and without grid debugging): So there we have some basic window creation. In the next installment, I'll talk about how the runtime event handling works (so that we can make that button do something useful).Code: Select all
#include <sys/api.h> #include <sys/window.h> #include <string.h> objectKey window; objectKey okButton; void main(void) { componentParameters params; // Create a new window, and save a global reference to it window = windowNew(multitaskerGetCurrentProcessId(), "MyProg"); if (window == NULL) return; // Set up the parameters for our label memset(¶ms, 0, sizeof(componentParameters)); params.gridX = 0; params.gridY = 0; params.gridWidth = 1; params.gridHeight = 1; params.padTop = 5; // Add some padding params.padLeft = 5; // around the top, params.padRight = 5; // left, and bottom params.orientationX = orient_center; // Center of the cell params.orientationY = orient_middle; // middle of the cell // Create the label windowNewTextLabel(window, "Welcome to my program", ¶ms); // Reuse the parameters from the label, but change the grid coordinate, // add some padding on the bottom, and prevent the button from expanding // to fill its cell params.gridY = 1; params.padBottom = 5; params.flags = (WINDOW_COMPFLAG_FIXEDHEIGHT | WINDOW_COMPFLAG_FIXEDWIDTH); // Create the button, and save a global reference to it okButton = windowNewButton(window, "OK", NULL, ¶ms); //windowDebugLayout(window); windowSetVisible(window, 1); while (1); }
Hello Andy, when you have time, can you please explain how to do that? It would be very useful.So there we have some basic window creation. In the next installment, I'll talk about how the runtime event handling works (so that we can make that button do something useful).