graffitiprojectindigo/urbanchameleon

UrbanChameleon.eu is an online platform to disseminate contemporary graffiti found along Vienna's Danube channel (Austria). Built with TypeScript, Next.js, and Cesium Technology, the platform relies on OpenAtlas and its CIDOC CRM ontology to provide a user-friendly interface for visualising, exploring and searching graffiti and their metadata.

urbanchameleon's Issues

Determine Dark Mode Color Scheme

The platform needs a cohesive and visually appealing color scheme for its dark mode.

Tasks:

1. Research Dark Mode Trends: Look into popular and effective dark mode color schemes used in similar platforms or applications.
2. Choose Primary and Secondary Colors: Decide on the main colors for background, text, buttons, and other UI elements.
3. Implement and Test: Apply the chosen color scheme and test it for readability, contrast, and overall aesthetics.
4. Gather Feedback: Consider getting feedback from peers or potential users to ensure the color scheme is well-received.

Additional Context:
A well-designed dark mode can reduce eye strain for users and offer a fresh look to the platform, especially in low-light environments.

Determine Optimal Presentation for Leaflet Map

The current map layout and style need optimization to best fit the platform's design and user needs.

Tasks:

• Evaluate the current map presentation (zoom level, center point, layout).
• Decide on the most suitable base map style (e.g., streets, satellite, dark mode).
• Consider whether a full-width layout or a boxed layout would be more effective.

Add Search and Filtering Capabilities to Leaflet Map

Users should be able to easily find specific graffiti or locations and filter data based on various criteria.

Tasks:

• Implement a search function for specific graffiti or locations.
• Add filtering options to view data based on criteria like artist, date, type, etc.

Connect Leaflet with Resium container

Implement Heatmap Layer on Leaflet Map

A heatmap can provide insights into high-activity graffiti regions.

Tasks:

• Identify suitable Leaflet plugins or libraries for heatmap functionality.
• Integrate the heatmap layer to visualize graffiti density.

Add Resium container

Refine Rows and Add Export Functionality to Graffiti Data Table

The graffiti data table needs refinement in terms of determining the necessary rows and providing an export functionality for the selected data.

Tasks:

1. Determine Necessary Rows: Review the current data and decide on the essential rows that need to be displayed in the table. Consider information like graffiti artist, location, date, type, etc.
2. Implement Export Function: Add a feature that allows users to select specific data rows and export them as a TSV (Tab-Separated Values) file.
3. UI Enhancements: Ensure the export button is easily accessible and intuitive. Maybe add a small tutorial or tooltip explaining the export process.

Additional Context:
Having a refined data table will enhance user experience and the export functionality will provide users with flexibility in data usage.

Fix the displayed images.

It might be due to the OpenAtlas API changing.

Improve Map Export Features with North Arrow and Scale Bar

The exported map view should provide more geographical context.

Tasks:

• Allow users to export the current map view as an image.
• Ensure the exported image includes a north arrow and a scale bar.

Add Time Slider to Leaflet Map

To visualize the evolution of graffiti over time, a time slider is needed.

Tasks:

• Research suitable libraries or plugins for implementing a time slider with Leaflet.
• Design and integrate the time slider to allow users to filter graffiti data based on specific time frames.

Fix the image carousel on the landing page

Also maybe add better thumbnail selections.

Transfer to Typescript

Decide on navbar

Should the navigation bar be fixed on top or still visible while scrolling down:

• Research best UX/UI practices

Add Theme Switcher to Navigation Bar

To enhance user accessibility and preference, a theme switcher (dark/light mode toggle) should be added to the navigation bar.

Tasks:

1. Design Switcher Icon: Create or choose an icon that clearly indicates the theme-switching functionality.
2. Implement Toggle Functionality: Ensure the switcher toggles the theme between dark and light modes effectively.
3. Positioning: Place the switcher in an easily accessible location within the navigation bar, ensuring it doesn't disrupt the overall design.

