├── .gitignore
├── custom_components
    └── bwalarm
    │   ├── __init__.py
    │   ├── resources
    │       ├── images
    │       │   ├── ha.png
    │       │   ├── gazos.jpg
    │       │   ├── camera-pool.jpg
    │       │   ├── camera-garage.jpg
    │       │   ├── camera-outdoor.jpg
    │       │   └── camera-tv-room.jpg
    │       ├── alarm
    │       │   ├── donate
    │       │   │   ├── bch.png
    │       │   │   ├── btc.png
    │       │   │   ├── eth.png
    │       │   │   ├── ltc.png
    │       │   │   ├── xrp.png
    │       │   │   └── paypal.png
    │       │   ├── lobster.woff2.gz
    │       │   ├── custom-element.html
    │       │   └── alarm.css
    │       ├── doc
    │       │   ├── examples.md
    │       │   ├── examples
    │       │   │   ├── my_bwalarm.yaml
    │       │   │   └── automations.yaml
    │       │   ├── notes.md
    │       │   └── configuration.md
    │       └── lib
    │       │   ├── countdown360.js
    │       │   ├── sha256.js
    │       │   └── jscolor.js
    │   ├── manifest.json
    │   ├── const.py
    │   ├── services.yaml
    │   └── TODO
├── resources
    └── bwalarm
    │   ├── bwalarm.yaml
    │   └── images
    │       └── wallpanel.png
├── .github
    └── ISSUE_TEMPLATE
    │   ├── feature_request.md
    │   └── bug_report.md
└── README.md


/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | __pycache__
3 | 


--------------------------------------------------------------------------------
/custom_components/bwalarm/__init__.py:
--------------------------------------------------------------------------------
1 | # empty #
2 | 


--------------------------------------------------------------------------------
/resources/bwalarm/bwalarm.yaml:
--------------------------------------------------------------------------------
1 | platform: bwalarm
2 | 


--------------------------------------------------------------------------------
/resources/bwalarm/images/wallpanel.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/akasma74/Hass-Custom-Alarm/HEAD/resources/bwalarm/images/wallpanel.png


--------------------------------------------------------------------------------
/custom_components/bwalarm/resources/images/ha.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/akasma74/Hass-Custom-Alarm/HEAD/custom_components/bwalarm/resources/images/ha.png


--------------------------------------------------------------------------------
/custom_components/bwalarm/resources/images/gazos.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/akasma74/Hass-Custom-Alarm/HEAD/custom_components/bwalarm/resources/images/gazos.jpg


--------------------------------------------------------------------------------
/custom_components/bwalarm/resources/alarm/donate/bch.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/akasma74/Hass-Custom-Alarm/HEAD/custom_components/bwalarm/resources/alarm/donate/bch.png


--------------------------------------------------------------------------------
/custom_components/bwalarm/resources/alarm/donate/btc.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/akasma74/Hass-Custom-Alarm/HEAD/custom_components/bwalarm/resources/alarm/donate/btc.png


--------------------------------------------------------------------------------
/custom_components/bwalarm/resources/alarm/donate/eth.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/akasma74/Hass-Custom-Alarm/HEAD/custom_components/bwalarm/resources/alarm/donate/eth.png


--------------------------------------------------------------------------------
/custom_components/bwalarm/resources/alarm/donate/ltc.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/akasma74/Hass-Custom-Alarm/HEAD/custom_components/bwalarm/resources/alarm/donate/ltc.png


--------------------------------------------------------------------------------
/custom_components/bwalarm/resources/alarm/donate/xrp.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/akasma74/Hass-Custom-Alarm/HEAD/custom_components/bwalarm/resources/alarm/donate/xrp.png


--------------------------------------------------------------------------------
/custom_components/bwalarm/resources/alarm/lobster.woff2.gz:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/akasma74/Hass-Custom-Alarm/HEAD/custom_components/bwalarm/resources/alarm/lobster.woff2.gz


--------------------------------------------------------------------------------
/custom_components/bwalarm/resources/images/camera-pool.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/akasma74/Hass-Custom-Alarm/HEAD/custom_components/bwalarm/resources/images/camera-pool.jpg


--------------------------------------------------------------------------------
/custom_components/bwalarm/resources/alarm/donate/paypal.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/akasma74/Hass-Custom-Alarm/HEAD/custom_components/bwalarm/resources/alarm/donate/paypal.png


--------------------------------------------------------------------------------
/custom_components/bwalarm/resources/images/camera-garage.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/akasma74/Hass-Custom-Alarm/HEAD/custom_components/bwalarm/resources/images/camera-garage.jpg


--------------------------------------------------------------------------------
/custom_components/bwalarm/resources/images/camera-outdoor.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/akasma74/Hass-Custom-Alarm/HEAD/custom_components/bwalarm/resources/images/camera-outdoor.jpg


--------------------------------------------------------------------------------
/custom_components/bwalarm/resources/images/camera-tv-room.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/akasma74/Hass-Custom-Alarm/HEAD/custom_components/bwalarm/resources/images/camera-tv-room.jpg


--------------------------------------------------------------------------------
/custom_components/bwalarm/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "domain": "bwalarm",
 3 |   "name": "BWAlarm (ak74 edition)",
 4 |   "documentation": "https://github.com/akasma74/Hass-Custom-Alarm",
 5 |   "dependencies": [],
 6 |   "after_dependencies": ["mqtt"],
 7 |   "codeowners": ["@akasma74"],
 8 |   "requirements": ["ruamel.yaml>=0.17.22"],
 9 |   "version": "1.12.16"
10 | }
11 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/feature_request.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: Feature request
 3 | about: Suggest an idea for this project
 4 | title: ''
 5 | labels: ''
 6 | assignees: ''
 7 | 
 8 | ---
 9 | 
10 | **Is your feature request related to a problem? Please describe.**
11 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
12 | 
13 | **Describe the solution you'd like**
14 | A clear and concise description of what you want to happen.
15 | 
16 | **Describe alternatives you've considered**
17 | A clear and concise description of any alternative solutions or features you've considered.
18 | 
19 | **Additional context**
20 | Add any other context or screenshots about the feature request here.
21 | 


--------------------------------------------------------------------------------
/custom_components/bwalarm/const.py:
--------------------------------------------------------------------------------
 1 | """Constants for bwalarm"""
 2 | 
 3 | CUSTOM_INTEGRATIONS_ROOT    = 'custom_components'
 4 | # create [HA config]/OVERRIDE_FOLDER/INTEGRATION_FOLDER/ to take precedence
 5 | # over a correspondent file in [HA config]/CUSTOM_INTEGRATIONS_ROOT/INTEGRATION_FOLDER/RESOURCES_FOLDER
 6 | OVERRIDE_FOLDER             = 'resources'
 7 | PLATFORM                    = 'bwalarm'
 8 | 
 9 | # integration folder inside [HA config]/CUSTOM_INTEGRATIONS_ROOT/
10 | INTEGRATION_FOLDER          = PLATFORM
11 | # resides inside INTEGRATION_FOLDER
12 | RESOURCES_FOLDER            = 'resources'
13 | 
14 | CONFIG_FNAME                = "{}.yaml".format(PLATFORM)
15 | PERSISTENCE_FNAME           = "{}.json".format(PLATFORM)
16 | LOG_FNAME                   = "{}_log.json".format(PLATFORM)
17 | PANEL_FNAME                 = "panel.html"
18 | 
19 | # resides inside RESOURCES_FOLDER
20 | IMAGES_FOLDER               = 'images'
21 | DEFAULT_ICON_NAME           = 'ha.png'
22 | 


--------------------------------------------------------------------------------
/custom_components/bwalarm/resources/alarm/custom-element.html:
--------------------------------------------------------------------------------
 1 | 					<!-- ADD YOUR CUSTOM HTML HERE. This could be liver camera views, custom buttons, rotating picture gallery -->
 2 | <dom-module id="custom-element">
 3 | 	<template>
 4 | 
 5 | 		<div style='font-size: x-large; background-color: var(--panel-background-color);  color: var(--subtitle-text);  text-align: center;  font-weight: 500;  padding: 20px;'>Home Assistant</div>
 6 | 		<div class='box-inner vLayout'>
 7 | <!-- 	        <div style='text-align: center; color: white;'>
 8 | 	            this is a custom test message, add your custom goodies here whether it be live video cams, custom HA buttons/Sensors, rotating image gallery whatever takes your fancy
 9 | 	        </div>  -->
10 | 
11 |         	<div style='padding-top: 20px; width: 300px; text-align: center;     margin: auto;'>
12 |         		<div style='color: var(--subtitle-text); padding-bottom: 15px; font-weight: 500;'>Lounge</div>
13 |         		<img src='http://www.rockymountainrenewableenergy.com/wp-content/uploads/2015/10/nest.png' style='width:300px'/>
14 |         	</div>
15 |         </div>
16 |    </template>
17 | </dom-module>
18 | 
19 | <script>
20 |     Polymer({is: 'custom-element'});
21 | </script>


--------------------------------------------------------------------------------
/custom_components/bwalarm/resources/doc/examples.md:
--------------------------------------------------------------------------------
 1 | # Examples
 2 |   
 3 | ### CONFIGURATION
 4 | [Here](examples/my_bwalarm.yaml) is one of my configurations.
 5 | 
 6 | ### HOME ASSISTANT AUTOMATIONS
 7 | [Here](examples/automations.yaml) you can find out how to react to the alarm states in Home Assistant using automations.  
 8 | 
 9 | ### SERVICE CALLS  
10 | Set value of `ignore_open_sensors` configuration variable:
11 | ```yaml
12 |     service: alarm_control_panel.set_ignore_open_sensors
13 |     data:
14 |       value: true
15 | ```
16 | The default for `value` is `false`, i.e making a service call without `data`
17 | ```yaml
18 |     service: alarm_control_panel.set_ignore_open_sensors
19 | ```
20 | has the same effect as
21 | ```yaml
22 |     service: alarm_control_panel.set_ignore_open_sensors
23 |     data:
24 |      value: false
25 | ```
26 | 
27 | ### MQTT INTERFACE
28 | Set the `Away` mode after a configured `pending_time`:
29 | ```javascript
30 |   home/alarm/set ARM_AWAY
31 | ```
32 | Set the `Home` mode immediately:
33 | ```javascript
34 |   home/alarm/set ARM_HOME {"code":"override"}
35 | ```
36 | Set the `Home` mode using a code after a configured `pending_time`:
37 | ```javascript
38 |   home/alarm/set ARM_HOME {"code": 1234}
39 | ```
40 | Disarms the alarm if `override_code` is `true`:
41 | ```javascript
42 |   home/alarm/set DISARM
43 | ```
44 | Disarm the alarm if `override_code` is `false`:
45 | ```javascript
46 |   home/alarm/set DISARM {"code": 1234}
47 | ```
48 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/bug_report.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: Bug report
 3 | about: Create a report to help us improve
 4 | title: ''
 5 | labels: ''
 6 | assignees: ''
 7 | 
 8 | ---
 9 | 
10 | <!-- READ THIS FIRST:
11 |   - Make sure you are running the latest version of Home Assistant before reporting an issue: https://github.com/akasma74/Hass-Custom-Alarm/releases
12 |   - Provide as many details as possible. Paste logs, configuration samples and code into the backticks.
13 | -->
14 | 
15 | **The component:**
16 |  - Current version:
17 |  - Last known working version (if any):
18 | 
19 | **Your setup:**
20 |  - Home Assistant version:
21 |  - Last known working Home Assistant version (if any):
22 |  - OS:
23 |  - Browser name & version:
24 | 
25 | **Describe the bug**
26 | <!-- A clear and concise description of what the bug is.-->
27 | 
28 | **To Reproduce**
29 | <!--
30 | Steps to reproduce the behavior:
31 | 1. Go to '...'
32 | 2. Click on '....'
33 | 3. Scroll down to '....'
34 | 4. See error
35 | -->
36 | 
37 | **Expected behavior**
38 | <!-- A clear and concise description of what you expected to happen. -->
39 | 
40 | **Your bwalarm.yaml**
41 | <!-- If applicable, paste content of your config to help explain your problem.  -->
42 | ```yaml
43 | ```
44 | **Home Assistant log**
45 | <!-- If applicable, paste messages from Home assistant log related to your problem here.  -->
46 | ```txt
47 | ```
48 | **Screenshots**
49 | <!-- If applicable, add screenshots to help explain your problem. -->
50 | 
51 | **Additional context**
52 | <!-- Add any other context about the problem here.<!--
53 | 


--------------------------------------------------------------------------------
/custom_components/bwalarm/services.yaml:
--------------------------------------------------------------------------------
 1 | # Describes the format for available alarm control panel services
 2 | alarm_arm_away_from_panel:
 3 |   description: This command is identical to `alarm_control_panel.alarm_arm_away` and for internal use only.
 4 |   fields:
 5 |     entity_id:
 6 |       description: Name of alarm control panel to arm Away.
 7 |       example: 'alarm_control_panel.downstairs'
 8 |     code:
 9 |       description: An optional code to disarm the alarm control panel with.
10 |       example: 1234
11 | 
12 | alarm_arm_home_from_panel:
13 |   description: This command is identical to `alarm_control_panel.alarm_arm_home` and for internal use only.
14 |   fields:
15 |     entity_id:
16 |       description: Name of alarm control panel to arm Home.
17 |       example: 'alarm_control_panel.downstairs'
18 |     code:
19 |       description: An optional code to disarm the alarm control panel with.
20 |       example: 1234
21 | 
22 | alarm_arm_night_from_panel:
23 |   description: This command is identical to `alarm_control_panel.alarm_arm_night` and for internal use only.
24 |   fields:
25 |     entity_id:
26 |       description: Name of alarm control panel to arm Night.
27 |       example: 'alarm_control_panel.downstairs'
28 |     code:
29 |       description: An optional code to disarm the alarm control panel with.
30 |       example: 1234
31 | 
32 | alarm_set_ignore_open_sensors:
33 |   description: Set value of `ignore_open_sensors` attribute
34 |   fields:
35 |     value:
36 |       description: Boolean. If `false`, does not allow to set alarm if there is open sensors detected.
37 |       default: false
38 |       example: false
39 | 
40 | alarm_yaml_save:
41 |   description: For internal use only.
42 | 
43 | alarm_yaml_user:
44 |   description: For internal use only.
45 | 


--------------------------------------------------------------------------------
/custom_components/bwalarm/resources/doc/examples/my_bwalarm.yaml:
--------------------------------------------------------------------------------
 1 | platform: bwalarm
 2 | name: House
 3 | panel:
 4 |   hide_sidebar: 'True'
 5 |   round_buttons: 'False'
 6 |   enable_sensors_panel: enable
 7 |   enable_fahrenheit: '0'
 8 |   panel_title: Home
 9 |   hide_sensors: true
10 |   hide_passcode: 'False'
11 |   enable_clock: 'True'
12 |   cameras: []
13 | states:
14 |   armed_away:
15 |     immediate:
16 |     - sensor.contact_1st_floor_safe
17 |     delayed:
18 |     - binary_sensor.pir_ground_floor_hall
19 |     - binary_sensor.pir_ground_floor_reception
20 |     - binary_sensor.pir_ground_floor_lounge
21 |     - binary_sensor.pir_ground_floor_kitchen
22 |     - binary_sensor.pir_1st_floor_landing
23 |     - binary_sensor.pir_1st_floor_master_bedroom
24 |     override:
25 |     - binary_sensor.pir_ground_floor_hall
26 |     pending_time: 40
27 |     warning_time: 60
28 |     trigger_time: 300
29 |   armed_home:
30 |     immediate: []
31 |     delayed:
32 |     - binary_sensor.pir_1st_floor_landing
33 |     pending_time: '5'
34 |     warning_time: '60'
35 |     trigger_time: 15
36 |     override: []
37 |   armed_night:
38 |     immediate: []
39 |     delayed: []
40 |     override: []
41 |     pending_time: 0
42 |     warning_time: 0
43 |     trigger_time: 600
44 | users:
45 | - id: 959367df035d4d06bb7db19e0760ca7e
46 |   name: Entrance wallpanel
47 |   enabled: true
48 |   code: !secret alarm_wallpanel_code
49 |   picture: wallpanel.png
50 | admin_password: !secret alarm_admin_passwd
51 | enable_persistence: true
52 | enable_log: true
53 | code: !secret alarm_code
54 | panic_code: !secret panic_code
55 | passcode_attempts: '5'
56 | passcode_attempts_timeout: '300'
57 | custom_supported_statuses_on:
58 | - !secret contact_opened
59 | - !secret contact_tampered
60 | themes:
61 | - name: aaa
62 |   warning_color: '#995BFF'
63 |   pending_color: '#FF2943'
64 |   disarmed_color: '#FF22E6'
65 |   triggered_color: '#FF0000'
66 |   armed_home_color: '#C1B1FF'
67 |   armed_away_color: '#FF8686'
68 |   armed_perimeter_color: '#DAFF9E'
69 |   active: false
70 |   action_button_border_color: '#3ED5FF'
71 | mqtt:
72 |   enable_mqtt: true
73 |   payload_arm_away: ARM_AWAY
74 |   override_code: false
75 |   state_topic: home/alarm
76 |   payload_disarm: DISARM
77 |   command_topic: home/alarm/set
78 |   qos: '0'
79 |   pending_on_warning: false
80 |   payload_arm_home: ARM_HOME
81 |   payload_arm_night: ARM_NIGHT
82 | code_to_arm: false
83 | enable_night_mode: false
84 | 


--------------------------------------------------------------------------------
/custom_components/bwalarm/TODO:
--------------------------------------------------------------------------------
 1 | enhancementalarm_control_panel.py
 2 | ----------------------
 3 | - take into account endity_id from service calls (what to do in MQTT case?)
 4 | - check how it works if HA restarts in triggered state (will it resume triggering? _lasttrigger?)
 5 | - Enable MQTT without HA restart/(WIP)
 6 | - validate MQTT using schema
 7 | - state[mode]xxx_time appear in yaml with (when that section edited via Settings) OR without quotes, investigate
 8 | - check init of global and state-level pending/warning/trigger_time
 9 | - do we need enable_night_mode at all?
10 | - missing: - floorplan
11 |           - custom_panel
12 | 
13 | Milestones
14 | - remove obsolete enable_perimeter_mode attribute and perimeter_mode stuff from the code
15 | - get rid of doc/notes.md
16 | 
17 | KNOWN POTENTIAL ISSUES
18 | - arm_xxx with open sensor (override), reboot HA -> will react to open sensor and trigger the alarm
19 | - what if the panel is open in a browser? (can hit Back button and access previous screen/view even if armed)
20 | - services.yaml is for bwalarm but services registered to alarm_control_panel: how to resolve so their descriptions are picked up?
21 | 
22 | panel.html
23 | ----------
24 | - make an option to have rectangular buttons rather than square
25 | - display "Invalid passcode" if code_to_arm and wrong passcode entered
26 | - timer after clear code/restore persistence is incorrect
27 | - warnings in JS console (about deprecated stuff)
28 | - use another way to find out the integration's entity_id (as someone can change name: in bwalarm.yaml and there is no panel_custom.yaml anymore!)
29 | - service calls: this.platform hardcoded, change
30 | - Beware that html imports are deprecated and support will be removed: https://www.chromestatus.com/feature/5144752345317376
31 | - enhancement: Enable by User Specific Codes no matter of the toggle state
32 | - _loadData: this.hass.callWS called from non-admin user causes Error handling message: Unauthorized in HA log
33 | 
34 | Docs:
35 | - add something like this about use cases: https://community.home-assistant.io/t/bwalarm-akasma74-edition/113666/222
36 | - Video tutorial(s) that cover:
37 |     some overall things; set pin code, how arm away/home works, show numpad on “frontend”/lovelace
38 |     how motion sensors are handled (delay, trigger etc)
39 |     how the motion sensors trigger a siren (when armed)
40 |     how the motion sensors trigger a email or/and a notification when triggered)
41 |     -reset alarm after it has been triggered
42 | 
43 | FRs:
44 | 
45 | - Is there a way to increase the keypad button size to approximately what it was in the “pre mwc-button”
46 | - If we could get that override open sensors into the lovelace platform that would be amazing
47 | - hide_sensor_groups: True **#[OPTIONAL, Boolean] - False by default. Setting this to True hides sensor groups (all sensors, immediate sensors, delayed sensors, inactive sensors) from the display. Open sensors will still appear**
48 | 


--------------------------------------------------------------------------------
/custom_components/bwalarm/resources/doc/examples/automations.yaml:
--------------------------------------------------------------------------------
 1 | - id: alarm_armed_away
 2 |   alias: '[Alarm] Away Mode Armed'
 3 |   trigger:
 4 |   - platform: state
 5 |     entity_id: alarm_control_panel.house
 6 |     to: 'armed_away'
 7 |   action:
 8 |   - data:
 9 |       message: 'Alarm Away Mode Armed'
10 |       target: email/example@gmail.com
11 |     service: notify.pushbullet
12 |   - data:
13 |       message: 'The house alarm has been switched on in away mode. Goodbye'
14 |     service: notify.example_phone_tts
15 | 
16 | - id: alarm_armed_home
17 |   alias: '[Alarm] Home Mode Armed'
18 |   trigger:
19 |   - platform: state
20 |     entity_id: alarm_control_panel.house
21 |     to: 'armed_home'
22 |   action:
23 |   - data:
24 |       message: 'Alarm Home Mode Armed'
25 |       target: email/example@gmail.com
26 |     service: notify.pushbullet
27 |   - data:
28 |       message: 'The house alarm has been switched on in home mode. Goodnight'
29 |     service: notify.example_phone_tts
30 | 
31 | - id: alarm_arming_away
32 |   alias: '[Alarm] Away Mode Arming'
33 |   trigger:
34 |   - platform: state
35 |     entity_id: alarm_control_panel.house
36 |     to: 'pending'
37 |   action:
38 |   - data:
39 |       message: 'House alarm activating, ensure all doors and windows are closed'
40 |     service: notify.example_phone_tts
41 | 
42 | - id: alarm_disarmed
43 |   alias: '[Alarm] Disarmed'
44 |   trigger:
45 |   - platform: state
46 |     entity_id: alarm_control_panel.house
47 |     to: 'disarmed'
48 |   action:
49 |   - service: notify.pushbullet
50 |     data:
51 |       message: 'Alarm Disabled'
52 |       target: email/example@gmail.com
53 |   - service: switch.turn_off
54 |     entity_id: switch.siren_switch
55 |   - data:
56 |       message: 'The house alarm has been Deactivated'
57 |     service: notify.example_phone_tts
58 | 
59 | - id: alarm_triggered
60 |   alias: '[Alarm] Triggered'
61 |   trigger:
62 |   - platform: state
63 |     entity_id: alarm_control_panel.house
64 |     to: 'triggered'
65 |   action:
66 |   - service: switch.turn_on
67 |     entity_id: switch.siren_switch
68 |   - service: notify.pushbullet
69 |     data:
70 |       message: 'ALARM TRIGGERED!!! {{ states[states.alarm_control_panel.house.attributes.changed_by.split(".")[0]][ states.alarm_control_panel.house.attributes.changed_by.split(".")[1]].name }}'
71 |       target: email/example@gmail.com
72 | 
73 | - id: alarm_warning
74 |   alias: '[Alarm] Warning'
75 |   trigger:
76 |   - platform: state
77 |     entity_id: alarm_control_panel.house
78 |     to: 'warning'
79 |   action:
80 |   - service: notify.pushbullet
81 |     data:
82 |       message: 'ALARM Warning {{ states[states.alarm_control_panel.house.attributes.changed_by.split(".")[0]][ states.alarm_control_panel.house.attributes.changed_by.split(".")[1]].name }}'
83 |       target: email/example@gmail.com
84 |   - data:
85 |       message: 'Hello, the house alarm has been tripped. Please deactivate'
86 |     service: notify.example_phone_tts
87 | 
88 | - alias: '[Alarm] Panic Mode'
89 |   trigger:
90 |     platform: template
91 |     value_template: "{{ is_state_attr('alarm_control_panel.house', 'panic_mode', 'ACTIVE') }}"
92 |   action:
93 |     service: activate_self_defence_robot
94 | 


--------------------------------------------------------------------------------
/custom_components/bwalarm/resources/doc/notes.md:
--------------------------------------------------------------------------------
 1 | ## Users
 2 | 
 3 | The integration supports multiple users. To avoid any collisions they should have different names and passcodes.
 4 | 
 5 | ## Options
 6 | 
 7 | The integration can be configured to request a passcode to set alarm to prevent unauthorized access (Disabled by default).
 8 | The passcode can be either master passcode or user passcode.
 9 | There is a special code 'override' that can be used to set alarm immediately, i.e without waiting for Pending Time configured. It works even if Request passcode to set alarm is Disabled.
