[Done] HTML/CSS elements in Custom Dialogs

Ideas for new features & functions

Moderators: Dorian (MJT support), JRL

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

[Done] HTML/CSS elements in Custom Dialogs

Post by Grovkillen » Wed Feb 06, 2013 9:39 am

I'd like to be able to add simple html font handles in cutom dialogs.

As an example:

l
The code above would result in a green dot in a web browser and if i could use these kinds of things in a dialog the user experience would be much better.

Code: Select all

Indicator color is green...
"<font face=wingdings color=green>l</font> Everything is great!"

Indicator color is red...
"<font face=wingdings color=red>l</font> Something is wrong!"

Using bold on some words in a text...
The third <b>word</b> of this sentance is extra important.

Many more examples would be possible (different color, font size, bold, underline, italic, url links, emoticons.. you name it).
I know this is a lot of work to get this to work but the possibilities are pretty awesome! :)

EDIT: This is now included in version 14.1, yay! :)
Last edited by Grovkillen on Wed Mar 19, 2014 10:38 am, edited 2 times in total.
Let>ME=%Script%

Running: 15.0.24
version history

User avatar
JRL
Automation Wizard
Posts: 3501
Joined: Mon Jan 10, 2005 6:22 pm
Location: Iowa

Post by JRL » Thu Feb 07, 2013 3:19 pm

What version of Macro Scheduler are you using?
SetDialogObjectFont> was introduced five years ago with the release of Macro Scheduler version 10. It doesn't provide web page like syntax, but it does give you the ability to control the look of the text in your dialog.

Just did a search for "SetDialogObjectFont" so I could give you some examples and I see that you have posted a fine sample that uses SetDialogObjectFont.

Obviously I'm not understanding your request. Could you provide more detail?

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

Post by Grovkillen » Thu Feb 07, 2013 4:07 pm

I'd like to do stuff like this:

Image

With different color on some indicator symbols... and please understand that I might want to have this in the middle of the text (i.e. change color and/or font).

Like this example where as this word is bold and this word is italic. I also like the color BROWN.

Just think of as this post where as I use alot of different colors and icons :D [/i][/b]
Let>ME=%Script%

Running: 15.0.24
version history

User avatar
CyberCitizen
Automation Wizard
Posts: 721
Joined: Sun Jun 20, 2004 7:06 am
Location: Adelaide, South Australia

Post by CyberCitizen » Fri Feb 08, 2013 12:40 am

Doing Little Things Like That I Would Use Images Instead. As For The Font Text Having One Letter Like This Being Bold, Wouldn't Be Hard, But Would Be More Than One Text Field.

MS Wasn't Really Designed For That, And I Don't Really See The Need For It.
FIREFIGHTER

User avatar
JRL
Automation Wizard
Posts: 3501
Joined: Mon Jan 10, 2005 6:22 pm
Location: Iowa

Post by JRL » Fri Feb 08, 2013 4:33 am

So basically you're looking for a Dialog object that could be used to display html code. I think that's a great idea. In the past I've resorted to running mshta.exe and placing the hta window in a dialog.

I posted a method for setting an HTA window into a dialog using the SetParent API HERE Marcus posted a very similar script HERE

User avatar
jpuziano
Automation Wizard
Posts: 1085
Joined: Sat Oct 30, 2004 12:00 am

Post by jpuziano » Fri Feb 08, 2013 5:35 pm

Hi everyone,

I like this idea as well. Here's some feedback on existing posts related to this idea:

http://www.mjtnet.com/forum/how-to-open ... t5225.html

Thanks for sharing the approach in the post at the above link Marcus, though I believe the following is still an issue:
jpuziano feedback to post at above link wrote:One problem I can see with using this though (I used the wildcard) is that a user typically has one or more browser windows open all the time. If they fire up this macro, it may "grab" one of the existing IE windows and put that in the dialog instead of keying in on the new one. Perhaps On Event with WINDOW_OPEN could be used to make sure we grab the new one?


http://www.mjtnet.com/forum/embed-anima ... hlight=hta

