Jump to content




Introducing ComputerCraft's First HTML Web Browser


65 replies to this topic

#1 oeed

    Oversimplifier

  • Members
  • 2,095 posts
  • LocationAuckland, New Zealand

Posted 10 October 2014 - 02:13 AM

Since I started making OneOS I wanted to make a web browser that would actually work like your standard web browser. It would display pages off the internet in some form of HTML. Firewolf and similar programs are good, but you have to do everything in Lua and you have to run it off an in-game sever (at least I think, I haven't really used them that much). Some of them also use Pastebin which really isn't ideal.

So, yesterday I felt rather bored and was inspired to give it another shot. Surprisingly in just a few hours work I've got something that's working fairly well, probably as I'm using Bedrock so I haven't needed to worry about tons of stuff.

Screenshots
Spoiler

At this stage it supports a few types of tags, headings (h), paragraphs (p), images (img), dividers/colour blocks (div), empty lines (br) and a way to center child elements (center). It's only loading a local page at the moment, but the awesome thing about it is you will be able to use things like PHP and the like to make completely dynamic pages. Oh and it supports scrolling too which is pretty useful.

I'll probably make a Google type site, or at the very least a site listing page, so you can find pages you can actually view. I also want to add Lua, which would be used similar to JavaScript, soon.

Here's the markup for the top screenshot. I'm calling the format 'CCML' (ComputerCraft Markup Language), but I'll probably ignore the file extension so you can still use things like index.html without needing to change server stuff.
Spoiler

At this stage I'm really looking for feedback about how makes are made and their layout. If people don't like the way they're made or viewed there's not much point in making this. Any comments or questions are most welcome.

Preview Download
This isn't a final product. It's really just to allow you to make sites ready for release at this stage. Download all the files on GitHub: https://github.com/oeed/Quest

Alternatively use a single file Pastebin.

Client: pastebin get VDUGPdiA quest
Wi-Fi Server: pastebin get qpWzu0HA questserver

Oh and this will be included in OneOS obviously, and I'll also make sure to release it as a standalone program too.

Edited by oeed, 25 October 2014 - 10:47 AM.


#2 Agent Silence

  • Members
  • 319 posts
  • Location[string "FindMe"]:23143: bad argument #1 to 'returnPos' (vector expected, got nil)

Posted 10 October 2014 - 02:47 AM

Love it, just love it.

Maybe make server compatibility for people to host sites?

You could have downloads maybe?

#3 oeed

    Oversimplifier

  • Members
  • 2,095 posts
  • LocationAuckland, New Zealand

Posted 10 October 2014 - 03:45 AM

View PostAgent Silence, on 10 October 2014 - 02:47 AM, said:

Love it, just love it.

Maybe make server compatibility for people to host sites?

You could have downloads maybe?

Thanks!

What do you mean by server compatibility? As in servers hosted in-game? That could work, although it'd need to be a different protocol (as in not 'http://...')

I don't have a download up yet as it's in very early stages. I should have a testing version out fairly soon though.

#4 kornichen

  • Members
  • 220 posts
  • LocationGermany

Posted 10 October 2014 - 06:21 AM

Very nice work.
I was working on quite the same thing but as always you were faster ;)

But this opens pretty much new possibilities as the community could use this to write applications for CC in HTML (or CCML) just like they do with Node.js Webkit on real computers. Maybe it will give more people the possibility to write applications for CC because GUI designing is (I would say) easier than with just Lua.

#5 oeed

    Oversimplifier

  • Members
  • 2,095 posts
  • LocationAuckland, New Zealand

Posted 10 October 2014 - 08:55 AM

View Postkornichen, on 10 October 2014 - 06:21 AM, said:

Very nice work.
I was working on quite the same thing but as always you were faster ;)

But this opens pretty much new possibilities as the community could use this to write applications for CC in HTML (or CCML) just like they do with Node.js Webkit on real computers. Maybe it will give more people the possibility to write applications for CC because GUI designing is (I would say) easier than with just Lua.

Yea, while it's not a complete replacement for many programs, it will at the very least provide a way for people to make and share things much easier.

Quick update.

I've made a preview version available. Be aware that it's hideously messy at the moment and I've had to just put it in a ZIP as it's got multiple files. It should by default go to a test page. Feel free to make your own pages, although you'll need to upload them to a server, but a localhost server works perfectly fine. The link is in the first post.

