Customizing Phoebus Theme for Dark Screens
Discover how the Phoebus team successfully transformed the default bright theme of Phoebus into a dark-themed interface by making changes to CSS files and Java source code. Learn about the process, challenges faced, and the overall impact on user experience.
Uploaded on | 0 Views
Download Presentation
Please find below an Image/Link to download the presentation.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author. If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.
You are allowed to download the files provided on this website for personal or commercial use, subject to the condition that they are used lawfully. All files are the property of their respective owners.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author.
E N D
Presentation Transcript
Phoebus in the Dark EPICS Collaboration Meeting April 7-11, 2025 Rutherford Appleton Laboratory Advancing humanity. Engineering remarkable. Urban Bobek Software Developer urban.bobek@cosylab.com 1
Motivation A customer asked if dark-themed screen in Phoebus are possible Colour of widgets can be changed in the editor, but... Phoebus default colours are too bright for dark-themed screens [1] Issue on github gave us confidence to try and change the look of Phoebus o We forked the latest release at the time (4.7.3) [1] https://github.com/ControlSystemStudio/phoebus/issues/1930 2
Changing the Theme Most of the changes were achieved by changing values in the CSS files Color scheme provided by our UX designer CSS files edited: core/ui/src/main/resources/org/phoebus/ui/javafx/css tudio.css o app/display/representation- javafx/src/main/resources/org/csstudio/display/builder /representation/javafx/opibuilder.css o app/display/editor/src/main/resources/org/csstudio/di splay/builder/editor/opieditor.css o 3
Changing the Theme Some parts were not affected by the changes in the CSS files Changes in the Java source code had to be made for some applications o Databrowser default background, axis and trace colours o Annunciator table colours o Color picker background o Error log text colour o Text highlight background colour o ... 4
Changing the Theme Some parts were not affected by the changes in the CSS files Changes in the Java source code had to be made for some applications o Databrowser default background, axis and trace colours o Annunciator table colours o Color picker background o Error log text colour o Text highlight background colour o ... 5
Changing the Theme Some parts were not affected by the changes in the CSS files Changes in the Java source code had to be made for some applications o Databrowser default background, axis and trace colours o Annunciator table colours o Color picker background o Error log text colour o Text highlight background colour o ... 6
Changing the Theme Icons were designed with light color background in mind Inverted most of the icons using mogrify o Some icons worked better with original colors Icon locations: app/display/model/src/main/resources/icons/ o app/display/representation-javafx/src/main/resources/icons/ o 7
Guidelines In collaboration with our UX designer we created guidelines for creating new screens The guidelines cover o Widget style, fonts and colours o Widget layout and spacing o Best practices 8
Guidelines In collaboration with our UX designer we created guidelines for creating new screens The guidelines cover o Widget style, fonts and colours o Widget layout and spacing o Best practices 9
Guidelines In collaboration with our UX designer we created guidelines for creating new screens The guidelines cover o Widget style, fonts and colours o Widget layout and spacing o Best practices 10
Conclusion Changing the look and feel of Phoebus is possible Updating the CSS files is not enough for a complete transformation Screens should be designed with well- defined guidelines Things to consider o Old screens o EPICS module screens o 11
Thank you. Advancing humanity. Engineering remarkable. Urban Bobek urban.bobek@cosylab.com www.cosylab.com 12
