Subtitle.Render() - Show text with style (Easy, painless Gdip interpreter)

Post your working scripts, libraries and tools
iseahound
Posts: 98
Joined: 13 Aug 2016, 21:04
GitHub: iseahound

Subtitle.Render() - Show text with style (Easy, painless Gdip interpreter)

28 Aug 2017, 01:40

Subtitle


Subtitle.Render() is a method of the Subtitle class that will render text on-screen with transparency, in real-time. It uses tic's Gdip library as it's backbone, as well as additional gdi+ functions I have found. I hope that you will find this library intuitive and easy to use, without having to resort to using gdi+ function calls. It is inspired by tic's Gdip_TextToGraphics() and makes it what it is truly supposed to be.

Before you start
  • You will need Gdip_All
  • Add pToken := Gdip_Startup() before calling any Subtitle methods.

Image
pToken := Gdip_Startup() ; Don't forget!
Object: Subtitle.Render("Jail zesty vixen who grabbed pay from quack.", {"color":"Aquamarine"}, {"color":"None", "size":48, "font":"Baskerville Old Face", "outline":"2"})
String: Subtitle.Render("Jail zesty vixen who grabbed pay from quack.", "cAquamarine", "cNone s48 f(Baskerville Old Face) o(2)")


Image
Object: Subtitle.Render("Und über uns ziehen lila Wolken in die Nacht", {"color":"#F9E27E"}, {"font":"Century Gothic", "size":60, "color":"#F88958", "outline":"5 Indigo", "dropShadow":"5 5 0 #009DA7"})
String: Subtitle.Render("Und über uns ziehen lila Wolken in die Nacht", "c#F9E27E", "f(Century Gothic) s60 c#F88958 o(5 Indigo) d(5 5 0 #009DA7)")


Image
Object: Subtitle.Render("パッと光って咲いた 花火を見ていた", {"x":10, "y":10, "c":"None"}, {"color":"#EDF4DD", "font":"Microsoft Gothic", "outline":"5 #113077 3"})
String: Subtitle.Render("パッと光って咲いた 花火を見ていた", "x10 y10 cNone", "color:#EDF4DD font:(Microsoft Gothic) outline:(5 #113077 3)")


Image
code





Two types of Notation - Object Notation, and String Notation. They are equally fast, as confirmed by benchmarks.

Code: [Select all] [Download] GeSHi © Codebox Plus

pToken := Gdip_Startup()
a := Subtitle.Render("Hello World", "w500 h500", "anchor:center x50% y50%") ; String Notation
sleep 700
b := Subtitle.Render("Hello from the other side", {"x":"right", "w":500, "h":500}, {"anchor":"center", "x":"50%", "y":"50%"}) ; Object Notation

Reminder - "500" is equal to 500 (with quotes and without quotes) because AHK preforms automatic type conversion of strings into integers. Essentially, they are the same.
There is no speed benefit to using object notation over string notation. Both have pros and cons. String notation is simple to write, simple to remember, short and concise. Object notation is bulky, easy to modify, and well adapted for use in a larger script.


List Of Methods


Syntax Guide

Code: [Select all] [Expand] [Download] GeSHi © Codebox Plus



Full Script

Code: [Select all] [Expand] [Download] GeSHi © Codebox Plus



Frequently Asked Questions



Get the latest version on GitHub.
For a real example of Subtitle being used: Vis2 - Simple OCR

Please share your renderings with code so other people can see what's cool and awesome.
Like this!

Code: [Select all] [Download] GeSHi © Codebox Plus

pToken := Gdip_Startup()
a := new Subtitle()
a.Render("While I stood in the heavy, never-ending rain, I forgot how to smile...", "x:center y:83% cOff", "s45.3 f(Garamond) color:White outline:(1 White 9 Black) dropShadow(0 0 15 White)")
a.Save("MyFile.png") ; Saves file.


Looking for: Code to perform a Gaussian Blur, or a good approximation of it. Preferably compiled C.
Last edited by iseahound on 20 Sep 2017, 16:06, edited 24 times in total.
Helgef
Posts: 2106
Joined: 17 Jul 2016, 01:02
Contact:

Re: Subtitle() - Show text with style

28 Aug 2017, 03:31

Very nice function and demo :bravo:
My gdi skills are subpar, would it be possible to return a bitmap handle (HBITMAP) instead of displaying it in a gui? Maybe a spearate function would be more appropriate for that :think:

Thanks for sharing, cheers!
iseahound
Posts: 98
Joined: 13 Aug 2016, 21:04
GitHub: iseahound

Re: Subtitle() - Show text with style

28 Aug 2017, 05:53

Is there anything beneficial to return a HBITMAP? I can make it so that you input a pGraphics, then manually call update layer window.

