The new (awesome) HTMLViewer feature: HTML tricks

Example scripts and tips (replaces Old Scripts & Tips archive)

Moderators: JRL, Dorian (MJT support), Phil Pendlebury

Post Reply
User avatar
Grovkillen
Automation Wizard
Posts: 1132
Joined: Fri Aug 10, 2012 2:38 pm
Location: Bräcke, Sweden
Contact:
Contact Grovkillen

The new (awesome) HTMLViewer feature: HTML tricks

Post by Grovkillen » Fri Mar 21, 2014 9:48 am

An example on how to do more complex stuff using HTMLViewer component found in 14.1.

Found the HTML code here>>

The code:

Code: Select all


Dialog>Dialog1
object Dialog1: TForm
  Left = 1535
  Top = 104
  HelpContext = 5000
  BorderIcons = [biSystemMenu]
  Caption = 'CustomDialog'
  ClientHeight = 401
  ClientWidth = 532
  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 MSHTMLViewer1: tMSHTMLViewer
    Left = 7
    Top = 9
    Width = 522
    Height = 384
    TabOrder = 0
    BorderStyle = htFocused
    DefFontName = 'Times New Roman'
    DefPreFontName = 'Courier New'
    HistoryMaxCount = 0
    NoSelect = False
    PrintMarginBottom = 2.000000000000000000
    PrintMarginLeft = 2.000000000000000000
    PrintMarginRight = 2.000000000000000000
    PrintMarginTop = 2.000000000000000000
    PrintScale = 1.000000000000000000
  end
end
EndDialog>Dialog1

LabelToVar>HTML1,HTML_CODE
/*
HTML1:
<!DOCTYPE html>
<style>

.chart div {
  font: 10px sans-serif;
  background-color: steelblue;
  text-align: right;
  padding: 3px;
  margin: 1px;
  color: white;
}

</style>
<div class="chart">
  <div style="width: 40px;">4</div>
  <div style="width: 80px;">8</div>
  <div style="width: 150px;">15</div>
  <div style="width: 160px;">16</div>
  <div style="width: 230px;">23</div>
  <div style="width: 420px;">42</div>
</div>*/
SetDialogProperty>Dialog1,MSHTMLViewer1,HTML,HTML_CODE

Show>Dialog1,r


It's also possible to display GIF-images... super nice to have while loading something in the background. The script does not have to call any function to have a spinning icon displaying during fetching of data etc.
Let>ME=%Script%

Running: 15.0.27
version history
Top
User avatar
Grovkillen
Automation Wizard
Posts: 1132
Joined: Fri Aug 10, 2012 2:38 pm
Location: Bräcke, Sweden
Contact:
Contact Grovkillen

Post by Grovkillen » Tue Apr 08, 2014 5:25 pm

Here's some simple use of and

Code: Select all


Dialog>Dialog1
object Dialog1: TForm
  Left = 640
  Top = 191
  HelpContext = 5000
  BorderIcons = [biSystemMenu]
  Caption = 'CustomDialog'
  ClientHeight = 141
  ClientWidth = 218
  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 MSHTMLViewer1: tMSHTMLViewer
    Left = 7
    Top = 9
    Width = 202
    Height = 120
    TabOrder = 0
    BorderStyle = htFocused
    DefFontName = 'Times New Roman'
    DefPreFontName = 'Courier New'
    HistoryMaxCount = 0
    NoSelect = False
    PrintMarginBottom = 2.000000000000000000
    PrintMarginLeft = 2.000000000000000000
    PrintMarginRight = 2.000000000000000000
    PrintMarginTop = 2.000000000000000000
    PrintScale = 1.000000000000000000
  end
end
EndDialog>Dialog1

Let>HTML_CODE=First number is superscript <sup>1</sup>. Second number is subscript <sub>2</sub>. This way I can write H<sub>2</sub>O really simple, or Pythagoras theorem as a<sup>2</sup> = b<sup>2</sup>+c<sup>2</sup>!
SetDialogProperty>Dialog1,MSHTMLViewer1,HTML,HTML_CODE

Show>Dialog1,r
Let>ME=%Script%

