Hi everyone. I’d like to format the index.html page of a p5.js sketch into Processng IDE with CSS external file. I’ve add a new tab in the IDE and I’ve named it ‘styles.css’. This file was created by Processing into root folder of the sketch. But when I add CSS code to this ‘styles.css’ file tab, strange things happen:
text in editor is very small
the active CSS line code in the editor is blinking
in the log console of Processing IDE there are a plenty of lines with error messages (from swing and awt Java libraries apparently). The last error message (java.lang.ArrayIndexOutOfBoundsException
) repeats in never ending loop
When running the sketch from IDE, it works fine into Google Chrome…
Is it possible to use Processing IDE to integrate a CSS file into a p5.js project and editing it? If yes, in which way? Am I doing something wrong or si there a bug into Processing IDE?
It would be great if it would be possible. It would sounds strange if into programming & CSS introduction lessons the teacher would have to tell her/his students to use Processing IDE to edit HTML and JS code but another editor like Notepad++ for the .css file. An even in that case, the fact that a css file will be located into the root folder of a sketch, this will generates automatically a new tab with content of this file into the Processing editor, and all the nice error messages into the console, which is very confusing for beginners.
Thanks a lot for advices and insights!
Laurent
See example of code generating this problem:
index.html
<html>
<head>
<meta charset="UTF-8">
<!-- PLEASE NO CHANGES BELOW THIS LINE (UNTIL I SAY SO) -->
<script language="javascript" type="text/javascript" src="libraries/p5.js"></script>
<script language="javascript" type="text/javascript" src="webpage.js"></script>
<!-- OK, YOU CAN MAKE CHANGES BELOW THIS LINE AGAIN -->
<!-- This line removes any default padding and style.
You might only need one of these values set. -->
<style> body {padding: 0; margin: 0;} </style>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
My Header
</header>
</body>
</html>
I don’t have an answer for you immediate problem, but can I ask you for more details? I know it’s easy to zone in on the problem at hand, but the solution may be something outside of the current scope; for example, there might be another IDE better fits your requirements.
You might just have to change the style element and put all your css there.
Alternatively, you could try using another editor for p5.js such as the p5 web-editor (currently in alpha).
I dont think p5js is designed to build webpages or to be an IDE to do so. I see p5js editor (referring to the p5js PDE editor) to be used to design sketches. When it comes to working in a site, I see p5js as an element in the page consisting of a canvas. If I were to design an actual webpage, I would work with a single IDE like VS Code. I guess sublime, notepad++ or probly atom would work as well.
Not usre if any other online p5js editor has this capability to edit css.
Hi Kfrajet, thanks for your comment! Well, on my side the question is not to use Processing IDE as a “deluxe” editor like Notpead++ or Atom for CSS and HTML. It’s also not a question of opposing defining HTML elements dynamically vs through HTML code. Both way are interesting and have different advantages. Defining HTML elements into .html file offers the possibility to discover and learn HTML as well as seeing/using interaction between a web graphic user interface and a program inside a simple browser (what most of the web applications we use everyday do). And that offers the opportunity to provide to students better and ‘sexy’ web multimedia user interface (that are often very complete to create in desktop application like a GUI application in Java).
Processing IDE under p5.js should be able to simply edit JS, HTML and CSS files (which are the fundation of the web on client side). It does with JS and HTML but unfortunately it’s not the case with CSS. And apparently it’s simply because a bug, not an intention to prevent Processing users to edit CSS. But it’s a little bit annoying when teaching programming saying to students that for a same exercice or project you have to use another text editor whereas you have already one in the main tool you use. If it’s a bug, it’s certainly a very minor one that could easily corrected. I hope so.
Hi @Laurent
You should check the following medium article that describes functionalities of p5.js web editor. If you go to minute 15 of the video, you can see how Cassie modifies html and css in the same editor. She has done an excellent job explaining all the feature of the online editor and you might find it more convenient than the PDE in p5js mode.