Thanks for sharing the approach in the post at the above link JRL, I use this all the time to display an animated spinner on an MS dialog while the user waits for results to come back from a query. It has a few issues though... some re-draw problems if the user clicks on the dialog and moves it while the animated gif is displaying inside of it... and some issues if somehow certain files are not deleted because maybe the user aborts out of the macro completely before the macro has a chance to clean up the files.

So... if MS dialogs get a new object that can display html elements:

- I hope to be able to use it to display an animated .gif spinner on a dialog.

- It would be great to be able to EMBED the data for the animated .gif image file right inside the dialog similar to how we can do this for an Image on a dialog today.

- It would also be great to have a dialog handler that could dynamically re-point at different .gif files to change the animation... or, point to different gif image data that has been stored inside the MS script itself using Tools/Import Binary File.

- Come to think of it, just enhancing the capabilities of an Image object on a MS dialog so that if could display an animated .gif would also do the trick... however that is a very limited (but still valuable) subset of what a fully html-capable new dialog object might be able to do.

Just my feedback and food for thought...

Thanks and take care
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 - :-)

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

Post by Grovkillen » Sun Feb 10, 2013 2:03 pm

JRL & jpuziano:

I'm happy to read that you understand what I'm aiming for here. Thanks! :)
Let>ME=%Script%

Running: 15.0.24
version history

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

Post by Grovkillen » Thu Mar 07, 2013 7:08 am

I've done some research and found that WebKit could be used to generate stuff like this. I don't know but maybe Delphi has something along those lines as well.

If you want to generate PDF files built from HTML/CSS I found this pretty awesome stand alone program (triggered by command line switches): wkHTMLtoPDF! (wk = WebKit)

the source is found here>>

I downloaded this file:
wkhtmltox-0.11.0_rc1-installer.exe

There's also a program for converting HTML to image files (might be the next best thing until my requested feature is implemented!)
Let>ME=%Script%

Running: 15.0.24
version history

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

Post by Grovkillen » Wed Jun 19, 2013 7:03 am

Marcus, sorry to pull your strings but here's more in the line of my enhancement suggestion.

Below you have a YouTube video of someone creating a simple browser in Delphi using the (Internet) TWebBrowser command. Maybe it could be used to display internal HTML/CSS code, i.e. would be able to make stunning CustomDialogs in MS (15)!? :lol:

Link to video here>>
Let>ME=%Script%

Running: 15.0.24
version history

User avatar
Rain
Automation Wizard
Posts: 550
Joined: Tue Aug 09, 2005 5:02 pm
Contact:

Post by Rain » Wed Jun 19, 2013 12:57 pm

I like the css suggestion, however, it might be too confusing for those that don't have experience in htm and css coding.

armsys
Automation Wizard
Posts: 1108
Joined: Wed Dec 04, 2002 10:28 am
Location: Hong Kong

Post by armsys » Thu Jun 20, 2013 1:42 am

I like Grovkillen's idea too.

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

Post by Grovkillen » Sat Jun 22, 2013 7:58 pm

Rain, I understand your point but I'd be happy to contribute with documentation about the command. :)
Let>ME=%Script%

Running: 15.0.24
version history

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

Post by Grovkillen » Wed Aug 14, 2013 9:30 am

TMS Software provide a VCL plugin that does all this that I'm looking for! :)
Let>ME=%Script%

Running: 15.0.24
version history

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

Post by Grovkillen » Tue Sep 10, 2013 11:48 am

I'm hammering away on this subject:

If this is ever implemented it would be great if the Message>, MessageModal>, Ask> and Input> would be HTML enabled. Alot of time I use these to inform users about errors and or update information etc. etc. and today they are really gray... It would be awesome to have them pimped with HTML and clickable links, blinking text, pictures etc. without the need to make a CustomDialog. Thanks for reading!
Let>ME=%Script%

Running: 15.0.24
version history

User avatar
Rain
Automation Wizard
Posts: 550
Joined: Tue Aug 09, 2005 5:02 pm
Contact:

Post by Rain » Tue Sep 10, 2013 3:09 pm

Grovkillen wrote:I'm hammering away on this subject:

