diff --git a/blinkywww/.gitignore b/blinkywww/.gitignore
new file mode 100644
index 0000000..a41aa66
--- /dev/null
+++ b/blinkywww/.gitignore
@@ -0,0 +1,6 @@
+# Playwright
+node_modules/
+test-results/
+playwright-report/
+blob-report/
+playwright/.cache/
diff --git a/blinkywww/README b/blinkywww/README
index 1dbc8c5..187db50 100644
--- a/blinkywww/README
+++ b/blinkywww/README
@@ -1,5 +1,32 @@
This is the code that runs the Blinky Programmer website:
http://www.wayneandlayne.com/blinky_programmer/
-Sorry that the code is probably really awkward or doing lots of things wrong. We're not really web developers, and only know enough to get by (also known as "knowing just enough to be dangerous").
+We wrote this code circa 2010? It could use some love.
+# Development
+
+Try `npm install` to install the dependencies. If you don't have npm installed, you can try that.
+
+`npm install`
+
+You can serve the site locally with `npm run start` which starts a local web server at http://localhost:3000.
+
+## Testing
+
+We use Playwright. You can run `npm run test` but you can also use `npx playwright test` to run the tests directly.
+
+# TODO (before merging this in)
+
+* Flexbox for the layout
+* Remove all floats
+* Test on small screens
+* Try requestAnimationFrame instead of setTimeout
+* Adjust text, visual design
+* Maybe pull the images for LED and use background color on round divs instead?
+* Add more pixel mode tests
+ * multiple messages
+ * mixed pixel and text messages
+ * all the pixel options
+ * delete some lines, add some lines
+ * make sure the clicked pixels are "on" and the others are off
+* Test on a real Blinky
diff --git a/blinkywww/index.php b/blinkywww/index.php
deleted file mode 100644
index 84774d0..0000000
--- a/blinkywww/index.php
+++ /dev/null
@@ -1,534 +0,0 @@
-
-
-
-
-
- Type:
- Style:
- End behavior: Stop Repeat this message Advance to next message Easter egg... Delay: 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 Message:
-
-
- Click to set LEDs. Click X to remove column.
-
-
-
-
-";
-
-$token = strtok($new_div_raw, "\n");
-$new_div = "";
-while ($token != false)
-{
- $new_div .= $token;
- $token = strtok("\n");
-}
-
-$led_line = "";
-for ($i = 0; $i < 8; $i++)
- $led_line .= "Blinky POV and Blinky GRID Programming
-Blinky POV and Blinky GRID Programming
-This webpage will let you design and upload new messages to your Blinky POV or Blinky GRID kit. First, you should create one or more messages in the first section below. Once your messages are prepared, section 2 below will let you transmit the new message(s) to your Blinky kit.
-
-
Internet Explorer users: The blinky programming website doesn't work with IE, so you need to use another browser. We've had great luck with Firefox and Chrome, along with the Android and iOS browsers. Sorry for the inconvenience!
-
1. Create Messages
-You can store multiple messages on your Blinky kit. Messages can be either text-based or pixel-based. Font-based messages take up much less memory than pixel-based messages. Marquee/Animation only matters on Blinky GRID. For delay, 0 is the fastest value and 15 is the slowest value. Drag the arrow icons to reorder your messages. Use the garbage can to remove a message.
-
-
-2. Programming
-Enter programming mode: Hold down the button while turning on the power switch. Release the button. Hold the Blinky up to the screen. Be sure to align the sensors correctly: The sensor labeled C points to clock, and D points to data. Press and release the button when you're ready to begin transmission. Press the Go button to start.
-Check out this awesome animated guide to programming!
-Please note! On 2011/09/10 we switched the locations of the clock and data squares below to make it easier to hold the Blinky device while programming, based on customer feed back we have received over the past few months. This requires no change in the Blinky firmware, only a change in how you align the sensors on the screen. Please let us know if this change is a dealbreaker.
-
-
-
-
-
Progress:
-
-
-
-
-
-
3. Troubleshooting
-For the delay value, smaller values equal quicker data transmissions, but too small/fast might cause errors! The smallest reliable value depends on your monitor, browser, and computer graphics hardware. Start with a value of 40, and make sure it can reliably transfer your messages. You can then gradually reduce the delay time until you start having invalid transmissions, indicated by alternating flashing of the third and fourth LEDs on your Blinky board. We've have good luck with values of 25-40 on various systems we've tested.
-During normal transmission, the second LED will flash once for each byte of data received. When the transmission is finished, the blinky should immediately start displaying your messages. The blinky data is transmitted as a series of one or more records . After each record is transmitted, the blinky will double-check the data to make sure it was properly transmitted (using something called a checksum ). If the checksum is invalid, meaning that there was a data transmission problem, the third and fourth LEDs on the blinky will flash rapidly in an alternating pattern. If this happens, press the Stop button, reset your blinky into the programming (bootloader) mode, and try again. If you continue to experience trouble, try increasing the value in the delay box and set your monitor's brightness to 100%. If nothing works, try the forums .
-
-
-
Debug information: Blinky POV and Blinky GRID Programming
+
+ Blinky POV and Blinky GRID Programming
+ This webpage will let you design and upload new messages to your Blinky POV or Blinky GRID kit. First, you should create one or
+ more messages in the first section below. Once your messages are prepared, section 2 below will let you transmit
+ the new message(s) to your Blinky kit.
+
+
Internet Explorer users: The blinky programming website doesn't work with IE, so you need to
+ use another browser. We've had great luck with Firefox and Chrome, along with the Android and iOS browsers.
+ Sorry for the inconvenience!
+
1. Create Messages
+ You can store multiple messages on your Blinky kit. Messages can be either text-based or pixel-based. Font-based
+ messages take up much less memory than pixel-based messages. Marquee/Animation only matters on Blinky GRID. For
+ delay, 0 is the fastest value and 15 is the slowest value. Drag the arrow icons to reorder your messages. Use
+ the garbage can to remove a message.
+
+
+ 2. Programming
+ Enter programming mode: Hold down the button while turning on the power switch. Release the button. Hold the
+ Blinky up to the screen. Be sure to align the sensors correctly: The sensor labeled C points to clock, and D
+ points to data. Press and release the button when you're ready to begin transmission. Press the Go button to
+ start.
+
+
+ Check out this awesome animated guide to programming!
+
+
+
+
+
+
+ Delay:
+
+
+ Go
+ Stop
+
+
+
+
+
Progress: Ready
+
Transmission progress
+
+
+
+
+
+
3. Troubleshooting
+ For the delay value, smaller values equal quicker data transmissions, but too small/fast might cause errors! The
+ smallest reliable value depends on your monitor, browser, and computer graphics hardware. Start with a value of
+ 40, and make sure it can reliably transfer your messages. You can then gradually reduce the delay time until you
+ start having invalid transmissions, indicated by alternating flashing of the third and fourth LEDs on your
+ Blinky board. We've have good luck with values of 25-40 on various systems we've tested.
+ During normal transmission, the second LED will flash once for each byte of data received. When the transmission
+ is finished, the blinky should immediately start displaying your messages. The blinky data is transmitted as a
+ series of one or more records . After each record is transmitted, the blinky will double-check the data
+ to make sure it was properly transmitted (using something called a checksum ). If the checksum is invalid, meaning that
+ there was a data transmission problem, the third and fourth LEDs on the blinky will flash rapidly in an
+ alternating pattern. If this happens, press the Stop button, reset your blinky into the programming (bootloader)
+ mode, and try again. If you continue to experience trouble, try increasing the value in the delay box and set
+ your monitor's brightness to 100%. If nothing works, try the forums .
+
+ Changelog
+
+
+ 2025/06/??: We updated much of this page. If you preferred the old version, please let us know why!
+
+
+
+ 2011/09/10: We switched the locations of the clock and data squares below to make
+ it easier to hold the Blinky device while programming, based on customer feedback we have received over the
+ past few months. This requires no change in the Blinky firmware, only a change in how you align the sensors on
+ the screen. Please let us know if this change is a problem.
+
+
+
+
+
Debug information:
+
+
diff --git a/blinkywww/led_dark.png b/blinkywww/src/led_dark.png
similarity index 100%
rename from blinkywww/led_dark.png
rename to blinkywww/src/led_dark.png
diff --git a/blinkywww/led_lit.png b/blinkywww/src/led_lit.png
similarity index 100%
rename from blinkywww/led_lit.png
rename to blinkywww/src/led_lit.png
diff --git a/blinkywww/led_x.png b/blinkywww/src/led_x.png
similarity index 100%
rename from blinkywww/led_x.png
rename to blinkywww/src/led_x.png
diff --git a/blinkywww/move.gif b/blinkywww/src/move.gif
similarity index 100%
rename from blinkywww/move.gif
rename to blinkywww/src/move.gif
diff --git a/blinkywww/msg_anim.gif b/blinkywww/src/msg_anim.gif
similarity index 100%
rename from blinkywww/msg_anim.gif
rename to blinkywww/src/msg_anim.gif
diff --git a/blinkywww/msg_marq.gif b/blinkywww/src/msg_marq.gif
similarity index 100%
rename from blinkywww/msg_marq.gif
rename to blinkywww/src/msg_marq.gif
diff --git a/blinkywww/src/style.css b/blinkywww/src/style.css
new file mode 100644
index 0000000..c7dba35
--- /dev/null
+++ b/blinkywww/src/style.css
@@ -0,0 +1,177 @@
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+}
+
+* {
+ margin: 0;
+ font-family: system-ui, sans-serif;
+}
+
+img {
+ max-width: 100%;
+ height: auto;
+ display: block;
+}
+
+a {
+ color: #90CAF9;
+}
+
+.visually-hidden {
+ position: absolute;
+ width: 1px;
+ height: 1px;
+ padding: 0;
+ margin: -1px;
+ overflow: hidden;
+ clip: rect(0, 0, 0, 0);
+ white-space: nowrap;
+ border: 0;
+}
+
+body {
+ line-height: 1.5;
+ min-height: 100vh;
+}
+
+main {
+ max-width: 65ch;
+ margin: auto; /* center */
+ padding: 0 2em;
+}
+
+p, li {
+ text-wrap: pretty;
+ margin-bottom: 1em;
+}
+
+h1, h2, h3, h4, h5, h6 {
+ text-wrap: balance;
+ margin-bottom: 0.5em;
+}
+
+/* Inherit fonts for inputs and buttons */
+input, button,
+textarea, select {
+ font-family: inherit;
+ font-size: inherit;
+}
+
+[id$="_pixel_leds"] {
+ display: grid;
+ grid-auto-flow: column;
+ grid-template-rows: repeat(9, auto);
+ gap: 0;
+ width: fit-content;
+}
+
+[id$="_pixel_leds"] > div {
+ float: none !important;
+ width: auto !important;
+ display: contents;
+}
+
+[id$="_pixel_leds"] img {
+ width: 16px;
+ height: 16px;
+ display: block;
+}
+
+#list {
+ position: relative;
+ border: 1px solid white;
+ width: 575px;
+}
+
+/* Native progress element styling */
+.progress-wrapper {
+ margin-bottom: 10px;
+}
+
+progress {
+ width: 100%;
+ height: 30px;
+}
+
+/* WebKit browsers (Chrome, Safari) */
+progress::-webkit-progress-bar {
+ background-color: #f0f0f0;
+ border: 2px solid white;
+ border-radius: 2px;
+}
+
+progress::-webkit-progress-value {
+ background-color: #4CAF50;
+ border-radius: 0;
+ transition: width 0.3s ease;
+ appearance: none;
+ -webkit-appearance: none;
+}
+
+/* Firefox */
+progress::-moz-progress-bar {
+ background-color: #4CAF50;
+ border-radius: 0;
+ transition: width 0.3s ease;
+}
+
+progress {
+ color: #4CAF50;
+}
+
+.progress-status {
+ padding: 5px 0;
+ font-weight: bold;
+}
+
+ol {
+ list-style: none;
+ padding-inline-start: 0;
+}
+
+.transmission-panel {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 0.5em;
+ justify-content: center;
+}
+
+.data-transmission-panel {
+ display: flex;
+}
+
+.transmission-panel button {
+ height: 50px;
+ width: 60px;
+ font-size: 100%;
+ font-weight: bold;
+ margin: 0.5em;
+}
+
+.transmission-square {
+ width: 150px;
+ height: 150px;
+ background-color: black;
+ border: 2px solid gray;
+ color: gray;
+ display: flex;
+ justify-content: center;
+ padding: 0.5em;
+}
+
+#divclock {
+ border-right: 1px dashed gray;
+}
+
+#divdata {
+ border-left: 1px dashed gray;
+}
+
+.programming-controls {
+ display: flex;
+ justify-content: space-between;
+ flex-wrap: wrap;
+ align-items: center;
+}
\ No newline at end of file
diff --git a/blinkywww/white.png b/blinkywww/src/white.png
similarity index 100%
rename from blinkywww/white.png
rename to blinkywww/src/white.png
diff --git a/blinkywww/tests/test.spec.js b/blinkywww/tests/test.spec.js
new file mode 100644
index 0000000..29899df
--- /dev/null
+++ b/blinkywww/tests/test.spec.js
@@ -0,0 +1,340 @@
+const { test, expect } = require('@playwright/test');
+
+test.describe('eeprom data', () => {
+ test('verify bitstream for happy path simple text message', async ({ page }) => {
+ await page.goto('/');
+
+ await page.locator('#msg_0_anim_marq').check();
+ await page.locator('#msg_0_end_type').selectOption('Advance to next message');
+ await page.locator('#msg_0_delay').selectOption('7');
+ await page.locator('#msg_0_text_message').fill('TEST');
+
+ await page.getByRole('button', { name: 'Go' }).click();
+ const messageData = await page.locator('#message_data').inputValue();
+
+ expect(messageData).toEqual('1,30,4,29,14,28,29');
+ // 1 message, 30 is the config byte for the message, 4 data bytes in message, T=29, E=14, S=28, T=29
+ });
+
+ test('verify bitstream for simple pixel message', async ({ page }) => {
+ await page.goto('http://localhost:3000/');
+
+ await page.getByRole('radio', { name: 'Pixel' }).check();
+ await page.locator('#msg_0_anim_marq').check();
+ await page.locator('#msg_0_end_type').selectOption('Advance to next message');
+ await page.locator('#msg_0_delay').selectOption('7');
+
+ await page.locator('div > img').first().click();
+ await page.locator('div:nth-child(2) > img:nth-child(2)').click();
+ await page.locator('div:nth-child(3) > img:nth-child(3)').click();
+ await page.locator('div:nth-child(4) > img:nth-child(4)').click();
+ await page.locator('div:nth-child(5) > img:nth-child(5)').click();
+ await page.locator('div:nth-child(6) > img:nth-child(6)').click();
+ await page.locator('div:nth-child(7) > img:nth-child(7)').click();
+ await page.getByRole('button', { name: 'Go' }).click();
+
+ const messageData = await page.locator('#message_data').inputValue();
+ expect(messageData).toEqual('1,158,7,128,64,32,16,8,4,2');
+ });
+
+ test('verify bitstream for multiple text messages', async ({ page }) => {
+ await page.goto('/');
+
+ await page.locator('#msg_0_anim_marq').check();
+ await page.locator('#msg_0_end_type').selectOption('Advance to next message');
+ await page.locator('#msg_0_delay').selectOption('7');
+ await page.locator('#msg_0_text_message').fill('Hello');
+
+ await page.locator('input[value="Add New Message"]').click();
+ await page.locator('#msg_1_anim_marq').check();
+ await page.locator('#msg_1_end_type').selectOption('Advance to next message');
+ await page.locator('#msg_1_delay').selectOption('7');
+ await page.locator('#msg_1_text_message').fill('World');
+
+ await page.getByRole('button', { name: 'Go' }).click();
+ const messageData = await page.locator('#message_data').inputValue();
+ expect(messageData).toEqual('2,30,5,17,14,21,21,24,30,5,32,24,27,21,13');
+ });
+
+ test('verify bitstream for animation-style text message', async ({ page }) => {
+ await page.goto('/');
+ await page.locator('#msg_0_anim_anim').check();
+ await page.locator('#msg_0_end_type').selectOption('Advance to next message');
+ await page.locator('#msg_0_delay').selectOption('7');
+ await page.locator('#msg_0_text_message').fill('animation');
+ await page.getByRole('button', { name: 'Go' }).click();
+
+ const messageData = await page.locator('#message_data').inputValue();
+ expect(messageData).toEqual('1,94,9,10,23,18,22,10,29,18,24,23');
+ });
+
+ test('verify bitstream for marquee-style text message', async ({ page }) => {
+ await page.goto('/');
+ await page.locator('#msg_0_anim_marq').check();
+ await page.locator('#msg_0_end_type').selectOption('Advance to next message');
+ await page.locator('#msg_0_delay').selectOption('7');
+ await page.locator('#msg_0_text_message').fill('marquee');
+ await page.getByRole('button', { name: 'Go' }).click();
+
+ const messageData = await page.locator('#message_data').inputValue();
+ expect(messageData).toEqual('1,30,7,22,10,27,26,30,14,14');
+ });
+
+ test('verify bitstream for text message that ends by stopping', async ({ page }) => {
+ await page.goto('/');
+ await page.locator('#msg_0_anim_marq').check();
+ await page.locator('#msg_0_end_type').selectOption('Stop');
+ await page.locator('#msg_0_delay').selectOption('7');
+ await page.locator('#msg_0_text_message').fill('stop');
+ await page.getByRole('button', { name: 'Go' }).click();
+
+ const messageData = await page.locator('#message_data').inputValue();
+ expect(messageData).toEqual('1,28,4,28,29,24,25');
+ });
+
+ test('verify bitstream for text message that ends by repeating', async ({ page }) => {
+ await page.goto('/');
+ await page.locator('#msg_0_anim_marq').check();
+ await page.locator('#msg_0_end_type').selectOption('Repeat this message');
+ await page.locator('#msg_0_delay').selectOption('7');
+ await page.locator('#msg_0_text_message').fill('repeat');
+ await page.getByRole('button', { name: 'Go' }).click();
+
+ const messageData = await page.locator('#message_data').inputValue();
+ expect(messageData).toEqual('1,29,6,27,14,25,14,10,29');
+ });
+
+ test('verify bitstream for text message that ends by advancing', async ({ page }) => {
+ await page.goto('/');
+ await page.locator('#msg_0_anim_marq').check();
+ await page.locator('#msg_0_end_type').selectOption('Advance to next message');
+ await page.locator('#msg_0_delay').selectOption('7');
+ await page.locator('#msg_0_text_message').fill('advance');
+ await page.getByRole('button', { name: 'Go' }).click();
+
+ const messageData = await page.locator('#message_data').inputValue();
+ expect(messageData).toEqual('1,30,7,10,13,31,10,23,12,14');
+ });
+
+ test('verify bitstream for easter egg text message', async ({ page }) => {
+ await page.goto('/');
+ await page.locator('#msg_0_anim_marq').check();
+ await page.locator('#msg_0_end_type').selectOption('Easter egg...');
+ await page.locator('#msg_0_delay').selectOption('7');
+ await page.locator('#msg_0_text_message').fill('egg');
+ await page.getByRole('button', { name: 'Go' }).click();
+
+ const messageData = await page.locator('#message_data').inputValue();
+ expect(messageData).toEqual('1,31,3,14,16,16');
+ });
+
+ test('verify bitstream for low delay text message', async ({ page }) => {
+ await page.goto('/');
+ await page.locator('#msg_0_anim_marq').check();
+ await page.locator('#msg_0_end_type').selectOption('Advance to next message'); // advance
+ await page.locator('#msg_0_delay').selectOption('0');
+ await page.locator('#msg_0_text_message').fill('fast');
+ await page.getByRole('button', { name: 'Go' }).click();
+
+ const messageData = await page.locator('#message_data').inputValue();
+ expect(messageData).toEqual('1,2,4,15,10,28,29');
+ });
+
+ test('verify bitstream for middle delay text message', async ({ page }) => {
+ await page.goto('/');
+ await page.locator('#msg_0_anim_marq').check();
+ await page.locator('#msg_0_end_type').selectOption('Advance to next message'); // advance
+ await page.locator('#msg_0_delay').selectOption('5');
+ await page.locator('#msg_0_text_message').fill('medium');
+ await page.getByRole('button', { name: 'Go' }).click();
+
+ const messageData = await page.locator('#message_data').inputValue();
+ expect(messageData).toEqual('1,22,6,22,14,13,18,30,22');
+ });
+
+ test('verify bitstream for slow delay text message', async ({ page }) => {
+ await page.goto('/');
+ await page.locator('#msg_0_anim_marq').check();
+ await page.locator('#msg_0_end_type').selectOption('Advance to next message'); // advance
+ await page.locator('#msg_0_delay').selectOption('15');
+ await page.locator('#msg_0_text_message').fill('sloooow');
+ await page.getByRole('button', { name: 'Go' }).click();
+
+ const messageData = await page.locator('#message_data').inputValue();
+ expect(messageData).toEqual('1,62,7,28,21,24,24,24,24,32');
+ });
+
+ test('verify bitstream for all the advertised text characters', async ({ page }) => {
+ await page.goto('/');
+ await page.locator('#msg_0_anim_marq').check();
+ await page.locator('#msg_0_end_type').selectOption('2'); // advance
+ await page.locator('#msg_0_delay').selectOption('7');
+ await page.locator('#msg_0_text_message').fill('0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz!?&,.');
+ await page.getByRole('button', { name: 'Go' }).click();
+
+ const messageData = await page.locator('#message_data').inputValue();
+ expect(messageData).toEqual('1,30,67,0,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,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,37,39,38,40,36');
+ });
+});
+
+ test('verify initial square state is black for data and clock', async ({ page }) => {
+ await page.goto('/');
+
+ const clockBg = await page.evaluate(() => {
+ return window.getComputedStyle(document.getElementById('divclock')).backgroundColor;
+ });
+
+ const dataBg = await page.evaluate(() => {
+ return window.getComputedStyle(document.getElementById('divdata')).backgroundColor;
+ });
+
+ // Both should start as black (rgb(0, 0, 0))
+ expect(clockBg).toBe('rgb(0, 0, 0)');
+ expect(dataBg).toBe('rgb(0, 0, 0)');
+ });
+
+
+ test('verify stop button resets to black', async ({ page }) => {
+ await page.goto('/');
+
+ await page.locator('#msg_0_text_message').fill('TEST');
+ await page.getByRole('button', { name: 'Go' }).click();
+ await page.waitForTimeout(100);
+ await page.getByRole('button', { name: 'Stop' }).click();
+ await page.waitForTimeout(50);
+
+ const clockBg = await page.evaluate(() => {
+ return window.getComputedStyle(document.getElementById('divclock')).backgroundColor;
+ });
+
+ const dataBg = await page.evaluate(() => {
+ return window.getComputedStyle(document.getElementById('divdata')).backgroundColor;
+ });
+
+ expect(clockBg).toBe('rgb(0, 0, 0)');
+ expect(dataBg).toBe('rgb(0, 0, 0)');
+ });
+
+ test('verify pixel animation data padding', async ({ page }) => {
+ await page.goto('/');
+
+ // Switch to pixel mode with animation
+ await page.getByRole('radio', { name: 'Pixel' }).check();
+ await page.locator('#msg_0_anim_anim').check();
+
+ // Set some pixels in first 3 columns
+ await page.locator('#msg_0_pixel_leds > div > img').first().click();
+ await page.locator('#msg_0_pixel_leds > div:nth-child(2) > img:nth-child(3)').click();
+ await page.locator('#msg_0_pixel_leds > div:nth-child(3) > img:nth-child(5)').click();
+
+ await page.getByRole('button', { name: 'Go' }).click();
+
+ const messageData = await page.locator('#message_data').inputValue();
+ // Should be padded to 7 columns for animation mode
+ expect(messageData).toBe('1,222,7,128,32,8,0,0,0,0');
+ // Config byte 222 = 0xDE = 11011110 (pixel=1, anim=1, delay=7, advance=2)
+ });
+
+
+test('verify delete message with drag objects', async ({ page }) => {
+ await page.goto('/');
+
+ // Add multiple messages
+ await page.locator('input[value="Add New Message"]').click();
+ await page.locator('input[value="Add New Message"]').click();
+
+ // Try to delete the middle message
+ await page.locator('#msg_1 .delete').click();
+
+ // Handle the confirmation dialog
+ page.on('dialog', dialog => dialog.accept());
+
+ // Click delete again with dialog handler active
+ await page.locator('#msg_1 .delete').click();
+
+ // Verify message is removed
+ await expect(page.locator('#msg_1')).not.toBeVisible();
+
+ // Verify other messages still exist
+ await expect(page.locator('#msg_0')).toBeVisible();
+ await expect(page.locator('#msg_2')).toBeVisible();
+});
+
+test('verify message ordering after deletion', async ({ page }) => {
+ await page.goto('/');
+
+ // Add 3 messages
+ await page.locator('input[value="Add New Message"]').click();
+ await page.locator('input[value="Add New Message"]').click();
+
+ await page.locator('#msg_0_text_message').fill('FIRST');
+ await page.locator('#msg_1_text_message').fill('SECOND');
+ await page.locator('#msg_2_text_message').fill('THIRD');
+
+ // Delete middle message
+ page.on('dialog', dialog => dialog.accept());
+ await page.locator('#msg_1 .delete').click();
+
+ // make sure they're in the right order on the screen
+
+ // Verifies messages remain visible in correct positions
+ await expect(page.locator('#msg_0')).toBeVisible();
+ await expect(page.locator('#msg_2')).toBeVisible();
+
+ // Checks vertical positioning
+ const msg0Rect = await page.locator('#msg_0').boundingBox();
+ const msg2Rect = await page.locator('#msg_2').boundingBox();
+ expect(msg0Rect.y).toBeLessThan(msg2Rect.y);
+
+ //make sure msg_1 doesn't exist anymore
+ await expect(page.locator('#msg_1')).not.toBeVisible();
+
+ // Transmit and verify order
+ await page.getByRole('button', { name: 'Go' }).click();
+
+ // check message data
+ const messageData = await page.locator('#message_data').inputValue();
+ expect(messageData).toEqual('2,30,5,15,18,27,28,29,30,5,29,17,18,27,13');
+});
+
+
+
+test.describe('transmission data validation', () => {
+ test('verify transmission data', async ({ page }) => {
+ await page.goto('/');
+
+ await page.locator('#msg_0_text_message').fill('A');
+ await page.getByRole('button', { name: 'Go' }).click();
+
+ const xmitDataHex = await page.locator('#xmit_data_hex').inputValue();
+ const hexValues = xmitDataHex.split(',');
+
+ expect(xmitDataHex).toEqual('04,00,00,06,01,1E,01,0A,CC,00,00,00,01,FF');
+ });
+
+ test('verify 16-byte record splitting', async ({ page }) => {
+ await page.goto('/');
+
+ // Create a message longer than 16 bytes
+ await page.locator('#msg_0_text_message').fill('ABCDEFGHIJKLMNOPQRSTUVWXYZ');
+ await page.getByRole('button', { name: 'Go' }).click();
+
+ const xmitDataHex = await page.locator('#xmit_data_hex').inputValue();
+
+ expect(xmitDataHex).toEqual('10,00,00,06,01,1E,1A,0A,0B,0C,0D,0E,0F,10,11,12,13,14,15,16,E1,0D,00,10,06,17,18,19,1A,1B,1C,1D,1E,1F,20,21,22,23,64,00,00,00,01,FF');
+ });
+
+ test('verify end-of-transmission record', async ({ page }) => {
+ await page.goto('/');
+
+ await page.locator('#msg_0_text_message').fill('TEST');
+ await page.getByRole('button', { name: 'Go' }).click();
+
+ const xmitData = await page.locator('#xmit_data').inputValue();
+ const bytes = xmitData.split(',').map(Number);
+
+ // Last 5 bytes should be the reset record: 0,0,0,1,255
+ const lastFive = bytes.slice(-5);
+ expect(lastFive).toEqual([0, 0, 0, 1, 255]);
+ });
+});
![\"Move\"](\"move.gif\" "\\"Move\\"")
![\"Delete\"](\"delete.png\" "\\"Delete\\"")
![](\"led_dark.png\")
![](\"led_x.png\")
";
-?>
-
-
-
-
- 
+