Running: 15.0.27
version history
Top
User avatar
Grovkillen
Automation Wizard
Posts: 1132
Joined: Fri Aug 10, 2012 2:38 pm
Location: Bräcke, Sweden
Contact:
Contact Grovkillen

Post by Grovkillen » Wed Apr 09, 2014 9:04 am

Here's an example using text color.

Code: Select all


Dialog>Dialog1
object Dialog1: TForm
  Left = 640
  Top = 191
  HelpContext = 5000
  BorderIcons = [biSystemMenu]
  Caption = 'CustomDialog'
  ClientHeight = 136
  ClientWidth = 391
  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 MSHTMLViewer1: tMSHTMLViewer
    Left = 7
    Top = 41
    Width = 378
    Height = 88
    TabOrder = 0
    BorderStyle = htFocused
    DefFontName = 'Times New Roman'
    DefPreFontName = 'Courier New'
    HistoryMaxCount = 0
    NoSelect = False
    PrintMarginBottom = 2.000000000000000000
    PrintMarginLeft = 2.000000000000000000
    PrintMarginRight = 2.000000000000000000
    PrintMarginTop = 2.000000000000000000
    PrintScale = 1.000000000000000000
  end
  object MSComboBox1: tMSComboBox
    Left = 129
    Top = 17
    Width = 145
    Height = 21
    ItemIndex = 0
    TabOrder = 9
    Text = 'green'
    Items.Strings = (
      'green'
      'yellow'
      'black'
      'red'
      'blue')
    ListText = 'green'#13#10'yellow'#13#10'black'#13#10'red'#13#10'blue'#13#10
  end
end
EndDialog>Dialog1

GoSub>GET_NEW_COLOR

AddDialogHandler>Dialog1,MSComboBox1,OnChange,GET_NEW_COLOR

Show>Dialog1,r

SRT>GET_NEW_COLOR
//"http://www.w3schools.com/html/html_colornames.asp" for color names
    GetDialogProperty>Dialog1,MSComboBox1,Text,COLOR_TEXT
    Let>HTML_CODE=This word is <font color=%COLOR_TEXT%>%COLOR_TEXT%</font>.
    SetDialogProperty>Dialog1,MSHTMLViewer1,HTML,HTML_CODE
END>GET_NEW_COLOR
Let>ME=%Script%

Running: 15.0.27
version history
Top
User avatar
jpuziano
Automation Wizard
Posts: 1085
Joined: Sat Oct 30, 2004 12:00 am

Post by jpuziano » Wed Apr 09, 2014 9:43 pm

Thanks Grovkillen, much appreciated!
jpuziano

Note: If anyone else on the planet would find the following useful...
[Open] PlayWav command that plays from embedded script data
...then please add your thoughts/support at the above post - :-)
Top
User avatar
Grovkillen
Automation Wizard
Posts: 1132
Joined: Fri Aug 10, 2012 2:38 pm
Location: Bräcke, Sweden
Contact:
Contact Grovkillen

Re: The new (awesome) HTMLViewer feature: HTML tricks

Post by Grovkillen » Fri Dec 28, 2018 9:16 am

Given that you have a gif file called loading.gif in your script directory you can use this to display a gif:

Code: Select all


