MicroPython Web Server using MicroDot initial code

Author: donskytech

boot.py

@@ -0,0 +1,21 @@
+# boot.py -- run on boot-up
+import network, utime
+
+# Replace the following with your WIFI Credentials
+SSID = "<PLACE_YOUR_SSID_HERE>"
+SSI_PASSWORD = "<PLACE_YOUR_WIFI_PASWORD_HERE>"
+
+def do_connect():
+    import network
+    sta_if = network.WLAN(network.STA_IF)
+    if not sta_if.isconnected():
+        print('connecting to network...')
+        sta_if.active(True)
+        sta_if.connect(SSID, SSI_PASSWORD)
+        while not sta_if.isconnected():
+            pass
+    print('Connected! Network config:', sta_if.ifconfig())
+    
+print("Connecting to your wifi...")
+do_connect()
+

connect_wifi.py

@@ -0,0 +1,44 @@
+import network, utime
+
+import esp
+esp.osdebug(None)
+
+import gc
+gc.collect()
+
+# def do_connect():
+#     try:
+#         sta_if = network.WLAN(network.STA_IF)
+#         if not sta_if.isconnected():
+#             sta_if.active(True)
+#             sta_if.connect('donsky-4thFloor', 'donsky982')
+#             while not sta_if.isconnected():
+#                 pass
+#         print('network config:', sta_if.ifconfig())
+#     except Exception as e:
+#         print("Error encountered", e)
+# 
+#     
+# 
+# do_connect()
+print("Starting station connection...")
+station = network.WLAN(network.STA_IF)
+print("After define...")
+station.active(True)
+print("Start connecting...")
+try:
+    station.connect("donsky-4thFloor", "donsky982")
+    print("Establishing connection...")
+    for i in range(10):
+        print("Connecting to station in {}".format(i))
+        utime.sleep(1)
+        if station.isconnected():
+            break
+        
+    if station.isconnected():
+        print("station Connection OK!")
+        print("Network Config ", station.ifconfig())
+    else:
+        print("station internal error")
+except Exception as e:
+    print(e)

led_module.py

@@ -0,0 +1,16 @@
+from machine import Pin
+
+class LEDModule:
+    """This will represent our LED"""
+    
+    def __init__(self, pinNumber):
+        self.pinNumber = pinNumber
+        self.led_pin = Pin(self.pinNumber, Pin.OUT)
+        
+    def get_value(self):
+        return self.led_pin.value()
+    
+    def toggle(self):
+        self.led_pin.value(not self.get_value())
+    
+    

main.py

@@ -0,0 +1,37 @@
+from microdot_asyncio import Microdot, Response, send_file
+from microdot_utemplate import render_template
+from led_module import LEDModule
+
+app = Microdot()
+Response.default_content_type = 'text/html'
+
+# Our LED Module
+led_module = LEDModule(23)
+
+
+@app.route('/')
+async def index(request):
+    return render_template('index.html', led_value=led_module.get_value())
+
+
+@app.route('/toggle')
+async def toggle_led(request):
+    print("Receive Toggle Request!")
+    led_module.toggle()
+    return "OK"
+
+
+@app.route('/shutdown')
+async def shutdown(request):
+    request.app.shutdown()
+    return 'The server is shutting down...'
+
+
+@app.route('/static/<path:path>')
+def static(request, path):
+    if '..' in path:
+        # directory traversal is not allowed
+        return 'Not found', 404
+    return send_file('static/' + path)
+
+app.run()

microdot.py

