Scrollable menu/dialog

Grovkillen · Post by **Grovkillen** » Thu Jun 22, 2023 5:21 am

I'm trying to find a way of having a fixed size dialog with a scrollable "panel" which let me have a somewhat long list of options. The HTMLViewer allows for scrollable contents but it won't let me place anything inside that can act as buttons/boxes/lists etc. It's only used for visual contents, not UI elements.

Is there anyone who have made something like this, if so - how?

I see that I can have "OnImageClick" but it will give me the same "obj" value no matter which image I click, and the "button" value isn't populated with anything. The "OnObjectClick" isn't doing anything when clicking as far as I can see.

EDIT: the button reference seems to be the mouse button used when clicking (at least when I read the documents for the HTMLViewer found in the link I posted below).

Grovkillen · Post by **Grovkillen** » Thu Jun 22, 2023 6:00 am

A test script to show what I mean by the image click not being very exact when giving back the object reference.

Code: Select all

Dialog>Dialog1
object Dialog1: TForm
  ClientHeight = 120
  ClientWidth = 250
  object MSHTMLViewer1: tMSHTMLViewer
    Left = 0
    Top = 0
    Width = 200
    Height = 60
  end
  object MSHTMLViewer2: tMSHTMLViewer
    Left = 00
    Top = 60
    Width = 200
    Height = 60
  end
end
EndDialog>Dialog1

SetDialogProperty>Dialog1,MSHTMLViewer1,HTML,<img src="error" width="50" height="50"><img src="error" width="50" height="50"><img src="error" width="50" height="50">
SetDialogProperty>Dialog1,MSHTMLViewer2,HTML,<img src="error" width="50" height="50"><img src="error" width="50" height="50"><img src="error" width="50" height="50">
AddDialogHandler>Dialog1,MSHTMLViewer1,OnImageClick,IMAGE_IS_CLICKED
AddDialogHandler>Dialog1,MSHTMLViewer2,OnImageClick,IMAGE_IS_CLICKED

Show>dialog1,r

SRT>IMAGE_IS_CLICKED
**BREAKPOINT**

END>IMAGE_IS_CLICKED

Grovkillen · Post by **Grovkillen** » Thu Jun 22, 2023 6:12 am

It seems like the HTMLViewer developer has release a new version: https://sourceforge.net/projects/htmlviewer/files/

Grovkillen · Post by **Grovkillen** » Thu Jun 22, 2023 6:25 am

Thanks to the documentation found in the link above I could get the OnObjectClick to work. It's triggered when FORM objects are clicked. Each type in the form is giving me back a different object reference but as you can see the two text input field both give the same reference number.

Code: Select all


Dialog>Dialog1
object Dialog1: TForm
  ClientHeight = 120
  ClientWidth = 200
  object MSHTMLViewer1: tMSHTMLViewer
    Left = 0
    Top = 0
    Width = 200
    Height = 120
  end
end
EndDialog>Dialog1

LabelToVar>form_html,TEMP_html,1,1,*/
SetDialogProperty>Dialog1,MSHTMLViewer1,HTML,TEMP_html
AddDialogHandler>Dialog1,MSHTMLViewer1,OnObjectClick,OBJECT_IS_CLICKED

Show>dialog1,r

SRT>OBJECT_IS_CLICKED
Message>OBJECT_IS_CLICKED_obj
END>OBJECT_IS_CLICKED

/*
form_html:
<form>
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br>
  <input type="submit" value="Submit">
</form>
*/

Grovkillen · Post by **Grovkillen** » Thu Jun 22, 2023 6:34 am

Ok, this is almost working but it seems to crash MS.

Code: Select all


Dialog>Dialog1
object Dialog1: TForm
  ClientHeight = 120
  ClientWidth = 200
  object MSHTMLViewer1: tMSHTMLViewer
    Left = 0
    Top = 0
    Width = 200
    Height = 120
  end
end
EndDialog>Dialog1

LabelToVar>form_html,TEMP_html,1,1,*/
SetDialogProperty>Dialog1,MSHTMLViewer1,HTML,TEMP_html
AddDialogHandler>Dialog1,MSHTMLViewer1,OnObjectClick,OBJECT_IS_CLICKED

Show>dialog1,r

SRT>OBJECT_IS_CLICKED
**BREAKPOINT**
Message>OBJECT_IS_CLICKED_onclick
END>OBJECT_IS_CLICKED

/*
form_html:
<form>
  <input type="button" onclick="test1" value="Button 1">
  <br>
  <input type="button" onclick="test2" value="Button 2">
</form>
*/

If this crash could be prevented we'd have a HTMLViewer that can act as an user interface as well as displaying HTML.

