Hello,
thanks a much for the demo and guide - it helped me to create the classic graphic adventure look using TADS 3 WebUi - image in top frame, and parser down bellow. The graphics are scaled acording to TADS interpreter window size.
I did not found any demo or guide on web on this topic, the WebUi documentation looks quite sparse, so this may help somebody.
I’m no programmer, and TADS is quite new to me, so it is a messy code, to be honest I do not know what everything does there, but i works at least locally. The guide is pretty good, it helps a lot to understand implementation of WebUi, it is the best material which I found about the topic - read it first before attempting to use code bellow.
Image file name is specified by variable graphicsfilename in rooms in main game. Graphic files should be in webuires project directory.
testRoom: Room 'Test Room'
desc = "This is simple testing room with graphics"
graphicsfilename = 'example.jpg'
;
First the modification file, which needs to be added to source files before main game, to allow resources, create the frames and hook the image change to travel action. I’ve had some problems with the resources, it needed the WebResourceResFile vpath first…
modification.t
#charset "us-ascii"
#include <adv3.h>
WebResourceResFile
vpath = static new RexPattern('/webuires/')
;
transient graphicsWin: WebCommandWin, WebBannerWin
vpath = '/grafika.htm'
src = 'webuires/grafika.htm'
;
modify initDisplay()
{ webMainWin.createFrame(statuslineBanner, 'statusline','0, 0, 100%, 45px');
statuslineBanner.init();
statusLine.statusDispMode = StatusModeBrowser;
// set up the command window and status line
webMainWin.createFrame(graphicsWin, 'graphicsdisplay','0%, statusline.bottom, 100%, 60%');
webMainWin.createFrame(commandWin, 'command','0%, 60%, 100%, 100%');
}
modify TravelViaAction
execAction()
{
inherited;
graphicsWin.sendWinEvent('<map><graphicsfilename><<me.location.graphicsfilename>></graphicsfilename></map>');
}
;
Then we need the html page, javascript and css files in the webuires directory of the project. I am no CSS or JavaScript wizard these are more lucky experiments than anything, but you can get the idea. There are many shananigans with the sizes and positions - I could not get it to fill completely the frame with picture, this is best what I could come with. Wotks differently played in another browser…
grafika.htm
<!-- <!DOCTYPE HTML PUBLIC "-//W3C//Ddiv HTML 4.01 Strict//EN"> -->
<html>
<head>
<script type="text/javascript" src="/webuires/util.js"></script>
<script type="text/javascript" src="/webuires/mapWin.js"></script>
<link rel="stylesheet" type="text/css" href="/webuires/mapWin.css">
<body onload="javascript:mapWinInit();">
<body><div id="1" position: absolute; top: 0; left: 0; height: 100%; width: 100%;></div></body>
</head>
</html>
mapWin.css
html, body, .wrapper {}
body {
background-color: black;
background-size: cover;
font-size: 0px;
font-family: Verdana, sans-serif;
}
img {
width: 120%;
height: 100%;
object-fit: contain;
}
div {
object-fit: contain;
}
#1 img {
position: absolute;
top: 0;
left: 0;
right: 3;
bottom: 0;
min-width: 50%;
min-height: 50%;
}
And finally mapWin.js
function mapWinInit()
{
utilInit();
getInitState();
}
function onGameEvent(req, resp)
{
imgSrc='webuires/' + (xmlChildText(resp, "graphicsfilename"));
// This changes IMG atributes
{document.getElementById("1").innerHTML='<img src="'+imgSrc+'"/>';}
// DISABLED - This part is if you want to change bgimage, but I could get the resising right (probably not supported by Internet Explorer)
// document.body.style.backgroundImage = "url('"+imgSrc+"')";
// DISABLED - This writes what this script gets for file name - just for debugging
// alert(document.body.style.backgroundImage);
}
function onGameState(req, resp)
{}
