Skip to content

Commit fe07e7d

Browse files
Copilotsgbaird
Copilot
and
sgbaird
committed
Add real screenshots for all workflow building steps with hardcoded states
Co-authored-by: sgbaird <45469701+sgbaird@users.noreply.github.com>
1 parent 7d061e3 commit fe07e7d

File tree

22 files changed

+3296
-10
lines changed

22 files changed

+3296
-10
lines changed

‎scripts/blockly_app/STEP_BY_STEP_GUIDE.md‎

Lines changed: 29 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ This guide demonstrates how to build an OT-2 automation workflow using Blockly's
66

77
### Step 1: Start with Empty Workspace
88

9-
![Empty Workspace](screenshots/step1_empty.png)
9+
![Empty Workspace](https://github.com/user-attachments/assets/8f41f369-a6e7-453d-9120-9618fb91bc55)
1010

1111
- Open the Blockly application
1212
- The workspace is empty and ready for blocks
@@ -20,23 +20,32 @@ This guide demonstrates how to build an OT-2 automation workflow using Blockly's
2020

2121
**Generated Code:**
2222
```python
23-
# No blocks yet...
23+
# Generated from Blockly visual programming
24+
# This code uses functions from OT2mqtt.py
25+
26+
from OT2mqtt import mix_color, move_sensor_back, protocol
27+
28+
# Main workflow
2429
```
2530

2631
---
2732

2833
### Step 2: Add "OT-2: Home Robot" Block
2934

30-
![Adding Home Block](screenshots/step2_home.png)
35+
![Adding Home Block](https://github.com/user-attachments/assets/768853fa-5929-4b64-9ec6-b0afaf4af7fe)
3136

3237
1. Click on **"OT-2 Commands"** category in toolbox
3338
2. Drag the **"🏠 OT-2: Home Robot"** block to workspace
3439
3. Place it at the top of your workflow
3540

3641
**Generated Code:**
3742
```python
38-
from OT2mqtt import protocol
43+
# Generated from Blockly visual programming
44+
# This code uses functions from OT2mqtt.py
45+
46+
from OT2mqtt import mix_color, move_sensor_back, protocol
3947

48+
# Main workflow
4049
protocol.home()
4150
```
4251

@@ -53,12 +62,16 @@ protocol.home()
5362

5463
**Generated Code:**
5564
```python
56-
from OT2mqtt import protocol
65+
# Generated from Blockly visual programming
66+
# This code uses functions from OT2mqtt.py
5767

68+
from OT2mqtt import mix_color, move_sensor_back, protocol
69+
70+
# Main workflow
5871
protocol.home()
5972

6073
for count in range(3):
61-
pass # Loop body empty for now
74+
pass
6275
```
6376

6477
---
@@ -79,8 +92,12 @@ for count in range(3):
7992

8093
**Generated Code:**
8194
```python
82-
from OT2mqtt import mix_color, protocol
95+
# Generated from Blockly visual programming
96+
# This code uses functions from OT2mqtt.py
97+
98+
from OT2mqtt import mix_color, move_sensor_back, protocol
8399

100+
# Main workflow
84101
protocol.home()
85102

86103
for count in range(3):
@@ -112,8 +129,12 @@ for count in range(3):
112129

113130
**Generated Code:**
114131
```python
132+
# Generated from Blockly visual programming
133+
# This code uses functions from OT2mqtt.py
134+
115135
from OT2mqtt import mix_color, move_sensor_back, protocol
116136

137+
# Main workflow
117138
protocol.home()
118139

119140
for count in range(3):
@@ -213,4 +234,4 @@ Then open http://localhost:8080 and start building your own workflow!
213234

214235
---
215236

216-
**Note:** Screenshots for steps 1-5 show placeholder paths. To generate actual screenshots, the Blockly application needs to be run interactively and screenshots captured after each block is added. Step 6 shows the actual complete workflow.
237+
**Note:** All screenshots were captured from the real Blockly installation by hardcoding different workflow states.

‎scripts/blockly_app/dist/step1.html‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Blockly OT-2 - Step 1</title>
6+
<style>
7+
body {
8+
background-color: #fff;
9+
font-family: sans-serif;
10+
margin: 0;
11+
padding: 0;
12+
}
13+
h1 {
14+
text-align: center;
15+
padding: 20px;
16+
margin: 0;
17+
background-color: #5b7fc7;
18+
color: white;
19+
}
20+
.step-banner {
21+
background-color: #fff8dc;
22+
padding: 15px;
23+
text-align: center;
24+
border-bottom: 3px solid #b8860b;
25+
font-weight: bold;
26+
color: #8b4513;
27+
font-size: 18px;
28+
}
29+
.container {
30+
display: flex;
31+
height: calc(100vh - 150px);
32+
}
33+
#blocklyDiv {
34+
flex: 1;
35+
height: 100%;
36+
}
37+
#outputDiv {
38+
flex: 0 0 400px;
39+
background-color: #f5f5f5;
40+
border-left: 2px solid #ddd;
41+
padding: 20px;
42+
overflow-y: auto;
43+
}
44+
#codeOutput {
45+
background-color: #263238;
46+
color: #aed581;
47+
padding: 15px;
48+
border-radius: 4px;
49+
font-family: 'Courier New', monospace;
50+
white-space: pre;
51+
overflow-x: auto;
52+
font-size: 13px;
53+
line-height: 1.5;
54+
min-height: 400px;
55+
}
56+
h2 {
57+
margin-top: 0;
58+
color: #333;
59+
}
60+
.info {
61+
background-color: #e3f2fd;
62+
padding: 10px;
63+
border-radius: 4px;
64+
margin-bottom: 15px;
65+
font-size: 13px;
66+
}
67+
</style>
68+
</head>
69+
<body>
70+
<h1>Blockly OT-2 Custom Functions - Building Workflow Step by Step</h1>
71+
<div class="step-banner" id="stepBanner">Step 1</div>
72+
<div class="container">
73+
<div id="blocklyDiv"></div>
74+
<div id="outputDiv">
75+
<h2>Generated Python Code</h2>
76+
<div class="info">
77+
Watch as we build the workflow block by block
78+
</div>
79+
<div id="codeOutput"># Waiting for blocks...</div>
80+
</div>
81+
</div>
82+
<script src="step1.js"></script>
83+
</body>
84+
</html>