Grovkillen · Post by **Grovkillen** » Thu Jun 22, 2023 6:41 am

It seems like the crash happens because the HTMLViewer is trying to process the code found in the onclick attribute. Simply adding a "console.log(..)" seems to prevent this crash. Yay! I found my hack

Code: Select all

Dialog>Dialog1
object Dialog1: TForm
  ClientHeight = 120
  ClientWidth = 200
  object MSHTMLViewer1: tMSHTMLViewer
    Left = 0
    Top = 0
    Width = 200
    Height = 120
  end
end
EndDialog>Dialog1
LabelToVar>form_html,TEMP_html,1,1,*/
SetDialogProperty>Dialog1,MSHTMLViewer1,HTML,TEMP_html
AddDialogHandler>Dialog1,MSHTMLViewer1,OnObjectClick,OBJECT_IS_CLICKED
Show>dialog1,r
SRT>OBJECT_IS_CLICKED
Message>OBJECT_IS_CLICKED_onclick
END>OBJECT_IS_CLICKED

/*
form_html:
<form>
  <input type="button" onclick="console.log('test 1')" value="Button 1">
  <br>
  <input type="button" onclick="console.log('test 2')" value="Button 2">
</form>
*/

Grovkillen · Post by **Grovkillen** » Mon Jun 26, 2023 12:00 pm

I've done some testing and the problem seems to be not related to if the onclick code is executable or not. A simple string will work, for a while, too. Perhaps it's something inside the implementation of this component? I would be super happy if we could get this forms to work as shown in my sample code. That way we can have a dynamic input dialog which is scrollable.

This seems to work every time:

Code: Select all

Dialog>Dialog1
object Dialog1: TForm
  ClientHeight = 120
  ClientWidth = 200
  object MSHTMLViewer1: tMSHTMLViewer
    Left = 0
    Top = 0
    Width = 200
    Height = 120
  end
end
EndDialog>Dialog1
LabelToVar>form_html,TEMP_html,1,1,*/
SetDialogProperty>Dialog1,MSHTMLViewer1,HTML,TEMP_html
AddDialogHandler>Dialog1,MSHTMLViewer1,OnObjectClick,OBJECT_IS_CLICKED

//ESC=close app
OnEvent>KEY_DOWN,VK27,0,CLOSE_APP

Show>dialog1

Label>RESTART_LOOP
Wait>0.01
Goto>RESTART_LOOP

SRT>OBJECT_IS_CLICKED
Message>OBJECT_IS_CLICKED_onclick
END>OBJECT_IS_CLICKED

SRT>CLOSE_APP
  Exit>
END>CLOSE_APP

/*
form_html:
<form>
  <input type="button" onclick="button 1 clicked" value="Button 1">
</form>
*/

But adding a button (or some other input) will most of the time crash the app... but not always.

Code: Select all

/*
form_html:
<form>
  <input type="button" onclick="button 1 clicked" value="Button 1">
  <input type="button" onclick="button 2 clicked" value="Button 2">
</form>
*/

Grovkillen · Post by **Grovkillen** » Mon Jun 26, 2023 12:42 pm

If I compile it to an exe I see that the ..._OBJ variable is unassigned (according to the warning message when I click one of the buttons).

Grovkillen · Post by **Grovkillen** » Mon Jun 26, 2023 12:45 pm

This code seems to fix the issue but I will get an error message when I close the app down:

Code: Select all

Dialog>Dialog1
object Dialog1: TForm
  ClientHeight = 120
  ClientWidth = 200
  object MSHTMLViewer1: tMSHTMLViewer
    Left = 0
    Top = 0
    Width = 200
    Height = 120
  end
end
EndDialog>Dialog1
Let>OBJECT_IS_CLICKED_Obj=null
LabelToVar>form_html,TEMP_html,1,1,*/
SetDialogProperty>Dialog1,MSHTMLViewer1,HTML,TEMP_html
AddDialogHandler>Dialog1,MSHTMLViewer1,OnObjectClick,OBJECT_IS_CLICKED
AddDialogHandler>Dialog1,,OnClose,CLOSE_APP

//ESC=close app
OnEvent>KEY_DOWN,VK27,0,CLOSE_APP

Show>dialog1

Label>RESTART_LOOP
Wait>0.01
Goto>RESTART_LOOP

SRT>OBJECT_IS_CLICKED
Message>OBJECT_IS_CLICKED_onclick
END>OBJECT_IS_CLICKED

SRT>CLOSE_APP
  Exit>
END>CLOSE_APP

