...
The Wizart Visualizer API allows you to apply products such as wallpapers, floorings, and other materials to specific rooms. To accomplish this, follow the steps outlined below to retrieve the necessary room data, add product information, and submit the final requestroom surfaces. If you’re unsure which material types are applicable for different surfaces (e.g., wall, floor, or ceiling), please refer to our article on Supported Product Types for Wall, Floor, and Ceiling Applications.
...
Step 1: Retrieve Room Data
Start by selecting the room you wish want to work withmodify. Every room in the Wizart system has a unique identifier (UUID) that , which can be obtained through either through the API or the Wizart PIM interface. Once you have With the room _uuidUUID, you can request the detailed data for that about the room.
API Endpoint:
| Code Block |
|---|
http |
Копировать код
GET /api/v1/rooms/{room_uuid}
Example Response:
| Code Block | ||
|---|---|---|
| ||
{
"uuid": "88cc386a-0897-48ea-93ed-a8aee0609253",
"title": "Wizart GO-1551 3",
"image_path": "interiors/reserved/images/4b0a7a56-2f6f-4c22-9135-8f28ea004106.jpg",
"room_type_title": "Bathroom",
"room_type_id": 9,
"width": 2560,
"height": 1706,
"surfaces": [ "wall", "floor" ],
"created_at": "24.01.2022",
"mask_name": "mask.png",
"ceiling": null,
"floor": {
"x": 52.25457191467285,
"y": 88.72437382079792
},
"walls": [
{
"x": 3,
"y": 20,
"wall_id": 0
}, {
"x": 35,
"y": 20,
"wall_id": 1
}, {
"x": 87,
"y": 20,
"wall_id": 2
}
]
} |
The This response provides detailed room information about the room, including surfaces (walls, floor, etc.), dimensions, and unique wall identifiers. You will use this information to apply materials in the next step.
Step 2: Prepare Product Data
Once you have the room data, the next step is to gather product information for the material you want to apply to the surfaces. You can retrieve this information from the product catalog through the Wizart API.
Step 3: Prepare Request Body
Example Request Body: The example below shows how to structure the product data for a room’s walls, applying wallpaper to two walls.
...
Each surface contains x and y properties, which represent the center point of the surface as a percentage of the room image's width and height. These coordinates are particularly useful for developers who are working on web applications and need to place UI controls or interactive elements precisely on a surface. By using these relative percentage values, you can dynamically position UI components, such as buttons or material selection menus, directly over specific surfaces in the room's image. This allows for an intuitive and seamless user experience when applying or modifying materials on surfaces within the room.
...
Step 2: Retrieve Product Data
Receive products data from v1.0/articles.
Step 3: Prepare the Request Body with Product Data
To apply materials, you need to fill in the room’s surfaces with the appropriate product information. For each surface (floor, wall, ceiling), you can specify a material to apply.
Request body /v1.0/apply:
| Code Block |
|---|
{ "room_data": { "room": { "id": "fa4e3811-0287-4176-9fb1-1a1b360d338b", "walls": [ { "wall_id": 0, "is_active": true, "custom_rotation_angle": 0, "wallpaper": { "uuid": "09d58e60-dd4d-4ded-ac7b-c5500d9035f0", "is_visible": true, "product_type": { "uuid": "c2a62091-c2ed-4958-9358-538dcfa122ee", "code": "wallpaper" }, "preview_image_path": "pim-data/a78d0200-78ce-444b-a34a-e2fb2829d03a/12665/one_item_preview_color.jpg", "width": 1, "product_width": 1, "length": null, "reverse_180": false, "rapport_shift": null, "scene_data": { "data": [ { "type": "laying-pattern", "code": "no_pattern", "is_default": true, "material_maps": { "color": "pim-data/a78d0200-78ce-444b-a34a-e2fb2829d03a/12665/09d58e60-dd4d-4ded-ac7b-c5500d9035f0/no_pattern/663f75bd709738f9a23376c38293f47d_one_item_color.png", "normal": "pim-data/a78d0200-78ce-444b-a34a-e2fb2829d03a/12665/09d58e60-dd4d-4ded-ac7b-c5500d9035f0/no_pattern/663f75bd709738f9a23376c38293f47d_one_item_normal.png", "metalness": "pim-data/a78d0200-78ce-444b-a34a-e2fb2829d03a/12665/09d58e60-dd4d-4ded-ac7b-c5500d9035f0/no_pattern/663f75bd709738f9a23376c38293f47d_one_item_metal.png", "roughness": "pim-data/a78d0200-78ce-444b-a34a-e2fb2829d03a/12665/09d58e60-dd4d-4ded-ac7b-c5500d9035f0/no_pattern/663f75bd709738f9a23376c38293f47d_one_item_roughness.png" }, "pattern_length": null, "pattern_width": null } ] }, "product_length": null, "pattern": null } }, { "wall_id": 1, "is_active": true, "custom_rotation_angle": 0, "wallpaper": { "uuid": "09d58e60-dd4d-4ded-ac7b-c5500d9035f0", "is_visible": true, "product_type": { "uuid": "c2a62091-c2ed-4958-9358-538dcfa122ee", "code": "wallpaper" }, "width": 1, "product_width": 1, "length": null, "reverse_180": false, "rapport_shift": null, "scene_data": { "data": [ { "type": "laying-pattern", "code": "no_pattern", "is_default": true, "material_maps": { "color": "pim-data/a78d0200-78ce-444b-a34a-e2fb2829d03a/12665/09d58e60-dd4d-4ded-ac7b-c5500d9035f0/no_pattern/663f75bd709738f9a23376c38293f47d_one_item_color.png", "normal": "pim-data/a78d0200-78ce-444b-a34a-e2fb2829d03a/12665/09d58e60-dd4d-4ded-ac7b-c5500d9035f0/no_pattern/663f75bd709738f9a23376c38293f47d_one_item_normal.png", "idmetalness": "e948bc98-d955-4fb1-be42-506f3904cc18pim-data/a78d0200-78ce-444b-a34a-e2fb2829d03a/12665/09d58e60-dd4d-4ded-ac7b-c5500d9035f0/no_pattern/663f75bd709738f9a23376c38293f47d_one_item_metal.png", "image_path": "interiors/uploaded/images/9c34973f-d1cc-495d-8205-5c59a969b31e.jpg", "mask_name": "mask.png", "floor": {}, "ceiling": {}, "walls": [roughness": "pim-data/a78d0200-78ce-444b-a34a-e2fb2829d03a/12665/09d58e60-dd4d-4ded-ac7b-c5500d9035f0/no_pattern/663f75bd709738f9a23376c38293f47d_one_item_roughness.png" { "wall_id": 0, "is_active": true }, "custom_rotation_angle": 0, "material": { "uuid": "bbe81b21-e9a7-43d4-bdf1-93f08ac701c1", "codepattern_length": "no_pattern"null, } }, { "wallpattern_idwidth": 1,null "is_active": true, "custom_rotation_angle": 0,} "material" { "material_uuid" ] } "wallpaper": { }, "uuid": "bbe81b21-e9a7-43d4-bdf1-93f08ac701c1", "isproduct_visiblelength": truenull, "product_type": { "uuidpattern": "5d04afb2-03bf-4be6-8bd0-0fb6a89653b5", null "code": "wallpaper" } }, } "width": 0.465, ] } "product_width": 0.47, } } |
Request Body /v1.1/apply:
| Code Block |
|---|
{ "room_data": { "lengthroom": 8.37, { "id": "example-room-uuid", "reverse_180floor": false,{ "muralmaterial": false, { "rapportmaterial_shiftuuid": 0, "example-floor-material-uuid", "scenecustom_rotation_dataangle": { 0, "datalayout": ["no_pattern" } {}, "ceiling": { "typematerial": "laying-pattern",{ "code"material_uuid": "no_patternexample-ceiling-material-uuid", "layout": "no_pattern" "is_default": true, } }, "material_mapswalls": {[ { "colorwall_id": "pim-data/5411d399-baec-4c35-8e81-8c1cc185dee1/2055/158913.jpg"0, "material": { }, "material_uuid": "example-floor-material-uuid", "pattern_length": null, layout": "no_pattern" } "pattern_width": null }, { } "wall_id": 1, ]"custom_rotation_angle": 0, "material": { }, "productmaterial_lengthuuid": null"example-wall-material-uuid", "patternlayout": null"no_pattern" } } ] } } } |
This JSON body includes the following information:
Room ID: Unique identifier of the room.
Image Path: Path to the room image for rendering.
Walls: A list of walls, each with its unique
wall_id.Wallpaper: Material information, including the product UUID, width, scene data, and material maps (such as color).
...
If you want to apply a material to a surface, include the material object for that surface. If no material is passed for a surface, no changes will be made to it.
Material Object Properties:
material_uuid: Product UUID from PIM or retrieved through the API.layout: Layout code. Some products may have multiple layouts, allowing you to choose which to apply.custom_rotation_angle: For flooring materials and tiles on walls, you can specify a rotation angle to apply the material in different orientations.
...
Step 4: Apply Materials to the Room
After preparing Once the request body is prepared with the room and material data with the product information, send the final request to apply the materials to the selected room's surfaces (e.g., walls).
API Endpoint:
...
POST
...
/api/v1/
...
apply
...
Use the room_data structure as the request body, and the API will return the room with the selected materials applied.
By following these steps, you can easily manage room configurations and customize them with various products using the Wizart Visualizer API.
5. Uploading Your Own Products to PIM
Now that you're comfortable applying textures and visualizing predefined rooms, you can upload your own products to Wizart PIM.
How PIM Integrates with the Visualizer API:
Product Data Management: The PIM system allows you to upload product images, organize collections, and maintain metadata.
Syncing with API: Once your products are in PIM, they’ll automatically be accessible through the API. This makes it seamless to visualize your products in custom rooms or applications.
Learn more in the Getting Started with Wizart PIM article.
6. API Debugging and Error Handling
Common Errors:
...
Invalid Token: Ensure your API Token and Device-Tokens are valid and included correctly in the headers.
...
Missing UUIDs: Double-check that you’re using the correct UUIDs for rooms, products, or collections.
...
_data structure as the request body, and the API will return the room with the specified materials applied to the surfaces. The returned result will include an image of the room in base64 format, which can be used directly in your application to display the updated visualization with the applied materials. This allows developers to seamlessly integrate material updates and render the changes in real-time within their web or mobile applications.
6. Uploading Your Own Products to PIM
Now that you're comfortable applying textures and visualizing predefined rooms, you can upload your own products to Wizart PIM.
How PIM Integrates with the Visualizer API:
Product Data Management: The PIM system allows you to upload product images, organize collections, and maintain metadata.
Syncing with API: Once your products are in PIM, they’ll automatically be accessible through the API. This makes it seamless to visualize your products in custom rooms or applications.
Learn more in the Getting Started with Wizart PIM article.