# Ez Smart House Dashboard

<figure><img src="/files/K03AHlfU6iYYTujA1VdC" alt=""><figcaption></figcaption></figure>

***

## 🔗Links

&#x20;      [**Template Link on Bubble Marketplace**](https://bubble.io/template/ez-smart-house-dashboard-1673871983678x825502190875705300)

&#x20;      [**Template Link on Our Website**](https://eazycode.com/template/ez-smart-house-dashboard-1692021503234x449001468529218750)

&#x20;      [**Preview Link**](https://ez-smart-house.bubbleapps.io/?tab=overview)&#x20;

***

## Photos

{% tabs %}
{% tab title="1" %}

<figure><img src="/files/1N0VbbWnzR2iFlpNLLGH" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="2" %}

<figure><img src="/files/Yt1a7clJI4DyYTjn9vHZ" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="3" %}

<figure><img src="/files/piriL6rET3EWwi0vz2eO" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="4" %}

<figure><img src="/files/NLz690dERIcnhbNOXPlP" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="5" %}

<figure><img src="/files/iRaZOJFpyTznFd6JxBgt" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="6" %}

<figure><img src="/files/aQXDtOqmpTOjHINXwiqr" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="7" %}

<figure><img src="/files/XzXKH6rQuSApxrD6lQto" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

***

## Introduction&#x20;

Ez Smart House Dashboard is an innovative web template for smart homes and automated control systems. This template is great for homeowners, integration companies, and business owners who want to create their portal to connect smart home systems.

Our template supports connecting to multiple objects, creating different rooms and different types of devices.

Ez Smart House Dashboard will help you make your home even smarter and more comfortable with features such as:

* **Overview** - General data and house statistics. For example, electricity consumption, house and outside temperature. Also, users can filter statistics by room.
* **Devices** - All connected devices with their statuses and other necessary information about them.
* **Gallery** - List of photos taken on cameras in the house with filtration by date.

Our template is fully compatible and responsive across all device types. Our team has developed this template in line with up-to-date UX/UI design standards, providing an intuitive interface and visually pleasing aesthetics.

While we sell the template as is, we remain open to discussing additional modifications. Before purchasing the template, we recommend checking out the preview section. If you have any questions or require further clarification, please do not hesitate to contact us, and we'll be delighted to assist and tailor a solution to suit your needs.

***

## Features

* **Overview**
* **Devices**
* **Analytics**
* **Gallery**
* **Settings**
* **Responsive design**

***

## Notes

{% hint style="info" %} <mark style="color:blue;">**Important note**</mark><mark style="color:blue;">:</mark> After purchasing this template and customizing it, be sure that you had a chance to learn how to set up data security.&#x20;