There's a function to get a pBitmap from a hwnd, and I'm assuming it's easy to grab the hBitmap from there.
User avatar
kczx3
Posts: 396
Joined: 06 Oct 2015, 21:39

Re: Subtitle() - Show text with style

28 Aug 2017, 19:21

Helgef wrote:Very nice function and demo :bravo:


+1
Fry

Re: Subtitle() - Show text with style

28 Aug 2017, 20:15

Nice, like it.
Suggestions for now:

-background:
    w0 should set it to invisible and blank to auto size, sometimes a user might need to just show text with no background.
-Text:
    options to add drop shadow and all the possible options that come with it, like thickness, distance transparency, color etc, something like d(t10% d5%...) <=== % of the text size.
    Same for outline.
Helgef
Posts: 2106
Joined: 17 Jul 2016, 01:02
Contact:

Re: Subtitle() - Show text with style

29 Aug 2017, 15:55

iseahound wrote:Is there anything beneficial to return a HBITMAP? I can make it so that you input a pGraphics, then manually call update layer window.

Hello, thanks for responding. It would be beneficial to have a hBitmap if it refered to something looking as nice as in the demo :lol: My vision was to
1) use hBitmaps for ahk gui picture controls, eg, gui.addPic(,"hBitmap:" hbitmap)
2) convert the hBitmaps hIcon.

Your function is black magic to me, maybe the bitmap handles in it aren't useable for my ideas.

iseahound wrote:There's a function to get a pBitmap from a hwnd, and I'm assuming it's easy to grab the hBitmap from there.

I may try this when my eyes aren't half shut :|

Cheers.
User avatar
jeeswg
Posts: 2044
Joined: 19 Dec 2016, 01:58
Location: UK

Re: Subtitle() - Show text with style

29 Aug 2017, 16:59

The variable hbm is an hBitmap, is that any good?
I often do tests when using Gdip functions like so:

Code: [Select all] [Download] GeSHi © Codebox Plus

SplashImage, % "HBITMAP:" hBitmap, B ;B: borderless
Sleep, 3000
SplashImage, Off


[EDIT:] It seems when I tried this that the image included black all around the main image.

Warning:
Btw I had some problems while testing the script, to experiment with hBitmap, where parts of the screen were not updating (not anyone's fault, just a consequence of fiddling with the code). To get out of this situation I found two ways: I clicked on the arrow to show system tray icons, and closed the script. Also, I right-clicked on the taskbar, Start Task Manager, and then closed the script. I had the 'Command Line' column showing, which helped identify the right script, but the screen updating issue, meant I couldn't do this to add the column if it wasn't already added: 'View, Select Columns..., Command Line'.

So yeah, Helgef, I had a bit of scare there, trying to play about with hBitmap, and there was a little while before I came up with a solution, thankfully I avoided doing a restart.
iseahound
Posts: 98
Joined: 13 Aug 2016, 21:04
GitHub: iseahound

Re: Subtitle() - Show text with style

30 Aug 2017, 06:19

jeeswg wrote:The variable hbm is an hBitmap, is that any good?


In that case returning the variable hbm should do the trick.

Questions: (to everyone)

1) What's the difference between margin and padding? I'm using CSS as a template, and currently I've coded all margins and padding to do the same thing: Extend the width and height of the background box. No changes in x or y offsets.

2) Is anyone using this a lot? The blinking you see in the demo is due to me deleting the Graphics, hbm, hdc and obm and recreating them over and over. I can release a class version that alleviates this. (It already exists as a part of my Vis2 project.)

Finally I have received Fry's suggestions and am testing them out. One new feature anchor points has been completed. Bugfixes to allow negative percentages have been completed on my end, they will be released whenever.
User avatar
kczx3
Posts: 396
Joined: 06 Oct 2015, 21:39

Re: Subtitle() - Show text with style

30 Aug 2017, 06:46

margin is added spaced outside the boundary of the element. This gives space between two elements where if they both had a border, those borders would no longer touch with a positive margin. Padding is internal space to the element. If you were to have text inside the element and a positive padding value, there would be space between the text and its own border.
https://i.stack.imgur.com/PeSIJ.gif
User avatar
kczx3
Posts: 396
Joined: 06 Oct 2015, 21:39

Re: Subtitle() - Show text with style

30 Aug 2017, 06:52

Is there an option for a border?

Also, supporting so many different ways of passing options really seems like a waste of time and creates a lot of fluff code. I prefer object notation coming from a JavaScript background.
iseahound
Posts: 98
Joined: 13 Aug 2016, 21:04
GitHub: iseahound

Re: Subtitle() - Show text with style

30 Aug 2017, 07:08

kczx3 wrote:Is there an option for a border?

Also, supporting so many different ways of passing options really seems like a waste of time and creates a lot of fluff code. I prefer object notation coming from a JavaScript background.


