1+ <!DOCTYPE html>
2+ < html lang ="en ">
3+ < head >
4+ < meta charset ="UTF-8 ">
5+ < meta name ="viewport " content ="width=device-width, initial-scale=1.0 ">
6+ < title > Conditional Gates - Smart (Components) Toolkit for Homey</ title >
7+ < script src ="https://cdn.tailwindcss.com "> </ script >
8+ < style >
9+ @import url ('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap' );
10+ body {
11+ font-family : 'Inter' , sans-serif;
12+ background-color : # f8fafc ;
13+ color : # 1a202c ;
14+ }
15+ code {
16+ background : # f1f5f9 ;
17+ padding : 0.2rem 0.4rem ;
18+ border-radius : 0.25rem ;
19+ font-size : 0.9em ;
20+ color : # 1e293b ;
21+ }
22+ pre {
23+ background : # f1f5f9 ;
24+ border : 1px solid # e2e8f0 ;
25+ padding : 1rem ;
26+ border-radius : 0.5rem ;
27+ overflow-x : auto;
28+ color : # 1e293b ;
29+ }
30+ </ style >
31+ </ head >
32+ < body class ="min-h-screen flex flex-col ">
33+ < nav class ="bg-white shadow-sm border-b border-gray-200 sticky top-0 z-50 ">
34+ < div class ="container mx-auto px-4 py-3 ">
35+ < div class ="flex justify-between items-center ">
36+ < a href ="../README.md " class ="text-xl font-bold text-purple-600 hover:text-purple-800 "> Smart (Components) Toolkit</ a >
37+ < div class ="space-x-4 text-sm ">
38+ < a href ="getting-started.html " class ="text-gray-600 hover:text-purple-600 "> Getting Started</ a >
39+ < a href ="devices.html " class ="text-gray-600 hover:text-purple-600 "> Devices</ a >
40+ < a href ="conditional-gates.html " class ="text-gray-900 font-semibold "> Conditional Gates</ a >
41+ < a href ="waiter-gates.html " class ="text-gray-600 hover:text-purple-600 "> Waiter Gates</ a >
42+ </ div >
43+ </ div >
44+ </ div >
45+ </ nav >
46+
47+ < div class ="container mx-auto px-4 py-8 max-w-4xl flex-grow ">
48+ < div class ="mb-6 ">
49+ < h1 class ="text-4xl font-bold mb-2 text-gray-900 "> Conditional Gates</ h1 >
50+ < p class ="text-gray-600 "> Virtual "circuit breakers" for your flows that act as advanced latches.</ p >
51+ </ div >
52+
53+ <!-- Introduction -->
54+ < section class ="mb-8 ">
55+ < h2 class ="text-2xl font-semibold mb-4 text-purple-600 "> What are Conditional Gates?</ h2 >
56+ < p class ="mb-4 text-gray-700 "> Conditional Gates are virtual logic gates (Go / No Go circuits) that exist purely in memory. They allow you to pause flows until a specific "Gate" is opened (set to GO).</ p >
57+ < p class ="mb-4 text-gray-700 "> Think of them as a traffic light for your flows:</ p >
58+ < ul class ="list-disc ml-6 space-y-2 text-gray-700 ">
59+ < li > < strong > GO (Open):</ strong > Flows continue immediately.</ li >
60+ < li > < strong > NO GO (Closed):</ strong > Flows wait (pause) until the gate opens or the timeout expires.</ li >
61+ </ ul >
62+ </ section >
63+
64+ <!-- Flow Cards -->
65+ < section class ="mb-8 ">
66+ < h2 class ="text-2xl font-semibold mb-4 text-purple-600 "> Flow Cards</ h2 >
67+
68+ < div class ="space-y-6 ">
69+ <!-- Start Card -->
70+ < div class ="bg-white rounded-lg p-6 border border-gray-200 shadow-sm ">
71+ < h3 class ="text-xl font-semibold mb-2 text-green-600 "> Conditional Gate (Wait for GO)</ h3 >
72+ < p class ="text-sm text-gray-500 mb-3 "> Type: < span class ="bg-blue-100 text-blue-800 px-2 py-1 rounded text-xs font-semibold "> CONDITION</ span > </ p >
73+ < p class ="mb-4 text-gray-700 "> Pauses the flow until the specified gate becomes < strong > GO</ strong > .</ p >
74+
75+ < h4 class ="font-semibold mb-2 text-gray-900 "> Parameters:</ h4 >
76+ < ul class ="space-y-2 text-sm text-gray-600 mb-4 ">
77+ < li > < strong > Default State:</ strong > The initial state if this gate hasn't been used before (usually NO GO).</ li >
78+ < li > < strong > Timeout:</ strong > How long to wait for the gate to open. (Set to 0 for instant check without waiting).</ li >
79+ < li > < strong > Gate Name / ID:</ strong > The unique name of your circuit (e.g., "KitchenMode", "NightLatch").</ li >
80+ </ ul >
81+
82+ < div class ="bg-blue-50 p-4 rounded text-sm text-blue-800 ">
83+ < strong > Note:</ strong > Gates persist in memory! If you set "Default: GO", the gate will remain GO until you explicitly close it using the Modify card. The "Default" setting only applies the very first time the gate is created.
84+ </ div >
85+ </ div >
86+
87+ <!-- Modify Card -->
88+ < div class ="bg-white rounded-lg p-6 border border-gray-200 shadow-sm ">
89+ < h3 class ="text-xl font-semibold mb-2 text-blue-600 "> Modify Conditional Gate</ h3 >
90+ < p class ="text-sm text-gray-500 mb-3 "> Type: < span class ="bg-green-100 text-green-800 px-2 py-1 rounded text-xs font-semibold "> ACTION</ span > </ p >
91+ < p class ="mb-4 text-gray-700 "> Changes the state of a gate (Open/Close) or updates the timeout of active waiters.</ p >
92+
93+ < h4 class ="font-semibold mb-2 text-gray-900 "> Parameters:</ h4 >
94+ < ul class ="space-y-2 text-sm text-gray-600 mb-4 ">
95+ < li > < strong > Gate Name / ID:</ strong > Select the gate to modify.</ li >
96+ < li > < strong > New State:</ strong > Set to GO (releases waiting flows), NO GO (stops future flows), or Toggle.</ li >
97+ < li > < strong > New Timeout:</ strong > Update the timeout for currently waiting flows. Set to -1 to leave unchanged.</ li >
98+ </ ul >
99+ </ div >
100+ </ div >
101+ </ section >
102+
103+ <!-- Examples -->
104+ < section class ="mb-8 ">
105+ < h2 class ="text-2xl font-semibold mb-4 text-purple-600 "> Examples</ h2 >
106+
107+ <!-- Example 1 -->
108+ < div class ="bg-white rounded-lg p-6 border border-gray-200 shadow-sm mb-6 ">
109+ < h3 class ="text-lg font-semibold mb-3 text-purple-600 "> 1. Manual Approval (The "Ask Permission" Flow)</ h3 >
110+ < p class ="mb-3 text-gray-700 "> Trigger a flow, but wait for manual confirmation (e.g., via a button or app) before proceeding.</ p >
111+
112+ < div class ="mb-4 ">
113+ < h4 class ="font-semibold text-gray-900 mb-2 "> Flow 1: The Request</ h4 >
114+ < pre class ="text-sm "> < code > WHEN: Washing Machine finished
115+ AND: Conditional Gate "EmptyWasher" (Default: NO GO, Timeout: 1 hour)
116+ THEN: Send push notification "Washer emptied!"</ code > </ pre >
117+ </ div >
118+
119+ < div >
120+ < h4 class ="font-semibold text-gray-900 mb-2 "> Flow 2: The Approval</ h4 >
121+ < pre class ="text-sm "> < code > WHEN: Virtual Button "Washer Emptied" pressed
122+ THEN: Modify Conditional Gate "EmptyWasher" -> Set to GO
123+ THEN: Modify Conditional Gate "EmptyWasher" -> Set to NO GO (Reset for next time)</ code > </ pre >
124+ </ div >
125+ </ div >
126+
127+ <!-- Example 2 -->
128+ < div class ="bg-white rounded-lg p-6 border border-gray-200 shadow-sm ">
129+ < h3 class ="text-lg font-semibold mb-3 text-purple-600 "> 2. "Latch" Logic</ h3 >
130+ < p class ="mb-3 text-gray-700 "> Prevent a flow from running until a specific condition (Latch) is set, and queue up requests.</ p >
131+ < pre class ="text-sm "> < code > WHEN: Motion Detected
132+ AND: Conditional Gate "NightModeLatch" (Default: NO GO, Timeout: 0)
133+ THEN: Turn on hallway lights dimly</ code > </ pre >
134+ < p class ="text-sm text-gray-600 mt-2 "> Here, Timeout 0 acts as a filter. If "NightModeLatch" is NO GO, the flow stops immediately. If it is GO, lights turn on.</ p >
135+ </ div >
136+ </ section >
137+
138+ </ div >
139+
140+ < footer class ="bg-white border-t border-gray-200 mt-12 py-6 text-center text-gray-600 ">
141+ < p > Smart (Components) Toolkit for Homey | < a href ="https://github.com/Tiwas/SmartComponentsToolkit " class ="text-purple-600 hover:text-purple-300 "> GitHub</ a > </ p >
142+ </ footer >
143+ </ body >
144+ </ html >
0 commit comments