Scratch

sparks · 2011-04-20 16:47:15

Magnie was discussing this earlier and I've made a few simple ones that just display images from webpages, but I think it's high time that someone actually used a variant of Scratch to create a browser! I've made a start already and I'm wondering if Magnie and perhapse a graphic artist (i'm thinking SkyStar?) would like to join me in a collaberative effort?

I'm using Panther as it has web connection blocks and custom blocks allow text stamping, web image importing and possible php POST and GET functions.

__________________________________________________________________________________
Aims
diplaying:

page text
background image
links
images

able to:
post to some areas such as the Scratch fora
provide a link to the page in your default browser for non-supported page options such as flash videos, videos in general, sounds and such.

Why am I doing this?
Because it is the first time anyone has used a scratch based program to write a browser, because it is a challange, a chance for collaberation and generally a chance for some fun and learning!

Last edited by sparks (2011-04-20 17:16:57)

LS97 · 2011-04-20 17:57:05

This, is, awesome smile

I'm looking forward to seeing the result! Good luck!

I might post more thoughts about this in the future once the idea develops.

Magnie · 2011-04-20 19:43:06

I find putting my name into your topic a very funny way to get me to read this... xD

Anyway, I might be able to do a few things, but I'm not the most fluent in CSS or Javascript. I'll be able to do a few things with pure HTML web pages, but any more than that will be a different story. Though I'll see what I can do. smile Do you have a basic project already set up?

Edit: Also, how would we download the images?

Last edited by Magnie (2011-04-20 19:48:33)

sparks · 2011-04-20 19:55:14

I have a basic project going, I'll post a download later. Importing images is very cool and possible thanks to MathWizz who made the following block:

get web image $String$

Code:

  | img newC |

    (t1 asLowercase endsWith: '.gif') ifTrue: [
        img _ (GIFReadWriter new setStream: (HTTPSocket httpGet: t1)) nextImage.]
    ifFalse: [
        (t1 asLowercase endsWith: '.png') ifTrue: [
            img _ (PNGReadWriter createAFormFrom: (HTTPSocket httpGet: t1) contents) first]
        ifFalse: [
            img _ HTTPSocket httpJpeg: t1]].

    newC _ ImageMedia new form: img; mediaName: (self unusedMediaNameFromBaseName: (self defaultImageMedia mediaName)).

    self addMediaItem: newC.

Very useful wink It does absolutely fail to import the pngs for project thumbnails on the Scratch site for some odd reason...

Magnie · 2011-04-20 23:00:20

Remember to add that one block where it prints text on the screen ( I still haven't found the block for SNForum ). Get the blocks we need and I'll code some basic starting. smile

sparks · 2011-04-22 15:07:15

I've sent a first draft of the project to Magine and I thought I would post an update here for those following with interest!

The current project has terrible graphics, but I'm not worried about that right now - wait till the project is a little more developed and a graphic artist offers their services smile

The project has the following features so far:

connects to an remembers your homepage upon startup. (uses files to remember, even if you do not save the project).

displays the page URL in a top bar which you can click to retype.

displays the page's title at the top of the project.

has refresh, forward and back options as well as the makings of a browser history.

can stamp text and display images from the webpage.

problems encountered so far:

the current stamping method (using the block code given by Mathwizz) cannot stamp more than one colour/font/size at once and does not support bold or italics.

have a screenshot!

LS97 · 2011-04-22 15:37:23

The project's going well, I take it!

What's wrong exactly with the stamping method? I shouldn't think it has any problems...

If you're having problems with nesting, try 'decomposing' into a list first containing every letter, including its corresponding color/effects values, and then stamp from that.

fanofcena · 2011-04-23 01:28:58

Oi why dont u guys use microsoft internet explorer as a frame init ? like windows media player and skype does ????????? (or some other browser being loaded in background)

because making a browser via scratch (hmm) sounds intresting but u will have to follow HTML standards , Javascript , CSS , Vbscript , FTP , and some more protocols (yawn) and tooo much things ... (so far starting from beggining dosnt feels very good)

Last edited by fanofcena (2011-04-23 01:29:58)

sparks · 2011-04-23 02:58:23

fanofcena wrote:
Oi why dont u guys use microsoft internet explorer as a frame init ? like windows media player and skype does ????????? (or some other browser being loaded in background)

because making a browser via scratch (hmm) sounds intresting but u will have to follow HTML standards , Javascript , CSS , Vbscript , FTP , and some more protocols (yawn) and tooo much things ... (so far starting from beggining dosnt feels very good)

... woah.

Erm, I think there are two problems with using an Internet Explorer frame:

1) It would kinda take the challange out of the project.

2) Internet Explorer is pretty lame. Firefox or pretty much any other browser is better tongue