/*
form_html:
<form>
  <input type="button" onclick="button 1 clicked" value="Button 1">
  <input type="button" onclick="button 2 clicked" value="Button 2">
</form>
*/

Grovkillen · Post by **Grovkillen** » Mon Jun 26, 2023 1:04 pm

More example code:

Code: Select all

Dialog>Dialog1
object Dialog1: TForm
  ClientWidth = 250
  ClientHeight = 120
  object MSHTMLViewer1: tMSHTMLViewer
    Left = 0
    Top = 0
    Width = 250
    Height = 120
  end
end
EndDialog>Dialog1
LabelToVar>form_html,TEMP_html,1,1,*/
SetDialogProperty>Dialog1,MSHTMLViewer1,HTML,TEMP_html
Let>OBJECT_IS_CLICKED_Obj=null
Let>OBJECT_IS_CLICKED_onclick=null
AddDialogHandler>Dialog1,MSHTMLViewer1,OnObjectClick,OBJECT_IS_CLICKED
AddDialogHandler>Dialog1,,OnClose,CLOSE_APP

//ESC=close app
OnEvent>KEY_DOWN,VK27,0,CLOSE_APP

Show>dialog1

Label>RESTART_LOOP
Wait>0.01
Goto>RESTART_LOOP

SRT>OBJECT_IS_CLICKED
**BREAKPOINT**
Message>OBJECT_IS_CLICKED_onclick
END>OBJECT_IS_CLICKED

SRT>CLOSE_APP
  Exit>
END>CLOSE_APP

/*
form_html:
<form>
  <input type="button" onclick="Button 1 clicked" value="Button 1">
  <hr>
  <input type="button" onclick="Button 2 clicked" value="Button 2">
  <hr>
  <input type="checkbox" onclick="Checkbox 1 clicked">&nbsp;Checkbox 1 <-- might crash!<br>
  <input type="checkbox" onclick="Checkbox 2 clicked">&nbsp;Checkbox 2<br>
  <input type="checkbox" onclick="Checkbox 3 clicked">&nbsp;Checkbox 3
  <hr>
  <input type="radio" name="group1" onclick="Radio button 1 clicked">&nbsp;Radio button 1<br>
  <input type="radio" name="group1" onclick="Radio button 2 clicked">&nbsp;Radio button 2<br>
  <input type="radio" name="group1" onclick="Radio button 3 clicked">&nbsp;Radio button 3
  <hr>
  <input type="radio" name="group2" onclick="Radio button A clicked">&nbsp;Radio button A<br>
  <input type="radio" name="group2" onclick="Radio button B clicked">&nbsp;Radio button B<br>
  <input type="radio" name="group2" onclick="Radio button C clicked">&nbsp;Radio button C
  <hr>
  <input type="text" value="John">
</form>
*/

Grovkillen · Post by **Grovkillen** » Mon Jun 26, 2023 1:14 pm

Added a trigger for the submit button:

Code: Select all

Dialog>Dialog1
object Dialog1: TForm
  ClientWidth = 250
  ClientHeight = 120
  object MSHTMLViewer1: tMSHTMLViewer
    Left = 0
    Top = 0
    Width = 250
    Height = 120
  end
end
EndDialog>Dialog1
LabelToVar>form_html,TEMP_html,1,1,*/
SetDialogProperty>Dialog1,MSHTMLViewer1,HTML,TEMP_html
Let>OBJECT_IS_CLICKED_Obj=null
Let>OBJECT_IS_CLICKED_onclick=null
AddDialogHandler>Dialog1,MSHTMLViewer1,OnObjectClick,OBJECT_IS_CLICKED
Let>FORM_IS_SUBMITTED_Results=null
AddDialogHandler>Dialog1,MSHTMLViewer1,OnFormSubmit,FORM_IS_SUBMITTED
AddDialogHandler>Dialog1,,OnClose,CLOSE_APP

//ESC=close app
OnEvent>KEY_DOWN,VK27,0,CLOSE_APP

Show>dialog1

Label>RESTART_LOOP
Wait>0.01
Goto>RESTART_LOOP

SRT>OBJECT_IS_CLICKED
Message>OBJECT_IS_CLICKED_onclick
END>OBJECT_IS_CLICKED

SRT>FORM_IS_SUBMITTED
**BREAKPOINT**
END>FORM_IS_SUBMITTED

SRT>CLOSE_APP
  Exit>
END>CLOSE_APP

