Jump to content

All Activity

This stream auto-updates     

  1. Today
  2. DavidRM

    Setting Label Cursor

    I wanted a simple hyperlink. So I used a TW3Label, gave it caption, set the underline, gave it an OnClick event, etc. First, I discovered that setting the label's Font.Style to [fsUnderline] didn't work. Instead, I had to dig in the forums and learn to use TextNode.style. What's the point of the Font.Style property if it's not going to set the font style? Second: How do I set the mouse cursor? The "Cursor" property doesn't seem to be doing it. This is what I have: FForgotPassword := TW3Label.Create(Self); FForgotPassword.AutoSize := True; FForgotPassword.AlignText := taCenter; FForgotPassword.Transparent := False; FForgotPassword.Font.Color := clRed; FForgotPassword.Caption := 'Forgot Password?'; FForgotPassword.OnClick := ForgotPasswordClicked; FForgotPassword.TextNode.style.setProperty('text-decoration', 'underline'); FForgotPassword.Cursor := crPointer; On a whim, I just added this: FForgotPassword.TextNode.style.setProperty('cursor', 'pointer'); And that solves my problem. But now I want to know: Is there a reason those other properties exist? Is this a bug? Or am I missing something? Thanks. -David
  3. Czar

    Size of Components at Runtime

    That would be a useful solution
  4. jarto

    Size of Components at Runtime

    This could be made a bit simpler by also making ClientWidth and ClientHeight writable.
  5. Yesterday
  6. DavidRM

    Size of Components at Runtime

    OK. So even with "smart" positioning, the "spaces between" have to be calculated and accounted for. Thanks. -David
  7. jarto

    Size of Components at Runtime

    @DavidRM var Btn1:=TW3Button.Create(ParentPanel); Btn1.Caption:='Ok'; var Btn2:=TW3Button.Create(ParentPanel); Btn2.Caption:='Cancel'; //Create label but don't give it a size var Lab2:=TW3Label.Create(ParentPanel); Lab2.MoveTo(0,0); Lab2.AutoSize:=True; //OnResize will be triggered when we set the label text. Lab2.OnResize:=procedure(Sender: TObject) begin //Resize based on label size and add 40 px for button row var PHeight:=Lab2.Height+40+ParentPanel.Height-ParentPanel.ClientHeight; var PWidth:=Lab2.Width+ParentPanel.Width-ParentPanel.ClientWidth; ParentPanel.SetSize(PWidth,PHeight); //Resize the buttons var BtnWidth:=ParentPanel.ClientWidth div 2; Btn1.SetBounds(0,Lab2.Height,BtnWidth,40); Btn2.SetBounds(BtnWidth,Lab2.Height,BtnWidth,40); end; Lab2.Caption:='A quick brown fox jumped over the lazy dog!'; So, basically we let the label autosize itself and react to it in OnResize. Label's Width and Height returns how much space it takes. When we resize the panel, Width-ClientWidth (and Height-ClientHeight) returns how much space the padding, margin and border takes.
  8. DavidRM

    Size of Components at Runtime

    @jarto OK. How do I set the ClientWidth and ClientHeight without calculating all the padding and margins? For example: I need the ClientWidth of the panel to be wide enough to fit the text of the label. I need the ClientHeight of the panel to be tall enough to fit the label and a row of buttons. And, yes, I would like the current stylesheet to provide the margins and padding between the components. Thanks. -David
  9. jarto

    Size of Components at Runtime

    @DavidRM Your code seems to have a lot of calculations about padding. Smart Mobile Studio uses positionmode pmSmart as default, which means that the RTL takes care of margins and paddings. I made a post about it here: https://forums.smartmobilestudio.com/topic/4423-smart-299-alpha-is-here/?do=findComment&comment=22250 Edit: Also added a new page to documentation about this: https://smartmobilestudio.com/documentation/getting-started/smart-mobile-studio-box-model-positionmode-margin-border-padding-etc/ I'll be happy to help if you have any questions.
  10. Czar

    Size of Components at Runtime

    Wouldn't that boil down to css? I open sms drop down a tw3button at 128x32. If I leave the border then seems a bit bigger - if I remove border then 128x32
  11. Last week
  12. DavidRM

    Size of Components at Runtime

    I'm arranging controls at runtime. But I can't seem to puzzle out what the actual size of a control is. I can find what it *says* it is (read the Height property for instance), but that seems to be only a guess or something. So what am I doing wrong here? procedure TShowMessageForm.UpdateUI; var tMetrics: TW3TextMetric; padding, border: integer; panelWidth, panelHeight, numButtons, buttonWidth, buttonLeft, buttonTotal: integer; begin var CSSHandle := TW3CustomBrowserAPI.GetComputedStylesFor(FMessagePanel.Handle); if (CSSHandle) then begin padding := w3_getPropertyAsInt(CSSHandle, 'paddingLeft'); border := w3_getPropertyAsInt(CSSHandle, 'borderLeft'); end else begin padding := 2; border := 2; end; FMessageLabel.Caption := FMessageText; tMetrics := FMessageLabel.MeasureText(FMessageText + 'XXX'); FMessageLabel.SetSize(border + padding + tMetrics.tmWidth + padding + border, border + padding + tMetrics.tmHeight + padding + border); FMessageLabel.Top := 0; FMessageLabel.Left := 0; panelWidth := (border + padding) + FMessageLabel.Width + (padding + border); panelHeight := (border + padding) + FMessageLabel.Height + (padding + border); if ButtonsVisible then begin numButtons := ButtonCount; buttonWidth := SizeButtons; buttonTotal := (buttonWidth * numButtons) + (padding * (numButtons - 1)); panelWidth := Max(panelWidth, (padding + border) + buttonTotal + (padding + border)); buttonLeft := (panelWidth - buttonTotal) div 2; if FMessageOKButton.Visible then begin FMessageOKButton.Left := buttonLeft; FMessageOKButton.Top := panelHeight + padding; Inc(buttonLeft, FMessageOKButton.Width + padding); end; if FMessageCancelButton.Visible then begin FMessageCancelButton.Left := buttonLeft; FMessageCancelButton.Top := panelHeight + padding; Inc(buttonLeft, FMessageCancelButton.Width + padding); end; panelHeight += FMessageOKButton.Height + padding; end; FMessagePanel.Width := panelWidth; FMessagePanel.Height := panelHeight; end; I'm guessing I'm going about adding in the padding and border widths wrong. The buttons are the worst offenders. Just because they *say* their X wide doesn't mean they are. They are *really* X+(some-random-effing-N). I appreciate any assistance. -David
  13. DavidRM

    ShowModal and Measuring Text

    In the ShowModal, the "init" callback is called before FormActivated is called. Thus, my calling UpdateUI in the init callback is... premature. By adding an OnActivated event handler to the ShowMessageForm, which calls UpdateUI (removing the call from the init callback), my original code works as expected. -David
  14. DavidRM

    ShowModal and Measuring Text

    I'm pretty certain it's something in the Application.ShowModal code this is the root of this issue.
  15. DavidRM

    ShowModal and Measuring Text

    That achieves *a* result but doesn't solve the problem. The first time through, MeasureText returns an actual result (as in, not 0,0). That allows the panel's SetBounds to do something. But never again. From thereon, it only returns 0,0. What's a decent workaround, do you figure? -David
  16. lynkfs

    ShowModal and Measuring Text

    the problem is in your UpdateUI proc this works : FMessageLabel.Caption := FMessageText; tMetrics := FMessageLabel.MeasureText(FMessageText); FMessageLabel.SetSize(tMetrics.tmWidth, Round(tMetrics.tmHeight * 1.5)); FMessageLabel.Top := padding; FMessageLabel.Left := padding; //FMessagePanel.Width := FMessageLabel.Width + padding * 4 + margin * 2 + border * 2; FMessagePanel.Width := tMetrics.tmWidth + padding * 4 + margin * 2 + border * 2; //FMessagePanel.Height := FMessageLabel.Height + padding * 4 + margin * 2 + border * 2; FMessagePanel.Height := tMetrics.tmHeight + padding * 4 + margin * 2 + border * 2; //FMessagePanel.SetBounds((ClientWidth - FMessagePanel.Width) div 2, // (ClientHeight - FMessagePanel.Height) div 2, // FMessagePanel.Width, FMessagePanel.Height); FMessagePanel.SetBounds((ClientWidth - FMessagePanel.Width) div 2, (ClientHeight - FMessagePanel.Height) div 2, tMetrics.tmWidth + padding * 4 + margin * 2 + border * 2, tMetrics.tmHeight + padding * 4 + margin * 2 + border * 2); basically the SetSize call on line 3 results in FMessageLabel.Width and Height having a value of zero (wrong), however in the DOM both FMessageLabel.handle.style.width and height at that point show correct values (i.e. '124px'). My guess is that this has to do with dimensioning a child element before the parent is ready. Maybe @jarto could shine some light on that. Anyway, dimensioning everything on the basis of a separate var (tMetrics) rather than on fluid parent / child element dimensions overcomes that problem.
  17. Czar

    ShowModal and Measuring Text

    I assume you have checked the obvious, that FMessageText is not blank? What happens if you fudge a size, does work correctly otherwise?
  18. DavidRM

    ShowModal and Measuring Text

    I'm trying to create a simple modal-ish "show message". Here is the ShowMessageForm: type TShowMessageForm = class(TW3Form) private {$I 'ShowMessageForm:intf'} FMessagePanel: TW3Panel; FMessageLabel: TW3Label; // FMessageText: string; protected procedure InitializeForm; override; procedure InitializeObject; override; procedure Resize; override; public procedure UpdateUI; property MessageText: string read FMessageText write FMessageText; end; implementation { TShowMessageForm } uses SmartCL.Fonts.Detector; procedure TShowMessageForm.InitializeForm; begin inherited; // this is a good place to initialize components end; procedure TShowMessageForm.InitializeObject; begin inherited; {$I 'ShowMessageForm:impl'} FMessagePanel := TW3Panel.Create(Self); FMessagePanel.Name := 'MessagePanel'; FMessageLabel := TW3Label.Create(FMessagePanel); FMessageLabel.AutoSize := False; FMessageLabel.Caption := '...'; end; procedure TShowMessageForm.Resize; begin inherited; UpdateUI; end; procedure TShowMessageForm.UpdateUI; var tMetrics: TW3TextMetric; padding, margin, border: integer; panelWidth: integer; begin var CSSHandle := TW3CustomBrowserAPI.GetComputedStylesFor(FMessagePanel.Handle); if (CSSHandle) then begin padding := w3_getPropertyAsInt(CSSHandle, 'paddingLeft'); margin := w3_getPropertyAsInt(CSSHandle, 'marginLeft'); border := w3_getPropertyAsInt(CSSHandle, 'borderLeft'); end else begin padding := 2; margin := 2; border := 2; end; FMessageLabel.Caption := FMessageText; tMetrics := FMessageLabel.MeasureText(FMessageText); FMessageLabel.SetSize(tMetrics.tmWidth, Round(tMetrics.tmHeight * 1.5)); panelWidth := FMessageLabel.Width + padding * 2 + margin * 2 + border * 2; FMessageLabel.Top := padding; FMessageLabel.Left := padding; FMessagePanel.Width := FMessageLabel.Width + padding * 4 + margin * 2 + border * 2; FMessagePanel.Height := FMessageLabel.Height + padding * 4 + margin * 2 + border * 2; FMessagePanel.SetBounds((ClientWidth - FMessagePanel.Width) div 2, (ClientHeight - FMessagePanel.Height) div 2, FMessagePanel.Width, FMessagePanel.Height); end; <snark>As you can see, I've learned my lesson and don't use the form designer or the so-called "layout manager", finding my life is much less painful just creating and arranging the components at run time.</snark> Here is the ShowModal call: procedure ShowMessage(const aMessage: string); begin HideMessage; _MessageShowing := True; Application.ShowModal('ShowMessageForm', 'MessagePanel', '', lambda (dialog) TShowMessageForm(dialog).MessageText := aMessage; TShowMessageForm(dialog).UpdateUI; end, nil, nil); end; procedure HideMessage; begin if _MessageShowing then Application.HideModal(mrCancel); _MessageShowing := False; end; The problem is the call to MeasureText in UpdateUI. It returns 0,0 for the width, height. What am I missing? -David
  19. jarto

    tw3slider mouseup

    Yeah, true, as that component internally uses OnMouseDown, OnMouseMove and OnMouseUp. Edit: Fix will be in the next update.
  20. Czar

    inheritance

    I managed to a solution which is probably better var Context := JCanvasRenderingContext2D(LBitmap.canvas.context.handle.getContext('2d')); Context.font:="75px verdana"; Context.shadowColor:="black"; Context.shadowBlur:=7; Context.lineWidth:=5; Context.strokeText("TEstMe",25,100); Context.shadowBlur:=0; Context.fillStyle:="white"; Context.fillText("TEstMe",25,100);
  21. Czar

    inheritance

    I have been working on rendering fonts onto the canvas. After getting a few pointers I managed to get what I am after. However, I have been hacking direct into the smartcl.legacy procedure TCanvas.TextOut(dx,dy: integer;aText: string;aColor:TColor); var mTemp: Variant; begin mTemp:=FDC.fillStyle; FDC.fillStyle:=ColorToWebStr(aColor); FDC.lineWidth:=4; FDC.shadowBlur := 7; FDC.shadowColor := 'black'; FDC.strokeText(aText,dx,dy); FDC.shadowBlur:=0; FDC.fillStyle:="white"; FDC.FillText(aText,dx,dy); FDC.fillStyle:=mTemp; I thought i could simply inherit type TMyCanvas = class(Tcanvas) procedure MyTextOut(dx,dy: integer;aText: string;aColor:TColor); end; procedure TMyCanvas.MyTextOut(dx,dy: integer;aText: string;aColor:TColor); var mTemp: Variant; begin FDC.lineWidth:=4; FDC.shadowBlur := 7; FDC.shadowColor := 'black'; FDC.strokeText(aText,dx,dy); FDC.shadowBlur:=0; FDC.fillStyle:="white"; FDC.FillText(aText,dx,dy); FDC.fillStyle:=mTemp; end; However, I get an error FDC not visible in this scope. What basic 101 am I violating? Syntax Error: Member symbol "FDC" is not visible from this scope [line: 54, column: 10, file: Form1]
  22. Czar

    tw3slider mouseup

    if you have a tw3slider and you add a mouseup event then it breaks the component. Once you have clicked on it you cannot stop it reacting to the mouse.
  23. lynkfs

    canvas font rendering

    the canvas font property is the same as the css font property : it is a shorthand form for specifying 'font-family', 'font-size', 'font-style', 'font-variant' and 'font-weight' in 1 statement. so "font: bold 24px verdana" specifies font-weight, font-size and font-family. all possible font attribute values at https://developer.mozilla.org/en-US/docs/Web/CSS/font and .../font-family
  24. Czar

    canvas font rendering

    The bit that I don't follow is how do I go from say this function drawStroked(text, x, y) { ctx.font = "80px Sans-serif" ctx.strokeStyle = 'black'; ctx.lineWidth = 8; ctx.strokeText(text, x, y); ctx.fillStyle = 'white'; ctx.fillText(text, x, y); } drawStroked("37°", 50, 150); to this LBitmap.Canvas.Context.DC.font := 'bold 24px verdana '; where can I find out what "'bold 24px verdana '; " can be replaced with?
  25. lynkfs

    canvas font rendering

    yep if you google 'canvas font shadow' or 'canvas font effects' you'll get plenty of links to what effects you can achieve with text on canvas. All of these are doable in SMS. To get really out there, have a look at blotter.js - a library which allows you to create amazing text on canvas effects https://codepen.io/RMKNGY/pen/bKJxvd
  26. COMFIED

    Translucent Panel Blur Effect

    Thanks. I'll try out the combination of opacity+stack blur.. I think it should work!
  27. Czar

    Translucent Panel Blur Effect

    Would the ImageFilters demo get you there? The stack blur could be used with opacity etc
  28. COMFIED

    Translucent Panel Blur Effect

    Is there a simple way to get an image blur effect on a translucent panel placed over a background image? I am trying to make translucent pop up notifications over a game with lots of graphics - similar to attached .
  1. Load more activity
×