I'm excited to introduce the HH Village Planner, a web application designed to help you plan and organize your village layouts in Haven and Hearth. Whether you're starting a new settlement or refining an existing one, this tool provides an intuitive grid-based system to make designing easier.
The HH Village Planner is a web-based tool that allows you to create, edit, and manage a grid of cells to represent your village layout. The application includes a variety of features to assist in planning, such as color tagging, dimension guides, an image overlay system, and the ability to save and export your designs.
The tool is continuously evolving, with more features being added over time. Below is a breakdown of the current functionalities.
Features and Functionalities
Here's a detailed rundown of the features available in the HH Village Planner:
1. Color Picker - Select a color to fill cells in your grid. - The current color is displayed in the top left corner. - The color picker stores up to 15 recently used colors for easy access. 2. Color Fill Tool - Changes the color of the selected cells to the currently chosen color. 3. Eraser - Removes color from selected cells, restoring them to a blank state. 4. Create A Box - Fills the edge cells of a selected area with the currently chosen color. 5. Undo & Redo - Undo: Reverts the last change (Ctrl+Z). Only works for color. - Redo: Reapplies the last undone action (Ctrl+Shift+Z). Only works for color. 6. Toggle Dimensions - Switches the display of selection dimensions between the bottom center of the screen and following the mouse cursor. 7. Toggle Grid Guide Lines - Enables or disables grid line guides that extend from the edges of your selection for better visual alignment. 8. Tags - Opens a side panel displaying all colors currently used on the grid. - Allows you to add descriptions to each color, which are saved with the grid. - Displays the number of cells of each color. - Click on a color in the panel to reselect and reuse it. 9. Resize Grid - Adjusts the grid’s dimensions. - Reducing the grid size will remove any content outside the new boundaries permanently, so it's recommended to save your work before resizing. - Increasing the grid size will add blank areas without affecting existing content. 10. Toggle Radii - Displays the influence zones of certain buildings such as Bee Skeps (13-cell radius) and Village Claims (101x101 area). 11. Precision Snap - Toggles image placement precision. - When disabled, images snap to full grid cells. - When enabled, images align with 1/10th of a grid cell for finer positioning. 12. Save/Load/Import/Export - Manage your grid designs with ease. - Rename save slots and store multiple designs. - Export grid data as a file to share or back up your work. - Import saved grid data from a file. 13. Images - Enables the image toolbar for adding and managing images on the grid. - Drag and drop images onto the grid to place them. - Move images by clicking and dragging. - Right-click on an image to toggle its radius visibility, rotate it or delete it. - Images are saved with the grid, but undo, redo, copy, and paste are not currently supported for images. 14. Layers Menu - Toggle layer visibility for better organization. - Lock or unlock the background layer. - Unlocking allows you to move and scale the background image using the mouse wheel. - Hold Shift while scrolling for finer scaling adjustments. 15. Main Menu - Create New Grid: Start a new design. Note: This will erase any progress on the current grid if it was not saved. - Add Background Image: Upload an image as a reference for your design. - Tip: Use the Layers menu to move and scale the background image for precise alignment. - Save/Load: Save your current work or load a previously saved grid.
Hotkeys Overview - Right Mouse Click on an Image: Opens a context menu to rotate, delete, or toggle radius display. - Ctrl+C: Copy selected cells. - Ctrl+V: Paste copied cells. - Ctrl+Z: Undo the last action. - Ctrl+Shift+Z: Redo the last undone action. - Delete: Remove the selected image. - R: Rotate the selected image. - Shift+Mouse Wheel: Adjust background image scaling with fine control.
Getting Started 1. Open the App Access the HH Village Planner here. 2. Create a New Grid Click the menu button (bottom-left corner) and select "Create New Grid". Enter your desired grid size and start designing. Note: The app supports grids up to 1500x1500, but for performance reasons, 1200x1200 is recommended. 3. Designing Your Village Use the Color Picker to select a color. Apply colors using the Color Fill Tool or Create A Box function. Add notes to colors with the Tags feature. 4. Using Images Click the "Add Background Image" button to upload an image as a reference. Unlock the background layer in the Layers menu to move and scale the image. Drag and drop images onto the grid for added detail. 5. Navigating the Grid Zoom: Use the scroll wheel to zoom in and out. Pan: Click and hold the middle mouse button to move around. 6. Save and Export Your Work The app will NOT automatically save your progress, but you can manually save using the Save/Load menu. Use the Export button to save a copy of your design as a file. Load a saved design from a file using the Import option.
Feedback and Support Your feedback is essential in making this tool better! If you encounter any issues or have suggestions for new features, feel free to leave a comment below or reach out directly.
Happy designing!
Privacy and Data Security
It is important to note that none of the data you enter in the HH Village Planner is stored by me anywhere. Everything happens on your PC, and only you have access to that data. Your designs are saved to your browser's local storage, ensuring complete privacy and security.
Updates
21.02.2025 New Features
Image Alignment Fix - Images now align like in-game, with the center of a structure placed in the center of a grid cell instead of the top-left corner snapping to the grid.
Granularity & Precision Improvements - Shift + Drag and Toggle Granularity now behave the same way, allowing movement in accordance with the granularity setting. - Precision Snap Granularity is now adjustable via a range from 1 to 16, where 1 is least precise and 16 allows for movement in 1/16 increments of a cell.
Reset Buttons in Settings - Added reset buttons for grid line color, selection box color, rotation step, and precision granularity, allowing for quick restoration of default values.
Again, thanks to @meabeab for the suggestions!
14.02.2025
New Features
Selection Box Color - Added a setting to customize the selection box color and grid guidelines for better visibility and personalization.
Fixed Clipboard Shortcuts in Search Bar - Ctrl+C/V/A now work properly in the search bar of the images menu.
Spelling Correction - Fixed a typo in Color Descriptions.
Precision Snap Granularity Setting - A new setting for Precision Snap Granularity has been added to the settings menu.
Improved Toggle Buttons - On/Off states added for the Radius and Precision Snap toggle buttons.
Precision Dragging for Images - Holding Shift while dragging an image now temporarily sets Fine Placement Granularity to 0.1, allowing for more precise positioning.
Updated Naming - "Toggle Gridlines" has been renamed to "Toggle Guidelines" for clarity.
Special thanks to @meabeab for the suggestions!
12.02.2025
New Features
Feedback Form Added - A new feedback form has been introduced. - This allows users to easily submit issues or suggestions without needing to visit the forums. - Providing your name and email is optional, but if you'd like a response, please make sure to include your email.
Container Object Images - Added a variety of new container images.
Improvements - Smoke Shed & Compost Bin Images
11.02.2025
New Features
Radius Indicators Added
- All new objects introduced in the last update now have radius indicators.
Domesticated Animal Images - Added images for various domesticated animals. - These are intended to help with tagging and organization.
Crop Images - Introduced a set of crop images for easier visualization of different planted areas.
Improvements - Both animal and crop images are designed at 2x2 size to make them more visible. The intent is for them to be used for tagging different postures and field states.
10.02.2025
New Features
Expanded Structure Library - Added 67 new structures to the image toolbar. - These new structures do not have radius indicators yet—this will be updated in the next few days. - The priority was to get the images implemented first for immediate use. - Search Functionality
A search bar has been added at the top of the image toolbar. - With the large number of items now available, users can quickly search by name instead of scrolling.
Category Tabs for Image Toolbar - Image selection is now organized into categories that match the in-game structure organization. - For example, Windmill is under "Buildings & Construction", aligning with the in-game menu: Build > Buildings & Construction > Houses & Buildings > Windmill - Avoided over-categorization to prevent too many categories with only 1-2 items.
Improvements - Reworked all existing images for better quality and consistency. - Exception: The Village Banner remains unchanged due to its extremely poor in-game quality.
Upcoming Work - Radius on images that are missing it.
P.S. there is a very good chance I've messed up the size on one or many of these images. If you notice something is off let me know and I'll fix it. Dealing with resizing, cropping and editing 67 images was a bit of a pain as most of it is manual.
08.02.2025
New Features
Rotation Step Setting - A new rotation step setting has been added to the Settings Menu. - This allows users to customize how much an image rotates per step when using the R key. - The selected rotation step is saved per grid and included in import/export files.
Hotkey Layout Support - Hotkeys now work across different keyboard layouts. - Previously, hotkeys only worked with the English layout. Now, they should work with most layouts (tested with English and Russian).
Bug Fixes and Improvements - Fixed: Grid line color selector now remains visible on narrow screens. - Fixed: Copying transparent cells no longer pastes them as black; they now remain transparent.
Upcoming Work - Resizing all structure icons and adding them to the tool. (still trying to find these) - Replacing existing placeholder images with actual images from the game for better accuracy.
07.02.2025
New Features
Image Rotation - Images can now be rotated by π/4 (45° increments) using the R key while selected. - Rotation mechanics may affect in-game ranges, particularly for village claims. It's unclear whether the range is calculated from the same point regardless of orientation. If you have any info on that let me know.
Settings Menu - A new Settings section has been added to the User Menu. - Currently, it allows users to customize the grid line color. - The selected color is saved with each grid and is included in import/export files. - More settings will be added in future updates.
Grid Selection Improvements - Ctrl + A now selects all cells on the grid.
Upcoming Work - Resizing all structure icons and adding them to the tool. - Replacing existing placeholder images with images from the game for better accuracy.
05.02.2025
New Features
Background Image Upload - Users can now upload a background image as a reference for their designs. - A new "Add Background Image" button has been added to the User Menu for quick access. - The background image is saved along with the grid, including its position and scale.
Layers Menu Added a Layers Menu that allows users to: - Show or hide specific layers. - Lock or unlock the background layer. - Move and scale the background image for better alignment with the grid. - Fine-tune background scaling using Shift + Scroll Wheel.
Color System Updates - The default color is now transparent, making all uncolored cells see-through instead of white. - Added an Eraser Tool to the toolbar, allowing users to remove colors from selected cells.
Tags Menu Enhancements - The Tags Menu now displays a cell count for each color, helping users track the number of tiles of each type.
Help Section Update - The Help Section has been updated to reflect all recent changes, making it easier to find explanations for new and existing features.
Bug Fixes and Improvements
Fixed: White color appearing invisible in the Color Picker history. Fixed: White color not showing up in the Tags Menu. Fixed: Rotating an image near the edge of the grid no longer causes it to disappear.
Old UI has been completely removed.
As always, feedback is welcome!
31.01.2025
New Features:
Image Placement for Structures: - Added the ability to place images representing structures on the grid. - Current structures include: Village Claim, Village Banner, Bee Skept. Looking for suggestions on more structures to add! Possible additions: Mound beds (though the wiki isn't clear on their radius), Personal claims, Crop markers – Small 1x1 images representing different crops (e.g., carrots, wheat, flax) to help organize fields. Let me know if you have other ideas for structures that should be included! - Each structure has its own radius visualization based on in-game mechanics.
Radius Controls & Image Management: - Right-clicking an image now opens a context menu with options to: Toggle radius, Delete the image - Pressing Delete on the keyboard while an image is selected will also remove it. - Added a global radius toggle in the toolbar to control the visibility of all radii at once. - Both the global toggle and individual image radius must be enabled for a radius to appear.
Save/Load & Legacy Import: - Images and their positions are now saved and loaded along with the grid. - Added an "Import Legacy" button in the Save/Load menu to convert old designs from the previous UI automatically.
UI & Help Section Improvements: - Updated the help section with descriptions of all new features. - Added tooltips for all buttons on the left toolbar for better usability.
Upcoming Changes: The next update will completely remove the old UI. This update will be released as soon as possible, hopefully within a week, but possibly sooner. If you're still using the old UI, now is the time to switch!
30.12.2024
New Functionality and Improvements
New Features:
Resizing Functionality: - A new Resize Button allows users to change the size of the current grid. - Users can specify a new size in a modal and apply changes. Important: Be cautious when resizing to a smaller grid, as anything outside the new dimensions will be lost.
Bug Fixes and Improvements:
Minor UI adjustments for better alignment and consistency.
28.12.2024
New Functionality and Improvements
New Features:
Tags Button: A new button allows you to open a side panel displaying all the colors currently used on the board. You can add descriptions to each color, which will be saved with the grid. Clicking a color lets you select it for reuse.
Toolbar Update: The New/Old UI Toggle and Help buttons have been moved to the toolbar on the left for easier access.
23.12.2024
New Functionality and Improvements
New Features: You can access the new functionality by pressing the New button in the bottom-right corner of the screen. The Help section has been updated to reflect the changes in the new UI. Please refer to it if you have questions.
Key Changes: Grid Size: Grids can now be up to 1,500x1,500 in size. Performance: The tool should feel more responsive overall. Zoom Limitation: Zooming out is now capped to fit a maximum of 300 cells vertically on your screen. Save Slots: - You now have 3 save slots for grids. - Slots can be named, saved, loaded, and exported. - The current slot name is displayed at the top-left of the screen. If you create a new grid, it will default to “New Grid.”
Backward Compatibility: You can import grids created with the old UI into the new version without any issues.
Last edited by nevolia on Sat Feb 22, 2025 6:30 am, edited 14 times in total.
Hi, Nice idea, few things that would be great addition: * description per color so when sharing that others would know what pink means * A few objects with range to be added -> Village claim/ Village banners - but I bet this would require layers to be added to the app so you can see if banners cover whole village etc. * performance improvement
All great things are simple, and many can be expressed in single words: freedom, justice, honor, duty, mercy, hope. - Winston Churchill
Description per color should be very easily doable, my idea was to add `tags`. You could, for example, tag a cell as pali or house or field or anything else game related. Aside from making it obvious to people you share with it would also allow for resource calculations. Based on tags the app could tell you how many logs, rocks, boards and so on you would need to build the village.
Village claim and village banners are also kind of in the back of my mind.
Yeah, performance... I'm a backend dev, this project is basically me learning front end. I'll see what I can do
Nice idea, but right now it's just pixel board without preset figures (that represent buildings). Also there are real monsters among us (we are not allowed to really talk a lot about them), that are building stuff "larpy" and even... diagonally. Right now that tool will never satisfy their primal urges.
I believe when I start adding structures it will not be a big issue to add support for diagonal placement. It's really a matter of adding another layer to the grid and then you can turn the images however you'd like. Given how rare these monsters are I will be putting off the support for that for quite a while. Traveling the world I've barely ever seen anyone place anything off grid. The biggest concern now is performance. To me a village has always been a 100x100-250x250 grid. It was only when roskuwacz mentioned Village claim/Village banners that I realized some villages grow way past 1000x1000.
Again, thanks for the feedback, I highly appreciate it.
Hey Aragnir! What do you mean you can't access the lower part of plan? Does it not allow you to pan around/zoom with the middle mouse button to be able to display the whole grid on your screen? With your grid size you should be able to have no issues fitting the whole grid on your screen by zooming out all the way. I've attached a pic of 160x160 grid.
I'm a backend dev, this project is basically me learning front end. I'll see what I can do 