Since the first post I've made some good progress. Pages and images are now loadable from the internet (previously they were hard coded) and are loaded asynchronously. I've also added links, which is making it feel like an actual browser now. I've also added error pages (404, timeout, etc).

#6 theoriginalbit

    Semi-Professional ComputerCrafter

  • Moderators
  • 7,332 posts
  • LocationAustralia

Posted 10 October 2014 - 10:41 AM

Congrats, you just got some publicity from dan on Twitter.

#7 AgentTadpole

  • New Members
  • 2 posts
  • LocationMelbourne.

Posted 10 October 2014 - 01:02 PM

I'd love CSS support (I hate inline HTML formatting), but I can see how that's something that would take a while :P

#8 InputUsername

  • Members
  • 231 posts
  • LocationThe Netherlands

Posted 10 October 2014 - 06:01 PM

As always, good job. Good idea to have inline Lua code. Looking forward to the release!

#9 TheOddByte

    Lazy Coder

  • Members
  • 1,607 posts
  • LocationSweden

Posted 10 October 2014 - 06:32 PM

I'm absolutely amazed, great job! :D
How do you find yourself the time to create such awesome stuff? Don't you have school or something? :P

#10 LDDestroier

  • Members
  • 1,090 posts
  • LocationACDC Town

Posted 10 October 2014 - 06:41 PM

You've got to make a converter to automatically convert HTML to CCML, and make a script to convert tons of websites, like Google, Facebook/Twitter, Computercraft Forums, Minecraft Forums, Planet Minecraft, etc.

You could even have it so that whenever the CCML client sees a webpage that isn't CCML, it asks your website to convert it to CCML, waits for the CCML file, puts it on a CCML website database, then displays it. If you convert the pictures (please do!), and the converted picture looks distorted or bad in any way, you could manually modify the file to look good.

Edited by LDDestroier, 10 October 2014 - 06:44 PM.


#11 TheOddByte

    Lazy Coder

  • Members
  • 1,607 posts
  • LocationSweden

Posted 10 October 2014 - 06:45 PM

View PostLDDestroier, on 10 October 2014 - 06:41 PM, said:

...
Even though that would be nice to see, the problem is the limitness of CC, for example, javascript, images and all that.

#12 LDDestroier

  • Members
  • 1,090 posts
  • LocationACDC Town

Posted 10 October 2014 - 07:20 PM

View PostTheOddByte, on 10 October 2014 - 06:45 PM, said:

View PostLDDestroier, on 10 October 2014 - 06:41 PM, said:

...
Even though that would be nice to see, the problem is the limitness of CC, for example, javascript, images and all that.

What if there was some sort of emulation layer to take care of javascript? Images could just be converted to nfp from another website; the computer won't convert it.

#13 Engineer

  • Members
  • 1,378 posts
  • LocationThe Netherlands

Posted 10 October 2014 - 11:10 PM

View PostLDDestroier, on 10 October 2014 - 07:20 PM, said:

What if there was some sort of emulation layer to take care of javascript? Images could just be converted to nfp from another website; the computer won't convert it.
You do realize that you *only* have 51x19 pixels in cc. Converting an image is possible, but then the problem arises with multiple images, it simply wont fit.

As for the JS part, it should be possible to do but it'd be too much effort for little effect

#14 oeed

    Oversimplifier

  • Members
  • 2,095 posts
  • LocationAuckland, New Zealand

Posted 10 October 2014 - 11:18 PM

View PostAgentTadpole, on 10 October 2014 - 01:02 PM, said:

I'd love CSS support (I hate inline HTML formatting), but I can see how that's something that would take a while :P/>
I know what you mean, I just feel that it's a bit overkill. They aren't that many properties really. I'll see, it just makes stuff a bit complicated.

View PostTheOddByte, on 10 October 2014 - 06:32 PM, said:

I'm absolutely amazed, great job! :D/>
How do you find yourself the time to create such awesome stuff? Don't you have school or something? :P/>

Well I'm on school holidays at three moment, but this has honestly only taken a few hours.

View PostLDDestroier, on 10 October 2014 - 06:41 PM, said:

