- commit
- d26c63f
- parent
- 912f44f
- author
- Neale Pickett
- date
- 2025-06-29 20:02:16 -0600 MDT
Add propaganda, mention use of AI
7 files changed,
+623,
-65
+13,
-0
1@@ -12,3 +12,16 @@ You need a local copy of the MicroPython kernel.
2 You can get that with
3
4 wget https://micropython.org/resources/firmware/ESP32_GENERIC_C3-20250415-v1.25.0.bin
5+
6+This is built in to the programmer, though.
7+
8+
9+Use of AI
10+========
11+
12+I used Google's Gemini AI for the following purposes:
13+
14+* Initial drafts of documentation (I edited everything afterwards)
15+* Construction of the main landing page and the buddy page
16+
17+All code, and the programmer web app, was created solely by me.
+1,
-5
1@@ -23,11 +23,7 @@ Access the Betsy Button Programmer Interface
2 The programmer interface is a web application.
3
4 1. Open your web browser and navigate to
5- <https://woozle.org/betsy/>
6-
7- Be sure to include the
8- `/`
9- at the end.
10+ <https://woozle.org/betsy/programmer.html>.
11
12 2. You should see the "Betsy Button Programmer" interface.
13
+318,
-0
1@@ -0,0 +1,318 @@
2+<!DOCTYPE html>
3+<html lang="en">
4+<head>
5+ <meta charset="UTF-8">
6+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7+ <title>Betsy Button Buddy Hub</title>
8+ <script src="https://cdn.tailwindcss.com"></script>
9+ <link rel="preconnect" href="https://fonts.googleapis.com">
10+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
12+ <!-- Chosen Palette: "Calm Neutrals" - A calming and supportive palette using beige, warm grays, soft green for success, amber for alerts, and a gentle red for action-needed states. The goal is a professional, clean, and reassuring feel. -->
13+ <!-- Application Structure Plan: A task-oriented tabbed interface. This structure separates the one-time "Setup & Intro" task from the ongoing reference materials ("LED Guide", "FAQ"). This is more user-friendly than a linear document, as it allows the Buddy to quickly access the information they need for a specific situation. The LED Guide cleverly combines the meaning of each color with the corresponding action plan, making it a powerful, all-in-one troubleshooting tool. -->
14+ <!-- Visualization & Content Choices:
15+ - Report Info: Part 1 (Introducing the Button) -> Goal: Guide the Buddy through the introduction process -> Viz/Presentation Method: Interactive Checklist -> Interaction: Clicking an item marks it as complete, providing visual feedback of progress -> Justification: Transforms a passive script into an actionable and satisfying task, ensuring all key points are covered. -> Library/Method: Vanilla JS, Tailwind CSS.
16+ - Report Info: Part 2 (LED Colors) & Part 3 (Action Plan) -> Goal: Provide a quick reference for LED states and required actions -> Viz/Presentation Method: An interactive grid of "color cards" linked to a persistent details pane. -> Interaction: Clicking a color card instantly displays its detailed meaning and the corresponding action plan. Subtle animations on the swatches hint at the button's behavior. -> Justification: Combines two related sections of the report into a single, efficient tool. This is faster and more intuitive than cross-referencing different parts of a document. -> Library/Method: Vanilla JS, Tailwind CSS Grid.
17+ - Report Info: Part 4 (FAQ) -> Goal: Provide clear, easily scannable answers to common questions. -> Viz/Presentation Method: Accordion list. -> Interaction: Clicking a question toggles the visibility of its answer. -> Justification: A standard, space-saving UI pattern that prevents information overload. -> Library/Method: HTML <details> and <summary> tags, styled with Tailwind CSS.
18+ - Report Info: Part 5 (Disclaimer) -> Goal: Ensure critical safety information is prominent. -> Viz/Presentation Method: A styled callout box. -> Interaction: Static display. -> Justification: Uses visual hierarchy to draw attention to essential information. -> Library/Method: Tailwind CSS.
19+ -->
20+ <!-- CONFIRMATION: NO SVG graphics used. NO Mermaid JS used. -->
21+ <style>
22+ body {
23+ font-family: 'Inter', sans-serif;
24+ }
25+ .tab-active {
26+ border-color: #2563eb;
27+ color: #2563eb;
28+ font-weight: 600;
29+ }
30+ .content-section {
31+ display: none;
32+ }
33+ .content-section.active {
34+ display: block;
35+ }
36+ .checklist-item.completed {
37+ background-color: #eef2ff;
38+ text-decoration: line-through;
39+ color: #6b7280;
40+ }
41+ .checklist-item.completed .checkbox-icon {
42+ background-color: #2563eb;
43+ border-color: #2563eb;
44+ color: white;
45+ }
46+ .led-card.active {
47+ transform: translateY(-4px);
48+ box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
49+ border-color: #2563eb;
50+ }
51+ </style>
52+</head>
53+<body class="bg-gray-50 text-gray-800">
54+
55+ <div class="container mx-auto max-w-5xl p-4 sm:p-6 md:p-8">
56+
57+ <header class="text-center mb-8">
58+ <h1 class="text-3xl sm:text-4xl font-bold text-gray-900">Betsy Button Buddy Hub</h1>
59+ <p class="mt-2 text-lg text-gray-600">Your toolkit for setting up and supporting a Betsy Button user.</p>
60+ </header>
61+
62+ <nav class="mb-8 border-b border-gray-200">
63+ <ul class="flex flex-wrap -mb-px text-sm font-medium text-center" id="main-tabs">
64+ <li class="mr-2">
65+ <button class="inline-block p-4 border-b-2 border-transparent rounded-t-lg hover:text-gray-600 hover:border-gray-300" data-tab="setup">
66+ 🚀 Setup & Intro
67+ </button>
68+ </li>
69+ <li class="mr-2">
70+ <button class="inline-block p-4 border-b-2 border-transparent rounded-t-lg hover:text-gray-600 hover:border-gray-300" data-tab="led-guide">
71+ 💡 LED Guide & Actions
72+ </button>
73+ </li>
74+ <li class="mr-2">
75+ <button class="inline-block p-4 border-b-2 border-transparent rounded-t-lg hover:text-gray-600 hover:border-gray-300" data-tab="faq">
76+ ❓ FAQ
77+ </button>
78+ </li>
79+ </ul>
80+ </nav>
81+
82+ <main id="main-content">
83+ <!-- Setup & Introduction Section -->
84+ <section id="setup" class="content-section">
85+ <div class="bg-white p-6 rounded-lg shadow-sm">
86+ <h2 class="text-2xl font-bold mb-2">Introducing the Button</h2>
87+ <p class="text-gray-600 mb-6">Use this checklist to guide your conversation when introducing the Betsy Button. The goal is to make the user feel comfortable and empowered.</p>
88+ <div id="intro-checklist" class="space-y-3">
89+ <div class="checklist-item flex items-center p-4 border rounded-lg cursor-pointer hover:bg-gray-100 transition" data-checklist-id="1">
90+ <div class="checkbox-icon w-6 h-6 mr-4 border-2 border-gray-300 rounded-md flex items-center justify-center transition">✓</div>
91+ <span class="flex-1 font-medium">Explain the "Why" simply and positively.</span>
92+ </div>
93+ <div class="checklist-item flex items-center p-4 border rounded-lg cursor-pointer hover:bg-gray-100 transition" data-checklist-id="2">
94+ <div class="checkbox-icon w-6 h-6 mr-4 border-2 border-gray-300 rounded-md flex items-center justify-center transition">✓</div>
95+ <span class="flex-1 font-medium">Show them how to plug it in and press it.</span>
96+ </div>
97+ <div class="checklist-item flex items-center p-4 border rounded-lg cursor-pointer hover:bg-gray-100 transition" data-checklist-id="3">
98+ <div class="checkbox-icon w-6 h-6 mr-4 border-2 border-gray-300 rounded-md flex items-center justify-center transition">✓</div>
99+ <span class="flex-1 font-medium">Let them press the button themselves.</span>
100+ </div>
101+ <div class="checklist-item flex items-center p-4 border rounded-lg cursor-pointer hover:bg-gray-100 transition" data-checklist-id="4">
102+ <div class="checkbox-icon w-6 h-6 mr-4 border-2 border-gray-300 rounded-md flex items-center justify-center transition">✓</div>
103+ <span class="flex-1 font-medium">Explain the two main lights: "Green is Go!" and "Red is a Reminder".</span>
104+ </div>
105+ <div class="checklist-item flex items-center p-4 border rounded-lg cursor-pointer hover:bg-gray-100 transition" data-checklist-id="5">
106+ <div class="checkbox-icon w-6 h-6 mr-4 border-2 border-gray-300 rounded-md flex items-center justify-center transition">✓</div>
107+ <span class="flex-1 font-medium">Reassure them: no pressure, and their privacy is protected.</span>
108+ </div>
109+ </div>
110+ </div>
111+ </section>
112+
113+ <!-- LED Guide Section -->
114+ <section id="led-guide" class="content-section">
115+ <div class="bg-white p-6 rounded-lg shadow-sm">
116+ <h2 class="text-2xl font-bold mb-2">LED Guide & Action Plan</h2>
117+ <p class="text-gray-600 mb-6">Click on a color to see what it means and what actions you should take. This is your quick-reference for all button states.</p>
118+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
119+ <div class="md:col-span-1">
120+ <div class="space-y-3" id="led-cards-container">
121+ <!-- LED Cards will be dynamically inserted here -->
122+ </div>
123+ </div>
124+ <div class="md:col-span-2">
125+ <div id="led-details-container" class="bg-indigo-50 p-6 rounded-lg sticky top-8">
126+ <!-- Details will be shown here -->
127+ <div class="text-center text-gray-500">
128+ <p class="font-semibold">Select a color on the left to see details.</p>
129+ </div>
130+ </div>
131+ </div>
132+ </div>
133+ </div>
134+ </section>
135+
136+ <!-- FAQ Section -->
137+ <section id="faq" class="content-section">
138+ <div class="bg-white p-6 rounded-lg shadow-sm">
139+ <h2 class="text-2xl font-bold mb-2">Frequently Asked Questions</h2>
140+ <p class="text-gray-600 mb-6">Here are answers to common questions the user might have. Being prepared with these helps build trust and confidence.</p>
141+ <div class="space-y-4">
142+ <details class="group border-b pb-4">
143+ <summary class="flex justify-between items-center font-medium cursor-pointer list-none">
144+ <span>What if I forget to press it?</span>
145+ <span class="transition group-open:rotate-180">
146+ <span class="text-xl">▾</span>
147+ </span>
148+ </summary>
149+ <p class="text-gray-600 mt-3 group-open:animate-fadeIn">
150+ "No problem at all! The light will just turn red, which is *our* signal to give you a quick call to say hi and make sure everything's okay. It's just a gentle reminder, nothing more."
151+ </p>
152+ </details>
153+ <details class="group border-b pb-4">
154+ <summary class="flex justify-between items-center font-medium cursor-pointer list-none">
155+ <span>What if the light is off?</span>
156+ <span class="transition group-open:rotate-180">
157+ <span class="text-xl">▾</span>
158+ </span>
159+ </summary>
160+ <p class="text-gray-600 mt-3 group-open:animate-fadeIn">
161+ "That usually means it's not plugged in. Can you check the cable? If it's plugged in and still off, then it might need a quick restart by unplugging it for 5 seconds and plugging it back in." (If this doesn't work, explain you'll need to check it.)
162+ </p>
163+ </details>
164+ <details class="group border-b pb-4">
165+ <summary class="flex justify-between items-center font-medium cursor-pointer list-none">
166+ <span>Is this tracking me?</span>
167+ <span class="transition group-open:rotate-180">
168+ <span class="text-xl">▾</span>
169+ </span>
170+ </summary>
171+ <p class="text-gray-600 mt-3 group-open:animate-fadeIn">
172+ "Absolutely not. This button has no idea where you are. It only knows if *it* has been pressed. It's just a simple digital signal, like turning on a light switch."
173+ </p>
174+ </details>
175+ <details class="group border-b pb-4">
176+ <summary class="flex justify-between items-center font-medium cursor-pointer list-none">
177+ <span>What if I press it too much?</span>
178+ <span class="transition group-open:rotate-180">
179+ <span class="text-xl">▾</span>
180+ </span>
181+ </summary>
182+ <p class="text-gray-600 mt-3 group-open:animate-fadeIn">
183+ "You can't! Press it as many times as you like. It will just keep the light green for another 24 hours each time."
184+ </p>
185+ </details>
186+ <details class="group border-b pb-4">
187+ <summary class="flex justify-between items-center font-medium cursor-pointer list-none">
188+ <span>What if my power goes out?</span>
189+ <span class="transition group-open:rotate-180">
190+ <span class="text-xl">▾</span>
191+ </span>
192+ </summary>
193+ <p class="text-gray-600 mt-3 group-open:animate-fadeIn">
194+ "If there's no power, the button can't work. The light will be off. As soon as power comes back, it should reconnect automatically. If the light is still off after power returns, give it a quick restart by unplugging and re-plugging."
195+ </p>
196+ </details>
197+ </div>
198+ </div>
199+ </section>
200+ </main>
201+
202+ <footer class="mt-12">
203+ <div class="bg-yellow-100 border-l-4 border-yellow-500 text-yellow-800 p-4 rounded-r-lg" role="alert">
204+ <h3 class="font-bold text-lg">An Important Note for Betsy Button Buddies</h3>
205+ <p class="mt-2">Remember, the Betsy Button is a valuable tool, but it is **not a substitute for regular human interaction or emergency services.** Trust your gut; if you have any concerns about the user's well-being, regardless of the button's status, always act on those concerns. Maintain communication and ensure you have a clear emergency plan in place.</p>
206+ </div>
207+ </footer>
208+
209+ </div>
210+
211+ <script>
212+ document.addEventListener('DOMContentLoaded', function () {
213+ const tabs = document.querySelectorAll('#main-tabs button');
214+ const contentSections = document.querySelectorAll('.content-section');
215+ const checklistItems = document.querySelectorAll('.checklist-item');
216+
217+ const ledData = [
218+ { id: 'green', title: 'Pulsing Green', status: 'Excellent!', color: '#4ade80', animation: 'animate-pulse', description: 'A recent check-in has been recorded within the last 24 hours. The button is online and communicating.', action: null },
219+ { id: 'red', title: 'Flashing Red', status: 'Action May Be Needed', color: '#f87171', animation: 'animate-pulse', description: 'No check-in has occurred for over 24 hours. This is your primary alert that it\'s time to check in on the user.', action: '1. Give it a little time (optional).<br>2. Make a casual phone call.<br>3. Conduct a well check if concerns remain. Always prioritize safety.' },
220+ { id: 'cyan', title: 'Flashing Cyan', status: 'Connectivity Issue', color: '#22d3ee', animation: '', description: 'The button is trying to connect to its Wi-Fi network. This can happen on power-up or if the connection is lost. The button is not communicating check-ins.', action: '1. Call the user and explain the technical hiccup.<br>2. If it persists, arrange for physical inspection to check Wi-Fi settings or reprogram.' },
221+ { id: 'combo', title: 'Quick Green, then Cyan', status: 'Check-in Attempt', color: '#6ee7b7', animation: '', description: 'The button user just pressed it, and it\'s trying to send the check-in signal to the server. This is normal behavior.', action: null },
222+ { id: 'yellow', title: 'Flashing Yellow/Black', status: 'Starting Up / Error', color: '#facc15', animation: '', description: 'The button is booting and loading its configuration. This is normal for a few seconds. If it stays this way, it may have lost its configuration.', action: '1. Call the user to check.<br>2. If it persists, arrange for physical inspection and reprogramming.' },
223+ { id: 'cycle', title: 'Cycling Colors', status: 'Communication Error', color: 'linear-gradient(90deg, #f87171, #facc15, #22d3ee)', animation: '', description: 'The button is experiencing a server or advanced Wi-Fi issue. It is not communicating check-ins.', action: '1. Call the user and suggest restarting the button (unplug/replug).<br>2. If it persists, arrange for physical inspection.' },
224+ { id: 'white', title: 'Dim White', status: 'System Offline', color: '#e5e7eb', animation: '', description: 'The button\'s main program has stopped. It is not communicating check-ins.', action: '1. Call the user and suggest restarting the button (unplug/replug).<br>2. This state almost always requires reprogramming.' },
225+ { id: 'off', title: 'Light Off', status: 'No Power / Major Issue', color: '#6b7280', animation: '', description: 'The button is either not receiving power or has a significant internal fault. It cannot communicate.', action: '1. Call the user and ask them to check the power cable.<br>2. Suggest restarting the button (unplug/replug).<br>3. If it remains off, arrange for physical inspection.' },
226+ ];
227+ const ledCardsContainer = document.getElementById('led-cards-container');
228+ const ledDetailsContainer = document.getElementById('led-details-container');
229+
230+ function switchTab(tabButton) {
231+ tabs.forEach(t => t.classList.remove('tab-active'));
232+ contentSections.forEach(s => s.classList.remove('active'));
233+
234+ tabButton.classList.add('tab-active');
235+ const contentId = tabButton.dataset.tab;
236+ document.getElementById(contentId).classList.add('active');
237+ }
238+
239+ tabs.forEach(tab => {
240+ tab.addEventListener('click', () => switchTab(tab));
241+ });
242+
243+ switchTab(tabs[0]);
244+
245+ checklistItems.forEach(item => {
246+ item.addEventListener('click', () => {
247+ item.classList.toggle('completed');
248+ });
249+ });
250+
251+ function renderLedCards() {
252+ ledCardsContainer.innerHTML = '';
253+ ledData.forEach(led => {
254+ const card = document.createElement('div');
255+ card.className = `led-card p-4 border-2 rounded-lg cursor-pointer hover:bg-gray-100 transition-transform transform hover:-translate-y-1`;
256+ card.dataset.ledId = led.id;
257+
258+ let colorSwatchStyle = led.color.startsWith('linear-gradient') ? `background: ${led.color};` : `background-color: ${led.color};`;
259+
260+ card.innerHTML = `
261+ <div class="flex items-center">
262+ <div class="w-6 h-6 rounded-full mr-4 ${led.animation}" style="${colorSwatchStyle}"></div>
263+ <div class="flex-1">
264+ <p class="font-bold text-gray-900">${led.title}</p>
265+ <p class="text-sm font-medium text-gray-500">${led.status}</p>
266+ </div>
267+ </div>
268+ `;
269+ ledCardsContainer.appendChild(card);
270+ });
271+
272+ document.querySelectorAll('.led-card').forEach(card => {
273+ card.addEventListener('click', () => showLedDetails(card.dataset.ledId));
274+ });
275+ }
276+
277+ function showLedDetails(ledId) {
278+ document.querySelectorAll('.led-card').forEach(c => c.classList.remove('active'));
279+ document.querySelector(`.led-card[data-led-id="${ledId}"]`).classList.add('active');
280+
281+ const led = ledData.find(l => l.id === ledId);
282+ let colorSwatchStyle = led.color.startsWith('linear-gradient') ? `background: ${led.color};` : `background-color: ${led.color};`;
283+
284+ let actionHtml = '';
285+ if(led.action) {
286+ actionHtml = `
287+ <h4 class="font-bold text-lg text-gray-900 mt-4">Your Action Plan</h4>
288+ <div class="prose prose-sm text-gray-700 mt-2">
289+ <p>${led.action}</p>
290+ </div>
291+ `;
292+ } else {
293+ actionHtml = `
294+ <h4 class="font-bold text-lg text-gray-900 mt-4">Your Action Plan</h4>
295+ <p class="text-gray-700 mt-2">No action needed. This is normal operation.</p>
296+ `;
297+ }
298+
299+ ledDetailsContainer.innerHTML = `
300+ <div class="flex items-center mb-4">
301+ <div class="w-8 h-8 rounded-full mr-4 ${led.animation}" style="${colorSwatchStyle}"></div>
302+ <div>
303+ <h3 class="text-xl font-bold text-gray-900">${led.title}</h3>
304+ <p class="font-semibold text-indigo-600">${led.status}</p>
305+ </div>
306+ </div>
307+ <div>
308+ <h4 class="font-bold text-lg text-gray-900">What It Means</h4>
309+ <p class="text-gray-700 mt-2">${led.description}</p>
310+ </div>
311+ ${actionHtml}
312+ `;
313+ }
314+
315+ renderLedCards();
316+ });
317+ </script>
318+</body>
319+</html>
+234,
-60
1@@ -1,63 +1,237 @@
2 <!DOCTYPE html>
3-<html>
4- <head>
5- <title>Betsy Button Programmer</title>
6- <meta charset="utf-8">
7- <meta name="viewport" content="width=device-width">
8- <link rel="stylesheet" href="index.css">
9- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/xterm@5.3.0/css/xterm.min.css">
10- <script src="index.mjs" type="module"></script>
11- </head>
12- <body>
13- <h1>Betsy Button Programmer</h1>
14- <div class="settings">
15- <fieldset>
16- <legend>Board Actions</legend>
17- <button id="bootstrap" class="serial" disabled>Bootstrap</button>
18- <button id="connect" class="serial" disabled>Connect</button>
19- <button id="program" class="serial" disabled>Program</button>
20- </fieldset>
21- <fieldset>
22- <legend>Wireless Networks</legend>
23- <div class="network">
24- <input name="ssid" placeholder="ssid" required>
25- <input name="psk" placeholder="password" required>
26- </div>
27- <div class="network">
28- <input name="ssid" placeholder="ssid">
29- <input name="psk" placeholder="password">
30- </div>
31- <div class="network">
32- <input name="ssid" placeholder="ssid">
33- <input name="psk" placeholder="password">
34- </div>
35- <div class="network">
36- <input name="ssid" placeholder="ssid">
37- <input name="psk" placeholder="password">
38- </div>
39- </fieldset>
40- <fieldset>
41- <legend>Button Group</legend>
42- <input name="id" placeholder="identifier" maxlength="40" required>
43- <p>
44- I recommend using the phone number of the person who's supposed to press the button,
45- in the format <samp>xxx-xxx-xxxx</samp>.
46- </p>
47- </fieldset>
48- <ul>
49- <li><a href="programming.pdf">programming instructions</a></li>
50- <li><a href="buddy-guide.pdf">buddy guide</a></li>
51- <li><a href="assembly.pdf">assembly instructions</a></li>
52- <li><a href="manual.pdf">user manual</a></li>
53- </ul>
54+<html lang="en">
55+<head>
56+ <meta charset="UTF-8">
57+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
58+ <title>Betsy Button: Stay Connected, Simply.</title>
59+ <script src="https://cdn.tailwindcss.com"></script>
60+ <link rel="preconnect" href="https://fonts.googleapis.com">
61+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
62+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
63+ <!-- Chosen Palette: "Calm Neutrals" - A palette grounded in warm neutrals (bg-gray-50, bg-white, text-gray-800) with a soft blue/purple accent (text-indigo-600, border-indigo-400) for links and highlights. The goal is a professional, clean, and reassuring feel that supports the theme of connection and well-being. -->
64+ <!-- Application Structure Plan: A linear, scrolling single-page layout divided into thematic sections: Introduction (hero), Why Use It, How It Works (with diagram), Use Cases, and Resources. This structure provides a clear narrative flow for new users, guiding them from understanding the core concept to exploring its applications and finding related tools. Each section is distinct but visually harmonious, allowing for easy scanning and progressive information disclosure as the user scrolls. -->
65+ <!-- Visualization & Content Choices:
66+ - Report Info: Main concept of Betsy Button (from README/manual) -> Goal: Hook user, explain core value -> Viz/Presentation Method: Hero section with concise, benefit-driven text. Justification: A strong opening is crucial for engagement.
67+ - Report Info: Benefits/Purpose (derived from manual) -> Goal: Persuade user of value, address core need -> Viz/Presentation Method: Clear, digestible text blocks with headings and simple paragraphs. Justification: Direct answers to "why" questions.
68+ - Report Info: Use Cases (derived from manual's spirit) -> Goal: Inspire users with practical, relatable applications -> Viz/Presentation Method: Short descriptive text blocks per use case, implying real-world scenarios. Justification: Concrete examples make the abstract concept tangible.
69+ - Report Info: Button-Server interaction (derived from main.py, betsyd.go, README) -> Goal: Explain underlying mechanism simply, demystify the tech -> Viz/Presentation Method: Custom HTML/CSS diagram using flexbox, pseudo-elements for arrows, and Unicode characters for icons/nodes. No Chart.js/Plotly needed for this diagram as it's purely conceptual flow. Justification: Visually simplifies complex data flow into an easy-to-understand process for non-technical users, adhering to the "no SVG/Mermaid" rule while still providing impact. Responsive design ensures it works on all devices.
70+ - Report Info: Links to other tools (programmer, buddy hub, source) -> Goal: Provide clear access points to further resources -> Viz/Presentation Method: Prominent, styled navigation links within a dedicated "Resources" section. Justification: Guides users to next steps based on their needs (program, monitor, develop).
71+ -->
72+ <!-- CONFIRMATION: NO SVG graphics used. NO Mermaid JS used. -->
73+ <style>
74+ body {
75+ font-family: 'Inter', sans-serif;
76+ }
77+ .diagram-node {
78+ background-color: white;
79+ border-radius: 0.75rem; /* rounded-xl */
80+ padding: 1.5rem; /* p-6 */
81+ box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); /* shadow-md */
82+ text-align: center;
83+ position: relative;
84+ z-index: 10; /* Ensure nodes are above lines */
85+ flex-shrink: 0; /* Prevent shrinking in flex container */
86+ min-width: 120px; /* Ensure minimum width for nodes */
87+ max-width: 200px; /* Max width to keep nodes from getting too wide */
88+ flex-grow: 1; /* Allow nodes to grow */
89+ display: flex;
90+ flex-direction: column;
91+ align-items: center;
92+ justify-content: center;
93+ }
94+ .diagram-flow {
95+ display: flex;
96+ flex-direction: row; /* Default horizontal */
97+ align-items: center;
98+ }
99+ .diagram-arrow {
100+ flex-grow: 1; /* Allows arrow lines to stretch */
101+ height: 2px;
102+ background-color: #a78bfa; /* indigo-400 */
103+ position: relative;
104+ margin: 0 -0.5rem; /* Overlap with node padding for continuous line */
105+ }
106+ .diagram-arrow::after {
107+ content: '▶'; /* Unicode right arrow for visual direction */
108+ background-color: transparent;
109+ position: absolute;
110+ right: -0.5rem;
111+ transform: translateY(-50%);
112+ color: #a78bfa; /* indigo-400 */
113+ font-size: 1.25rem; /* text-xl */
114+ padding-left: 2px;
115+ }
116+ .diagram-arrow:last-child {
117+ display: block; /* Ensure last arrow is visible by default (horizontal flow) */
118+ }
119+
120+ /* Responsive adjustments for diagram nodes and arrows */
121+ @media (max-width: 1023px) { /* Changed breakpoint to lg (1023px is just before lg) */
122+ .diagram-flow {
123+ flex-direction: column;
124+ align-items: center;
125+ }
126+ .diagram-node {
127+ margin-bottom: 2rem; /* Space between vertical nodes */
128+ max-width: 80%; /* Wider nodes on small screens */
129+ }
130+ .diagram-arrow {
131+ width: 2px; /* Vertical line */
132+ height: 6rem; /* Length of vertical line for more space */
133+ margin: -0.5rem 0; /* Overlap for vertical continuity */
134+ }
135+ .diagram-arrow::after {
136+ content: '▼'; /* Unicode down arrow */
137+ right: auto;
138+ left: 50%;
139+ top: auto;
140+ bottom: -0.75rem; /* Adjusted position for larger arrow and more space */
141+ transform: translateX(-50%);
142+ font-size: 1.5rem; /* Slightly larger arrow for better visibility */
143+ padding-top: 2px; /* Small padding above arrow for visual separation */
144+ }
145+ .diagram-arrow:last-child {
146+ display: none; /* Hide last arrow in vertical flow */
147+ }
148+ }
149+ </style>
150+</head>
151+<body class="bg-gray-50 text-gray-800">
152+
153+ <div class="container mx-auto px-4 py-8 sm:px-6 md:px-8 max-w-6xl">
154+
155+ <!-- Hero Section -->
156+ <section class="text-center py-16 bg-gradient-to-br from-indigo-50 to-purple-50 rounded-lg shadow-lg mb-12">
157+ <h1 class="text-4xl sm:text-5xl font-extrabold text-indigo-800 leading-tight">
158+ Betsy Button: Stay Connected, Simply.
159+ </h1>
160+ <p class="mt-4 text-xl text-indigo-700 max-w-3xl mx-auto">
161+ A revolutionary way to keep in touch and ensure well-being with just one touch.
162+ </p>
163+ <div class="mt-8">
164+ <a href="#learn-more" class="inline-block bg-indigo-600 text-white font-bold py-3 px-8 rounded-full shadow-lg hover:bg-indigo-700 transition duration-300 transform hover:scale-105">
165+ Learn More
166+ </a>
167+ </div>
168+ </section>
169+
170+ <!-- Why Betsy Button Section -->
171+ <section id="learn-more" class="py-12 mb-12">
172+ <h2 class="text-3xl font-bold text-gray-900 text-center mb-8">Why the Betsy Button?</h2>
173+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
174+ <div class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition">
175+ <h3 class="text-xl font-semibold text-indigo-700 mb-3">Peace of Mind</h3>
176+ <p class="text-gray-600">Know that your loved ones are okay with a simple daily check-in, reducing worry and constant phone calls.</p>
177+ </div>
178+ <div class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition">
179+ <h3 class="text-xl font-semibold text-indigo-700 mb-3">Effortless Connection</h3>
180+ <p class="text-gray-600">No smartphones, no apps, no complex setup. Just a single button press makes the connection.</p>
181+ </div>
182+ <div class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition">
183+ <h3 class="text-xl font-semibold text-indigo-700 mb-3">Non-Intrusive Support</h3>
184+ <p class="text-gray-600">It empowers users to check in on their terms, maintaining independence while providing reassurance to family and friends.</p>
185+ </div>
186+ </div>
187+ </section>
188+
189+ <!-- How It Works Section -->
190+ <section id="how-it-works" class="py-12 mb-12 bg-gray-100 rounded-lg shadow-md">
191+ <h2 class="text-3xl font-bold text-gray-900 text-center mb-8">How It Works: A Simple Flow</h2>
192+ <p class="text-gray-600 text-center max-w-2xl mx-auto mb-8">
193+ The Betsy Button operates on a straightforward principle: a button press sends a signal to a central server, which then updates the status for all buttons in that group. This allows everyone connected to see the latest check-in.
194+ </p>
195+
196+ <div class="diagram-flow gap-x-8 gap-y-4 px-4">
197+ <!-- Node 1: User & Button -->
198+ <div class="diagram-node">
199+ <span class="text-4xl mb-2">👤</span>
200+ <span class="text-2xl mb-2">🔘</span>
201+ <p class="font-bold text-indigo-700">User & Betsy Button</p>
202+ <p class="text-sm text-gray-500">The button is pressed.</p>
203+ </div>
204+
205+ <!-- Arrow 1 -->
206+ <div class="diagram-arrow"></div>
207+
208+ <!-- Node 3: Betsy Button Server -->
209+ <div class="diagram-node">
210+ <span class="text-4xl mb-2">☁️</span>
211+ <p class="font-bold text-indigo-700">Betsy Button Server</p>
212+ <p class="text-sm text-gray-500">Records check-in time for the group.</p>
213+ </div>
214+
215+ <!-- Arrow 3 -->
216+ <div class="diagram-arrow"></div>
217+
218+ <div class="diagram-node">
219+ <span class="text-4xl mb-2">🔘</span>
220+ <p class="font-bold text-indigo-700">Other Betsy Buttons in Group</p>
221+ <p class="text-sm text-gray-500">Lights update (green for 24h).</p>
222+ </div>
223+ </div>
224+ </section>
225+
226+ <!-- Use Cases Section -->
227+ <section id="use-cases" class="py-12 mb-12">
228+ <h2 class="text-3xl font-bold text-gray-900 text-center mb-8">Who Can Benefit?</h2>
229+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
230+ <div class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition">
231+ <h3 class="text-xl font-semibold text-indigo-700 mb-3">Family Check-ins</h3>
232+ <p class="text-gray-600">Parents, children, or siblings can use buttons in different homes to quietly signal they're okay each day, reducing worry and constant calls.</p>
233+ </div>
234+ <div class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition">
235+ <h3 class="text-xl font-semibold text-indigo-700 mb-3">Elderly Care Support</h3>
236+ <p class="text-gray-600">For an elderly family member living independently, a daily button press offers reassurance to remote caregivers without complex tech.</p>
237+ </div>
238+ <div class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition">
239+ <h3 class="text-xl font-semibold text-indigo-700 mb-3">Caregiver Network Well-being</h3>
240+ <p class="text-gray-600">Concerned parties can monitor the well-being of any caregiver, ensuring their health and capacity are also supported, providing reassurance to all involved.</p>
241+ </div>
242+ <div class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition">
243+ <h3 class="text-xl font-semibold text-indigo-700 mb-3">Small Business Status</h3>
244+ <p class="text-gray-600">A physical button can signal "Open" or "Closed" status to a remote team, or indicate daily operational checks.</p>
245+ </div>
246+ </div>
247+ </section>
248+
249+ <!-- Resources Section -->
250+ <section id="resources" class="py-12 text-center">
251+ <h2 class="text-3xl font-bold text-gray-900 mb-8">Ready to Get Started or Learn More?</h2>
252+
253+ <div class="mb-8">
254+ <h3 class="text-xl font-bold text-gray-700 mb-4">Web Applications</h3>
255+ <div class="flex flex-col sm:flex-row justify-center gap-6">
256+ <a href="programmer.html" class="bg-indigo-500 text-white font-bold py-3 px-6 rounded-full shadow-lg hover:bg-indigo-600 transition duration-300 transform hover:scale-105">
257+ ⚙️ Button Programmer
258+ </a>
259+ <a href="buddy.html" class="bg-purple-500 text-white font-bold py-3 px-6 rounded-full shadow-lg hover:bg-purple-600 transition duration-300 transform hover:scale-105">
260+ 🤝 Betsy Button Buddy Hub
261+ </a>
262+ <a href="https://git.woozle.org/neale/betsy-button/" target="_blank" rel="noopener noreferrer" class="bg-gray-700 text-white font-bold py-3 px-6 rounded-full shadow-lg hover:bg-gray-800 transition duration-300 transform hover:scale-105">
263+ 📖 Source Code Repository
264+ </a>
265+ </div>
266+ </div>
267+
268+ <div>
269+ <h3 class="text-xl font-bold text-gray-700 mb-4">PDF Documentation</h3>
270+ <div class="flex flex-col sm:flex-row justify-center gap-6">
271+ <a href="assembly.pdf" target="_blank" rel="noopener noreferrer" class="bg-blue-500 text-white font-bold py-3 px-6 rounded-full shadow-lg hover:bg-blue-600 transition duration-300 transform hover:scale-105">
272+ 🔧 Assembly Guide
273+ </a>
274+ <a href="programming.pdf" target="_blank" rel="noopener noreferrer" class="bg-blue-500 text-white font-bold py-3 px-6 rounded-full shadow-lg hover:bg-blue-600 transition duration-300 transform hover:scale-105">
275+ 💻 Programming Guide
276+ </a>
277+ <a href="manual.pdf" target="_blank" rel="noopener noreferrer" class="bg-blue-500 text-white font-bold py-3 px-6 rounded-full shadow-lg hover:bg-blue-600 transition duration-300 transform hover:scale-105">
278+ 📖 User Manual
279+ </a>
280+ <a href="buddy-guide.pdf" target="_blank" rel="noopener noreferrer" class="bg-blue-500 text-white font-bold py-3 px-6 rounded-full shadow-lg hover:bg-blue-600 transition duration-300 transform hover:scale-105">
281+ 🧑🤝🧑 Buddy Guide
282+ </a>
283+ </div>
284+ </div>
285+ </section>
286 </div>
287- <div id="terminal"></div>
288- <footer>
289- © 2025 <a href="https://woozle.org/">Neale Pickett</a>
290- |
291- <a href="https://git.woozle.org/neale/betsy-button/COPYING.md">MIT License</a>
292- |
293- <a href="https://git.woozle.org/neale/betsy/button/">Source Code</a>
294- </footer>
295- </body>
296+
297+</body>
298 </html>
R web/index.css =>
web/programmer.css
+0,
-0
+57,
-0
1@@ -0,0 +1,57 @@
2+<!DOCTYPE html>
3+<html>
4+ <head>
5+ <title>Betsy Button Programmer</title>
6+ <meta charset="utf-8">
7+ <meta name="viewport" content="width=device-width">
8+ <link rel="stylesheet" href="programmer.css">
9+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/xterm@5.3.0/css/xterm.min.css">
10+ <script src="programmer.mjs" type="module"></script>
11+ </head>
12+ <body>
13+ <h1>Betsy Button Programmer</h1>
14+ <div class="settings">
15+ <fieldset>
16+ <legend>Board Actions</legend>
17+ <button id="bootstrap" class="serial" disabled>Bootstrap</button>
18+ <button id="connect" class="serial" disabled>Connect</button>
19+ <button id="program" class="serial" disabled>Program</button>
20+ </fieldset>
21+ <fieldset>
22+ <legend>Wireless Networks</legend>
23+ <div class="network">
24+ <input name="ssid" placeholder="ssid" required>
25+ <input name="psk" placeholder="password" required>
26+ </div>
27+ <div class="network">
28+ <input name="ssid" placeholder="ssid">
29+ <input name="psk" placeholder="password">
30+ </div>
31+ <div class="network">
32+ <input name="ssid" placeholder="ssid">
33+ <input name="psk" placeholder="password">
34+ </div>
35+ <div class="network">
36+ <input name="ssid" placeholder="ssid">
37+ <input name="psk" placeholder="password">
38+ </div>
39+ </fieldset>
40+ <fieldset>
41+ <legend>Button Group</legend>
42+ <input name="id" placeholder="identifier" maxlength="40" required>
43+ <p>
44+ I recommend using the phone number of the person who's supposed to press the button,
45+ in the format <samp>xxx-xxx-xxxx</samp>.
46+ </p>
47+ </fieldset>
48+ </div>
49+ <div id="terminal"></div>
50+ <footer>
51+ © 2025 <a href="https://woozle.org/">Neale Pickett</a>
52+ |
53+ <a href="https://git.woozle.org/neale/betsy-button/COPYING.md">MIT License</a>
54+ |
55+ <a href="https://git.woozle.org/neale/betsy/button/">Source Code</a>
56+ </footer>
57+ </body>
58+</html>
R web/index.mjs =>
web/programmer.mjs
+0,
-0