Hello,
I am working on a new theme in HABpabel and started with the menu panel based on this example.
I am not familiar with angular directives nor programming too much.
This is what I was able to create so far:
<style>
.buttons {
border: 2px solid;
border-radius: 10px;
padding: 2px;
}
</style>
<div ng-init='dashboard = {"name": "dahboard", "type": "button", "action_type": "navigate", "navigate_dashboard": "Dashboard", "iconset": "custom-icon", "icon": "control_building_empty", "icon_size": 48, "icon_replacestext": true}' />
<div ng-init='livingroom = {"name": "livingroom", "type": "button", "action_type": "navigate", "navigate_dashboard": "Livingroom", "iconset": "custom-icon", "icon": "scene_livingroom", "icon_size": 48, "icon_replacestext": true}' />
<div ng-init='kitchen = {"name": "kitchen", "type": "button", "action_type": "navigate", "navigate_dashboard": "Kitchen", "iconset": "custom-icon", "icon": "scene_cooking_alternat", "icon_size": 48, "icon_replacestext": true}' />
<div ng-init='scene = {"name": "SCENE", "type": "button", "action_type": "navigate", "navigate_dashboard": "Scene", "font-color": "orange" }' />
<div ng-init='dominik = {"name": "dominik", "type": "button", "action_type": "navigate", "navigate_dashboard": "Dominik", "iconset": "custom-icon", "icon": "scene_teens_room", "icon_size": 48, "icon_replacestext": true}' />
<div ng-init='natalia = {"name": "natalia", "type": "button", "action_type": "navigate", "navigate_dashboard": "Natalia", "iconset": "custom-icon", "icon": "scene_teens_room", "icon_size": 48, "icon_replacestext": true}' />
<div ng-init='bathroom = {"name": "bathroom", "type": "button", "action_type": "navigate", "navigate_dashboard": "Bathroom", "iconset": "custom-icon", "icon": "scene_bath", "icon_size": 48, "icon_replacestext": true}' />
<div ng-init='office = {"name": "office", "type": "button", "action_type": "navigate", "navigate_dashboard": "Office", "iconset": "custom-icon", "icon": "scene_office", "icon_size": 48, "icon_replacestext": true}' />
<div ng-init='battery = {"name": "battery", "type": "button", "action_type": "navigate", "navigate_dashboard": "Battery", "iconset": "custom-icon", "icon": "measure_battery_100", "icon_size": 48, "icon_replacestext": true}' />
<div ng-init='settings = {"name": "settings", "type": "button", "action_type": "navigate", "navigate_dashboard": "Settings", "iconset": "custom-icon", "icon": "edit_settings.svg", "icon_size": 48, "icon_replacestext": true}' />
<table style="width: 100%; border-collapse: separate; border-spacing: 8px;">
<tr>
<td class="buttons"><widget-button ng-model="dashboard" /></td>
<td class="buttons"><widget-button ng-model="livingroom" /></td>
<td class="buttons"><widget-button ng-model="kitchen" /></td>
<td class="buttons"><widget-button ng-model="scene" /></td>
<td class="buttons"><widget-button ng-model="dominik" /></td>
<td class="buttons"><widget-button ng-model="natalia" /></td>
<td class="buttons"><widget-button ng-model="office" /></td>
<td class="buttons"><widget-button ng-model="bathroom" /></td>
<td class="buttons"><widget-button ng-model="battery" /></td>
<td class="buttons"><widget-button ng-model="settings" /></td>
</tr>
</table>
Clicks on icons works but:
- I do not know how to make a different background of the “active” button.
Example: clicking on settings button, HAP Panel switches to setting page but the menu widgets highlights the setting button changing ist background color? - How to make this menu widget responsive?
- How to change the font colour of the text in the button (in my case “scene”)