10 | 
11 | This HA automation sets the alarm immediately
12 | ```
13 | alarm_arm_instant:
14 |   sequence:
15 |     service: alarm_control_panel.alarm_arm_away
16 |     entity_id: alarm_control_panel.house
17 |     data:
18 |       code: 'override'
19 | ```
20 | 
21 | ## Arm modes
22 | There are Night (perimeter), Home and Away arm modes. They can be used as follows:
23 | Night: only entry/exit doors would trigger an alarm + outbuilding motion
24 | Home: all DOWNSTAIRS sensors would trigger an alarm
25 | Away: any/all sensors would trigger an alarm, entry/exit doors would be a delayed alarm
26 | 
27 | Please note that you can only set alarm to Night mode if it is enabled in the configuration file (manually in bwalarm.yaml or via Settings -> Sensors).
28 | 
29 | ## Service calls
30 | When you call alarm_control_panel.alarm_arm_home, alarm_control_panel.alarm_arm_away or alarm_control_panel.alarm_arm_night, they all take into account value of ```ignore_open_sensors``` attribute.
31 | If False, it will set the alarm only if there is no active sensors detected, otherwise it will always set alarm.
32 | 
33 | By default its value is False (safe arming), but you can change it using ```set_ignore_open_sensors``` service call:
34 | ```
35 | service: alarm_control_panel.set_ignore_open_sensors
36 | data:
37 |   value: "True"
38 | ```
39 | When called without any data, the result is the same as calling with default value (False), i.e:
40 | ```
41 | service: alarm_control_panel.set_ignore_open_sensors
42 | ```
43 | is the same as
44 | ```
45 | service: alarm_control_panel.set_ignore_open_sensors
46 | data:
47 |   value: "False"
48 | ```
49 | 
50 | ## MQTT
51 | 
52 | When MQTT enabled, the integration publishes its status to the state topic and listens to commands on the command topic (configurable via Settings -> MQTT or manually in bwalarm.yaml).
53 | 
54 | It supports three arm commands and one disarm command (actual command names are configurable via Settings -> MQTT or manually in bwalarm.yaml). All commands are case-insensitive.
55 | 
56 | Please note that arm commands set alarm exactly as corresponding service call, i.e they don't set alarm if there are active sensors detected and ```ignore_open_sensors``` attribute is ```False```.
57 | 
58 | You can always check if alarm was set by checking its state in ```wait_template``` or reacting to state change in its state topic.
59 | 
60 | There is an option to disarm  alarm via MQTT message without passcode (Disabled by default).
61 | 
62 | 
63 | All MQTT commands get their parameters in JSON format.
64 | 
65 | arm and disarm commands accept the following optional parameters:
66 | 
67 | ```
68 | entity_id: <string> # Full name (domain.object_id) of the bwalarm entity to control
69 | code: <string*> | <int>  # A code to arm alarm control panel with
70 | ```
71 | (\*) if 'override' is used, it sets alarm immediately, otherwise the alarm changes its state to Pending for Pending Time and then to a corresponding Armed_XXX state.
72 | 
73 | For example,
74 | 
75 | ```home/alarm/set ARM_AWAY```
76 |   always arms the Away mode after a configured Pending Time
77 | 
78 | ```home/alarm/set ARM_HOME {"code":"override"}'```
79 |   arms the Home mode immediately
80 | 
81 | ```home/alarm/set ARM_HOME {"code": 1234}```
82 |   arms the Home mode using user/master code after a configured Pending Time
83 | 
84 | ```home/alarm/set DISARM```
85 |   disarms the alarm if Disarm Without Code is Enabled
86 | 
87 | ```home/alarm/set DISARM {"code": 1234}```
88 |   disarms the alarm if Disarm Without Code is Disabled
89 | 
90 | ## Set alarm from panel
91 | Please note that if you set alarm from the panel, it always checks for active sensors and let you choose to arm anyway or cancel arming if any detected.
92 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # BWAlarm (ak74 edition)
 2 | 
 3 | ## Disclaimer
 4 | This fork was created to maintain the original [bwalarm](https://github.com/gazoscalvertos/Hass-Custom-Alarm) custom component until its author is back.  
 5 | The discussion thread on Home Assistant Community to share ideas or ask for help (NOT to report a bug!) is [here](https://community.home-assistant.io/t/bwalarm-akasma74-edition/113666).  
 6 | Feel free to open a [new issue](https://github.com/akasma74/Hass-Custom-Alarm/issues/new/choose) or make a Pull Request.  
 7 | Any constructive feedback/suggestion is welcome.
 8 | 
 9 | ## Important!
10 | Since HA 0.115 until further notice this component no longer has a GUI panel and can only be controlled via automations/MQTT commands/Lovelace Alarm Card. 
11 | 
12 | ## How to: installation
13 | Manually:  
14 | Copy the following folders into your home assistant configuration directory:  
15 | ```
16 |   custom_components/bwalarm/  The alarm system code, resources and documentation there
17 |   resources                   This folder stores your alarm configuration file and some user data (i.e badges)
18 | ```
19 | 
20 | Using [HACS](https://github.com/custom-components/hacs) (you need to have HACS already installed and configured):  
21 | 1. Click on **Community** in the left hand side menu on Home Assistant frontend
22 | 2. Click **Store**
23 | 3. Scroll down until you see _BWAlarm (ak74 edition)_ and  click on it
24 | 4. If necessary, select **Show Beta** from the drop-down menu under **SETTINGS**
25 | 5. Optionally, select version from **Available versions** drop-down list (_it has the latest one selected by default_).
26 | 6. Click **INSTALL** and wait until it's done
27 | 7. **If you don't have `resources` folder in your `<Home Assistant config folder>` folder, you may need to create one**
28 | 8. Save [bwalarm](resources/) folder into your local `<Home Assistant config folder>/resources` folder
29 | 8. [Configure](custom_components/bwalarm/resources/doc/configuration.md) the alarm.
30 | 
31 | To get things working with Home Assistant (HA) you need to add the following to your `configuration.yaml`:  
32 | ```
33 | alarm_control_panel: !include resources/bwalarm/bwalarm.yaml
34 | ```
35 | You may need to restart HA if the integration doesn't load first time as HA will need to install a dependency (`ruamel.yaml`).  
36 | 
37 | It's advisable to start with a new ```bwalarm.yaml``` file (located in ```resources/bwalarm``` folder) with the minimum configuration set:
38 | ```
39 | platform: bwalarm
40 | ```
41 | You can always configure your alarm using web interface or by editing your ```bwalarm.yaml``` directly.  
42 | The default password to access the Settings tab of the panel is **HG28!!&dn**  
43 | For more details please refer to the [configuration variables](custom_components/bwalarm/resources/doc/configuration.md) page, [examples](custom_components/bwalarm/resources/doc/examples.md) and [notes](custom_components/bwalarm/resources/doc/notes.md).  
44 | 
45 | ## How to: update
46 | Manually:  
47 | Currently the update process is pretty much similar to installation:  
48 | 1. Copy a new release archive/clone the repository from GotHub to a local folder on your computer.
49 | 2. You only need to copy `custom_components/bwalarm` folder from the downloaded release into your `<Home Assistant config folder>/custom_components` folder.
50 | 3. Please note that you DON'T need to overwrite `<Home Assistant config folder>/resources` folder as it contains your integration's configuration file (and possibly some additional resources).
51 | 
52 | Using [HACS](https://github.com/custom-components/hacs):  
53 | 1. Click on **Community** in the left hand side menu on Home Assistant frontend
54 | 2. Click on _BWAlarm (ak74 edition)_ in Integrations
55 | 3. Click **UPGRADE**
56 | 
57 | **Bear in mind that if you use this method, it only updates `<Home Assistant config folder>/custom_components/bwalarm/` folder and **ALL** user data inside that folder will be lost upon every update!**  
58 | Updating by using HACS (even if you initially installed the integration manually) does not overwrite user settings as these are stored in the `<Home Assistant config folder>/resources` folder.  
59 | 
60 | ## After update (for all methods)
61 | Please note that the component's code is loaded on Home Assistant startup and the panels' code (`panel.html`) is cached by a browser.  
62 | Therefore, **every time you update** no matter how, **you HAVE to clear cache of ALL of your browsers and then RESTART Home Assistant** for changes to take effect.
63 | 


--------------------------------------------------------------------------------
/custom_components/bwalarm/resources/lib/countdown360.js:
--------------------------------------------------------------------------------
  1 | /*
  2 |  *  Countdown 360 - v0.1.9
  3 |  *  This is a simple attractive circular countdown timer that counts down a number of seconds. The style is configurable and callbacks are supported on completion.
  4 |  *  https://github.com/johnschult/jquery.countdown360
  5 |  *
  6 |  *  Made by John Schult
  7 |  *  Under MIT License
  8 |  */
  9 |  (function ($, window, document, undefined) {
 10 |   var pluginName = "countdown360",
 11 |   defaults = {
 12 |       radius: 15.5,                    // radius of arc
 13 |       strokeStyle: "#477050",          // the color of the stroke
 14 |       strokeWidth: undefined,          // the stroke width, dynamically calulated if omitted in options
 15 |       fillStyle: "#8ac575",            // the fill color
 16 |       fillStyle_0to50: "#8ac575",      // the beginning of the timer 0 to 50%
 17 |       fillStyle_50to75: "orange",      // the middle of the timer 50 to 75%
 18 |       fillStyle_75to100: "red",        // the end of the timer 75 to 100%
 19 |       fontColor: "#477050",            // the font color
 20 |       fontFamily: "sans-serif",        // the font family
 21 |       fontSize: undefined,             // the font size, dynamically calulated if omitted in options
 22 |       fontWeight: 700,                 // the font weight
 23 |       autostart: true,                 // start the countdown automatically
 24 |       seconds: 10,                     // the number of seconds to count down
 25 |       label: ["second", "seconds"],    // the label to use or false if none
 26 |       startOverAfterAdding: true,      // Start the timer over after time is added with addSeconds
 27 |       smooth: false,                   // should the timer be smooth or stepping
 28 |       onComplete: function () {}
 29 |     };
 30 | 
 31 |     function Plugin(element, options) {
 32 |       this.element = element;
 33 |       this.settings = $.extend({}, defaults, options);
 34 |       if (!this.settings.fontSize) { this.settings.fontSize = this.settings.radius/1.2; }
 35 |       if (!this.settings.strokeWidth) { this.settings.strokeWidth = this.settings.radius/4; }
 36 |       this._defaults = defaults;
 37 |       this._name = pluginName;
 38 |       this._init();
 39 |     }
 40 | 
 41 |     Plugin.prototype = {
 42 | 
 43 |       getTimeRemaining: function()
 44 |       {
 45 |         var timeRemaining = this._secondsLeft(this.getElapsedTime());
 46 |         return timeRemaining;
 47 |       },
 48 |       getElapsedTime: function()
 49 |       {
 50 |         return  Math.round((new Date().getTime() - this.startedAt.getTime())/1000);
 51 |       },
 52 |       extendTimer: function (value) {
 53 |         var seconds = parseInt(value),
 54 |         secondsElapsed = Math.round((new Date().getTime() - this.startedAt.getTime())/1000);
 55 |         if ((this._secondsLeft(secondsElapsed) + seconds) <= this.settings.seconds) {
 56 |           this.startedAt.setSeconds(this.startedAt.getSeconds() + parseInt(value));
 57 |         }
 58 |       },
 59 |       addSeconds: function (value) {
 60 |         var secondsElapsed = Math.round((new Date().getTime() - this.startedAt.getTime())/1000);
 61 |         if (this.settings.startOverAfterAdding) {
 62 |           this.settings.seconds = this._secondsLeft(secondsElapsed) + parseInt(value);
 63 |           this.start();
 64 |         } else {
 65 |           this.settings.seconds += parseInt(value);
 66 |         }
 67 |       },
 68 | 
 69 |       start: function () {
 70 |         this.startedAt = new Date();
 71 |         this._drawCountdownShape(Math.PI*3.5, true);
 72 |         this._drawCountdownLabel(0);
 73 |         var timerInterval = 1000;
 74 |         if (this.settings.smooth) {
 75 |           timerInterval = 16;
 76 |         }
 77 |         this.interval = setInterval(jQuery.proxy(this._draw, this), timerInterval);
 78 |       },
 79 | 
 80 |       stop: function (cb) {
 81 |         clearInterval(this.interval);
 82 |         if (cb) { cb(); }
 83 |       },
 84 | 
 85 |       _init: function () {
 86 |         this.settings.width = (this.settings.radius * 2) + (this.settings.strokeWidth * 2);
 87 |         this.settings.height = this.settings.width;
 88 |         this.settings.arcX = this.settings.radius + this.settings.strokeWidth;
 89 |         this.settings.arcY = this.settings.arcX;
 90 |         this._initPen(this._getCanvas());
 91 |         if (this.settings.autostart) { this.start(); }
 92 |       },
 93 | 
 94 |       _getCanvas: function () {
 95 |         var $canvas = $("<canvas id=\"countdown360_" + $(this.element).attr("id") + "\" width=\"" +
 96 |           this.settings.width + "\" height=\"" +
 97 |           this.settings.height + "\">" +
 98 |           "<span id=\"countdown-text\" role=\"status\" aria-live=\"assertive\"></span></canvas>");
 99 |         $(this.element).prepend($canvas[0]);
100 |         return $canvas[0];
101 |       },
102 | 
103 |       _initPen: function (canvas) {
104 |         this.pen              = canvas.getContext("2d");
105 |         this.pen.lineWidth    = this.settings.strokeWidth;
106 |         this.pen.strokeStyle  = this.settings.strokeStyle;
107 |         this.pen.fillStyle    = this.settings.fillStyle;
108 |         this.pen.textAlign    = "center";
109 |         this.pen.textBaseline = "middle";
110 |         this.ariaText = $(canvas).children("#countdown-text");
111 |         this._clearRect();
112 |       },
113 | 
114 |       _clearRect: function () {
115 |         this.pen.clearRect(0, 0, this.settings.width, this.settings.height);
116 |       },
117 | 
118 |       _secondsLeft: function(secondsElapsed) {
119 |         return this.settings.seconds - secondsElapsed;
120 |       },
121 | 
122 |       _drawCountdownLabel: function (secondsElapsed) {
123 |         this.ariaText.text(secondsLeft);
124 |         this.pen.font         = this.settings.fontWeight + " " + this.settings.fontSize + "px " + this.settings.fontFamily;
125 |         var secondsLeft = this._secondsLeft(secondsElapsed),
126 |         label = secondsLeft === 1 ? this.settings.label[0] : this.settings.label[1],
127 |         drawLabel = this.settings.label && this.settings.label.length === 2,
128 |         x = this.settings.width/2;
129 |         if (drawLabel) {
130 |           y = this.settings.height/2 - (this.settings.fontSize/6.2);
131 |         } else {
132 |           y = this.settings.height/2;
133 |         }
134 |         this.pen.fillStyle = this.settings.fillStyle;
135 |         this.pen.fillText(secondsLeft + 1, x, y);
136 |         this.pen.fillStyle  = this.settings.fontColor;
137 |         this.pen.fillText(secondsLeft, x, y);
138 |         if (drawLabel) {
139 |           this.pen.font = "normal small-caps " + (this.settings.fontSize/3) + "px " + this.settings.fontFamily;
140 |           this.pen.fillText(label, this.settings.width/2, this.settings.height/2 + (this.settings.fontSize/2.2));
141 |         }
142 |       },
143 | 
144 |       _drawCountdownShape: function (endAngle, drawStroke) {
145 |         this.pen.fillStyle = this.settings.fillStyle;
146 |         this.pen.beginPath();
147 |         this.pen.arc(this.settings.arcX, this.settings.arcY, this.settings.radius, Math.PI*1.5, endAngle, false);
148 |         this.pen.fill();
149 |         if (drawStroke) { this.pen.stroke(); }
150 |       },
151 |       _draw: function () {
152 |         var millisElapsed, secondsElapsed;
153 |         millisElapsed = new Date().getTime() - this.startedAt.getTime();
154 |         secondsElapsed = Math.floor((millisElapsed)/1000);
155 |         progress = secondsElapsed / this.settings.seconds;
156 | 
157 |         if (progress > 0.75) {
158 |          this.settings.fillStyle =  this.settings.fillStyle_75to100;
159 |        } else if (progress > 0.5 ){
160 |          this.settings.fillStyle =  this.settings.fillStyle_50to75;
161 |        } else {
162 |         this.settings.fillStyle =this.settings.fillStyle_0to50;
163 |       } 
164 | 
165 |       endAngle = (Math.PI*3.5) - (((Math.PI*2)/(this.settings.seconds * 1000)) * millisElapsed);
166 |       this._clearRect();
167 |       this._drawCountdownShape(Math.PI*3.5, false);
168 |       if (secondsElapsed < this.settings.seconds) {
169 |         this._drawCountdownShape(endAngle, true);
170 |         this._drawCountdownLabel(secondsElapsed);
171 |       } else {
172 |         this._drawCountdownLabel(this.settings.seconds);
173 |         this.stop();
174 |         this.settings.onComplete();
175 |       }
176 |     }
177 | 
178 |   };
179 | 
180 |   $.fn[pluginName] = function (options) {
181 |     var plugin = null;
182 |     this.each(function() {
183 |       plugin = $.data(this, "plugin_" + pluginName);
184 |       if (!plugin) {
185 |         plugin = new Plugin(this, options);
186 |         $.data(this, "plugin_" + pluginName, plugin);
187 |       }
188 |     });
189 |     return plugin;
190 |   };
191 | 
192 | })(jQuery, window, document);
193 | 


--------------------------------------------------------------------------------
/custom_components/bwalarm/resources/lib/sha256.js:
--------------------------------------------------------------------------------
  1 | /*
  2 | * A JavaScript implementation of the SHA256 hash function.
  3 | *
  4 | * FILE:	sha256.js
  5 | * VERSION:	0.8
  6 | * AUTHOR:	Christoph Bichlmeier <informatik@zombiearena.de>
  7 | *
  8 | * NOTE: This version is not tested thoroughly!
  9 | *
 10 | * Copyright (c) 2003, Christoph Bichlmeier
 11 | * All rights reserved.
 12 | *
 13 | * Redistribution and use in source and binary forms, with or without
 14 | * modification, are permitted provided that the following conditions
 15 | * are met:
 16 | * 1. Redistributions of source code must retain the above copyright
 17 | *    notice, this list of conditions and the following disclaimer.
 18 | * 2. Redistributions in binary form must reproduce the above copyright
 19 | *    notice, this list of conditions and the following disclaimer in the
 20 | *    documentation and/or other materials provided with the distribution.
 21 | * 3. Neither the name of the copyright holder nor the names of contributors
 22 | *    may be used to endorse or promote products derived from this software
 23 | *    without specific prior written permission.
 24 | *
 25 | * ======================================================================
 26 | *
 27 | * THIS SOFTWARE IS PROVIDED BY THE AUTHORS ''AS IS'' AND ANY EXPRESS
 28 | * OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
 29 | * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
 30 | * ARE DISCLAIMED.  IN NO EVENT SHALL THE AUTHORS OR CONTRIBUTORS BE
 31 | * LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
 32 | * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
 33 | * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR
 34 | * BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY,
 35 | * WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE
 36 | * OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE,
 37 | * EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 38 | */
 39 | 
 40 | /* SHA256 logical functions */
 41 | function rotateRight(n,x) {
 42 | 	return ((x >>> n) | (x << (32 - n)));
 43 | }
 44 | function choice(x,y,z) {
 45 | 	return ((x & y) ^ (~x & z));
 46 | }
 47 | function majority(x,y,z) {
 48 | 	return ((x & y) ^ (x & z) ^ (y & z));
 49 | }
 50 | function sha256_Sigma0(x) {
 51 | 	return (rotateRight(2, x) ^ rotateRight(13, x) ^ rotateRight(22, x));
 52 | }
 53 | function sha256_Sigma1(x) {
 54 | 	return (rotateRight(6, x) ^ rotateRight(11, x) ^ rotateRight(25, x));
 55 | }
 56 | function sha256_sigma0(x) {
 57 | 	return (rotateRight(7, x) ^ rotateRight(18, x) ^ (x >>> 3));
 58 | }
 59 | function sha256_sigma1(x) {
 60 | 	return (rotateRight(17, x) ^ rotateRight(19, x) ^ (x >>> 10));
 61 | }
 62 | function sha256_expand(W, j) {
 63 | 	return (W[j&0x0f] += sha256_sigma1(W[(j+14)&0x0f]) + W[(j+9)&0x0f] + 
 64 | sha256_sigma0(W[(j+1)&0x0f]));
 65 | }
 66 | 
 67 | /* Hash constant words K: */
 68 | var K256 = new Array(
 69 | 	0x428a2f98, 0x71374491, 0xb5c0fbcf, 0xe9b5dba5,
 70 | 	0x3956c25b, 0x59f111f1, 0x923f82a4, 0xab1c5ed5,
 71 | 	0xd807aa98, 0x12835b01, 0x243185be, 0x550c7dc3,
 72 | 	0x72be5d74, 0x80deb1fe, 0x9bdc06a7, 0xc19bf174,
 73 | 	0xe49b69c1, 0xefbe4786, 0x0fc19dc6, 0x240ca1cc,
 74 | 	0x2de92c6f, 0x4a7484aa, 0x5cb0a9dc, 0x76f988da,
 75 | 	0x983e5152, 0xa831c66d, 0xb00327c8, 0xbf597fc7,
 76 | 	0xc6e00bf3, 0xd5a79147, 0x06ca6351, 0x14292967,
 77 | 	0x27b70a85, 0x2e1b2138, 0x4d2c6dfc, 0x53380d13,
 78 | 	0x650a7354, 0x766a0abb, 0x81c2c92e, 0x92722c85,
 79 | 	0xa2bfe8a1, 0xa81a664b, 0xc24b8b70, 0xc76c51a3,
 80 | 	0xd192e819, 0xd6990624, 0xf40e3585, 0x106aa070,
 81 | 	0x19a4c116, 0x1e376c08, 0x2748774c, 0x34b0bcb5,
 82 | 	0x391c0cb3, 0x4ed8aa4a, 0x5b9cca4f, 0x682e6ff3,
 83 | 	0x748f82ee, 0x78a5636f, 0x84c87814, 0x8cc70208,
 84 | 	0x90befffa, 0xa4506ceb, 0xbef9a3f7, 0xc67178f2
 85 | );
 86 | 
 87 | /* global arrays */
 88 | var ihash, count, buffer;
 89 | var sha256_hex_digits = "0123456789abcdef";
 90 | 
 91 | /* Add 32-bit integers with 16-bit operations (bug in some JS-interpreters: 
 92 | overflow) */
 93 | function safe_add(x, y)
 94 | {
 95 | 	var lsw = (x & 0xffff) + (y & 0xffff);
 96 | 	var msw = (x >> 16) + (y >> 16) + (lsw >> 16);
 97 | 	return (msw << 16) | (lsw & 0xffff);
 98 | }
 99 | 
100 | /* Initialise the SHA256 computation */
101 | function sha256_init() {
102 | 	ihash = new Array(8);
103 | 	count = new Array(2);
104 | 	buffer = new Array(64);
105 | 	count[0] = count[1] = 0;
106 | 	ihash[0] = 0x6a09e667;
107 | 	ihash[1] = 0xbb67ae85;
108 | 	ihash[2] = 0x3c6ef372;
109 | 	ihash[3] = 0xa54ff53a;
110 | 	ihash[4] = 0x510e527f;
111 | 	ihash[5] = 0x9b05688c;
112 | 	ihash[6] = 0x1f83d9ab;
113 | 	ihash[7] = 0x5be0cd19;
114 | }
115 | 
116 | /* Transform a 512-bit message block */
117 | function sha256_transform() {
118 | 	var a, b, c, d, e, f, g, h, T1, T2;
119 | 	var W = new Array(16);
120 | 
121 | 	/* Initialize registers with the previous intermediate value */
122 | 	a = ihash[0];
123 | 	b = ihash[1];
124 | 	c = ihash[2];
125 | 	d = ihash[3];
126 | 	e = ihash[4];
127 | 	f = ihash[5];
128 | 	g = ihash[6];
129 | 	h = ihash[7];
130 | 
131 |         /* make 32-bit words */
132 | 	for(var i=0; i<16; i++)
133 | 		W[i] = ((buffer[(i<<2)+3]) | (buffer[(i<<2)+2] << 8) | (buffer[(i<<2)+1] 
134 | << 16) | (buffer[i<<2] << 24));
135 | 
136 |         for(var j=0; j<64; j++) {
137 | 		T1 = h + sha256_Sigma1(e) + choice(e, f, g) + K256[j];
138 | 		if(j < 16) T1 += W[j];
139 | 		else T1 += sha256_expand(W, j);
140 | 		T2 = sha256_Sigma0(a) + majority(a, b, c);
141 | 		h = g;
142 | 		g = f;
143 | 		f = e;
144 | 		e = safe_add(d, T1);
145 | 		d = c;
146 | 		c = b;
147 | 		b = a;
148 | 		a = safe_add(T1, T2);
149 |         }
150 | 
151 | 	/* Compute the current intermediate hash value */
152 | 	ihash[0] += a;
153 | 	ihash[1] += b;
154 | 	ihash[2] += c;
155 | 	ihash[3] += d;
156 | 	ihash[4] += e;
157 | 	ihash[5] += f;
158 | 	ihash[6] += g;
159 | 	ihash[7] += h;
160 | }
161 | 
162 | /* Read the next chunk of data and update the SHA256 computation */
163 | function sha256_update(data, inputLen) {
164 | 	var i, index, curpos = 0;
165 | 	/* Compute number of bytes mod 64 */
166 | 	index = ((count[0] >> 3) & 0x3f);
167 |         var remainder = (inputLen & 0x3f);
168 | 
169 | 	/* Update number of bits */
170 | 	if ((count[0] += (inputLen << 3)) < (inputLen << 3)) count[1]++;
171 | 	count[1] += (inputLen >> 29);
172 | 
173 | 	/* Transform as many times as possible */
174 | 	for(i=0; i+63<inputLen; i+=64) {
175 |                 for(var j=index; j<64; j++)
176 | 			buffer[j] = data.charCodeAt(curpos++);
177 | 		sha256_transform();
178 | 		index = 0;
179 | 	}
180 | 
181 | 	/* Buffer remaining input */
182 | 	for(var j=0; j<remainder; j++)
183 | 		buffer[j] = data.charCodeAt(curpos++);
184 | }
185 | 
186 | /* Finish the computation by operations such as padding */
187 | function sha256_final() {
188 | 	var index = ((count[0] >> 3) & 0x3f);
189 |         buffer[index++] = 0x80;
190 |         if(index <= 56) {
191 | 		for(var i=index; i<56; i++)
192 | 			buffer[i] = 0;
193 |         } else {
194 | 		for(var i=index; i<64; i++)
195 | 			buffer[i] = 0;
196 |                 sha256_transform();
197 |                 for(var i=0; i<56; i++)
198 | 			buffer[i] = 0;
199 | 	}
200 |         buffer[56] = (count[1] >>> 24) & 0xff;
201 |         buffer[57] = (count[1] >>> 16) & 0xff;
202 |         buffer[58] = (count[1] >>> 8) & 0xff;
203 |         buffer[59] = count[1] & 0xff;
204 |         buffer[60] = (count[0] >>> 24) & 0xff;
205 |         buffer[61] = (count[0] >>> 16) & 0xff;
206 |         buffer[62] = (count[0] >>> 8) & 0xff;
207 |         buffer[63] = count[0] & 0xff;
208 |         sha256_transform();
209 | }
210 | 
211 | /* Split the internal hash values into an array of bytes */
212 | function sha256_encode_bytes() {
213 |         var j=0;
214 |         var output = new Array(32);
215 | 	for(var i=0; i<8; i++) {
216 | 		output[j++] = ((ihash[i] >>> 24) & 0xff);
217 | 		output[j++] = ((ihash[i] >>> 16) & 0xff);
218 | 		output[j++] = ((ihash[i] >>> 8) & 0xff);
219 | 		output[j++] = (ihash[i] & 0xff);
220 | 	}
221 | 	return output;
222 | }
223 | 
224 | /* Get the internal hash as a hex string */
225 | function sha256_encode_hex() {
226 | 	var output = new String();
227 | 	for(var i=0; i<8; i++) {
228 | 		for(var j=28; j>=0; j-=4)
229 | 			output += sha256_hex_digits.charAt((ihash[i] >>> j) & 0x0f);
230 | 	}
231 | 	return output;
232 | }
233 | 
234 | /* Main function: returns a hex string representing the SHA256 value of the 
235 | given data */
236 | function sha256_digest(data) {
237 | 	sha256_init();
238 | 	sha256_update(data, data.length);
239 | 	sha256_final();
240 |         return sha256_encode_hex();
241 | }
242 | 
243 | /* test if the JS-interpreter is working properly */
244 | function sha256_self_test()
245 | {
246 | 	return sha256_digest("message digest") == 
247 | "f7846f55cf23e14eebeab5b4e1550cad5b509e3348fbc4efa3a1413d393cb650";
248 | }
249 | 
250 | 
251 | 


--------------------------------------------------------------------------------
/custom_components/bwalarm/resources/doc/configuration.md:
--------------------------------------------------------------------------------
  1 | # Configuration variables (in bwalarm.yaml)
  2 | 
  3 | <a id="platform"></a>
  4 | **platform**  
  5 | &nbsp;&nbsp;&nbsp; _(string) (Required)_  
  6 | &nbsp;&nbsp;&nbsp; Domain name of this integration. **Please do not change**.  
  7 | &nbsp;  
  8 | &nbsp;&nbsp;&nbsp; _Default value:_  
  9 | &nbsp;&nbsp;&nbsp; bwalarm  
 10 | 
 11 | <a id="name"></a>
 12 | **name**  
 13 | &nbsp;&nbsp;&nbsp; _(string) (Optional)_  
 14 | &nbsp;&nbsp;&nbsp; Name of the integration entity.  
 15 | &nbsp;  
 16 | &nbsp;&nbsp;&nbsp; _Default value:_  
 17 | &nbsp;&nbsp;&nbsp; House  
 18 | 
 19 | <a id="pending_time"></a>
 20 | **pending_time**  
 21 | &nbsp;&nbsp;&nbsp; _(number) (Optional)_  
 22 | &nbsp;&nbsp;&nbsp; Grace time _(in seconds)_ to allow for exit/entry.  
 23 | &nbsp;  
 24 | &nbsp;&nbsp;&nbsp; _Default value:_  
 25 | &nbsp;&nbsp;&nbsp; 25  
 26 | 
 27 | <a id="warning_time"></a>
 28 | **warning_time**  
 29 | &nbsp;&nbsp;&nbsp; _(number) (Optional)_  
 30 | &nbsp;&nbsp;&nbsp; Time _(in seconds)_ before triggering the alarm if a sensor has been tripped.  
 31 | &nbsp;  
 32 | &nbsp;&nbsp;&nbsp; _Default value:_  
 33 | &nbsp;&nbsp;&nbsp; 25  
 34 | 
 35 | <a id="trigger_time"></a>
 36 | **trigger_time**  
 37 | &nbsp;&nbsp;&nbsp; _(number) (Optional)_  
 38 | &nbsp;&nbsp;&nbsp; Time _(in seconds)_ the alarm remains in `Triggered` mode. After that it returns back to previously set alarm mode.  
 39 | &nbsp;  
 40 | &nbsp;&nbsp;&nbsp; _Default value:_  
 41 | &nbsp;&nbsp;&nbsp; 600  
 42 | 
 43 | <a id="code"></a>
 44 | **code**  
 45 | &nbsp;&nbsp;&nbsp; _(string) (Required)_  
 46 | <a id="passcode_requirements"></a>
 47 | &nbsp;&nbsp;&nbsp; Master passcode to set/disarm the alarm. It must consist of one or more digits surrounded by quotes.  
 48 | 
 49 | <a id="code_to_arm"></a>
 50 | **code_to_arm**  
 51 | &nbsp;&nbsp;&nbsp; _(boolean) (Optional)_  
 52 | &nbsp;&nbsp;&nbsp; If `true`, a master/user passcode is required to set the alarm via panel/MQTT command/service call.  
 53 | &nbsp;  
 54 | &nbsp;&nbsp;&nbsp; _Default value:_  
 55 | &nbsp;&nbsp;&nbsp; `false`  
 56 | 
 57 | <a id="passcode_attempts"></a>
 58 | **passcode_attempts**  
 59 | &nbsp;&nbsp;&nbsp; _(number) (Optional)_  
 60 | &nbsp;&nbsp;&nbsp; If greater than 0, the system will only allow the set amount of password attempts before timing out.  
 61 | &nbsp;&nbsp;&nbsp; `-1` allows for unlimited number of attempts.  
 62 | &nbsp;  
 63 | &nbsp;&nbsp;&nbsp; _Default value:_  
 64 | &nbsp;&nbsp;&nbsp; -1  
 65 | 
 66 | <a id="passcode_attempts_timeout"></a>
 67 | **passcode_attempts_timeout**  
 68 | &nbsp;&nbsp;&nbsp; _(number) (Optional)_  
 69 | &nbsp;&nbsp;&nbsp; When `passcode_attempts`>0 and the passcode is entered incorrectly `passcode_attempts` times,    
 70 | &nbsp;&nbsp;&nbsp; the panel will timeout for the amount set _(in seconds)_ and then reset the number of passcode attempts.  
 71 | &nbsp;  
 72 | &nbsp;&nbsp;&nbsp; _Default value:_  
 73 | &nbsp;&nbsp;&nbsp; 30  
 74 | 
 75 | <a id="panic_code"></a>
 76 | **panic_code**  
 77 | &nbsp;&nbsp;&nbsp; _(string) (Optional)_  
 78 | &nbsp;&nbsp;&nbsp; Panic passcode disarms the alarm and set a special panic mode attribute that could be used in  
 79 | &nbsp;&nbsp;&nbsp; your automations to send a notification to the police/spouse/neighbour that you are under duress.  
 80 | &nbsp;&nbsp;&nbsp; To clear this attribute arm and then disarm your alarm in the usual manner.  
 81 | &nbsp;&nbsp;&nbsp; It must consist of one or more digits surrounded by quotes.  
 82 | 
 83 | <a id="custom_supported_statuses_on"></a>
 84 | **custom_supported_statuses_on**  
 85 | &nbsp;&nbsp;&nbsp; _(list) (Optional)_  
 86 | &nbsp;&nbsp;&nbsp; List of strings to consider as sensor's `on` states in addition to standard ones.  
 87 | &nbsp;&nbsp;&nbsp; Allows to use sensors that do not have standard (`on`, `True`, `detected` etc) `on` states.  
 88 | 
 89 | <a id="custom_supported_statuses_off"></a>
 90 | **custom_supported_statuses_off**  
 91 | &nbsp;&nbsp;&nbsp; _(list) (Optional)_  
 92 | &nbsp;&nbsp;&nbsp; List of strings to consider as sensor's `off` states in addition to standard ones.  
 93 | &nbsp;&nbsp;&nbsp; Allows to use sensors that do not have standard (`off`, `False`, `closed` etc) `off` states.  
 94 | 
 95 | <a id="warning"></a>
 96 | **warning**  
 97 | &nbsp;&nbsp;&nbsp; _(string) (Optional)_  
 98 | &nbsp;&nbsp;&nbsp; Entity ID to turn on when the alarm has been tripped.  
 99 | 
100 | <a id="alarm"></a>
101 | **alarm**  
102 | &nbsp;&nbsp;&nbsp; _(string) (Optional)_  
103 | &nbsp;&nbsp;&nbsp; Entity ID to turn on when the alarm has been triggered.  
104 | 
105 | <a id="enable_log"></a>
106 | **enable_log**  
107 | &nbsp;&nbsp;&nbsp; _(boolean) (Optional)_  
108 | &nbsp;&nbsp;&nbsp; If `true`, the alarm saves log of actions to a file. Its content is available in the `Activity Log`  
109 | &nbsp;&nbsp;&nbsp; tab at the bottom of the panel.  
110 | &nbsp;  
111 | &nbsp;&nbsp;&nbsp; _Default value:_  
112 | &nbsp;&nbsp;&nbsp; `true`  
113 | 
114 | <a id="log_size"></a>
115 | **log_size**  
116 | &nbsp;&nbsp;&nbsp; _(number) (Optional)_  
117 | &nbsp;&nbsp;&nbsp; Maximum number of the last events to display in the log file.  
118 | &nbsp;  
119 | &nbsp;&nbsp;&nbsp; _Default value:_  
120 | &nbsp;&nbsp;&nbsp; 10  
121 | 
122 | <a id="states"></a>
123 | **states**  
124 | &nbsp;&nbsp;&nbsp; _(map) (Optional)_  
125 | &nbsp;&nbsp;&nbsp; Configurations for supported alarm modes.  
126 | &nbsp;  
127 | <a id="states-armed_away"></a>
128 | &nbsp;&nbsp;&nbsp; **armed_away**  
129 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; _(map) (Required)_  
130 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; Configuration variables for the `Away` mode.  
131 | &nbsp;  
132 | <a id="states-armed_away-immediate"></a>
133 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; **immediate**  
134 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; _(list) (Optional)_  
135 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; Tripping sensors from this list immediately changes the alarm's mode to `Triggered`.  
136 | &nbsp;  
137 | <a id="states-armed_away-delayed"></a>
138 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; **delayed**  
139 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; _(list) (Optional)_  
140 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; Tripping sensors from this list starts warning countdown and changes the alarm's mode  
141 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; to `Warning` before triggering.  
142 | &nbsp;  
143 | <a id="states-armed_away-pending_time"></a>
144 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; **override**  
145 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; _(list) (Optional)_  
146 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; By default upon setting the alarm it checks if any the of sensors from `immediate`  
147 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; and `delayed` lists are `on` and prevents from proceeding if any of them are `on`.  
148 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; To exclude some sensors from that check (motion sensor at the front door, for example)  
149 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; add those sensors to this list.  
150 | &nbsp;  
151 | <a id="states-armed_away-"></a>
152 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; **pending_time**  
153 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; _(number) (Optional)_  
154 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; Grace time _(in seconds)_ to allow for exit/entry.  
155 | &nbsp;  
156 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; _Default value:_  
157 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; [appropriate top-level value](#pending_time)  
158 | &nbsp;  
159 | <a id="states-armed_away-warning_time"></a>
160 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; **warning_time**  
161 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; _(number) (Optional)_  
162 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; Time _(in seconds)_ before triggering the alarm if a sensor has been tripped.  
163 | &nbsp;  
164 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; _Default value:_  
165 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; [appropriate top-level value](#warning_time)  
166 | &nbsp;  
167 | <a id="states-armed_away-trigger_time"></a>
168 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; **trigger_time**  
169 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; _(number) (Optional)_  
170 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; Time _(in seconds)_ the alarm remains in `Triggered` mode. After that it returns back  
171 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; to the previously set alarm mode.  
172 | &nbsp;  
173 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; _Default value:_  
174 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; [appropriate top-level value](#trigger_time)  
175 | &nbsp;  
176 | <a id="states-armed_home"></a>
177 | &nbsp;&nbsp;&nbsp; **armed_home**  
178 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; _(map) (Required)_  
179 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; Configuration variables for the `Home` mode.  
180 | &nbsp;  
181 | <a id="states-armed_home-immediate"></a>
182 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; **immediate**  
183 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; _(list) (Optional)_  
184 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; Tripping sensors from this list immediately changes the alarm's mode to `Triggered`.  
185 | &nbsp;  
186 | <a id="states-armed_home-delayed"></a>
187 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; **delayed**  
188 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; _(list) (Optional)_  
189 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; Tripping sensors from this list starts warning countdown and changes the alarm's mode  
190 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; to `Warning` before triggering.  
191 | &nbsp;  
192 | <a id="states-armed_home-override"></a>
193 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; **override**  
194 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; _(list) (Optional)_  
195 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; By default upon setting the alarm it checks if any the of sensors from `immediate`  
196 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; and `delayed` lists are `off` and prevents from proceeding if any of them are `on`.  
197 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; To exclude some sensors from that check (motion sensor at the front door, for example)  
198 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; add those sensors to this list.  
199 | &nbsp;  
200 | <a id="states-armed_home-pending_time"></a>
201 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; **pending_time**  
202 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; _(number) (Optional)_  
203 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; Grace time _(in seconds)_ to allow for exit/entry.  
204 | &nbsp;  
205 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; _Default value:_  
206 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; [appropriate top-level value](#pending_time)  
207 | &nbsp;  
208 | <a id="states-armed_home-warning_time"></a>
209 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; **warning_time**  
210 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; _(number) (Optional)_  
211 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; Time _(in seconds)_ before triggering the alarm if a sensor has been tripped.  
212 | &nbsp;  
213 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; _Default value:_  
214 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; [appropriate top-level value](#warning_time)  
215 | &nbsp;  
216 | <a id="states-armed_home-trigger_time"></a>
217 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; **trigger_time**  
218 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; _(number) (Optional)_  
219 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; Time _(in seconds)_ the alarm remains in `Triggered` mode. After that it returns back  
220 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; to the previously set alarm mode.  
221 | &nbsp;  
222 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; _Default value:_  
223 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; [appropriate top-level value](#trigger_time)  
224 | &nbsp;  
225 | <a id="states-armed_night"></a>
226 | &nbsp;&nbsp;&nbsp; **armed_night**  
227 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; _(map) (Optional)_  
228 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; Configuration variables for the `Night` mode.  
229 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; Check [`enable_night_mode`](#enable_night_mode) variable description for details.  
230 | &nbsp;  
231 | <a id="states-armed_night-immediate"></a>
232 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; **immediate**  
233 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; _(list) (Optional)_  
234 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; Tripping sensors from this list immediately changes the alarm's mode to `Triggered`.  
235 | &nbsp;  
236 | <a id="states-armed_night-delayed"></a>
237 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; **delayed**  
238 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; _(list) (Optional)_  
239 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; Tripping sensors from this list starts warning countdown and changes the alarm's mode  
240 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; to `Warning` before triggering.  
241 | &nbsp;  
242 | <a id="states-armed_night-override"></a>
243 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; **override**  
244 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; _(list) (Optional)_  
245 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; By default upon setting the alarm it checks if any the of sensors from `immediate`  
246 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; and `delayed` lists are `off` and prevents from proceeding if any of them are `on`.  
247 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; To exclude some sensors from that check (motion sensor at the front door, for example)  
248 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; add those sensors to this list.  
249 | &nbsp;  
250 | <a id="states-armed_night-pending_time"></a>
251 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; **pending_time**  
252 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; _(number) (Optional)_  
253 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; Grace time _(in seconds)_ to allow for exit/entry.  
254 | &nbsp;  
255 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; _Default value:_  
256 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; [appropriate top-level value](#pending_time)  
257 | &nbsp;  
258 | <a id="states-armed_night-warning_time"></a>
259 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; **warning_time**  
260 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; _(number) (Optional)_  
261 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; Time _(in seconds)_ before triggering the alarm if a sensor has been tripped.  
262 | &nbsp;  
263 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; _Default value:_  
264 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; [appropriate top-level value](#warning_time)  
265 | &nbsp;  
266 | <a id="states-armed_night-trigger_time"></a>
267 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; **trigger_time**  
268 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; _(number) (Optional)_  
269 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; Time _(in seconds)_ the alarm remains in `Triggered` mode. After that it returns back  
270 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; to the previously set alarm mode.  
271 | &nbsp;  
272 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; _Default value:_  
273 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; [appropriate top-level value](#trigger_time)  
274 | 
275 | <a id="enable_night_mode"></a>
276 | **enable_night_mode**  
277 | &nbsp;&nbsp;&nbsp; _(boolean) (Optional)_  
278 | &nbsp;&nbsp;&nbsp; If `true`, adds `NIGHT` button to the panel and allows setting the alarm to Night mode via MQTT/service call.  
279 | &nbsp;  
280 | &nbsp;&nbsp;&nbsp; _Default value:_  
281 | &nbsp;&nbsp;&nbsp; `false`  
282 | 
283 | <a id="enable_persistence"></a>
284 | **enable_persistence**  
285 | &nbsp;&nbsp;&nbsp; _(boolean) (Optional)_  
286 | &nbsp;&nbsp;&nbsp; If `true`, allows the alarm to save its state to file and then reinstate it in the event of power loss.  
287 | &nbsp;  
288 | &nbsp;&nbsp;&nbsp; _Default value:_  
289 | &nbsp;&nbsp;&nbsp; `false`
290 | 
291 | <a id="ignore_open_sensors"></a>
292 | **ignore_open_sensors**  
293 | &nbsp;&nbsp;&nbsp; _(boolean) (Optional)_  
294 | &nbsp;&nbsp;&nbsp; If `false`, set the alarm only if there is no active sensors. Otherwise set the alarm without checking sensors' states.  
295 | &nbsp;  
296 | &nbsp;&nbsp;&nbsp; _Default value:_  
297 | &nbsp;&nbsp;&nbsp; `false`
298 | 
299 | <a id="users"></a>
300 | **users**  
301 | &nbsp;&nbsp;&nbsp; _(list) (Optional)_  
302 | &nbsp;&nbsp;&nbsp; List of users' configuration variables grouped by their IDs.  
303 | &nbsp;  
304 | <a id="users-id"></a>
305 | &nbsp;&nbsp;&nbsp; **id**  
306 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; _(map) (Required)_  
307 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; Unique user ID.  
308 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; The integration gathers all necessary information automatically if the panel uses admin credentials when accessing  
309 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; Home Assistant.  
310 | &nbsp;  
311 | <a id="users-name"></a>
312 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; **name**  
313 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; _(string) (Required)_  
314 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; Human-friendly user name.  
315 | &nbsp;  
316 | <a id="users-picture"></a>
317 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; **picture**  
318 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; _(string) (Optional)_  
319 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; Filename of a badge to be used in the `Activity Log` next to this user's name.  
320 | &nbsp;  
321 | <a id="users-code"></a>
322 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; **code**  
323 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; _(string) (Required)_  
324 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; Unique user passcode to set/disarm the alarm that fulfills the [passcode requirements](#passcode_requirements).  
325 | &nbsp;  
326 | <a id="users-enabled"></a>
327 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; **enabled**  
328 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; _(boolean) (Optional)_  
329 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; If `true`, this user can control the alarm.  
330 | &nbsp;  
331 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; _Default value:_  
332 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; `true`  
333 | 
334 | <a id="mqtt"></a>
335 | **mqtt**  
336 | &nbsp;&nbsp;&nbsp;_(map) (Optional)_  
337 | &nbsp;&nbsp;&nbsp; MQTT configuration variables.  
338 | &nbsp;&nbsp;&nbsp; See more details about MQTT interface [below](#mqtt-interface).  
339 | &nbsp;  
340 | <a id="mqtt-enable_mqtt"></a>
341 | &nbsp;&nbsp;&nbsp; **enable_mqtt**  
342 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; _(boolean) (Required)_  
343 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; Enables/disables MQTT interface of the alarm, i.e ability to control it with MQTT messages and get its status  
344 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; by subscribing to the state topic.  
345 | &nbsp;  
346 | <a id="mqtt-qos"></a>
347 | &nbsp;&nbsp;&nbsp; **qos**  
348 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; _(number) (Optional)_  
349 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; The maximum QoS level for MQTT messages.  
350 | &nbsp;  
351 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; _Default value:_  
352 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; 0  
353 | &nbsp;  
354 | <a id="mqtt-state_topic"></a>
355 | &nbsp;&nbsp;&nbsp; **state_topic**  
356 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; _(string) (Optional)_  
357 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; The MQTT topic the alarm will publish its state updates to.  
358 | &nbsp;  
359 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; _Default value:_  
360 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; home/alarm  
361 | &nbsp;  
362 | <a id="mqtt-command_topic"></a>
363 | &nbsp;&nbsp;&nbsp; **command_topic**  
364 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; _(string) (Optional)_  
365 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; The MQTT topic the alarm will subscribe to, to receive commands.  
366 | &nbsp;  
367 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; _Default value:_  
368 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; home/alarm/set  
369 | &nbsp;  
370 | <a id="mqtt-payload_arm_away"></a>
371 | &nbsp;&nbsp;&nbsp; **payload_arm_away**  
372 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; _(string) (Optional)_  
373 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; The MQTT payload to set the alarm to `Away` mode.  
374 | &nbsp;  
375 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; _Default value:_  
376 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; ARM\_AWAY  
377 | &nbsp;  
378 | <a id="mqtt-payload_arm_home"></a>
379 | &nbsp;&nbsp;&nbsp; **payload_arm_home**  
380 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; _(string) (Optional)_  
381 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; The MQTT payload to set the alarm to `Home` mode.  
382 | &nbsp;  
383 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; _Default value:_  
384 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; ARM\_HOME  
385 | &nbsp;  
386 | <a id="mqtt-payload_arm_night"></a>
387 | &nbsp;&nbsp;&nbsp; **payload_arm_night**  
388 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; _(string) (Optional)_  
389 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; The MQTT payload to set the alarm to `Night` mode.  
390 | &nbsp;  
391 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; _Default value:_  
392 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; ARM\_NIGHT  
393 | &nbsp;  
394 | <a id="mqtt-payload_disarm"></a>
395 | &nbsp;&nbsp;&nbsp; **payload_disarm**  
396 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; _(string) (Optional)_  
397 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; The MQTT payload to disarm the alarm.  
398 | &nbsp;  
399 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; _Default value:_  
400 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; DISARM  
401 | &nbsp;  
402 | <a id="mqtt-override_code"></a>
403 | &nbsp;&nbsp;&nbsp; **override_code**  
404 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; _(boolean) (Optional)_  
405 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; If `true`, allows MQTT commands to disarm the alarm without a code.  
406 | &nbsp;  
407 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; _Default value:_  
408 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; `false`  
409 | &nbsp;  
410 | <a id="mqtt-pending_on_warning"></a>
411 | &nbsp;&nbsp;&nbsp; **pending_on_warning**  
412 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; _(boolean) (Optional)_  
413 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; If `true`, publishes `pending` state when the alarm is tripped instead of `warning`.  
414 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; This is to allow integration with other MQTT panels which react to this state.  
415 | &nbsp;  
416 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; _Default value:_  
417 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; `false`  
418 | 
419 | <a id="panel"></a>
420 | **panel**  
421 | &nbsp;&nbsp;&nbsp;_(map) (Optional)_  
422 | &nbsp;&nbsp;&nbsp; Panel (GUI) configuration variables.  
423 | &nbsp;  
424 | <a id="panel-panel_title"></a>
425 | &nbsp;&nbsp;&nbsp; **panel_title**  
426 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; _(string) (Optional)_  
427 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;Prefix to show in front of alarm status in the status bar.    
428 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;Use empty string or remove the attribute completely to hide it from the screen.    
429 | &nbsp;  
430 | <a id="panel-enable_clock"></a>
431 | &nbsp;&nbsp;&nbsp; **enable_clock**  
432 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; _(boolean) (Optional)_  
433 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; If `true`, displays current time in the status bar.  
434 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; Note that `sensor.time` must exist within your Home Assistant configuration for this option to work.  
435 | &nbsp;  
436 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; _Default value:_  
437 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; `true`  
438 | &nbsp;  
439 | <a id="panel-enable_clock_12hr"></a>
440 | &nbsp;&nbsp;&nbsp; **enable_clock_12hr**  
441 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; _(boolean) (Optional)_  
442 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; If `true`, displays clock in 12hour mode.  
443 | &nbsp;  
444 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; _Default value:_  
445 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; `false`  
446 | &nbsp;  
447 | <a id="panel-enable_weather"></a>
448 | &nbsp;&nbsp;&nbsp; **enable_weather**  
449 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; _(boolean) (Optional)_  
450 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; If `true`, displays the weather summary in the status bar.  
451 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; Note that `sensor.weather_summary` or `sensor.dark_sky_summary` must exist within your  
452 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; Home Assistant configuration for this option to work.  
453 | &nbsp;  
454 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; _Default value:_  
455 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; `false`  
456 | &nbsp;  
457 | <a id="panel-enable_sensors_panel"></a>
458 | &nbsp;&nbsp;&nbsp; **enable_sensors_panel**  
459 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; _(boolean) (Optional)_  
460 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; If `true`, adds `Alarm Sensors` tab to the bottom of the panel.  
461 | &nbsp;  
462 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; _Default value:_  
463 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; `true`  
464 | &nbsp;  
465 | <a id="panel-enable_fahrenheit"></a>
466 | &nbsp;&nbsp;&nbsp; **enable_fahrenheit**  
467 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; _(boolean) (Optional)_  
468 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; If `true`, displays the temperature in Fahrenheit.  
469 | &nbsp;  
470 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; _Default value:_  
471 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; `false`  
472 | &nbsp;  
473 | <a id="panel-hide_passcode"></a>
474 | &nbsp;&nbsp;&nbsp; **hide_passcode**  
475 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; _(boolean) (Optional)_  
476 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; If `true`, masks the passcode within the panel input box when typing.  
477 | &nbsp;  
478 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; _Default value:_  
479 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; `false`  
480 | &nbsp;  
481 | <a id="panel-hide_sidebar"></a>
482 | &nbsp;&nbsp;&nbsp; **hide_sidebar**  
483 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; _(boolean) (Optional)_  
484 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; If `true`, this security feature hides the Home Assistant sidebar to prevent access to  
485 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; Home Assistant settings when the alarm is set. The sidebar re-appears when the alarm is disarmed.  
486 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; Note: if your Home Assistant is v96.3 or newer, go to your `Profile settings` in Home Assistant  
487 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; and select `Always hide the sidebar` for this option to work correctly.  
488 | &nbsp;  
489 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; _Default value:_  
490 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; `true`  
491 | &nbsp;  
492 | <a id="panel-hide_sensors"></a>
493 | &nbsp;&nbsp;&nbsp; **hide_sensors**  
494 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; _(boolean) (Optional)_  
495 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; If `true`, this security feature hides the `Alarm Sensors` tab while the alarm is set.  
496 | &nbsp;  
497 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; _Default value:_  
498 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; `true`  
499 | &nbsp;  
500 | <a id="panel-round_buttons"></a>
501 | &nbsp;&nbsp;&nbsp; **round_buttons**  
502 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; _(boolean) (Optional)_  
503 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; Choose whether the alarm buttons should be round or rectangular.  
504 | &nbsp;  
505 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; _Default value:_  
506 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; `false`  
507 | &nbsp;  
508 | <a id="panel-shadow_effect"></a>
509 | &nbsp;&nbsp;&nbsp; **shadow_effect**  
510 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; _(boolean) (Optional)_  
511 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; If `true`, adds shadow effect to text.  
512 | &nbsp;  
513 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; _Default value:_  
514 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; `false`  
515 | &nbsp;  
516 | <a id="panel-enable_serif_font"></a>
517 | &nbsp;&nbsp;&nbsp; **enable_serif_font**  
518 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; _(boolean) (Optional)_  
519 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; If `true`, `Lobster` serif font will be used to display the title, time and weather.  
520 | &nbsp;  
521 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; _Default value:_  
522 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; `false`  
523 | &nbsp;  
524 | <a id="panel-enable_camera_panel"></a>
525 | &nbsp;&nbsp;&nbsp; **enable_camera_panel**  
526 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; _(boolean) (Optional)_  
527 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; If `true`, cameras listed below to be displayed as a panel.  
528 | &nbsp;  
529 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; _Default value:_  
530 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; `false`  
531 | &nbsp;  
532 | <a id="panel-cameras"></a>
533 | &nbsp;&nbsp;&nbsp; **cameras**  
534 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; _(list) (Optional)_  
535 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; List of cameras' entity IDs to display their feeds.  
536 | &nbsp;  
537 | <a id="panel-camera_update_interval"></a>
538 | &nbsp;&nbsp;&nbsp; **camera_update_interval**  
539 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; _(number) (Optional)_  
540 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; Time _(in seconds)_ the camera(s)' image updates.  
541 | &nbsp;  
542 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; _Default value:_  
543 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; 5  
544 | 
545 | <a id="themes"></a>
546 | **themes**  
547 | &nbsp;&nbsp;&nbsp; _(map) (Optional)_  
548 | &nbsp;&nbsp;&nbsp; Themes allow you to override the default Home Assistant colors.  
549 | &nbsp;&nbsp;&nbsp; See more details about defining colors [below](#themes-colors).  
550 | &nbsp;  
551 | <a id="themes-name"></a>
552 | &nbsp;&nbsp;&nbsp; **name**  
553 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; _(string) (Required)_  
554 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; Unique name of the theme.  
555 | &nbsp;  
556 | <a id="themes-name-active"></a>
557 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; **active**  
558 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; _(boolean) (Optional)_  
559 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; Only active theme overrides default Home Assistant colors.  
560 | &nbsp;  
561 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; _Default value:_  
562 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; `false`  
563 | &nbsp;  
564 | <a id="themes-name-disarmed_color"></a>
565 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; **disarmed_color**  
566 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; _(string) (Optional)_  
567 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; When the alarm is disarmed the panel will display this color in both the top  
568 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; header background and the centre panel background.  
569 | &nbsp;  
570 | <a id="themes-name-pending_color"></a>
571 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; **pending_color**  
572 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; _(string) (Optional)_  
573 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; When the alarm is arming the panel will display this color in both the top  
574 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; header and the centre panel background.  
575 | &nbsp;  
576 | <a id="themes-name-armed_away_color"></a>
577 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; **armed_away_color**  
578 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; _(string) (Optional)_  
579 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; When the alarm is in `Away` mode the panel will display this color in both the top  
580 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; header background and the centre panel background.  
581 | &nbsp;  
582 | <a id="themes-name-armed_home_color"></a>
583 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; **armed_home_color**  
584 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; _(string) (Optional)_  
585 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; When the alarm is in `Home` mode the panel will display this color in both the top  
586 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; header background and the centre panel background.  
587 | &nbsp;  
588 | <a id="themes-name-armed_night_color"></a>
589 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; **armed_night_color**  
590 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; _(string) (Optional)_  
591 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; When the alarm is in `Night` mode the panel will display this color in both the top  
592 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; header background and the centre panel background.  
593 | &nbsp;  
594 | <a id="themes-name-warning_color"></a>
595 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; **warning_color**  
596 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; _(string) (Optional)_  
597 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; If a sensor is tripped when the alarm is set the panel will display this color in both the top  
598 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; header background and the centre panel background.  
599 | &nbsp;  
600 | <a id="themes-name-triggered_color"></a>
601 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; **triggered_color**  
602 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; _(string) (Optional)_  
603 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; When the alarm has been triggered the panel will display this color in both the top  
604 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; header background and the centre panel background.  
605 | &nbsp;  
606 | <a id="themes-name-panel_background_color"></a>
607 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; **panel_background_color**  
608 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; _(string) (Optional)_  
609 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; The background color of the main content section.  
610 | &nbsp;  
611 | <a id="themes-name-panel_outer_background_color"></a>
612 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; **panel_outer_background_color**  
613 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; _(string) (Optional)_  
614 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; The background color of both the status bar and the menu bar.  
615 | &nbsp;  
616 | <a id="themes-name-panel_text_color"></a>
617 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; **panel_text_color**  
618 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; _(string) (Optional)_  
619 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; The color of the general text within the panel.  
620 | &nbsp;  
621 | <a id="themes-name-header_background_color"></a>
622 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; **header_background_color**  
623 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; _(string) (Optional)_  
624 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; The background color of very top header bar.  
625 | &nbsp;  
626 | <a id="themes-name-header_text_color"></a>
627 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; **header_text_color**  
628 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; _(string) (Optional)_  
629 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; The text color on very top header bar.  
630 | &nbsp;  
631 | <a id="themes-name-alarmstatus_text_color"></a>
632 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; **alarmstatus_text_color**  
633 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; _(string) (Optional)_  
634 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; The text color to display the alarm status.  
635 | &nbsp;  
636 | <a id="themes-name-time_text_color"></a>
637 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; **time_text_color**  
638 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; _(string) (Optional)_  
639 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; The text color to display time.  
640 | &nbsp;  
641 | <a id="themes-name-weather_text_color"></a>
642 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; **weather_text_color**  
643 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; _(string) (Optional)_  
644 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; The text color to display weather summary.  
645 | &nbsp;  
646 | <a id="themes-name-weather_image_color"></a>
647 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; **weather_image_color**  
648 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; _(string) (Optional)_  
649 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; The color of weather image.  
650 | &nbsp;  
651 | <a id="themes-name-info_header_text_color"></a>
652 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; **info_header_text_color**  
653 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; _(string) (Optional)_  
654 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; The color of the heading within a particular section.  
655 | &nbsp;  
656 | <a id="themes-name-info_detail_text_color"></a>
657 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; **info_detail_text_color**  
658 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; _(string) (Optional)_  
659 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; The color of the descriptive text within a particular section.  
660 | &nbsp;  
661 | <a id="themes-name-title_text_color"></a>
662 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; **title_text_color**  
663 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; _(string) (Optional)_  
664 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; The color of the title text within a particular section.  
665 | &nbsp;  
666 | <a id="themes-name-subtitle_text_color"></a>
667 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; **subtitle_text_color**  
668 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; _(string) (Optional)_  
669 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; The color of the subtitle text within a particular section.  
670 | &nbsp;  
671 | <a id="themes-name-opensensors_title_color"></a>
672 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; **opensensors_title_color**  
673 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; _(string) (Optional)_  
674 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; The color of the `Open Sensors` dialog.  
675 | &nbsp;  
676 | <a id="themes-name-button_background_color"></a>
677 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; **button_background_color**  
678 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; _(string) (Optional)_  
679 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; The background color of the alarm buttons.  
680 | &nbsp;  
681 | <a id="themes-name-cancel_color"></a>
682 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; **cancel_color**  
683 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; _(string) (Optional)_  
684 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; The background color of the `Cancel` button.  
685 | &nbsp;  
686 | <a id="themes-name-override_color"></a>
687 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; **override_color**  
688 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; _(string) (Optional)_  
689 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; The background color of the `Override` button.  
690 | &nbsp;  
691 | <a id="themes-name-info_panel_buttons_color"></a>
692 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; **info_panel_buttons_color**  
693 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; _(string) (Optional)_  
694 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; The color of the menu buttons.  
695 | &nbsp;  
696 | <a id="themes-name-arm_button_border_color"></a>
697 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; **arm_button_border_color**  
698 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; _(string) (Optional)_  
699 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; The border color of the alarm buttons.  
700 | &nbsp;  
701 | <a id="themes-name-arm_button_text_color"></a>
702 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; **arm_button_text_color**  
703 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; _(string) (Optional)_  
704 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; The color of the text within the alarm buttons.  
705 | &nbsp;  
706 | <a id="themes-name-paper_listbox_background_color"></a>
707 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; **paper_listbox_background_color**  
708 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; _(string) (Optional)_  
709 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; The background color of the listboxes.  
710 | &nbsp;  
711 | <a id="themes-name-paper_listbox_color"></a>
712 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; **paper_listbox_color**  
713 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; _(string) (Optional)_  
714 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; The text color within the listboxes.  
715 | &nbsp;  
716 | <a id="themes-name-paper_item_selected___color"></a>
717 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; **paper_item_selected___color**  
718 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; _(string) (Optional)_  
719 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; The text color of the item selected within a selection box.  
720 | &nbsp;  
721 | <a id="themes-name-action_button_border_color"></a>
722 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; **action_button_border_color**  
723 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; _(string) (Optional)_  
724 | &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; The color of the border surrounding the action buttons.  
725 | 
726 | <a id="admin_password"></a>
727 | **admin_password**  
728 | &nbsp;&nbsp;&nbsp; _(string) (Optional)_  
729 | &nbsp;&nbsp;&nbsp; Password to access the alarm configuration - `Settings` tab.  
730 | &nbsp;  
731 | &nbsp;&nbsp;&nbsp; _Default value:_  
732 | &nbsp;&nbsp;&nbsp; HG28!!&dn  
733 | <br>
734 | ### BOOLEAN VALUES CONVENTION
735 | Boolean values `true` and `false` are **case-sensitive**.  
736 | Boolean `true` can be substituted by its **case-insensitive** string equivalent "1", "true", "yes", "on" or "enable", or any non-zero number.  
737 | Boolean `false` can be substituted by any string apart from string equivalents of `true`, or number `0`.  
738 | 
739 | ### SERVICE CALLS
740 | All service calls use domain `alarm_control_panel` and accept the `entity_id` parameter:  
741 | **entity_id**  
742 | &nbsp;&nbsp;&nbsp; _(string) (Optional)_  
743 | &nbsp;&nbsp;&nbsp; Full name _(domain.object\_id)_ of the alarm integration entity to control.  
744 | &nbsp;&nbsp;&nbsp; If no such variable used, the service call will applicable to all entities of this integration.  
745 | 
746 | **ARM PASSCODE REQUIREMENTS**  
747 | Service calls `alarm_arm_home`, `alarm_arm_away` and `alarm_arm_night` accept optional `code` parameter that has extended specification compared to [passcode requirements](#passcode_requirements) by allowing a special code "override".  
748 | This special code tells the alarm to set immediately, while with a normal code the alarm will change its state to `pending` first for the corresponding `pending_time` and then change to a corresponding Armed state.  
749 | These service calls also take into account value of [`ignore_open_sensors`](#ignore_open_sensors) configuration variable. If it is `false` (default value, i.e safe arming), the alarm will be set only if there is no active sensors detected.  
750 | 
751 | There is `set_ignore_open_sensors` service call that allows to change value of `ignore_open_sensors` configuration variable.  
752 | Please refer to the [services' description](../../services.yaml) and [examples](examples.md#service-calls) for more details.  
753 | 
754 | ### MQTT INTERFACE
755 | When MQTT interface is [enabled](#mqtt-enable_mqtt), the alarm publishes its status to the [state topic](#mqtt-state_topic) and listens to commands on the [command topic](#mqtt-command_topic).  
756 | There are three arm commands (for [`Away`](#mqtt-payload_arm_away), [`Home`](#mqtt-payload_arm_home) and [`Night`](#mqtt-payload_arm_night)) and one [disarm](#mqtt-payload_disarm) command and they behave exactly as corresponding [service calls](#service-calls) do.
757 | All commands are case-insensitive and accept parameters in a form of a [JSON object](http://www.json.org).  
758 | Please refer to the [Examples](examples.md#mqtt-interface) page for more details.
759 | 
760 | ### SETTING ALARM FROM THE PANEL
761 | Note that if you set the alarm from the panel, it always checks for active sensors and let you choose between `Arm anyway` and `Cancel arming` if any detected.
762 | 
763 | ### THEMES COLORS
764 | Color string should contain a [standard HTML color name, hex color code or RGB value](https://htmlcolorcodes.com).  
765 | All optional themes' colors are `black` by default.  
766 | 


--------------------------------------------------------------------------------
/custom_components/bwalarm/resources/alarm/alarm.css:
--------------------------------------------------------------------------------
   1 | :host {
   2 |   --countdown-timer-display: none;
   3 |   --time-display: initial;
   4 | 
   5 |   /* THEME - DARK */
   6 |   --dark-background:   #191A1F;
   7 |   --dark-inner:        #212227;
   8 | 
   9 |   --dark-green:        #23C48E;
  10 |   --dark-black:        #1A1E22;
  11 | 
  12 |   --dark-grey:         #7F7F7F;
  13 |   --dark-grey-text:    #BCBCBE;
  14 | 
  15 |   --dark-white-text:   #FFFFFF;
  16 |   --dark-greyout-text: #77787A;
  17 | 
  18 |   --dark-red:          #D3435C;
  19 |   --dark-light-blue:   #04C0F8;
  20 |   --dark-orange:       #ED9D00;
  21 | 
  22 |   --dark-indigo:       #5771C2;
  23 |   --dark-indigo-grey:  #37446B;
  24 | 
  25 |   /* THEME - LIGHT */
  26 |   --light-background:   white;
  27 |   --light-inner:        #f3f3f3;
  28 | 
  29 |   --light-green:        #23C48E;
  30 |   --light-black:        #1A1E22;
  31 | 
  32 |   --light-grey:         #7F7F7F;
  33 |   --light-grey-text:    #BCBCBE;
  34 | 
  35 |   --light-white-text:   #FFFFFF;
  36 |   --light-greyout-text: #77787A;
  37 | 
  38 |   --light-red:          #D3435C;
  39 |   --light-light-blue:   #04C0F8;
  40 |   --light-orange:       #ED9D00;
  41 | 
  42 |   --light-indigo:       #5771C2;
  43 |   --light-indigo-grey:  #37446B;
  44 | 
  45 |   /* GUI SPECIFIC */
  46 |   --primary-text-color:             'white';
  47 | 
  48 |   --panel-background-color:         var(--dark-background); /*The background color of the main content section.*/
  49 | 
  50 |   --panel-outer-background-color:   var(--dark-inner); /*The background color of both the status bar and the menu bar*/
  51 |   --panel-text-color:               var(--dark-white-text); /*The color of the general text within the panel.*/
  52 | 
  53 |   --header-background-color:        var(--dark-background); /*The background color of very top header bar.*/
  54 |   --header-text-color:              var(--dark-white-text); /*The text color on very top header bar.*/
  55 | 
  56 |   --alarmstatus-text-color:         var(--dark-green); /*The text color of the Alarm Status*/
  57 |   --time-text-color:                var(--dark-white-text); /*The text color of the Time label*/
  58 |   --weather-text-color:             var(--dark-white-text); /*The text color of the Weather label.*/
  59 |   --weather-image-color:            var(--dark-light-blue); /*The color of the Weather image*/
  60 | 
  61 |   --info-header-text-color:         white; /* The color of the Heading within a particular Section*/
  62 |   --info-detail-text-color:         var(--dark-green); /*The color of the descriptive text within a particular Section.*/
  63 | 
  64 |   --title-color:                    var(--dark-orange); /*The color of the Title text within a particular section.*/
  65 |   --subtitle-text-color:            var(--dark-light-blue); /*The color of the Subtitle text within a particular section.*/
  66 |   --openSensors-title-color:        var(--dark-orange); /*The color of the Open Sensors Title to draw attention to the open sensor*/
  67 |   --button-background-color:        var(--dark-background); /*The background color of the alarm buttons.*/
  68 |   --cancel-color:                   var(--dark-red);  /*The background color of the cancel button.*/
  69 |   --override-color:                 var(--dark-orange); /* The background color of the override button.*/
  70 |   --action-button-border-color:     var(--dark-green);/* The border color of the action button.*/
  71 | 
  72 |   --info-panel-buttons-color:       var(--dark-light-blue); /*The color of the menu buttons*/
  73 | 
  74 |   --paper-listbox-background-color: blue;/* The background color of the listboxes.*/
  75 |   --paper-listbox-color:            var(--dark-light-blue);/* The text color within the listboxes.*/
  76 | 
  77 |   --paper-item-selected_-_color:     var(--dark-orange);/* The text color of the item selected within a selection box.*/
  78 |   --paper-input-container-shared-input-style_-_color: white;
  79 | 
  80 |   --font-header:                     unset; /*Font of the header, time and weather text*/
  81 | 
  82 |   --shadow-effect:                   below 0 linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, .1));
  83 | 
  84 | 
  85 |   --inner-panel-default-height:               87px;
  86 |   --status-bar-height:                        var(--inner-panel-default-height);
  87 |   --info-panel-height:                        var(--inner-panel-default-height);
  88 | 
  89 |   /* button - codepanel */
  90 |   --button-default-shape:                     4px;  /* Npx for rounded edges or 50% for circles */
  91 |   --button-default-height:                    10vmin;
  92 |   --button-default-width:                     10vmin;
  93 |   --button-default-top-bottom-margin:         4px;
  94 |   --button-default-left-right-margin:         10px;
  95 |   --button-border-width:                      3px;
  96 |   --button-border-style:                      solid;
  97 |   --button-border-color:                      var(--mdc-theme-primary);/* The border color of the alarm buttons. --mdc-theme-secondary*/
  98 |   --button-text-color:                        var(--mdc-theme-on-primary);/* The defaul color of the text within buttons. --mdc-theme-on-secondary*/
  99 |   --button-raised-border-width:               2px;/* The defaul background of raised (action) buttons.*/
 100 |   --button-raised-border-style:               solid;
 101 |   --button-raised-border-color:               var(--button-raised-text-color);/* The defaul background of raised (action) buttons.*/
 102 |   --button-raised-background-color:           var(--button-border-color);/* The defaul background of raised (action) buttons.*/
 103 |   --button-raised-text-color:                 var(--button-text-color);/* The defaul color of the text within raised (action) buttons.*/
 104 | 
 105 |   --arm-button-default-height:                18vmin;
 106 |   --arm-button-default-width:                 18vmin;
 107 |   --arm-button-default-top-bottom-margin:     10px;
 108 |   --arm-button-default-left-right-margin:     10px;
 109 |   --arm-button-border-width:                  var(--button-raised-border-width);
 110 |   --arm-button-border-style:                  var(--button-raised-border-style);
 111 |   --arm-button-border-color:                  var(--button-raised-text-color);/* The border color of the alarm buttons.*/
 112 |   --arm-button-background-color:              var(--button-raised-background-color);/* The border color of the alarm buttons.*/
 113 |   --arm-button-text-color:                    var(--button-raised-text-color);/* The color of the text within the alarm buttons.*/
 114 | 
 115 |   /* default radius/size of a square button in warning/error message box */
 116 |   --message-button-default-margin:            20px;
 117 |   --message-button-default-height:            115px;
 118 |   --message-button-default-width:             115px;
 119 |   --message-button-default-border-width:      2px;
 120 |   --message-button-default-border-style:      var(--button-border-style);
 121 |   --message-button-border-color:              var(--button-border-color);
 122 |   --message-button-text-color:                  var(--button-text-color);
 123 |   --message-button-raised-default-border-width: 1px;
 124 |   --message-button-raised-border-color:              var(--button-raised-border-color);
 125 |   --message-button-raised-background-color:     var(--button-raised-background-color);
 126 |   --message-button-raised-text-color:           var(--button-raised-text-color);
 127 | 
 128 |   --warning-message-border-color:                   transparent;
 129 |   --warning-message-text-color:                     var(--primary-text-color);
 130 |   --warning-message-button-border-width:            var(--message-button-default-border-width);
 131 |   --warning-message-button-border-style:            var(--message-button-default-border-style);
 132 |   --warning-message-button-border-color:            var(--message-button-border-color);
 133 |   --warning-message-button-text-color:              var(--message-button-text-color);
 134 |   --warning-message-button-raised-border-width: var(--message-button-raised-default-border-width);
 135 |   --warning-message-button-raised-border-color: var(--warning-message-button-raised-text-color);
 136 |   --warning-message-button-raised-background-color: var(--message-button-raised-background-color);
 137 |   --warning-message-button-raised-text-color:       var(--message-button-raised-text-color);
 138 | 
 139 |   --error-message-border-color:                     transparent;
 140 |   --error-message-text-color:                       var(--primary-text-color);
 141 |   --error-message-button-border-width:              var(--message-button-default-border-width);
 142 |   --error-message-button-border-style:              var(--message-button-default-border-style);
 143 |   --error-message-button-border-color:              var(--message-button-border-color);
 144 |   --error-message-button-text-color:                var(--message-button-text-color);
 145 |   --error-message-button-raised-border-width:       var(--message-button-raised-default-border-width);
 146 |   --error-message-button-raised-border-color:       var(--error-message-button-raised-text-color);
 147 |   --error-message-button-raised-background-color:   var(--message-button-raised-background-color);
 148 |   --error-message-button-raised-text-color:         var(--message-button-raised-text-color);
 149 | }
 150 | 
 151 | /* mwc-button stuff - begin */
 152 | @keyframes mdc-ripple-fg-radius-in{from{animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transform:translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1)}to{transform:translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1))}}@keyframes mdc-ripple-fg-opacity-in{from{animation-timing-function:linear;opacity:0}to{opacity:var(--mdc-ripple-fg-opacity, 0)}}@keyframes mdc-ripple-fg-opacity-out{from{animation-timing-function:linear;opacity:var(--mdc-ripple-fg-opacity, 0)}to{opacity:0}}.mdc-ripple-surface--test-edge-var-bug{--mdc-ripple-surface-test-edge-var: 1px solid #000;visibility:hidden}.mdc-ripple-surface--test-edge-var-bug::before{border:var(--mdc-ripple-surface-test-edge-var)}.mdc-button{font-family:Roboto,sans-serif;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-size:.875rem;line-height:2.25rem;font-weight:500;letter-spacing:.0892857143em;text-decoration:none;text-transform:uppercase;--mdc-ripple-fg-size: 0;--mdc-ripple-left: 0;--mdc-ripple-top: 0;--mdc-ripple-fg-scale: 1;--mdc-ripple-fg-translate-end: 0;--mdc-ripple-fg-translate-start: 0;-webkit-tap-highlight-color:rgba(0,0,0,0);will-change:transform,opacity;padding:0 8px 0 8px;display:inline-flex;position:relative;align-items:center;justify-content:center;box-sizing:border-box;min-width:64px;height:36px;border:none;outline:none;line-height:inherit;user-select:none;-webkit-appearance:none;overflow:hidden;vertical-align:middle;border-radius:4px}.mdc-button::before,.mdc-button::after{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:""}.mdc-button::before{transition:opacity 15ms linear,background-color 15ms linear;z-index:1}.mdc-button.mdc-ripple-upgraded::before{transform:scale(var(--mdc-ripple-fg-scale, 1))}.mdc-button.mdc-ripple-upgraded::after{top:0;left:0;transform:scale(0);transform-origin:center center}.mdc-button.mdc-ripple-upgraded--unbounded::after{top:var(--mdc-ripple-top, 0);left:var(--mdc-ripple-left, 0)}.mdc-button.mdc-ripple-upgraded--foreground-activation::after{animation:225ms mdc-ripple-fg-radius-in forwards,75ms mdc-ripple-fg-opacity-in forwards}.mdc-button.mdc-ripple-upgraded--foreground-deactivation::after{animation:150ms mdc-ripple-fg-opacity-out;transform:translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1))}.mdc-button::before,.mdc-button::after{top:calc(50% - 100%);left:calc(50% - 100%);width:200%;height:200%}.mdc-button.mdc-ripple-upgraded::after{width:var(--mdc-ripple-fg-size, 100%);height:var(--mdc-ripple-fg-size, 100%)}.mdc-button::-moz-focus-inner{padding:0;border:0}.mdc-button:active{outline:none}.mdc-button:hover{cursor:pointer}.mdc-button:disabled{background-color:transparent;color:rgba(0,0,0,.37);cursor:default;pointer-events:none}.mdc-button.mdc-button--dense{border-radius:4px}.mdc-button:not(:disabled){background-color:transparent}.mdc-button:not(:disabled){color:#6200ee;color:var(--mdc-theme-primary, #6200ee)}.mdc-button::before,.mdc-button::after{background-color:#6200ee}@supports not (-ms-ime-align: auto){.mdc-button::before,.mdc-button::after{background-color:var(--mdc-theme-primary, #6200ee)}}.mdc-button:hover::before{opacity:.04}.mdc-button:not(.mdc-ripple-upgraded):focus::before,.mdc-button.mdc-ripple-upgraded--background-focused::before{transition-duration:75ms;opacity:.12}.mdc-button:not(.mdc-ripple-upgraded)::after{transition:opacity 150ms linear}.mdc-button:not(.mdc-ripple-upgraded):active::after{transition-duration:75ms;opacity:.16}.mdc-button.mdc-ripple-upgraded{--mdc-ripple-fg-opacity: 0.16}.mdc-button .mdc-button__icon{margin-left:0;margin-right:8px;display:inline-block;width:18px;height:18px;font-size:18px;vertical-align:top}[dir=rtl] .mdc-button .mdc-button__icon,.mdc-button .mdc-button__icon[dir=rtl]{margin-left:8px;margin-right:0}.mdc-button svg.mdc-button__icon{fill:currentColor}.mdc-button--raised .mdc-button__icon,.mdc-button--unelevated .mdc-button__icon,.mdc-button--outlined .mdc-button__icon{margin-left:-4px;margin-right:8px}[dir=rtl] .mdc-button--raised .mdc-button__icon,.mdc-button--raised .mdc-button__icon[dir=rtl],[dir=rtl] .mdc-button--unelevated .mdc-button__icon,.mdc-button--unelevated .mdc-button__icon[dir=rtl],[dir=rtl] .mdc-button--outlined .mdc-button__icon,.mdc-button--outlined .mdc-button__icon[dir=rtl]{margin-left:8px;margin-right:-4px}.mdc-button--raised,.mdc-button--unelevated{padding:0 16px 0 16px}.mdc-button--raised:disabled,.mdc-button--unelevated:disabled{background-color:rgba(0,0,0,.12);color:rgba(0,0,0,.37)}.mdc-button--raised:not(:disabled),.mdc-button--unelevated:not(:disabled){background-color:#6200ee}@supports not (-ms-ime-align: auto){.mdc-button--raised:not(:disabled),.mdc-button--unelevated:not(:disabled){background-color:var(--mdc-theme-primary, #6200ee)}}.mdc-button--raised:not(:disabled),.mdc-button--unelevated:not(:disabled){color:#fff;color:var(--mdc-theme-on-primary, #fff)}.mdc-button--raised::before,.mdc-button--raised::after,.mdc-button--unelevated::before,.mdc-button--unelevated::after{background-color:#fff}@supports not (-ms-ime-align: auto){.mdc-button--raised::before,.mdc-button--raised::after,.mdc-button--unelevated::before,.mdc-button--unelevated::after{background-color:var(--mdc-theme-on-primary, #fff)}}.mdc-button--raised:hover::before,.mdc-button--unelevated:hover::before{opacity:.08}.mdc-button--raised:not(.mdc-ripple-upgraded):focus::before,.mdc-button--raised.mdc-ripple-upgraded--background-focused::before,.mdc-button--unelevated:not(.mdc-ripple-upgraded):focus::before,.mdc-button--unelevated.mdc-ripple-upgraded--background-focused::before{transition-duration:75ms;opacity:.24}.mdc-button--raised:not(.mdc-ripple-upgraded)::after,.mdc-button--unelevated:not(.mdc-ripple-upgraded)::after{transition:opacity 150ms linear}.mdc-button--raised:not(.mdc-ripple-upgraded):active::after,.mdc-button--unelevated:not(.mdc-ripple-upgraded):active::after{transition-duration:75ms;opacity:.32}.mdc-button--raised.mdc-ripple-upgraded,.mdc-button--unelevated.mdc-ripple-upgraded{--mdc-ripple-fg-opacity: 0.32}.mdc-button--raised{box-shadow:0px 3px 1px -2px rgba(0, 0, 0, 0.2),0px 2px 2px 0px rgba(0, 0, 0, 0.14),0px 1px 5px 0px rgba(0,0,0,.12);transition:box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-button--raised:hover,.mdc-button--raised:focus{box-shadow:0px 2px 4px -1px rgba(0, 0, 0, 0.2),0px 4px 5px 0px rgba(0, 0, 0, 0.14),0px 1px 10px 0px rgba(0,0,0,.12)}.mdc-button--raised:active{box-shadow:0px 5px 5px -3px rgba(0, 0, 0, 0.2),0px 8px 10px 1px rgba(0, 0, 0, 0.14),0px 3px 14px 2px rgba(0,0,0,.12)}.mdc-button--raised:disabled{box-shadow:0px 0px 0px 0px rgba(0, 0, 0, 0.2),0px 0px 0px 0px rgba(0, 0, 0, 0.14),0px 0px 0px 0px rgba(0,0,0,.12)}.mdc-button--outlined{border-style:solid;padding:0 14px 0 14px;border-width:2px}.mdc-button--outlined:disabled{border-color:rgba(0,0,0,.37)}.mdc-button--outlined:not(:disabled){border-color:#6200ee;border-color:var(--mdc-theme-primary, #6200ee)}.mdc-button--dense{height:32px;font-size:.8125rem}.material-icons{font-family:var(--mdc-icon-font, "Material Icons");font-weight:normal;font-style:normal;font-size:var(--mdc-icon-size, 24px);line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:"liga";-webkit-font-smoothing:antialiased}:host{display:inline-flex;outline:none}.mdc-button{flex:1}
 153 |                 :host {
 154 |                     display: inherit;
 155 |                 }
 156 | /* mwc-button stuff - end */
 157 | 
 158 | app-toolbar {
 159 |   background-color: var(--header-background-color);
 160 |   color: var(--header-text-color);
 161 | }
 162 | 
 163 | #layout {
 164 |   background-color: var(--panel-background-color);
 165 |   display: flex;
 166 |   flex-direction: column;
 167 |   height: 100%;
 168 |   min-height: 100%;
 169 |   width: 100%;
 170 |   overflow: hidden;
 171 | }
 172 | #main-title {
 173 |   text-align: center !important;
 174 |   position: relative !important;
 175 |   display: block !important;
 176 |   background-color: var(--header-background-color);
 177 |   padding: 2px 0px;
 178 | }
 179 | ha-menu-button + [main-title] {
 180 |    margin-left: -50px;
 181 | }
 182 | ha-menu-button {
 183 |     color: var(--header-text-color);
 184 |     float: left;
 185 | }
 186 | a, a:link, a:visited, a:active {
 187 |   color: var(--panel-text-color);
 188 |   text-decoration: none;
 189 | }
 190 | 
 191 | a:hover {
 192 |     text-decoration: underline;
 193 |     color: var(--panel-text-color);
 194 | }
 195 | 
 196 | .list-item {
 197 |       cursor: pointer;
 198 |       font-size: large;
 199 | }
 200 | .checkbox {
 201 |       cursor: pointer;
 202 |       padding: 5px;
 203 |       font-size: large;
 204 | }
 205 | 
 206 | .detail, .show, .hide:target {
 207 |   display: none;
 208 | }
 209 | .hide:target + .show,
 210 | .hide:target ~ .detail {
 211 |   display: block;
 212 | }
 213 | 
 214 | #modalError {
 215 |   position: absolute;
 216 |   z-index: 1;
 217 |   margin-top: 25vh;
 218 | }
 219 | 
 220 | #error-icon {
 221 |   width: 60%;
 222 |   text-align: center;
 223 |   margin: auto;
 224 | }
 225 | #error-icon ha-icon{
 226 |   height: 100px;
 227 |   width: 100px;
 228 |   color: var(--title-color);
 229 | }
 230 | #error-title {
 231 |   font-size: 40pt;
 232 |   line-height: 40pt;
 233 |   color: var(--subtitle-text-color);
 234 |   margin-bottom: 10px;
 235 | }
 236 | #error-header {
 237 |   font-size: x-large;
 238 |   line-height: 20pt;
 239 |   color: var(--title-color);
 240 |   margin-bottom: 10px;
 241 | }
 242 | #error-detail {
 243 |   font-size: large;
 244 |   line-height: 15pt;
 245 |   color: var(--info-detail-text-color);
 246 |   margin-bottom: 10px;
 247 | }
 248 | 
 249 | 
 250 | .iron-selected:before{
 251 |   content: '✔'; /* Insert content that looks like bullets */
 252 |   padding-right: 8px;
 253 |   color: var(--dark-orange); /* Or a color you prefer */
 254 | }
 255 | 
 256 | #restart{
 257 |   background-color: unset;
 258 |   padding-left: 0;
 259 |   margin-left: 0;
 260 |   text-transform: none;
 261 | }
 262 | 
 263 | #userDetail, #themeDetail{
 264 |     border: var(--primary-text-color);
 265 |     border-width: 0.5px;
 266 |     border-style: groove;
 267 |     padding-left: 20px;
 268 |     padding-right: 20px;
 269 | 
 270 | }
 271 | #settings-alarm, #settings-all, #settings-info, #settings-sensors, #settings-cameras, #settings-floorplan, #settings-mqtt {
 272 |   /* padding-bottom: 100px; */
 273 | }
 274 | .iron-selected {
 275 |   color: var(--title-color);
 276 | }
 277 | 
 278 | .validation-error{
 279 |   border: red;
 280 |     border-style: groove;
 281 |     border-width: 2px;
 282 | }
 283 | 
 284 | .dropdown-content{
 285 |   width: 90%;
 286 | }
 287 | 
 288 | .dropdown-content ha-icon {
 289 |   padding-right: 10px;
 290 | }
 291 | .sensors {
 292 |   padding-right: 20px;
 293 | }
 294 | 
 295 | .checkbox{
 296 |   padding-left:10px;
 297 |   padding-right:10px;
 298 | }
 299 | 
 300 | .tappable {
 301 |   cursor: pointer;
 302 |   margin-top: 2px;
 303 |   font-size: 1.2em;
 304 | }
 305 | 
 306 | #container ::slotted(.content) {
 307 |    padding: 15px;
 308 | }
 309 | #warning-button {
 310 |    color: var(--dark-orange) !important;
 311 | }
 312 | .shake{
 313 |    animation: shake linear 1s;
 314 |    animation-iteration-count: 1;
 315 |    transform-origin: 50% 50%;
 316 |    -webkit-animation: shake linear 1s;
 317 |    -webkit-animation-iteration-count: 1;
 318 |    -webkit-transform-origin: 50% 50%;
 319 |    -moz-animation: shake linear 1s;
 320 |    -moz-animation-iteration-count: 1;
 321 |    -moz-transform-origin: 50% 50%;
 322 |    -o-animation: shake linear 1s;
 323 |    -o-animation-iteration-count: 1;
 324 |    -o-transform-origin: 50% 50%;
 325 |    -ms-animation: shake linear 1s;
 326 |    -ms-animation-iteration-count: 1;
 327 |    -ms-transform-origin: 50% 50%;
 328 | }
 329 | #controls{
 330 |   padding-top: 5px;
 331 | }
 332 | #carousel_main{
 333 |   position: relative;
 334 |   /* height: 60vh; */
 335 |   padding: 0px 15px;
 336 | 
 337 |   /* transition: all 1s ease-in-out; */
 338 |   /* -webkit-transition: all 1s ease-in-out; /** Chrome & Safari **/
 339 |   /* -moz-transition: all 1s ease-in-out; /** Firefox **/
 340 |   /* -o-transition: all 1s ease-in-out; /** Opera **/
 341 | }
 342 | #carousel_settings{
 343 |     position: relative;
 344 |     z-index: 1;
 345 | }
 346 | 
 347 | .carousel-slide-in {
 348 |     /* transform: translate(-1600px,0); */
 349 |     /* -webkit-transform: translate(-1600px,0); /** Chrome & Safari **/
 350 |     /* -o-transform: translate(-1600px,0); /** Opera **/
 351 |     /* -moz-transform: translate(-1600px,0); /** Firefox **/
 352 | 
 353 | }
 354 | 
 355 | .margin-left {
 356 |   margin-left: -15px;
 357 | }
 358 | 
 359 | .carousel-cell {
 360 |   /* left: 1600px; */
 361 |   top: 0;
 362 |   /* position: absolute; */
 363 | 
 364 |   /* transition: all 1s ease-in-out; */
 365 |   /* -webkit-transition: all 1s ease-in-out; /** Chrome & Safari **/
 366 |   /* -moz-transition: all 1s ease-in-out; /** Firefox **/
 367 |   /* -o-transition: all 1s ease-in-out; /** Opera **/
 368 | 
 369 |   width: 100%;
 370 |   /* margin-bottom: 60px; */
 371 |   color: var(--panel-text-color);
 372 | }
 373 | 
 374 | ha-label-badge {
 375 |    --ha-label-badge-color: rgb(223, 76, 30);
 376 | }
 377 | :host ::slotted(.badge-container.ha-label-badge) {
 378 |    margin: 0px 12px;
 379 | }
 380 | .actions {
 381 |    margin-left: 20px;
 382 |    @apply(--layout-self-center);
 383 | }
 384 | .flickity-viewport {
 385 |   /* transition: height 0.5s; */
 386 | }
 387 | .box {
 388 |    display: -webkit-box;
 389 |    display: -ms-flexbox;
 390 |    display: flex;
 391 |    -webkit-box-pack: center;
 392 |    -ms-flex-pack: center;
 393 |    justify-content: center; /* align horizontal */
 394 |    -webkit-box-align: center;
 395 |    -ms-flex-align: center;
 396 |    align-items: center; /* align vertical */
 397 | }
 398 | 
 399 | .box-sensors {
 400 |    width: 100%;
 401 | }
 402 | .title{
 403 |    font-size: x-large;
 404 | }
 405 | .sensor-title{
 406 |    font-size: x-large;
 407 | }
 408 | .title, .sensor-title{
 409 |    color:            var(--subtitle-text-color);
 410 |    text-align: center;
 411 |    font-weight: 500;
 412 |    padding-top: 15px;
 413 | }
 414 | .openSensors {
 415 |    margin-left: 8%;
 416 |    margin-right: 8%;
 417 |    color: var(--openSensors-title-color);
 418 |    font-size: x-large;
 419 |    text-align: center;
 420 |    font-weight: 500;
 421 |    padding: 15px 0px;
 422 | }
 423 | 
 424 | .summary {
 425 |    margin: 0px auto 0px;
 426 |    text-align: center;
 427 | }
 428 | .cameras {
 429 |   cursor: pointer;
 430 | }
 431 | 
 432 | .camera-caption {
 433 |   @apply --paper-font-common-nowrap;
 434 |   position: relative;
 435 |   bottom: 46px;
 436 | /*  border-bottom-left-radius: 2px;
 437 |   border-bottom-right-radius: 2px;*/
 438 |   background-color: rgba(0, 0, 0, 0.3);
 439 |   padding: 10px;
 440 |   font-size: 16px;
 441 |   font-weight: 500;
 442 |   color: white;
 443 | }
 444 | 
 445 | .content-box {
 446 |   display: flex;
 447 |   flex-direction: column;
 448 |   justify-content: center;
 449 | }
 450 | 
 451 | /* ######################################################### ALL DEVICES ################################################# */
 452 | #icon {
 453 |   margin-right: 15px;
 454 | }
 455 | paper-listbox {
 456 |   color: var(--info-panel-buttons-color);
 457 |   background: unset;
 458 | }
 459 | #content {
 460 |   display: flex;
 461 |   flex-direction: column;
 462 |   flex: 1 1 auto;
 463 |   width: 100%;
 464 | /*  justify-content: space-evenly;*/
 465 |   overflow-y: auto;
 466 |   overflow-x: hidden;
 467 | }
 468 | 
 469 | #status-bar {
 470 |   height: var(--status-bar-height);
 471 |   background: var(--panel-outer-background-color);
 472 | /*  padding: 8px 0px;*/
 473 | }
 474 | 
 475 | h1 {
 476 |   color: var(--title-color);
 477 | }
 478 | 
 479 | #settings-nav {
 480 |   color: var(--primary-text-color);
 481 |   justify-content: center;
 482 |   text-align: center;
 483 |   padding-top: 10px;
 484 | }
 485 | #set-login {
 486 |   text-align: center;
 487 | }
 488 | .settings-nav-inner {
 489 | /*  max-width: 40px;*/
 490 |   padding: 3px;
 491 | }
 492 | /*.settings-nav-text {
 493 |   font-size: x-small;
 494 | }*/
 495 | 
 496 | .info-header {
 497 |   color: var(--info-header-text-color);
 498 |   font-size: large;
 499 |   padding-right: 5px;
 500 | }
 501 | .setting-outer {
 502 |   padding-top: 10px;
 503 |   padding-bottom: 10px;
 504 | }
 505 | .setting-inner {
 506 |   padding-bottom: 5px;
 507 |   width: 100%;
 508 |   padding-right: 10px;
 509 | }
 510 | .setting-input > paper-input{
 511 |   flex-grow: 3;
 512 | }
 513 | .setting-input > ha-icon-button{
 514 |   flex-grow: 1;
 515 |   width: 50px;
 516 |   height: 50px;
 517 | }
 518 | .setting-toggle {
 519 |   align-items: center;
 520 | }
 521 | #info-panel-selection {
 522 |   color: var(--info-panel-buttons-color);
 523 |   background: var(--panel-outer-background-color);
 524 |   position: relative;
 525 |   bottom: 0;
 526 |   height: var(--info-panel-height);
 527 |   display: inline-flex;
 528 |   flex-wrap: wrap;
 529 |   align-items: center;
 530 |   text-align: center;
 531 | }
 532 | 
 533 | #info-panel-selection ha-icon-button {
 534 |  /*width: 60px;*/
 535 |  --mdc-icon-size: calc(var(--info-panel-height) + 0);
 536 |  max-width: 30%;
 537 |  flex: 1 1 auto;
 538 | }
 539 | 
 540 | #main-content {
 541 |   display: flex;
 542 |   justify-content: center;
 543 |   align-items: center;
 544 |   flex-direction: column;
 545 |   flex: 1 1 auto;
 546 |   padding: 0px 15px;
 547 |   background-color: var(--panel-background-color);
 548 | }
 549 | 
 550 | .sign {
 551 |    margin-left: -20px;
 552 | }
 553 | .ok {
 554 |    color: green;
 555 | }
 556 | .warning {
 557 |    color: orange;
 558 | }
 559 | .danger {
 560 |    color: red;
 561 | }
 562 | 
 563 | .name {
 564 |   text-align: center;
 565 | }
 566 | div.countdown-timer {
 567 |    display: var(--countdown-timer-display);
 568 | }
 569 | 
 570 | div.code {
 571 |    text-transform: capitalize;
 572 |    padding-top: 23px;
 573 | }
 574 | #code-display {
 575 |     text-align: center;
 576 |     font-size: x-large;
 577 | /*    font-size: xx-large;*/
 578 |     letter-spacing: 5px;
 579 |     color: var(--panel-text-color);
 580 |     padding-bottom: 5px;
 581 | /*    padding-bottom: 10px;*/
 582 |     width: 150px;
 583 |     border-bottom: solid;
 584 |     border-bottom-width: 1.3px;
 585 |     margin-top: auto;
 586 |     margin-right: auto;
 587 |     margin-left: auto;
 588 |     height: 20px;
 589 | }
 590 | 
 591 | div.code iron-label {
 592 |    font-size: x-large;
 593 | }
 594 | 
 595 | /* NIGHT, HOME and AWAY buttons */
 596 | div.arm button {
 597 |   margin: var(--arm-button-top-bottom-margin, var(--arm-button-default-top-bottom-margin)) var(--arm-button-left-right-margin, var(--arm-button-default-left-right-margin));
 598 |   height: var(--arm-button-height, var(--arm-button-default-height));
 599 |   width: var(--arm-button-width, var(--arm-button-default-width));
 600 |   border: var(--arm-button-border-width) var(--arm-button-border-style) var(--arm-button-border-color);
 601 |   border-radius: var(--button-shape, var(--button-default-shape));
 602 |   background-color: var(--arm-button-background-color) !important;
 603 |   color: var(--arm-button-text-color) !important;
 604 | }
 605 | 
 606 | /* ## codepanel ## */
 607 | /* numeric keys */
 608 | #codepanel button {
 609 |   margin: var(--button-top-bottom-margin, var(--button-default-top-bottom-margin)) var(--button-left-right-margin, var(--button-default-left-right-margin));
 610 |   height: var(--button-height, var(--button-default-height));
 611 |   width: var(--button-width, var(--button-default-width));
 612 |   border-radius: var(--button-shape, var(--button-default-shape));
 613 | }
 614 | 
 615 | #codepanel button.mdc-button--outlined {
 616 |   border: var(--button-border-width) var(--button-border-style) var(--button-border-color);
 617 |   color: var(--button-text-color);
 618 | }
 619 | 
 620 | #codepanel button.mdc-button--raised {
 621 |   border: var(--button-raised-border-width) var(--button-raised-border-style) var(--button-raised-border-color);
 622 |   background-color: var(--button-raised-background-color);
 623 | }
 624 | 
 625 | #codepanel button.clear {
 626 |   border: var(--button-border-width) var(--button-border-style) red;
 627 | }
 628 | 
 629 | /* invisible and inactive button - used as a placeholder to make layout the same with or without the button */
 630 | button.invisible {
 631 |   opacity: 0; /* makes the button transparent */
 632 |   cursor: unset !important; /* stop cursor from changing its shape over the button */
 633 | }
 634 | 
 635 | /* warning message styling */
 636 | div.warning-message {
 637 |   padding: 8px;
 638 |   border: 2px solid var(--warning-message-border-color);
 639 |   align-items: center;
 640 | }
 641 | 
 642 | div.warning-message button {
 643 |   margin: var(--message-button-margin, var(--message-button-default-margin));
 644 |   height: var(--message-button-height, var(--message-button-default-height));
 645 |   width: var(--message-button-width, var(--message-button-default-width));
 646 |   border-radius: var(--button-shape, var(--button-default-shape));
 647 |   font-size: initial;
 648 | }
 649 | 
 650 | div.warning-message button.mdc-button--outlined {
 651 |   border: var(--warning-message-button-border-width) var(--warning-message-button-border-style) var(--warning-message-button-border-color);
 652 |   color: var(--warning-message-button-text-color);
 653 | }
 654 | 
 655 | div.warning-message button.mdc-button--raised {
 656 |   border: var(--warning-message-button-raised-border-width) solid var(--warning-message-button-raised-border-color);
 657 |   background-color: var(--warning-message-button-raised-background-color);
 658 |   color: var(--warning-message-button-raised-text-color);
 659 | }
 660 | 
 661 | 
 662 | /* error message styling */
 663 | div.error-message {
 664 |   padding: 8px;
 665 |   border: 2px solid var(--error-message-border-color);
 666 |   align-items: center;
 667 | }
 668 | 
 669 | div.error-message button {
 670 |   margin: var(--message-button-margin, var(--message-button-default-margin));
 671 |   height: var(--message-button-height, var(--message-button-default-height));
 672 |   width: var(--message-button-width, var(--message-button-default-width));
 673 |   border-radius: var(--button-shape, var(--button-default-shape));
 674 |   font-size: initial;
 675 | }
 676 | 
 677 | div.error-message button.mdc-button--outlined {
 678 |   border: var(--error-message-border-width) var(--error-message-button-border-style) var(--error-message-button-border-color);
 679 |   color: var(--error-message-button-text-color);
 680 | }
 681 | 
 682 | div.error-message button.mdc-button--raised {
 683 |   border: var(--error-message-button-raised-border-width) solid var(--error-message-button-raised-border-color);
 684 |   background-color: var(--error-message-button-raised-background-color);
 685 |   color: var(--error-message-button-raised-text-color);
 686 | }
 687 | 
 688 | div.options {
 689 |    padding-top: 10px;
 690 | }
 691 | div.options button{
 692 |    width: 96.5%;
 693 | }
 694 | .tappable {
 695 |    cursor: pointer;
 696 |    margin-top: 2px;
 697 |    font-size: 1.2em;
 698 | }
 699 | .shadow {
 700 |     padding-bottom: 6px;
 701 |     -webkit-box-reflect: var(--shadow-effect);
 702 | }
 703 | #time, #time span {
 704 |    color: var( --time-text-color);
 705 |    text-shadow: 1px 1px #6b8d9b;
 706 |    display: var(--time-display);
 707 |    font-size: xx-large;
 708 |    font-family: var(--font-header);
 709 |    padding-top: 8px;
 710 |    padding-bottom: 8px;
 711 | }
 712 | 
 713 | #middle {
 714 |    text-align: center;
 715 |    padding-left: 8px;
 716 | 
 717 | }
 718 | #meridiem {
 719 |    display: inline-block;
 720 |    vertical-align: middle;
 721 |    line-height: normal;
 722 |    height: 100%;
 723 |    color: #6b8d9b;
 724 | }
 725 | #alarm-status {
 726 |     flex-direction: column;
 727 |     /*text-transform: capitalize;*/
 728 | }
 729 | #alarm-status span {
 730 |    color: var( --alarmstatus-text-color);
 731 |    font-weight: bolder;
 732 |    text-align: center;
 733 |    font-family: var(--font-header);
 734 |    padding-top: 8px;
 735 |    padding-bottom: 8px;
 736 |  }
 737 | #weather-icon {
 738 |   width: 100px;
 739 |   text-align: center;
 740 |   fill: var( --weather-image-color);
 741 | }
 742 | #weather-icon object {
 743 |   transform: scale(3,3);
 744 | }
 745 | .weather-summary span {
 746 |    display: inline-block;
 747 |    vertical-align: middle;
 748 |    font-size: x-large;
 749 |    margin-left: 5px;
 750 |    padding-right: 5px;
 751 |    text-align: center;
 752 |    height: 100%;
 753 |    font-family: var(--font-header);
 754 |    color: var( --weather-text-color);
 755 | }
 756 | 
 757 | #main-title-text{
 758 |    flex-wrap: wrap;
 759 |    text-align: center;
 760 | 
 761 |    font-size: xx-large;
 762 |    font-family: var(--font-header);
 763 |    justify-content: space-between;
 764 | 
 765 |    padding: .5rem 1rem;
 766 |    color: var(--header-text-color)
 767 | }
 768 | .hide-bar {
 769 |    margin-top: -64px;
 770 |    height: calc(100vh + 64px);
 771 | }
 772 | 
 773 | .view {
 774 |    position: relative;
 775 |    top: 24vh;
 776 |    left: 0;
 777 |    right: 0;
 778 |    bottom: 0;
 779 |    -webkit-perspective: 400;
 780 |    perspective: 400;
 781 | }
 782 | /*
 783 | #codepanel {
 784 |    overflow: hidden;
 785 | }*/
 786 | 
 787 | @-webkit-keyframes shake{
 788 |    0% {
 789 |       -webkit-transform:  translate(0px,0px)  ;
 790 |    }
 791 |    10% {
 792 |       -webkit-transform:  translate(-10px,0px)  ;
 793 |    }
 794 |    20% {
 795 |       -webkit-transform:  translate(10px,0px)  ;
 796 |    }
 797 |    30% {
 798 |       -webkit-transform:  translate(-10px,0px)  ;
 799 |    }
 800 |    40% {
 801 |       -webkit-transform:  translate(10px,0px)  ;
 802 |    }
 803 |    50% {
 804 |       -webkit-transform:  translate(-10px,0px)  ;
 805 |    }
 806 |    60% {
 807 |       -webkit-transform:  translate(10px,0px)  ;
 808 |    }
 809 |    70% {
 810 |       -webkit-transform:  translate(-10px,0px)  ;
 811 |    }
 812 |    80% {
 813 |       -webkit-transform:  translate(10px,0px)  ;
 814 |    }
 815 |    90% {
 816 |       -webkit-transform:  translate(-10px,0px)  ;
 817 |    }
 818 |    100% {
 819 |       -webkit-transform:  translate(0px,0px)  ;
 820 |    }
 821 | }
 822 | 
 823 | @keyframes shake{
 824 |    0% {
 825 |               transform:  translate(0px,0px)  ;
 826 |    }
 827 |    10% {
 828 |               transform:  translate(-10px,0px)  ;
 829 |    }
 830 |    20% {
 831 |               transform:  translate(10px,0px)  ;
 832 |    }
 833 |    30% {
 834 |               transform:  translate(-10px,0px)  ;
 835 |    }
 836 |    40% {
 837 |               transform:  translate(10px,0px)  ;
 838 |    }
 839 |    50% {
 840 |               transform:  translate(-10px,0px)  ;
 841 |    }
 842 |    60% {
 843 |               transform:  translate(10px,0px)  ;
 844 |    }
 845 |    70% {
 846 |               transform:  translate(-10px,0px)  ;
 847 |    }
 848 |    80% {
 849 |               transform:  translate(10px,0px)  ;
 850 |    }
 851 |    90% {
 852 |               transform:  translate(-10px,0px)  ;
 853 |    }
 854 |    100% {
 855 |               transform:  translate(0px,0px)  ;
 856 |    }
 857 | }
 858 | 
 859 | .remove {
 860 |    display: none !important;
 861 | }
 862 | 
 863 | .info-detail {
 864 |   color: var(--info-detail-text-color);
 865 |   padding-top: 2px;
 866 | }
 867 | 
 868 | /* The Modal (background) */
 869 | #modalCamera, #modalDonate {
 870 |     display: none; /* Hidden by default */
 871 |     align-items: center;
 872 |     position: absolute; /* Stay in place */
 873 |     z-index: 1; /* Sit on top */
 874 |     padding-top: 5vh; /* Location of the box */
 875 |     left: 0;
 876 |     top: 0;
 877 |     width: 100%; /* Full width */
 878 |     height: calc(100% - 5vh); /* Full height */
 879 |     overflow: hidden; /* Enable scroll if needed */
 880 |     background-color: rgb(0,0,0); /* Fallback color */
 881 |     background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
 882 | }
 883 | 
 884 | 
 885 | /* Modal Content (Image) */
 886 | #imgCamera {
 887 |     margin: auto;
 888 |     display: block;
 889 |     width: 80%;
 890 |     max-width: 100vh;
 891 | }
 892 | 
 893 | /* Caption of Modal Image (Image Text) - Same Width as the Image */
 894 | #captionCamera {
 895 |   margin: auto;
 896 |   display: block;
 897 |   width: 100%;
 898 |   text-align: center;
 899 |   padding: 10px 0;
 900 |   height: 150px;
 901 | 
 902 |   @apply --paper-font-common-nowrap;
 903 |   position: relative;
 904 |   bottom: 46px;
 905 |   border-bottom-left-radius: 2px;
 906 |   border-bottom-right-radius: 2px;
 907 |   background-color: rgba(0, 0, 0, 0.3);
 908 |   font-size: 16px;
 909 |   font-weight: 500;
 910 |   color: white;
 911 | }
 912 | 
 913 | #donateMethod{
 914 |     font-size: xx-large;
 915 |     padding-bottom: 20px;
 916 | }
 917 | 
 918 | #donateAddress, #donateMethod {
 919 |   margin: auto;
 920 |   display: block;
 921 |   width: 100%;
 922 |   text-align: center;
 923 | 
 924 |   padding-top: 20px;
 925 | 
 926 |   font-weight: 500;
 927 | }
 928 | 
 929 | #donateAddress {
 930 |   font-size: large;
 931 |   overflow-wrap: break-word;
 932 | }
 933 | 
 934 | /* Add Animation - Zoom in the Modal */
 935 | .modal-camera-content, #captionCamera {
 936 |     animation-name: zoomCamera;
 937 |     animation-duration: 1.6s;
 938 | }
 939 | 
 940 | .qr {
 941 |   background-repeat: no-repeat;
 942 |   background-size: contain;
 943 |   margin: auto;
 944 |   display: block;
 945 | 
 946 |   width: 256px;
 947 |   height: 256px;
 948 | }
 949 | 
 950 | .logo {
 951 |   background-repeat: no-repeat;
 952 |   background-size: contain;
 953 |   width: 48px;
 954 |   height: 48px;
 955 |   margin: 10px auto 10px auto;
 956 | }
 957 | 
 958 | .donate, .donate-paypal {
 959 |   text-align: center;
 960 |   padding-top: 10px;
 961 |   padding-right: 10px;
 962 |   max-width: 200px;
 963 |   overflow-wrap: break-word;
 964 | 
 965 | }
 966 | 
 967 | .logo{
 968 |   -webkit-filter: invert(1);
 969 |   filter: invert(1);
 970 |   cursor: pointer;
 971 | }
 972 | 
 973 | .flexwrap {
 974 |   flex-wrap: wrap;
 975 | }
 976 | 
 977 | .donate-box {
 978 |   max-width: 200px;
 979 |       overflow-wrap: break-word;
 980 |     text-align: center;
 981 |     padding-right: 10px;
 982 | }
 983 | 
 984 | .bch .qr{
 985 |   background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEAAQMAAABmvDolAAAABlBMVEUAAAD///+l2Z/dAAABQUlEQVRo3u2ZS67DUAhDvQP2v0vvwG9wDReplTqrnuImkZqQ0wkC8wn04cAP+B5AAABKLBFASUSNNQcoSWL5PQAUq61JAI/J7gKKNdY8QHTUiEgGWJJDphQJOHEcNWVHvWbWw4ElGut8VdqHA304XY6f3lXehwNEW8/PSSECRVQUgCMdx6CRk3PFACOebAF15lRHVAZAq2YXlBs1nIKSAdBCKvuqnSYiCNA8AXMznssBjnLwFtdbZLvyZgDnxiWkI6fLSxbQlwcPeB69A2kAsMRCI6nuL5IArgjxiqb/MAGTAEw5bWQlEIOAcdTtuJas5gAziK224q5rcoA1mI+CckaQIKBXMq4lLaqrwQgBuNpup0w3n8oDbmNxl1YVCMxuxiM5i2823k8G1iK3v/jcbW4O0ELaq+w9lQUBv+/d/wX4A6YqXp+3bgF1AAAAAElFTkSuQmCC');
 986 | }
 987 | .btc .qr{
 988 |   background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEAAQMAAABmvDolAAAABlBMVEUAAAD///+l2Z/dAAABPUlEQVRo3u2ZTarEMAyDdQPd/5a+gWYR/yS0MLvHI5oWBur5VsaW5QT68uAH/B0QAABQCgYABgPsqA9ASQoGg0pCHXUCIoNSgMGEM2oH1O/Kki+gLVfvmbwdyMbBylIhz866HEjJjPN9Ku3lQD8BlHi8T967gVhpwqgpp3ucgHIUWSbVO1iNZASkeqTBoFJUV9qcgPpQimlnbgzn/UB2SZcMpR4sS2FcAB7qWXYj56wNEF0jAGoFGVn1AbBtHftgjeosIyCHK9tmdOEYAZwkYT6mcUyAFtGlHkCPFMoMQP/PPW+yAzIwddOneTbAsYfNYC3PaQNsi/karL2ca9vUDIDeQlM/M2WnM3cAeoy06S7TdXSWD8Ax3d1KfkDZrKyZh9JeD8xFT2ZoP831AUpIsZ/YvFyAXg787rv/C/ABz3F2h7+czu8AAAAASUVORK5CYII=');
 989 | }
 990 | .ltc .qr{
 991 |   background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEAAQMAAABmvDolAAAABlBMVEUAAAD///+l2Z/dAAABNklEQVRo3u2ZSwrDQAxDdQPd/5a6gbvwb0oC3ZUSdQIhOG9lbPkziA8Hf+B7gAAAYIQoAPsCQCOAERGiKEb+ZIzVCVAZI4SkuFY7oN8szhXoGMmEcQQqcZBeynOXWQ8HMK45n6vSPhyYI6RwpKTeVN5nA8JWUw47nA2wVaQajEwY5ZcTwBHPEFJGNMpqAwjlpQyUKjCjpT4AKz62wdhy4gR0jFRVbbp85wPkwNGFVJtAEzAewLabOt1VyWQDxMwcW0wmg4yAaqt6Li89VS0tnIA2cZrOjRcnIK3Y3gIc0gvgMZbikNWZ3A2Atzls5o8SkvABDqd0yz0Lq3ACGMfolfVVHE0xAmp1WX83cXgqjA8ArHxs1+UHcJZW3V9cPPlsYC96dpkrP+B9kds+24WVCfC/7/4V4AWrLcY3z6FLtwAAAABJRU5ErkJggg==');
 992 | }
 993 | .eth .qr{
 994 |   background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEAAQMAAABmvDolAAAABlBMVEUAAAD///+l2Z/dAAABOElEQVRo3u2ZQZLDQAgD9QP9/5f8gD2AYJzdVG6pLcvOxbHbFwokzQzyw4UH+B4QAAAwMxgMZmZwn/oAzJyXAXDBDCsgAC5WfTJP7YAAGHVDZyB7ZoIZ84EVoAaZir2ZrJsDLZlx/f1W2psDc62Ign86772BqDJNrbCeEnQCFCm4AQOyWRoBx9j0nwyOydoAmdUsZaeylKpS0AdoKyk71QRB/eIDlIZKOo8xQguIDaCoOQ6b0z1OQKx6zOz0MNEJyM5azHNNqj6yAWIF4zRWGYsPoC0aaM0hEVHgdAECuGxPtLEWaQRMwNSKXJoKJ+C6DsOrotoAL366+1ZUEjMBeAlYkHp0DDUCAkdhulLo9jEEtBrrGarsbQhsysIRt4yA40AD2qWYafIBJKSVvPcQsCgb4Dnv/i/AD+kw5hcOmeKQAAAAAElFTkSuQmCC');
 995 | }
 996 | .paypal .qr{
 997 |   background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEAAQMAAABmvDolAAAABlBMVEUAAAD///+l2Z/dAAABT0lEQVRo3u3aQa7DIAwE0GHFMThqOCrHYMV0YUOIFLVOvv5uskAJet24rjGk4I8LfwcNfh0tkxV54CDHnM0CYZBJkgNHMzV8IEk2gQdgAHuA09ULvAMHO/xO4DVoAFAE3oP1889kLZyPN/VB4CvYlqSxDbdrlsAXcDZEeyG47aMEvoIGePm0O5LVo0xW/y4EAoA9WUyr1dCeLOj+IYE4mG36sRQKSTYkC7VADFjlRLKZuTh561kLBZ4AIA+g9MSKPEuqPwpEATvW1udM1TEzVyAMrEO3NcjTt65qIPAAWIRnvtpg+WrhF4iCVT5nlp5dO62QCsTA1rrD2ySvpkhb0gr8BOd2kj35xnzfWAqEwXYUnMg2a4AtToUCcbC2432BS30QeA7W9KICb4Bn6XxH0eYZiEAUXI6C1/H64WcfAmFwHgXPd7nc7rJAFPz/nxM+avxtC12NiPcAAAAASUVORK5CYII=');
 998 | }
 999 | .xrp .qr{
1000 |   background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEAAQMAAABmvDolAAAABlBMVEUAAAD///+l2Z/dAAABRElEQVRo3u2Zy43DQAxD2YH675IdaA9DfYIYyC1YDGNfjJl3EvQhZeSHBz/gewABAAgCwcjMJKJPjYBzGAT0lWzUCjghYhDB4IlPnRoCCEYSUKBcgVTNMJKPgboeUOGoawTFvFXW5UA10tf3odPeDfRz0kTp8jR57wY0RmNNFYa+FUkPIHhup41ouFagXIBOkR6qOac2QCpB0KM1RHsBCkmJDKmLmidOAKtpnJTp1HltILcDJS+rj4RkVpTAMAF0RYmMllp7sDoAWdVy3Hmom0zhmADbgqmPSnJwVdb9wKmVWc6obJQ5ZsBUTnbkOqM8gFnPYIVLg8UIWD4sx4m0G7EB2oJz9pdj042AXuRGcjaYJcCNgL3I3XIzxrEaATnigmt95we0MS9bnoQV0D96Rmmh/akPsBe5oyy0n/ABfv+7/wvwB7fnlme6/ARZAAAAAElFTkSuQmCC');
1001 | }
1002 | #xrp .logo, .xrp .logo{
1003 |   background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMjYuNzc3IiBoZWlnaHQ9IjIyNi43NzciIHZpZXdCb3g9IjAgMCAyMjYuNzc3IDIyNi43NzciPjxwYXRoIGQ9Ik0xOTYuMjI0IDEzOS41MTVjLTcuNTktNC4xNjItMTUuODQ4LTYuMDktMjMuOTgxLTYuMDI2bC4wNjktLjAzOWMtMTEuMTU4LjEyOC0yMC4zMTEtOC41NS0yMC40NDItMTkuMzgtLjEyOS0xMC42ODYgOC41NjUtMTkuNDY3IDE5LjUwNS0xOS44MzJ2LS4wMDVsLS4wMi0uMDFjOC4yNzYtLjA0IDE2LjY0OS0yLjE0NSAyNC4yNzctNi41NDcgMjIuODEtMTMuMTY1IDMwLjMwOS00MS43ODcgMTYuNzQ5LTYzLjkzLTEzLjU2My0yMi4xNDQtNDMuMDQ3LTI5LjQyMy02NS44NTctMTYuMjU4LTIyLjgxIDEzLjE2NC0zMC4zMDggNDEuNzg3LTE2Ljc0NyA2My45MyA1LjY0OCA5LjIyNyAyLjUyNiAyMS4xNTItNi45NzggMjYuNjM4LTkuMzY5IDUuNDA3LTIxLjQzMyAyLjUzNC0yNy4xODgtNi4zODNsLS4wMDUuMDAydi4wMjVjLTQuMTQ3LTYuOTUxLTEwLjE4OS0xMi45NTYtMTcuOTEzLTE3LjE5Mi0yMy4xMDMtMTIuNjcyLTUyLjQxNy00Ljc2NC02NS40NyAxNy42NjctMTMuMDUzIDIyLjQyNi00LjkwMyA1MC44ODIgMTguMjAxIDYzLjU1MyAyMy4xMDUgMTIuNjcyIDUyLjQxNSA0Ljc2MyA2NS40NjktMTcuNjY3LjA3OS0uMTM1LjE0OS0uMjc1LjIyNi0uNDExdi4wMzNsLjAwNS4wMDJjNS41NDUtOS4wNTQgMTcuNTU1LTEyLjE5MSAyNy4wNDctNi45ODUgOS42MjggNS4yODEgMTMuMDIxIDE3LjEzNiA3LjU4MyAyNi40OC0xMy4wNTUgMjIuNDMxLTQuOTA0IDUwLjg4NSAxOC4xOTkgNjMuNTU1IDIzLjEwNCAxMi42NzMgNTIuNDE3IDQuNzYzIDY1LjQ3LTE3LjY2NyAxMy4wNTEtMjIuNDI4IDQuOTA0LTUwLjg4MS0xOC4xOTktNjMuNTUzeiIvPjwvc3ZnPg==');
1004 | }
1005 | #btc .logo, .btc .logo{
1006 |   background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMjYuNzc3IiBoZWlnaHQ9IjIyNi43NzciIHZpZXdCb3g9IjAgMCAyMjYuNzc3IDIyNi43NzciPjxwYXRoIGQ9Ik0xODIuOTgxIDExMi44NTRjLTcuMy01LjQ5OC0xNy42OTktNy42OTctMTcuNjk5LTcuNjk3czguOC01LjEwMiAxMi4zOTYtMTAuMTk5YzMuNi01LjA5OSA1LjM5OS0xMi45OTkgNS43LTE3LjA5OC4yOTktNC4xMDEgMS0yMS4yOTYtMTIuMzk5LTMxLjE5My0xMC4zNjQtNy42NTgtMjIuMjQxLTEwLjY5OC0zOC4xOS0xMS42ODdWLjI3OGgtMjEuMzk2VjM0LjU3SDk1LjA5NlYuMjc4SDczLjcwMlYzNC41N0gzMS42MXYyMi4yMTloMTIuMzcyYzMuMzczIDAgOS4zNzIuMzc1IDExLjkyMSAzLjIyOCAyLjU1IDIuODQ4IDMgNC4zNDkgMyA5Ljg5NWwuMDAxIDg4LjUzNWMwIDIuMDk5LS40IDQuNjk3LTIuMjAxIDYuMzk4LTEuNzk4IDEuNzAxLTMuNTk3IDIuMDk4LTcuODk4IDIuMDk4SDM2LjAwOWwtNC4zOTkgMjUuNjk4aDQyLjA5MnYzNC4xOTVoMjEuMzk1di0zNC4xOTVoMTYuMjk3djM0LjE5NWgyMS4zOTZ2LTM0Ljc1OWM1LjUzMS0uMzIzIDEwLjY4OC0uNzQyIDEzLjY5Ni0xLjEzNiA2LjEtLjc5OCAxOS44OTYtMi4zOTggMzIuNzk2LTExLjM5NyAxMi44OTYtOSAxNS43OTMtMjMuMDk4IDE2LjA5NC0zNy4yOTQuMzA0LTE0LjE5Ny01LjEwMi0yMy44OTctMTIuMzk1LTI5LjM5NnpNOTUuMDk2IDU4Ljc2NnM2Ljc5OC0uNTk5IDEzLjQ5Ny0uNTAxYzYuNzAxLjA5OSAxMi41OTcuMyAyMS4zOTggMyA4Ljc5NyAyLjcwMSAxMy45OTIgOS4zIDE0LjE5NiAxNy4wOTkuMTk5IDcuNzk5LTMuMjA0IDEyLjk5Ni05LjIgMTYuMjk2LTUuOTk4IDMuMjk5LTE0LjI5MiA1LjA5OS0yMi4wOTQgNS4zOTYtNy43OTcuMzAxLTE3Ljc5NyAwLTE3Ljc5NyAwdi00MS4yOXptNDcuODkgMTAyLjI3OWMtNC44OTkgMi43MDEtMTQuNjk4IDUuMS0yNC4xOTQgNS43OTgtOS40OTkuNzAxLTIzLjY5Ni40MDEtMjMuNjk2LjQwMXYtNDUuODkzczEzLjU5OC0uNjk4IDI0LjE5NyAwYzEwLjU5Ny43MDMgMTkuNDk1IDMuNCAyMy40OTIgNS40MDMgMy45OTkgMS45OTggMTEgNi4zOTYgMTEgMTYuODk2IDAgMTAuNDk2LTUuOTAzIDE0LjY5Ni0xMC43OTkgMTcuMzk1eiIvPjwvc3ZnPg==');
1007 | }
1008 | #bch .logo, .bch .logo{
1009 |   background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMjciIGhlaWdodD0iMjI3IiB2aWV3Qm94PSIwIDAgMjI3IDIyNyI+PHBhdGggZD0iTTIwMi4yNzcgMTg0aC0zOS45ODZjMjItMTUuNDIxIDM2LjM4My00MC45NTMgMzYuMzgzLTY5Ljg0IDAtMjguODg2LTE0LjM4My01NC40MTgtMzYuMzgzLTY5Ljg0aDQxLjAxOEMxODIuNTU3IDE3LjM2OSAxNDkuOTY3IDAgMTEzLjMyMiAwIDc2LjY3NCAwIDQ0LjA4NiAxNy4zNjggMjMuMzM0IDQ0LjMyaDQxLjAxOUM0Mi4zNTEgNTkuNzQzIDI3Ljk3IDg1LjI3NSAyNy45NyAxMTQuMTZjMCAyOC44ODcgMTQuMzgxIDU0LjQxOSAzNi4zODMgNjkuODRIMjQuMzY2YzIwLjc5MSAyNi4xOTggNTIuOTEyIDQzIDg4Ljk1NiA0MyAzNi4wNDMgMCA2OC4xNjQtMTYuODAyIDg4Ljk1NS00M3pNNDUuNTgyIDEzMS4xNDZjLTkuNTYtMzcuMzcgMTMuMDItNzUuNDA2IDUwLjQzMi04NC45NTQgMzcuNDEyLTkuNTUgNzUuNDg4IDEzLjAwNSA4NS4wNDcgNTAuMzc2IDkuNTU5IDM3LjM3LTEzLjAyIDc1LjQwNi01MC40MzIgODQuOTU1LTM3LjQxMSA5LjU0OC03NS40ODktMTMuMDA3LTg1LjA0Ny01MC4zNzd6Ii8+PHBhdGggZD0iTTE1MC4wODQgMTE2LjUyOWMtMS4yOTctNS41NzItNC4zNzctOC44MTgtNy43NzctMTAuMjM3cy03LjY4NC0xLjI0LTcuNjg0LTEuMjQgMi45My0yLjg2OCAzLjgyNi01LjIxN2MuODk4LTIuMzQ4LjgxMy01LjYxLjUyLTcuMjRzLTEuNzM0LTguNDEyLTcuOTU5LTEwLjkzOWMtNC44MTMtMS45NTUtOS43NTYtMS45NTctMTYuMDg4LS43NTJsLTMuNDY0LTEzLjU0NS04LjM2MSAyLjEzNCAzLjQyMyAxMy4zODQtNi4zNjcgMS42MjYtMy40MjQtMTMuMzg1LTguMzYgMi4xMzMgMy40MjUgMTMuMzg1LTE2LjQ0NyA0LjE5OCAyLjIxOCA4LjY3IDQuODMzLTEuMjMzYzEuMzItLjMzNyAzLjctLjc4OCA0Ljk4MS4wNzEgMS4yOC44NTggMS42MDcgMS4zOTggMi4xNiAzLjU2M2w4LjgzOSAzNC41NTRjLjIxLjgyMS4zMTMgMS44NzUtLjIyIDIuNzE5LS41MzQuODQyLTEuMTk2IDEuMTc3LTIuODc3IDEuNjA2bC01IDEuMjc1Ljg0OCAxMC40NyAxNi40NDYtNC4xOTggMy40MTQgMTMuMzQ3IDguMzU5LTIuMTM0LTMuNDE0LTEzLjM0NiA2LjM2Ny0xLjYyNSAzLjQxNCAxMy4zNDYgOC4zNjEtMi4xMzQtMy40NjktMTMuNTY2YzIuMTI3LS42NzggNC4xLTEuMzU0IDUuMjM2LTEuODFsLjE4LS4wNzFjMi4zODctLjk1IDcuNDU5LTIuOTY5IDExLjQ5OC03LjY0OCA0LjE0MS00Ljc5OSAzLjg2Ni0xMC41OSAyLjU2My0xNi4xNjF6bS00My4zOTItNi40NjhsLTQuMTIzLTE2LjExNXMyLjU5Ny0uOTEyIDUuMjI1LTEuNTQyYzIuNjI4LS42MjkgNC45NTEtMS4xNCA4LjY1OS0uOTYzIDMuNzA3LjE3OCA2LjM5NSAyLjIzMyA3LjI1NCA1LjI1OC44NTUgMy4wMjQuMDQ3IDUuMzkyLTEuOTY5IDcuMjc3LTIuMDE0IDEuODg3LTUuMDc0IDMuNDE1LTguMDkzIDQuMzExLTMuMDE3Ljg5NS02Ljk1MyAxLjc3NC02Ljk1MyAxLjc3NHptMjQuOCAxOS4wMjhjLTEuNjQ1IDEuNTQzLTUuMjM0IDMuNDU3LTguODczIDQuNjc3LTMuNjQzIDEuMjIyLTkuMjE5IDIuNTE5LTkuMjE5IDIuNTE5bC00LjU4Mi0xNy45MTFzNS4yNDMtMS42MjkgOS40NTQtMi40MTNjNC4yMTEtLjc4MiA3Ljk1Ny0uNjE4IDkuNzE5LS4yMzUgMS43NjIuMzgyIDQuOTM2IDEuNCA1Ljk4NCA1LjQ5OCAxLjA0OCA0LjA5NS0uODM4IDYuMzIzLTIuNDgzIDcuODY1eiIvPjwvc3ZnPg==');
1010 | }
1011 | #ltc .logo, .ltc .logo{
1012 |   background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMjYuNzc3IiBoZWlnaHQ9IjIyNi43NzciIHZpZXdCb3g9IjAgMCAyMjYuNzc3IDIyNi43NzciPjxwYXRoIGQ9Ik05NC43MTggMTg0LjE0NWwxMi43NzgtNjAuODM1IDY0LjU3OC00NC4yNzEgNy41Ny0zNi4xNTYtNjQuNTkxIDQ0LjQ1MkwxMzMuMzk4IDBoLTQ5LjYxTDU3LjE0MiAxMjcuMTg5bC0yNy4xNjcgMTguNjk4LTYuMzA4IDM0Ljg5NCAyNS45NzItMTcuODA2LTEzLjM1OCA2My43NjhoMTU4LjkxN2w4LjgyOS00Mi41OTh6Ii8+PC9zdmc+');
1013 | }
1014 | #eth .logo, .eth .logo{
1015 |   background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMjYuNzc3IiBoZWlnaHQ9IjIyNi43NzciIHZpZXdCb3g9IjAgMCAyMjYuNzc3IDIyNi43NzciPjxwYXRoIGQ9Ik0xMTIuNTUzIDE1N1Y4Ni45NzdsLTY4LjM5NSAyOS45NnptMC03NC44MzdWLS4wNTZMNDYuMzYyIDExMS4xNTZ6TTExNi45NjItLjA5djgyLjI1M2w2Ny4xMjEgMjkuNDAzem0wIDg3LjA2N3Y3MC4wMjVsNjguNDQzLTQwLjA0NXptLTQuNDA5IDE0MC40Mjl2LTU2LjMyMUw0NC42MTggMTMxLjMxem00LjQwOSAwbDY3LjkzNS05Ni4wOTYtNjcuOTM1IDM5Ljc3NXoiLz48L3N2Zz4=');
1016 | }
1017 | #paypal .logo, .paypal .logo{
1018 |   background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAARgAAAEvCAMAAACpLy6rAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAjboAAI26AU8yY2QAAAAZdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuMjHxIGmVAAAC+lBMVEX///8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABawBz3AAAA/XRSTlMAAQIDBAUGBwgJCgsMDQ4PEBESExQVFhcYGRobHB0eHyAhIiMkJSYnKCkqKywtLi8wMTIzNDU2Nzg5Ojs8PT4/QEFCQ0RFRkdISUpLTE1OT1BRUlNUVVZXWFpcXV5fYGFiY2RlZmdoaWprbG1ub3BxcnN0dXZ3eHl6e3x9fn+AgYKDhIWGh4iJiouMjY6PkJGSk5SVlpeYmZqbnJ2en6ChoqOkpaanqKmqq6ytrq+wsbKztLW2t7i5uru8vb6/wMHCw8TFxsfIycrLzM3Oz9DR0tPU1dbX2Nna29zd3t/g4eLj5OXm5+jp6uvs7e7v8PHy8/T19vf4+fr7/P3+qfsm2AAADjtJREFUGBntwQuczXXeB/DPmasxZszkFo+KVG6VnYpU2wolWSHZii6r8qSprc3KI0pyqSTF2jxbujf1FDbSpBstS1qrSWI265IUSqjRDDPOzPm8Xg9yfmcuv3Nm5vf9n/+c37z+7zc8Ho/H4/F4PB6Px+PxeDwej8fjCUrMcF9aHGLfGNaBQOF3mz9b/spDN17cyocY9Sbr1sG1M3/XEjFoF2PA1hdvbo7YcjJjROmykS0QQ65h7Cj76PYMxIoZjCk/zzwVsWEVY0zZgosQAxIPMfb883LUua6MSbkdUMfuZGzyz8xEnXqFsWrfHXGoQ1sYu5a2Qp1pylj2w5WoK/0Z22Ylo25MYoz7/AzUiQ8Y6344F3UgroAx70APuK8zLXDoSrhuOG3gHwa3PU0rBG6Cy9bTDod7wlWNymiJ/e3hpp60xpYmcNFY2mNFEtyziBZ5Hu75jjYZCLe0oVV2NoZLrqNd5sIlT9IyveGO1bTMtlS4IamYtpkGN5xP6xQ1hQvuon0mwQWv0j4/piP6ttFCYxB1zWmj7xog2gbQStmItim00gZE21LaqT2iK+4A7XQfoussWupTRNcttFVbRNVc2moUomoDbbUa0ZReRlsFTkAU9aa9eiOKxtFeoxBFiymXv64aX+wsZhS8gijaQ7HiZFQvtd3Qp74I0FEbED2nUu5j1FSrCTvpoNIURM1Qyk1HzSUM+ZLO6YaomUW5waiN5IkldMoIlNcODlpDuZaonQ7r6ZDpKO+ynnBMcgnFvkJtNV5GZ8xFeQmfN4dTLqBcDmot6TU6Yj4qeOpdHxzyR8plo/bi36MTPkQFF3MMHPI65bJgIHMzHbAWFfh2+LPgjO0UK4yHiY6FlNuCih7jCjjiRMotg5lxlPsBFZ1D/g5OGES5yTDT4GuK+VHJJm5vAAc8TLl+MHQd5RqiosnkeDjgI4oFMmHI9xXFklDRVWThf0EsvpBi+TA2iVLFqKQ9yT9DrAvlnoVOyonVaBEPnEGpPagkoYQsaASpEZS7GToPsTolGxdM+YFCW1DZFyRHQuo5ynWEzod0RR4qe53kBkjlU2y/DxrxB+iKv6OyB3jEJZBpHKBYLnS60B2LUdkQHjEPMpdRbhx0RtIdOaisE4/wN4PI/ZTrBZ2X6Y45qCzxMI+4HiK5FCtNhc5WumM8qsjnEa9CZC/F8qDTgi4ZjCre5RF74yBwGuVmQ+cquqQDqljCo7pDYBjlhkLnMbrjcAKqeIdHTYTAbMq1hc4qumMjqsrlUWsgsJZiu6GTVEx3zENVuTyqLB3GUg5TbAF0ulP54ZNI8inzEKp6m8d0g7GLKDcKOvdQeQCRDKPMdahqMY+5EcZGUe4C6MyncikimUyZs1HVYh7zMIzNo1hxMnR2MagsDZHMp0hpMqp6i8cshLEdFPsYOm2ofI5I4nZT5DNoLOIxm2CqFeWmQ2colTmI5DeUeRwai3iMPxGGBlNuMHT+TOUGRDKLMv2hsZC/6AhD0yh3InQ+pXIaIvB9S5HSdGgs5y96wNByim2DTmopg/Ygkgsp8wl0dvEX/WAmoYhiOdDpSWURIplBmYehkcrjhsBMFuWyoTOOyhhEkLyTMpdBowuPuxFmRlIuCzq5VH6DCO6mTElDaAzhcbfDzAsUK4yHhm8fgw6nILy0PZRZAZ2xPG40zHxJsaXQ6UBlDSKYQKFR0HmOxz0II5kBik2GznAqMxFe0wOUCbSGzj943GMw0pdy/aAzl8q1CG8GhZZDazePmwojEygWyIROPpWTEFbnYgrdBp00Bt0LI0solg+dzACDvkVYqfkU8jeFThaDboUJ336KzYVOPypvIKwXKbUEWtcwaAhMtKfccOhMpnI3wrmJYjdAaxyDLoWJGyjXETrLqJyPMDoVUepQGrTmM+hcmHiKYvt90IgvZNChJOg13kixHGj59jKoHUzkUSwXOllUVkIvYw3lzoPWr6icAAMN/RQbB51sKtOglbmWciugdw+DyuJh4GLK9YRODpVB0GmSRwcMhN5iBm2GidEUK02FzldUWkCj6To6YHMctOILGLQQJhZQLA86LalshUaHjXRCNvTOpzIVJr6l2GzoXE3lZVQ1vIhO2NcQemOpDIOB1pQbCp3pVG5HZemv0RlTEcYHVM6BgSGUawOdj6n8CpV020pn/NwCehklDCpLgYHpFNsFneQSBv0cjwqazThMh0xAGMOpbIWJf1BsAXQupLIU5WVOKaRTdqcijPepLIaBhIMUGwWdP1GZhJC0+3+ic0YgjOalVB6FgXMpdwF0/kblChwX32v2XjooPx5hZDPkKhjIplhxMnR2MyiQiaOSf/vsXjprAMJZSaUsEwZeotgq6JxKJf+ErtfeN3fZATptOcI5OUDlU5j4D8UKvtTZwagr64pwRjNkOgw0ocWmIaz1DOkHA/1or43JCKc3Q/xpMDCR1vKfh7DeZshqmHiP1noIYbUPMGQqDPh+pK0+S0RYc1jOpTDQkbYqORthnVDEkH2JMHATbTUa4Y1lOU/DxP/SUq8jvMSdLKcnTKyjndY1RHi3sJydcTCQWkor7W2D8FJ3sZwnYKIHreTvhQgmsLxuMDGGVroLEbQsZDlbYeRN2uh5RPIMy5sCI7tpoTcTEMGZZSwncDpMnEwL5SYhkndZ3iIYuYb2eT8ZkfRlBT1gZAat81EKIkn/muV9CjMf0zYrUxHRs6xgKIwkHqJlVqUjon6s4JsEGOlKy7zRABFl7mIF98LMnbTLIz5ElsMKfs6AmRzaxH8rqjGYFU2FoS20SEEfVKPlHlawJx1mmtEi289ENZJXs6JsGOpPeyzIRHWeZUWbEmBoMm1RNALVuoOVDIKpD2iJdR1QrR5+VrQCpuIKaIXAE8mo1il7WFGgG0x1phW+vgLVa5jHSl6BseG0QPGkhqhegw9YyXdNYOxpxr63TkUNJL3DygbC3HrGus39UBOJC1nZyzCXVsbYtn9sMmoifh4r25kJcz0Z077/nzTUSFwOq/gtBMYyhn17VwpqJv4FVvEcJBYxZm0bkYQaapTLKrY0hsR3jE3+RYMSUFOt8ljFgc6QaMOYtGFUc9TcWTtYRWAgRK5j7Nn/l66ojT4FrOp+yDzJGPPvx3snoVZu8bOq+T7IfMIYcjA3uy1qqdHz1Pg8FTJJxYwRO94cf3kKaq3rZmrsaQuh81n3yrb/bVzfZjARN9ZPjX1dIHUX60qgaO+/33t6/A092ibCVOuPqPPTuRB7jWJbutdSt7NOa5XZAHJD91PnQHfIbaPYS6gbZ/6dWoUXQ6455bJRFxrP9FPrYC84YADlzoP7fL//nno/94ETplKsOBGuu/AThrEzC45YSrHVcFvPpQzn89ZwRNwBij0Jd/X7mGEtSYMzzqLcULjId3Uew5sTD4fcSrl2cM2J925ieKWj4Ji5FNsLlyQMesvPCL7+NZyzgWLvwBWdpn/PiN7IgHPSyyg2AVGXeMmj6xlZ4c1w0qWUuwLR1fqWBQWszqdnwFHjKNcEURN/5k2z17N6JVOS4KzFFNuCqIjreP3MVUWskSWnw2l7KJYDJyU1Obv/yIdfWbHdz5raNgCOa0e5P0Bn4ru1tOyTL7buLvCztg4+0ADOG0q57tDZQVeU5pyCaJhFsZJkaLSkG0qeOQ3RsYZi/4LOQEZf0ZOtESUNDlNsNnSmMtp+mtIMUXMB5a6HzlJG18rhjRBFf6Rce2jEFTCKdj/aHtH1OsV+9EGjE6Pm8MIBCYi27RR7Hzo3MTp2/HVQGqLvRMpNgs4cOq/kwz91hjsGUa4/dPLorO3zx/RuBNc8Qrnm0Ejx0ynFmxeN79sU7vqIYl9B5yKK+H/atWX9qjem33XVec19cF98IcVeh849VO5sUzuntGyciDrWhXL3QOf/qJwG+/w35S6CzlcM2gcLPUcxfwo0mlNZAgvlUywPOv2pTIR9MgIUmwOdSVT6wT59KPd76LxHpSnscz/lOkHD9yODtsJCuRQriINGeyqvwkJ7KbYUOtdTuRv2OZ1yU6Ezm8oFsM8wyg2Czr8YdLgB7DObci2hkVzCoLWw0FqKfQOd7lT+AvukHKbYfOj8gcqNsM9FlBsNnRwqHWCfUZTrAZ0tDPrJB/vMo1hpKjSaUPkAFvqGYuuhcwWVybBPK8o9A50HqVwJ+wym3C3QeYdKC9hnGuXOhs5eBm2HhVZQrDAeGu2ovAH7JBRRbDl0hlIZBftkUW4adGZS+TXsM5JyV0NnNYP8DWGfFyl3EjSSihn0GSz0JcV2Qacrlb/CPpkBir0JnWwqw2GfvpQbC52XqHSGfR6kXC/obGLQgTjYZwnFytKhkRFg0DLYx7efYhuh04fKI7BPe8o9B53xVK6CfW6k3G3QWUylFezzFOWyoPM9g76FhfIodjABGm2oLIB9GvopthI611IZA/tcTLnHoTODyiWwz2jKXQudlQwqawT7LKBcG2gkHGTQF7DQTop9D50sKnNhn9aUWwyd26jcCvsModx46DxPpQvsM51yfaCzkUFF8bDPSooFMqCRXsagFbBP4kGKbYJObyqPwT7nUu4l6IylMgT2yaZcNnQWUjkZ9mnWQS4VOrsYtBuekJOoLIInZAiV++AJmUalNzwhyxkUaAyPEl/IoHx4Qs6m8gI8IbdSGQlPyFwq58ATsp5BhxLhURqVMWgVPCE9qDwBT8i9VK6DJ2QBlbbwhHzDoD3whLSi8jbqoT7rDG2m8gDqoUcpdznqoeUUC2Si/kkooth/UA9lUe5l1EMjKXcH6qEXKdcN9dCXFCtJQv2TGaDYP1EP9aXcLNRDD1JuGOqhdyl3Ouof348U24f6KEMuDR6Px+PxeDwej8fj8Xg8Ho+ndv4fD0GG7trOAJ8AAAAASUVORK5CYII=');
1019 | }
1020 | 
1021 | /* ################################################# height > 600px ############################################# */
1022 | @media screen and (min-height: 600px) {
1023 |   #status-bar {
1024 |     /*margin-top: 15px;
1025 |     margin-bottom: 15px;*/
1026 |     /*height: var(--status-bar-height);*/
1027 |   }
1028 | }
1029 | 
1030 | /* ################################################# w1: width XS < 767 ############################################# */
1031 | @media screen and (max-width: 767px) {
1032 | 
1033 | #carousel_settings {
1034 |     margin-right: 10px;
1035 |     margin-left: 10px;
1036 |         /*text-align: center;*/
1037 | }
1038 | #carousel_settings h1{
1039 | text-align: center;
1040 |   }
1041 | #carousel_settings li{
1042 | text-align: left;
1043 |   }
1044 |   .log-item-date {
1045 |     font-weight: 300;
1046 |     font-style: italic;
1047 |     font-size: smaller;
1048 | }
1049 | .camera-feed {
1050 |   width: 300px;
1051 |   }
1052 |   .content-box {
1053 |       width: 100%;
1054 |   }
1055 |   #code-display {
1056 |        margin-top: 10px;
1057 |   }
1058 |   #main-content {
1059 |     /* padding-bottom: 30px; */
1060 |   }
1061 | 
1062 |   /* NIGHT, HOME and AWAY buttons */
1063 |   div.arm button {
1064 |     font-size: large;
1065 |   }
1066 | 
1067 |   #alarm-status span {
1068 |     font-size: x-large;
1069 |   }
1070 |   .sm {
1071 |     display: none !important;
1072 |   }
1073 |   .sign {
1074 |       font-size: x-large;
1075 |    }
1076 |    #clock, #weather {
1077 |     display: none;
1078 |    }
1079 |    #hour, #minute, #middle {
1080 |       font-size: xx-large;
1081 |    }
1082 |    #meridiem {
1083 |       font-size: 10px;
1084 |       margin-left: -20px;
1085 |       margin-right: 3px;
1086 |    }
1087 |    #weather-icon img {
1088 |       width: 40px;
1089 |    }
1090 |    .weather {
1091 |       -webkit-box-pack: center;
1092 |       -ms-flex-pack: center;
1093 |       justify-content: center;
1094 |       -webkit-box-orient: vertical;
1095 |       -webkit-box-direction: normal;
1096 |       -ms-flex-direction: column;
1097 |       flex-direction: column;
1098 |       display: -webkit-box;
1099 |       display: -ms-flexbox;
1100 |       display: flex;
1101 |       color: var(--weather-text-color);
1102 |    }
1103 |    .vLayout {
1104 |       -webkit-box-orient: vertical;
1105 |       -webkit-box-direction: normal;
1106 |       display: -webkit-box;
1107 |       display: -ms-flexbox;
1108 |       display: flex;
1109 |       flex-wrap: wrap;
1110 |       justify-content: center;
1111 |       text-align: center;
1112 |    }
1113 | 
1114 |   /* ## codepanel ## */
1115 |   /* numeric keys */
1116 |   #codepanel button {
1117 |     font-size: x-large;
1118 |   }
1119 | 
1120 |   /* special keys: clear, disarm */
1121 |   #codepanel button.clear, #codepanel button.disarm {
1122 |     font-size: small;
1123 |   }
1124 | 
1125 |   #code-display {
1126 |     margin-bottom: 15px;
1127 |   }
1128 | }
1129 | /* ############## w2: SM > 768 ############### */
1130 | @media screen and (min-width: 768px) {
1131 |     .content-box {
1132 |       /*height: 100%;*/
1133 |       width: 100%;
1134 |       /*padding-bottom: 20px;*/
1135 |   }
1136 | .cameras{
1137 |     padding-right: 15px;
1138 |   }
1139 |   .camera-feed {
1140 |   width: 400px;
1141 | 
1142 | }
1143 | 
1144 | .log-item{
1145 |   display:flex;
1146 |   flex-direction:row;
1147 |   width: 100%;
1148 | }
1149 | 
1150 | .log-item > span{
1151 |   flex-grow:1;
1152 | }
1153 | 
1154 | .log-item > div{
1155 |   flex-grow:0;
1156 |   font-size: large;
1157 |   margin: auto;
1158 |   font-family:  var(--paper-font-body1_-_font-family);;
1159 | }
1160 | 
1161 | .log-item-date {
1162 |     font-weight: 300;
1163 |     font-style: italic;
1164 |     text-align: right;
1165 | }
1166 |   #main-content {
1167 |     /* padding-top: 20px;
1168 |     padding-bottom: 120px; */
1169 |   }
1170 |   #code-display {
1171 |        margin-top: 5px;
1172 |        margin-bottom: 5px;
1173 |   }
1174 | 
1175 | /* NIGHT, HOME and AWAY buttons */
1176 | div.arm button {
1177 |   font-size: x-large;
1178 | }
1179 | 
1180 | /* ## codepanel ## */
1181 | #codepanel button {
1182 |   font-size: xx-large;
1183 | }
1184 | 
1185 | #codepanel button.clear, #codepanel button.disarm {
1186 |   font-size: large;
1187 | }
1188 | 
1189 | #alarm-status span {
1190 |    font-size: x-large;
1191 | }
1192 |   .xs {
1193 |     display: none !important;
1194 |   }
1195 |    .sign {
1196 |       font-size: xx-large;
1197 |    }
1198 |    #meridiem {
1199 |       font-size: small;
1200 |       margin-left: -29px;
1201 |    }
1202 |    #weather, #clock {
1203 |      width: 30%;
1204 |    }
1205 |    #alarm-status {
1206 |     width: 40%
1207 |    }
1208 |    #weather-icon img {
1209 |       width: 70px;
1210 |    }
1211 |    .vLayout {
1212 |       -webkit-box-orient: horizontal;
1213 |       -webkit-box-direction: normal;
1214 |       display: -webkit-box;
1215 |       display: -ms-flexbox;
1216 |       justify-content: center;
1217 |       display: flex;
1218 |       min-width: 50%;
1219 |       justify-content: center;
1220 |       flex-wrap: wrap;
1221 |       text-align: center;
1222 |    }
1223 | }
1224 | 
1225 | /* ######################################################### w3: for Wide Screens (width >= 1024) ################################################# */
1226 | @media screen and (min-width: 1024px) {
1227 |   /* NO span here - breaks a lot! */
1228 |   li, .settings-nav-text{
1229 |     font-size: large;
1230 |   }
1231 | 
1232 |   #weather, #clock {
1233 |      width: 33%;
1234 |    }
1235 |    #alarm-status {
1236 |       width: 34%;
1237 |     }
1238 |    .info-detail {
1239 |     font-size: large;
1240 |    }
1241 |    h1 {
1242 |     font-size: x-large;
1243 |    }
1244 | 
1245 |    .settings-nav-inner{
1246 |     margin-right: 20px;
1247 |    }
1248 | 
1249 |   .settings-nav-inner ha-icon-button {
1250 |     width: 60px;
1251 |     height: 60px;
1252 | 
1253 |   }
1254 | 
1255 |   /* NIGHT, HOME and AWAY buttons */
1256 |   div.arm button {
1257 |     font-size: xx-large;
1258 |   }
1259 | 
1260 |    #info-panel-selection ha-icon-button {
1261 |     width: 60px;
1262 |     height: 60px;
1263 |     margin-left: 15px;
1264 |   }
1265 | }
1266 | 
1267 | /* ######################################################### w4: width => 1200 ################################################# */
1268 | @media screen and (min-width: 1200px) {
1269 |   .md {
1270 |     display: none !important;
1271 |   }
1272 |   .lg{
1273 |     display: flex !important;
1274 |   }
1275 |   .initial {
1276 |     display: flex;
1277 |   }
1278 | 
1279 |   .content-box {
1280 |       width: 75%;
1281 |   }
1282 |   #controls {
1283 | /*    width: 50% !important;
1284 |     max-height: 60vh;
1285 |     height: auto;*/
1286 |   }
1287 | 
1288 | }
1289 | 