I might as well try coding a border too. Supporting so many ways of passing options is because I like it to be flexable. Syntax like "x500 y200" are taken from the AHK GUI. Whereas I also prefer {"x":500, "y":200}

better yet:

Code: [Select all] [Download] GeSHi © Codebox Plus

background := {"x":500, "y":200}
background.color := 0x3F627F
if (mouseTouchesBackground()}
background.y := 900
else
background.y := 200
Subtitle("Pickles and Jam", background, "jCenter")


Is how it's actually meant to be used. Objects for switching values before rendering (dynamic). Strings for simple tasks (static).
User avatar
kczx3
Posts: 396
Joined: 06 Oct 2015, 21:39

Re: Subtitle() - Show text with style

30 Aug 2017, 07:27

While we are on the topic, is it possible to draw with gdip that has color which changes in a fluid manner? The best example I can think of is the focus border around options on the Nintendo Switch. The blue color of it is constantly changing and would be neat to replicate that.

EDIT:

This is the best screenshot I could find of the blue border - https://res.cloudinary.com/lmn/image/upload/e_sharpen:100/f_auto,fl_lossy,q_auto/v1/gameskinnyc/s/c/r/screenshot-a57b4.jpg

MORE INFO:

I see the ColorAnimation class but I'm fairly confident this can't be used with AHK directly - ColorAnimation
guest3456
Posts: 2015
Joined: 09 Oct 2013, 10:31

Re: Subtitle() - Show text with style

30 Aug 2017, 09:00

screenshot of the subtitle effect?

Helgef
Posts: 2106
Joined: 17 Jul 2016, 01:02
Contact:

Re: Subtitle() - Show text with style

30 Aug 2017, 11:12

@ jeeswg. I did try to use hbm before I posted, but it showed a bitmap as big as the whole screen with the text oddly placed, and it was mostly white, no blackness. Blackness and or whiteness is not a problem per se, more the size of it. :think: Thanks for almost rebooting for the sake of helping a fellow forum member :angel:

What is your reboot time? Convert A_TickCount. I'm on 5 days, very recent for me.
iseahound
Posts: 98
Joined: 13 Aug 2016, 21:04
GitHub: iseahound

Re: Subtitle() - Show text with style

12 Sep 2017, 13:00

Helgef wrote:@ jeeswg. I did try to use hbm before I posted, but it showed a bitmap as big as the whole screen with the text oddly placed, and it was mostly white, no blackness. Blackness and or whiteness is not a problem per se, more the size of it. :think: Thanks for almost rebooting for the sake of helping a fellow forum member :angel:

What is your reboot time? Convert A_TickCount. I'm on 5 days, very recent for me.



Try this:

Code: [Select all] [Download] GeSHi © Codebox Plus

#include class_Subtitle.ahk
#include <Gdip_All>
pToken := Gdip_Startup()
hBitmap := Subtitle.RenderToHBitmap("Centered Text", "w500 h500", "anchor:center font:Veranda x50% y50%")
SplashImage, % "HBITMAP:" hBitmap, B
Esc:: ExitApp
Helgef
Posts: 2106
Joined: 17 Jul 2016, 01:02
Contact:

Re: Subtitle() - Show text with style

12 Sep 2017, 16:18

iseahound wrote:Try this:

:superhappy: :bravo:

I will probably return with questions.
User avatar
moefr01
Posts: 38
Joined: 25 Nov 2015, 09:01
Location: Germany

Re: Subtitle.Render() - Show text with style (Easy, painless Gdip interpreter)

13 Sep 2017, 15:03

Thanks for your Great Code, iseahound... very usable for informative devs.
I am looking for a possibilty to exchange the formatted text by a timer, eg a clock, countdown ...
With gdip you can define a prush, which erases the already displayed string every tick, so its easy to create a smooth Desktopclock. Andy hint how to do it with subtitle.render? :?:
iseahound
Posts: 98
Joined: 13 Aug 2016, 21:04
GitHub: iseahound

Re: Subtitle.Render() - Show text with style (Easy, painless Gdip interpreter)

14 Sep 2017, 14:07

Simple Timer

Code: [Select all] [Expand] [Download] GeSHi © Codebox Plus



Divergent Clock

Code: [Select all] [Expand] [Download] GeSHi © Codebox Plus

iseahound
Posts: 98
Joined: 13 Aug 2016, 21:04
GitHub: iseahound

Re: Subtitle.Render() - Show text with style (Easy, painless Gdip interpreter)

14 Sep 2017, 18:12

Updated Subtitle
Fixed anchor, and Save() to be more reliable.
#2: Fixed Memory leak.
This will be the last update for a long time.


Old Version I originally posted. For archival purposes.
Spoiler

Return to “Scripts and Functions”

Who is online

Users browsing this forum: No registered users and 21 guests