Everything about Filters
Filtering is a great way to make the users find really quickly what they are looking for, the apartment of their dreams with just a couple of clicks.
In order to do this, first we must know that:
Filters use property data to do the filtering work
Alright but, what exactly is a property?
A property can be defined as a "characteristic" of any unit, this will be a data of, for example, of how many bedrooms are in ONE apartment.
Not only filters uses property data, property info is replicated among all the app and admin site, you can show properties in list, use them as conditionals and more!.
We can consider there are TWO types of properties:
Typology Properties
These are the properties that are CONSTANT in all the apartments and usually use the same physical structure, you will only set this properties ONE time in admin and it will automatically use the same data for all the units using this typology
These properties are created in NODE BLUEPRINT
We mostly recommend to use these properties in all the typologies you need EXCEPT in floors, since floors are the scenes to be used later in hierarchy
After saving in hauzdEd, these properties will be saved in the ADVANCED tab in admin, under the HierarchyType Section and under the desired Typology
After saving in hauzdEd, these properties will be saved in the ADVANCED tab in admin, under the HierarchyType Section and under the desired Typology
Unit Properties
These are the properties that are UNIQUE for each UNIT in your project, the selected props will be uploaded to the Price List so the Real Estate administrator can manage the info. You need to set these properties in each of the desired HIERARCHY elements, once again, always in the unit, NOT in floor.
You can find just a few options (This will depend as well of the category of the unit):
• Label and Short Label
• Status
• Floor
• Price USD
• Feature, Feature 2 and Feature 3
• Area in Square Meters, Area in Square Feet
You can find just a few options (This will depend as well of the category of the unit):
• Label and Short Label
• Status
• Floor
• Price USD
• Feature, Feature 2 and Feature 3
• Area in Square Meters, Area in Square Feet
After saving in hauzdEd, these properties will be saved in the ADVANCED tab in admin, under the Hierarchy Section AND in the PRICE LIST Tab
Configuration
After understanding how properties work, we can start creating our filters that will be using that same data
1. Go to Filter Section on hauzdEd, there, you will be able to create the filters you need
Slider Property: If you will use a slider, select the one corresponding to the property you will show, if you wont use a slider, leave it blank
Node Search Depth For Conditions: This value represents the hierarchy elements that the filter will search for properties,
For example: if your hierarchy looks like this
►Masterplan
►SubMasterPlan
For example: if your hierarchy looks like this
►Masterplan
►SubMasterPlan
►Building
►Keyplan
►Keyplan
►Apartment
►Floor
►Floor
And we assign the filter in the SubMasterplan, this will be the result
►Masterplan
►SubMasterPlan (Assigned Filter Here)
►SubMasterPlan (Assigned Filter Here)
►Building (1)
►Keyplan (2) Search and Stops Here
►Keyplan (2) Search and Stops Here
►Apartment
►Floor
►Floor
So if we need that the filters look for properties in apartments, we must extend this number to 3 so the result will be
►Masterplan
►SubMasterPlan (Assigned Filter Here)
►SubMasterPlan (Assigned Filter Here)
►Building (1)
►Keyplan (2)
►Keyplan (2)
►Apartment (3) Search and Stops Here
►Floor
►Floor
Filter is ORed with other filters: This is very useful, this will combine the result of the selected filters
OR group Name: with this option, you can CREATE the name of the group of all the desired filters you will combine with Ored
With Sliders this will happen automatically so you will always be able to filter bedrooms + baths + price (For example)
Example:
Lets say we have 6 Types of Amenities, using a common ORed group will allow the user to combine and highlight all the 6 types of amenities filters
Once we create and save our filters, we must assign them to the Node Blueprint where we need it, note that each filter we create, will have a simple numeric ID, we´re going to use those numbers later in the User Interface
After clicking OK, we will have our filters activated in the desired scene when running the app
If you want to change the labels for the names of the filters, you can go to the Advanced Tab, in filters and change them from there
Remember, this filter result will depend of the info you have in the Advanced Tab of the Admin Panel
Color Mods
You can check this EVERYTHING ABOUT COLOR MODS articles
For Filters, you have 2 Sets of color mods:
Filter Pass: The colors of the part elements with a correct match of the conditions (Filter Conditions + Color Mods Conditions)
Filter Fail: The colors of the part elements where the filter could NOT find any match of conditions (Filter Conditions)
UI Customization
The layer that we need are one of the Light Blue Layers
We need to know a couple of things before editing
• Filters WITHOUT SLIDERS will go to the left side of the screen: Example: btnFilter1{g="g4",f="S",ref={refFilter,1,"left"},t={tFilterShort,1,"left"},ifHasFilter={1,true,"left"},alv={alvFilter,1,"left"},af={rand,{-50,0},{-20,0}}}
• Filters WITH SLIDERS will go to the right side of the screen: Example: btnFilter1{g="g3",f="S",ref={refFilter,1,"right"},t={tFilterShort,1,"right"},ifHasFilter={1,true,"right"},alv={alvFilter,1,"right"},af={rand,{20,0},{50,0}}}
• Everything is already set up so the engine can PLACE AUTOMATICALLY the filters according to their slider information
• Remember the numeric ID we saw when adding the filter to node blueprint? That number correspond to the one in the layer name
btnFilter1{g="g3",f="S",ref={refFilter,1,"right"},t={tFilterShort,1,"right"},ifHasFilter={1,true,"right"},alv={alvFilter,1,"right"},af={rand,{20,0},{50,0}}}
btnFilter1{g="g3",f="S",ref={refFilter,1,"right"},t={tFilterShort,1,"right"},ifHasFilter={1,true,"right"},alv={alvFilter,1,"right"},af={rand,{20,0},{50,0}}}
That means: if we want to customize the icon for this filter:
Considering:
• It does NOT have a slider
• It does NOT have a slider
• It has number 4
The button I need to modify is:
btnFilter4{g="g4",f="S",ref={refFilter,4,"left"},t={tFilterShort,4,"left"},ifHasFilter={4,true,"left"},alv={alvFilter,4,"left"},af={rand,{-50,0},{-20,0}}}
btnFilter4{g="g4",f="S",ref={refFilter,4,"left"},t={tFilterShort,4,"left"},ifHasFilter={4,true,"left"},alv={alvFilter,4,"left"},af={rand,{-50,0},{-20,0}}}
Inspecting again the .ai file, at first glance, we can note that most of icons are in EXPORT_RECT, this means that they are not using a graphic but a REFERENCE
To stop using that reference and use a custom icon, you need to:
1. Move the layer to EXPORT_IMAGE
2. Remove ALL the ref instruction:
2. Remove ALL the ref instruction:
btnFilter4{g="g4",f="S",ref={refFilter,4,"left"},t={tFilterShort,4,"left"},ifHasFilter={4,true,"left"},alv={alvFilter,4,"left"},af={rand,{-50,0},{-20,0}}}
So final layer name would be :
btnFilter4{g="g4",f="S",t={tFilterShort,4,"left"},ifHasFilter={4,true,"left"},alv={alvFilter,4,"left"},af={rand,{-50,0},{-20,0}}}
3. Place you Custom icon IN CONTENT LAYER, within the space of your button
You can follow these steps for any other icons you want to customize and you can add more just by duplicating elements and changing numeric IDs;
btnFilter6{g="g4",f="S",t={tFilterShort,6,"left"},ifHasFilter={6,true,"left"},alv={alvFilter,6,"left"},af={rand,{-50,0},{-20,0}}}
btnFilter9{g="g4",f="S",t={tFilterShort,9,"left"},ifHasFilter={9,true,"left"},alv={alvFilter,9,"left"},af={rand,{-50,0},{-20,0}}}
.....
.....
After Running hauzdUI Script and importing into the engine, you should see your custom icons properly placed
Remember always to save your changes in hauzdEditor and in our Admin site to always make sure you´re using updated information!
If you have any technical question regarding this topic, you can go to our forum section and post your question, our support team will reply as soon as possible with a detailed tutorial
Related Articles
Everything about 360 Views
Prerequisites: hauzdEd V 1.06.79 or newer Download Recommended 3Ds Max HDRI to Cube Map Renderer You can use you own Render Setup up for this 360 image, do it exactly as if you are doing a normal static render. This following section can be ...Everything About Plan 2D
In HauzdEd To activate or deactivate the 2d option of the scene, go to your scene blueprint and check "Import 2D" Having this option enabled, you will have the option to import and view the 2D Elements The engine will import and use the element ...Everything about Cameras
In this documentation you will master the camera tools and all the functionalities to make it work exactly as you want and create an impression for the client since the very first view! First, we need to understand that hauzd Engine will create the ...Introduction to Hauzd - Part 4
Para ver el video con subtítulos en español, actívalos en youtube Introduction to Hauzd - Part 4 In this video we will learn how to modify and use our interface template to create an unique look for your client. Your clients will always appreciate if ...Starting with Surroundings
Prerequisites: hauzdEd 1.6.068 or newer .fbx and .max MAP default file https://downloads.hauzd.com/resources/surroundings.rar STANDARD UI https://downloads.hauzd.com/gettingstarted/standardui.rar 1. In your Surroundings go to Small Scale Maps ...