Recent

Author Topic: Component with horizontal scroll buttons  (Read 1520 times)

JuhaManninen

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 4536
  • I like bugs.
Component with horizontal scroll buttons
« on: October 12, 2024, 12:04:07 pm »
Does anybody know of a Panel like component which can scroll its child components or pictures horizontally using buttons in its left and right edges?
Something like this Javascript component :

https://www.testkarts.com/assets/images/horizontal-card-with-arrow-2e1f1d8d6370ce94946a991d4fc0e67c.webp

It would replace the TPageControl used in component palette which has many problems. See :
https://gitlab.com/freepascal.org/lazarus/lazarus/-/issues/21498
https://gitlab.com/freepascal.org/lazarus/lazarus/-/issues/41169

There is a related bug in TCoolbar, too.
Mostly Lazarus trunk and FPC 3.2 on Manjaro Linux 64-bit.

wp

  • Hero Member
  • *****
  • Posts: 12406
Re: Component with horizontal scroll buttons
« Reply #1 on: October 12, 2024, 12:34:14 pm »
I don't know whether some third-party package has it for Lazarus. But Delphi has a TPageScroller which seems to do what you need:
https://docwiki.embarcadero.com/Libraries/Sydney/en/Vcl.ComCtrls.TPageScroller

vfclists

  • Hero Member
  • *****
  • Posts: 1146
    • HowTos Considered Harmful?
Re: Component with horizontal scroll buttons
« Reply #2 on: October 12, 2024, 05:33:48 pm »
I asked a such a question not too long ago and it didn't get much love - https://forum.lazarus.freepascal.org/index.php/topic,68649.0.html.

When I noticed wp's response I thought it was an answer to my question.

Perhaps it might get more attention coming from a highly esteemed member of the Lazarus establishment :) :)
Lazarus 3.0/FPC 3.2.2

JuhaManninen

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 4536
  • I like bugs.
Re: Component with horizontal scroll buttons
« Reply #3 on: October 12, 2024, 11:48:54 pm »
I don't know whether some third-party package has it for Lazarus. But Delphi has a TPageScroller which seems to do what you need:
https://docwiki.embarcadero.com/Libraries/Sydney/en/Vcl.ComCtrls.TPageScroller
Thanks. It is a wrapper to a Win32 Common Control.

When I noticed wp's response I thought it was an answer to my question.
Yes, but only if you use Delphi on Windows.
TPageScroller should be implemented in LCL. Do other native widgetsets have such a control?
If not then it could be made from TCustomPanel and the scroll buttons could be drawn there.
Anybody?
Mostly Lazarus trunk and FPC 3.2 on Manjaro Linux 64-bit.

jamie

  • Hero Member
  • *****
  • Posts: 6683
Re: Component with horizontal scroll buttons
« Reply #4 on: October 13, 2024, 09:35:49 pm »
This worth anything ?
https://wiki.delphi-jedi.org/wiki/JVCL_Help:TJvPageScroller


 I guess I jumped to quick, it's a subclass from the Delphi unit.

 Anyways, I don't see a real problem in implementing that. The problem I see is where does the Arrows live? Are they confined to the control itself or are they living as another sub-control attached to it?

  Scrolling the view is a little tricky and the only way I know how to do that without widget issues is to offset a panel within a panel so that it hides the contents as you scroll the view. This will prevent standard scrollbars to be used.

« Last Edit: October 13, 2024, 09:42:20 pm by jamie »
The only true wisdom is knowing you know nothing

eldonfsr

  • Hero Member
  • *****
  • Posts: 517
Re: Component with horizontal scroll buttons
« Reply #5 on: October 15, 2024, 05:41:09 pm »
TpageScroller is not enable on lazarus i search and i don't found in all components wher is locate that...

wp

  • Hero Member
  • *****
  • Posts: 12406