If this is ever implemented it would be great if the Message>, MessageModal>, Ask> and Input> would be HTML enabled. Alot of time I use these to inform users about errors and or update information etc. etc. and today they are really gray... It would be awesome to have them pimped with HTML and clickable links, blinking text, pictures etc. without the need to make a CustomDialog. Thanks for reading!
You can use a HTML Application (HTA) as previously mentioned to display your content. This will give you full control of how to display your content. Your imagination is the limit.

Here are 2 examples. One opens a HTA window with your HTML/CSS code the other opens the same HTA window inside a dialog.

HTA window only

Code: Select all

  Let>HTMLCode=
  ConCat>HTMLCode,%CRLF%<head>
  ConCat>HTMLCode,%CRLF%<title>HTA Dialog Example</title>
  ConCat>HTMLCode,%CRLF%<script>
  //Set size of hta window
  ConCat>HTMLCode,%CRLF%window.resizeTo(500, 350);
  ConCat>HTMLCode,%CRLF%</script>
  //Set hta properties (Source: http://msdn.microsoft.com/en-us/library/ms536495%28v=VS.85%29.aspx)
  ConCat>HTMLCode,%CRLF%<HTA:APPLICATION
  ConCat>HTMLCode,%CRLF%ID=oHTA
  ConCat>HTMLCode,%CRLF%CAPTION="yes"
  ConCat>HTMLCode,%CRLF%ICON="http://www.mjtnet.com/favicon.ico"
  ConCat>HTMLCode,%CRLF%CONTEXTMENU="no"
  ConCat>HTMLCode,%CRLF%SHOWINTASKBAR="yes"
  ConCat>HTMLCode,%CRLF%NAVIGABLE="no"
  ConCat>HTMLCode,%CRLF%MINIMIZEBUTTON="no"
  ConCat>HTMLCode,%CRLF%MAXIMIZEBUTTON="no"
  ConCat>HTMLCode,%CRLF%SCROLL="no"
  ConCat>HTMLCode,%CRLF%WINDOWSTATE="normal" />
  
  ConCat>HTMLCode,%CRLF%</head>

  //Your HTML/CSS/JavaScript codes here
  ConCat>HTMLCode,%CRLF%<a href="http://www.mjtnet.com/usergroup/"><img border="0" src="http://www.mjtnet.com/images/logotype.png"></a>
  ConCat>HTMLCode,%CRLF%<ul>
  ConCat>HTMLCode,%CRLF%<li><a href="http://www.mjtnet.com/index.htm">Home</a></li>
  ConCat>HTMLCode,%CRLF%<li><a href="http://www.mjtnet.com/automation-software.htm">Products</a></li>
  ConCat>HTMLCode,%CRLF%<li><a href="http://www.mjtnet.com/sales.htm">Buy Now</a></li>
  ConCat>HTMLCode,%CRLF%<li><a href="http://www.mjtnet.com/downloads.htm">Downloads</a></li>
  ConCat>HTMLCode,%CRLF%<li><a href="http://www.mjtnet.com/support.htm">Support</a></li>
  ConCat>HTMLCode,%CRLF%<li><a href="http://www.mjtnet.com/about.htm">About Us</a></li>
  ConCat>HTMLCode,%CRLF%<li><a href="http://www.mjtnet.com/blog/">Blog</a></li>
  ConCat>HTMLCode,%CRLF%<li><a href="http://www.mjtnet.com/usergroup/">Forums</a></li>
  ConCat>HTMLCode,%CRLF%</ul>


  //Load HTA window
  DeleteFile>%TEMP_DIR%ExampleDialog.hta
  WriteLn>%TEMP_DIR%ExampleDialog.hta,r,%HTMLCode%
  Exe>%TEMP_DIR%ExampleDialog.hta
HTA window inside a dialog

Code: Select all



Dialog>Dialog1
object Dialog1: TForm
  Left = 511
  Top = 162
  HelpContext = 5000
  BorderIcons = [biSystemMenu]
  Caption = 'CustomDialog'
  ClientHeight = 368
  ClientWidth = 502
  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 MSButton1: tMSButton
    Left = 8
    Top = 328
    Width = 97
    Height = 25
    Caption = 'Load Some Info'
    TabOrder = 0
    DoBrowse = False
    BrowseStyle = fbOpen
  end
end
EndDialog>Dialog1

