Move old static Pages site into example-webserial-basic

scottbez1 · Oct 9, 2023 · fbda1df · fbda1df
1 parent c61c4ae
commit fbda1df
Show file tree

Hide file tree

Showing 15 changed files with 46 additions and 50 deletions.
diff --git a/README.md b/README.md
@@ -51,7 +51,7 @@ I'd love to hear your thoughts and questions about this project, and happy to in
 Please note, updated documentation for the Chainlink system is still in progress; you may see outdated references to the "Classic" electronics in some documentation in the meantime. If you have any questions, please don't hesitate to ask in the [community Discord server](https://discord.gg/Hxnftc8PyW)!
 
 * [**Ordering guide (the "easy" route) - updated for Chainlink**](https://paper.dropbox.com/doc/Splitflap-Ordering-the-easy-route--BsXzf8VyILR3nl1vUpOi28TWAg-0i6r3aqw6kZVXQOP2MyNr)
-* [**Chainlink Driver Electronics User Guide**]https://paper.dropbox.com/doc/Chainlink-Driver-v1.1-Electronics-User-Guide--BsVuP9OHVo952_ZdJDBomCCzAg-U0DAXrSxEoOhgSoRU39hq
+* [**Chainlink Driver Electronics User Guide**](https://paper.dropbox.com/doc/Chainlink-Driver-v1.1-Electronics-User-Guide--BsVuP9OHVo952_ZdJDBomCCzAg-U0DAXrSxEoOhgSoRU39hq)
 * [**Latest stable release**](https://github.com/scottbez1/splitflap/releases)
 * [**Assembly instructions (v0.5/0.6/0.7)**](https://paper.dropbox.com/doc/Splitflap-Kit-v0.5v1.0-Instructions--ASQDu1uoa6n4_t1pva1bM1MgAg-bxXJlke5ROmamcx4OH44r)
 

diff --git a/arduino/splitflap/esp32/splitflap/serial_proto_protocol.cpp b/arduino/splitflap/esp32/splitflap/serial_proto_protocol.cpp
@@ -23,7 +23,7 @@
 
 static SerialProtoProtocol* singleton_for_packet_serial = 0;
 
-static const uint16_t MIN_STATE_INTERVAL_MILLIS = 250;
+static const uint16_t MIN_STATE_INTERVAL_MILLIS = 100;
 static const uint16_t PERIODIC_STATE_INTERVAL_MILLIS = 5000;
 
 SerialProtoProtocol::SerialProtoProtocol(SplitflapTask& splitflap_task, Stream& stream) :

diff --git a/docs/css/style.css → ...rial-basic/public/3d_viewer/css/style.css b/docs/css/style.css → ...rial-basic/public/3d_viewer/css/style.css
diff --git a/docs/img/GitHub-Mark-Light-64px.png → .../3d_viewer/img/GitHub-Mark-Light-64px.png b/docs/img/GitHub-Mark-Light-64px.png → .../3d_viewer/img/GitHub-Mark-Light-64px.png
diff --git a/docs/index.html → ...bserial-basic/public/3d_viewer/index.html b/docs/index.html → ...bserial-basic/public/3d_viewer/index.html
@@ -10,14 +10,6 @@
         <script src="js/STLLoader.js"></script>
         <script src="js/OrbitControls.js"></script>
         <script src="js/url-search-params/index.js"></script>
-        <!-- Global site tag (gtag.js) - Google Analytics -->
-        <script async src="https://www.googletagmanager.com/gtag/js?id=UA-114293392-1"></script>
-        <script>
-            window.dataLayer = window.dataLayer || [];
-            function gtag(){dataLayer.push(arguments);}
-            gtag('js', new Date());
-            gtag('config', 'UA-114293392-1');
-        </script>
     </head>
     <body>
         <div class="header">
@@ -55,45 +47,42 @@ <h1>Welcome</h1>
                     This meant using widely available materials and avoiding any tooling with a high upfront cost.
                 </p>
                 <p>
-                    Following that philosophy, the design uses store-bought vinyl stickers for the letters, is driven
+                    Following that philosophy, the design can use store-bought vinyl stickers for the letters, is driven
                     by an ubiquitous and cheap 28BYJ-48 stepper motor, and uses common PVC ID badge cards cut to shape
                     for the flaps (though custom die-cut flaps are also
-                    <a href="https://www.tindie.com/products/14844/">available</a>).
-                    Even the enclosure, spool, and gears, which are all made from laser-cut MDF, can be easily ordered online.
+                    <a href="https://www.etsy.com/listing/979720975/blank-splitflap-display-flaps" target="_blank">available</a>).
+                    Even the enclosure and spool, which are made from laser-cut MDF or acrylic, can be easily ordered online.
                 </p>
                 <p>
-                    This design is currently nearly stable. The source code in the
+                    This design is currently stable. The source code in the
                     <a href="https://github.com/scottbez1/splitflap" target="_blank">git repo</a>
-                    has been used to produce several working prototypes, and the v0.5 design is stable enough to
-                    have fairly comprehensive
+                    provides 3d designs, electronics schematics and PCBs, and software and firmware that has been tested
+                    and used to build displays with up to 108 modules. If you'd like to build your own, see the
                     <a href="https://paper.dropbox.com/doc/Ordering-Splitflap-v0.5--ATdB3cgS5GyvwTWq1kpunkD4Ag-iCwwMo0hRkkAlwdutccWf">Ordering Instructions</a>
-                    and an
+                    and
                     <a href="https://paper.dropbox.com/doc/Splitflap-Kit-v0.5-Assembly-Instructions--ATc8SYKflDsThTsXGZiRPOyTAg-bxXJlke5ROmamcx4OH44r">Assembly Guide</a>.
                     Of course, as this is an open source side-project, you may still come across minor issues or
-                    missing documentation.
+                    missing documentation; pull requests are appreciated.
                 </p>
-                <iframe class="video" width="560" height="315" src="https://www.youtube.com/embed/vq4o_88kN8g" frameborder="0" allowfullscreen></iframe>
+                <iframe class="video" width="560" height="315" src="https://www.youtube.com/embed/UAQJJAQSg_g" frameborder="0" allowfullscreen></iframe>
                 <h1>Open source, up to date</h1>
-                <a href="https://s3.amazonaws.com/splitflap-artifacts/master/electronics-classic/classic-schematic.pdf">
-                    <img class="floater right_float" src="https://s3.amazonaws.com/splitflap-artifacts/master/electronics-classic/classic-schematic.png" title="Driver schematic"/>
+                <a href="https://s3.amazonaws.com/splitflap-artifacts/master/electronics-chainlink/chainlinkDriver-schematic.pdf">
+                    <img class="floater right_float" src="https://s3.amazonaws.com/splitflap-artifacts/master/electronics-chainlink/chainlinkDriver-schematic.png" title="Driver schematic"/>
                 </a>
                 <p>
                     All of the designs are <a href="https://github.com/scottbez1/splitflap/">open source</a>. The 3d
                     model is built using OpenSCAD, the driver electronics board is designed in KiCad, and the driver
-                    firmware is written using Arduino.
+                    firmware is written using Arduino + PlatformIO.
                 </p>
                 <p>
-                    Most of the supporting materials, like the
-                    <a href="https://s3.amazonaws.com/splitflap-artifacts/master/electronics-classic/classic-schematic.pdf">schematic</a>,
-                    <a href="https://s3.amazonaws.com/splitflap-artifacts/master/electronics-classic/splitflap-bom.csv">bill of materials</a>,
-                    <a href="https://s3.amazonaws.com/splitflap-artifacts/master/electronics-classic/classic-jlc/gerbers.zip">PCB gerbers</a>, and
+                    Most of the supporting materials, like the schematic, bill of materials, PCB gerbers, and
                     even the interactive 3D rendering seen above are
                     <a href="https://scottbezek.blogspot.com/2016/04/automated-kicad-openscad-rendering.html">generated
                     automatically</a> as the design changes, using Github Actions. This way you can always see the latest
                     designs, even without having to check out the git repo or install any software yourself.
                 </p>
-                <a href="https://s3.amazonaws.com/splitflap-artifacts/master/electronics-classic/classic-pcb-raster.png">
-                    <img class="floater left_float" src="https://s3.amazonaws.com/splitflap-artifacts/master/electronics-classic/classic-pcb-raster.png" title="Driver PCB design"/>
+                <a href="https://s3.amazonaws.com/splitflap-artifacts/master/electronics-chainlink/chainlinkDriver-3d.png">
+                    <img class="floater left_float" src="https://s3.amazonaws.com/splitflap-artifacts/master/electronics-chainlink/chainlinkDriver-3d.png" title="Driver PCB design"/>
                 </a>
                 <p style="clear: right;">
                     I'd love to hear your thoughts and questions about this project, and happy to incorporate any
@@ -110,7 +99,7 @@ <h3>License</h3>
                     details).
                 </p>
                 <pre>
-Copyright 2015-2021 Scott Bezek and the splitflap contributors
+Copyright 2015-2023 Scott Bezek and the splitflap contributors
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.

diff --git a/docs/js/OrbitControls.js → ...asic/public/3d_viewer/js/OrbitControls.js b/docs/js/OrbitControls.js → ...asic/public/3d_viewer/js/OrbitControls.js
diff --git a/docs/js/STLLoader.js → ...al-basic/public/3d_viewer/js/STLLoader.js b/docs/js/STLLoader.js → ...al-basic/public/3d_viewer/js/STLLoader.js
diff --git a/docs/js/WebGL.js → ...serial-basic/public/3d_viewer/js/WebGL.js b/docs/js/WebGL.js → ...serial-basic/public/3d_viewer/js/WebGL.js
diff --git a/docs/js/stats.min.js → ...al-basic/public/3d_viewer/js/stats.min.js b/docs/js/stats.min.js → ...al-basic/public/3d_viewer/js/stats.min.js
diff --git a/docs/js/three.js → ...serial-basic/public/3d_viewer/js/three.js b/docs/js/three.js → ...serial-basic/public/3d_viewer/js/three.js
diff --git a/docs/js/url-search-params/LICENSE → ...ic/3d_viewer/js/url-search-params/LICENSE b/docs/js/url-search-params/LICENSE → ...ic/3d_viewer/js/url-search-params/LICENSE
diff --git a/docs/js/url-search-params/index.js → ...c/3d_viewer/js/url-search-params/index.js b/docs/js/url-search-params/index.js → ...c/3d_viewer/js/url-search-params/index.js
diff --git a/docs/js/viewer.js → ...erial-basic/public/3d_viewer/js/viewer.js b/docs/js/viewer.js → ...erial-basic/public/3d_viewer/js/viewer.js
diff --git a/docs/embed.html → ...example-webserial-basic/public/embed.html b/docs/embed.html → ...example-webserial-basic/public/embed.html
@@ -2,22 +2,14 @@
     <link>
         <title>splitflap</title>
         <link href='https://fonts.googleapis.com/css?family=Roboto:100,300,400' rel='stylesheet' type='text/css'>
-        <link href="css/style.css" rel="stylesheet" type="text/css"></link>
+        <link href="3d_viewer/css/style.css" rel="stylesheet" type="text/css"></link>
         <script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script>
-        <script src="js/three.js"></script>
-        <script src="js/WebGL.js"></script>
-        <script src="js/stats.min.js"></script>
-        <script src="js/STLLoader.js"></script>
-        <script src="js/OrbitControls.js"></script>
-        <script src="js/url-search-params/index.js"></script>
-        <!-- Global site tag (gtag.js) - Google Analytics -->
-        <script async src="https://www.googletagmanager.com/gtag/js?id=UA-114293392-1"></script>
-        <script>
-            window.dataLayer = window.dataLayer || [];
-            function gtag(){dataLayer.push(arguments);}
-            gtag('js', new Date());
-            gtag('config', 'UA-114293392-1');
-        </script>
+        <script src="3d_viewer/js/three.js"></script>
+        <script src="3d_viewer/js/WebGL.js"></script>
+        <script src="3d_viewer/js/stats.min.js"></script>
+        <script src="3d_viewer/js/STLLoader.js"></script>
+        <script src="3d_viewer/js/OrbitControls.js"></script>
+        <script src="3d_viewer/js/url-search-params/index.js"></script>
     </head>
     <body>
         <div class="embed_container">
@@ -31,6 +23,6 @@
             DIY split-flap display by Scott Bezek. <a href="https://github.com/scottbez1/splitflap" target="_blank">https://github.com/scottbez1/splitflap</a>.
             </div>
         </div>
-        <script src="js/viewer.js"></script>
+        <script src="3d_viewer/js/viewer.js"></script>
     </body>
 </html>
diff --git a/software/chainlink/js/packages/example-webserial-basic/src/App.tsx b/software/chainlink/js/packages/example-webserial-basic/src/App.tsx
@@ -2,7 +2,7 @@ import React, {useCallback, useEffect, useRef, useState} from 'react'
 import Typography from '@mui/material/Typography'
 import Container from '@mui/material/Container'
 import {PB} from 'splitflapjs-proto'
-import {AppBar, Button, Card, CardContent, CircularProgress, Toolbar, Tooltip,} from '@mui/material'
+import {AppBar, Button, Card, CardContent, CircularProgress, Link, Toolbar, Tooltip,} from '@mui/material'
 import {NoUndefinedField} from './util'
 import {SplitflapWebSerial} from 'splitflapjs-webserial'
 import { applyResetModule } from 'splitflapjs-core/dist/util'
@@ -135,7 +135,7 @@ export const App: React.FC<AppProps> = () => {
     }, [inputValue])
 
     const numModules = splitflapState.modules.length
-    const charWidth = Math.max(1280 / numModules, 40)
+    const charWidth = Math.max(1000 / numModules, 40)
 
     return (
         <>
@@ -146,7 +146,7 @@ export const App: React.FC<AppProps> = () => {
             </Typography>
           </Toolbar>
         </AppBar>
-            <Container component="main" maxWidth="xl">
+            <Container component="main" maxWidth="lg">
         <Card sx={{margin: '32px'}}>
             <CardContent>
                     {splitflap !== null ? (
@@ -190,15 +190,16 @@ export const App: React.FC<AppProps> = () => {
                                             <div
                                                 style={{
                                                     width: '100%',
-                                                    paddingLeft: `${charWidth*0.12}px`,
+                                                    paddingLeft: module.state === PB.SplitflapState.ModuleState.State.LOOK_FOR_HOME ? 0 : `${charWidth*0.12}px`,
                                                     backgroundColor: module.state === PB.SplitflapState.ModuleState.State.SENSOR_ERROR ? 'orange' : 'inherit',
                                                     minWidth: module.state,
+                                                    textAlign: 'center',
                                                 }}
                                             >{
                                                 module.state === PB.SplitflapState.ModuleState.State.NORMAL ?
                                                 <>{FLAPS[module.flapIndex]}&nbsp;</> :
                                                 module.state === PB.SplitflapState.ModuleState.State.LOOK_FOR_HOME ?
-                                                <CircularProgress /> :
+                                                <CircularProgress size={charWidth * 0.7} /> :
                                                 module.state === PB.SplitflapState.ModuleState.State.SENSOR_ERROR ?
                                                 <>&nbsp;</> :
                                                 'x'
@@ -256,9 +257,23 @@ export const App: React.FC<AppProps> = () => {
                             </form>
                         </>
                     ) : navigator.serial ? (
+                        <div>
+                        <Typography variant="h4" color="inherit">
+                            Welcome
+                        </Typography>
+                        <Typography variant="body1">
+                            <p>If you have a Splitflap Display built with the Chainlink electronics system and you have up-to-date firmware installed on it,
+                            you can connect it via USB and control it using this web page. This uses Web Serial to talk to the device without needing to
+                            install any software on your computer.</p>
+                        </Typography>
                         <Button onClick={connectToSerial} variant="contained">
                             Connect via Web Serial
                         </Button>
+                        <Typography variant="body1">
+                            <p><b>Haven't built a display yet, or want to learn more?</b> Check out the <Link href="3d_viewer/">project landing page</Link> to see
+                            an interactive 3d model and read more about the project.</p>
+                        </Typography>
+                        </div>
                     ) : (
                         <Typography>
                             Sorry, Web Serial API isn't available in your browser. Try the latest version of Chrome.