--------------------------------------------------------------------------------
/custom_components/bwalarm/resources/lib/jscolor.js:
--------------------------------------------------------------------------------
   1 | /**
   2 |  * jscolor - JavaScript Color Picker
   3 |  *
   4 |  * @link    http://jscolor.com
   5 |  * @license For open source use: GPLv3
   6 |  *          For commercial use: JSColor Commercial License
   7 |  * @author  Jan Odvarko
   8 |  * @version 2.0.5
   9 |  *
  10 |  * See usage examples at http://jscolor.com/examples/
  11 |  *
  12 |  * 09.05.2019 onDocumentMouseDown and onDocumentTouchStart functions modified
  13 |  * as per https://community.home-assistant.io/t/yet-another-take-on-an-alarm-system/32386/1390
  14 |  *
  15 |  */
  16 | 
  17 | 
  18 | "use strict";
  19 | 
  20 | 
  21 | if (!window.jscolor) { window.jscolor = (function () {
  22 | 
  23 | 
  24 | var jsc = {
  25 | 
  26 | 
  27 | 	register : function () {
  28 | 		jsc.attachDOMReadyEvent(jsc.init);
  29 | 		jsc.attachEvent(document, 'mousedown', jsc.onDocumentMouseDown);
  30 | 		jsc.attachEvent(document, 'touchstart', jsc.onDocumentTouchStart);
  31 | 		jsc.attachEvent(window, 'resize', jsc.onWindowResize);
  32 | 	},
  33 | 
  34 | 
  35 | 	init : function () {
  36 | 		if (jsc.jscolor.lookupClass) {
  37 | 			jsc.jscolor.installByClassName(jsc.jscolor.lookupClass);
  38 | 		}
  39 | 	},
  40 | 
  41 | 
  42 | 	tryInstallOnElements : function (elms, className) {
  43 | 		var matchClass = new RegExp('(^|\\s)(' + className + ')(\\s*(\\{[^}]*\\})|\\s|$)', 'i');
  44 | 
  45 | 		for (var i = 0; i < elms.length; i += 1) {
  46 | 			if (elms[i].type !== undefined && elms[i].type.toLowerCase() == 'color') {
  47 | 				if (jsc.isColorAttrSupported) {
  48 | 					// skip inputs of type 'color' if supported by the browser
  49 | 					continue;
  50 | 				}
  51 | 			}
  52 | 			var m;
  53 | 			if (!elms[i].jscolor && elms[i].className && (m = elms[i].className.match(matchClass))) {
  54 | 				console.log('test');
  55 | 				var targetElm = elms[i];
  56 | 				var optsStr = null;
  57 | 
  58 | 				var dataOptions = jsc.getDataAttr(targetElm, 'jscolor');
  59 | 				if (dataOptions !== null) {
  60 | 					optsStr = dataOptions;
  61 | 				} else if (m[4]) {
  62 | 					optsStr = m[4];
  63 | 				}
  64 | 
  65 | 				var opts = {};
  66 | 				if (optsStr) {
  67 | 					try {
  68 | 						opts = (new Function ('return (' + optsStr + ')'))();
  69 | 					} catch(eParseError) {
  70 | 						jsc.warn('Error parsing jscolor options: ' + eParseError + ':\n' + optsStr);
  71 | 					}
  72 | 				}
  73 | 				targetElm.jscolor = new jsc.jscolor(targetElm, opts);
  74 | 			}
  75 | 		}
  76 | 	},
  77 | 
  78 | 
  79 | 	isColorAttrSupported : (function () {
  80 | 		var elm = document.createElement('input');
  81 | 		if (elm.setAttribute) {
  82 | 			elm.setAttribute('type', 'color');
  83 | 			if (elm.type.toLowerCase() == 'color') {
  84 | 				return true;
  85 | 			}
  86 | 		}
  87 | 		return false;
  88 | 	})(),
  89 | 
  90 | 
  91 | 	isCanvasSupported : (function () {
  92 | 		var elm = document.createElement('canvas');
  93 | 		return !!(elm.getContext && elm.getContext('2d'));
  94 | 	})(),
  95 | 
  96 | 
  97 | 	fetchElement : function (mixed) {
  98 | 		return typeof mixed === 'string' ? document.getElementById(mixed) : mixed;
  99 | 	},
 100 | 
 101 | 
 102 | 	isElementType : function (elm, type) {
 103 | 		return elm.nodeName.toLowerCase() === type.toLowerCase();
 104 | 	},
 105 | 
 106 | 
 107 | 	getDataAttr : function (el, name) {
 108 | 		var attrName = 'data-' + name;
 109 | 		var attrValue = el.getAttribute(attrName);
 110 | 		if (attrValue !== null) {
 111 | 			return attrValue;
 112 | 		}
 113 | 		return null;
 114 | 	},
 115 | 
 116 | 
 117 | 	attachEvent : function (el, evnt, func) {
 118 | 		if (el.addEventListener) {
 119 | 			el.addEventListener(evnt, func, false);
 120 | 		} else if (el.attachEvent) {
 121 | 			el.attachEvent('on' + evnt, func);
 122 | 		}
 123 | 	},
 124 | 
 125 | 
 126 | 	detachEvent : function (el, evnt, func) {
 127 | 		if (el.removeEventListener) {
 128 | 			el.removeEventListener(evnt, func, false);
 129 | 		} else if (el.detachEvent) {
 130 | 			el.detachEvent('on' + evnt, func);
 131 | 		}
 132 | 	},
 133 | 
 134 | 
 135 | 	_attachedGroupEvents : {},
 136 | 
 137 | 
 138 | 	attachGroupEvent : function (groupName, el, evnt, func) {
 139 | 		if (!jsc._attachedGroupEvents.hasOwnProperty(groupName)) {
 140 | 			jsc._attachedGroupEvents[groupName] = [];
 141 | 		}
 142 | 		jsc._attachedGroupEvents[groupName].push([el, evnt, func]);
 143 | 		jsc.attachEvent(el, evnt, func);
 144 | 	},
 145 | 
 146 | 
 147 | 	detachGroupEvents : function (groupName) {
 148 | 		if (jsc._attachedGroupEvents.hasOwnProperty(groupName)) {
 149 | 			for (var i = 0; i < jsc._attachedGroupEvents[groupName].length; i += 1) {
 150 | 				var evt = jsc._attachedGroupEvents[groupName][i];
 151 | 				jsc.detachEvent(evt[0], evt[1], evt[2]);
 152 | 			}
 153 | 			delete jsc._attachedGroupEvents[groupName];
 154 | 		}
 155 | 	},
 156 | 
 157 | 
 158 | 	attachDOMReadyEvent : function (func) {
 159 | 		var fired = false;
 160 | 		var fireOnce = function () {
 161 | 			if (!fired) {
 162 | 				fired = true;
 163 | 				func();
 164 | 			}
 165 | 		};
 166 | 
 167 | 		if (document.readyState === 'complete') {
 168 | 			setTimeout(fireOnce, 1); // async
 169 | 			return;
 170 | 		}
 171 | 
 172 | 		if (document.addEventListener) {
 173 | 			document.addEventListener('DOMContentLoaded', fireOnce, false);
 174 | 
 175 | 			// Fallback
 176 | 			window.addEventListener('load', fireOnce, false);
 177 | 
 178 | 		} else if (document.attachEvent) {
 179 | 			// IE
 180 | 			document.attachEvent('onreadystatechange', function () {
 181 | 				if (document.readyState === 'complete') {
 182 | 					document.detachEvent('onreadystatechange', arguments.callee);
 183 | 					fireOnce();
 184 | 				}
 185 | 			})
 186 | 
 187 | 			// Fallback
 188 | 			window.attachEvent('onload', fireOnce);
 189 | 
 190 | 			// IE7/8
 191 | 			if (document.documentElement.doScroll && window == window.top) {
 192 | 				var tryScroll = function () {
 193 | 					if (!document.body) { return; }
 194 | 					try {
 195 | 						document.documentElement.doScroll('left');
 196 | 						fireOnce();
 197 | 					} catch (e) {
 198 | 						setTimeout(tryScroll, 1);
 199 | 					}
 200 | 				};
 201 | 				tryScroll();
 202 | 			}
 203 | 		}
 204 | 	},
 205 | 
 206 | 
 207 | 	warn : function (msg) {
 208 | 		if (window.console && window.console.warn) {
 209 | 			window.console.warn(msg);
 210 | 		}
 211 | 	},
 212 | 
 213 | 
 214 | 	preventDefault : function (e) {
 215 | 		if (e.preventDefault) { e.preventDefault(); }
 216 | 		e.returnValue = false;
 217 | 	},
 218 | 
 219 | 
 220 | 	captureTarget : function (target) {
 221 | 		// IE
 222 | 		if (target.setCapture) {
 223 | 			jsc._capturedTarget = target;
 224 | 			jsc._capturedTarget.setCapture();
 225 | 		}
 226 | 	},
 227 | 
 228 | 
 229 | 	releaseTarget : function () {
 230 | 		// IE
 231 | 		if (jsc._capturedTarget) {
 232 | 			jsc._capturedTarget.releaseCapture();
 233 | 			jsc._capturedTarget = null;
 234 | 		}
 235 | 	},
 236 | 
 237 | 
 238 | 	fireEvent : function (el, evnt) {
 239 | 		if (!el) {
 240 | 			return;
 241 | 		}
 242 | 		if (document.createEvent) {
 243 | 			var ev = document.createEvent('HTMLEvents');
 244 | 			ev.initEvent(evnt, true, true);
 245 | 			el.dispatchEvent(ev);
 246 | 		} else if (document.createEventObject) {
 247 | 			var ev = document.createEventObject();
 248 | 			el.fireEvent('on' + evnt, ev);
 249 | 		} else if (el['on' + evnt]) { // alternatively use the traditional event model
 250 | 			el['on' + evnt]();
 251 | 		}
 252 | 	},
 253 | 
 254 | 
 255 | 	classNameToList : function (className) {
 256 | 		return className.replace(/^\s+|\s+$/g, '').split(/\s+/);
 257 | 	},
 258 | 
 259 | 
 260 | 	// The className parameter (str) can only contain a single class name
 261 | 	hasClass : function (elm, className) {
 262 | 		if (!className) {
 263 | 			return false;
 264 | 		}
 265 | 		return -1 != (' ' + elm.className.replace(/\s+/g, ' ') + ' ').indexOf(' ' + className + ' ');
 266 | 	},
 267 | 
 268 | 
 269 | 	// The className parameter (str) can contain multiple class names separated by whitespace
 270 | 	setClass : function (elm, className) {
 271 | 		var classList = jsc.classNameToList(className);
 272 | 		for (var i = 0; i < classList.length; i += 1) {
 273 | 			if (!jsc.hasClass(elm, classList[i])) {
 274 | 				elm.className += (elm.className ? ' ' : '') + classList[i];
 275 | 			}
 276 | 		}
 277 | 	},
 278 | 
 279 | 
 280 | 	// The className parameter (str) can contain multiple class names separated by whitespace
 281 | 	unsetClass : function (elm, className) {
 282 | 		var classList = jsc.classNameToList(className);
 283 | 		for (var i = 0; i < classList.length; i += 1) {
 284 | 			var repl = new RegExp(
 285 | 				'^\\s*' + classList[i] + '\\s*|' +
 286 | 				'\\s*' + classList[i] + '\\s*$|' +
 287 | 				'\\s+' + classList[i] + '(\\s+)',
 288 | 				'g'
 289 | 			);
 290 | 			elm.className = elm.className.replace(repl, '$1');
 291 | 		}
 292 | 	},
 293 | 
 294 | 
 295 | 	getStyle : function (elm) {
 296 | 		return window.getComputedStyle ? window.getComputedStyle(elm) : elm.currentStyle;
 297 | 	},
 298 | 
 299 | 
 300 | 	setStyle : (function () {
 301 | 		var helper = document.createElement('div');
 302 | 		var getSupportedProp = function (names) {
 303 | 			for (var i = 0; i < names.length; i += 1) {
 304 | 				if (names[i] in helper.style) {
 305 | 					return names[i];
 306 | 				}
 307 | 			}
 308 | 		};
 309 | 		var props = {
 310 | 			borderRadius: getSupportedProp(['borderRadius', 'MozBorderRadius', 'webkitBorderRadius']),
 311 | 			boxShadow: getSupportedProp(['boxShadow', 'MozBoxShadow', 'webkitBoxShadow'])
 312 | 		};
 313 | 		return function (elm, prop, value) {
 314 | 			switch (prop.toLowerCase()) {
 315 | 			case 'opacity':
 316 | 				var alphaOpacity = Math.round(parseFloat(value) * 100);
 317 | 				elm.style.opacity = value;
 318 | 				elm.style.filter = 'alpha(opacity=' + alphaOpacity + ')';
 319 | 				break;
 320 | 			default:
 321 | 				elm.style[props[prop]] = value;
 322 | 				break;
 323 | 			}
 324 | 		};
 325 | 	})(),
 326 | 
 327 | 
 328 | 	setBorderRadius : function (elm, value) {
 329 | 		jsc.setStyle(elm, 'borderRadius', value || '0');
 330 | 	},
 331 | 
 332 | 
 333 | 	setBoxShadow : function (elm, value) {
 334 | 		jsc.setStyle(elm, 'boxShadow', value || 'none');
 335 | 	},
 336 | 
 337 | 
 338 | 	getElementPos : function (e, relativeToViewport) {
 339 | 		var x=0, y=0;
 340 | 		var rect = e.getBoundingClientRect();
 341 | 		x = rect.left;
 342 | 		y = rect.top;
 343 | 		if (!relativeToViewport) {
 344 | 			var viewPos = jsc.getViewPos();
 345 | 			x += viewPos[0];
 346 | 			y += viewPos[1];
 347 | 		}
 348 | 		return [x, y];
 349 | 	},
 350 | 
 351 | 
 352 | 	getElementSize : function (e) {
 353 | 		return [e.offsetWidth, e.offsetHeight];
 354 | 	},
 355 | 
 356 | 
 357 | 	// get pointer's X/Y coordinates relative to viewport
 358 | 	getAbsPointerPos : function (e) {
 359 | 		if (!e) { e = window.event; }
 360 | 		var x = 0, y = 0;
 361 | 		if (typeof e.changedTouches !== 'undefined' && e.changedTouches.length) {
 362 | 			// touch devices
 363 | 			x = e.changedTouches[0].clientX;
 364 | 			y = e.changedTouches[0].clientY;
 365 | 		} else if (typeof e.clientX === 'number') {
 366 | 			x = e.clientX;
 367 | 			y = e.clientY;
 368 | 		}
 369 | 		return { x: x, y: y };
 370 | 	},
 371 | 
 372 | 
 373 | 	// get pointer's X/Y coordinates relative to target element
 374 | 	getRelPointerPos : function (e) {
 375 | 		if (!e) { e = window.event; }
 376 | 		var target = e.target || e.srcElement;
 377 | 		var targetRect = target.getBoundingClientRect();
 378 | 
 379 | 		var x = 0, y = 0;
 380 | 
 381 | 		var clientX = 0, clientY = 0;
 382 | 		if (typeof e.changedTouches !== 'undefined' && e.changedTouches.length) {
 383 | 			// touch devices
 384 | 			clientX = e.changedTouches[0].clientX;
 385 | 			clientY = e.changedTouches[0].clientY;
 386 | 		} else if (typeof e.clientX === 'number') {
 387 | 			clientX = e.clientX;
 388 | 			clientY = e.clientY;
 389 | 		}
 390 | 
 391 | 		x = clientX - targetRect.left;
 392 | 		y = clientY - targetRect.top;
 393 | 		return { x: x, y: y };
 394 | 	},
 395 | 
 396 | 
 397 | 	getViewPos : function () {
 398 | 		var doc = document.documentElement;
 399 | 		return [
 400 | 			(window.pageXOffset || doc.scrollLeft) - (doc.clientLeft || 0),
 401 | 			(window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0)
 402 | 		];
 403 | 	},
 404 | 
 405 | 
 406 | 	getViewSize : function () {
 407 | 		var doc = document.documentElement;
 408 | 		return [
 409 | 			(window.innerWidth || doc.clientWidth),
 410 | 			(window.innerHeight || doc.clientHeight),
 411 | 		];
 412 | 	},
 413 | 
 414 | 
 415 | 	redrawPosition : function () {
 416 | 
 417 | 		if (jsc.picker && jsc.picker.owner) {
 418 | 			var thisObj = jsc.picker.owner;
 419 | 
 420 | 			var tp, vp;
 421 | 
 422 | 			if (thisObj.fixed) {
 423 | 				// Fixed elements are positioned relative to viewport,
 424 | 				// therefore we can ignore the scroll offset
 425 | 				tp = jsc.getElementPos(thisObj.targetElement, true); // target pos
 426 | 				vp = [0, 0]; // view pos
 427 | 			} else {
 428 | 				tp = jsc.getElementPos(thisObj.targetElement); // target pos
 429 | 				vp = jsc.getViewPos(); // view pos
 430 | 			}
 431 | 
 432 | 			var ts = jsc.getElementSize(thisObj.targetElement); // target size
 433 | 			var vs = jsc.getViewSize(); // view size
 434 | 			var ps = jsc.getPickerOuterDims(thisObj); // picker size
 435 | 			var a, b, c;
 436 | 			switch (thisObj.position.toLowerCase()) {
 437 | 				case 'left': a=1; b=0; c=-1; break;
 438 | 				case 'right':a=1; b=0; c=1; break;
 439 | 				case 'top':  a=0; b=1; c=-1; break;
 440 | 				default:     a=0; b=1; c=1; break;
 441 | 			}
 442 | 			var l = (ts[b]+ps[b])/2;
 443 | 
 444 | 			// compute picker position
 445 | 			if (!thisObj.smartPosition) {
 446 | 				var pp = [
 447 | 					tp[a],
 448 | 					tp[b]+ts[b]-l+l*c
 449 | 				];
 450 | 			} else {
 451 | 				var pp = [
 452 | 					-vp[a]+tp[a]+ps[a] > vs[a] ?
 453 | 						(-vp[a]+tp[a]+ts[a]/2 > vs[a]/2 && tp[a]+ts[a]-ps[a] >= 0 ? tp[a]+ts[a]-ps[a] : tp[a]) :
 454 | 						tp[a],
 455 | 					-vp[b]+tp[b]+ts[b]+ps[b]-l+l*c > vs[b] ?
 456 | 						(-vp[b]+tp[b]+ts[b]/2 > vs[b]/2 && tp[b]+ts[b]-l-l*c >= 0 ? tp[b]+ts[b]-l-l*c : tp[b]+ts[b]-l+l*c) :
 457 | 						(tp[b]+ts[b]-l+l*c >= 0 ? tp[b]+ts[b]-l+l*c : tp[b]+ts[b]-l-l*c)
 458 | 				];
 459 | 			}
 460 | 
 461 | 			var x = pp[a];
 462 | 			var y = pp[b];
 463 | 			var positionValue = thisObj.fixed ? 'fixed' : 'absolute';
 464 | 			var contractShadow =
 465 | 				(pp[0] + ps[0] > tp[0] || pp[0] < tp[0] + ts[0]) &&
 466 | 				(pp[1] + ps[1] < tp[1] + ts[1]);
 467 | 
 468 | 			jsc._drawPosition(thisObj, x, y, positionValue, contractShadow);
 469 | 		}
 470 | 	},
 471 | 
 472 | 
 473 | 	_drawPosition : function (thisObj, x, y, positionValue, contractShadow) {
 474 | 		var vShadow = contractShadow ? 0 : thisObj.shadowBlur; // px
 475 | 
 476 | 		jsc.picker.wrap.style.position = positionValue;
 477 | 		jsc.picker.wrap.style.left = x + 'px';
 478 | 		jsc.picker.wrap.style.top = y + 'px';
 479 | 
 480 | 		jsc.setBoxShadow(
 481 | 			jsc.picker.boxS,
 482 | 			thisObj.shadow ?
 483 | 				new jsc.BoxShadow(0, vShadow, thisObj.shadowBlur, 0, thisObj.shadowColor) :
 484 | 				null);
 485 | 	},
 486 | 
 487 | 
 488 | 	getPickerDims : function (thisObj) {
 489 | 		var displaySlider = !!jsc.getSliderComponent(thisObj);
 490 | 		var dims = [
 491 | 			2 * thisObj.insetWidth + 2 * thisObj.padding + thisObj.width +
 492 | 				(displaySlider ? 2 * thisObj.insetWidth + jsc.getPadToSliderPadding(thisObj) + thisObj.sliderSize : 0),
 493 | 			2 * thisObj.insetWidth + 2 * thisObj.padding + thisObj.height +
 494 | 				(thisObj.closable ? 2 * thisObj.insetWidth + thisObj.padding + thisObj.buttonHeight : 0)
 495 | 		];
 496 | 		return dims;
 497 | 	},
 498 | 
 499 | 
 500 | 	getPickerOuterDims : function (thisObj) {
 501 | 		var dims = jsc.getPickerDims(thisObj);
 502 | 		return [
 503 | 			dims[0] + 2 * thisObj.borderWidth,
 504 | 			dims[1] + 2 * thisObj.borderWidth
 505 | 		];
 506 | 	},
 507 | 
 508 | 
 509 | 	getPadToSliderPadding : function (thisObj) {
 510 | 		return Math.max(thisObj.padding, 1.5 * (2 * thisObj.pointerBorderWidth + thisObj.pointerThickness));
 511 | 	},
 512 | 
 513 | 
 514 | 	getPadYComponent : function (thisObj) {
 515 | 		switch (thisObj.mode.charAt(1).toLowerCase()) {
 516 | 			case 'v': return 'v'; break;
 517 | 		}
 518 | 		return 's';
 519 | 	},
 520 | 
 521 | 
 522 | 	getSliderComponent : function (thisObj) {
 523 | 		if (thisObj.mode.length > 2) {
 524 | 			switch (thisObj.mode.charAt(2).toLowerCase()) {
 525 | 				case 's': return 's'; break;
 526 | 				case 'v': return 'v'; break;
 527 | 			}
 528 | 		}
 529 | 		return null;
 530 | 	},
 531 | 
 532 | 
 533 |   onDocumentMouseDown : function (e) {
 534 |     if (!e) { e = window.event; }
 535 |     var path = (typeof(e.path) == 'object') ? e.path[0] : null;
 536 |     if(path == null){
 537 |     	return null;
 538 |     }
 539 |     var hasKey = "_jscLinkedInstance" in path;
 540 |     var target = e.explicitOriginalTarget || path;
 541 |     if(hasKey == false){
 542 |     	return null;
 543 |     }
 544 |     if (target._jscLinkedInstance) {
 545 |     	if (target._jscLinkedInstance.showOnClick) {
 546 |   			target._jscLinkedInstance.show();
 547 |   		}
 548 |   	} else if (target._jscControlName) {
 549 |   		jsc.onControlPointerStart(e, target, target._jscControlName, 'touch');
 550 |   	} else {
 551 |   		if (jsc.picker && jsc.picker.owner) {
 552 |   			jsc.picker.owner.hide();
 553 |   		}
 554 |   	}
 555 |   },
 556 | 
 557 | 
 558 | onDocumentTouchStart : function (e) {
 559 | 	if (!e) { e = window.event; }
 560 | 	var path = (typeof(e.path) == 'object') ? e.path[0] : null;
 561 | 	if(path == null){
 562 | 		return null;
 563 | 	}
 564 | 	var hasKey = "_jscLinkedInstance" in path;
 565 | 	var target = e.explicitOriginalTarget || path;
 566 | 	if(hasKey == false){
 567 | 		return null;
 568 | 	}
 569 | 	if (target._jscLinkedInstance) {
 570 | 		if (target._jscLinkedInstance.showOnClick) {
 571 | 
 572 | 			target._jscLinkedInstance.show();
 573 | 		}
 574 | 	} else if (target._jscControlName) {
 575 | 		jsc.onControlPointerStart(e, target, target._jscControlName, 'touch');
 576 | 	} else {
 577 | 		if (jsc.picker && jsc.picker.owner) {
 578 | 			jsc.picker.owner.hide();
 579 | 		}
 580 | 	}
 581 | },
 582 | 
 583 | 
 584 | 	onWindowResize : function (e) {
 585 | 		jsc.redrawPosition();
 586 | 	},
 587 | 
 588 | 
 589 | 	onParentScroll : function (e) {
 590 | 		// hide the picker when one of the parent elements is scrolled
 591 | 		if (jsc.picker && jsc.picker.owner) {
 592 | 			jsc.picker.owner.hide();
 593 | 		}
 594 | 	},
 595 | 
 596 | 
 597 | 	_pointerMoveEvent : {
 598 | 		mouse: 'mousemove',
 599 | 		touch: 'touchmove'
 600 | 	},
 601 | 	_pointerEndEvent : {
 602 | 		mouse: 'mouseup',
 603 | 		touch: 'touchend'
 604 | 	},
 605 | 
 606 | 
 607 | 	_pointerOrigin : null,
 608 | 	_capturedTarget : null,
 609 | 
 610 | 
 611 | 	onControlPointerStart : function (e, target, controlName, pointerType) {
 612 | 		var thisObj = target._jscInstance;
 613 | 
 614 | 		jsc.preventDefault(e);
 615 | 		jsc.captureTarget(target);
 616 | 
 617 | 		var registerDragEvents = function (doc, offset) {
 618 | 			jsc.attachGroupEvent('drag', doc, jsc._pointerMoveEvent[pointerType],
 619 | 				jsc.onDocumentPointerMove(e, target, controlName, pointerType, offset));
 620 | 			jsc.attachGroupEvent('drag', doc, jsc._pointerEndEvent[pointerType],
 621 | 				jsc.onDocumentPointerEnd(e, target, controlName, pointerType));
 622 | 		};
 623 | 
 624 | 		registerDragEvents(document, [0, 0]);
 625 | 
 626 | 		if (window.parent && window.frameElement) {
 627 | 			var rect = window.frameElement.getBoundingClientRect();
 628 | 			var ofs = [-rect.left, -rect.top];
 629 | 			registerDragEvents(window.parent.window.document, ofs);
 630 | 		}
 631 | 
 632 | 		var abs = jsc.getAbsPointerPos(e);
 633 | 		var rel = jsc.getRelPointerPos(e);
 634 | 		jsc._pointerOrigin = {
 635 | 			x: abs.x - rel.x,
 636 | 			y: abs.y - rel.y
 637 | 		};
 638 | 
 639 | 		switch (controlName) {
 640 | 		case 'pad':
 641 | 			// if the slider is at the bottom, move it up
 642 | 			switch (jsc.getSliderComponent(thisObj)) {
 643 | 			case 's': if (thisObj.hsv[1] === 0) { thisObj.fromHSV(null, 100, null); }; break;
 644 | 			case 'v': if (thisObj.hsv[2] === 0) { thisObj.fromHSV(null, null, 100); }; break;
 645 | 			}
 646 | 			jsc.setPad(thisObj, e, 0, 0);
 647 | 			break;
 648 | 
 649 | 		case 'sld':
 650 | 			jsc.setSld(thisObj, e, 0);
 651 | 			break;
 652 | 		}
 653 | 
 654 | 		jsc.dispatchFineChange(thisObj);
 655 | 	},
 656 | 
 657 | 
 658 | 	onDocumentPointerMove : function (e, target, controlName, pointerType, offset) {
 659 | 		return function (e) {
 660 | 			var thisObj = target._jscInstance;
 661 | 			switch (controlName) {
 662 | 			case 'pad':
 663 | 				if (!e) { e = window.event; }
 664 | 				jsc.setPad(thisObj, e, offset[0], offset[1]);
 665 | 				jsc.dispatchFineChange(thisObj);
 666 | 				break;
 667 | 
 668 | 			case 'sld':
 669 | 				if (!e) { e = window.event; }
 670 | 				jsc.setSld(thisObj, e, offset[1]);
 671 | 				jsc.dispatchFineChange(thisObj);
 672 | 				break;
 673 | 			}
 674 | 		}
 675 | 	},
 676 | 
 677 | 
 678 | 	onDocumentPointerEnd : function (e, target, controlName, pointerType) {
 679 | 		return function (e) {
 680 | 			var thisObj = target._jscInstance;
 681 | 			jsc.detachGroupEvents('drag');
 682 | 			jsc.releaseTarget();
 683 | 			// Always dispatch changes after detaching outstanding mouse handlers,
 684 | 			// in case some user interaction will occur in user's onchange callback
 685 | 			// that would intrude with current mouse events
 686 | 			jsc.dispatchChange(thisObj);
 687 | 		};
 688 | 	},
 689 | 
 690 | 
 691 | 	dispatchChange : function (thisObj) {
 692 | 		if (thisObj.valueElement) {
 693 | 			if (jsc.isElementType(thisObj.valueElement, 'input')) {
 694 | 				jsc.fireEvent(thisObj.valueElement, 'change');
 695 | 			}
 696 | 		}
 697 | 	},
 698 | 
 699 | 
 700 | 	dispatchFineChange : function (thisObj) {
 701 | 		if (thisObj.onFineChange) {
 702 | 			var callback;
 703 | 			if (typeof thisObj.onFineChange === 'string') {
 704 | 				callback = new Function (thisObj.onFineChange);
 705 | 			} else {
 706 | 				callback = thisObj.onFineChange;
 707 | 			}
 708 | 			callback.call(thisObj);
 709 | 		}
 710 | 	},
 711 | 
 712 | 
 713 | 	setPad : function (thisObj, e, ofsX, ofsY) {
 714 | 		var pointerAbs = jsc.getAbsPointerPos(e);
 715 | 		var x = ofsX + pointerAbs.x - jsc._pointerOrigin.x - thisObj.padding - thisObj.insetWidth;
 716 | 		var y = ofsY + pointerAbs.y - jsc._pointerOrigin.y - thisObj.padding - thisObj.insetWidth;
 717 | 
 718 | 		var xVal = x * (360 / (thisObj.width - 1));
 719 | 		var yVal = 100 - (y * (100 / (thisObj.height - 1)));
 720 | 
 721 | 		switch (jsc.getPadYComponent(thisObj)) {
 722 | 		case 's': thisObj.fromHSV(xVal, yVal, null, jsc.leaveSld); break;
 723 | 		case 'v': thisObj.fromHSV(xVal, null, yVal, jsc.leaveSld); break;
 724 | 		}
 725 | 	},
 726 | 
 727 | 
 728 | 	setSld : function (thisObj, e, ofsY) {
 729 | 		var pointerAbs = jsc.getAbsPointerPos(e);
 730 | 		var y = ofsY + pointerAbs.y - jsc._pointerOrigin.y - thisObj.padding - thisObj.insetWidth;
 731 | 
 732 | 		var yVal = 100 - (y * (100 / (thisObj.height - 1)));
 733 | 
 734 | 		switch (jsc.getSliderComponent(thisObj)) {
 735 | 		case 's': thisObj.fromHSV(null, yVal, null, jsc.leavePad); break;
 736 | 		case 'v': thisObj.fromHSV(null, null, yVal, jsc.leavePad); break;
 737 | 		}
 738 | 	},
 739 | 
 740 | 
 741 | 	_vmlNS : 'jsc_vml_',
 742 | 	_vmlCSS : 'jsc_vml_css_',
 743 | 	_vmlReady : false,
 744 | 
 745 | 
 746 | 	initVML : function () {
 747 | 		if (!jsc._vmlReady) {
 748 | 			// init VML namespace
 749 | 			var doc = document;
 750 | 			if (!doc.namespaces[jsc._vmlNS]) {
 751 | 				doc.namespaces.add(jsc._vmlNS, 'urn:schemas-microsoft-com:vml');
 752 | 			}
 753 | 			if (!doc.styleSheets[jsc._vmlCSS]) {
 754 | 				var tags = ['shape', 'shapetype', 'group', 'background', 'path', 'formulas', 'handles', 'fill', 'stroke', 'shadow', 'textbox', 'textpath', 'imagedata', 'line', 'polyline', 'curve', 'rect', 'roundrect', 'oval', 'arc', 'image'];
 755 | 				var ss = doc.createStyleSheet();
 756 | 				ss.owningElement.id = jsc._vmlCSS;
 757 | 				for (var i = 0; i < tags.length; i += 1) {
 758 | 					ss.addRule(jsc._vmlNS + '\\:' + tags[i], 'behavior:url(#default#VML);');
 759 | 				}
 760 | 			}
 761 | 			jsc._vmlReady = true;
 762 | 		}
 763 | 	},
 764 | 
 765 | 
 766 | 	createPalette : function () {
 767 | 
 768 | 		var paletteObj = {
 769 | 			elm: null,
 770 | 			draw: null
 771 | 		};
 772 | 
 773 | 		if (jsc.isCanvasSupported) {
 774 | 			// Canvas implementation for modern browsers
 775 | 
 776 | 			var canvas = document.createElement('canvas');
 777 | 			var ctx = canvas.getContext('2d');
 778 | 
 779 | 			var drawFunc = function (width, height, type) {
 780 | 				canvas.width = width;
 781 | 				canvas.height = height;
 782 | 
 783 | 				ctx.clearRect(0, 0, canvas.width, canvas.height);
 784 | 
 785 | 				var hGrad = ctx.createLinearGradient(0, 0, canvas.width, 0);
 786 | 				hGrad.addColorStop(0 / 6, '#F00');
 787 | 				hGrad.addColorStop(1 / 6, '#FF0');
 788 | 				hGrad.addColorStop(2 / 6, '#0F0');
 789 | 				hGrad.addColorStop(3 / 6, '#0FF');
 790 | 				hGrad.addColorStop(4 / 6, '#00F');
 791 | 				hGrad.addColorStop(5 / 6, '#F0F');
 792 | 				hGrad.addColorStop(6 / 6, '#F00');
 793 | 
 794 | 				ctx.fillStyle = hGrad;
 795 | 				ctx.fillRect(0, 0, canvas.width, canvas.height);
 796 | 
 797 | 				var vGrad = ctx.createLinearGradient(0, 0, 0, canvas.height);
 798 | 				switch (type.toLowerCase()) {
 799 | 				case 's':
 800 | 					vGrad.addColorStop(0, 'rgba(255,255,255,0)');
 801 | 					vGrad.addColorStop(1, 'rgba(255,255,255,1)');
 802 | 					break;
 803 | 				case 'v':
 804 | 					vGrad.addColorStop(0, 'rgba(0,0,0,0)');
 805 | 					vGrad.addColorStop(1, 'rgba(0,0,0,1)');
 806 | 					break;
 807 | 				}
 808 | 				ctx.fillStyle = vGrad;
 809 | 				ctx.fillRect(0, 0, canvas.width, canvas.height);
 810 | 			};
 811 | 
 812 | 			paletteObj.elm = canvas;
 813 | 			paletteObj.draw = drawFunc;
 814 | 
 815 | 		} else {
 816 | 			// VML fallback for IE 7 and 8
 817 | 
 818 | 			jsc.initVML();
 819 | 
 820 | 			var vmlContainer = document.createElement('div');
 821 | 			vmlContainer.style.position = 'relative';
 822 | 			vmlContainer.style.overflow = 'hidden';
 823 | 
 824 | 			var hGrad = document.createElement(jsc._vmlNS + ':fill');
 825 | 			hGrad.type = 'gradient';
 826 | 			hGrad.method = 'linear';
 827 | 			hGrad.angle = '90';
 828 | 			hGrad.colors = '16.67% #F0F, 33.33% #00F, 50% #0FF, 66.67% #0F0, 83.33% #FF0'
 829 | 
 830 | 			var hRect = document.createElement(jsc._vmlNS + ':rect');
 831 | 			hRect.style.position = 'absolute';
 832 | 			hRect.style.left = -1 + 'px';
 833 | 			hRect.style.top = -1 + 'px';
 834 | 			hRect.stroked = false;
 835 | 			hRect.appendChild(hGrad);
 836 | 			vmlContainer.appendChild(hRect);
 837 | 
 838 | 			var vGrad = document.createElement(jsc._vmlNS + ':fill');
 839 | 			vGrad.type = 'gradient';
 840 | 			vGrad.method = 'linear';
 841 | 			vGrad.angle = '180';
 842 | 			vGrad.opacity = '0';
 843 | 
 844 | 			var vRect = document.createElement(jsc._vmlNS + ':rect');
 845 | 			vRect.style.position = 'absolute';
 846 | 			vRect.style.left = -1 + 'px';
 847 | 			vRect.style.top = -1 + 'px';
 848 | 			vRect.stroked = false;
 849 | 			vRect.appendChild(vGrad);
 850 | 			vmlContainer.appendChild(vRect);
 851 | 
 852 | 			var drawFunc = function (width, height, type) {
 853 | 				vmlContainer.style.width = width + 'px';
 854 | 				vmlContainer.style.height = height + 'px';
 855 | 
 856 | 				hRect.style.width =
 857 | 				vRect.style.width =
 858 | 					(width + 1) + 'px';
 859 | 				hRect.style.height =
 860 | 				vRect.style.height =
 861 | 					(height + 1) + 'px';
 862 | 
 863 | 				// Colors must be specified during every redraw, otherwise IE won't display
 864 | 				// a full gradient during a subsequential redraw
 865 | 				hGrad.color = '#F00';
 866 | 				hGrad.color2 = '#F00';
 867 | 
 868 | 				switch (type.toLowerCase()) {
 869 | 				case 's':
 870 | 					vGrad.color = vGrad.color2 = '#FFF';
 871 | 					break;
 872 | 				case 'v':
 873 | 					vGrad.color = vGrad.color2 = '#000';
 874 | 					break;
 875 | 				}
 876 | 			};
 877 | 
 878 | 			paletteObj.elm = vmlContainer;
 879 | 			paletteObj.draw = drawFunc;
 880 | 		}
 881 | 
 882 | 		return paletteObj;
 883 | 	},
 884 | 
 885 | 
 886 | 	createSliderGradient : function () {
 887 | 
 888 | 		var sliderObj = {
 889 | 			elm: null,
 890 | 			draw: null
 891 | 		};
 892 | 
 893 | 		if (jsc.isCanvasSupported) {
 894 | 			// Canvas implementation for modern browsers
 895 | 
 896 | 			var canvas = document.createElement('canvas');
 897 | 			var ctx = canvas.getContext('2d');
 898 | 
 899 | 			var drawFunc = function (width, height, color1, color2) {
 900 | 				canvas.width = width;
 901 | 				canvas.height = height;
 902 | 
 903 | 				ctx.clearRect(0, 0, canvas.width, canvas.height);
 904 | 
 905 | 				var grad = ctx.createLinearGradient(0, 0, 0, canvas.height);
 906 | 				grad.addColorStop(0, color1);
 907 | 				grad.addColorStop(1, color2);
 908 | 
 909 | 				ctx.fillStyle = grad;
 910 | 				ctx.fillRect(0, 0, canvas.width, canvas.height);
 911 | 			};
 912 | 
 913 | 			sliderObj.elm = canvas;
 914 | 			sliderObj.draw = drawFunc;
 915 | 
 916 | 		} else {
 917 | 			// VML fallback for IE 7 and 8
 918 | 
 919 | 			jsc.initVML();
 920 | 
 921 | 			var vmlContainer = document.createElement('div');
 922 | 			vmlContainer.style.position = 'relative';
 923 | 			vmlContainer.style.overflow = 'hidden';
 924 | 
 925 | 			var grad = document.createElement(jsc._vmlNS + ':fill');
 926 | 			grad.type = 'gradient';
 927 | 			grad.method = 'linear';
 928 | 			grad.angle = '180';
 929 | 
 930 | 			var rect = document.createElement(jsc._vmlNS + ':rect');
 931 | 			rect.style.position = 'absolute';
 932 | 			rect.style.left = -1 + 'px';
 933 | 			rect.style.top = -1 + 'px';
 934 | 			rect.stroked = false;
 935 | 			rect.appendChild(grad);
 936 | 			vmlContainer.appendChild(rect);
 937 | 
 938 | 			var drawFunc = function (width, height, color1, color2) {
 939 | 				vmlContainer.style.width = width + 'px';
 940 | 				vmlContainer.style.height = height + 'px';
 941 | 
 942 | 				rect.style.width = (width + 1) + 'px';
 943 | 				rect.style.height = (height + 1) + 'px';
 944 | 
 945 | 				grad.color = color1;
 946 | 				grad.color2 = color2;
 947 | 			};
 948 | 
 949 | 			sliderObj.elm = vmlContainer;
 950 | 			sliderObj.draw = drawFunc;
 951 | 		}
 952 | 
 953 | 		return sliderObj;
 954 | 	},
 955 | 
 956 | 
 957 | 	leaveValue : 1<<0,
 958 | 	leaveStyle : 1<<1,
 959 | 	leavePad : 1<<2,
 960 | 	leaveSld : 1<<3,
 961 | 
 962 | 
 963 | 	BoxShadow : (function () {
 964 | 		var BoxShadow = function (hShadow, vShadow, blur, spread, color, inset) {
 965 | 			this.hShadow = hShadow;
 966 | 			this.vShadow = vShadow;
 967 | 			this.blur = blur;
 968 | 			this.spread = spread;
 969 | 			this.color = color;
 970 | 			this.inset = !!inset;
 971 | 		};
 972 | 
 973 | 		BoxShadow.prototype.toString = function () {
 974 | 			var vals = [
 975 | 				Math.round(this.hShadow) + 'px',
 976 | 				Math.round(this.vShadow) + 'px',
 977 | 				Math.round(this.blur) + 'px',
 978 | 				Math.round(this.spread) + 'px',
 979 | 				this.color
 980 | 			];
 981 | 			if (this.inset) {
 982 | 				vals.push('inset');
 983 | 			}
 984 | 			return vals.join(' ');
 985 | 		};
 986 | 
 987 | 		return BoxShadow;
 988 | 	})(),
 989 | 
 990 | 
 991 | 	//
 992 | 	// Usage:
 993 | 	// var myColor = new jscolor(<targetElement> [, <options>])
 994 | 	//
 995 | 
 996 | 	jscolor : function (targetElement, options) {
 997 | 
 998 | 		// General options
 999 | 		//
1000 | 		this.value = null; // initial HEX color. To change it later, use methods fromString(), fromHSV() and fromRGB()
1001 | 		this.valueElement = targetElement; // element that will be used to display and input the color code
1002 | 		this.styleElement = targetElement; // element that will preview the picked color using CSS backgroundColor
1003 | 		this.required = true; // whether the associated text <input> can be left empty
1004 | 		this.refine = true; // whether to refine the entered color code (e.g. uppercase it and remove whitespace)
1005 | 		this.hash = false; // whether to prefix the HEX color code with # symbol
1006 | 		this.uppercase = true; // whether to show the color code in upper case
1007 | 		this.onFineChange = null; // called instantly every time the color changes (value can be either a function or a string with javascript code)
1008 | 		this.activeClass = 'jscolor-active'; // class to be set to the target element when a picker window is open on it
1009 | 		this.overwriteImportant = false; // whether to overwrite colors of styleElement using !important
1010 | 		this.minS = 0; // min allowed saturation (0 - 100)
1011 | 		this.maxS = 100; // max allowed saturation (0 - 100)
1012 | 		this.minV = 0; // min allowed value (brightness) (0 - 100)
1013 | 		this.maxV = 100; // max allowed value (brightness) (0 - 100)
1014 | 
1015 | 		// Accessing the picked color
1016 | 		//
1017 | 		this.hsv = [0, 0, 100]; // read-only  [0-360, 0-100, 0-100]
1018 | 		this.rgb = [255, 255, 255]; // read-only  [0-255, 0-255, 0-255]
1019 | 
1020 | 		// Color Picker options
1021 | 		//
1022 | 		this.width = 181; // width of color palette (in px)
1023 | 		this.height = 101; // height of color palette (in px)
1024 | 		this.showOnClick = true; // whether to display the color picker when user clicks on its target element
1025 | 		this.mode = 'HSV'; // HSV | HVS | HS | HV - layout of the color picker controls
1026 | 		this.position = 'bottom'; // left | right | top | bottom - position relative to the target element
1027 | 		this.smartPosition = true; // automatically change picker position when there is not enough space for it
1028 | 		this.sliderSize = 16; // px
1029 | 		this.crossSize = 8; // px
1030 | 		this.closable = false; // whether to display the Close button
1031 | 		this.closeText = 'Close';
1032 | 		this.buttonColor = '#000000'; // CSS color
1033 | 		this.buttonHeight = 18; // px
1034 | 		this.padding = 12; // px
1035 | 		this.backgroundColor = '#FFFFFF'; // CSS color
1036 | 		this.borderWidth = 1; // px
1037 | 		this.borderColor = '#BBBBBB'; // CSS color
1038 | 		this.borderRadius = 8; // px
1039 | 		this.insetWidth = 1; // px
1040 | 		this.insetColor = '#BBBBBB'; // CSS color
1041 | 		this.shadow = true; // whether to display shadow
1042 | 		this.shadowBlur = 15; // px
1043 | 		this.shadowColor = 'rgba(0,0,0,0.2)'; // CSS color
1044 | 		this.pointerColor = '#4C4C4C'; // px
1045 | 		this.pointerBorderColor = '#FFFFFF'; // px
1046 |         this.pointerBorderWidth = 1; // px
1047 |         this.pointerThickness = 2; // px
1048 | 		this.zIndex = 1000;
1049 | 		this.container = null; // where to append the color picker (BODY element by default)
1050 | 
1051 | 
1052 | 		for (var opt in options) {
1053 | 			if (options.hasOwnProperty(opt)) {
1054 | 				this[opt] = options[opt];
1055 | 			}
1056 | 		}
1057 | 
1058 | 
1059 | 		this.hide = function () {
1060 | 			if (isPickerOwner()) {
1061 | 				detachPicker();
1062 | 			}
1063 | 		};
1064 | 
1065 | 
1066 | 		this.show = function () {
1067 | 			drawPicker();
1068 | 		};
1069 | 
1070 | 
1071 | 		this.redraw = function () {
1072 | 			if (isPickerOwner()) {
1073 | 				drawPicker();
1074 | 			}
1075 | 		};
1076 | 
1077 | 
1078 | 		this.importColor = function () {
1079 | 			if (!this.valueElement) {
1080 | 				this.exportColor();
1081 | 			} else {
1082 | 				if (jsc.isElementType(this.valueElement, 'input')) {
1083 | 					if (!this.refine) {
1084 | 						if (!this.fromString(this.valueElement.value, jsc.leaveValue)) {
1085 | 							if (this.styleElement) {
1086 | 								this.styleElement.style.backgroundImage = this.styleElement._jscOrigStyle.backgroundImage;
1087 | 								this.styleElement.style.backgroundColor = this.styleElement._jscOrigStyle.backgroundColor;
1088 | 								this.styleElement.style.color = this.styleElement._jscOrigStyle.color;
1089 | 							}
1090 | 							this.exportColor(jsc.leaveValue | jsc.leaveStyle);
1091 | 						}
1092 | 					} else if (!this.required && /^\s*$/.test(this.valueElement.value)) {
1093 | 						this.valueElement.value = '';
1094 | 						if (this.styleElement) {
1095 | 							this.styleElement.style.backgroundImage = this.styleElement._jscOrigStyle.backgroundImage;
1096 | 							this.styleElement.style.backgroundColor = this.styleElement._jscOrigStyle.backgroundColor;
1097 | 							this.styleElement.style.color = this.styleElement._jscOrigStyle.color;
1098 | 						}
1099 | 						this.exportColor(jsc.leaveValue | jsc.leaveStyle);
1100 | 
1101 | 					} else if (this.fromString(this.valueElement.value)) {
1102 | 						// managed to import color successfully from the value -> OK, don't do anything
1103 | 					} else {
1104 | 						this.exportColor();
1105 | 					}
1106 | 				} else {
1107 | 					// not an input element -> doesn't have any value
1108 | 					this.exportColor();
1109 | 				}
1110 | 			}
1111 | 		};
1112 | 
1113 | 
1114 | 		this.exportColor = function (flags) {
1115 | 			if (!(flags & jsc.leaveValue) && this.valueElement) {
1116 | 				var value = this.toString();
1117 | 				if (this.uppercase) { value = value.toUpperCase(); }
1118 | 				if (this.hash) { value = '#' + value; }
1119 | 
1120 | 				if (jsc.isElementType(this.valueElement, 'input')) {
1121 | 					this.valueElement.value = value;
1122 | 				} else {
1123 | 					this.valueElement.innerHTML = value;
1124 | 				}
1125 | 			}
1126 | 			if (!(flags & jsc.leaveStyle)) {
1127 | 				if (this.styleElement) {
1128 | 					var bgColor = '#' + this.toString();
1129 | 					var fgColor = this.isLight() ? '#000' : '#FFF';
1130 | 
1131 | 					this.styleElement.style.backgroundImage = 'none';
1132 | 					this.styleElement.style.backgroundColor = bgColor;
1133 | 					this.styleElement.style.color = fgColor;
1134 | 
1135 | 					if (this.overwriteImportant) {
1136 | 						this.styleElement.setAttribute('style',
1137 | 							'background: ' + bgColor + ' !important; ' +
1138 | 							'color: ' + fgColor + ' !important;'
1139 | 						);
1140 | 					}
1141 | 				}
1142 | 			}
1143 | 			if (!(flags & jsc.leavePad) && isPickerOwner()) {
1144 | 				redrawPad();
1145 | 			}
1146 | 			if (!(flags & jsc.leaveSld) && isPickerOwner()) {
1147 | 				redrawSld();
1148 | 			}
1149 | 		};
1150 | 
1151 | 
1152 | 		// h: 0-360
1153 | 		// s: 0-100
1154 | 		// v: 0-100
1155 | 		//
1156 | 		this.fromHSV = function (h, s, v, flags) { // null = don't change
1157 | 			if (h !== null) {
1158 | 				if (isNaN(h)) { return false; }
1159 | 				h = Math.max(0, Math.min(360, h));
1160 | 			}
1161 | 			if (s !== null) {
1162 | 				if (isNaN(s)) { return false; }
1163 | 				s = Math.max(0, Math.min(100, this.maxS, s), this.minS);
1164 | 			}
1165 | 			if (v !== null) {
1166 | 				if (isNaN(v)) { return false; }
1167 | 				v = Math.max(0, Math.min(100, this.maxV, v), this.minV);
1168 | 			}
1169 | 
1170 | 			this.rgb = HSV_RGB(
1171 | 				h===null ? this.hsv[0] : (this.hsv[0]=h),
1172 | 				s===null ? this.hsv[1] : (this.hsv[1]=s),
1173 | 				v===null ? this.hsv[2] : (this.hsv[2]=v)
1174 | 			);
1175 | 
1176 | 			this.exportColor(flags);
1177 | 		};
1178 | 
1179 | 
1180 | 		// r: 0-255
1181 | 		// g: 0-255
1182 | 		// b: 0-255
1183 | 		//
1184 | 		this.fromRGB = function (r, g, b, flags) { // null = don't change
1185 | 			if (r !== null) {
1186 | 				if (isNaN(r)) { return false; }
1187 | 				r = Math.max(0, Math.min(255, r));
1188 | 			}
1189 | 			if (g !== null) {
1190 | 				if (isNaN(g)) { return false; }
1191 | 				g = Math.max(0, Math.min(255, g));
1192 | 			}
1193 | 			if (b !== null) {
1194 | 				if (isNaN(b)) { return false; }
1195 | 				b = Math.max(0, Math.min(255, b));
1196 | 			}
1197 | 
1198 | 			var hsv = RGB_HSV(
1199 | 				r===null ? this.rgb[0] : r,
1200 | 				g===null ? this.rgb[1] : g,
1201 | 				b===null ? this.rgb[2] : b
1202 | 			);
1203 | 			if (hsv[0] !== null) {
1204 | 				this.hsv[0] = Math.max(0, Math.min(360, hsv[0]));
1205 | 			}
1206 | 			if (hsv[2] !== 0) {
1207 | 				this.hsv[1] = hsv[1]===null ? null : Math.max(0, this.minS, Math.min(100, this.maxS, hsv[1]));
1208 | 			}
1209 | 			this.hsv[2] = hsv[2]===null ? null : Math.max(0, this.minV, Math.min(100, this.maxV, hsv[2]));
1210 | 
1211 | 			// update RGB according to final HSV, as some values might be trimmed
1212 | 			var rgb = HSV_RGB(this.hsv[0], this.hsv[1], this.hsv[2]);
1213 | 			this.rgb[0] = rgb[0];
1214 | 			this.rgb[1] = rgb[1];
1215 | 			this.rgb[2] = rgb[2];
1216 | 
1217 | 			this.exportColor(flags);
1218 | 		};
1219 | 
1220 | 
1221 | 		this.fromString = function (str, flags) {
1222 | 			var m;
1223 | 			if (m = str.match(/^\W*([0-9A-F]{3}([0-9A-F]{3})?)\W*$/i)) {
1224 | 				// HEX notation
1225 | 				//
1226 | 
1227 | 				if (m[1].length === 6) {
1228 | 					// 6-char notation
1229 | 					this.fromRGB(
1230 | 						parseInt(m[1].substr(0,2),16),
1231 | 						parseInt(m[1].substr(2,2),16),
1232 | 						parseInt(m[1].substr(4,2),16),
1233 | 						flags
1234 | 					);
1235 | 				} else {
1236 | 					// 3-char notation
1237 | 					this.fromRGB(
1238 | 						parseInt(m[1].charAt(0) + m[1].charAt(0),16),
1239 | 						parseInt(m[1].charAt(1) + m[1].charAt(1),16),
1240 | 						parseInt(m[1].charAt(2) + m[1].charAt(2),16),
1241 | 						flags
1242 | 					);
1243 | 				}
1244 | 				return true;
1245 | 
1246 | 			} else if (m = str.match(/^\W*rgba?\(([^)]*)\)\W*$/i)) {
1247 | 				var params = m[1].split(',');
1248 | 				var re = /^\s*(\d*)(\.\d+)?\s*$/;
1249 | 				var mR, mG, mB;
1250 | 				if (
1251 | 					params.length >= 3 &&
1252 | 					(mR = params[0].match(re)) &&
1253 | 					(mG = params[1].match(re)) &&
1254 | 					(mB = params[2].match(re))
1255 | 				) {
1256 | 					var r = parseFloat((mR[1] || '0') + (mR[2] || ''));
1257 | 					var g = parseFloat((mG[1] || '0') + (mG[2] || ''));
1258 | 					var b = parseFloat((mB[1] || '0') + (mB[2] || ''));
1259 | 					this.fromRGB(r, g, b, flags);
1260 | 					return true;
1261 | 				}
1262 | 			}
1263 | 			return false;
1264 | 		};
1265 | 
1266 | 
1267 | 		this.toString = function () {
1268 | 			return (
1269 | 				(0x100 | Math.round(this.rgb[0])).toString(16).substr(1) +
1270 | 				(0x100 | Math.round(this.rgb[1])).toString(16).substr(1) +
1271 | 				(0x100 | Math.round(this.rgb[2])).toString(16).substr(1)
1272 | 			);
1273 | 		};
1274 | 
1275 | 
1276 | 		this.toHEXString = function () {
1277 | 			return '#' + this.toString().toUpperCase();
1278 | 		};
1279 | 
1280 | 
1281 | 		this.toRGBString = function () {
1282 | 			return ('rgb(' +
1283 | 				Math.round(this.rgb[0]) + ',' +
1284 | 				Math.round(this.rgb[1]) + ',' +
1285 | 				Math.round(this.rgb[2]) + ')'
1286 | 			);
1287 | 		};
1288 | 
1289 | 
1290 | 		this.isLight = function () {
1291 | 			return (
1292 | 				0.213 * this.rgb[0] +
1293 | 				0.715 * this.rgb[1] +
1294 | 				0.072 * this.rgb[2] >
1295 | 				255 / 2
1296 | 			);
1297 | 		};
1298 | 
1299 | 
1300 | 		this._processParentElementsInDOM = function () {
1301 | 			if (this._linkedElementsProcessed) { return; }
1302 | 			this._linkedElementsProcessed = true;
1303 | 
1304 | 			var elm = this.targetElement;
1305 | 			do {
1306 | 				// If the target element or one of its parent nodes has fixed position,
1307 | 				// then use fixed positioning instead
1308 | 				//
1309 | 				// Note: In Firefox, getComputedStyle returns null in a hidden iframe,
1310 | 				// that's why we need to check if the returned style object is non-empty
1311 | /*				var currStyle = jsc.getStyle(elm);
1312 | 				if (currStyle && currStyle.position.toLowerCase() === 'fixed') {
1313 | 					this.fixed = true;
1314 | 				}*/
1315 | 
1316 | 				if (elm !== this.targetElement) {
1317 | 					// Ensure to attach onParentScroll only once to each parent element
1318 | 					// (multiple targetElements can share the same parent nodes)
1319 | 					//
1320 | 					// Note: It's not just offsetParents that can be scrollable,
1321 | 					// that's why we loop through all parent nodes
1322 | 					if (!elm._jscEventsAttached) {
1323 | 						jsc.attachEvent(elm, 'scroll', jsc.onParentScroll);
1324 | 						elm._jscEventsAttached = true;
1325 | 					}
1326 | 				}
1327 | 			} while ((elm = elm.parentNode) && !jsc.isElementType(elm, 'body'));
1328 | 		};
1329 | 
1330 | 
1331 | 		// r: 0-255
1332 | 		// g: 0-255
1333 | 		// b: 0-255
1334 | 		//
1335 | 		// returns: [ 0-360, 0-100, 0-100 ]
1336 | 		//
1337 | 		function RGB_HSV (r, g, b) {
1338 | 			r /= 255;
1339 | 			g /= 255;
1340 | 			b /= 255;
1341 | 			var n = Math.min(Math.min(r,g),b);
1342 | 			var v = Math.max(Math.max(r,g),b);
1343 | 			var m = v - n;
1344 | 			if (m === 0) { return [ null, 0, 100 * v ]; }
1345 | 			var h = r===n ? 3+(b-g)/m : (g===n ? 5+(r-b)/m : 1+(g-r)/m);
1346 | 			return [
1347 | 				60 * (h===6?0:h),
1348 | 				100 * (m/v),
1349 | 				100 * v
1350 | 			];
1351 | 		}
1352 | 
1353 | 
1354 | 		// h: 0-360
1355 | 		// s: 0-100
1356 | 		// v: 0-100
1357 | 		//
1358 | 		// returns: [ 0-255, 0-255, 0-255 ]
1359 | 		//
1360 | 		function HSV_RGB (h, s, v) {
1361 | 			var u = 255 * (v / 100);
1362 | 
1363 | 			if (h === null) {
1364 | 				return [ u, u, u ];
1365 | 			}
1366 | 
1367 | 			h /= 60;
1368 | 			s /= 100;
1369 | 
1370 | 			var i = Math.floor(h);
1371 | 			var f = i%2 ? h-i : 1-(h-i);
1372 | 			var m = u * (1 - s);
1373 | 			var n = u * (1 - s * f);
1374 | 			switch (i) {
1375 | 				case 6:
1376 | 				case 0: return [u,n,m];
1377 | 				case 1: return [n,u,m];
1378 | 				case 2: return [m,u,n];
1379 | 				case 3: return [m,n,u];
1380 | 				case 4: return [n,m,u];
1381 | 				case 5: return [u,m,n];
1382 | 			}
1383 | 		}
1384 | 
1385 | 
1386 | 		function detachPicker () {
1387 | 			jsc.unsetClass(THIS.targetElement, THIS.activeClass);
1388 | 			jsc.picker.wrap.parentNode.removeChild(jsc.picker.wrap);
1389 | 			delete jsc.picker.owner;
1390 | 		}
1391 | 
1392 | 
1393 | 		function drawPicker () {
1394 | 
1395 | 			// At this point, when drawing the picker, we know what the parent elements are
1396 | 			// and we can do all related DOM operations, such as registering events on them
1397 | 			// or checking their positioning
1398 | 			THIS._processParentElementsInDOM();
1399 | 
1400 | 			if (!jsc.picker) {
1401 | 				jsc.picker = {
1402 | 					owner: null,
1403 | 					wrap : document.createElement('div'),
1404 | 					box : document.createElement('div'),
1405 | 					boxS : document.createElement('div'), // shadow area
1406 | 					boxB : document.createElement('div'), // border
1407 | 					pad : document.createElement('div'),
1408 | 					padB : document.createElement('div'), // border
1409 | 					padM : document.createElement('div'), // mouse/touch area
1410 | 					padPal : jsc.createPalette(),
1411 | 					cross : document.createElement('div'),
1412 | 					crossBY : document.createElement('div'), // border Y
1413 | 					crossBX : document.createElement('div'), // border X
1414 | 					crossLY : document.createElement('div'), // line Y
1415 | 					crossLX : document.createElement('div'), // line X
1416 | 					sld : document.createElement('div'),
1417 | 					sldB : document.createElement('div'), // border
1418 | 					sldM : document.createElement('div'), // mouse/touch area
1419 | 					sldGrad : jsc.createSliderGradient(),
1420 | 					sldPtrS : document.createElement('div'), // slider pointer spacer
1421 | 					sldPtrIB : document.createElement('div'), // slider pointer inner border
1422 | 					sldPtrMB : document.createElement('div'), // slider pointer middle border
1423 | 					sldPtrOB : document.createElement('div'), // slider pointer outer border
1424 | 					btn : document.createElement('div'),
1425 | 					btnT : document.createElement('span') // text
1426 | 				};
1427 | 
1428 | 				jsc.picker.pad.appendChild(jsc.picker.padPal.elm);
1429 | 				jsc.picker.padB.appendChild(jsc.picker.pad);
1430 | 				jsc.picker.cross.appendChild(jsc.picker.crossBY);
1431 | 				jsc.picker.cross.appendChild(jsc.picker.crossBX);
1432 | 				jsc.picker.cross.appendChild(jsc.picker.crossLY);
1433 | 				jsc.picker.cross.appendChild(jsc.picker.crossLX);
1434 | 				jsc.picker.padB.appendChild(jsc.picker.cross);
1435 | 				jsc.picker.box.appendChild(jsc.picker.padB);
1436 | 				jsc.picker.box.appendChild(jsc.picker.padM);
1437 | 
1438 | 				jsc.picker.sld.appendChild(jsc.picker.sldGrad.elm);
1439 | 				jsc.picker.sldB.appendChild(jsc.picker.sld);
1440 | 				jsc.picker.sldB.appendChild(jsc.picker.sldPtrOB);
1441 | 				jsc.picker.sldPtrOB.appendChild(jsc.picker.sldPtrMB);
1442 | 				jsc.picker.sldPtrMB.appendChild(jsc.picker.sldPtrIB);
1443 | 				jsc.picker.sldPtrIB.appendChild(jsc.picker.sldPtrS);
1444 | 				jsc.picker.box.appendChild(jsc.picker.sldB);
1445 | 				jsc.picker.box.appendChild(jsc.picker.sldM);
1446 | 
1447 | 				jsc.picker.btn.appendChild(jsc.picker.btnT);
1448 | 				jsc.picker.box.appendChild(jsc.picker.btn);
1449 | 
1450 | 				jsc.picker.boxB.appendChild(jsc.picker.box);
1451 | 				jsc.picker.wrap.appendChild(jsc.picker.boxS);
1452 | 				jsc.picker.wrap.appendChild(jsc.picker.boxB);
1453 | 			}
1454 | 
1455 | 			var p = jsc.picker;
1456 | 
1457 | 			var displaySlider = !!jsc.getSliderComponent(THIS);
1458 | 			var dims = jsc.getPickerDims(THIS);
1459 | 			var crossOuterSize = (2 * THIS.pointerBorderWidth + THIS.pointerThickness + 2 * THIS.crossSize);
1460 | 			var padToSliderPadding = jsc.getPadToSliderPadding(THIS);
1461 | 			var borderRadius = Math.min(
1462 | 				THIS.borderRadius,
1463 | 				Math.round(THIS.padding * Math.PI)); // px
1464 | 			var padCursor = 'crosshair';
1465 | 
1466 | 			// wrap
1467 | 			p.wrap.style.clear = 'both';
1468 | 			p.wrap.style.width = (dims[0] + 2 * THIS.borderWidth) + 'px';
1469 | 			p.wrap.style.height = (dims[1] + 2 * THIS.borderWidth) + 'px';
1470 | 			p.wrap.style.zIndex = THIS.zIndex;
1471 | 
1472 | 			// picker
1473 | 			p.box.style.width = dims[0] + 'px';
1474 | 			p.box.style.height = dims[1] + 'px';
1475 | 
1476 | 			p.boxS.style.position = 'absolute';
1477 | 			p.boxS.style.left = '0';
1478 | 			p.boxS.style.top = '0';
1479 | 			p.boxS.style.width = '100%';
1480 | 			p.boxS.style.height = '100%';
1481 | 			jsc.setBorderRadius(p.boxS, borderRadius + 'px');
1482 | 
1483 | 			// picker border
1484 | 			p.boxB.style.position = 'relative';
1485 | 			p.boxB.style.border = THIS.borderWidth + 'px solid';
1486 | 			p.boxB.style.borderColor = THIS.borderColor;
1487 | 			p.boxB.style.background = THIS.backgroundColor;
1488 | 			jsc.setBorderRadius(p.boxB, borderRadius + 'px');
1489 | 
1490 | 			// IE hack:
1491 | 			// If the element is transparent, IE will trigger the event on the elements under it,
1492 | 			// e.g. on Canvas or on elements with border
1493 | 			p.padM.style.background =
1494 | 			p.sldM.style.background =
1495 | 				'#FFF';
1496 | 			jsc.setStyle(p.padM, 'opacity', '0');
1497 | 			jsc.setStyle(p.sldM, 'opacity', '0');
1498 | 
1499 | 			// pad
1500 | 			p.pad.style.position = 'relative';
1501 | 			p.pad.style.width = THIS.width + 'px';
1502 | 			p.pad.style.height = THIS.height + 'px';
1503 | 
1504 | 			// pad palettes (HSV and HVS)
1505 | 			p.padPal.draw(THIS.width, THIS.height, jsc.getPadYComponent(THIS));
1506 | 
1507 | 			// pad border
1508 | 			p.padB.style.position = 'absolute';
1509 | 			p.padB.style.left = THIS.padding + 'px';
1510 | 			p.padB.style.top = THIS.padding + 'px';
1511 | 			p.padB.style.border = THIS.insetWidth + 'px solid';
1512 | 			p.padB.style.borderColor = THIS.insetColor;
1513 | 
1514 | 			// pad mouse area
1515 | 			p.padM._jscInstance = THIS;
1516 | 			p.padM._jscControlName = 'pad';
1517 | 			p.padM.style.position = 'absolute';
1518 | 			p.padM.style.left = '0';
1519 | 			p.padM.style.top = '0';
1520 | 			p.padM.style.width = (THIS.padding + 2 * THIS.insetWidth + THIS.width + padToSliderPadding / 2) + 'px';
1521 | 			p.padM.style.height = dims[1] + 'px';
1522 | 			p.padM.style.cursor = padCursor;
1523 | 
1524 | 			// pad cross
1525 | 			p.cross.style.position = 'absolute';
1526 | 			p.cross.style.left =
1527 | 			p.cross.style.top =
1528 | 				'0';
1529 | 			p.cross.style.width =
1530 | 			p.cross.style.height =
1531 | 				crossOuterSize + 'px';
1532 | 
1533 | 			// pad cross border Y and X
1534 | 			p.crossBY.style.position =
1535 | 			p.crossBX.style.position =
1536 | 				'absolute';
1537 | 			p.crossBY.style.background =
1538 | 			p.crossBX.style.background =
1539 | 				THIS.pointerBorderColor;
1540 | 			p.crossBY.style.width =
1541 | 			p.crossBX.style.height =
1542 | 				(2 * THIS.pointerBorderWidth + THIS.pointerThickness) + 'px';
1543 | 			p.crossBY.style.height =
1544 | 			p.crossBX.style.width =
1545 | 				crossOuterSize + 'px';
1546 | 			p.crossBY.style.left =
1547 | 			p.crossBX.style.top =
1548 | 				(Math.floor(crossOuterSize / 2) - Math.floor(THIS.pointerThickness / 2) - THIS.pointerBorderWidth) + 'px';
1549 | 			p.crossBY.style.top =
1550 | 			p.crossBX.style.left =
1551 | 				'0';
1552 | 
1553 | 			// pad cross line Y and X
1554 | 			p.crossLY.style.position =
1555 | 			p.crossLX.style.position =
1556 | 				'absolute';
1557 | 			p.crossLY.style.background =
1558 | 			p.crossLX.style.background =
1559 | 				THIS.pointerColor;
1560 | 			p.crossLY.style.height =
1561 | 			p.crossLX.style.width =
1562 | 				(crossOuterSize - 2 * THIS.pointerBorderWidth) + 'px';
1563 | 			p.crossLY.style.width =
1564 | 			p.crossLX.style.height =
1565 | 				THIS.pointerThickness + 'px';
1566 | 			p.crossLY.style.left =
1567 | 			p.crossLX.style.top =
1568 | 				(Math.floor(crossOuterSize / 2) - Math.floor(THIS.pointerThickness / 2)) + 'px';
1569 | 			p.crossLY.style.top =
1570 | 			p.crossLX.style.left =
1571 | 				THIS.pointerBorderWidth + 'px';
1572 | 
1573 | 			// slider
1574 | 			p.sld.style.overflow = 'hidden';
1575 | 			p.sld.style.width = THIS.sliderSize + 'px';
1576 | 			p.sld.style.height = THIS.height + 'px';
1577 | 
1578 | 			// slider gradient
1579 | 			p.sldGrad.draw(THIS.sliderSize, THIS.height, '#000', '#000');
1580 | 
1581 | 			// slider border
1582 | 			p.sldB.style.display = displaySlider ? 'block' : 'none';
1583 | 			p.sldB.style.position = 'absolute';
1584 | 			p.sldB.style.right = THIS.padding + 'px';
1585 | 			p.sldB.style.top = THIS.padding + 'px';
1586 | 			p.sldB.style.border = THIS.insetWidth + 'px solid';
1587 | 			p.sldB.style.borderColor = THIS.insetColor;
1588 | 
1589 | 			// slider mouse area
1590 | 			p.sldM._jscInstance = THIS;
1591 | 			p.sldM._jscControlName = 'sld';
1592 | 			p.sldM.style.display = displaySlider ? 'block' : 'none';
1593 | 			p.sldM.style.position = 'absolute';
1594 | 			p.sldM.style.right = '0';
1595 | 			p.sldM.style.top = '0';
1596 | 			p.sldM.style.width = (THIS.sliderSize + padToSliderPadding / 2 + THIS.padding + 2 * THIS.insetWidth) + 'px';
1597 | 			p.sldM.style.height = dims[1] + 'px';
1598 | 			p.sldM.style.cursor = 'default';
1599 | 
1600 | 			// slider pointer inner and outer border
1601 | 			p.sldPtrIB.style.border =
1602 | 			p.sldPtrOB.style.border =
1603 | 				THIS.pointerBorderWidth + 'px solid ' + THIS.pointerBorderColor;
1604 | 
1605 | 			// slider pointer outer border
1606 | 			p.sldPtrOB.style.position = 'absolute';
1607 | 			p.sldPtrOB.style.left = -(2 * THIS.pointerBorderWidth + THIS.pointerThickness) + 'px';
1608 | 			p.sldPtrOB.style.top = '0';
1609 | 
1610 | 			// slider pointer middle border
1611 | 			p.sldPtrMB.style.border = THIS.pointerThickness + 'px solid ' + THIS.pointerColor;
1612 | 
1613 | 			// slider pointer spacer
1614 | 			p.sldPtrS.style.width = THIS.sliderSize + 'px';
1615 | 			p.sldPtrS.style.height = sliderPtrSpace + 'px';
1616 | 
1617 | 			// the Close button
1618 | 			function setBtnBorder () {
1619 | 				var insetColors = THIS.insetColor.split(/\s+/);
1620 | 				var outsetColor = insetColors.length < 2 ? insetColors[0] : insetColors[1] + ' ' + insetColors[0] + ' ' + insetColors[0] + ' ' + insetColors[1];
1621 | 				p.btn.style.borderColor = outsetColor;
1622 | 			}
1623 | 			p.btn.style.display = THIS.closable ? 'block' : 'none';
1624 | 			p.btn.style.position = 'absolute';
1625 | 			p.btn.style.left = THIS.padding + 'px';
1626 | 			p.btn.style.bottom = THIS.padding + 'px';
1627 | 			p.btn.style.padding = '0 15px';
1628 | 			p.btn.style.height = THIS.buttonHeight + 'px';
1629 | 			p.btn.style.border = THIS.insetWidth + 'px solid';
1630 | 			setBtnBorder();
1631 | 			p.btn.style.color = THIS.buttonColor;
1632 | 			p.btn.style.font = '12px sans-serif';
1633 | 			p.btn.style.textAlign = 'center';
1634 | 			try {
1635 | 				p.btn.style.cursor = 'pointer';
1636 | 			} catch(eOldIE) {
1637 | 				p.btn.style.cursor = 'hand';
1638 | 			}
1639 | 			p.btn.onmousedown = function () {
1640 | 				THIS.hide();
1641 | 			};
1642 | 			p.btnT.style.lineHeight = THIS.buttonHeight + 'px';
1643 | 			p.btnT.innerHTML = '';
1644 | 			p.btnT.appendChild(document.createTextNode(THIS.closeText));
1645 | 
1646 | 			// place pointers
1647 | 			redrawPad();
1648 | 			redrawSld();
1649 | 
1650 | 			// If we are changing the owner without first closing the picker,
1651 | 			// make sure to first deal with the old owner
1652 | 			if (jsc.picker.owner && jsc.picker.owner !== THIS) {
1653 | 				jsc.unsetClass(jsc.picker.owner.targetElement, THIS.activeClass);
1654 | 			}
1655 | 
1656 | 			// Set the new picker owner
1657 | 			jsc.picker.owner = THIS;
1658 | 
1659 | 			// The redrawPosition() method needs picker.owner to be set, that's why we call it here,
1660 | 			// after setting the owner
1661 | 			if (jsc.isElementType(container, 'body')) {
1662 | 				jsc.redrawPosition();
1663 | 			} else {
1664 | 				jsc._drawPosition(THIS, 0, 0, 'relative', false);
1665 | 			}
1666 | 
1667 | 			if (p.wrap.parentNode != container) {
1668 | 				container.appendChild(p.wrap);
1669 | 			}
1670 | 
1671 | 			jsc.setClass(THIS.targetElement, THIS.activeClass);
1672 | 		}
1673 | 
1674 | 
1675 | 		function redrawPad () {
1676 | 			// redraw the pad pointer
1677 | 			switch (jsc.getPadYComponent(THIS)) {
1678 | 			case 's': var yComponent = 1; break;
1679 | 			case 'v': var yComponent = 2; break;
1680 | 			}
1681 | 			var x = Math.round((THIS.hsv[0] / 360) * (THIS.width - 1));
1682 | 			var y = Math.round((1 - THIS.hsv[yComponent] / 100) * (THIS.height - 1));
1683 | 			var crossOuterSize = (2 * THIS.pointerBorderWidth + THIS.pointerThickness + 2 * THIS.crossSize);
1684 | 			var ofs = -Math.floor(crossOuterSize / 2);
1685 | 			jsc.picker.cross.style.left = (x + ofs) + 'px';
1686 | 			jsc.picker.cross.style.top = (y + ofs) + 'px';
1687 | 
1688 | 			// redraw the slider
1689 | 			switch (jsc.getSliderComponent(THIS)) {
1690 | 			case 's':
1691 | 				var rgb1 = HSV_RGB(THIS.hsv[0], 100, THIS.hsv[2]);
1692 | 				var rgb2 = HSV_RGB(THIS.hsv[0], 0, THIS.hsv[2]);
1693 | 				var color1 = 'rgb(' +
1694 | 					Math.round(rgb1[0]) + ',' +
1695 | 					Math.round(rgb1[1]) + ',' +
1696 | 					Math.round(rgb1[2]) + ')';
1697 | 				var color2 = 'rgb(' +
1698 | 					Math.round(rgb2[0]) + ',' +
1699 | 					Math.round(rgb2[1]) + ',' +
1700 | 					Math.round(rgb2[2]) + ')';
1701 | 				jsc.picker.sldGrad.draw(THIS.sliderSize, THIS.height, color1, color2);
1702 | 				break;
1703 | 			case 'v':
1704 | 				var rgb = HSV_RGB(THIS.hsv[0], THIS.hsv[1], 100);
1705 | 				var color1 = 'rgb(' +
1706 | 					Math.round(rgb[0]) + ',' +
1707 | 					Math.round(rgb[1]) + ',' +
1708 | 					Math.round(rgb[2]) + ')';
1709 | 				var color2 = '#000';
1710 | 				jsc.picker.sldGrad.draw(THIS.sliderSize, THIS.height, color1, color2);
1711 | 				break;
1712 | 			}
1713 | 		}
1714 | 
1715 | 
1716 | 		function redrawSld () {
1717 | 			var sldComponent = jsc.getSliderComponent(THIS);
1718 | 			if (sldComponent) {
1719 | 				// redraw the slider pointer
1720 | 				switch (sldComponent) {
1721 | 				case 's': var yComponent = 1; break;
1722 | 				case 'v': var yComponent = 2; break;
1723 | 				}
1724 | 				var y = Math.round((1 - THIS.hsv[yComponent] / 100) * (THIS.height - 1));
1725 | 				jsc.picker.sldPtrOB.style.top = (y - (2 * THIS.pointerBorderWidth + THIS.pointerThickness) - Math.floor(sliderPtrSpace / 2)) + 'px';
1726 | 			}
1727 | 		}
1728 | 
1729 | 
1730 | 		function isPickerOwner () {
1731 | 			return jsc.picker && jsc.picker.owner === THIS;
1732 | 		}
1733 | 
1734 | 
1735 | 		function blurValue () {
1736 | 			THIS.importColor();
1737 | 		}
1738 | 
1739 | 
1740 | 		// Find the target element
1741 | 		if (typeof targetElement === 'string') {
1742 | 			var id = targetElement;
1743 | 			var elm = document.getElementById(id);
1744 | 			if (elm) {
1745 | 				this.targetElement = elm;
1746 | 			} else {
1747 | 				jsc.warn('Could not find target element with ID \'' + id + '\'');
1748 | 			}
1749 | 		} else if (targetElement) {
1750 | 			this.targetElement = targetElement;
1751 | 		} else {
1752 | 			jsc.warn('Invalid target element: \'' + targetElement + '\'');
1753 | 		}
1754 | 
1755 | 		if (this.targetElement._jscLinkedInstance) {
1756 | 			jsc.warn('Cannot link jscolor twice to the same element. Skipping.');
1757 | 			return;
1758 | 		}
1759 | 		this.targetElement._jscLinkedInstance = this;
1760 | 
1761 | 		// Find the value element
1762 | 		this.valueElement = jsc.fetchElement(this.valueElement);
1763 | 		// Find the style element
1764 | 		this.styleElement = jsc.fetchElement(this.styleElement);
1765 | 
1766 | 		var THIS = this;
1767 | 		var container =
1768 | 			this.container ?
1769 | 			jsc.fetchElement(this.container) :
1770 | 			document.getElementsByTagName('body')[0];
1771 | 		var sliderPtrSpace = 3; // px
1772 | 
1773 | 		// For BUTTON elements it's important to stop them from sending the form when clicked
1774 | 		// (e.g. in Safari)
1775 | 		if (jsc.isElementType(this.targetElement, 'button')) {
1776 | 			if (this.targetElement.onclick) {
1777 | 				var origCallback = this.targetElement.onclick;
1778 | 				this.targetElement.onclick = function (evt) {
1779 | 					origCallback.call(this, evt);
1780 | 					return false;
1781 | 				};
1782 | 			} else {
1783 | 				this.targetElement.onclick = function () { return false; };
1784 | 			}
1785 | 		}
1786 | 
1787 | 		/*
1788 | 		var elm = this.targetElement;
1789 | 		do {
1790 | 			// If the target element or one of its offsetParents has fixed position,
1791 | 			// then use fixed positioning instead
1792 | 			//
1793 | 			// Note: In Firefox, getComputedStyle returns null in a hidden iframe,
1794 | 			// that's why we need to check if the returned style object is non-empty
1795 | 			var currStyle = jsc.getStyle(elm);
1796 | 			if (currStyle && currStyle.position.toLowerCase() === 'fixed') {
1797 | 				this.fixed = true;
1798 | 			}
1799 | 
1800 | 			if (elm !== this.targetElement) {
1801 | 				// attach onParentScroll so that we can recompute the picker position
1802 | 				// when one of the offsetParents is scrolled
1803 | 				if (!elm._jscEventsAttached) {
1804 | 					jsc.attachEvent(elm, 'scroll', jsc.onParentScroll);
1805 | 					elm._jscEventsAttached = true;
1806 | 				}
1807 | 			}
1808 | 		} while ((elm = elm.offsetParent) && !jsc.isElementType(elm, 'body'));
1809 | 		*/
1810 | 
1811 | 		// valueElement
1812 | 		if (this.valueElement) {
1813 | 			if (jsc.isElementType(this.valueElement, 'input')) {
1814 | 				var updateField = function () {
1815 | 					THIS.fromString(THIS.valueElement.value, jsc.leaveValue);
1816 | 					jsc.dispatchFineChange(THIS);
1817 | 				};
1818 | 				jsc.attachEvent(this.valueElement, 'keyup', updateField);
1819 | 				jsc.attachEvent(this.valueElement, 'input', updateField);
1820 | 				jsc.attachEvent(this.valueElement, 'blur', blurValue);
1821 | 				this.valueElement.setAttribute('autocomplete', 'off');
1822 | 			}
1823 | 		}
1824 | 
1825 | 		// styleElement
1826 | 		if (this.styleElement) {
1827 | 			this.styleElement._jscOrigStyle = {
1828 | 				backgroundImage : this.styleElement.style.backgroundImage,
1829 | 				backgroundColor : this.styleElement.style.backgroundColor,
1830 | 				color : this.styleElement.style.color
1831 | 			};
1832 | 		}
1833 | 
1834 | 		if (this.value) {
1835 | 			// Try to set the color from the .value option and if unsuccessful,
1836 | 			// export the current color
1837 | 			this.fromString(this.value) || this.exportColor();
1838 | 		} else {
1839 | 			this.importColor();
1840 | 		}
1841 | 	}
1842 | 
1843 | };
1844 | 
1845 | 
1846 | //================================
1847 | // Public properties and methods
1848 | //================================
1849 | 
1850 | 
1851 | // By default, search for all elements with class="jscolor" and install a color picker on them.
1852 | //
1853 | // You can change what class name will be looked for by setting the property jscolor.lookupClass
1854 | // anywhere in your HTML document. To completely disable the automatic lookup, set it to null.
1855 | //
1856 | jsc.jscolor.lookupClass = 'jscolor';
1857 | 
1858 | 
1859 | jsc.jscolor.installByClassName = function (className) {
1860 | 	var inputElms = document.getElementsByTagName('input');
1861 | 	var buttonElms = document.getElementsByTagName('button');
1862 | 
1863 | 	jsc.tryInstallOnElements(inputElms, className);
1864 | 	jsc.tryInstallOnElements(buttonElms, className);
1865 | };
1866 | 
1867 | 
1868 | jsc.register();
1869 | 
1870 | 
1871 | return jsc.jscolor;
1872 | 
1873 | 
1874 | })(); }
1875 | 


--------------------------------------------------------------------------------