New Methods of Inserting HTML

homeeman

22 Apr 2013 07:08

Alright, so shortly before I finally released my game I had been working on for so long, Quest 5.4 came out and introduced a whole bunch of my favorite features. Huzzahs and celebration commenced. Unfortunately, my game, which had a lot of prettying up done to it, lost all that prettying up in the process.
Well, not all of it. The formatting of the panels on the right stayed the same, which was nice, but the background image was being overridden, somehow.

Anyways, my game is in 5.4 now (that's an oops), and I was wondering how one was expected to go about using more advanced html to do things like change the panels on the side and whatnot. For instance, in 5.3, this did what I wanted it to without overriding the background image:


<html>
<head>
 <style type = "text/css">
.ui-widget-header
 {
	font-family: Fondamento, Narkism, Times New Roman, serif;
	border: none;
	background: transparent;
	color: black;
 }  
#txtCommand
 {
	font-family: Fondamento, Narkism, Times New Roman, serif;
	background-color: transparent;
	color: black;
 }
 .ui-accordion-header
 {
    background: transparent;
 }
 .ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited {
	color:black;
 }
 .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
	border: 2px solid black;
 }	
 .ui-widget-content {
	border: 2px solid black;
	background: transparent ;
	color: #000;
 }
 .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
	border: 2px solid black;
	background: transparent;
	font-weight: bold;
	color: black;
 }
 .ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited {
	color: transparent;
 }
 div#gamePanes
 {
    background: transparent;
 }
  </style>
 </head>
 </html>

Now it tells me insert statements aren't supported and I should put that in a msg command. So I did.
And then there was whitespace. All of this code managed to very adequately make about three newlines and that's it.
So my question is: in the new 5.4, how does one begin to go about implementing advanced html? Is there an easier way to change that stuff yet? I just copied all of this from an old post Pertex made and I only understood just enough of it to play with it until it did what I wanted it to.

jaynabonne

22 Apr 2013 16:51

See if the attached does what you want. Basically it does:

1) Puts all the style code in a "styles" string attribute of the game.
2) In the game start script, does "msg(game.styles)"

Keep in mind that whenever you clear the screen, the styles will go away, so what I have in my work is an internal "clear screen" function that invokes the Quest ClearScreen and then dumps out the standard styles with msg.

Hope this helps.

HTMLTest.aslx

jaynabonne

22 Apr 2013 16:54

Note: if you look in the source code, you'll see some badly formatted HTML. That's just because I did a copy/paste from your original post and didn't fix things up. You can pretty it up all you want.

homeeman

22 Apr 2013 17:57

Wonderful! I'm thinking your CDATA section is what made the difference, as when I tried removing the <html> and <header> tags myself, it still didn't read it correctly.
As always, I bow to your experience and wisdom.

As a side note, my background image still won't display in the game. I looked through the css we just stuck in there, and the only time it specifies a background color it's to make the panels' background transparent. Any ideas?

Edit: Yeah, I couldn't add it via html, I tried doing SetBackgroundImage() again as a start script, but nothing. Head-scratcher, this one.

jaynabonne

22 Apr 2013 22:29

Can you specify what you mean by "background image"? Is it an image in the background of the main content area, or the side areas around the content, or...? Then we can figure out which element that is.

homeeman

23 Apr 2013 00:52

Sorry, yeah it's the background image of the side areas (although I made all the panes and the main content area transparent so that it showed through everything). When I add it through the GUI it doesn't show up. I thought this was just a translation error from 5.3 to 5.4, but now that my game is stuck in 5.4 I've seen that (at least for my background image) it doesn't show up. The filetype doesn't seem to affect it.

jaynabonne

23 Apr 2013 12:30

That's odd because if I add a line like:

SetBackgroundImage("Fountain.jpg")

to the file I attached before, then it shows that background image. Have you changed the CSS in the meantime?

The trick with adding a background image via CSS/HTML is that you have to call GetFileURL to get a fully realized URL, so it means fixing up the CSS at runtime. (You don't have to do that with SetBackgroundImage, as it does it for you.)

Also, Quest sets the background color and image itself, so it's tough to use CSS for that unless you somehow disable what it does.

homeeman

23 Apr 2013 20:23

See, that's the darndest thing. Even if I'm not using the html data, it still won't display my background image that worked fine in 5.3. I'm totally stumped. I'll upload the code and the background image, and if it works on your end, I'll know something has gone terribly wrong. I've tried it in several files and it just won't display at all.

jaynabonne

23 Apr 2013 20:47

I got the clue when I downloaded the image. It came across as "parchment%20texture.jpg". That's what HTML does with spaces. So the problem is the space in the name. You can do one of two things:

1) Get rid of the space, both in the filename and in the backgroundimage attribute, or
2) Leave the filename alone (keep the space) and change the backgroundimage attribute value to parchment%20texture.jpg so that it can find it properly. Basically, you can't have a space in a URL.

I tried 2) and it worked for me.

homeeman

23 Apr 2013 20:54

homeeman wrote:
As always, I bow to your experience and wisdom.

You're the best. Upwards and onwards.

Candacis

25 Apr 2013 23:12

Okay, I think, I have the same problem. I tried to to the tutorial in the wiki: http://quest5.net/wiki/Modifying_the_UI_%28Advanced%29 and it seems this only works for 5.3 and not for 5.4