@@ -0,0 +1,34 @@
+from utemplate import recompile
+
+_loader = None
+
+
+def init_templates(template_dir='templates', loader_class=recompile.Loader):
+    """Initialize the templating subsystem.
+
+    :param template_dir: the directory where templates are stored. This
+                         argument is optional. The default is to load templates
+                         from a *templates* subdirectory.
+    :param loader_class: the ``utemplate.Loader`` class to use when loading
+                         templates. This argument is optional. The default is
+                         the ``recompile.Loader`` class, which automatically
+                         recompiles templates when they change.
+    """
+    global _loader
+    _loader = loader_class(None, template_dir)
+
+
+def render_template(template, *args, **kwargs):
+    """Render a template.
+
+    :param template: The filename of the template to render, relative to the
+                     configured template directory.
+    :param args: Positional arguments to be passed to the render engine.
+    :param kwargs: Keyword arguments to be passed to the render engine.
+
+    The return value is an iterator that returns sections of rendered template.
+    """
+    if _loader is None:  # pragma: no cover
+        init_templates()
+    render = _loader.load(template)
+    return render(*args, **kwargs)

microdot_asyncio.py

@@ -0,0 +1,75 @@
+/******** mincss **********/
+.hero {
+    background: #eee;
+    padding: 20px;
+    border-radius: 10px;
+    margin-top: 1em;
+    text-align: center;
+
+}
+
+.hero h1 {
+    margin-top: 0;
+    margin-bottom: 0.3em;
+    color: red;
+}
+
+/****** Custom toggle Switch**********/
+/* https://codepen.io/alvarotrigo/pen/abVPyaJ */
+/*********************/
+.toggle-div{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top: 5em;
+}
+
+.label{
+    font-size: 1.5em;
+    font-weight: bolder;
+    margin-right: 0.5em;
+    /* color: blue */
+}
+
+/* Styles for the toggle switch */
+input[type=checkbox] {
+    height: 0;
+    width: 0;
+    visibility: hidden;
+  }
+  
+  label {
+    cursor: pointer;
+    text-indent: -9999px;
+    width: 150px;
+    height: 60px;
+    background: grey;
+    display: block;
+    border-radius: 100px;
+    position: relative;
+  }
+  
+  label:after {
+    content: "";
+    position: absolute;
+    top: 5px;
+    left: 5px;
+    width: 70px;
+    height: 50px;
+    background: #fff;
+    border-radius: 90px;
+    transition: 0.3s;
+  }
+  
+  input:checked + label {
+    background: #bada55;
+  }
+  
+  input:checked + label:after {
+    left: calc(100% - 5px);
+    transform: translateX(-100%);
+  }
+  
+  label:active:after {
+    width: 130px;
+  }

microdot_utemplate.py

@@ -0,0 +1,16 @@
+function toggleButtonSwitch(e) {
+  var switchButton = document.getElementById("switch");
+  
+  var toggleValue = "";
+  if (switchButton.checked) {
+    console.log("On!");
+    toggleValue = "ON";
+  } else {
+    console.log("Off!");
+    toggleValue = "OFF"
+  }
+  fetch( `/toggle`)
+  .then( response => {
+    console.log(response);
+  } )
+}

static/css/entireframework.min.css

@@ -0,0 +1,32 @@
+{% args led_value %}
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>MicroPython Webserver</title>
+    <link rel="stylesheet" href="static/css/entireframework.min.css" />
+    <link rel="stylesheet" href="static/css/index.css" />
+    <script src="static/js/index.js"></script>
+  </head>
+  <body>
+    <nav class="nav" tabindex="-1" onclick="this.focus()">
+      <div class="container">
+        <a class="pagename current" href="#">www.donskytech.com</a>
+        <a href="#">One</a>
+        <a href="#">Two</a>
+        <a href="#">Three</a>
+      </div>
+    </nav>
+    <button class="btn-close btn btn-sm">×</button>
+    <div class="container">
+      <div class="hero">
+        <h1 class="title">MicroPython Webserver</h1>
+        <div class="toggle-div">
+            <p class="label">Toggle Switch</p>
+            <input type="checkbox" id="switch" onclick="toggleButtonSwitch()" {% if led_value == 1 %} checked {% endif %}/><label for="switch">Toggle</label>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>