I created the P4wnP1 OLED Dashboard today! (See Update at bottom of page, too)
The source file I used was wifi-disp-adv-fontsize.py, since it already had a center-of-the-screen menu built into it.
It also had the back-end code changes I made so the font-size AND screen elements are dynamically placed.
For example, you can change the font size and the selection-box position auto adjusts to the new font size.
So we can have 1 line of text in the center of the screen, 2, 3, 4, 5, or however many will fit.
On to the dashboard!
OLED P4wnP1 Dashboard: The Roots
The very original basis for the dashboard is a "key_demo.py" example file from some library (sh1106? DIY Electronicz za? I can't remember).
This demo file was a great start for making a dashboard, since it showed on-screen feedback for every button press on the 1.3" OLED HAT.
I had also done some work with the demo file previously, including the script that is now wifi-disp-adv-fontsize.py.
The "..fontsize.py" script is a modified version of the OLED demo file mentioned above.
Specifically, I removed the on-screen triangle-arrows, widened the "center area", and added lines of text to display in the center of the screen.
With this nice basis to start the OLED P4wnP1 dashboard, I was off to a running start.
Building P4wnP1 OLED Dashboard
- First I displayed some font-awesome icons at the top and bottom of the OLED screen. I did this to just display SOMETHING and get the ball rolling. This also allowed me to make positional per-pixel adjustments to the items on the screen to get "just that right fit".
- Once things were nice and TOIT, I removed the bar of icons at the bottom of the screen to turn it into a status bar.
- Then I added a "status" / info bar at the bottom of the screen, which is just a filled rectangle with reverse-fill text over it.
- After that, I moved the text-display area so it wasn't overlapping the icon areas.
- I felt it necessary to add a left-hand vertical bar, which will be used for "end of list" or "more items below" indicators. For example, when there are more options (off-screen), an arrow can appear to indicate so.
- The vertical bar can also show how far down in the list the current item is (like a typical GUI scroll bar). I may move this to the right side or add a 2nd bar to the right side.
- Last but not least, there are some circle shapes on the right side of the screen. These are meant to show what the KEY1, 2, and 3 buttons do.
Setting & Displaying the Font Awesome Icons
I re-used some previous code to display font-awesome icons on the OLED dashboard.
In doing so, I found out which icons are available and which aren't.
Here are my code comments showing some of the "better" looking icons available in the fontawesome-webfont.ttf file:
# Set font-awesome icon
faicon1 = fa.icons['signal'] + ' ' + fa.icons['globe'] + ' ' + fa.icons['tv'] + ' ' + fa.icons['bluetooth'] + ' ' + fa.icons['envelope'] + ' ' + fa.icons['eye']
#faicon1 = fa.icons['battery-half'] + ' ' + fa.icons['user-secret'] + ' ' + fa.icons['eye-slash'] + ' ' + fa.icons['battery-full'] + ' ' + fa.icons['eye'] + ' ' + fa.icons['bug']
#faicon2 = fa.icons['signal'] + fa.icons['wifi'] + fa.icons['bluetooth'] + fa.icons['wifi'] + fa.icons['toggle-off'] + fa.icons['plug']
faicon2 = 'Status: Gro0vy'
# Working icons that look decent:
# server, lock, user-secret, bug
# Working icon pairs that look decent:
# pairs: globe/unlink (internet/nointernet), eye/eye-slash (tor/noTor), battery-full/half
Add Clock (and Date)
- Run this command to fetch current time from Google and set Linux system clock
sudo date -s "$(wget -qSO- --max-redirect=0 google.com 2>&1 | grep Date: | cut -d' ' -f5-8)Z"
- Change time zone
sudo dpkg-reconfigure tzdata
- Show clock
Use the code in ~/sw/sh1106demo/luma.examples/examples (on RPi 0 2 W)
(Here's a 2nd way to fetch time, set time, and force set to hwclock)
sudo ntpd -qg; sudo hwclock -w
More To Do:
- Make left vertical bar interior area only 3px wide (minimum triangle width) .|.
- Make sure interior canvas area is at least 102px wide (for a 100% progress bar + padding)
UPDATE: Added Battery & Message Icons
I added a font-awesome battery icon & notification (message envelope) icon in the bottom right corner of the screen.
Since there were several icons in the top icon bar already, it was getting crowded.
So I took the short, wide icons (battery icon, message icon) and put them in the bottom right corner stacked.
(Eventually I plan to have the battery icon correspond to a PiSugar plugin / UPS Lite plugin.)
Fitting the Message Icon In
The message icon snugs up nicely above the battery icon and just below the KEY3 ellipse (circle). I did make some pixel-fine adjustments to the KEY1,2,3 ellipses, so now they're 16 pixels in diameter instead of 20. This gave more room to the left of the KEY123 buttons AND below the KEY123 buttons.
Furthermore, I replaced integer values that were scattered throughout the script with variables. This makes it much easier to adjust things - and just change them in one place, instead of hunting for every occurrence of that string.
This is what made it so easy to adjust the KEY123 button sizes & positions to make room for the Message icon and Battery icon.
Bonus "Server" Icon:
I added a "server" icon in the top icon bar. This will be used for Spiderfoot or any other server / service.