/*
form_html:
<form>
  <input type="button" name="b1" onclick="Button 1 clicked" value="Button 1">
  <hr>
  <input type="button" name="b2" onclick="Button 2 clicked" value="Button 2">
  <hr>
  <input type="checkbox" name="check1" value="c1" onclick="Checkbox 1 clicked">&nbsp;Checkbox 1 <-- might crash!<br>
  <input type="checkbox" name="check2" value="c2" onclick="Checkbox 2 clicked">&nbsp;Checkbox 2<br>
  <input type="checkbox" name="check3" value="c3" onclick="Checkbox 3 clicked">&nbsp;Checkbox 3
  <hr>
  <input type="radio" name="group1" value="r1" onclick="Radio button 1 clicked">&nbsp;Radio button 1<br>
  <input type="radio" name="group1" value="r2" onclick="Radio button 2 clicked">&nbsp;Radio button 2<br>
  <input type="radio" name="group1" value="r3" onclick="Radio button 3 clicked">&nbsp;Radio button 3
  <hr>
  <input type="radio" name="group2" value="rA" onclick="Radio button A clicked">&nbsp;Radio button A<br>
  <input type="radio" name="group2" value="rB" onclick="Radio button B clicked">&nbsp;Radio button B<br>
  <input type="radio" name="group2" value="rC" onclick="Radio button C clicked">&nbsp;Radio button C
  <hr>
  <input type="text" name="text1" value="John">
  <hr>
  <input type="submit" value="Submit">
</form>
*/

Grovkillen · Post by **Grovkillen** » Thu Feb 22, 2024 2:08 pm

In the help file under "TFormSubmitEvent" we see that the HTMLViewer have the following parameters set when triggered by a form submit:

Action
Target
EncType
Method
Results

These are automatically populated and all except the "Results" parameter work as intended:

Code: Select all

Dialog>Dialog1
object Dialog1: TForm
  ClientWidth = 250
  ClientHeight = 120
  object MSHTMLViewer1: tMSHTMLViewer
    Left = 0
    Top = 0
    Width = 250
    Height = 120
  end
end
EndDialog>Dialog1
LabelToVar>form_html,TEMP_html,1,1,*/
SetDialogProperty>Dialog1,MSHTMLViewer1,HTML,TEMP_html
AddDialogHandler>Dialog1,MSHTMLViewer1,OnFormSubmit,FORM_IS_SUBMITTED
AddDialogHandler>Dialog1,,OnClose,CLOSE_APP
//ESC=close app
OnEvent>KEY_DOWN,VK27,0,CLOSE_APP

Show>dialog1

Label>RESTART_LOOP
Wait>0.01
Goto>RESTART_LOOP

SRT>FORM_IS_SUBMITTED
**BREAKPOINT**
/*
FORM_IS_SUBMITTED_METHOD=post <-- only post/get are accepted input values
FORM_IS_SUBMITTED_ACTION=custom action
FORM_IS_SUBMITTED_TARGET=custom target
FORM_IS_SUBMITTED_ENCTYPE=custom enctype
FORM_IS_SUBMITTED_RESULTS=fname=John
lname=Johnson <-- expected value but returned as "22780"
*/
END>FORM_IS_SUBMITTED

SRT>CLOSE_APP
  Exit>
END>CLOSE_APP
/*
form_html:
<form action="custom action" method="post" target="custom target" enctype="custom enctype">
  <input type="text" name="fname" value="John">
  <input type="text" name="lname" value="Johnson">
  <input type="submit" value="Submit">
</form>
*/

Please investigate if you could add the proper values to the results variable. It's a very powerful way of getting input values and seem to be not to far away if only correctly implemented.

According to the documentation this also work with radio buttons, checkboxes and selections.

JRL · Post by **JRL** » Thu Feb 22, 2024 6:51 pm

I can't help thinking I'm missing something.

I'm trying to find a way of having a fixed size dialog with a scrollable "panel" which let me have a somewhat long list of options. The HTMLViewer allows for scrollable contents but it won't let me place anything inside that can act as buttons/boxes/lists etc. It's only used for visual contents, not UI elements.

Is there anyone who have made something like this, if so - how?

BorderStyle = bsSingle
AutoScroll = True

Button three exists so the scroll bars start at the top rather than at the bottom. Remove button three and test to see what I mean.

Code: Select all

