Contact Us

spyder

Project: Theme Designer Application for the Spyder IDE Based on PyQt

Objective

  • -Develop a theme designer web app for the Spyder IDE.
  • Generate visually appealing and accessible color palettes for light and dark modes based on a limited set of user-defined colors.
    Implement the APCA (Accessible
  • Perceptual Contrast Algorithm) for improved contrast calculations, promoting inclusivity for users with visual impairments.

Key Features

  • User-Friendly Interface: Intuitive input for up to 5 base colors.
  • Automatic Palette Generation: Generates light and dark mode palettes using the APCA algorithm.
  • Live Preview: Displays Spyder interface elements using generated colors in realtime.
  • Manual Adjustment: Enables users to fine-tune individual color values within the palette.
  • Data Visualization: Provides real-time display of color data, including contrast ratios calculated using APCA.
  • Automatic Adjustment: Automatically adjusts color values to maintain APCA compliance after manual modifications.
  • Accessibility Considerations: Ensures text legibility, sufficient icon contrast, and appropriate color hierarchy based on the semantic importance of elements.

Project Benefits

  • Improved Accessibility: The application directly promotes accessibility by utilizing the APCA algorithm, ensuring greater inclusivity for users with visual impairments.
  • Enhanced User Experience: Simplifies theme creation for Spyder, enabling users to quickly develop visually appealing and accessible themes.
  • Increased Efficiency: Automates the color palette generation process, saving developers significant time and effort.
  • Open Source: The developed site (and IDE themes) will be open source, and we will explore releasing it as its own standalone open-source project to benefit the wider community beyond just that of Spyder.

Plan of Work (12 weeks, 3 interns)

Phase 1: Learning & Foundation (Weeks 1-2)

  • Learn the basics of the chosen web app design (to be selected based on student familiarity and preference), Spyder IDE basics, APCA implementation, and relevant color theory principles.
  • Set up the development environment and project structure.
  • Create a basic UI layout for the web app.
  • API Considerations: [detail specific Spyder-IDE API requirements for integration, maybe?].

Phase 2: Core Functionality (Weeks 3-6)

  • Implement color input functionality and data validation.
    Develop the algorithm for generating light and dark mode palettes based on APCA.
  • Create the live preview display for Spyder interface elements.
  • Implement the color data visualization panel (contrast ratios, etc.).

Phase 3: Refinement & Integration (Weeks 7-10)

  • Implement the manual color adjustment interface with real-time updates.
  • Develop the automatic color adjustment functionality to maintain APCA compliance.
  • Integrate accessibility considerations, ensuring text legibility, icon contrast, and appropriate color hierarchy.

Phase 4: Testing, Documentation & Finalization (Weeks 11-12)

  • Conduct thorough testing of all features, addressing bugs and usability issues.
    Refine the user interface and user experience based on testing feedback.
  • Prepare comprehensive documentation, including a user guide for the application/site.
  • Finalize the application/site for deployment and potential standalone usage.

Deliverables

  • Functional theme designer web site/application for Spyder.
  • Well-documented source code with clear comments and explanations.
  • Comprehensive user guide outlining setup, features, and usage.
  • Project report detailing the development process, challenges, solutions, and outcomes.

Further Reading

  • Somers A. The Realities And Myths Of Contrast And Color: https://www.smashingmagazine.com/2022/09/realities-myths-contrast-color/
  • Whittaker SG, Lovie-Kitchin J. Visual requirements for reading. Optom Vis Sci. 1993: https://pubmed.ncbi.nlm.nih.gov/8430009/
  • A catalog of Myndex Research content, including APCA articles & documentation, related code repositories, and resources: https://git.myndex.com/
  • Colour contrast for user interface components: https://www.accessibility-developer-guide.com/knowledge/colours-and-contrast/user-interface-components/
  • How to calculate colour contrast: https://www.accessibility-developer-guide.com/knowledge/colours-and-contrast/how-to-calculate/
  • Baker, J. The Science of Color Contrast — An Expert Designer’s Guide: https://medium.muz.li/the-science-of-color-contrast-an-expert-designers-guide-33e84c41d156
  • How to choose and combine colors – A thorough analysis of color combinations. – Part 1: https://www.deesignre.com/how-to-choose-and-combine-colors
  • How to choose and combine colors – A thorough analysis of color combinations. – Part 2: https://www.deesignre.com/how-to-choose-and-combine-colors-part-2/
  • The Sessions College Color Calculator: https://www.sessions.edu/color-calculator/
  • Bridge-PCA Contrast Calculator: https://www.myndex.com/BPCA/
  • Color Contrast Ratio Calculator: https://www.msfw.com/Services/ContrastRatioCalculator
  • ATMOS. Create color combinations that look good together: https://atmos.style/color-wheel

Get Involved With POSSEE

Join POSSEE and help us shape the future of open source.

contact us

POSSEE promotes equitable education and open source sustainability, fostering technological and social progress across the globe. 

Quick Links
Get In Touch

© 2024 All Rights Reserved.2024

Skip to content