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.