You've got to make a converter to automatically convert HTML to CCML, and make a script to convert tons of websites, like Google, Facebook/Twitter, Computercraft Forums, Minecraft Forums, Planet Minecraft, etc.

You could even have it so that whenever the CCML client sees a webpage that isn't CCML, it asks your website to convert it to CCML, waits for the CCML file, puts it on a CCML website database, then displays it. If you convert the pictures (please do!), and the converted picture looks distorted or bad in any way, you could manually modify the file to look good.
While this would obviously be very cool and useful, as others have pointed out, it's bordering on impossible. I might add something like that later though.


Another quick update.

Up to this point everything has been rendered like 'blocks', if you've used CSS much you'll sorta understand (think display: block). Basically only one object could be on each line. So I've made a way to allow you to create things like sidebars, navigation menus, tables, etc. I'm not 100% sure about the way it's formatted HTML/CCML wise, but it works fairly well. Things are really starting to look like actual web sites now.

I've uploaded another preview with support for this.

Posted Image

Here's the markup for the page:
<!DOCTYPE ccml>
<html>
<head>
	<title>Home</title>
</head>
<body bgcolor="grey">
	<div bgcolor="white">
		<br/>
		<center>
			<float width="40">
				<img src="/images/test.nft" type="nft" width="10" height="2" />
				<a href="/" align="center" width="10">Home</a>
				<a href="/products/" align="center" width="10">Products</a>
				<a href="/about/" align="center" width="10">About</a>
			</float>
		</center>
		<br/>
	</div>
	<div bgcolor="grey" height="2"></div>
	<center>
		<div bgcolor="white" width="40">
			<br/>
			<h>Home</h>
			<br/>
			<center>
				<div width="34">
					<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim adminim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl utaliquip ex ea commodo consequat.</p>
				</div>
			</center>
			<br/>
		</div>
	</center>
</body>
</html>

Edited by oeed, 10 October 2014 - 11:57 PM.


#15 Rectar2

  • Members
  • 43 posts
  • LocationThe Universe

Posted 10 October 2014 - 11:50 PM

It's funny, because I was actually working on another format called CCML. This kinda stuff always happens to me.

#16 oeed

    Oversimplifier

  • Members
  • 2,095 posts
  • LocationAuckland, New Zealand

Posted 11 October 2014 - 02:57 AM

Quote

It's funny, because I was actually working on another format called CCML. This kinda stuff always happens to me.

Quick and the dead :P
Out of curiosity, what sort of stuff does it have that this doesn't?


Yet another quick update.

I've been working on forms. I'm trying to make them as identical to standard HTML forms as possible.

Here's a quick screenshot. At this stage I've only got buttons, text boxes, password boxes and drop down menus. If you've got any other suggestions let me know. They're working pretty much exactly how normal forms work, so you can do all the normal stuff in PHP, etc. with them. They support both GET and POST.
Posted Image

Markup:
<!DOCTYPE ccml>
<html>
<head>
  <title>Forms</title>
</head>
<body>
  <br>
  <h color="blue">Create an Account</h>
  <form>
   <center>
	<br>
	<p align="center">Username</p>
	<input type="text" placeholder="Username" name="username">
	<br>
	<p align="center">Password</p>
	<input type="password" placeholder="Password" name="password">
	<br>
	<p align="center">Country</p>
	<select name="country">
	 <option value="au">Australia</option>
	 <option value="de">Germany</option>
	 <option value="nz">New Zealand</option>
	 <option value="us">United States</option>
	</select>
	<br>
	<input type="submit" name="submit">
   </center>
  </form>
</body>
</html>

I've uploaded a preview for this and it's at the bottom of the first post.

Oh and I've also got proof that PHP stuff works.
Posted Image


Edit: I'd like some input as to how cookies should be dealt with. I mean, I don't need cookies in their standard form, but I need some way for servers to keep sessions for login details etc. Any thoughts about the best way to do this?

I'm also thinking about caching. Mainly for images, but maybe for scripts too. It just seems silly waiting for the image to download every time you change page. Any feedback in this regard would be appreciated too.

Edit 2: After taking a better look at how cookies work they won't be possible as you can not view headers with the HTTP API. One way which I think might work is a unique ID system. Basically every browser will be assigned a unique ID from some central server when first opened. The issue with this though is preventing people from changing this ID and mimicking someone else.

