I have arduino code that will successfully deploy data to an ip address via some html and css. It does a lot of other things in between but don't worry about those. I will post the code below but instead of using the html_1 and css_1 variables to display the data, How would I do this with a react framework that has been set up in VS code? code below although you probably only need to see the first few lines...
#include <WiFiNINA.h>
#include <FlashStorage.h>
String html_1 = {"<!DOCTYPE html>\n<html>\n<head>\n<meta charset=\"ISO-8859-1\">\n<meta http-equiv='refresh' content='5'>\n<title>Realtime Garden Monitoring</title>\n<style>\n %gardenStyles%\n</style>>\n<script type= \"text/javascript\" src=\"GardenFunctions.js\" defer></script>\n</head>\n<body>\n\t<div class=\"welcome-title\">\n Welcome to Your Digital Garden\n </div>\n <div class=\"sensor-data-grid\">\n <button moistureSensor>%moistureData%</button>\n <button tempSensor></button>\n <button lightSensor></button>\n <button humiditySensor>50% Humidity</button>\n </div>\n</body>\n</html>"};
String css_1 = {"@charset \"ISO-8859-1\";\n*, *::before, *::after{\n\tbox-sizing: border-box;\n\tfont-family: Gotham Rounded, sans-serif;\n font-weight: normal;\n}\n\nbody {\n\tpadding: 0;\n\tmargin: 0;\n background: linear-gradient(to right, #00AAFF, #00FF6C);\n}\n\n.welcome-title {\n padding-top: 30px;\n padding-bottom: 30px;\n text-align: center;\n font-size: 3rem;\n \n}\n\n.sensor-data-grid {\n\tdisplay: grid;\n\tjustify-content: center;\n\talign-content: center;\n\tmin-height: 100vh;\n\tgrid-template-columns: repeat(2, 250px);\n grid-template-rows: minmax(250px, auto) repeat(2, 250px) \n \n}\n\n.sensor-data-grid > button {\n font-size: 2rem;\n font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;\n\tborder: 1px solid white;\n\toutline: none;\n\tbackground-color: rgba(255, 255, 255, .7);\n}"};
const byte numChars = 64;
char idpass[numChars]; // an array to store the received data
boolean newData = false;
char ssid[numChars]; // your network SSID (name) between the " "
char pass[numChars]; // your network password between the " "
int keyIndex = 0; // your network key Index number (needed only for WEP)
int status = WL_IDLE_STATUS; //connection status
WiFiServer server(80); //server socket
int badPassFlag;
boolean badPass = false;
void setup() {
Serial.begin(9600);
// while (!Serial);
ownerInfoReadFromPy();
combineWebDev();
enable_WiFi();
connect_WiFi();
if (badPass == true){
Serial.print("Close the program and Retry");
delay(9999999999);
}
server.begin();
printWifiStatus();
owner.validMemory = true;
my_flash_store.write(owner);
}
void loop() {
client = server.available();
if (client) {
printWEB();
}
delay(5000 / 3);
}
void ownerInfoReadFromPy(){
if (owner.validMemory == false){
while (strlen(pass) == 0){
recvWithEndMarker();
showNewData();
getId();
getPass();
delay(1000);
}
for (int i=0; i < strlen(ssid); i++){
owner.ssidMemory[i] = ssid[i];
}
for (int j=0; strlen(pass); j++){
owner.passMemory[j] = pass[j];
if (j == strlen(pass)){
Serial.println("Connecting..");
}
}
Serial.println("Connecting...");
}
}
void combineWebDev(){
html_1.replace("%gardenStyles%", css_1 );
}
void recvWithEndMarker() {
static byte ndx = 0;
char endMarker = '\n';
char rc;
while (Serial.available() > 0 && newData == false) {
rc = Serial.read();
if (rc != endMarker) {
idpass[ndx] = rc;
ndx++;
if (ndx >= numChars) {
ndx = numChars - 1;
}
}
else {
idpass[ndx] = '\0'; // terminate the string
ndx = 0;
newData = true;
}
}
}
void getId(){
for (int i=0; i < strlen(idpass); i++){
if (idpass[i] == ',' && idpass[i+1] == ' '){
break;
}else{
ssid[i] = idpass[i];
}
}
}
void getPass(){
int startPoint = strlen(ssid) +2;
for (int i=startPoint; i < strlen(idpass); i++){
pass[i - startPoint] = idpass[i];
}
}
void showNewData() {
if (newData == true) {
newData = false;
}
}
void printWifiStatus() {
// print the SSID of the network you're attached to:
Serial.print("SSID: ");
Serial.println(WiFi.SSID());
// print your board's IP address:
IPAddress ipAddress = WiFi.localIP();
Serial.print("IP Address: ");
Serial.println(ipAddress);
// print the received signal strength:
long rssi = WiFi.RSSI();
Serial.print("signal strength (RSSI):");
Serial.print(rssi);
Serial.println(" dBm");
Serial.print("To see this page in action, open a browser to http://");
Serial.println(ipAddress);
Serial.println("You Are Connected!");
}
void enable_WiFi() {
// check for the WiFi module:
if (WiFi.status() == WL_NO_MODULE) {
Serial.println("Communication with WiFi module failed!");
// don't continue
while (true);
}
String fv = WiFi.firmwareVersion();
if (fv < "1.0.0") {
Serial.println("Please upgrade the firmware");
}
}
void connect_WiFi() {
// attempt to connect to Wifi network:
while (status != WL_CONNECTED) {
if (badPassFlag < 3){
Serial.println("Attempting to connect to SSID: ");
// Connect to WPA/WPA2 network. Change this line if using open or WEP network:
status = WiFi.begin(owner.ssidMemory, owner.passMemory);
// wait 10 seconds for connection:
delay(10000);
badPassFlag += 1;
}else{
Serial.println("Failed to connect. Possibly bad password/netid combination or bad/no signal strength. Please disconnect the USB!");
badPass = true;
break;
}
}
}
void printWEB() {
if (client) { // if you get a client,
Serial.println("new client"); // print a message out the serial port
String currentLine = ""; // make a String to hold incoming data from the client
while (client.connected()) { // loop while the client's connected
if (client.available()) { // if there's bytes to read from the client,
char c = client.read(); // read a byte, then
Serial.write(c); // print it out the serial monitor
if (c == '\n') { // if the byte is a newline character
// if the current line is blank, you got two newline characters in a row.
// that's the end of the client HTTP request, so send a response:
if (currentLine.length() == 0) {
// HTTP headers always start with a response code (e.g. HTTP/1.1 200 OK)
// and a content-type so the client knows what's coming, then a blank line:
client.println("HTTP/1.1 200 OK");
client.println("Content-type:text/html");
client.println();
moistureReading = analogRead(A1);
if (i <= storageLength - 1){
moistureReadingList[i] = moistureReading;
i += 1;
}
else{
for (int j = 0; j < storageLength; j++){
moistureReadingList[j] = 0;
}
i = 0;
}
tmpString = html_1;
tmpString.replace("%moistureData%", String(moistureReading) );
Serial.println("");
Serial.print("[");
for (int j=0; j < storageLength; j++){
Serial.print(moistureReadingList[j]);
Serial.print(" ");
}
Serial.println("]");
client.flush();
client.print( tmpString );
// The HTTP response ends with another blank line:
client.println();
// break out of the while loop:
break;
}
else { // if you got a newline, then clear currentLine:
currentLine = "";
}
}
else if (c != '\r') { // if you got anything else but a carriage return character,
currentLine += c; // add it to the end of the currentLine
}
}
}
// close the connection:
client.stop();
Serial.println("client disconnected");
}
}