diff --git a/content/blog/2024/hackbots-part-2/.DS_Store b/content/blog/2024/hackbots-part-2/.DS_Store new file mode 100644 index 0000000..f1d9011 Binary files /dev/null and b/content/blog/2024/hackbots-part-2/.DS_Store differ diff --git a/content/blog/2024/hackbots-part-2/Wifi.png b/content/blog/2024/hackbots-part-2/Wifi.png new file mode 100644 index 0000000..cc738a3 Binary files /dev/null and b/content/blog/2024/hackbots-part-2/Wifi.png differ diff --git a/content/blog/2024/hackbots-part-2/hackbot.jpg b/content/blog/2024/hackbots-part-2/hackbot.jpg new file mode 100644 index 0000000..4098aeb Binary files /dev/null and b/content/blog/2024/hackbots-part-2/hackbot.jpg differ diff --git a/content/blog/2024/hackbots-part-2/images/codepen_screenshot.png b/content/blog/2024/hackbots-part-2/images/codepen_screenshot.png new file mode 100644 index 0000000..c4e41a9 Binary files /dev/null and b/content/blog/2024/hackbots-part-2/images/codepen_screenshot.png differ diff --git a/content/blog/2024/hackbots-part-2/images/export_as_css.png b/content/blog/2024/hackbots-part-2/images/export_as_css.png new file mode 100644 index 0000000..7805027 Binary files /dev/null and b/content/blog/2024/hackbots-part-2/images/export_as_css.png differ diff --git a/content/blog/2024/hackbots-part-2/images/paletton1.png b/content/blog/2024/hackbots-part-2/images/paletton1.png new file mode 100644 index 0000000..47893a3 Binary files /dev/null and b/content/blog/2024/hackbots-part-2/images/paletton1.png differ diff --git a/content/blog/2024/hackbots-part-2/index.md b/content/blog/2024/hackbots-part-2/index.md new file mode 100644 index 0000000..83efcb9 --- /dev/null +++ b/content/blog/2024/hackbots-part-2/index.md @@ -0,0 +1,88 @@ +--- +title: "The Hackbots Project" +subtitle: "Making Simple Robots That Anyone Can Build (Pt. 2)" +date: 2024-03-18T07:40:38Z +tags: + - Rasberry Pi Pico + - Robots + - Electronics +draft: true +author: Paul Williams +author_email: phyushin@gmail.com +listing_image: hackbot.jpg +--- + +# Continuing the Bot Building Process +So we'll continue from where we left on last a little while ago with our bot building blog [posts][1]. +We'd got to the MK IV if memory serves... next on the list of things to do is to make our bot interface page nice and pretty. + +## Enter, CSS +Because we're using a very simple webserver on the [Raspberyy Pi Pico W][2] and because the code handily returned from our `generateHTML()` function is effectively the page that's served by the websever; we know this is a pretty good place to add a little customisation for our robot - make our page a little ... prettier :). + +## CodePen +when prototyping it's always much more satisfying to see the changes happen quickly as opposed to editing our `generateHTML()` function, uploading to the bot, connecting to our bot, visiting the url... it's a lot of steps - to to make this a bit easier we're going to use a nice tool called [CodePen][3], our first step is to rip out the HTML from the `generateHTML()` function and paste it into the HTML window like so: +![HTML & CSS above, results below](./images/codepen_screenshot.png) + +We've made a couple of modifications from our original `generateHTML()` function to make it easier to work with CSS: + +```python +html = f""" + + + """ +return html +``` + +The above code is snipped for brevity but what it does is uses python's format string fucntionality to add the variable `style` with the the style we read into the variable (more on that a little later). + +We've also moved `generateHTML()` into it's own file and use parameters to drop in from the main program, we import the function into `main.py` by adding the following code to the top of our `main.py`: + +```python +from html import generateHTML +``` + +This allows us to call `generateHTML()` like we did previously, it's just tidied away in its own file now :)... We've also added the following code to the beginning of the function - which will allow us to use an _exteral_ style sheet (see I told you more on that later): +```python +style = "" +with open("./style.css","r") as f: + style = f.read() +``` +Now, once we're done with making the code look _pretty_ in CodePen we can just drop the code from the _CSS_ window into the `style.css` file and it will make the controller page all nice and pretty too! Great Stuff! + +## Paletton +A good place to grab some colours that go well together is [Paletton][3], For the purposes of this guide however we're only going to pick a primary colour but don't let that stop you from adding a little extra flare, pick a colour you like the look of like so: +![Paletton Colour Picker](./images/paletton1.png) + +Then, go to the export and select _as CSS_: +![Export - listing colours that go well together](./images/export_as_css.png) +Don't worry if the export doesn't work as all the relevant colour information (Hex values) can be grabbed right off this page too! +You should end up with something like this in your `style.css` file: +```css +:root{ + --color-primary-0 : #679933 ; + --color-primary-1 : #C0E699 ; + --color-primary-2 : #90BF60 ; + --color-primary-3 : #437313 ; + --color-primary-4 : #274D00 ; + --color-white : #ffffff ; + --color-black : #000000 ; +} +button { + width:175px; + height:100px; + background-color: var(--color-primary-0); + color: var(--color-white); + font-size:25pt +} +``` + +Where the `:root` _selector_ contains the variable namnes used for the colours - you don't have to do it exactly like this but it's done here for clarity + + +Thanks for reading! +PW + +[1]: https://www.leighhack.org/blog/ "More Hackbot Adventures" +[2]: https://www.raspberrypi.com/documentation/microcontrollers/raspberry-pi-pico.html "Raspberry Pi Pico" +[3]: https://codepen.io/pen/ "CodePen" +[4]: https://paletton.com/ "Paletton" \ No newline at end of file diff --git a/content/blog/2024/hackbots-part-2/initial_schematic.png b/content/blog/2024/hackbots-part-2/initial_schematic.png new file mode 100644 index 0000000..57c1b85 Binary files /dev/null and b/content/blog/2024/hackbots-part-2/initial_schematic.png differ