UPDATED GUIDE AND DASHBOARD: Using the Bluefruit Dashboard with Web Bluetooth in Chrome #AdafruitLearningSystem #WebBluetooth #Bluefruit #BLE #Chrome @Adafruit

The Web Bluetooth dashboard and its associated guide Using the Bluefruit Dashboard with Web Bluetooth in Chrome have been updated. After the original dashboard was developed and the guide was published, we had one of our graphic designers take a look to see what could be improved. About a week later, the designer got back to me and gave me the new design. I put it to the side while I continued to work on the project I was already focused on.

After a couple of days, I decided to switch over to the dashboard re-skin and started be making a copy of the page, because the existing page was part of the guide and anything I change will instantly be updated. However, Glitch, the site I was using, made it very easy to do this by remixing the project, which essentially will make a copy of the project from its current state.

I took the page and started applying the overall style changes to the page. For the fonts, I ended up using Adobe Typekit so that the fonts were properly licensed. I slowly kept making changes and comparing the changes to the design and the page started taking shape. I had to do this for both the light and dark versions of the page so that they would consistently change.

One of the first widgets that I had to add was the On and Off switch. I started off by doing a web search for a switch that matched the overall design and decided on one that was available at https://proto.io/freebies/onoff/. I plugged in the colors from the design and kept tweaking it until it was pretty close and integrated that into the design.

Once the overall layout was looking good, it was time to start working on the new panels. One of the changes I decided on with the update was moving away from the dynamic sizing so that it would be easier to create panels consistent with the design. It sped up the process quite a bit. Also, rather than create a completely new panel for everything that needed redesigning, I created a custom panel type that allowed me to define the basics in the panel definitions including creation and update code and then use shared code as part of the custom panel type. This worked really well for panels that were unique such as the Tone or Battery panels. Since the tone panel was now a custom panel, I removed the Form Panel that I had created before since it was no longer used.

In order to not have to connect a board every single time, I created some code that would quickly go through and create some mock panels so they were easy to modify. The battery panel was the first panel that I started with and used a similar css code snippet that our designer had found and made enough changes for that to work. I made sure that the widget was able to change with the value.

Next I created the tone button and got that working. The hardest part of that one was figuring out how to create a triangle in css. I then went and adjusted the sizing on the NeoPixel and 3D Model panels which ended up being fairly easy. I create the Buttons after that, which was similar to the battery and the switch panel, which was a larger version of the other switches I created, but I removed the clicking ability.

At that point I cleaned up some of the differences in the layout that I had missed and the piece I saved until last was the graphs just because I thought they would be harder to modify than they were. I had to go through a number of settings, but got them to be consistent with the design. They ended up being a hybrid panel of the graph and text panels that I had used in the old design and once I realized that, it made them much easier to work with. I had the designer take a look who got back to me a few days later with only some minor changes. I made those changes and then swapped the URLs between the old and new Glitch pages.

Afterwards, I went through and updated the guide photos and updated any relevant information such as the removal of the form panels and the addition of the custom panels.I also made some changes based on user feedback. I found this redesign project challenging in a good way and was very happy that I was able to overcome those challenges and produce something that very closely resembled the original design. Overall, it was very fun and came out looking very good. Be sure to check out the updated guide available here.

Adafruit publishes a wide range of writing and video content, including interviews and reporting on the maker market and the wider technology world. Our standards page is intended as a guide to best practices that Adafruit uses, as well as an outline of the ethical standards Adafruit aspires to. While Adafruit is not an independent journalistic institution, Adafruit strives to be a fair, informative, and positive voice within the community – check it out here: adafruit.com/editorialstandards

Join Adafruit on Mastodon

Adafruit is on Mastodon, join in! adafruit.com/mastodon

Stop breadboarding and soldering – start making immediately! Adafruit’s Circuit Playground is jam-packed with LEDs, sensors, buttons, alligator clip pads and more. Build projects with Circuit Playground in a few minutes with the drag-and-drop MakeCode programming site, learn computer science using the CS Discoveries class on code.org, jump into CircuitPython to learn Python and hardware together, TinyGO, or even use the Arduino IDE. Circuit Playground Express is the newest and best Circuit Playground board, with support for CircuitPython, MakeCode, and Arduino. It has a powerful processor, 10 NeoPixels, mini speaker, InfraRed receive and transmit, two buttons, a switch, 14 alligator clip pads, and lots of sensors: capacitive touch, IR proximity, temperature, light, motion and sound. A whole wide world of electronics and coding is waiting for you, and it fits in the palm of your hand.

Have an amazing project to share? The Electronics Show and Tell is every Wednesday at 7pm ET! To join, head over to YouTube and check out the show’s live chat – we’ll post the link there.

Join us every Wednesday night at 8pm ET for Ask an Engineer!

Join over 36,000+ makers on Adafruit’s Discord channels and be part of the community! http://adafru.it/discord

CircuitPython – The easiest way to program microcontrollers – CircuitPython.org

Maker Business — “Packaging” chips in the US

Wearables — Enclosures help fight body humidity in costumes

Electronics — Transformers: More than meets the eye!

Python for Microcontrollers — Python on Microcontrollers Newsletter: Silicon Labs introduces CircuitPython support, and more! #CircuitPython #Python #micropython @ThePSF @Raspberry_Pi

Adafruit IoT Monthly — Guardian Robot, Weather-wise Umbrella Stand, and more!

Microsoft MakeCode — MakeCode Thank You!

EYE on NPI — Maxim’s Himalaya uSLIC Step-Down Power Module #EyeOnNPI @maximintegrated @digikey

New Products – Adafruit Industries – Makers, hackers, artists, designers and engineers! — #NewProds 7/19/23 Feat. Adafruit Matrix Portal S3 CircuitPython Powered Internet Display!

Get the only spam-free daily newsletter about wearables, running a "maker business", electronic tips and more! Subscribe at AdafruitDaily.com !

No Comments

No comments yet.

Sorry, the comment form is closed at this time.