We're not making this in Scratch, we're working on it in Panther.
_____________________________________________________________________________-

@LS97, The stamping method currently uses a block that can stamp entire pieces of text at once:

Code:

(stage := self ownerThatIsA: ScratchStageMorph) ifNotNil: [stage createOrResizeTrailsForm. form := stage penTrailsForm] ifNil: [^ self].
canvas := FormCanvas on: form.
canvas text: t1 at: t2+240@(t3 negated + 180) font: (StrikeFont fontName: t4 size: t5) color: t6.
stage changed.

(credit Mathwizz)

This method is a LOT faster than stamping individual characters, you can stamp a line at a time, but it can only stamp one colour/font/size in one go, and with no way of knowing how far across the page the last piece of text went, you can't quickly work out where the X pos of the next stamp should be. We need a "width of text $String$ with size $Number$ and font $String$" block really.#

P.S, I went out last night and the car in front of mine had a number plate starting with LS97 tongue

Last edited by sparks (2011-04-23 03:00:26)

TRocket · 2011-04-23 03:15:57

i'll try and help please send me the link to the panther.image
i've been thinking about making a browser for a long time...

Last edited by TRocket (2011-04-23 03:16:43)

TheSuccessor · 2011-04-23 07:25:35

I could try to get post requests to work.

LS97 · 2011-04-23 07:47:17

sparks wrote:
fanofcena wrote:
Oi why dont u guys use microsoft internet explorer as a frame init ? like windows media player and skype does ????????? (or some other browser being loaded in background)

because making a browser via scratch (hmm) sounds intresting but u will have to follow HTML standards , Javascript , CSS , Vbscript , FTP , and some more protocols (yawn) and tooo much things ... (so far starting from beggining dosnt feels very good)
... woah.

Erm, I think there are two problems with using an Internet Explorer frame:

1) It would kinda take the challange out of the project.

2) Internet Explorer is pretty lame. Firefox or pretty much any other browser is better

We're not making this in Scratch, we're working on it in Panther.
_____________________________________________________________________________-

@LS97, The stamping method currently uses a block that can stamp entire pieces of text at once:

(credit Mathwizz)

This method is a LOT faster than stamping individual characters, you can stamp a line at a time, but it can only stamp one colour/font/size in one go, and with no way of knowing how far across the page the last piece of text went, you can't quickly work out where the X pos of the next stamp should be. We need a "width of text $String$ with size $Number$ and font $String$" block really.#

P.S, I went out last night and the car in front of mine had a number plate starting with LS97

Ouch.
A solution: remake that block and add some code which parses color and effects, then stamps as many characters as it can on one line (then move on to the next). That would kind of defeat the purpose of a "Scratch" browser though...

And that could be my plate! Oh never mind, mine starts with iTunes's favorite audio format tongue

Last edited by LS97 (2011-04-23 07:48:04)

Magnie · 2011-04-23 09:48:33

Sparks: As someone said we can parse every letter of a line, and if it hits a then it sets the "color" variable to the color in the HTML tags, then we can use the operator block "index string" and use that to print the letter starting after > and ending at . We will be putting variables into the Stamp Text block to guide all the colors, fonts, text size, etc. smile

fanofcena · 2011-04-23 11:18:17

sparks wrote:
fanofcena wrote:
Oi why dont u guys use microsoft internet explorer as a frame init ? like windows media player and skype does ????????? (or some other browser being loaded in background)

because making a browser via scratch (hmm) sounds intresting but u will have to follow HTML standards , Javascript , CSS , Vbscript , FTP , and some more protocols (yawn) and tooo much things ... (so far starting from beggining dosnt feels very good)
... woah.

Erm, I think there are two problems with using an Internet Explorer frame:

1) It would kinda take the challange out of the project.

2) Internet Explorer is pretty lame. Firefox or pretty much any other browser is better

We're not making this in Scratch, we're working on it in Panther.

U want netscape source code ??? lol i can get u it smile trust me making a browser from beginning is very very very hard (i tried (roll) ) and failed , when i was using JAVA for it sad ,

Good Luck to you guys! though big_smile

