Use custom font in activeX htmlfile Topic is solved

[Mipha]

It might help if I post the fonts that I'm using online. Maybe I did something wrong in there. Who knows.

Here they are

currently only the letter A has a symbol for it and it looks like the mace shown in This post.

Also I still can't get over how importing fonts or changing the color of a simple image in autohotkey is EXTREMELY HARD. I have been trying this for over 4 days now and have literally made 0 progress and neither this forum or the internet has found anything so far that works other than making a different colored image for every occasion.

[kczx3]

You’re not really using AutoHotkey for this though. You’re using a web browser control. Very different things.

[Mipha]

You’re not really using AutoHotkey for this though. You’re using a web browser control. Very different things.

Do you perhaps know a place where they know more about web browser controls so I can ask there?

[kczx3]

For what its worth, I was only able to get it to work properly by using the Shell.Explorer object and navigating to a local HTML file. It could have something to do with ActiveX permissions for loading unsafe content or something. Not sure.

Code: Select all

gui, add, edit, h0 w0 ;removes annoying noise when pressing a button with the gui selected
gui, font, s10
gui +Border +lastfound
gui, color, EBAE02
WinSet, TransColor, EBAE02

guicontrolget, maindoc, pos
Guiheight := A_screenheight / 4
Guiwidth := A_screenwidth / 6
Gui, Add, ActiveX, x0 y0 w%Guiwidth% h%Guiheight% vfeaturedoc, Shell.Explorer

featuredoc.navigate("file:///C:\Users\<user>\Desktop\IE-Test-font.html")


gui, show
return

[Mipha]

For what its worth, I was only able to get it to work properly by using the Shell.Explorer object and navigating to a local HTML file. It could have something to do with ActiveX permissions for loading unsafe content or something. Not sure.

Code: Select all

gui, add, edit, h0 w0 ;removes annoying noise when pressing a button with the gui selected
gui, font, s10
gui +Border +lastfound
gui, color, EBAE02
WinSet, TransColor, EBAE02

guicontrolget, maindoc, pos
Guiheight := A_screenheight / 4
Guiwidth := A_screenwidth / 6
Gui, Add, ActiveX, x0 y0 w%Guiwidth% h%Guiheight% vfeaturedoc, Shell.Explorer

featuredoc.navigate("file:///C:\Users\<user>\Desktop\IE-Test-font.html")


gui, show
return

So you're navigating to a file on your PC? I thought you could only navigate websites with this. Would it be possible to use getElementById() on elements in the .html file and alter them after it has been loaded like this?

[Drugwash]

When it comes to web code, all paths should use forward slash ( /), not backslash (\). It's just a general rule, not sure how much it matters here if anything else is not right.

[kczx3]

So you're navigating to a file on your PC? I thought you could only navigate websites with this. Would it be possible to use getElementById() on elements in the .html file and alter them after it has been loaded like this?

Correct. And yes, you'd be able to modify elements on that page once it is loaded.

[Mipha]

For what its worth, I was only able to get it to work properly by using the Shell.Explorer object and navigating to a local HTML file. It could have something to do with ActiveX permissions for loading unsafe content or something. Not sure.

Code: Select all

gui, add, edit, h0 w0 ;removes annoying noise when pressing a button with the gui selected
gui, font, s10
gui +Border +lastfound
gui, color, EBAE02
WinSet, TransColor, EBAE02

guicontrolget, maindoc, pos
Guiheight := A_screenheight / 4
Guiwidth := A_screenwidth / 6
Gui, Add, ActiveX, x0 y0 w%Guiwidth% h%Guiheight% vfeaturedoc, Shell.Explorer

featuredoc.navigate("file:///C:\Users\<user>\Desktop\IE-Test-font.html")


gui, show
return

Alright so I just tried it and got the first part working but the fonts still don't seem to work. This is what I currently have

Code: Select all

;in the script
Gui, Add, ActiveX, x0 y0 w250 h250 vfeaturedoc, Chrome.Browser ; It doesn't apparantly matter what I place instead of "Chrome.Browser" as long as it is not empty. All results are the same. (also canvas still doesnt work at all)
featuredoc.navigate("file:///(path to the html)/Testhtml.html")

Code: Select all

