Added features

Language selection Dimming feature Improvements to the code
2026-02-19 11:54:56 -05:00 · 2025-07-07 13:22:06 +09:00
parent 91d9b222a8
commit 2c3092bd0d
5 changed files with 777 additions and 236 deletions
--- a/ESPTimeCast.ino
+++ b/ESPTimeCast.ino
--- a/data/config.json
+++ b/data/config.json
@@ -14,5 +14,6 @@
  "ntpServer2": "time.nist.gov",
  "twelveHourToggle": false,
  "showDayOfWeek": true,
-  "showHumidity": false
+  "showHumidity": false,
+  "language": "en"
 }
--- a/data/index.html
+++ b/data/index.html
@@ -72,6 +72,7 @@
    margin-top: 0.75rem; 
  }
  input[type="text"], 
+  input[type="time"],   
  input[type="password"], 
  input[type="number"], select {
    width: 100%; padding: 0.75rem;
@@ -81,6 +82,12 @@
    color: #ffffff;
    font-size: 1rem; appearance: none;
  }
+
+  input[type="time"]:disabled ,
+  input[type="number"]:disabled {
+    color: rgba(255, 255, 255, 0.250);
+  }
+
  input[type="submit"] {
    background-color: #007aff; color: white;
    padding: 0.9rem; font-size: 1rem;
@@ -91,6 +98,10 @@
    background-color: #005ecb;
  }