well making from scratch i meant -> Making from the very beginning .

now btw without javascript functions enabled hardly a few websites will run on ur browser so good luck , if u guys need any help i will be happy to help smile ,

Last edited by fanofcena (2011-04-23 11:18:49)

ProgrammingFreak · 2011-04-23 12:59:54

This is a great idea! I like it a lot! I can't wait to use it. big_smile

TRocket · 2011-04-23 13:19:17

can i help?

meowmeow55 · 2011-04-23 13:40:52

Magnie wrote:
Sparks: As someone said we can parse every letter of a line, and if it hits a then it sets the "color" variable to the color in the HTML tags, then we can use the operator block "index string" and use that to print the letter starting after > and ending at . We will be putting variables into the Stamp Text block to guide all the colors, fonts, text size, etc.

Why would you rely on tags? They're deprecated, as their functions have been taken over by CSS. Unless you know how to get/have implemented getting stuff from CSS like that already.

Magnie · 2011-04-23 14:28:49

I'll rely on those until I know CSS tongue

sparks · 2011-04-23 15:04:14

CSS isn't hard, except that the CSS stylesheet is a seperate document, which means an extra place to search and load.

My problem isn't parsering the html to find colours and such - it's getting more than one on one line. Think about it, if "hello" was black and "world" was red and you wanted them one the same line, you would currently have to work out at which pixil the word "hello" ended after you had stamped it in order to stamp "world" after it. Without sending a sensing sprite across the line until it wasn't touching the previous colour (black) this would take a long time and once background images and such are added, It wouldn't work. We need to know the pixel width of the first string in order to stamp the second as the two texts of different colours cannot be stamped at once using the current block. If someone knows how to get it to post more than one at once, seperating them using CSS or HTML tags that would be pretty great.

Magnie · 2011-04-23 18:41:03

Yes, that's what I mean, parse each line for individual colors and fonts. smile Though CSS might be easier to do that, but I'm unsure.

fanofcena · 2011-04-24 10:47:38

How is xmlhttp request going to be accomplished as well as javascript ?

Taneb · 2011-04-24 17:01:53

With great effort. Scratch (and therefore Panther) is Turing-complete, so it should be possible.

elimantor · 2011-08-23 20:42:02

where and when can we get this!!?!?!?!!?!?!

didjexpert · 2011-08-23 20:58:39

Seriously, ur talking about HTML, CSS, JavaScript, parsing, what's wrong with a few (ok, maybe a lot) new blockspecs to do the work, and then make the project?

Magnie · 2011-08-24 09:26:29

Here is the current copy of the web browser, we haven't worked on it for a few months, so yeah. scratchnetwork.zxq.net/web%20browser.zip

Scratch

archived forums

#1 2011-04-20 16:47:15

Panther browser

#2 2011-04-20 17:57:05

Re: Panther browser

#3 2011-04-20 19:43:06

Re: Panther browser

#4 2011-04-20 19:55:14

Re: Panther browser

Code:

#5 2011-04-20 23:00:20

Re: Panther browser

#6 2011-04-22 15:07:15

Re: Panther browser

#7 2011-04-22 15:37:23

Re: Panther browser

#8 2011-04-23 01:28:58

Re: Panther browser

#9 2011-04-23 02:58:23

Re: Panther browser

fanofcena wrote:

Code:

#10 2011-04-23 03:15:57

Re: Panther browser

#11 2011-04-23 07:25:35

Re: Panther browser

#12 2011-04-23 07:47:17

Re: Panther browser

sparks wrote:

fanofcena wrote:

#13 2011-04-23 09:48:33

Re: Panther browser

#14 2011-04-23 11:18:17

Re: Panther browser

sparks wrote:

fanofcena wrote:

#15 2011-04-23 12:59:54

Re: Panther browser

#16 2011-04-23 13:19:17

Re: Panther browser

#17 2011-04-23 13:40:52

Re: Panther browser

Magnie wrote:

#18 2011-04-23 14:28:49

Re: Panther browser

#19 2011-04-23 15:04:14

Re: Panther browser

#20 2011-04-23 18:41:03

Re: Panther browser

#21 2011-04-24 10:47:38

Re: Panther browser

#22 2011-04-24 17:01:53

Re: Panther browser

#23 2011-08-23 20:42:02

Re: Panther browser

#24 2011-08-23 20:58:39

Re: Panther browser

#25 2011-08-24 09:26:29

Re: Panther browser

Board footer