P5.js-web-editor: Console text font size

[yanickrochon]

Nature of issue?

• [ ] Found a bug
• [ ] Existing feature enhancement
• [x] New feature request

Feature enhancement details:

Make the console text font size equal with the editor font size.

[shinytang6]

I can make the font size a little bigger, but l think the editor font size is too big..

[yanickrochon]

Some people have visual impairment, and others may use this tool for teaching. Having the console font size as big as the text editor (and the text editor being unrestricted) would be a nice feature.

[catarak]

I had noticed this when making the web editor tutorial video. Agree that this would be really useful, and it would make sense for the font size to be the same as whatever the user had selected in their settings!

[Janglee123]

I would like to work on this . As a beginner anyone can provide me little help to solve this issue .

[shinytang6]

Hey @Janglee123 , l think one way is to get the font size set by the users in the file client/modules/IDE/components/Console.jsx, and add another property BASE_FONT_SIZE here to influence the final font size.

More specific you can refer to https://github.com/processing/p5.js-web-editor/blob/master/client/modules/IDE/components/Editor.jsx to get the user settings.

[Janglee123]

Thanks @shinytang6 , but I need some more help . is these any way to communicate ?

[catarak]

@Janglee123 feel free to ask questions here, on the ticket! or, another way to get help is to make a [WIP] (work in progress) pull request, and then folks can comment directly on the code you've written so far.

[Janglee123]

Thanks for reply @catarak , as shinytang6 said I can change font size by adding BASE_FONT_SIZE property but that is not enough for user inputted font size After searching in project files I got Preferences.jsx file , which take user input and I edited it to look like this screenshoot by adding consoleFontSize ,setConsoleFontSize in props . but I don't know how to connect it to BASE_FONT_SIZE in Console.jsx.

[yanickrochon]

By the way, I have peeked at the source code and noticed that user preferences are passed as props to React components. Why? Wouldn't it be a better thing to have the preferences accessible directly from an imported module?

[shinytang6]

@Janglee123 You could pass the preference fontSize from the parent component IDEView.jsx to child component Console.jsx, then you could get the user inputted fontsize in Console.jsx, simply like this: https://github.com/processing/p5.js-web-editor/blob/master/client/modules/IDE/pages/IDEView.jsx#L332.

[catarak]

@yanickrochon i don't know what that means! do you have an example? for context, when i started working on this project, i didn't know react/redux at all, so i probably haven't put it together in the best/most optimal/etc. way. so i am very open to help and feedback!