I can't find the insert html command, when I try to add the html file I've made. How do I implement the html file? I read the answer about making a styles string attribute out of it, but I don't understand how I should do this. Sorry, I'm just a little confused :oops:

homeeman

25 Apr 2013 23:30

Make sure that your styles string looks like this:


<style type="string"><![CDATA[
...
your html
...
]]></style>

The important part is the CDATA sections, which allow Quest to figure out that all your <'s and your >'s and such aren't XML code, but are to be interpreted as text (which Quest will interpret as html when it prints it). If that's not your problem, then jaynabonne will problem respond with a better solution.

jaynabonne

25 Apr 2013 23:30

For Quest 5.4, you do not have external files. You just emit the html with the standard msg command.

For example, if you have an attribute in the game object like this:

    <boxyhtml>
      <![CDATA[
	  <style type = "text/css">
	 	div#container {
	 		border-style: solid;
	 		border-width: 3px;
	 		border-color: #cc0000;
	 	}
	 	div#content {
	 		font-style:italic;
	 	}
	  </style>
	  <div id="container">
	  	<div id="content">Hello world!</div>
	  </div>
	  ]]>
    </boxyhtml>

then you can make it show up with:

    msg(game.boxyhtml)

(Ok, so it's not pretty...)

Sora574

26 Apr 2013 01:31

Adding onto all this...
It's a little unrelated, but this helps me a little.
Instead of adding HTML in a game attribute, I create an object named HTML and give it the strings, so I can just use something like

msg (HTML.style)

I don't know about anyone else, but that just seems easier to me (for whatever reason)

Of course, instead of using a message, I made a new function, but that's unrelated.

jaynabonne

26 Apr 2013 08:31

To be honest, I don't stick it in the game either, except perhaps for a global style sheet that I want visible at that level. You can basically put the text in any object that makes sense, either a special global object like you have or even in the related room, command, object, etc.

Good point, though.

Candacis

26 Apr 2013 09:01

Thanks for all the help

But I still have a problem. So, I want to insert the html as an attribute unter the game/attribute tab. But there is only one line for the text. Can I write everything in one line? Do I need the string variable or something else (like script or string list)?

jaynabonne

26 Apr 2013 09:05

That is a problem - the UI is not really set up for long blocks of text in string attributes. I tend to always switch to Code View to edit the long strings. But yes, you *can* put it all as one long line if you wish.

Candacis

26 Apr 2013 09:14

Okay, I looked at the code view and it looks like this:

<start type="script">
      msg (this.styles)
      msg ("Dies ist ein Test für die Einleitung.")
    </start>
    <styles><![CDATA[<style type="text/css"> #gamePanes  {   background: transparent;  } </style>]]></styles>

The weird thing is, I didn't even type this CDATA stuff in there. Only the text in between. Does the game do this automatically? Do I still have to add this? What am I doing wrong? Sorry for all the questions.

jaynabonne

26 Apr 2013 11:39

Yes, the game did it for you automatically. SInce your string had things like "<" and ">" in it, Quest wrapped a CDATA around it to make it valid XML. So you're doing fine.

If you have more text to put in or just wish to format what's there, you can go ahead and do so. Whatever's between the "<[CDATA{" and the "]]>" is more or less free for you to edit as you wish.

Candacis

26 Apr 2013 14:27

Okay, thanks ^^
But unfortunately it doesn't work. I want to make the background of the panes on the right invisible. My approach doesn't do anything. Is #gamePanes the right element id? I only guessed this since it wasn't mentioned in the wiki tutorial.

jaynabonne

26 Apr 2013 14:39

See if it works better with div#gamePanes as the CSS selector.

Candacis

26 Apr 2013 20:01

Yes, that worked, perfect!

edit: One more question: Does anybody know the normal height and width of the gamePanes? Can I look that up somewhere? I tried the source code of the game, but I only found the width (700px) of GameContent. Does this include the gamePanes? And what exactly is the gamePanel and GridPanel?

Oh, okay, that was more than one question.. sorry. I try to search the forum and wiki, but I have so many questions, it's crazy :shock:

jaynabonne

26 Apr 2013 20:28

The gamePane is used to dsplay an image if the room has one.

The gridPanel is for the grid (the on-screen map) if you choose to have one.

There is no standard height, as far as I know. It grows with content, scrolling within the window height.

The 700px is just the central output area.

You can see all the various sizes in the HTML Developer Tools. Click on an element in the left pane, and then on the right, scroll up and open "Computed Style", and it will show you things like the width.

Candacis

26 Apr 2013 20:53

Uhm, where and how can I access the html developer tools? Do you mean http://quest.codeplex.com or something inside the quest software?

edit: Wups, nevermind, I found it! ^^
Thanks for all your patience.

jaynabonne

26 Apr 2013 20:56

Sorry.

When you're running your Quest game, go to the View menu and choose HTML Developer Tools (are you in the offline client?).

Candacis

26 Apr 2013 20:59

Yes, now I've tried it in a running game and found the html tools ^^
Thank you, thank you ^^

This topic is now closed. Topics are closed after 60 days of inactivity.

New Methods of Inserting HTML

Connect

Products

Resources

Support