Dialog>Dialog1
object Dialog1: TForm
  Left = 661
  Top = 207
  HelpContext = 5000
  BorderIcons = [biSystemMenu]
  BorderStyle = bsSingle
  Caption = 'No Resize with Scrollbars'
  AutoScroll = True
  ClientHeight = 417
  ClientWidth = 400
  Color = clBtnFace
  Font.Charset = DEFAULT_CHARSET
  Font.Color = clWindowText
  Font.Height = -11
  Font.Name = 'MS Sans Serif'
  Font.Style = []
  OldCreateOrder = True
  ShowHint = True
  OnTaskBar = False
  PixelsPerInch = 96
  TextHeight = 13
  object Panel1: TPanel
    Left = 0
    Top = 0
    Width = 800
    Height = 800
    Caption = 'Panel1'
    Color = 16777200
    ParentBackground = False
    TabOrder = 1
    object MSButton1: tMSButton
      Left = 35
      Top = 40
      Width = 100
      Height = 25
      Caption = 'MSButton1'
      TabOrder = 1
      DoBrowse = False
      BrowseStyle = fbOpen
    end
    object MSButton2: tMSButton
      Left = 35
      Top = 750
      Width = 100
      Height = 25
      Caption = 'MSButton2'
      TabOrder = 0
      DoBrowse = False
      BrowseStyle = fbOpen
    end
  end
  object MSButton3: tMSButton
    Left = 0
    Top = 0
    Width = 1
    Height = 1
    Caption = 'MSButton3'
    TabOrder = 0
    DoBrowse = False
    BrowseStyle = fbOpen
  end
end
EndDialog>Dialog1

AddDialogHandler>Dialog1,MSButton1,OnClick,srtClick(1)
AddDialogHandler>Dialog1,MSButton2,OnClick,srtClick(2)

Show>Dialog1,res1

SRT>srtClick
  MDL>Button%srtClick_var_1% pressed
END>srtClick

Grovkillen · Post by **Grovkillen** » Thu Feb 22, 2024 8:16 pm

I got the scroll menu working using a HTMLViewer element but now I want/wish/hope to get the results fetched when clicking submit.

Grovkillen · Post by **Grovkillen** » Thu Mar 07, 2024 10:31 am

Is this something that is being considered to be "fixed"? If not I would like to know because that puts me in another direction if I need to make dialogs for every single input instead of relying on a more dynamic HTML form.

Grovkillen wrote: ↑
Thu Feb 22, 2024 2:08 pm
In the help file under "TFormSubmitEvent" we see that the HTMLViewer have the following parameters set when triggered by a form submit:

Action
Target
EncType
Method
Results

These are automatically populated and all except the "Results" parameter work as intended:
Code: Select all
Dialog>Dialog1
object Dialog1: TForm
  ClientWidth = 250
  ClientHeight = 120
  object MSHTMLViewer1: tMSHTMLViewer
    Left = 0
    Top = 0
    Width = 250
    Height = 120
  end
end
EndDialog>Dialog1
LabelToVar>form_html,TEMP_html,1,1,*/
SetDialogProperty>Dialog1,MSHTMLViewer1,HTML,TEMP_html
AddDialogHandler>Dialog1,MSHTMLViewer1,OnFormSubmit,FORM_IS_SUBMITTED
AddDialogHandler>Dialog1,,OnClose,CLOSE_APP
//ESC=close app
OnEvent>KEY_DOWN,VK27,0,CLOSE_APP

Show>dialog1

Label>RESTART_LOOP
Wait>0.01
Goto>RESTART_LOOP

SRT>FORM_IS_SUBMITTED
**BREAKPOINT**
/*
FORM_IS_SUBMITTED_METHOD=post <-- only post/get are accepted input values
FORM_IS_SUBMITTED_ACTION=custom action
FORM_IS_SUBMITTED_TARGET=custom target
FORM_IS_SUBMITTED_ENCTYPE=custom enctype
FORM_IS_SUBMITTED_RESULTS=fname=John
lname=Johnson <-- expected value but returned as "22780"
*/
END>FORM_IS_SUBMITTED

SRT>CLOSE_APP
  Exit>
END>CLOSE_APP
/*
form_html:
<form action="custom action" method="post" target="custom target" enctype="custom enctype">
  <input type="text" name="fname" value="John">
  <input type="text" name="lname" value="Johnson">
  <input type="submit" value="Submit">
</form>
*/
Please investigate if you could add the proper values to the results variable. It's a very powerful way of getting input values and seem to be not to far away if only correctly implemented.

According to the documentation this also work with radio buttons, checkboxes and selections.

Scrollable menu/dialog

Scrollable menu/dialog

Re: Scrollable menu/dialog

Re: Scrollable menu/dialog

Re: Scrollable menu/dialog

Re: Scrollable menu/dialog

Re: Scrollable menu/dialog

Re: Scrollable menu/dialog

Re: Scrollable menu/dialog

Re: Scrollable menu/dialog

Re: Scrollable menu/dialog

Re: Scrollable menu/dialog

Re: Scrollable menu/dialog

Re: Scrollable menu/dialog

Re: Scrollable menu/dialog

Re: Scrollable menu/dialog