Code Monkey home page Code Monkey logo

wordclock's Introduction

WordClock

Version mantained

maintainer

Font and german layout based on https://www.mikrocontroller.net/articles/Word_Clock

Requirements

Healthcheck

WordClock

Assemble

Word-Clock - Die WLAN Wort-Uhr zum selber bauen

Customizations

Modify user_config.h to change config

Key Values Comment
GRID_ROWS 10
11
count of rows
GRID_COLS 11 count of cols
GRID_FIRST 0: top-left
1: top-right
2: buttom-left
3: buttom-right
position of first led
GRID_LANGUAGE de_DE: german
de_DE_alt: german alternative
langauge
GRID_SINGLE_MINUTES 0: before
1: after
position of minutes leds

Installation

Make your Arduino ready for Wemos D1 mini e.g. https://makesmart.net/blog/read/esp8266-d1-mini-programmieren-der-start-mit-der-arduino-ide

  • Change the grid settings in the wordclock/user_config.h.
  • Upload the sketch wordclock/wordclock.ino to your Wemos D1 mini (or other ESP8266).
  • Enjoy

Usage

The WordClock creates a WiFi-Hotspot with the name "WordClock". Connect e.g. your smartphone to the hotspot and you will be forwared to the config page, where you can set the WiFi credentials. Check in your router what IP-adress your WordClock got. Open a webbrowser and go to http://[YOUR_WORDCLOCK_IP]. For (example) the IP-adress 192.168.178.20 go to http://192.168.178.20.

Functions

Set color

You can set a foreground and background color on your clock.

Set time offset

You can set a time offset to specify your timezone.

Set DND

You can set a time span in which the clock should be switched off.

PWA

You can use the webbrowser function "Add to start screen" to install the webinterface as an app to your android (and possibly ios) smartphone.

Create own grid-layout

To create your own grid-layout visit the Wiki: Create Grid-Layout

Support me / Follow me

Web Facebook Twitter Instagram YouTube

wordclock's People

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

wordclock's Issues

LEDs leuchten nach

Hallo zusammen,

bei mir leuchten ein paar LEDs nach...
Nachts schalte ich die über den Zeitplan aus, aber aktuell leuchten zwei LEDs schwach blau weiter...
Habt ihr eine Idee woran das liegen könnte?
schlechte Verkabelung?
LEDs defekt?

Danke und Grüße

Frage zu Minuten LED´s

Hallo lieber Entwickler,

vorab bedanke ich mich bei Ihnen für die Möglichkeit dieses tolle Projekt nachbauen zu dürfen.

Hierbei handelt es sich weniger um einen Issue sondern mehr um eine Anfrage.

Mein Aufbau:
In meinem Fall habe ich ein Grid von 11x11 LEDs, Minutenposition after und Start LED unten links bei Draufsicht gewählt.
Auf vier zusätzliche LED habe ich wegen der schmalen Bauform des RIBBA Rahmens verzichtet.

Meine Frage wäre nun ob ich evtl. in der Konfiguration die Position der Minuten LEDs selbst ändern kann und wenn ja wo. Bei dem von Ihnen vorgegebenen Grid Layout besteht bei einer LED Bestückung von 11x11 LEDs die unterste Zeile aus der Buchstabenreihe "E-V-F-X-R-N-Z-S-L-P-I".
Dies scheint ja ein optischer Platzhalter zu sein da sich hieraus keine Wörter Bilden lassen. Ich hatte mir vorgestellt hier die Positionen "F R Z L" für die Minuten zu missbrauchen.

Sollte dies möglich sein dann würde ich mich über einen Hinweis freuen. Ansonsten Anfrage bitte einfach ignorieren und schliessen. Vielen Dank im Voraus.

LG Sven O.

Funktioniert der 11x10 Modus schon? :)

Hi Panbachi,

funktioniert der 11x10 Modus schon richtig?
Ich habe es gerade getestet, aber irgendwie sah die Anzeige komisch aus ;)
Oder funktioniert die Eckenwahl für die erste LED nicht?
Kann ich den Minutenzähler auch ausschalten oder schreibe ich den ans Ende und schneide den Streifen ab? :)

Sorry für die vielen Fragen, ich hoffe es hilft dir :)

Grüße

Time not updating automatically

Hey guys,

currently setting up the clock.
First of all, nice work and thank you!

However, as a newbie in C++ I am currently struggeling a little.
My issue:
The ESP8266 does not automatically update the time. If i restart, the correct time is taken from the NTP Server.
Anbyody had this problem?

Tried 4.0.1 and master branch.
Thanks :)

Brightness

Is it possible to change brightness in 4.0.1 ?
I only find the option in the "led.cpp" but I am not sure if it the right one.

Thx

geänderter Eingangssatz funktioniert nicht "ES IST"

Hallo Zusammen

Besten Dank erstmals dem Ersteller für den Code!

Ich habe ein kleines Problem mit der Uhr. Ich habe, da ich aus der Schweiz kommen, mir ein neues Layout in Berndeutsch angelegt.
Nun habe ich das Problem, dass der Eingangssatz, obwohl in der Sprachdatei geändert, nicht richtig angesteuert werden!

Folgendes habe ich in den Dateien dazu geändert:
de_DE.h: static int time_it_is[9];
de_DE.cpp: int Grid_de_DE::time_it_is[9] = { 0, 1, 3, 4, 5, 6, 8, 9, 10}; // ES ISCH ÄUÄ

Ob wohl ich die oben geschriebenen Änderungen vorgenommen habe, werden als Eingangssatz nur die LED's 0,1,4,5,6 angesteuert, wie in der Originalen Sprache für "ES IST".

Ist der Eingassatz noch irgendwo anders in einer Datei definiert, oder wie bekommen ich meinen eigenen Eingangssatz zum laufen?

IMG_20211121_215344_resized_20211121_095417312 911

weitere Sprache/Dialekt (Kölsch)

Habe mal ohne jegliche C++ Kenntnisse versucht, eine weitere Sprache hinzuzufügen.
war recht mühselig wenn man die Formeln nicht wirklich versteht und nur mit Logik herangehen konnte:

E | T | D | E | S | K | H | Z | E | H | N
F | A | B | V | E | E | D | E | L | Y | M
R | O | Z | W | A | N | Z | I | G | E | S
F | Ü | N | N | E | F | X | U | F | Ü | R
A | N | O | H | U | K | H | A | L | F | E
Z | W | E | I | G | E | V | E | E | R | U
S | I | B | B | E | L | F | A | A | C | H
P | Z | W | Ö | L | F | Ü | N | N | E | F
D | R | E | I | N | S | E | C | H | S | A
Z | E | H | N | Ü | N | G | V | O | H | R
E | V | F | X | R | N | Z | S | L | P | I

Hier mal die Dateien die ich modifiziert habe:
kölsch upload.zip
scheint jetzt endlich zu funktionieren

max. Helligkeit nur 95%

Hi.

Egal, welche Netzteilstärke ich eingebe ... ich bekomme als max. Helligkeit nur 95% angezeigt.
Ist das so gewollt?

wrong definition of "GRID_FIRST : top-left" in user_config.h (Postition of first LED)

In "user_config.h " the definition of GRID_FIRST = 0 means "top-left", but does not show useful times on "top-left" strips.
Instead I had to use GRID_FIRST = 1 for my strip starting "top-left" (links-oben), to get the correct times displayed.
Assumption: ("top-left" by looking at the front of the clock)

/* Postition of first LED  
 *   
 * Options
 * -------
 * 0: top-left              (bug:  a '1' works for top-left)
 * 1: top-right             (is top-right a '0' then???)
 * 2: buttom-left
 * 3: buttom-right
 */
#define GRID_FIRST 1

Compile error: obsolete API, use ::begin(WiFiClient, url) in "src/utcOffset.cpp"

Arduino IDE: 1.8.15 (Mac OS X)
Ard-ESP-Core: https://arduino.esp8266.com/stable/package_esp8266com_index.json
ESP8266 Board: LOLIN(WEMOS) D1 R2 & mini

Compile Error in "src/utcOffset.cpp":

/WordClock401_ESP8266/src/utcOffset.cpp: In static member function 'static void UtcOffset::updateLocalizedUtcOffset()':
/WordClock401_ESP8266/src/utcOffset.cpp:9:13: error: call to 'HTTPClient::begin' declared with attribute error: obsolete API, use ::begin(WiFiClient, url)
    9 |   http.begin("http://worldtimeapi.org/api/ip");

exit status 1
Fehler beim Kompilieren für das Board LOLIN(WEMOS) D1 R2 & mini.

Fehler beim Kompiliren

Ich bekomme immer Folgene Fehlermeldung und einen Abruch beim Kompilieren:

C:\Program Files\Arduino\libraries\WiFiManager/WiFiManager.h:25:24: error: 'const char HTTP_HEAD []' redeclared as different kind of entity
25 | const char HTTP_HEAD[] PROGMEM = "<html lang="en"><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/><title>{v}</title>";
| ^~~~~~~

Ich kann damit nichts anfangen, Libary ist aktuel aber die fehlermeldung bleibt und ich bekomme es nicht Hochgeladen.

Hat da jemand eine idee ??

Erste LED wird grün nach Minutenwechsel

Wie im Titel beschrieben wird die erste LED (Led 0; das "E" von "ES IST") färbt sich grün. Mir ist aufgefallen wenn man es mit einer anderen synchronisierten Uhr vergleicht, dann passiert wenn sich die "Minute" ändert. Also Spannung drauf alles gut und wenn jetzt die Minute von z.B. 27 auf 28 sich ändert, wird das "E" grün.

Bei meiner ersten Uhr war es nicht so und bei der jetzigen/zweiten ist halt dieser Fehler.
Hoffe mir kann da evtl. wer helfen?!

Summertime GMT+2 not persistent

After the time change from wintertime to summertime was tonight, I wanted to set the clock to the correct time (GMT+2). Unfortunately this does not work properly. If I set the time in the WebInterface from GMT+1 to GMT+2, the next time step (the next minute) is displayed with the correct time (e.g. 10.05 o'clock). But as soon as the time jumps one minute further (actually then logically 10.06 o'clock), the clock shows 9.06 o'clock. The change to GMT+2 is apparently only "effective" for exactly one minute.

I use version 4.0.1 with additional RTC (according to #9 (comment)).

Does anyone have an idea how I can set the time zone GMT+2 permanently?

Thanks in advance.

Feature: dimm light at night.

Hi, it would be great to have the possibility to lower the light intensity at the evening and maximize it in the morning. Some Kind of scheduler or http requests description would be great.

LED Schlangenanordnung ändern

Servus,
kann man in dem Code die Anordnung der Leds ändern? Hab des Ganze nicht schlangenförmig angeordnet. Ich habe von oben links beginnend die Streifen immer von links nach rechts angeordnet wie man ein Buch liest bzw. wie die Anordnung in der "Tabelle" (https://github.com/panbachi/wordclock/wiki/Create-Grid-Layout) ist. Habe die GRID_ROWS=10 GRID_COLS=11 Anordnung genommen.
Bin Recht neu in der Programmierung und kann nicht wirklich etwas im Code finden.
Hoffe ihr könnt mir auf einfachem Weg helfen.

Time offset isnt working

The time offset, which i set in the gui have no effect on the time at all. I tried latest release 4.0.1 and the master-branch as well.

Frage zum Code

Hallo,
kann mir jemand die Stelle im Code nennen, an der der Nachtmodus der Uhr scharfgeschaltet wird? Zum eingestellten Zeitpunkt wird ja die Helligkeit komplett abgedreht. Meine Idee war, ob man an dieser Stellen nicht einfach auf 5% stellen könnte.

Aber wenn ich die Code-Stelle noch nicht mal finde ...)-:
Danke

Erweiterungs Wunsch

Hallo

Vielen Dank dass Du deinen Code zur Verfügung stellst !!!

Ich hätte noch zwei Erweiterungswünsche:
RTC Modul (DS3231) integrieren (Da ich leider in meinem Hobby Raum kein WIFI habe)
ds18b20 Temperatur sensor
Besten Dank
Markus

Minuten Eck-LEDs, Laufrichtung

Eck LEDs werden als separate Minuten nicht dargestellt (funktionieren aber bei Hintergrundbeleuchtung)
Kann man aufgrund falscher Anordnung die Reihen (Start oben links) spiegeln.
Klappt trotz Umschreibung der Wortdefinitionen nicht.
Wo liegt mein Fehler?

Erste LED Rot

Hallo zusammen,

vorne Weg. Das ist ein wirklich schönes Projekt. Viellen Dank dafür.

Leider habe ich nichts passenden gefunden.
Die Uhr funktioniert soweit. Jedoch ist die erste LED Rot.
Muss ich dies noch in den Einstellungen (config) anpassen?

Vorab vielen Dank
Gruß
Flo

Feature: Helligkeit einstellbar

Was hältst du davon, wenn die Helligkeit der Uhr einstellbar wäre? Bzw. ggf. könntest du einen Helligkeitssensor ergänzen :)

