sketch upload to blog

Processing with Other Languages

xnataliiix

in Processing with Other Languages • 3 months ago

hi,

I recently started using processing and I really would love to share some of my work on my blog.

Unfortunately, eventhough I tried to follow some advices I found online I can't manage to get it right..

I don't know if it's relevant, but I am using the gandi blog: http://en.gandi.net/hosting/blog

I've tried to put this simple code into a new blog entry like this:

void setup()

{ size(200, 200);

background(100);

stroke(255);

ellipse(50, 50, 25, 25);

}

</script><canvas width="200px" height="200px"></canvas.

but all I've got published was the code, not the sketch :/

I hope someone can help me here :)

best regards,

Replies(19)

benj.n.su..

oh. also, in the future. it is better to post questions about Processing.JS in the "Processing With Other Languages" section of the forum. No prob or nothing but might result in a quicker response by those who watch out for questions on PJS.

xnataliiix

Re: sketch upload to blog

3 months ago

hi,

thank you for your fast reply and I will remember for the future to post this questions in the other forum section :)

I've tried to follow your advice and copied this in my blog post:

void setup() {

size(200, 200);

background(100);

stroke(255);

ellipse(50, 50, 25, 25);

println('hello web!');

}

</script>

(I also used tried "test.pde" as mySketchID")

unfortunately I still have nothing shwoing up in my post except the code text..

what I've also changed is that I've loaded the processing-1.4.1.min.js library into my blog media library.

I've

attached a screenshot of how the entry looks like... maybe I'm missing something very basic there?

thanks for your help,

Makio135

Re: sketch upload to blog

3 months ago

this seems quite strange but the problem comes from the canvas id: "test", change it to something else and it will work

( And just to keep correct Processing syntax, string like hello web should have double quote: "hello web", single quote are for char: 'a' )

Makio135
http://makio135.com/

benj.n.su..

Re: Re: sketch upload to blog

3 months ago

" ( And just to keep correct Processing syntax, string like hello web should have double quote: "hello web", single quote are for char: 'a' )"

good call. the reason why it's in single quotes is because it's directly from the processing.js website and javascript does not require such differentiation.

xnataliiix

Re: sketch upload to blog

3 months ago

I've changed the id to "mySketch", (that's what you've meant; just to change the name?)

but it didn't help either...

I was thinking maybe I should additionally upload the sketch somewhere inside the blog?

or maybe there is something wrong with the editing mode?

I'm using the xhtml modus for my blog entry, but there are two parts: visual and source... if I copy my code into the 'visual' box it displays only text on my post, if I try to copy the code only into the 'source' box an error occurs that I need to put some content in my entry..

(I've already corrected the string to "hello web", thanks )

xnataliiix

Re: sketch upload to blog

3 months ago

what I've just realised, is that the sketch or at least the 'place' for it (for example 200px / 200px) already is inside of the post,

but still nothing that should be inside the sketch is displayed...

I thought it might be an important information?

also every time I click 'save' those to lines disapear from the source code:

benj.n.su..

Re: Re: sketch upload to blog

3 months ago

at this point it would be a good idea to look directly at how the page is loading. do you have a URL for your blog post with the broken sketch in it? post it and i'll take a look under the hood.

Makio135

Re: sketch upload to blog

3 months ago

@benj.n.sugar yes i've seen the simple/double quote error on the processingjs website but lacked time to file it more over since javascript is way more permissive, still the code would throw an error if tested in Processing

@xnataliiix: have you updated this line according to your sketch name?

Copy code

<script type="application/processing" data-processing-target="mySketch">

Makio135
http://makio135.com/

xnataliiix

Re: sketch upload to blog

3 months ago

1. the URL to my sketch post:

http://blog.iofia.com/post/2013/07/03/fisrt-sketch

2.yes, my current sketch has the name " mySketch"...

http://blog.iofia.com/public/mySketch.pde

benj.n.su..

Re: Re: sketch upload to blog

3 months ago

based on the image you provided above, it does not appear that you have any html code inside of your post (the <script> and <canvas>).

the internals of the html on your blog also do not show any code there.

i cannot tell if the code isn't there because of an error with your blog framework, or if it's because, like the above image, there actually isn't any code there.

do you have a post with the code in it like you did in your post above?

this one: https://forum.processing.org/topic/sketch-upload-to-blog#25080000002268505

xnataliiix

Re: sketch upload to blog

3 months ago

sorry, this screenshot was probably a bit misleading...

I have to windows there, one is the 'visual' window and the other one the 'source' window , like her:

what I did is:

-I wrote the first sentence:

"this is the sketch: "mySketch" " in the visual window (because otherwise the blog entry demands some content)

-I copied the code into the source window:

Copy code

<script language="javascript" src"http://blog.iofia.com/public/processing-1.4.1.min.js"> </script>
<script type="application/processing" data-processing-target="mySketch">
void setup() {
size(200, 200);
println("hello web!");
}
void draw(){
background(100);
stroke(255);
ellipse(50, 50, 25, 25);
}
</script>
<canvas id="mySketch" width="200px" height="200px"> </canvas>

-I saved the entry and published it

what I also realised is that eventhough I copy the whole code into the source window, after saving the entry, when I open the source window, what is left there is:

Copy code

this is the sketch: "mySketch"<p>
<script type="application/processing" data-processing-target="mySketch">
void setup() {
size(200, 200);
println("hello web!");
}
void draw(){
background(100);
stroke(255);
ellipse(50, 50, 25, 25);
}
</script>
</p>

Makio135

Re: sketch upload to blog

3 months ago

In your code preview image you wrote:

Copy code

this is the sketch: "mySketch"<p>

you also missed a = :

Copy code

<script language="javascript" src="http://blog.iofia.com/public/processing-1.4.1.min.js"> </script>

You should try this:

Copy code

<p>this is the sketch: "mySketch"</p>
<script language="javascript" src="http://blog.iofia.com/public/processing-1.4.1.min.js"> </script>
<script type="application/processing" data-processing-target="mySketch">
void setup() {
size(200, 200);
println("hello web!");
}
void draw(){
background(100);
stroke(255);
ellipse(50, 50, 25, 25);
}
</script>
<canvas id="mySketch" width="200px" height="200px"> </canvas>

Makio135
http://makio135.com/

xnataliiix

Re: sketch upload to blog

3 months ago

I have changed that but it seems it's not the problem either... :/

benj.n.su..

Re: sketch upload to blog

3 months ago

well.

i just took another look at the internals using Firebug/Web Inspector (which you should use if you are not already). now that I know your code is in the post, I can say that your code is flat out not being inserted into your html.

                <div class="post">
               

                 <h2 id="p740988" class="post-title">fisrt sketch</h2>
                

<p class="post-info">

By

                  <a href="http://blog.iofia.com/public/layout_styles.css">IofIA</a>
                 

                  on Wednesday 3 July 2013, 17:17 -
                 

                  <a href="http://blog.iofia.com/post/2013/07/03/fisrt-sketch">Permalink</a>
                 

                 </
                 p>
                

<div class="post-content">

                  <p>this is the sketch: "mySketch"</p>
                 

                 </
                 div>
                

                </
                div>
               

sometimes free web services will block/filter uncommon files such PDE and even common ones like Javascript (presumably to prevent malicious usage). a search of the gandi forums yielded that at least as of may 2012, gandi blogs does in fact filter out javascript.

http://groups.gandi.net/en/topic/gandi.en.blog/20452

i do not think you can use this service.

xnataliiix

Re: sketch upload to blog

3 months ago

that's very bad, but it seems like there is nothing we can do about it :/

I already wrote to the gandi support service, but I don't actually think this is going to change anything..

anyway;

tahank you guys for your time and help!

I definitely learned a lot and hopefully will be able to share my processing sketches using another blog provider...

Makio135

Re: sketch upload to blog

3 months ago

you could try to go for a wordpress or a tumblr, both support Processingjs

Makio135
http://makio135.com/

benj.n.su..

Re: sketch upload to blog

3 months ago

it is unfortunate. These days blocking Javascript is nearly the same as blocking HTML (to me at least). It's a completely fundamental language to the web. There are definitely other places that will give you some server space for free. If you find a good one, come back to this thread and post them so everyone will know about them instead of only being able to hypothesize that they exist. you know what. i'm going to actually start a separate thread now. good luck!

xnataliiix

Re: sketch upload to blog

3 months ago

I definitely will!

thanks again :)

Top Reply