Jump to content

Best way to achieve scorecard UI


Wicket

Recommended Posts

Hi all,

I am trying to create a golf scorecard layout, much like the example image below. What would be the correct control to start with? All of the data required will be stored in a database. Is this possible to do in a UniDBGrid?

Thanks for any help.

image.thumb.png.3ffd1de5c8f4b628e68be5a9254552f2.png

 

 

Link to comment
Share on other sites

Thanks for the tips guys - I agree using a HTMLFrame is probably the correct way to do this. However, I have time constraints and I am not familiar with how to implement this. Maybe this is something I can learn when I have a bit more time. :)

As the scorecard format is static - I have been looking at using a UniStringGrid, and populating the data cell by cell manually - I think this will be enough for now.

Link to comment
Share on other sites

Took this as an exercise for myself. So has only done this a bit quick and dirty. But an example how this as well can be solved the UniGui way, with Layout, panels and labels.... 

1471511747_exampleGolfScorecardlayout.thumb.gif.21e5e3daeca5f13eec7b1bbbd182179d.gif

So not thought at all around data - as that should be retrieved from the db. But basically the above is created in the formCreate event. (Also the scorecard data should be processed at this time, so the manual entry above should not be in...)

procedure TMainForm.UniFormCreate(Sender: TObject);
var r,c:integer;              //Row & Col
     SimplePanel:TUniSimplePanel;
     L:TUniLabel;              //The label
     rc:Integer;               // row * 100 + col, for labelname etc
     s:string;
begin
     for r := 1 to 5 do
     for c := 0 to 21 do
     begin
          rc:=r*100+c;
          SimplePanel:=TUniSimplePanel.Create(Self);
          with Simplepanel do
          begin
               if C=0 then
               begin
                    width:=70;
                    LayoutAttribs.Padding:='8';
               end
               else
                    Width:=45;
               Height:=45;
               Parent:=panelBoxes;
               if c=21 then
                    Color:=$949392
               else
                    Color:=$C5DCDE;
               Layout:='vbox';
               LayoutConfig.Margin:='0 5 5 0';
               LayoutAttribs.Pack:='center';
          end;
          L:=TUniLabel.Create(Self);
          with L do
          begin
               Parent:=SimplePanel;
               name:='lb'+rc.ToString;
               Alignment:=taCenter;
               LayoutConfig.Width:='100%';
               if (r=1) then
               begin
                    Font.Style:=[fsBold];
                    Font.Size:=12;
               end;
               if c=0 then
               begin
                    Font.color:=$1B2E7D;
                    Font.Size:=12;
                    Font.Style:=[fsBold];
                    Alignment:=taLeftJustify;
               end
               else if (c=10) or (c=20) then
               begin
                    Font.color:=$1B2E7D;
                    Font.Size:=12;
                    Font.Style:=[fsBold];
               end
               else if (c=21) then
               begin
                    Font.color:=clwhite;
                    Font.Size:=12;
                    Font.Style:=[fsBold];
               end;
               case rc of
                    100 : Caption:='Hole';
                    200 : Caption:='Yards';
                    300 : Caption:='SI';
                    400 : Caption:='Par';
                    500 : Caption:='Score';
                    101..109 : Caption:=c.tostring;
                    111..119 : Caption:=IntToStr(c-1);
                    110, 310 : Caption :='OUT';
                    120, 320 : Caption :='IN';
                    121 : Caption :='';
//                    else Caption:=rc.ToString;
               end;
          end;
     end;
end;


GolfScorecardLayout.zip

 

Link to comment
Share on other sites

@alfr - That's really impressive and elegant!

However, I am using the touch controls and some of the layout options like 'table' are not available - so I struggled to get the desired result for the mobile touch controls using the UniGUI method.

That is why I went down the route of using a HTML table in a UniHTMLFrame. @epos4u I will post my solution when I've finished. Thanks for the input everyone!

Link to comment
Share on other sites

1 hour ago, Wicket said:

@alfr - That's really impressive and elegant!

However, I am using the touch controls and some of the layout options like 'table' are not available - so I struggled to get the desired result for the mobile touch controls using the UniGUI method.

That is why I went down the route of using a HTML table in a UniHTMLFrame. @epos4u I will post my solution when I've finished. Thanks for the input everyone!

Thank you :)

Link to comment
Share on other sites

Yes, I've hade some trouble with the mobile version as well in the passed... It's not as forgiving and proven as the desktop version. So I prefer to use desktop. 

But anyhow did a mobile version of the Scorecard layout as well...  As you say mobile version has some limitations that would be good if they were sorted. 

image.thumb.png.b318b2aaa607ecdd896731f33bcacdec.png

GolfScorecardLayout_mobile.zip

Link to comment
Share on other sites

Please sign in to comment

You will be able to leave a comment after signing in



Sign In Now
×
×
  • Create New...