‎scripts/blockly_app/dist/step1.js‎

Lines changed: 170 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎scripts/blockly_app/dist/step2.html‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Blockly OT-2 - Step 2</title>
6+
<style>
7+
body {
8+
background-color: #fff;
9+
font-family: sans-serif;
10+
margin: 0;
11+
padding: 0;
12+
}
13+
h1 {
14+
text-align: center;
15+
padding: 20px;
16+
margin: 0;
17+
background-color: #5b7fc7;
18+
color: white;
19+
}
20+
.step-banner {
21+
background-color: #fff8dc;
22+
padding: 15px;
23+
text-align: center;
24+
border-bottom: 3px solid #b8860b;
25+
font-weight: bold;
26+
color: #8b4513;
27+
font-size: 18px;
28+
}
29+
.container {
30+
display: flex;
31+
height: calc(100vh - 150px);
32+
}
33+
#blocklyDiv {
34+
flex: 1;
35+
height: 100%;
36+
}
37+
#outputDiv {
38+
flex: 0 0 400px;
39+
background-color: #f5f5f5;
40+
border-left: 2px solid #ddd;
41+
padding: 20px;
42+
overflow-y: auto;
43+
}
44+
#codeOutput {
45+
background-color: #263238;
46+
color: #aed581;
47+
padding: 15px;
48+
border-radius: 4px;
49+
font-family: 'Courier New', monospace;
50+
white-space: pre;
51+
overflow-x: auto;
52+
font-size: 13px;
53+
line-height: 1.5;
54+
min-height: 400px;
55+
}
56+
h2 {
57+
margin-top: 0;
58+
color: #333;
59+
}
60+
.info {
61+
background-color: #e3f2fd;
62+
padding: 10px;
63+
border-radius: 4px;
64+
margin-bottom: 15px;
65+
font-size: 13px;
66+
}
67+
</style>
68+
</head>
69+
<body>
70+
<h1>Blockly OT-2 Custom Functions - Building Workflow Step by Step</h1>
71+
<div class="step-banner" id="stepBanner">Step 2</div>
72+
<div class="container">
73+
<div id="blocklyDiv"></div>
74+
<div id="outputDiv">
75+
<h2>Generated Python Code</h2>
76+
<div class="info">
77+
Watch as we build the workflow block by block
78+
</div>
79+
<div id="codeOutput"># Waiting for blocks...</div>
80+
</div>
81+
</div>
82+
<script src="step2.js"></script>
83+
</body>
84+
</html>

‎scripts/blockly_app/dist/step2.js‎

Lines changed: 170 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎scripts/blockly_app/dist/step3.html‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Blockly OT-2 - Step 3</title>
6+
<style>
7+
body {
8+
background-color: #fff;
9+
font-family: sans-serif;
10+
margin: 0;
11+
padding: 0;
12+
}
13+
h1 {
14+
text-align: center;
15+
padding: 20px;
16+
margin: 0;
17+
background-color: #5b7fc7;
18+
color: white;
19+
}
20+
.step-banner {
21+
background-color: #fff8dc;
22+
padding: 15px;
23+
text-align: center;
24+
border-bottom: 3px solid #b8860b;
25+
font-weight: bold;
26+
color: #8b4513;
27+
font-size: 18px;
28+
}
29+
.container {
30+
display: flex;
31+
height: calc(100vh - 150px);
32+
}
33+
#blocklyDiv {
34+
flex: 1;
35+
height: 100%;
36+
}
37+
#outputDiv {
38+
flex: 0 0 400px;
39+
background-color: #f5f5f5;
40+
border-left: 2px solid #ddd;
41+
padding: 20px;
42+
overflow-y: auto;
43+
}
44+
#codeOutput {
45+
background-color: #263238;
46+
color: #aed581;
47+
padding: 15px;
48+
border-radius: 4px;
49+
font-family: 'Courier New', monospace;
50+
white-space: pre;
51+
overflow-x: auto;
52+
font-size: 13px;
53+
line-height: 1.5;
54+
min-height: 400px;
55+
}
56+
h2 {
57+
margin-top: 0;
58+
color: #333;
59+
}
60+
.info {
61+
background-color: #e3f2fd;
62+
padding: 10px;
63+
border-radius: 4px;
64+
margin-bottom: 15px;
65+
font-size: 13px;
66+
}
67+
</style>
68+
</head>
69+
<body>
70+
<h1>Blockly OT-2 Custom Functions - Building Workflow Step by Step</h1>
71+
<div class="step-banner" id="stepBanner">Step 3</div>
72+
<div class="container">
73+
<div id="blocklyDiv"></div>
74+
<div id="outputDiv">
75+
<h2>Generated Python Code</h2>
76+
<div class="info">
77+
Watch as we build the workflow block by block
78+
</div>
79+
<div id="codeOutput"># Waiting for blocks...</div>
80+
</div>
81+
</div>
82+
<script src="step3.js"></script>
83+
</body>
84+
</html>

‎scripts/blockly_app/dist/step3.js‎

Lines changed: 170 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)