Edited by oeed, 11 October 2014 - 06:51 AM.


#17 SquidDev

    Frickin' laser beams

  • Members
  • 1,404 posts
  • LocationDoes anyone put something serious here?

Posted 11 October 2014 - 08:21 AM

I wrote something like this a long time ago, but it was pretty rubbish... You've done a much nicer job!

Couple of bugs and ideas:
  • Ability to view local files with file:// or something. This would allow you to test files without a server.
  • Clicking the scrollbar does not actually scroll - the bar moves but the page doesn't.
  • The BugTest link produces this error: LinkView (Bedrock API) Line 17. Attempt to get length of nil
  • When the URL is longer than the textbox the cursor appears to stay at then end, despite it does actually 'move'.
Now that I type this, I realise that BugTest might be a page for testing this bug... Sorry.

A couple of questions...
  • New lines are drawn as new lines? HTML ignores them unless it is in the <pre> tags, wondering if this is deliberate.
  • Will there ever be support for multipart/form-data as well as the normal encoding? Then we could submit files!

Edited by SquidDev, 11 October 2014 - 08:24 AM.


#18 oeed

    Oversimplifier

  • Members
  • 2,095 posts
  • LocationAuckland, New Zealand

Posted 11 October 2014 - 08:44 AM

View PostSquidDev, on 11 October 2014 - 08:21 AM, said:

I wrote something like this a long time ago, but it was pretty rubbish... You've done a much nicer job!

Couple of bugs and ideas:
  • Ability to view local files with file:// or something. This would allow you to test files without a server.
  • Clicking the scrollbar does not actually scroll - the bar moves but the page doesn't.
  • The BugTest link produces this error: LinkView (Bedrock API) Line 17. Attempt to get length of nil
  • When the URL is longer than the textbox the cursor appears to stay at then end, despite it does actually 'move'.
Now that I type this, I realise that BugTest might be a page for testing this bug... Sorry.

A couple of questions...
  • New lines are drawn as new lines? HTML ignores them unless it is in the <pre> tags, wondering if this is deliberate.
  • Will there ever be support for multipart/form-data as well as the normal encoding? Then we could submit files!

I hadn't see that, it actually looks quite good.

Adding local file support is something I can add in about a minute or two, so I'll certainly do that.

The scroll bar sort of semi works. It's actually just a Bedrock scroll view. If I scroll using my trackpad/mouse wheel it works fine. But yes, it is a little buggy.

Yea, I'm trying to fix that at the moment. Previously you could only have text in links, but I'm making it so you can put images and so on within them.

Again, that's the Bedrock textbox, but I will fix that.


I think I know what you mean, so when there are new lines in, say, a paragraph tag it shows those lines? I just noticed that earlier on the forms test page. I'm not too sure really. I think, unless people disagree, that I'll keep it. I've only found it to be a pain in my experience. But if anyone disagrees with this please let me know.

File uploading... I hadn't thought about that, but it would be super useful. Not too sure how possible it is, but I'll give it a shot.

Edited by oeed, 11 October 2014 - 08:49 AM.


#19 MKlegoman357

  • Members
  • 1,170 posts
  • LocationKaunas, Lithuania

Posted 11 October 2014 - 12:18 PM

View Postkornichen, on 10 October 2014 - 06:21 AM, said:

Very nice work.
I was working on quite the same thing but as always you were faster ;)

Same here :D

Nice work! I really like the simplified HTML here. Did you just used an XML reader library you found somewhere or did you write one yourself? Will this browser handle invalid HTML files correctly (files without <html> or <head> tags, <p> tag in <select> tag)?

#20 wieselkatze

  • Members
  • 221 posts
  • LocationGermany

Posted 11 October 2014 - 12:27 PM

Hey oeed,

as always - I'm impressed! The UI looks really nice; I wish mine would look as fancy as this :P
I'm curious of what you'll come up with with text-align='justify' , heh.

View PostAgentTadpole, on 10 October 2014 - 01:02 PM, said:

I'd love CSS support (I hate inline HTML formatting), but I can see how that's something that would take a while :P

If you already made OneOS, Ink, a CCML parser, then CSS shouldn't be a problem to you, should it? :D





1 user(s) are reading this topic

0 members, 1 guests, 0 anonymous users