// in the HTML file
<!DOCTYPE html>
<html>
	<head>
		<style type=text/css>
		@font-face {
			font-family:'Testfont';
			src:url('font-family:'Test'; src:url('file:///(path to the font)/OpenSans-Bold.tff') format('tff'); /* <downloaded font to ensure it works corrently */
		}
		.custom{
			font-family:'Testfont';
		}
		</style>
	</head>
	<body>
		<p class='custom'>aA</p>
	</body>
</html>
 

Setting the font to another font (like verdana) works but its the part about importing that doesn't work. Did you get that working at one point during this?

[kczx3]

You need the meta tag in the head to force the browser to run in the latest mode. The control defaults to IE7 without it.

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        @font-face {
            font-family: myTest;
            src: url("file:///c:\\users\\<user>\\downloads\\fonts\\myfont.woff");
        }
        p {
            font-family: myTest;
        }
    </style>
</head>
<body>
    <p>A</p>
</body>
</html>

[Mipha]

You need the meta tag in the head to force the browser to run in the latest mode. The control defaults to IE7 without it.

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        @font-face {
            font-family: myTest;
            src: url("file:///c:\\users\\<user>\\downloads\\fonts\\myfont.woff");
        }
        p {
            font-family: myTest;
        }
    </style>
</head>
<body>
    <p>A</p>
</body>
</html>

Ah thanks. That solved the issue. Now I got good and bad news.

The bad news: Still can't seem to import a font.

The good news. The canvas element now works and I can probably use that to change the color of an image (which is my ultimate goal right now) so I'll experiment some more with that.

EDIT: I did it. Finally I got what I wanted.

There's 2 things still to do Now though.

First, a way to make it a magnitude less bloated. (current strat requires looping through every pixel of the image to make it blue)
I don't think I'll be able to find a workaround for this though other than a way of changing the image color other than canvas (here is where importing that font would be useful)
Edit: solved. Thanks to my teacher for making this work. You must use the @font-face rule to import a custom font. Note that the location of the font must be in the same location of the html file. I haven't had this work on the activeX htmlfile however which is a bummer. It also seems that it doesn't work on .tff but does work on .woff

And second, I can't seem to be able to edit the html file from within the AHK script.)
Edit: solved. To access it. Use featuredoc.document.getElementById(id) where featuredoc should be whatever the name is of your activeX control.

[Mipha]

Alright. So with everything combined. Here is an example of importing a custom font in an ahk script

Code: Select all

;put this in the AHK script
gui Html font:default
gui, add, edit, h0 w0
gui, font, s10
gui +Border -Caption +lastfound
gui, color, EBAE02
WinSet, TransColor, EBAE02
winsettitle, Html font
guiwidth := A_screenwidth / 1.5
guiheight := A_screenheight / 1.5

Gui, Add, ActiveX, x0 y0 w%guiwidth% h%guiheight% vfeaturedoc, shell.Browser
featuredoc.navigate("file:///(path to the html)/Testhtml.html")
gui, show, autosize

Code: Select all

<!-- put this inside the html file -->
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="X-UA-Compatible" content="ie=11">
		<style type=text/css>
		@font-face{
			font-family:Testfont;
			src:url('testfont.woff'); <!-- You can put your own font here. It must be located in the same place as the html -->
		}
		.custom{
			font-family: Testfont;
			font-size:25px;
		}
		</style>
	</head>
	<body>
		<p class='custom' id='text'>Test AAA</p>
	</body>
</html>

And here is the result

One final question however. Is it possible to get rid of the Gui, Add, ActiveX, x0 y0 w%guiwidth% h%guiheight% vfeaturedoc, shell.Browser and go back go Gui, Add, ActiveX, x0 y0 w%guiwidth% h%guiheight% vfeaturedoc, htmlfile? I doubt its possible since nether canvas, nor font-face seem to work there in any case but having the posibillity would make my job much easier as I can put all the html inside the AHK script instead of its own individual file.

[Drugwash]

Have you tried this with Shell.Browser or Shell.Explorer?

Code: Select all

featuredoc.silent := true, featuredoc.Navigate("about:blank")
While featuredoc.readystate != 4 or featuredoc.busy
	Sleep 10
featuredoc.document.write(html)

where html is a variable containing the HTML code featured in your second codebox above?

[Mipha]

Have you tried this with Shell.Browser or Shell.Explorer?

Code: Select all

featuredoc.silent := true, featuredoc.Navigate("about:blank")
While featuredoc.readystate != 4 or featuredoc.busy
	Sleep 10
featuredoc.document.write(html)

where html is a variable containing the HTML code featured in your second codebox above?

This solution seems promising but sadly. Importing a font or creating a canvas doesn't seem to work.

[Drugwash]

Now would be a good time to say the F word.
Importing a font would be best because then changing font color would be much simpler than manipulating image pixels through gdiplus or whatever else.
I wonder if it'd work for ANY installed font. Because if it does, you can simply install the font in the system at script start and delete it (if necessary) at script exit. Well, unless the system is so anal as to refuse installing a font from an AHK script.

[Mipha]

Now would be a good time to say the F word.
Importing a font would be best because then changing font color would be much simpler than manipulating image pixels through gdiplus or whatever else.
I wonder if it'd work for ANY installed font. Because if it does, you can simply install the font in the system at script start and delete it (if necessary) at script exit. Well, unless the system is so anal as to refuse installing a font from an AHK script.

Installing the font and using it in the script DOES work. But installing the font is a different question.

So far the scripts I've found/tried had no success and research is halted after trying to delete my fonts which resulted in the deleted font still being present and as an added bonus. Reinstalling it doesn't cause it to show up anywhere. So now I got a zombie font somewhere and lost the abillity to reinstall the font because of it. Any suggestions would be appreciated :/

EDIT: You know what. Scrap the entire "install a font" system. I got something else on my mind.

I can live with one html file to place the code in but I got many different layouts to try and I dont want to make a different file for each one. Is there some way to give a variable to the html file through autohotkey so I can return different html layouts using it? Similar to php files using $_POST[] to do it.

[Drugwash]

Well, a font should be uninstalled, not simply deleted - my bad. The zombie may go away upon reboot, or it may not. There are tutorials on the web for removing protected system fonts, in case this one fell into that category.

Since you have to load the entire HTML file (from a path) in order for the script to work, I don't see any way to select parts of the HTML code. But then again HTML and ActiveX are not my cup of tea so I may be wrong.

Sorry I can't be of more help, my XP system with IE8 can't take it.

[Mipha]

Well, a font should be uninstalled, not simply deleted - my bad. The zombie may go away upon reboot, or it may not. There are tutorials on the web for removing protected system fonts, in case this one fell into that category.

Since you have to load the entire HTML file (from a path) in order for the script to work, I don't see any way to select parts of the HTML code. But then again HTML and ActiveX are not my cup of tea so I may be wrong.

Sorry I can't be of more help, my XP system with IE8 can't take it.

I seemed to have figured it out. You can do something like this featuredoc.navigate("file:///C:/Users/pimha/OneDrive/Bureaublad/Background_power/Testhtml.html?test2") and then use msgbox % featuredoc.document.location.search in the ahk file or location.search in javascript and they will both return "?test2" in that case. I can put a different value there for every html layout that I want to use.

One mayor issue with this though is that I now have to do everything html related with javascript in this fashion because only then can I check the value.

If there was some way I could do something like this

Code: Select all

if(value == 1){
<div style=""width:50px;""></div>
}
else{
<div style=""width:100px;""></div>
}

that would be way better than what I got now. Php comes to mind but I'm rather uncertain how I would even get that to work here.

[Drugwash]

Maybe you could build a more complex CSS style with different values for each class/id and use different class or id for elements of each distinct layout. Dunno if I made myself clear. Something like this:

Code: Select all

<style type=text/css>
myid1 { width: 50px; }
myid2 { width: 100px; }
</style>
<body>
<p id='myid1'>Layout 1</p>
 <p id='myid2'>Layout 2</p>
</body>

I never fancied web languages anyway.

Oh and since you're still having issues with getting the whole script work as desired, it may be a good idea to continue in a different/new topic as this one is marked as solved (and title issue is no longer of interest).

[Mipha]

Maybe you could build a more complex CSS style with different values for each class/id and use different class or id for elements of each distinct layout. Dunno if I made myself clear. Something like this:

Code: Select all

<style type=text/css>
myid1 { width: 50px; }
myid2 { width: 100px; }
</style>
<body>
<p id='myid1'>Layout 1</p>
 <p id='myid2'>Layout 2</p>
</body>

I never fancied web languages anyway.

Oh and since you're still having issues with getting the whole script work as desired, it may be a good idea to continue in a different/new topic as this one is marked as solved (and title issue is no longer of interest).

In your example. Both <p> tags are always created. But in my example I wanted a different set of html to be created depending on the given value.
Also. Yes, I should probably make a new thread about it.

[Mipha]

Have you tried this with Shell.Browser or Shell.Explorer?

Code: Select all

featuredoc.silent := true, featuredoc.Navigate("about:blank")
While featuredoc.readystate != 4 or featuredoc.busy
	Sleep 10
featuredoc.document.write(html)

where html is a variable containing the HTML code featured in your second codebox above?

I managed to get this working.

You just need to navigate to a html file that contains this

Code: Select all

<!DOCTYPE html>
<html>
    <head>
        <meta charset='UTF-8'>
        <meta name='viewport' content='width=device-width, initial-scale=1.0'>
        <meta http-equiv='X-UA-Compatible' content='ie=11'>
    </head>
</html>

Afterwards. Using document.write to write html code from the ahk script works. This makes things 10x easier