2151 posts
Auckland, New Zealand
Posted 04 November 2014 - 07:06 AM
For more information about Quest and the download link check out this topic.
This is going to be another fairly large tutorial. If you haven’t already seen it, you should checkout Quest. Simply put, it’s an HTML(ish) web browser which functions as close to a standard web browser as I could realistically make it in ComputerCraft given the screen space, storage space, character size and HTTP limitations that exist. You can use things like PHP, Node.JS, or even ASP if you’re strange enough. You can also make plain old static web pages, which is where we will start.
Even if you’ve made tons of HTML pages before, there are a number of notable differences. However, I’ve tried to make everything as close as possible to HTML, you’d be rather surprised how much is identical. In fact, if you haven’t used HTML before I’d recommend learning the basics somewhere else first, I’m going to be fairly specific about the differences rather than teaching from scratch.
In terms of storing/hosting this page, you have a few options. The first and probably best way at this stage is to just create a file called index.ccml on your computer and edit that. You could also use Quest Host or host it on your own server, but it’s quicker an easier to just store it on the computer.
So, here’s a basic page template, it doesn’t have much at this stage, but it will help you get started.
You’ll notice that the heading isn’t called h1, h2, etc. Due to the fact that you cannot have multiple font sizes in ComputerCraft there isn’t really a need for multiple heading sizes. By default headings are full width and centred.
You’ll notice that there isn’t any CSS. I feel like it’s over complex for what needs to be displayed, so at this stage everything is done using attributes. The next section explains them in greater depth.
Note: color can also be used instead of colour, you don’t need to use the British spelling.
colour (text colour)
bgcolour (background colour)
height
width
You can use the colour attributes like this:
Sometimes setting height doesn’t actually set the element height, if you need to use a set height try wrapping the element with a div.
Here is a list of pretty much all the available elements and the attributes they accept. * indicates that the attribute must be supplied
div:
- char (the background character, useful for creating splitters with ‘-‘, for example)
float, p, h, a:
- align (text align, accepts: ‘left’, ‘right’ or ‘center’)
input:
- type * (the same as it is in normal HTML, accepts: ‘text’, ‘password’, ‘submit’, 'hidden', 'file')
- name * (same as in normal HTML)
- value (same as in normal HTML)
input (text & password):
- placeholder (placeholder text when the value is empty)
- plcolour (colour of the placeholder text)
- selcolour (colour of selected text)
- selbgcolour (background colour of selected text)
select:
- value (same as in normal HTML, sets selected option [use the option value, not text])
option:
- value (same as in normal HTML, the value when submitted, not the shown text)
a:
- href * (same as normal HTML, doesn’t accept anchor tags yet)
- ulcolour (the link underline colour, accepts all colours and ‘none’)
img:
- src * (same as normal HTML)
- type * (the image format, accepts: ‘nfp’ (or ‘paint’), ‘nft’ or ‘skch’ (or ‘sketch’)
center, br:
- no special attributes
form:
- action (same as HTML)
- method (same as HTML, accepts: ‘post’ and ‘get’)
Some attributes will be explained in greater detail in later sections, but most of them function pretty much identically to HTML.
Links in CCML function pretty much identically to as they do normally, you can use absolute URLs (e.g. http://computercraft.info/forms2/) and relative URLs (e.g. /mypage.ccml or mypage.ccml).
You can’t yet use page anchors, but if there’s demand for them I might add them.
Links also accept the ulcolour attribute. This sets the underline colour of the link, you can also use ‘none’ which will remove the underline completely making the element one pixel high rather than two.
By default links take up 100% width and align to the left, you can use the related attributes to change this.
If you need any other help with links take a look at how HTML links work, they’re almost identical.
Quest supports the three main image formats, NFP (the paint image format), NFT and Sketch. If you want to edit or create images I’d recommend using my Sketch program, it supports all those formats.
While you don’t have to set the image type you certainly should if you know it. It will try to guess, but it’s not perfect, especially NFP and NFT formats.
To set the format use the type attribute, like below.
You should also set the width and height of the image if you can. If you don’t while the image is loading the image will show as 1 x 1, then when the image loads it will have to change size and bump all the page content down, as it does with normal HTML.
The image location supports relative and absolute URL.
It takes a little to get used to but it’s quite an easy way of doing things.
For example, to create a basic navigation bar you can use this code, make sure you set the width of the links, by default they’re 100% width.
You can also set the align to left or right, by default it is left.
At the moment Quest supports the following input types: submit, text, password, file, hidden
The hidden element is just a hidden value, it's useful if you need to put something on the page (Quest Host uses it for the current folder path) that you don't want the user to see or change.
Files are handled differently due to limitations of the HTTP API, there's another section about them below.
If you've used HTML forms before you should be pretty comfortable with using them.
It's also worth noting that all passwords are hashed with SHA256 before they leave the browser for security. However, this doesn't mean you shouldn't also salt and rehash the password! It's just to prevent… hmm, how do I put this… slightly less competient, slightly more stupid people or rather malcious people from releasing your password, either intentionally or accidentally.
You can also set the align to left or right, by default it is left.
So, to combat this I've had to make a substitute system.
It uses either POST or GET, depending on which method you set it to, but it's probably best to use POST for files to prevent accidental reuploading or file mutation.
Basically, it uploads some JSON with the name and content. The above example is obviously PHP, but it shouldn't be to hard to convert to other languages.
This is going to be another fairly large tutorial. If you haven’t already seen it, you should checkout Quest. Simply put, it’s an HTML(ish) web browser which functions as close to a standard web browser as I could realistically make it in ComputerCraft given the screen space, storage space, character size and HTTP limitations that exist. You can use things like PHP, Node.JS, or even ASP if you’re strange enough. You can also make plain old static web pages, which is where we will start.
Even if you’ve made tons of HTML pages before, there are a number of notable differences. However, I’ve tried to make everything as close as possible to HTML, you’d be rather surprised how much is identical. In fact, if you haven’t used HTML before I’d recommend learning the basics somewhere else first, I’m going to be fairly specific about the differences rather than teaching from scratch.
Creating Your First Page
The first and most important difference when creating a page is the doctype. In most cases you’ve probably haven’t really touched the page doctype. When creating a CCML page (the special for of HTML for Quest) you must set the page doctype. If you don’t the page simply won’t load, it’ll just give an error. This is to prevent normal web pages loading and screwing up/crashing the browser.In terms of storing/hosting this page, you have a few options. The first and probably best way at this stage is to just create a file called index.ccml on your computer and edit that. You could also use Quest Host or host it on your own server, but it’s quicker an easier to just store it on the computer.
So, here’s a basic page template, it doesn’t have much at this stage, but it will help you get started.
<!DOCTYPE ccml>
<html>
<head>
<title>Welcome to your website!</title>
</head>
<body>
<br>
<h>Welcome to your website!</h>
<br>
<p width="46" align="center">
Paragraph text.
</p>
</body>
</html>
You’ll notice that the heading isn’t called h1, h2, etc. Due to the fact that you cannot have multiple font sizes in ComputerCraft there isn’t really a need for multiple heading sizes. By default headings are full width and centred.
You’ll notice that there isn’t any CSS. I feel like it’s over complex for what needs to be displayed, so at this stage everything is done using attributes. The next section explains them in greater depth.
Using Element Attributes
As mentioned in the previous section, how elements look is determined by element attributes, not CSS. Most elements within the body take the following attributes:Note: color can also be used instead of colour, you don’t need to use the British spelling.
colour (text colour)
bgcolour (background colour)
height
width
You can use the colour attributes like this:
<p bgcolour="red" colour="white">
Paragraph text.
</p>
Sometimes setting height doesn’t actually set the element height, if you need to use a set height try wrapping the element with a div.
Here is a list of pretty much all the available elements and the attributes they accept. * indicates that the attribute must be supplied
div:
- char (the background character, useful for creating splitters with ‘-‘, for example)
float, p, h, a:
- align (text align, accepts: ‘left’, ‘right’ or ‘center’)
input:
- type * (the same as it is in normal HTML, accepts: ‘text’, ‘password’, ‘submit’, 'hidden', 'file')
- name * (same as in normal HTML)
- value (same as in normal HTML)
input (text & password):
- placeholder (placeholder text when the value is empty)
- plcolour (colour of the placeholder text)
- selcolour (colour of selected text)
- selbgcolour (background colour of selected text)
select:
- value (same as in normal HTML, sets selected option [use the option value, not text])
option:
- value (same as in normal HTML, the value when submitted, not the shown text)
a:
- href * (same as normal HTML, doesn’t accept anchor tags yet)
- ulcolour (the link underline colour, accepts all colours and ‘none’)
img:
- src * (same as normal HTML)
- type * (the image format, accepts: ‘nfp’ (or ‘paint’), ‘nft’ or ‘skch’ (or ‘sketch’)
center, br:
- no special attributes
form:
- action (same as HTML)
- method (same as HTML, accepts: ‘post’ and ‘get’)
Some attributes will be explained in greater detail in later sections, but most of them function pretty much identically to HTML.
Making a Wi-Fi Server
I'll add this soon, just need to get a few screenies!Creating Links
Links but the net in internet, the webs in interwebs, and the web in web. In other words, they’re pretty useful.Links in CCML function pretty much identically to as they do normally, you can use absolute URLs (e.g. http://computercraft.info/forms2/) and relative URLs (e.g. /mypage.ccml or mypage.ccml).
You can’t yet use page anchors, but if there’s demand for them I might add them.
Links also accept the ulcolour attribute. This sets the underline colour of the link, you can also use ‘none’ which will remove the underline completely making the element one pixel high rather than two.
By default links take up 100% width and align to the left, you can use the related attributes to change this.
If you need any other help with links take a look at how HTML links work, they’re almost identical.
Creating Images
Images in Quest are pretty similar to standard HTML images. The biggest difference is obviously the image format.Quest supports the three main image formats, NFP (the paint image format), NFT and Sketch. If you want to edit or create images I’d recommend using my Sketch program, it supports all those formats.
While you don’t have to set the image type you certainly should if you know it. It will try to guess, but it’s not perfect, especially NFP and NFT formats.
To set the format use the type attribute, like below.
<img src="logo.nft" type="nft" width="10" height="8"/>
<img src="logo.nfp" type="nfp" width="10" height="8"/>
<img src="logo.skch" type="sketch" width="10" height="8"/>
You should also set the width and height of the image if you can. If you don’t while the image is loading the image will show as 1 x 1, then when the image loads it will have to change size and bump all the page content down, as it does with normal HTML.
The image location supports relative and absolute URL.
Center Elements
For elements that aren’t 100% width and don’t have align attributes, such as paragraphs, you can use the center tag. This works similar to how the center tag worked in older versions of HTML. It essentially centers all immediate child elements (it won’t center elements within another element). If you’re finding it’s not working, chances are the object is set to 100% width.
<center>
<p width="30">I’m paragraph text. Notice that text isn’t centred, only the paragraph is.</a>
<input type="submit">I’m a Button</input>
</center>
Inline Elements/Floats
By default all elements require the entire line, they’re like block elements in CSS. There is no display or inline attribute, but you can use a special wrapper element called float. Essentially, what it does is makes all it’s immediate children "float" (as in CSS float: left, etc.) They will line up side by side. Some elements though, such as links, headings and paragraphs will automatically set their width to 100%, if you put one of these within a float you need to manually set it’s width, otherwise the other elements will wrap around.It takes a little to get used to but it’s quite an easy way of doing things.
For example, to create a basic navigation bar you can use this code, make sure you set the width of the links, by default they’re 100% width.
<float>
<a href="index.ccml" width="6">Home</a>
<a href="index.ccml" width="7">Pages</a>
<a href="index.ccml" width="7">About</a>
</float>
You can also set the align to left or right, by default it is left.
<float align="right">
...
</float>
Forms
Forms are pretty much identical to HTML forms. You can use both GET and POST (although GET may be a little buggy on som servers due to how sessions work). To get the full benefit of forms you really need to use something like PHP to access the values.At the moment Quest supports the following input types: submit, text, password, file, hidden
The hidden element is just a hidden value, it's useful if you need to put something on the page (Quest Host uses it for the current folder path) that you don't want the user to see or change.
Files are handled differently due to limitations of the HTTP API, there's another section about them below.
<form action="mypage.php" method="post">
<input type="text" name="q" placeholder="Search"/>
<input type="submit" name="submit"/>
</form>
If you've used HTML forms before you should be pretty comfortable with using them.
It's also worth noting that all passwords are hashed with SHA256 before they leave the browser for security. However, this doesn't mean you shouldn't also salt and rehash the password! It's just to prevent… hmm, how do I put this… slightly less competient, slightly more stupid people or rather malcious people from releasing your password, either intentionally or accidentally.
You can also set the align to left or right, by default it is left.
File Uploading
This is where things start to become a little wonky and hacky. Because the ComputerCraft HTTP API doesn't support binary there's no multipart data or anything like that.So, to combat this I've had to make a substitute system.
It uses either POST or GET, depending on which method you set it to, but it's probably best to use POST for files to prevent accidental reuploading or file mutation.
<form method="post">
<input type="file" name="upload-file"/>
<input type="submit" name="submit"/>
</form>
if (isset($_POST['upload-file'])) { //you probably also want: && isset($_POST['submit']) for completness
$upload = json_decode(stripslashes($_POST['upload-file']), true);
if(!$upload || !$upload['name'] || !$upload['content']){
//upload was ok
//the name of the file is ['name'] and the file content is ['content']
}
else{
//upload failed
}
}
Basically, it uploads some JSON with the name and content. The above example is obviously PHP, but it shouldn't be to hard to convert to other languages.
LuaScript/lQuery
I'm still working on this, it works but it's pretty incomplete. I'll add a tutorial about it when it's ready.Edited on 04 November 2014 - 08:46 AM