AddDialogHandler>Dialog1,MSButton1,OnClick,CreateHTA
AddDialogHandler>Dialog1,,OnClose,ExitScript

Show>Dialog1,

SRT>CreateHTA
  IfWindowOpen>HTA Dialog Example
    CloseWindow>HTA Dialog Example
  ENDIF

  Let>HTMLCode=
  ConCat>HTMLCode,%CRLF%<head>
  ConCat>HTMLCode,%CRLF%<title>HTA Dialog Example</title>
  ConCat>HTMLCode,%CRLF%<script>
  //Set size of hta window
  ConCat>HTMLCode,%CRLF%window.resizeTo(500, 300);
  //Load hta window off screen
  ConCat>HTMLCode,%CRLF%window.moveTo(-5000, -5000);
  ConCat>HTMLCode,%CRLF%</script>
  //Set hta properties (Source: http://msdn.microsoft.com/en-us/library/ms536495%28v=VS.85%29.aspx)
  ConCat>HTMLCode,%CRLF%<HTA:APPLICATION
  ConCat>HTMLCode,%CRLF%ID=oHTA
  ConCat>HTMLCode,%CRLF%CAPTION="no"
  ConCat>HTMLCode,%CRLF%ICON="http://www.mjtnet.com/favicon.ico"
  ConCat>HTMLCode,%CRLF%CONTEXTMENU="no"
  ConCat>HTMLCode,%CRLF%SHOWINTASKBAR="yes"
  ConCat>HTMLCode,%CRLF%NAVIGABLE="no"
  ConCat>HTMLCode,%CRLF%MINIMIZEBUTTON="no"
  ConCat>HTMLCode,%CRLF%MAXIMIZEBUTTON="no"
  ConCat>HTMLCode,%CRLF%SCROLL="no"
  ConCat>HTMLCode,%CRLF%WINDOWSTATE="normal" />
  
  ConCat>HTMLCode,%CRLF%</head>

  //Your HTML/CSS/JavaScript codes here
  ConCat>HTMLCode,%CRLF%<a href="http://www.mjtnet.com/usergroup/"><img border="0" src="http://www.mjtnet.com/images/logotype.png"></a>
  ConCat>HTMLCode,%CRLF%<ul>
  ConCat>HTMLCode,%CRLF%<li><a href="http://www.mjtnet.com/index.htm">Home</a></li>
  ConCat>HTMLCode,%CRLF%<li><a href="http://www.mjtnet.com/automation-software.htm">Products</a></li>
  ConCat>HTMLCode,%CRLF%<li><a href="http://www.mjtnet.com/sales.htm">Buy Now</a></li>
  ConCat>HTMLCode,%CRLF%<li><a href="http://www.mjtnet.com/downloads.htm">Downloads</a></li>
  ConCat>HTMLCode,%CRLF%<li><a href="http://www.mjtnet.com/support.htm">Support</a></li>
  ConCat>HTMLCode,%CRLF%<li><a href="http://www.mjtnet.com/about.htm">About Us</a></li>
  ConCat>HTMLCode,%CRLF%<li><a href="http://www.mjtnet.com/blog/">Blog</a></li>
  ConCat>HTMLCode,%CRLF%<li><a href="http://www.mjtnet.com/usergroup/">Forums</a></li>
  ConCat>HTMLCode,%CRLF%</ul>





//Load HTA window inside Dialog1
DeleteFile>%TEMP_DIR%ExampleDialog.hta
WriteLn>%TEMP_DIR%ExampleDialog.hta,r,%HTMLCode%
Exe>%TEMP_DIR%ExampleDialog.hta
WaitWindowOpen>HTA Dialog Example
GetWindowHandle>HTA Dialog Example,hIEWnd
LibFunc>user32,SetParent,r,hIEWnd,DIALOG1.HANDLE
LibFunc>user32,SetWindowLongA,sres,hIEWnd,-16,524288
SetFocus>HTA Dialog Example
MoveWindow>HTA Dialog Example,0,0


END>CreateHTA

SRT>ExitScript
  IfWindowOpen>HTA Dialog Example
    CloseWindow>HTA Dialog Example
    Del>%TEMP_DIR%ExampleDialog.hta
  ENDIF
  Exit>1
END>ExitScript

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