Dialog>DialogInfo
object DialogInfo: TForm
  Left = -6641
  Top = -1073
  HelpContext = 5000
  BorderIcons = [biSystemMenu]
  Caption = 'Info'
  ClientHeight = 700
  ClientWidth = 1400
  Color = clBtnFace
  Font.Charset = DEFAULT_CHARSET
  Font.Color = clWindowText
  Font.Height = -17
  Font.Name = 'MS Sans Serif'
  Font.Style = []
  OldCreateOrder = True
  Position = poScreenCenter
  ShowHint = True
  OnTaskBar = False
  PixelsPerInch = 144
  TextHeight = 20
  object HTML_PANEL: TPanel
    Left = 0
    Top = 0
    Width = 1400
    Height = 660
    BevelKind = bkTile
    BevelOuter = bvNone
    Caption = 'Panel1'
    TabOrder = 0
    object HTML_VIEWBOX: tMSHTMLViewer
      Left = 12
      Top = 14
      Width = 605
      Height = 547
      TabOrder = 0
      BorderStyle = htFocused
      DefFontName = 'Times New Roman'
      DefPreFontName = 'Courier New'
      HistoryMaxCount = 0
      NoSelect = False
      PrintMarginBottom = 2.000000000000000000
      PrintMarginLeft = 2.000000000000000000
      PrintMarginRight = 2.000000000000000000
      PrintMarginTop = 2.000000000000000000
      PrintScale = 1.000000000000000000
    end
  end
  object TASKBAR_PANEL: TPanel
    Left = 0
    Top = 660
    Width = 1400
    Height = 50
    BevelKind = bkTile
    BevelOuter = bvNone
    Caption = 'Panel2'
    TabOrder = 1
    object POP_OPEN_CHECKBOX: TCheckBox
      Left = 10
      Top = 7
      Width = 300
      Height = 25
      Caption = '&Show new info upon start...'
      Checked = True
      State = cbChecked
      TabOrder = 0
    end
    object OK_BUTTON: tMSButton
      Left = 1340
      Top = 7
      Width = 50
      Height = 25
      Caption = '&OK'
      TabOrder = 1
      DoBrowse = False
      BrowseStyle = fbOpen
    end
  end
end
EndDialog>DialogInfo

//Set to remove the bevel... only used in design mode
SetDialogProperty>DialogInfo,HTML_PANEL,BevelKind,bkNone
SetDialogProperty>DialogInfo,HTML_PANEL,Caption,
SetDialogProperty>DialogInfo,TASKBAR_PANEL,BevelKind,bkNone
SetDialogProperty>DialogInfo,TASKBAR_PANEL,Caption,

LabelToVar>HTML_CODE,TEST,0,0,*/

SetDialogProperty>DialogInfo,HTML_VIEWBOX,Align,alClient
SetDialogProperty>DialogInfo,HTML_VIEWBOX,HTML,TEST

Show>DialogInfo,r

/*
HTML_CODE:
<html>
<body style="background-color:powderblue;">

<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<img src="loading.gif">
</body>
</html>
</html>
*/
Let>ME=%Script%

Running: 15.0.27
version history
Top
User avatar
Grovkillen
Automation Wizard
Posts: 1132
Joined: Fri Aug 10, 2012 2:38 pm
Location: Bräcke, Sweden
Contact:
Contact Grovkillen

Re: The new (awesome) HTMLViewer feature: HTML tricks

Post by Grovkillen » Fri Dec 28, 2018 9:19 am

To display an online picture:

Code: Select all

Dialog>Dialog1
object Dialog1: TForm
  Left = 640
  Top = 191
  HelpContext = 5000
  BorderIcons = [biSystemMenu]
  Caption = 'CustomDialog'
  ClientHeight = 150
  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 MSHTMLViewer1: tMSHTMLViewer
    Left = 0
    Top = 0
    Width = 400
    Height = 150
    TabOrder = 0
    BorderStyle = htFocused
    DefFontName = 'Times New Roman'
    DefPreFontName = 'Courier New'
    HistoryMaxCount = 0
    NoSelect = False
    PrintMarginBottom = 2.000000000000000000
    PrintMarginLeft = 2.000000000000000000
    PrintMarginRight = 2.000000000000000000
    PrintMarginTop = 2.000000000000000000
    PrintScale = 1.000000000000000000
  end
end
EndDialog>Dialog1

LabelToVar>HTML_CODE,TEST,0,0,*/
SetDialogProperty>Dialog1,MSHTMLViewer1,HTML,TEST

Show>Dialog1,r

/*
HTML_CODE:
<img src="https://www.w3schools.com/html/pic_trulli.jpg">
*/
Change HTML_CODE snippet to this to change size of picture:

Code: Select all

/*
HTML_CODE:
<img src="https://www.w3schools.com/html/pic_trulli.jpg" style="width:100px;height:120px;">
*/
Let>ME=%Script%

Running: 15.0.27
version history
Top
Post Reply

Return to “Scripts and Tips”

Sign up to our newsletter for free automation tips, tricks & discounts