Unloadable CSS / Javascript dependencies when connected to Tello

[johnwalicki]

If your laptop is connected to the Tello Drone hotspot and you try to load the http://127.0.0.1:3000 webpage, the index.html tries unsuccessfully to load the remote CSS page <link rel="stylesheet" href="https://codepen.io/ibmcodait/pen/gVMdwm.css"> and scripts

    <script src="https://cdn.jsdelivr.net/npm/@cloud-annotations/object-detection"></script>
    <script src="https://codepen.io/ibmcodait/pen/gVMdwm.js"></script>

There's some additional recursive dependences within those files too.

Since the laptop is not connected to the internet (at least over wireless), the rendered page is a mess. It would be better to move these dependencies local into this repo so that a Ctrl-R / page reload doesn't wreck the drone demo.

For now the workaround is to :

• Connect to your mobile smartphone hotspot
• npm start
• Open a browser tab to http://127.0.0.1:3000
• Power on the Tello Drone
• Connect to the Tello hotspot
• Don't reload the browser page.
• Fly the drone with object detection.

[krook]

Not sure if the local download wouldn't cause more problems in keeping things up to date, especially in those recursive dependencies. Maybe the best is just to document the workaround more prominently.

[johnwalicki]

Nick B fixed this for me in this commit https://github.com/Code-and-Response/DroneAid/commit/7726dd83b05b7ed7ac28f6028ef1df48fb379d90 We can close this ticket.