Re: Component with horizontal scroll buttons
« Reply #6 on: October 16, 2024, 11:24:29 pm »
I am attaching a "TLazPageScroller" component which essentially is a panel for a control (toolbar) to be scrolled horizontally. There are two speedbuttons at the left and right side of the scroller component which normally are hidden. When the inserted toolbar is wider than the space defined by the scroller one or both speedbuttons become visible and allow scrolling the toolbar to the corresponding direction by clicking. The property ScrollDistance determines the distance in pixels by which the toolbar is moved per click. 0 or negative means: scroll by pages. An imagelist can be attached to the scroller to provide user-defined icons for the scroll buttons (Images, ImageIndexUp, ImageIndexDown).

The component was written purely on the basis of the LCL, no widgetset-specific code, and it thus should work on all widgetsets (but I tested it only on Windows, so far). High-dpi should be supported, but this is untested, too.

I did not have Delphi compatibility in mind, therefore I named the component TLazPageScroller rather than Delphi's TPageScroller. Don't know, maybe it fits on the "Misc" palette of the IDE?

The component code is in the attached unit pgscroller along with a runtime demo project. Installation is not required, so far.
« Last Edit: October 17, 2024, 12:16:31 am by wp »

vfclists

  • Hero Member
  • *****
  • Posts: 1146
    • HowTos Considered Harmful?
Re: Component with horizontal scroll buttons
« Reply #7 on: October 17, 2024, 10:32:19 am »
I am attaching a "TLazPageScroller" component which essentially is a panel for a control (toolbar) to be scrolled horizontally. There are two speedbuttons at the left and right side of the scroller component which normally are hidden. When the inserted toolbar is wider than the space defined by the scroller one or both speedbuttons become visible and allow scrolling the toolbar to the corresponding direction by clicking. The property ScrollDistance determines the distance in pixels by which the toolbar is moved per click. 0 or negative means: scroll by pages. An imagelist can be attached to the scroller to provide user-defined icons for the scroll buttons (Images, ImageIndexUp, ImageIndexDown).

The component was written purely on the basis of the LCL, no widgetset-specific code, and it thus should work on all widgetsets (but I tested it only on Windows, so far). High-dpi should be supported, but this is untested, too.

I did not have Delphi compatibility in mind, therefore I named the component TLazPageScroller rather than Delphi's TPageScroller. Don't know, maybe it fits on the "Misc" palette of the IDE?

The component code is in the attached unit pgscroller along with a runtime demo project. Installation is not required, so far.

Thanks. For me it is something to learn from.

I tested it in Debian Linux in both Gtk2 and Qt5 and it worked perfectly fine.
Lazarus 3.0/FPC 3.2.2

eldonfsr

  • Hero Member
  • *****
  • Posts: 517
Re: Component with horizontal scroll buttons
« Reply #8 on: October 17, 2024, 03:05:31 pm »
Wow i testing look great and simple , Thanks so much... windows lazarus 3.4


JuhaManninen

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 4536
  • I like bugs.
Re: Component with horizontal scroll buttons
« Reply #9 on: October 19, 2024, 12:45:17 pm »
wp, that is impressive. :)
I am busy sorting and packing carrots and other veggies and wouldn't have energy creating such a component now.

Your example embeds a Toolbar + ToolButtons. Maybe it would work equally well with a Panel + SpeedButtons, replacing the PageControl + SpeedButtons used by the Component palette now.

I did not have Delphi compatibility in mind, therefore I named the component TLazPageScroller rather than Delphi's TPageScroller.
Your approach is different from the Delphi TPageScroller Com Component. You embed another LCL component, set its position and update the buttons. Clever.
Thus no Delphi compatible TPageScroller, That is OK.
[Edit] Actually the Delphi's component also has a property "Control". Does it use the same design idea? I don't have Delphi myself now to test it.
A Delphi compatible TPageScroller would be nice of course.

Quote
Don't know, maybe it fits on the "Misc" palette of the IDE?
Or LazControls because it is not Delphi compatible.
« Last Edit: October 19, 2024, 01:31:24 pm by JuhaManninen »
Mostly Lazarus trunk and FPC 3.2 on Manjaro Linux 64-bit.