Aktuell hast du wahrscheinlich den Strom begrenzt für den USB Port oder?

Effekte

Schön wäre es wenn es Effekte geben würde

  • Überblenden fade
  • Matrix regen
  • Oder einfach Farbwechsel

Das währe super 😊

Minutenanzeige,

Vielen Dank erstmal für den schönen Code ;-)
Ich habe den Code bei mir um eine Minutenanzeige erweitert (in jeder Ecke der Uhr eine LED, die dann die Minuten 1-4, die auf die angezeigte Zeit addiert werden müssen, anzeigen).
Dabei ist mir aufgefallen, das mit dem originalen Code die Uhr eine Minute nach geht. Das Problem habe ich in Zeile 638 bis 642 (Originaler Code) gefunden. Die Zeilen 640 & 641 müssen vor den Zeilen 638 & 339 kommen (es müssen erst die Minuten und Stunden in die Variablen geschrieben werden, und dann das "show()" aufgerufen werden.
Dann habe ich den Code noch so angepasst, dass im setup einmal das Setzen der Zeitzone (die ich beim deklarieren der Variable: int offset = 1;) ausgeführt wird. So muss ich nicht nach jedem reboot des Controllers die Zeit neu setzten. Ausserdem habe ich den Code so angepasst, dass um 1:00 Uhr nicht "ES IST EINS UHR" erscheint, sondern auf das S verzichtet wird.

Vielleicht ist es ja etwas für den Code, oder jemand anderes kann damit auch was anfangen.

Hier einmal mein Code:

#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
#include <FastLED.h>
#include <NTPClient.h>
#include <WiFiUdp.h>

#define NUM_LEDS 125
#define DATA_PIN D4

/**********************
 * SET WIFI CREDENTIALS
 **********************/
const char* ssid  = "DeinWlanName";
const char* password = "DeinWlanSchlüssel";



typedef struct { 
  int r;
  int g;
  int b;
} color_t;  

typedef struct {
  int pixel;
  int r;
  int g;
  int b;
} pixel_color_t;

int time_it_is[] = {110, 111, 113, 114, 115};// ES IST
  
int time_minutes[][12] = {
  { 13,  12,  11,  -1,  -1,  -1,  -1,  -1,  -1,  -1,  -1,  -1},//UHR
  {117, 118, 119, 120,  85,  84,  83,  82,  -1,  -1,  -1,  -1},//FÜNF NACH
  {109, 108, 107, 106,  85,  84,  83,  82,  -1,  -1,  -1,  -1},//ZEHN NACH
  { 92,  93,  94,  95,  96,  97,  98,  85,  84,  83,  82,  -1},//VIERTEL NACH
  {105, 104, 103, 102, 101, 100,  99,  85,  84,  83,  82,  -1},//ZWANZIG NACH
  {117, 118, 119, 120,  81,  80,  79,  66,  67,  68,  69,  -1},//FÜNF VOR HALB
  { 66,  67,  68,  69,  -1,  -1,  -1,  -1,  -1,  -1,  -1,  -1},//HALB
  {117, 118, 119, 120,  85,  84,  83,  82,  66,  67,  68,  69},//FÜNF NACH HALB
  {105, 104, 103, 102, 101, 100,  99,  81,  80,  79,  -1,  -1},//ZWANZIG VOR
  { 92,  93,  94,  95,  96,  97,  98,  81,  80,  79,  -1,  -1},//VIERTEL VOR
  {109, 108, 107, 106,  81,  80,  79,  -1,  -1,  -1,  -1,  -1},//ZEHN VOR
  {117, 118, 119, 120,  81,  80,  79,  -1,  -1,  -1,  -1,  -1} //FÜNF VOR
};

int time_hours[][6] = {
  {71, 72, 73, 74, 75, -1},//ZWÖLF
  {63, 62, 61, 60, -1, -1},//EINS
  {65, 64, 63, 62, -1, -1},//ZWIE
  {45, 46, 47, 48, -1, -1},//DREI
  {36, 35, 34, 33, -1, -1},//VIER
  {51, 52, 53, 54, -1, -1},//FÜNF
  {20, 19, 18, 17, 16, -1},//SECHS
  {60, 59, 58, 57, 56, 55},//SIEBEN
  {23, 24, 25, 26, -1, -1},//ACHT
  {40, 39, 38, 37, -1, -1},//NEUN
  {27, 28, 29, 30, -1, -1},//ZEHN
  {43, 42, 41, -1, -1, -1},//ELF
  {63, 62, 61, -1, -1, -1},//EIN
};

int time_ecken[][4] = {
  {-1, -1, -1, -1}, // ALLE AUS
  {122, -1, -1, -1}, //OBEN LINKS
  {122, 121, -1, -1},// +OBEN RECHTS
  {122, 121, 123, -1},//+UNTEN LINKS
  {122, 121, 123, 124},//+UNTEN RECHTS
};

int degree_minus[] = {108, 107, 106, 105};

int degree_symbol[] = { 119, 101, 99, 97};

int degree_10[] = {70, 61, 48, 39, 26, 17, 4};
int degree_20[] = {67, 68, 69, 70, 61, 48, 42, 41, 40, 39, 23, 20, 1, 2, 3, 4};
int degree_30[] = {67, 68, 69, 70, 61, 48, 42, 41, 40, 39, 26, 17, 1, 2, 3, 4};
int degree_40[] = {67, 70, 64, 61, 45, 48, 42, 41, 40, 39, 26, 17, 4};

int degree_0[] = {72, 73, 74, 75, 59, 56, 50, 53, 37, 34, 28, 31, 15, 12, 6, 7, 8, 9};
int degree_1[] = {75, 56, 53, 34, 31, 12, 9};
int degree_2[] = {72, 73, 74, 75, 56, 53, 37, 36, 35, 34, 28, 15, 6, 7, 8, 9};
int degree_3[] = {72, 73, 74, 75, 56, 53, 37, 36, 35, 34, 31, 12, 6, 7, 8, 9};
int degree_4[] = {72, 75, 59, 56, 50, 53, 37, 36, 35, 34, 31, 12, 9};
int degree_5[] = {72, 73, 74, 75, 59, 50, 37, 36, 35, 34, 31, 12, 6, 7, 8, 9};
int degree_6[] = {72, 73, 74, 75, 59, 50, 37, 36, 35, 34, 28, 31, 15, 12, 6, 7, 8, 9};
int degree_7[] = {72, 73, 74, 75, 56, 53, 34, 31, 12, 9};
int degree_8[] = {72, 73, 74, 75, 59, 56, 50, 53, 37, 36, 35, 34, 28, 31, 15, 12, 6, 7, 8, 9};
int degree_9[] = {72, 73, 74, 75, 59, 56, 50, 53, 37, 36, 35, 34, 31, 12, 6, 7, 8, 9};

pixel_color_t icon_snow[] = {
  { 5, 212, 223, 244 }, { 6, 176, 208, 247 }, { 7, 169, 206, 246 }, { 8, 207, 229, 249 }, { 14, 213, 232, 249 },
  { 15, 114, 175, 239 }, { 16, 86, 159, 237 }, { 17, 86, 159, 237 }, { 18, 155, 198, 244 }, { 19, 233, 233, 233 },
  { 23, 255, 255, 255 }, { 24, 201, 223, 245 }, { 25, 168, 203, 245 }, { 26, 171, 205, 245 }, { 27, 96, 165, 238 },
  { 28, 86, 159, 237 }, { 29, 86, 159, 237 }, { 30, 86, 159, 237 }, { 31, 200, 224, 249 }, { 34, 229, 246, 255 },
  { 35, 193, 220, 245 }, { 36, 166, 205, 244 }, { 37, 86, 159, 237 }, { 38, 86, 159, 237 }, { 39, 86, 159, 237 },
  { 40, 86, 159, 237 }, { 41, 86, 159, 237 }, { 42, 86, 159, 237 }, { 43, 94, 164, 238 }, { 44, 202, 223, 246 },
  { 45, 168, 205, 244 }, { 46, 86, 159, 237 }, { 47, 86, 159, 237 }, { 48, 86, 159, 237 }, { 49, 86, 159, 237 },
  { 50, 86, 159, 237 }, { 51, 86, 159, 237 }, { 52, 86, 159, 237 }, { 53, 86, 159, 237 }, { 54, 86, 160, 237 },
  { 55, 191, 219, 247 }, { 56, 166, 203, 245 }, { 57, 86, 159, 237 }, { 58, 86, 159, 237 }, { 59, 86, 159, 237 },
  { 60, 86, 159, 237 }, { 61, 86, 159, 237 }, { 62, 86, 159, 237 }, { 63, 86, 159, 237 }, { 64, 86, 159, 237 },
  { 65, 86, 159, 237 }, { 66, 168, 205, 244 }, { 67, 202, 223, 246 }, { 68, 96, 165, 238 }, { 69, 86, 159, 237 },
  { 70, 89, 161, 237 }, { 71, 93, 163, 238 }, { 72, 86, 159, 237 }, { 73, 86, 159, 237 }, { 74, 86, 159, 237 },
  { 75, 86, 159, 237 }, { 76, 86, 159, 237 }, { 77, 184, 215, 245 }, { 78, 204, 221, 238 }, { 79, 180, 212, 245 },
  { 80, 148, 194, 242 }, { 81, 210, 228, 245 }, { 82, 156, 199, 241 }, { 83, 145, 193, 242 }, { 84, 193, 219, 244 },
  { 85, 182, 214, 243 }, { 86, 161, 201, 244 }, { 87, 198, 220, 245 }, { 88, 176, 176, 176 }, { 91, 187, 187, 187 },
  { 92, 225, 225, 225 }, { 93, 225, 225, 225 }, { 94, 225, 225, 225 }, { 95, 226, 226, 226 }, { 96, 244, 244, 238 },
  { 97, 225, 225, 225 }, { 103, 237, 237, 237 }, { 104, 139, 139, 139 }, { 106, 246, 246, 237 }, { 107, 239, 239, 235 },
  { 114, 245, 245, 236 }, { 115, 241, 241, 241 }, { 117, 231, 231, 231 }, { 118, 251, 251, 243 }
};

pixel_color_t icon_thunder[] = {
  { 5, 206, 226, 244 }, { 6, 172, 208, 247 }, { 7, 165, 204, 244 }, { 8, 201, 224, 249 }, { 14, 213, 231, 249 },
  { 15, 110, 173, 239 }, { 16, 86, 159, 237 }, { 17, 86, 159, 237 }, { 18, 152, 195, 243 }, { 19, 239, 239, 239 },
  { 20, 255, 255, 255 }, { 23, 223, 223, 223 }, { 24, 193, 220, 247 }, { 25, 157, 198, 243 }, { 26, 171, 207, 245 },
  { 27, 114, 175, 240 }, { 28, 107, 172, 239 }, { 29, 97, 166, 238 }, { 30, 86, 159, 237 }, { 31, 199, 224, 246 },
  { 34, 217, 233, 249 }, { 35, 182, 212, 243 }, { 36, 156, 197, 243 }, { 37, 86, 159, 237 }, { 38, 211, 211, 197 },
  { 39, 239, 193, 104 }, { 40, 241, 198, 118 }, { 41, 230, 217, 185 }, { 42, 86, 159, 237 }, { 43, 89, 161, 237 },
  { 44, 196, 219, 245 }, { 45, 166, 204, 244 }, { 46, 86, 159, 237 }, { 47, 86, 159, 237 }, { 48, 99, 166, 238 },
  { 49, 230, 207, 156 }, { 50, 254, 164, 0 }, { 51, 237, 198, 122 }, { 52, 102, 168, 239 }, { 53, 86, 159, 237 },
  { 54, 86, 159, 237 }, { 55, 185, 214, 246 }, { 56, 164, 201, 243 }, { 57, 86, 159, 237 }, { 58, 86, 159, 237 },
  { 59, 230, 217, 185 }, { 60, 254, 171, 12 }, { 61, 250, 178, 46 }, { 62, 230, 217, 185 }, { 63, 86, 159, 237 },
  { 64, 86, 159, 237 }, { 65, 86, 159, 237 }, { 66, 172, 207, 243 }, { 67, 206, 224, 246 }, { 68, 115, 175, 239 },
  { 69, 86, 159, 237 }, { 70, 181, 209, 234 }, { 71, 230, 217, 185 }, { 72, 243, 194, 99 }, { 73, 254, 164, 0 },
  { 74, 215, 207, 181 }, { 75, 86, 159, 237 }, { 76, 89, 160, 237 }, { 77, 192, 219, 246 }, { 78, 203, 214, 214 },
  { 79, 195, 218, 245 }, { 80, 174, 208, 243 }, { 81, 233, 227, 208 }, { 82, 250, 178, 46 }, { 83, 254, 180, 46 },
  { 84, 232, 223, 203 }, { 85, 170, 207, 243 }, { 86, 178, 211, 245 }, { 87, 207, 221, 240 }, { 93, 165, 165, 165 },
  { 94, 251, 228, 183 }, { 95, 243, 194, 99 }, { 96, 92, 92, 92 }, { 103, 249, 233, 209 }, { 104, 237, 198, 122 },
  { 105, 208, 208, 208 }, { 117, 228, 228, 228 }, { 118, 251, 242, 225 }
};

pixel_color_t icon_rain[] = {
  { 5, 206, 226, 244 }, { 6, 174, 207, 243 }, { 7, 165, 204, 244 }, { 8, 203, 226, 249 }, { 14, 213, 231, 249 },
  { 15, 110, 173, 239 }, { 16, 86, 159, 237 }, { 17, 86, 159, 237 }, { 18, 152, 195, 243 }, { 19, 239, 239, 239 },
  { 20, 255, 255, 255 }, { 23, 223, 223, 223 }, { 24, 193, 220, 247 }, { 25, 155, 198, 243 }, { 26, 158, 200, 244 },
  { 27, 93, 163, 238 }, { 28, 86, 159, 237 }, { 29, 86, 159, 237 }, { 30, 86, 159, 237 }, { 31, 199, 224, 246 },
  { 34, 218, 228, 244 }, { 35, 182, 212, 245 }, { 36, 154, 196, 243 }, { 37, 86, 159, 237 }, { 38, 86, 159, 237 },
  { 39, 86, 159, 237 }, { 40, 86, 159, 237 }, { 41, 86, 159, 237 }, { 42, 86, 159, 237 }, { 43, 89, 161, 237 },
  { 44, 196, 219, 245 }, { 45, 166, 204, 244 }, { 46, 86, 159, 237 }, { 47, 86, 159, 237 }, { 48, 86, 159, 237 },
  { 49, 86, 159, 237 }, { 50, 86, 159, 237 }, { 51, 86, 159, 237 }, { 52, 86, 159, 237 }, { 53, 86, 159, 237 },
  { 54, 86, 159, 237 }, { 55, 185, 215, 245 }, { 56, 166, 203, 245 }, { 57, 86, 159, 237 }, { 58, 86, 159, 237 },
  { 59, 86, 159, 237 }, { 60, 86, 159, 237 }, { 61, 86, 159, 237 }, { 62, 86, 159, 237 }, { 63, 86, 159, 237 },
  { 64, 86, 159, 237 }, { 65, 86, 159, 237 }, { 66, 172, 207, 243 }, { 67, 205, 224, 246 }, { 68, 116, 175, 239 },
  { 69, 86, 159, 237 }, { 70, 86, 159, 237 }, { 71, 86, 159, 237 }, { 72, 86, 159, 237 }, { 73, 86, 159, 237 },
  { 74, 86, 159, 237 }, { 75, 86, 159, 237 }, { 76, 89, 161, 237 }, { 77, 192, 219, 246 }, { 78, 203, 214, 214 },
  { 79, 191, 218, 245 }, { 80, 165, 202, 244 }, { 81, 169, 204, 243 }, { 82, 164, 203, 244 }, { 83, 161, 201, 245 },
  { 84, 169, 204, 243 }, { 85, 165, 204, 244 }, { 86, 165, 203, 244 }, { 87, 207, 226, 245 }, { 91, 140, 187, 241 },
  { 92, 127, 177, 227 }, { 94, 138, 186, 239 }, { 95, 139, 181, 230 }, { 97, 140, 186, 243 }, { 98, 127, 179, 231 },
  { 101, 121, 166, 232 }, { 102, 138, 184, 242 }, { 104, 122, 169, 207 }, { 105, 130, 183, 231 }, { 107, 127, 145, 182 },
  { 108, 123, 177, 231 }, { 113, 137, 180, 239 }, { 114, 127, 178, 229 }
};

pixel_color_t icon_sun[] = {
  { 6, 253, 164, 0 }, { 13, 255, 166, 0 }, { 14, 255, 160, 0 }, { 17, 253, 163, 0 }, { 20, 255, 160, 0 },
  { 21, 255, 166, 0 }, { 24, 243, 156, 0 }, { 25, 253, 163, 0 }, { 26, 235, 156, 0 }, { 28, 226, 169, 0 },
  { 30, 235, 156, 0 }, { 31, 253, 163, 0 }, { 32, 243, 156, 0 }, { 36, 245, 160, 0 }, { 37, 243, 160, 0 },
  { 38, 253, 162, 0 }, { 39, 253, 163, 0 }, { 40, 253, 164, 0 }, { 41, 248, 163, 0 }, { 42, 245, 160, 0 },
  { 48, 253, 162, 0 }, { 49, 254, 164, 0 }, { 50, 254, 164, 0 }, { 51, 254, 164, 0 }, { 52, 253, 162, 0 },
  { 56, 253, 165, 0 }, { 57, 253, 165, 0 }, { 58, 207, 127, 0 }, { 59, 253, 163, 0 }, { 60, 254, 164, 0 },
  { 61, 254, 164, 0 }, { 62, 254, 164, 0 }, { 63, 253, 163, 0 }, { 64, 207, 127, 0 }, { 65, 253, 165, 0 },
  { 66, 253, 165, 0 }, { 70, 253, 163, 0 }, { 71, 254, 164, 0 }, { 72, 254, 164, 0 }, { 73, 254, 164, 0 },
  { 74, 253, 164, 0 }, { 80, 238, 153, 0 }, { 81, 232, 160, 0 }, { 82, 253, 163, 0 }, { 83, 253, 162, 0 },
  { 84, 253, 161, 0 }, { 85, 238, 158, 0 }, { 86, 238, 153, 0 }, { 90, 243, 158, 0 }, { 91, 253, 162, 0 },
  { 92, 238, 153, 0 }, { 94, 159, 127, 0 }, { 96, 238, 153, 0 }, { 97, 253, 162, 0 }, { 98, 243, 158, 0 },
  { 101, 245, 160, 0 }, { 102, 243, 158, 0 }, { 105, 253, 161, 0 }, { 108, 243, 158, 0 }, { 109, 245, 160, 0 },
  { 116, 253, 163, 0 }
};

pixel_color_t icon_cloud[] = {
  { 5, 212, 228, 249 }, { 6, 174, 208, 247 }, { 7, 169, 205, 246 }, { 8, 204, 227, 249 }, { 14, 214, 233, 249 },
  { 15, 113, 175, 240 }, { 16, 86, 159, 237 }, { 17, 86, 159, 237 }, { 18, 152, 196, 243 }, { 19, 235, 235, 235 },
  { 20, 255, 255, 255 }, { 23, 255, 255, 255 }, { 24, 198, 222, 245 }, { 25, 161, 202, 244 }, { 26, 165, 204, 244 },
  { 27, 94, 164, 238 }, { 28, 86, 159, 237 }, { 29, 86, 159, 237 }, { 30, 86, 159, 237 }, { 31, 200, 224, 249 },
  { 34, 226, 247, 247 }, { 35, 190, 217, 244 }, { 36, 163, 203, 244 }, { 37, 86, 159, 237 }, { 38, 86, 159, 237 },
  { 39, 86, 159, 237 }, { 40, 86, 159, 237 }, { 41, 86, 159, 237 }, { 42, 86, 159, 237 }, { 43, 93, 163, 238 },
  { 44, 197, 224, 248 }, { 45, 167, 205, 246 }, { 46, 86, 159, 237 }, { 47, 86, 159, 237 }, { 48, 86, 159, 237 },
  { 49, 86, 159, 237 }, { 50, 86, 159, 237 }, { 51, 86, 159, 237 }, { 52, 86, 159, 237 }, { 53, 86, 159, 237 },
  { 54, 86, 159, 237 }, { 55, 187, 216, 244 }, { 56, 164, 204, 243 }, { 57, 86, 159, 237 }, { 58, 86, 159, 237 },
  { 59, 86, 159, 237 }, { 60, 86, 159, 237 }, { 61, 86, 159, 237 }, { 62, 86, 159, 237 }, { 63, 86, 159, 237 },
  { 64, 86, 159, 237 }, { 65, 86, 159, 237 }, { 66, 167, 205, 243 }, { 67, 205, 223, 244 }, { 68, 102, 168, 238 },
  { 69, 86, 159, 237 }, { 70, 86, 159, 237 }, { 71, 86, 159, 237 }, { 72, 86, 159, 237 }, { 73, 86, 159, 237 },
  { 74, 86, 159, 237 }, { 75, 86, 159, 237 }, { 76, 86, 159, 237 }, { 77, 188, 215, 245 }, { 78, 208, 214, 237 },
  { 79, 189, 214, 245 }, { 80, 162, 200, 244 }, { 81, 162, 201, 244 }, { 82, 162, 201, 244 }, { 83, 162, 201, 244 },
  { 84, 162, 201, 244 }, { 85, 162, 201, 244 }, { 86, 169, 207, 244 }, { 87, 201, 222, 244 }, { 88, 169, 169, 169 }
};

CRGB leds[NUM_LEDS];
int r = 255;
int g = 255;
int b = 255;
int offset = 0;
int hour = -1;
int minute = -1;
int minuteecke = -1;
String ip = "";

WiFiUDP ntpUDP;

//NTPClient timeClient(ntpUDP, "pool.ntp.org", offset, 3600000);
NTPClient timeClient(ntpUDP, "0.de.pool.ntp.org", offset, 3600000);

ESP8266WebServer server(80);
String header;

color_t bgColor;
color_t fgColor;
int timezone = 1;

String mode = "time";
String icon = "";
int degree = 0;

color_t hexToRgb(String value) {
  value.replace("#", "");
  int number = (int) strtol( value.c_str(), NULL, 16);
  
  // Split them up into r, g, b values
  int r = number >> 16;
  int g = number >> 8 & 0xFF;
  int b = number & 0xFF;
  
  color_t rgb;
  rgb.r = r;
  rgb.g = g;
  rgb.b = b;

  return rgb;
}

String rgbToHex(const color_t hex) {
  long hexColor = ((long)hex.r << 16L) | ((long)hex.g << 8L) | (long)hex.b;

  String out = String(hexColor, HEX);

  while(out.length() < 6) {
    out = "0" + out;
  }

  return out;
}

void setOffset(String value) {
  timeClient.setTimeOffset(value.toInt() * 3600);
}

pixel_color_t* getIcon(String icon, int& size) {
  if(icon == "cloud") {
    size = (sizeof(icon_cloud) / sizeof(pixel_color_t));
    return icon_cloud;
  } else if(icon == "sun") {
    size = (sizeof(icon_sun) / sizeof(pixel_color_t));
    return icon_sun;
  } else if(icon == "rain") {
    size = (sizeof(icon_rain) / sizeof(pixel_color_t));
    return icon_rain;
  } else if(icon == "thunder") {
    size = (sizeof(icon_thunder) / sizeof(pixel_color_t));
    return icon_thunder;
  } else if(icon == "snow") {
    size = (sizeof(icon_snow) / sizeof(pixel_color_t));
    return icon_snow;
  }  
} 

void setIcon() {
  for(int i = 0; i < NUM_LEDS; i++) { 
    leds[i].setRGB(0, 0, 0);
  }

  int size = 0;
  pixel_color_t* pixels = getIcon(icon, size);
  
  for(int i = 0; i < size; i++) {
    leds[NUM_LEDS - pixels[i].pixel].setRGB(pixels[i].r, pixels[i].g, pixels[i].b);
  }

  FastLED.show();
}

void setTime(int hour, int minute, int minuteecke) {
  Serial.print(hour);
  Serial.print(':');
  Serial.println(minute);
  minuteecke = (minute % 5);
  minute = (minute - (minute % 5));
  
  if(minute >= 25) {
    hour += 1;
  }

  minute = minute / 5;
  hour = hour % 12;
  
  for(int i = 0; i < NUM_LEDS; i++) {
    leds[i].setRGB(bgColor.r * 0.2, bgColor.g * 0.2, bgColor.b * 0.2);
  }
  
  for(int i = 0; i < 5; i++) {
    leds[time_it_is[i]].setRGB(fgColor.r, fgColor.g, fgColor.b);
  }

  for(int m = 0; m < 12; m++) {
    if(time_minutes[minute][m] >= 0) {
      leds[time_minutes[minute][m]].setRGB(fgColor.r, fgColor.g, fgColor.b);
    }
  }
  for(int h = 0; h < 6; h++) {
    if(hour == 1 & minute == 0) {
      if(time_hours[12][h] >= 0) {
          leds[time_hours[12][h]].setRGB(fgColor.r, fgColor.g, fgColor.b);
      }
    }
    else{
      if(time_hours[hour][h] >= 0) {
          leds[time_hours[hour][h]].setRGB(fgColor.r, fgColor.g, fgColor.b);
      }
    }
  }

  
  for(int ecke = 0; ecke < 4; ecke++) {
    if(time_ecken[minuteecke][ecke] >= 0) {
        leds[time_ecken[minuteecke][ecke]].setRGB(fgColor.r, fgColor.g, fgColor.b);
    }
  }
  FastLED.show();
}

void setDegree() {
  int value;

  value = degree;
  
  for(int i = 0; i < NUM_LEDS; i++) { 
    leds[i].setRGB(0, 0, 0);
  }

  for(int i = 0; i < (sizeof(degree_symbol) / sizeof(int)); i++) { 
    leds[degree_symbol[i]].setRGB(255, 255, 255);
  }

  if(value < 0) {
    for(int i = 0; i < (sizeof(degree_minus) / sizeof(int)); i++) { 
      leds[degree_minus[i]].setRGB(255, 255, 255);
    }

    value = value * -1;
  }

  int ten = value / 10;
  int one = value % 10;

  if(ten == 1) {
    for(int i = 0; i < (sizeof(degree_10) / sizeof(int)); i++) { 
      leds[degree_10[i]].setRGB(255, 255, 255);
    }
  } else if(ten == 2) {
    for(int i = 0; i < (sizeof(degree_20) / sizeof(int)); i++) { 
      leds[degree_20[i]].setRGB(255, 255, 255);
    }
  } else if(ten == 3) {
    for(int i = 0; i < (sizeof(degree_30) / sizeof(int)); i++) { 
      leds[degree_30[i]].setRGB(255, 255, 255);
    }
  } else if(ten == 4) {
    for(int i = 0; i < (sizeof(degree_40) / sizeof(int)); i++) { 
      leds[degree_40[i]].setRGB(255, 255, 255);
    }
  }

  if(one == 1) {
    for(int i = 0; i < (sizeof(degree_1) / sizeof(int)); i++) { 
      leds[degree_1[i]].setRGB(255, 255, 255);
    }
  } else if(one == 2) {
    for(int i = 0; i < (sizeof(degree_2) / sizeof(int)); i++) { 
      leds[degree_2[i]].setRGB(255, 255, 255);
    }
  } else if(one == 3) {
    for(int i = 0; i < (sizeof(degree_3) / sizeof(int)); i++) { 
      leds[degree_3[i]].setRGB(255, 255, 255);
    }
  } else if(one == 4) {
    for(int i = 0; i < (sizeof(degree_4) / sizeof(int)); i++) { 
      leds[degree_4[i]].setRGB(255, 255, 255);
    }
  } else if(one == 5) {
    for(int i = 0; i < (sizeof(degree_5) / sizeof(int)); i++) { 
      leds[degree_5[i]].setRGB(255, 255, 255);
    }
  } else if(one == 6) {
    for(int i = 0; i < (sizeof(degree_6) / sizeof(int)); i++) { 
      leds[degree_6[i]].setRGB(255, 255, 255);
    }
  } else if(one == 7) {
    for(int i = 0; i < (sizeof(degree_7) / sizeof(int)); i++) { 
      leds[degree_7[i]].setRGB(255, 255, 255);
    }
  } else if(one == 8) {
    for(int i = 0; i < (sizeof(degree_8) / sizeof(int)); i++) { 
      leds[degree_8[i]].setRGB(255, 255, 255);
    }
  } else if(one == 9) {
    for(int i = 0; i < (sizeof(degree_9) / sizeof(int)); i++) { 
      leds[degree_9[i]].setRGB(255, 255, 255);
    }
  } else if(one == 0) {
    for(int i = 0; i < (sizeof(degree_0) / sizeof(int)); i++) { 
      leds[degree_0[i]].setRGB(255, 255, 255);
    }
  }

  FastLED.show();
}

String getTimeForm() {
  String content = "";

  content += "<div>";
  content += "<label>Foreground color</label>";
  content += "<input name=\"fg\" value=\"#" + rgbToHex(fgColor) + "\" type=\"color\">";
  content += "</div>";
  content += "<div>";
  content += "<label>Background color</label>";
  content += "<input name=\"bg\" value=\"#" + rgbToHex(bgColor) + "\" type=\"color\">";
  content += "</div>";
  content += "<div>";
  content += "<label>Timezone</label>";
  content += "<select name=\"tz\">";
  
  for(int i = -12; i < 13; i++) {

    String label = String(i);
    
    if(i > 0) {
      label = "+" + label; 
    }    

    content += htmlOption(label, String(i), String(timezone));
  }
  
  content += "</select>";
  content += "</div>";

  return content;
}

String getIconForm() {
  String content = "";
  content += "<div>";
  content += "<select name=\"icon\">";

  content += htmlOption("Cloud", "cloud", icon);
  content += htmlOption("Snow", "snow", icon);
  content += htmlOption("Rain", "rain", icon);
  content += htmlOption("Sun", "sun", icon);
  content += htmlOption("Thunder", "thunder", icon);

  content += "</select>";
  content += "</div>";

  return content;
}

String getDegreeForm() {
  String content = "";
  content += "<div>";
  content += "<input type=\"number\" name=\"degree\" value=\"" + String(degree) + "\">";
  content += "</div>";

  return content;
}

String htmlOption(String label, String value, String store) {
  String content = "<option value=\"" + value + "\"";
  
  if (store == value) {
    content += " selected=\"selected\"";
  }
  
  content += ">" + label + "</option>";

  return content;
}

void change() {
  bool change = false;

  if(server.hasArg("mode")) {
    mode = server.arg("mode");
  }
  
  if(mode == "time"){
    if(server.hasArg("fg")) {
      fgColor = hexToRgb(server.arg("fg"));
      change = true;
    }
  
    if(server.hasArg("bg")) {
      bgColor = hexToRgb(server.arg("bg"));
      change = true;
    }
    
    if(server.hasArg("tz")) {
      timezone = server.arg("tz").toInt();
      timeClient.setTimeOffset(timezone * 3600);
      change = true;
    }
  } else if(mode == "icon") {
    if(server.hasArg("icon")) {
      icon = server.arg("icon");
    }
    change = true;
  } else if(mode == "degree") {
    if(server.hasArg("degree")) {
      String in = server.arg("degree");
      int factor = 1;
      Serial.println(String(in.toInt()) + " - " + in);
      
      
      if(in.charAt(0) == '-') {
        factor = -1;
        in.replace("-", "");
      }
  
      degree = in.toInt();
      degree = degree * factor;
      
      if(degree < -49) {
        degree = -49;
      } else if(degree > 49) {
        degree = 49;
      }
    }
    
    change = true;
  }

  if(change == true) {
    show();
  }
}

void handleRootPath() {
  String content = "";

  change();

  content += "<!DOCTYPE html><html>";
  content += "<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">";
  content += "<style>";
  content += "* { box-sizing: border-box; }";
  content += "html, body { font-family: Helvetica; margin: 0; padding: 0; }";
  content += ".form { margin: auto; max-width: 400px; }";
  content += ".form div { margin: 0; padding: 20px 0; width: 100%; font-size: 1.4rem; }";
  content += "label { width: 60%; display: inline-block; margin: 0; vertical-align: middle; }";
  content += "input, select { width: 38%; display: inline-block; margin: 0; border: 1px solid #eee; padding: 0; height: 40px; vertical-align: middle; }";
  content += "button { display: inline-block; width: 100%; font-size: 1.4rem; background-color: green; border: 1px solid #eee; color: #fff; padding-top: 10px; padding-bottom: 10px; }";
  content += "</style>";
  content += "</head>";
  content += "<body>";  
  
  content += "<h1>WordClock WebServer</h1>";
  content += "<form class=\"form\" method=\"post\" action=\"\">";
  content += "<div>";
  content += "<select name=\"mode\">";

  content += htmlOption("Time", "time", mode);
  content += htmlOption("Icon", "icon", mode);
  content += htmlOption("Degree", "degree", mode);

  content += "</select>";
  content += "</div>";
  content += "<div>";
  content += "<button type=\"submit\">Change mode</button>";
  content += "</div>";
  content += "</form>";
  
  content += "<form class=\"form\" method=\"post\" action=\"\">";

  if(mode == "time") {
    content += getTimeForm();
  } else if(mode == "icon") {
    content += getIconForm();
  } else if(mode == "degree") {
    content += getDegreeForm();
  }
  
  content += "<div>";
  content += "<button type=\"submit\">Save</button>";
  content += "</div>";
  content += "</form>";
  content += "</body></html>";

  server.sendHeader("Location", "http://" + ip);
  server.send(200, "text/html", content);
 
}

void show() {
  Serial.println(mode);
  
  if(mode == "time") {
    setTime(hour, minute, minuteecke);
  } else if(mode == "icon") {
    setIcon();
  } else if(mode == "degree") {
    setDegree();
  }
}

void setup() {
  Serial.begin(74880);

  bgColor.r = 0;
  bgColor.g = 0;
  bgColor.b = 0;

  fgColor.r = 255;
  fgColor.g = 255;
  fgColor.b = 255;

  FastLED.addLeds<NEOPIXEL, DATA_PIN>(leds, NUM_LEDS);
  FastLED.setBrightness(50);

  Serial.print("Connecting to ");
  Serial.println(ssid);
  WiFi.begin(ssid, password);

  while(WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }

  Serial.println("");
  Serial.println("WiFi connected.");
  Serial.println("IP address: ");
  Serial.println(WiFi.localIP());

  ip = WiFi.localIP() + "";
  
  server.on("/", handleRootPath);
  server.begin();

  timeClient.setTimeOffset(timezone * 3600);
  timeClient.begin();
  timeClient.update();

  for(int i = 0; i < NUM_LEDS; i++) {
    leds[i].setRGB(0, 0, 0);
  }

  FastLED.show();

  show();
}

void loop() {
  timeClient.update();
  
  int h = timeClient.getHours();
  int m = timeClient.getMinutes();

  if(h != hour || m != minute) {
    hour = h;
    minute = m;
    if(mode == "time") {
      show();
    }
  }
  
  server.handleClient();
}

Hour jumping

I think I found a mistake. I have a grid in Config of 10×11 and DE_alt.
The the hour jumps back and forth between the correct hour and an hour before. every two minutes

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.