+input[type="time"]::-webkit-calendar-picker-indicator{
+  filter: invert(100%);
+}
+
  input:-webkit-autofill,
 input:-webkit-autofill:focus,
 input:-webkit-autofill:hover {
@@ -389,6 +400,38 @@ textarea::placeholder {
    <option value="Etc/UTC">Etc/UTC</option>
  </select>

+    <label for="language">Day of Week Language</label>
+  <select id="language" name="language" onchange="setLanguage(this.value)">
+    <option value="" disabled selected>Select language</option>
+    <option value="af">Afrikaans</option>
+    <option value="hr">Croatian</option>
+    <option value="cs">Czech</option>
+    <option value="da">Danish</option>
+    <option value="nl">Dutch</option>
+    <option value="en">English</option>
+    <option value="eo">Esperanto</option>
+    <option value="et">Estonian</option>
+    <option value="fi">Finnish</option>
+    <option value="fr">French</option>
+    <option value="de">German</option>
+    <option value="hu">Hungarian</option>
+    <option value="it">Italian</option>
+    <option value="ja">Japanese</option>
+    <option value="lv">Latvian</option>
+    <option value="lt">Lithuanian</option>
+    <option value="no">Norwegian</option>
+    <option value="pl">Polish</option>
+    <option value="pt">Portuguese</option>
+    <option value="ro">Romanian</option>
+    <option value="sk">Slovak</option>
+    <option value="sl">Slovenian</option>
+    <option value="es">Spanish</option>
+    <option value="sv">Swedish</option>
+    <option value="sw">Swahili</option>
+    <option value="tr">Turkish</option>
+  </select>
+
+
  <div class="form-row two-col">
    <div>
      <label for="clockDuration">Clock Duration</label>
@@ -422,7 +465,7 @@ textarea::placeholder {
      <label style="display: flex; align-items: center; margin-top: 1.75rem; justify-content: space-between;">
        <span style="margin-right: 0.5em;">Show Day of Week:</span>
        <span class="toggle-switch">
-          <input type="checkbox" name="showDayOfWeek" id="showDayOfWeek" checked>
+          <input type="checkbox" id="showDayOfWeek" name="showDayOfWeek" onchange="setShowDayOfWeek(this.checked)">
          <span class="toggle-slider"></span>
        </span>
      </label>
@@ -431,7 +474,7 @@ textarea::placeholder {
      <label style="display: flex; align-items: center; margin-top: 1.75rem; justify-content: space-between;">
        <span style="margin-right: 0.5em;">Display 12-hour Clock:</span>
        <span class="toggle-switch">
-          <input type="checkbox" name="twelveHourToggle" id="twelveHourToggle">
+          <input type="checkbox" id="twelveHourToggle" name="twelveHourToggle" onchange="setTwelveHour(this.checked)">
          <span class="toggle-slider"></span>
        </span>
      </label>
@@ -440,7 +483,7 @@ textarea::placeholder {
      <label style="display: flex; align-items: center; margin-top: 1.75rem; justify-content: space-between;">
        <span style="margin-right: 0.5em;">Show Humidity:</span>
        <span class="toggle-switch">
-          <input type="checkbox" name="showHumidity" id="showHumidity">
+          <input type="checkbox" id="showHumidity" name="showHumidity" onchange="setShowHumidity(this.checked)">
          <span class="toggle-slider"></span>
        </span>
      </label>
@@ -449,17 +492,45 @@ textarea::placeholder {
      <label style="display: flex; align-items: center; margin-top: 1.75rem; justify-content: space-between;">
        <span style="margin-right: 0.5em;">Flip Display (180°):</span>
        <span class="toggle-switch">
-          <input type="checkbox" name="flipDisplay" id="flipDisplay">
+          <input type="checkbox" id="flipDisplay" name="flipDisplay" onchange="setFlipDisplay(this.checked)">
          <span class="toggle-slider"></span>
        </span>
      </label>

            <!-- Brightness Slider with Value -->
      <label style="margin-top: 1.75rem;">Brightness: <span id="brightnessValue">10</span></label>
-      <input style="width: 100%;" type="range" min="0" max="15" name="brightness" id="brightnessSlider" value="10" oninput="brightnessValue.textContent = brightnessSlider.value">   
+      <input style="width: 100%;" type="range" min="0" max="15" name="brightness" id="brightnessSlider" value="10" 
+      oninput="brightnessValue.textContent = brightnessSlider.value; setBrightnessLive(this.value);">
+      <br><br>
+
+        <!-- Dimming Controls -->
+      <label style="display: flex; align-items: center; justify-content: space-between;">
+        <span style="margin-right: 0.5em;">Enable Dimming:</span>
+        <span class="toggle-switch">
+          <input type="checkbox" id="dimmingEnabled" name="dimmingEnabled">
+        <span class="toggle-slider"></span>
+        </span>
+      </label>
+
+        <div class="form-row two-col">   
+          <div>         
+            <label for="dimStartTime">Dimming Start Time:</label>
+            <input type="time" id="dimStartTime" value="18:00">
+          </div>
+
+          <div>
+            <label for="dimEndTime">Dimming End Time:</label>
+            <input type="time" id="dimEndTime" value="08:00">
+          </div>
+        </div>
+
+                <div style="margin-top: 1rem;">
+          <label for="dimBrightness">Dimming Brightness (0-15):</label>
+          <input type="number" id="dimBrightness" min="0" max="15" value="2" style="width:80px;">
+        </div>
+
      </div>   
    </div>
-
  <input type="submit" class="primary-button" value="Save Settings">
 </form>

@@ -511,6 +582,7 @@ window.onload = function () {
      document.getElementById('weatherUnits').value = data.weatherUnits || 'metric';
      document.getElementById('clockDuration').value = (data.clockDuration || 10000) / 1000;
      document.getElementById('weatherDuration').value = (data.weatherDuration || 5000) / 1000;
+      document.getElementById('language').value = data.language || '';
      // Advanced:
      document.getElementById('brightnessSlider').value = typeof data.brightness !== "undefined" ? data.brightness : 10;
      document.getElementById('brightnessValue').textContent = document.getElementById('brightnessSlider').value;
@@ -520,6 +592,33 @@ window.onload = function () {
      document.getElementById('twelveHourToggle').checked = !!data.twelveHourToggle;
      document.getElementById('showDayOfWeek').checked = !!data.showDayOfWeek;
      document.getElementById('showHumidity').checked = !!data.showHumidity;
+
+            // Dimming controls
+const dimmingEnabledEl = document.getElementById('dimmingEnabled');
+const isDimming = (data.dimmingEnabled === true || data.dimmingEnabled === "true" || data.dimmingEnabled === 1);
+dimmingEnabledEl.checked = isDimming;
+
+// Defer field enabling until checkbox state is rendered
+setTimeout(() => {
+  setDimmingFieldsEnabled(dimmingEnabledEl.checked);
+}, 0);
+
+dimmingEnabledEl.addEventListener('change', function () {
+  setDimmingFieldsEnabled(this.checked);
+});
+
+      document.getElementById('dimStartTime').value =
+  (data.dimStartHour !== undefined ? String(data.dimStartHour).padStart(2, '0') : "18") + ":" +
+  (data.dimStartMinute !== undefined ? String(data.dimStartMinute).padStart(2, '0') : "00");
+
+document.getElementById('dimEndTime').value =
+  (data.dimEndHour !== undefined ? String(data.dimEndHour).padStart(2, '0') : "08") + ":" +
+  (data.dimEndMinute !== undefined ? String(data.dimEndMinute).padStart(2, '0') : "00");
+
+      document.getElementById('dimBrightness').value = (data.dimBrightness !== undefined ? data.dimBrightness : 2);
+
+      setDimmingFieldsEnabled(!!data.dimmingEnabled);
+
      // Auto-detect browser's timezone if not set in config
      if (!data.timeZone) {
        try {
@@ -581,6 +680,24 @@ async function submitConfig(event) {
  formData.set('showDayOfWeek', document.getElementById('showDayOfWeek').checked ? 'on' : '');
  formData.set('showHumidity', document.getElementById('showHumidity').checked ? 'on' : '');

+  //dimming
+  formData.set('dimmingEnabled', document.getElementById('dimmingEnabled').checked ? 'true' : 'false');
+  const dimStart = document.getElementById('dimStartTime').value; // "18:45"
+  const dimEnd = document.getElementById('dimEndTime').value;     // "08:30"
+
+  // Parse hour and minute
+  if (dimStart) {
+    const [startHour, startMin] = dimStart.split(":").map(x => parseInt(x, 10));
+    formData.set('dimStartHour', startHour);
+    formData.set('dimStartMinute', startMin);
+  }
+  if (dimEnd) {
+    const [endHour, endMin] = dimEnd.split(":").map(x => parseInt(x, 10));
+    formData.set('dimEndHour', endHour);
+    formData.set('dimEndMinute', endMin);
+  }
+  formData.set('dimBrightness', document.getElementById('dimBrightness').value);
+
  const params = new URLSearchParams();
  for (const pair of formData.entries()) {
    params.append(pair[0], pair[1]);
@@ -806,6 +923,72 @@ const toggle = document.querySelector('.collapsible-toggle');
      content.style.height = 'auto';
    }

+let brightnessDebounceTimeout = null;
+
+function setBrightnessLive(val) {
+  // Cancel the previous timeout if it exists
+  if (brightnessDebounceTimeout) {
+    clearTimeout(brightnessDebounceTimeout);
+  }
+  // Set a new timeout
+  brightnessDebounceTimeout = setTimeout(() => {
+    fetch('/set_brightness', {
+      method: 'POST',
+      headers: { "Content-Type": "application/x-www-form-urlencoded" },
+      body: "value=" + encodeURIComponent(val)
+    })
+    .then(res => res.json())
+    .catch(e => {}); // Optionally handle errors
+  }, 150); // 150ms debounce, adjust as needed
+}
+
+function setFlipDisplay(val) {
+  fetch('/set_flip', {
+    method: 'POST',
+    headers: { "Content-Type": "application/x-www-form-urlencoded" },
+    body: "value=" + (val ? 1 : 0)
+  });
+}
+
+function setTwelveHour(val) {
+  fetch('/set_twelvehour', {
+    method: 'POST',
+    headers: { "Content-Type": "application/x-www-form-urlencoded" },
+    body: "value=" + (val ? 1 : 0)
+  });
+}
+
+function setShowDayOfWeek(val) {
+  fetch('/set_dayofweek', {
+    method: 'POST',
+    headers: { "Content-Type": "application/x-www-form-urlencoded" },
+    body: "value=" + (val ? 1 : 0)
+  });
+}
+
+function setShowHumidity(val) {
+  fetch('/set_humidity', {
+    method: 'POST',
+    headers: { "Content-Type": "application/x-www-form-urlencoded" },
+    body: "value=" + (val ? 1 : 0)
+  });
+}
+
+function setLanguage(val) {
+  fetch('/set_language', {
+    method: 'POST',
+    headers: { "Content-Type": "application/x-www-form-urlencoded" },
+    body: "value=" + encodeURIComponent(val)
+  });
+}
+
+// --- Dimming Controls Logic ---
+function setDimmingFieldsEnabled(enabled) {
+  document.getElementById('dimStartTime').disabled = !enabled;
+  document.getElementById('dimEndTime').disabled = !enabled;
+  document.getElementById('dimBrightness').disabled = !enabled;
+}
+
 </script>
 </body>
 </html>
--- a/days_lookup.h
+++ b/days_lookup.h
@@ -0,0 +1,49 @@
+#ifndef DAYS_LOOKUP_H
+#define DAYS_LOOKUP_H
+
+typedef struct {
+    const char* lang;
+    const char* days[7]; // Sunday to Saturday (tm_wday order)
+} DaysOfWeekMapping;
+
+const DaysOfWeekMapping days_mappings[] = {
+    { "af", { "s&u&n", "m&a&a", "d&i&n", "w&o&e", "d&o&n", "v&r&y", "s&o&n" } },
+    { "cs", { "n&e&d", "p&o&n", "u&t&e", "s&t&r", "c&t&v", "p&a&t", "s&o&b" } },
+    { "da", { "s&o&n", "m&a&n", "t&i&r", "o&n&s", "t&o&r", "f&r&e", "l&o&r" } },
+    { "de", { "s&o&n", "m&o&n", "d&i&e", "m&i&t", "d&o&n", "f&r&e", "s&a&m" } },
+    { "en", { "s&u&n", "m&o&n", "t&u&e", "w&e&d", "t&h&u", "f&r&i", "s&a&t" } },
+    { "eo", { "d&i&m", "l&u&n", "m&a&r", "m&e&r", "j&a&u", "v&e&n", "s&a&b" } },
+    { "es", { "d&o&m", "l&u&n", "m&a&r", "m&i&e", "j&u&e", "v&i&e", "s&a&b" } },
+    { "et", { "p&a",   "e&s",   "t&e",   "k&o",   "n&e",   "r&e",   "l&a" } },
+    { "fi", { "s&u&n", "m&a&a", "t&i&s", "k&e&s", "t&o&r", "p&e&r", "l&a&u" } },
+    { "fr", { "d&i&m", "l&u&n", "m&a&r", "m&e&r", "j&e&u", "v&e&n", "s&a&m" } },
+    { "hr", { "n&e&d", "p&o&n", "u&t&o", "s&r&i", "c&e&t", "p&e&t", "s&u&b" } },
+    { "hu", { "v&a&s", "h&e&t", "k&e&d", "s&z&e", "c&s&u", "p&e&t", "s&z&o" } },
+    { "it", { "d&o&m", "l&u&n", "m&a&r", "m&e&r", "g&i&o", "v&e&n", "s&a&b" } },
+    { "ja", { "±", "²", "³", "´", "µ", "¶", "·" } },
+    { "lt", { "s&e&k", "p&i&r", "a&n&t", "t&r&e", "k&e&t", "p&e&n", "s&e&s" } },
+    { "lv", { "s&v&e", "p&i&r", "o&t&r", "t&r&e", "c&e&t", "p&i&e", "s&e&s" } },
+    { "nl", { "z&o&n", "m&a&a", "d&i&n", "w&o&e", "d&o&n", "v&r&i", "z&a&t" } },
+    { "no", { "s&o&n", "m&a&n", "t&i&r", "o&n&s", "t&o&r", "f&r&e", "l&o&r" } },
+    { "pl", { "n&i&e", "p&o&n", "w&t&o", "s&r&o", "c&z&w", "p&i&a", "s&o&b" } },
+    { "pt", { "d&o&m", "s&e&g", "t&e&r", "q&u&a", "q&u&i", "s&e&x", "s&a&b" } },
+    { "ro", { "d&u&m", "l&u&n", "m&a&r", "m&i&e", "j&o&i", "v&i&n", "s&a&m" } },
+    { "sk", { "n&e&d", "p&o&n", "u&t&o", "s&t&r", "s&t&v", "p&i&a", "s&o&b" } },
+    { "sl", { "n&e&d", "p&o&n", "t&o&r", "s&r&e", "c&e&t", "p&e&t", "s&o&b" } },
+    { "sv", { "s&o&n", "m&a&n", "t&i&s", "o&n&s", "t&o&r", "f&r&e", "l&o&r" } },
+    { "sw", { "j&p&l", "j&u&m", "j&t&t", "j&t&n", "a&l&k", "i&j&m", "j&m&s" } },
+    { "tr", { "p&a&z", "p&a&z", "s&a&l", "c&a&r", "p&e&r", "c&u&m", "c&u&m" } }
+};
+
+#define DAYS_MAPPINGS_COUNT (sizeof(days_mappings)/sizeof(days_mappings[0]))
+
+inline const char* const* getDaysOfWeek(const char* lang) {
+    for (size_t i = 0; i < DAYS_MAPPINGS_COUNT; i++) {
+        if (strcmp(lang, days_mappings[i].lang) == 0)
+            return days_mappings[i].days;
+    }
+    // fallback to English if not found
+    return days_mappings[4].days; // "en" is index 4
+}
+
+#endif // DAYS_LOOKUP_H
--- a/mfactoryfont.h
+++ b/mfactoryfont.h
@@ -3,7 +3,7 @@

 MD_MAX72XX::fontType_t mFactory[] PROGMEM = 
 {
-	1, 0, 	// 0 - 'Empty Cell'
+1, 0, 	// 0 - 'Empty Cell'
 	1, 0, 	// 1 - 'Sad Smiley'
 	1, 0, 	// 2 - 'Happy Smiley'
 	1, 0, 	// 3 - 'Heart'
@@ -39,18 +39,18 @@ MD_MAX72XX::fontType_t mFactory[] PROGMEM =
 	1, 0, 	// 33 - '!'
 	1, 0, 	// 34 - '""'
 	1, 0, 	// 35 - '#'
-	11, 157, 149, 245, 1, 253, 21, 253, 1, 5, 253, 5, 	// 36 - '$'
+	16, 72, 84, 36, 0, 12, 112, 12, 0, 124, 4, 120, 0, 56, 68, 68, 0, 	// 36 - '$'
 	6, 66, 37, 18, 72, 164, 66, 	// 37 - '%'
-	11, 157, 149, 245, 1, 253, 129, 253, 1, 253, 5, 253, 	// 38 - '&'
+	1, 1, 	// 38 - '&'
 	1, 0, 	// 39 - ''
 	1, 0, 	// 40 - '('
 	1, 0, 	// 41 - ')'
-	11, 253, 9, 253, 1, 253, 133, 253, 1, 253, 5, 253, 	// 42 - '*'
+	18, 4, 124, 4, 0, 124, 84, 68, 0, 124, 4, 124, 4, 120, 0, 124, 20, 8, 0, 	// 42 - '*'
 	1, 0, 	// 43 - '+'
-  1, 64, 	// 44 - ','
-	2, 8, 8,  	// 45 - '-'
+	2, 64, 0, 	// 44 - ','
+	2, 8, 8, 	// 45 - '-'
 	1, 128, 	// 46 - '.'
-	11, 5, 253, 5, 1, 253, 129, 253, 1, 253, 149, 133, 	// 47 - '/'
+	12, 124, 4, 120, 0, 4, 124, 4, 0, 124, 20, 8, 0, 	// 47 - '/'
 	3, 126, 129, 126, 	// 48 - '0'
 	2, 2, 255, 	// 49 - '1'
 	3, 194, 177, 142, 	// 50 - '2'
@@ -64,10 +64,10 @@ MD_MAX72XX::fontType_t mFactory[] PROGMEM =
 	1, 36, 	// 58 - ':'
 	1, 0, 	// 59 - ';'
 	1, 0, 	// 60 - '<'
-	11, 253, 21, 5, 1, 253, 37, 217, 1, 133, 253, 133, 	// 61 - '='
+	1, 0, 	// 61 - '='
 	1, 0, 	// 62 - '>'
-	11, 253, 65, 253, 1, 253, 149, 133, 1, 253, 133, 121, 	// 63 - '?'
-	11, 5, 253, 5, 1, 253, 17, 253, 1, 253, 129, 253, 	// 64 - '@'
+	8, 124, 4, 120, 0, 56, 68, 56, 0, 	// 63 - '?'
+	1, 250, 	// 64 - '@'
 	4, 254, 17, 17, 254, 	// 65 - 'A'
 	4, 255, 137, 137, 118, 	// 66 - 'B'
 	4, 126, 129, 129, 66, 	// 67 - 'C'
@@ -100,41 +100,41 @@ MD_MAX72XX::fontType_t mFactory[] PROGMEM =
 	3, 8, 4, 8, 	// 94 - '^'
 	3, 32, 32, 32, 	// 95 - '_'
 	2, 4, 8, 	// 96 - '`'
-	3, 123, 43, 123, 	// 97 - 'a'
-	3, 62, 40, 56, 	// 98 - 'b'
-  3, 56, 68, 68, 	// 99 - 'c'
-	3, 56, 40, 62, 	// 100 - 'd'
-	3, 124, 84, 68, 	// 101 - 'e'
-	3, 8, 62, 10, 	// 102 - 'f'
-  3, 56, 84, 116, 	// 103 - 'g'
-	3, 62, 8, 56, 	// 104 - 'h'
-  1, 250, 	// 105 - 'i'
-	2, 32, 58, 	// 106 - 'j'
-	3, 60, 16, 40, 	// 107 - 'k'
-	1, 60, 	// 108 - 'l'
-  5, 124, 4, 124, 4, 120, 	// 109 - 'm'
-  3, 124, 4, 120, 	// 110 - 'n'
-	3, 56, 68, 56, 	// 111 - 'o'
-  3, 124, 20, 8, 	// 112 - 'p'
-	3, 56, 40, 120, 	// 113 - 'q'
-	3, 56, 8, 24, 	// 114 - 'r'
-  3, 72, 84, 36, 	// 115 - 's'
-  3, 4, 124, 4, 	// 116 - 't'
-	3, 56, 32, 56, 	// 117 - 'u'
-	3, 24, 32, 24, 	// 118 - 'v'
-	3, 56, 48, 56, 	// 119 - 'w'
-	3, 40, 16, 40, 	// 120 - 'x'
-  3, 12, 112, 12, 	// 121 - 'y'
-	3, 36, 52, 44, 	// 122 - 'z'
+	3, 249, 21, 249, 	// 97 - 'a'
+	3, 253, 149, 105, 	// 98 - 'b'
+	3, 121, 133, 133, 	// 99 - 'c'
+	3, 253, 133, 121, 	// 100 - 'd'
+	3, 253, 149, 133, 	// 101 - 'e'
+	3, 253, 21, 5, 	// 102 - 'f'
+	3, 121, 149, 245, 	// 103 - 'g'
+	3, 253, 17, 253, 	// 104 - 'h'
+	3, 133, 253, 133, 	// 105 - 'i'
+	3, 65, 129, 125, 	// 106 - 'j'
+	3, 253, 17, 237, 	// 107 - 'k'
+	3, 253, 129, 129, 	// 108 - 'l'
+	3, 253, 9, 253, 	// 109 - 'm'
+	3, 253, 5, 249, 	// 110 - 'n'
+	3, 121, 133, 121, 	// 111 - 'o'
+	3, 253, 21, 9, 	// 112 - 'p'
+	3, 57, 69, 249, 	// 113 - 'q'
+	3, 253, 21, 233, 	// 114 - 'r'
+	3, 137, 149, 101, 	// 115 - 's'
+	3, 5, 253, 5, 	// 116 - 't'
+	3, 253, 129, 253, 	// 117 - 'u'
+	3, 61, 193, 61, 	// 118 - 'v'
+	3, 253, 65, 253, 	// 119 - 'w'
+	3, 237, 17, 237, 	// 120 - 'x'
+	3, 13, 241, 13, 	// 121 - 'y'
+	3, 197, 181, 141, 	// 122 - 'z'
 	1, 0, 	// 123 - '{'
 	1, 0, 	// 124 - '|'
 	1, 0, 	// 125 - '}'
-  0, 	// 126 - '~'
+	0, 	// 126 - '~'
 	0, 	// 127 - ''
-  0, 	// 128 - '€'
+	0, 	// 128 - '€'
 	0, 	// 129 - ''
 	0, 	// 130 - '‚'
-  0, 	// 131 - 'ƒ'
+	0, 	// 131 - 'ƒ'
 	0, 	// 132 - '„'
 	0, 	// 133 - '…'
 	0, 	// 134 - '†'
@@ -177,16 +177,16 @@ MD_MAX72XX::fontType_t mFactory[] PROGMEM =
 	8, 224, 224, 0, 252, 252, 0, 255, 255, 	// 171 - '«'
 	0, 	// 172 - '¬'
 	0, 	// 173 - ''
-  5, 64, 0, 0, 0, 0, 	// 174 - '®'
+	5, 64, 0, 0, 0, 0, 	// 174 - '®'
 	5, 64, 0, 64, 0, 0, 	// 175 - '¯'
-  5, 64, 0, 64, 0, 64, 	// 176 - '°'
-	0, 	// 177 - '±'
-	0, 	// 178 - '²'
-	0, 	// 179 - '³'
-	0, 	// 180 - '´'
-	0, 	// 181 - 'µ'
-	0, 	// 182 - '¶'
-	0, 	// 183 - '·'
+	5, 64, 0, 64, 0, 64, 	// 176 - '°'
+	6, 254, 146, 146, 146, 254, 0, 	// 177 - '±'
+	7, 128, 126, 42, 42, 170, 254, 0, 	// 178 - '²'
+	8, 128, 152, 64, 62, 80, 136, 128, 0, 	// 179 - '³'
+	8, 72, 40, 152, 254, 16, 40, 68, 0, 	// 180 - '´'
+	8, 68, 36, 20, 254, 20, 36, 68, 0, 	// 181 - 'µ'
+	8, 168, 232, 172, 250, 172, 232, 168, 0, 	// 182 - '¶'
+	8, 128, 136, 136, 254, 136, 136, 128, 0, 	// 183 - '·'
 	0, 	// 184 - '¸'
 	0, 	// 185 - '¹'
 	3, 4, 10, 4, 	// 186 - 'º'