Check all privacy settings by the following link before launch: [*<mark style="color:blue;">**Bubble Privacy**</mark>* ](https://manual.bubble.io/help-guides/data/the-database/protecting-data-with-privacy-rules)

Since access to objects differs in each application and is unique for each case, ensure you have established all the privacy rules.
{% endhint %}

{% hint style="danger" %} <mark style="color:red;">This template is not the final product. Any part of the application can be modified for different needs.</mark>
{% endhint %}

***

## Pages&#x20;

### index

This is the user panel page. It displays five tabs.

* **Overview** - This tab contains general data and house statistics. For example, electricity consumption, house and outside temperature. Also, users can filter statistics by room.
* **Devices** - List of all connected devices with their statuses and other necessary information about them.
* **Analytics** - This tab displays information about energy consumption by any room in the house and devices connected to those rooms.
* **Gallery** - List of photos taken on cameras in the house with filtration by date.
* **Settings** - Tab with user personal information and notification options.

### landing

This page presents the features of this application. Also on this page, clients can find links to other <mark style="color:green;">Eazy</mark><mark style="color:red;">Code</mark> templates on this topic.&#x20;

### reset\_pw

This page allows the user to reset the password.

### 404

This page appears when something goes wrong in the app's work

***

## Reusable elements

### Footer

This reusable element includes links to the <mark style="color:green;">Eazy</mark><mark style="color:red;">Code</mark> templates, socials, and personal web.

### Header

This reusable element includes the app navigation panel.

### Signup/login Popup

This reusable element includes Sig-Up / Log-In forms.

***

## Workflow

Highlighting the workflow with color is a great way to separate actions in essence and significance. Below is the <mark style="color:green;">Eazy</mark><mark style="color:red;">Code</mark> standard for the use of colors with a detailed explanation.

{% hint style="warning" %} <mark style="color:orange;">The standards below are for informational purposes only. Any discrepancy is not related to the functionality of the application.</mark>
{% endhint %}

**Blue** - The actions taking place on our screen do not utilize the application's resources. For instance, when an element is clicked and a popup is opened or closed.

<div align="center"><figure><img src="/files/jXBLqAqnhRtr8trT1P4y" alt="" width="200"><figcaption></figcaption></figure></div>

**Green** - These actions involve creating or modifying entries in the database. For example, "Create a new Thing," "Make changes to a thing or a list of things," as well as "Copy a list of things," and so on.

<figure><img src="/files/IhsNgLQzEqD60jRJQ1nn" alt="" width="200"><figcaption></figcaption></figure>

**Red** - This action involves deleting or resetting values. For instance, "Delete a thing or a list of things," as well as "Reset a group" and "Reset inputs."

<figure><img src="/files/Bvmu9eBxmVDTHmejQBzN" alt="" width="200"><figcaption></figcaption></figure>

**Orange** - Actions related to your navigation. For example, "Navigate to a page," or "Do when a condition is true" – when you use specific values for checking, such as "When the current user is logged in," and so on.

<figure><img src="/files/6V3DXdnLhMYwqnWDpiP8" alt="" width="200"><figcaption></figcaption></figure>

**Cyan** - Actions utilizing Custom Events – lengthy tasks that involve the creation, modification, deletion, and plugins within a single comprehensive workflow as steps.

<figure><img src="/files/GPrMgq8tXbrjY9yyZVyH" alt="" width="200"><figcaption></figcaption></figure>

**Brown** - Custom workflow, API workflow, and similar tasks.

<figure><img src="/files/keW5zGLMCW3tTyyEOWOZ" alt="" width="200"><figcaption></figcaption></figure>

**Purple** - The significance of this color is determined by the developer themselves, as it is done due to the fact that everyone has their own approach to development.

<figure><img src="/files/XNzKj8OwRFRk1HFOGqvy" alt="" width="200"><figcaption></figcaption></figure>

**Grey** - All other actions.

<figure><img src="/files/HC9QqjagbZp1qTBebH6y" alt="test" width="201"><figcaption></figcaption></figure>

***

## Data Types:

### Chart

This data type is used to store statistics chart proprieties.

<table data-full-width="false"><thead><tr><th>Field name</th><th>Type</th><th>Notes</th><th data-hidden>Notes</th></tr></thead><tbody><tr><td><code>Data</code></td><td><code>number</code></td><td>Stores the chart data.</td><td></td></tr><tr><td><code>Label</code></td><td><code>text</code></td><td>Stores the data title.</td><td></td></tr></tbody></table>

### Device

This data type is used to store device proprieties.

<table data-full-width="false"><thead><tr><th>Field name</th><th>Type</th><th>Notes</th><th data-hidden>Notes</th></tr></thead><tbody><tr><td><code>Active</code></td><td><code>yes/no</code></td><td>Stores the device status(enabled or not).</td><td></td></tr><tr><td><code>Battery</code></td><td><code>number</code></td><td>Stores the device battary charge percentage.</td><td></td></tr><tr><td><code>Device Room</code></td><td><a href="#room"><code>Room</code></a></td><td>Stores the room data type.</td><td></td></tr><tr><td><code>Image</code></td><td><code>image</code></td><td>Stores the device image.</td><td></td></tr><tr><td><code>Name</code></td><td><code>text</code></td><td>Stores the device title.</td><td></td></tr><tr><td><code>Type</code></td><td><a href="#device-type"><code>Device type</code></a></td><td>Stores the device type option set.</td><td></td></tr></tbody></table>

### Gallery

This data type is used to store gallery proprieties.

<table data-full-width="false"><thead><tr><th>Field name</th><th>Type</th><th>Notes</th><th data-hidden>Notes</th></tr></thead><tbody><tr><td><code>Gallery Device</code></td><td><a href="#device"><code>Device</code></a></td><td>Stores the device data type.</td><td></td></tr><tr><td><code>Gallery Home</code></td><td><a href="#home"><code>Home</code></a></td><td>Stores the home data type.</td><td></td></tr><tr><td><code>Image</code></td><td><code>image</code></td><td>Stores the gallery image.</td><td></td></tr></tbody></table>

### Home

This data type is used to store home proprieties.

<table data-full-width="false"><thead><tr><th>Field name</th><th>Type</th><th>Notes</th><th data-hidden>Notes</th></tr></thead><tbody><tr><td><code>Home Rooms</code></td><td><code>List of</code> <a href="#room"><code>Rooms</code></a></td><td>Stores the room data type.</td><td></td></tr><tr><td><code>Image</code></td><td><code>image</code></td><td>Stores the home image.</td><td></td></tr><tr><td><code>Name</code></td><td><code>text</code></td><td>Stores the home title.</td><td></td></tr><tr><td><code>Owner</code></td><td><a href="#user"><code>User</code></a></td><td>Stores the user data type.</td><td></td></tr></tbody></table>

### Room

This data type is used to store room proprieties.

<table data-full-width="false"><thead><tr><th>Field name</th><th>Type</th><th>Notes</th><th data-hidden>Notes</th></tr></thead><tbody><tr><td><code>Inside Temp</code></td><td><code>number</code></td><td>Stores the room inside temp.</td><td></td></tr><tr><td><code>Internet</code></td><td><code>number</code></td><td>Stores the room internet speed.</td><td></td></tr><tr><td><code>Main Image</code></td><td><code>image</code></td><td>Stores the room  main image.</td><td></td></tr><tr><td><code>Name</code></td><td><code>text</code></td><td>Stores the room title.</td><td></td></tr><tr><td><code>Outside Temp</code></td><td><code>number</code></td><td>Stores the outside temp.</td><td></td></tr><tr><td><code>Room Devices</code></td><td><code>List of</code> <a href="#device"><code>Devices</code></a></td><td>Stores the device data type.</td><td></td></tr><tr><td><code>Room Home</code></td><td><a href="#home"><code>Home</code></a></td><td>Stores the home data type.</td><td></td></tr><tr><td><code>Water</code></td><td><code>number</code></td><td>Stores the room  volume of water consumed.</td><td></td></tr></tbody></table>

### Settings

This data type is used to store setting proprieties.

<table data-full-width="false"><thead><tr><th>Field name</th><th>Type</th><th>Notes</th><th data-hidden>Notes</th></tr></thead><tbody><tr><td><code>Camera</code></td><td><code>yes/no</code></td><td>Stores the camera status(enable or not).</td><td></td></tr><tr><td><code>Consumption by day</code></td><td><code>yes/no</code></td><td>Stores the consumption by day status(enable or not).</td><td></td></tr><tr><td><code>Consumption by room</code></td><td><code>yes/no</code></td><td>Stores the consumption by room status(enable or not).</td><td></td></tr><tr><td><code>Devices limit</code></td><td><code>yes/no</code></td><td>Stores the device status(set limit or not not).</td><td></td></tr><tr><td><code>Owner</code></td><td><a href="#user"><code>User</code></a></td><td>Stores the user data type.</td><td></td></tr><tr><td><code>Status by devices</code></td><td><code>yes/no</code></td><td>Stores the device status(connected or not).</td><td></td></tr><tr><td><code>Status by units</code></td><td><code>yes/no</code></td><td>Stores the unit status(connected or not).</td><td></td></tr></tbody></table>

### User

This data type is used to store user proprieties.

<table data-full-width="false"><thead><tr><th>Field name</th><th>Type</th><th>Notes</th><th data-hidden>Notes</th></tr></thead><tbody><tr><td><code>Full Name</code></td><td><code>text</code></td><td>Stores the user full name.</td><td></td></tr><tr><td><code>Homes</code></td><td><code>List of</code> <a href="#home"><code>Homes</code></a></td><td>Stores the home data type.</td><td></td></tr><tr><td><code>Phone Number</code></td><td><code>number</code></td><td>Stores the user phone number.</td><td></td></tr><tr><td><code>Settings</code></td><td><a href="#settings"><code>Settings</code></a></td><td>Stores the settings data type.</td><td></td></tr></tbody></table>

***

## Option sets

### Device type

* Camera
* Thermostat
* Smoke Detector
* Plug
* Motion Detector
* Door Switch

### Months

Contains the names of the months of the year.

***

<div align="left"><figure><img src="/files/FWlRXstCc6xNIGrX5Eqb" alt="" width="188"><figcaption></figcaption></figure></div>

The template is sold as is, although additional modifications can be discussed. Feel free to contact us for any inquiries and we’ll be happy to find a solution for your ideas – <http://eazycode.com/>

**Hire us:**

<img src="/files/4KPeHfCmX2d7zpd83cXF" alt="" data-size="line"> <https://www.fiverr.com/share/qQoDQZ>\ <img src="/files/h0wwtUMwvDod7FamBfIq" alt="" data-size="line"> <https://www.upwork.com/freelancers/~01c1a4cbef44ecb5f1>\
\
**Follow us:**

<img src="/files/67Q41mFR1z6nYwKvqJeJ" alt="" data-size="line"> <https://www.facebook.com/eazycode>\ <img src="/files/6MUa0InxwRzMoVStCu5q" alt="" data-size="line"> <https://twitter.com/ezcode_official>  \ <img src="/files/IUseXDC1i7zfvZcQgctx" alt="" data-size="line"> <https://www.instagram.com/eazycodecom/>\ <img src="/files/0dMeGeMKCjKSGW3RBP6P" alt="" data-size="line"> <https://www.linkedin.com/company/eazycodecom/>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.eazycode.com/ezcode-documentation/templates/ez-smart-house-dashboard.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.