Additional Context:
Having a theme switcher in the navigation bar allows users to easily switch between themes without navigating to settings or another page.

Logo and title scale inconsistently across screen sizes

I think it would be best to make a vector graph of the logo + platform title and make it scale like the logo on the project INDIGO webpage

Hosting Solution

Now that INDIGO is coming to an end, we have to decide on the final hosting solution for the online platform, which will ensure a 2D and 3D graffiti visualisation. We have to decide between a dedicated server solution and a managed platform, and consider our technical, budgetary, and maintenance needs.

Motivations:

• tech requirements
  • storage of 3D model data and orthographic photos
  • fast access for users not only in Vienna, but also around the world
  • Integration with CesiumJS
• budget: around 1000€ (since the project is concluding soon there will be no further budget)
• limited in-house technical experience ongoing, since project is concluding

Options:

A. Hetzner Server:

• Offers autonomy and control over the platform.
• Requires hands-on management, potentially leading to additional costs (job position).
• Integration with our tools would need manual setup and maintenance.
• Dedicated server solution but might exceed our budget in the long run due to unforeseen maintenance costs.
• Current cost calculations: 1000€ for one year, not including the maintenance.
  B. Vercel/Cesium ion Combination:
• Managed solution that takes care of many technical issues.
• Seamlessly integrates with our tools, especially CesiumJS for 3D content, as they also include streaming and storage of the 3D models.
• Cost-effective (at least the free versions), especially considering our budget constraints.
• Offers specialised 3D content management through Cesium ion, aligning with our tech requirements.

Proposal:

Given our specific needs and constraints, I propose we opt for the Vercel/Cesium ion combination. This solution not only aligns well with our technical requirements but also offers a cost-effective and low-maintenance platform. While it has some limitations, especially on the free tiers, the ease of use, integration capabilities, and 3D content management make it a compelling choice.

Alternatives considered:

We did consider going with the Hetzner server, which offers more autonomy and control. However, the potential challenges in terms of setup, maintenance, and additional costs make it less ideal for our situation. While it provides a robust solution, the technical demands and potential budget overruns make it a riskier choice for Project INDIGO.

Work on landing page design

Table optimisations

• column cannot be made wider, or smaller, so the heading is unreadable on my phone
• change "colors" to "colours"
• every image leads to "unknown graffito"
• units for area needed. Please write: area, m²
• round lat and long coordinates to 6 or max 7 decimal numbers (after that, one indicates sub-mm)

Implement Individual Graffito Showcase Page

To provide detailed information and a closer look at each graffito, an individual showcase page should be implemented, accessible by clicking on a table row or map marker.

Tasks:

1. Design Showcase Page: Determine the layout and elements to be displayed on the individual graffito page. This might include high-resolution images, artist details, location, date, and any other relevant information.
2. Linking from Data Table and Map: Ensure that clicking on a row in the data table or a marker on the map redirects the user to the respective graffito's showcase page.
3. Navigation: Implement easy navigation options to go back to the main table or map view from the showcase page.

Additional Context:
The individual showcase page will offer users a deeper insight into each graffito, enhancing the platform's informational value.

Improve Responsiveness Across All Components

Some components of the platform aren't fully responsive, leading to a suboptimal user experience on various devices.

Tasks:

1. Audit Current Components: Review all components to identify non-responsive elements.
2. Prioritize Critical Components: List components that are most crucial for user experience.
3. Implement Responsive Design: Adjust styles using SCSS media queries for different screen sizes. Check both portrait and landscape orientations.
4. Testing: Test on multiple devices to ensure consistent behaviour.
5. Documentation: Update code comments or repo docs with significant changes or decisions.

Image carrousel on home page does not work

neither on the phone (Android + Brave) or desktop (Win 10 + Brave)

Menu does not collapse on phone screen

The menu is not aligned and cut on the right.