n7800

  • Full Member
  • ***
  • Posts: 166
Re: Component with horizontal scroll buttons
« Reply #10 on: October 19, 2024, 03:19:08 pm »
I haven't looked at the code yet, but does it support line wrapping? IDECoolBar wraps icons to a new line when "IDE Options > Environment > Window > Show complete component palette" is checked (by default): screenshot.

rvk

  • Hero Member
  • *****
  • Posts: 6480
Re: Component with horizontal scroll buttons
« Reply #11 on: October 19, 2024, 03:57:06 pm »
Does anybody know of a Panel like component which can scroll its child components or pictures horizontally using buttons in its left and right edges?
Something like this Javascript component :

https://www.testkarts.com/assets/images/horizontal-card-with-arrow-2e1f1d8d6370ce94946a991d4fc0e67c.webp

Isn't this doable with TScrollBox?

Something like a TPanel, with a narrow vertical button at the left and right aligned and a TSCrollBox in the middle (Client-aligned).
But because you want the buttons to control the scroll, you would need to disable the horizontal scrollbar of the TScrollBox, without loosing the actual scroll capabilities.
(you can scroll the TScrollBox through ScrollBy(Delta) in code.)

Edit: Just made this in 60 seconds. Working TPanel which scroll everything within with the buttons on the side. Inside is a TSCrollBox with the scrollbars disabled. This could easily be turned in a custom component (with some visual enhancements).

« Last Edit: October 19, 2024, 04:03:48 pm by rvk »

vfclists

  • Hero Member
  • *****
  • Posts: 1146
    • HowTos Considered Harmful?
Re: Component with horizontal scroll buttons
« Reply #12 on: October 19, 2024, 03:58:32 pm »
I haven't looked at the code yet, but does it support line wrapping? IDECoolBar wraps icons to a new line when "IDE Options > Environment > Window > Show complete component palette" is checked (by default): screenshot.

The idea of this component is to scroll rather than wrap, to avoid reducing the working space available.
Lazarus 3.0/FPC 3.2.2

JuhaManninen

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 4536
  • I like bugs.
Re: Component with horizontal scroll buttons
« Reply #13 on: October 19, 2024, 04:04:32 pm »
Isn't this doable with TScrollBox?

Something like a TPanel, with a narrow vertical button at the left and right aligned and a TSCrollBox in the middle (Client-aligned).
But because you want the buttons to control the scroll, you would need to disable the horizontal scrollbar of the TScrollBox, without loosing the actual scroll capabilities.
(you can scroll the TScrollBox through ScrollBy(Delta) in code.)
A Panel is better. We don't want any Scrollbars. The arrow buttons must not be visible all the time but only when there is something to scroll.
TPageScroller also supports vertical orientation although our Palette does not need it.
Mostly Lazarus trunk and FPC 3.2 on Manjaro Linux 64-bit.

rvk

  • Hero Member
  • *****
  • Posts: 6480
Re: Component with horizontal scroll buttons
« Reply #14 on: October 19, 2024, 04:06:17 pm »
A Panel is better. We don't want any Scrollbars. The arrow buttons must not be visible all the time but only when there is something to scroll.
TPageScroller also supports vertical orientation although our Palette does not need it.
I just edited my previous post. Tried a TPanel with TScrollBox inside. You can disable the scrollbars for the TScrollBox without loosing the ability to scroll. The buttons could automatically be hidden if there is nothing to scroll in the TScrollBox (as does the TScrollBox do itself).

Edit: I just noticed a bug in Lazarus. The TScrollBox.ScrollBy doesn't correctly refresh after scrolling the box.
If you scroll with the scrollbar, after making that one visible, the scrolling is correctly.
Only seems to happen with a TImage on the TScrollBox. Other components will work fine when using TScrollBox.ScrollBy.
« Last Edit: October 19, 2024, 04:19:14 pm by rvk »

 

TinyPortal © 2005-2018