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 (see 'step to reproduce, below) in the PDE 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 a bug of Processing PDE or is it a choice of developpers not letting people use external CSS in p5.js sketch made with Processing PDE?
It would be great if it would be possible to use, create and edit external .css files. 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 your attention! And very big thanks for all your team work developping a real great IDE accessible and motivating beginner as well as geek!
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>
styles.css
header{
background-color:#435F9C;
}
Steps to Reproduce
- open Processing PDE
- create a new sketch wirh Processing PDE
- create a new tab into PDE called 'styles.css'
- type CSS code into then .css file tab
- look at blinking and small text
- look at exceptions into Processing PDE console
Your Environment
- Processing version: 3.3.7
- Operating System and OS version: Windows 10 Professional
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 (see 'step to reproduce, below) in the PDE 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:
) repeats in never ending loop
When running the sketch from IDE, it works fine into Google Chrome...
Is it a bug of Processing PDE or is it a choice of developpers not letting people use external CSS in p5.js sketch made with Processing PDE?
It would be great if it would be possible to use, create and edit external .css files. 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 your attention! And very big thanks for all your team work developping a real great IDE accessible and motivating beginner as well as geek!
Laurent
See example of code generating this problem:
index.html
styles.css
Steps to Reproduce
Your Environment