Change font on click

Q&A about the latest versions
Post Reply
Mattmatt21
Posts: 4
Joined: Fri Jan 31, 2020 5:23 pm

Change font on click

Post by Mattmatt21 » Mon Feb 03, 2020 10:04 am

Hello, can I change the font on "Variable Changed" event? I need to make a list of buttons with a simple style, and selected button should have bold font. Text field font is determined in the CSS file.

User avatar
Hopki
Gnome
Posts: 9796
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Re: Change font on click

Post by Hopki » Mon Feb 03, 2020 10:01 pm

Hi,
There's a couple of things you can do here.
You can use HTML formatting which can be used with a set value action.
Please see this website: https://www.w3schools.com/html/html_formatting.asp

As an example:
You can use a Set Value action using targeting a single text box with:

Code: Select all

<span style="font-family: Arial Black;">Your Text</span>
Or

Code: Select all

<span style="font-family: Arial;">Your Text</span>
You can also use other tags such as

Code: Select all

<b>This text is bold</b>

Code: Select all

<i>This text is italic</i>
That said you can use the above is in the text logic blocks.

If you want to add more elaborate text formatting you can use CSS and the style sheet.
And swop text boxes, you can set up say Google Fonts: please see this doc: https://ggnome.com/doc/pano2vr/6/html-css/
In the Skins style sheet then use a variable to hide and show different text boxes.


The attached project is using:
Font1 font-family: 'Zhi Mang Xing', cursive;
Font2 font-family: 'Sigmar One', cursive;
Font3 font-family: 'Work Sans', sans-serif;
Font4 font-family: 'Molle', cursive;
Font5 font-family: 'Indie Flower', cursive;

The style sheet looks like this:

Code: Select all

.ggskin { 
	font-family: Verdana, Arial, Helvetica, sans-serif; 
	font-size: 14px;
	}

.ggskin.font1 {
	font-family: 'Zhi Mang Xing', cursive;
	font-size: 14px;
	}

.ggskin.font2 {
	font-family: 'Sigmar One', cursive;
	font-size: 14px;
	}

.ggskin.font3 {
	font-family: 'Work Sans', sans-serif;
	font-size: 14px;
	}

.ggskin.font4 {
	font-family: 'Molle', cursive;
	font-size: 14px;
	}

.ggskin.font5 {
	font-family: 'Indie Flower', cursive;
	font-size: 14px;
	}
Regards
Hopki
Attachments
fonts.zip
(13.63 KiB) Downloaded 4 times

Mattmatt21
Posts: 4
Joined: Fri Jan 31, 2020 5:23 pm

Re: Change font on click

Post by Mattmatt21 » Tue Feb 04, 2020 10:02 am

Thank you for the fast and very detailed reply! These tips have opened a lot of possibilities for me. You are the best, Hopki! :D

User avatar
Tony
Posts: 874
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Re: Change font on click

Post by Tony » Wed Feb 05, 2020 6:51 am

Hi,

Here's an example using CSS, a Variable and a Text Box with a Logic Block: https://p2vrtutorials.s3-ap-southeast-2 ... index.html

image-previewgra31.jpg
image-previewgra31.jpg (566.02 KiB) Viewed 107 times

In this example you can hover over each button and as you do so the background color changes from white to blue, the font changes from Gotham Book to Gotham Black and the font color changes from black to white. This is done in CSS.

Clicking on a button sets a Variable "click_status" to the name of the button. This changes the background color to green and sets the respective image Alpha to 1.000. This is done by changing the assigned Class in the Text Box Logic Block.

Alternatively clicking either image has the same effect.

Clicking outside of the buttons or images or clicking on the "x" resets the variable.

There is a textbox showing the current Variable text.

I'm going to write it up into a tutorial.

cheers,

Tony
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: http://tonyredhead.com - http://redsquare.com | roundme: http://round.me/@tonyredhead | instagram: https://www.instagram.com/tonyredhead/

Mattmatt21
Posts: 4
Joined: Fri Jan 31, 2020 5:23 pm

Re: Change font on click

Post by Mattmatt21 » Wed Feb 05, 2020 2:08 pm

Thank you for example, waiting for tutorial :)

User avatar
Hopki
Gnome
Posts: 9796
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Re: Change font on click

Post by Hopki » Thu Feb 06, 2020 10:00 pm

Hi,
Speaking with Christoph we have come up with a JavaScript method to change the class of a text box in the skin.
As this is a skin project please see: viewtopic.php?f=13&t=14232
Regards,
Hopki

User avatar
Tony
Posts: 874
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Re: Change font on click

Post by Tony » Fri Feb 07, 2020 12:04 am

Hi Mattmatt21,

The tutorial is online at https://tonyredhead.com/pano2vr-little- ... s-variable

cheers,

Tony
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: http://tonyredhead.com - http://redsquare.com | roundme: http://round.me/@tonyredhead | instagram: https://www.instagram.com/tonyredhead/

Post Reply

Who is online

Users browsing this forum: No registered users and 10 guests