-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathKeypad.widget.json
149 lines (149 loc) · 10.6 KB
/
Keypad.widget.json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
{
"template": "<!-- \nWidget Keypad \nfor openHAB\nLucky Mallari 2018\n-->\n<form name=\"_gkw\" ng-init=\"config.marginPx = (config.marginPx < 0 ? 0 : config.marginPx)\">\n <style>\n .genericKeypadWidget {\n \tdisplay: flex;\n \tflex-wrap: wrap;\n \tflex: 0 1 100%;\n \twidth: 100%;\n \theight: 100%;\n \tposition: absolute;\n \ttop: 0;\n \tleft: 0;\n \tpadding: {{config.marginPx / 2}}px;\n }\n \n .genericKeypadWidget button {\n \toutline: none;\n }\n \n .genericKeypadWidget .keys {\n \tdisplay: flex;\n flex: 0 1 100%;\n \toverflow: hidden;\n flex-wrap: wrap;\n \theight: 100%;\n }\n \n .genericKeypadWidget .key {\n \tmargin: {{config.marginPx / 2}}px;\n flex: 1;\n \tflex-basis: calc(33% - {{config.marginPx}}px - 1px);\n \tbreak-inside: avoid;\n justify-content: center;\n align-items: center;\n\t\t\tfont-size: {{config.keyFontSize}};\n border: none;\n cursor: pointer;\n\t\t\tbackground: {{config.btnKeysBgColor}};\n \toverflow: hidden;\n \theight: calc({{config.isShowOutputBox?'20%':'25%'}} - {{config.marginPx}}px);\n \tposition: relative;\n \tborder-radius: {{config.btnBorderRadius}};\n }\n \n .genericKeypadWidget .key:not(:disabled)::after {\n \t\tcontent: '';\n\t\t position: absolute;\n \t\ttop: 50%;\n \t\tleft: 50%;\n \t\twidth: 5px;\n \t\theight: 5px;\n \t\tbackground: rgba(255, 255, 255, .5);\n \t\topacity: 0;\n \t\tborder-radius: 100%;\n \t\ttransform: scale(1, 1) translate(-50%);\n \t\ttransform-origin: 50% 50%;\n }\n \n .genericKeypadWidget .key:focus:not(:active)::after {\n \t\tanimation: ripple 1s ease-out;\n\t\t}\n \n .genericKeypadWidget .key.outputBox {\n display: flex;\n \tmargin: {{config.marginPx / 2}}px;\n \tflex-basis: 100%;\n justify-content: {{config.outputBoxTextAlign == 'right' ? 'flex-end': config.outputBoxTextAlign}};\n align-items: center;\n font-size: {{config.outputBoxFontSize}};\n background: #000;\n color: #fff;\n flex-basis: 100%;\n \tposition: relative;\n \tpointer-events: {{ config.isOutputBoxClickable ? 'auto' : 'none' }};\n\t\t} \n \n .genericKeypadWidget .key.btn_disabled::after {\n content: '';\n width: 100%;\n height: 100%;\n position: absolute;\n top: 0px;\n left: 0px;\n background: rgba(0,0,0,.65);\n \tmargin: 0px;\n \tborder-radius: {{config.btnBorderRadius}};\n } \n \n .genericKeypadWidget input.noshow {\n display: none;\n }\n\n .genericKeypadWidget .key.btn_ok {\n\t\t\tbackground: {{config.btnOkBgColor}};\n }\n\t\t\n .genericKeypadWidget .key.btn_del {\n \tbackground: {{config.btnDelBgColor}};\n } \n \n .genericKeypadWidget .key.btn_clr {\n \tdisplay: flex;\n \tposition: absolute;\n \ttop: 0;\n \tleft: 0;\n \tbackground: rgba(0,0,0,0.15);\n \theight: 100%;\n \talign-items: center;\n \tfont-size: 1.5vh;\n \tpointer-events: auto;\n \tmargin: 0;\n \tpadding: 10px;\n }\n \n @keyframes ripple {\n 0% {\n transform: scale(0, 0);\n opacity: 1;\n }\n 20% {\n transform: scale(25, 25);\n opacity: 1;\n }\n 100% {\n opacity: 0;\n transform: scale(40, 40);\n }\n } \n </style>\n\n <div class=\"genericKeypadWidget\" ng-init=\"gwk_data={ current: '' }\">\n <input type=\"text\" class=\"noshow\" name=\"current\" ng-model=\"gwk_data.current\" required=\"true\"></input>\n <div class=\"keys\">\n <div class=\"key outputBox\" contenteditable=\"true\" ng-if=\"config.isShowOutputBox\">\n \t<span class=\"outputBoxText\" ng-repeat=\"letter in gwk_data.current.split('') track by $index\">{{config.isMaskOutputBox ? config.maskChar : letter}}</span>\n \t<button class=\"key btn_clr\" contenteditable=\"false\" ng-if=\"_gkw.current.$valid\" ng-click=\"gwk_data.current=''\">{{config.text_btnClear}}</button>\n \t</div>\n\n <button class=\"key\" ng-click=\"gwk_data.current = gwk_data.current + '1'\">1</button>\n <button class=\"key\" ng-click=\"gwk_data.current = gwk_data.current + '2'\">2</button>\n <button class=\"key\" ng-click=\"gwk_data.current = gwk_data.current + '3'\">3</button>\n\n <button class=\"key\" ng-click=\"gwk_data.current = gwk_data.current + '4'\">4</button>\n <button class=\"key\" ng-click=\"gwk_data.current = gwk_data.current + '5'\">5</button>\n <button class=\"key\" ng-click=\"gwk_data.current = gwk_data.current + '6'\">6</button>\n\n <button class=\"key\" ng-click=\"gwk_data.current = gwk_data.current + '7'\">7</button>\n <button class=\"key\" ng-click=\"gwk_data.current = gwk_data.current + '8'\">8</button>\n <button class=\"key\" ng-click=\"gwk_data.current = gwk_data.current + '9'\">9</button>\n\n <button class=\"key btn_del\" ng-class=\"{'btn_disabled':_gkw.current.$invalid}\" ng-click=\"gwk_data.current = gwk_data.current.slice(0,-1)\" ng-disabled=\"_gkw.current.$invalid\" title=\"Hold to clear\">{{config.text_del}}</button>\n <button class=\"key\" ng-click=\"gwk_data.current = gwk_data.current + '0'\">0</button>\n <button class=\"key btn_ok\" ng-class=\"{'btn_disabled':_gkw.current.$invalid}\" ng-click=\"sendCmd(config.keypadReceiver, gwk_data.current); (config.isClearOnSubmit && (gwk_data.current='') || true)\" ng-disabled=\"_gkw.current.$invalid\" title=\"Submit\">{{config.text_ok}}</button>\n\n </div>\n </div>\n</form>\n\n",
"name": "Keypad",
"author": "Lucky Mallari",
"description": "Generic Keypad Widget",
"settings": [
{
"type": "item",
"id": "keypadReceiver",
"label": "Receiving Item",
"default": "keypadReceiver",
"description": "Item that receives the keypad value. MUST BE A Number or String Item"
},
{
"type": "string",
"id": "text_ok",
"label": "OK Text",
"default": "OK",
"description": "Text of the OK/submit button"
},
{
"type": "string",
"id": "text_del",
"label": "Delete/Backspace Text",
"default": "del",
"description": "Text of the Delete/Backspace button"
},
{
"type": "number",
"id": "marginPx",
"label": "Spacing",
"default": "5",
"description": "Spacing (in px) between keys. Minimum enforced value of 0"
},
{
"type": "checkbox",
"id": "isShowOutputBox",
"label": "Show Output Box",
"default": true,
"description": "Shows the output box if checked"
},
{
"type": "checkbox",
"id": "isMaskOutputBox",
"label": "Masks the output box",
"default": true,
"description": "Masks the output box if checked"
},
{
"type": "string",
"id": "outputBoxFontSize",
"default": "2em",
"label": "Output Box Font Size",
"description": "Font size - INCLUDE UNIT (px, em, etc.)"
},
{
"type": "string",
"id": "maskChar",
"label": "Mask Character",
"default": "♣",
"description": "Mask Character (any). Examples: ✿ ♣ ● X"
},
{
"type": "string",
"id": "outputBoxBg",
"label": "Output Box Background",
"description": "Output Box Background. Example: white, #F1F1F1, inherit, or even rgba(255,255,255,.5). url('//source.unsplash.com/random') also works",
"default": "#c5c5c5"
},
{
"type": "string",
"id": "outputBoxColor",
"label": "Output Box char color",
"default": "#000",
"description": "Output Box text color"
},
{
"type": "choice",
"id": "outputBoxTextAlign",
"label": "Output Box Text Alignment",
"default": "center",
"choices": "left,center,right",
"description": "Alignment of the output box text"
},
{
"type": "checkbox",
"id": "isClearOnSubmit",
"label": "Clear On Submit",
"description": "Clears the output box on submit",
"default": true
},
{
"type": "checkbox",
"id": "isOutputBoxClickable",
"label": "Output Box Clickable",
"default": false,
"description": "If checked, you can click on the box and the text cursor will be there."
},
{
"type": "string",
"id": "keyColor",
"label": "Key Color",
"default": "inherit",
"description": "Key Color in valid CSS code. Example: white, #F1F1F1, inherit, or even rgba(255,255,255,.5). url('//source.unsplash.com/random') also works"
},
{
"type": "string",
"id": "btnOkBgColor",
"label": "OK Background",
"description": "OK/Submit button background color. Example: white, #F1F1F1, inherit, or even rgba(255,255,255,.5). url('//source.unsplash.com/random') also works",
"default": "#197500"
},
{
"type": "string",
"id": "btnDelBgColor",
"label": "Del/Clear Background",
"default": "#9c0000",
"description": "Backspace/Clear button background color. Example: white, #F1F1F1, inherit, or even rgba(255,255,255,.5). url('//source.unsplash.com/random') also works"
},
{
"type": "string",
"id": "btnKeysBgColor",
"label": "0-9 Keys Background",
"default": "#616161",
"description": "0-9 button background color. Example: white, #F1F1F1, inherit, or even rgba(255,255,255,.5). url('//source.unsplash.com/random') also works"
},
{
"type": "string",
"id": "btnBorderRadius",
"label": "Rounded corner radius",
"default": "4px",
"description": "Border radius for all keys. INCLUDE UNIT. Example: 4px, 50% (round)"
},
{
"type": "string",
"id": "text_btnClear",
"label": "Clear Button",
"default": "x",
"description": "Clear button text/character"
},
{
"type": "string",
"id": "keyFontSize",
"label": "Keys Font Size",
"default": "2em",
"description": "Font size - INCLUDE UNIT (px, em, etc.)"
}
]
}