htamas1210/ArduinoOnlineRemote
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

at start arduino download the html page from github with pat

Browse Source
This commit is contained in:
Hatvani Tamás
2024-12-01 15:43:55 +01:00
parent cbe2de6e57
commit dae00d6560
1 changed files with 25 additions and 204 deletions
Download Patch File Download Diff File Expand all files Collapse all files

229
IrSendRecv.ino
View File

@@ -1,216 +1,18 @@
#include <WiFi.h> #include <WiFi.h>
#include <HTTPClient.h>
#include <WebServer.h> #include <WebServer.h>
#include <ArduinoJson.h> #include <ArduinoJson.h>
const char* ssid = "paradicsom"; const char* ssid = "paradicsom";
const char* password = "19700318"; const char* password = "19700318";
String url = "http://192.168.50.69"; const char* url PROGMEM = "http://192.168.50.69";
const char* githubFileURL PROGMEM = "https://raw.githubusercontent.com/htamas1210/ArduinoRemoteWeb/master/index.html";
const String githubToken PROGMEM = "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";
String gitwebpage = "";
WebServer server(80); WebServer server(80);
const char webpage[] PROGMEM = R"rawliteral(<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Arduino Remote Web</title>
<style>
/* Base styles and color scheme */
:root {
--bg-color: #2c3e50;
--btn-color: #ecf0f1;
--btn-hover-color: #bdc3c7;
--text-color: #34495e;
--highlight-color: #3498db;
--border-radius: 10px;
--box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}
/* Body and basic styling */
body {
background-color: var(--bg-color);
font-family: Arial, sans-serif;
color: var(--btn-color);
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
}
.flex-container {
display: flex;
flex-direction: row;
justify-content: center;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 20px;
}
.flex-container-column {
display: flex;
flex-direction: column;
justify-content: center;
gap: 10px;
}
/* Button and div styling */
.flex-container>div,
.flex-container-column>div {
background-color: var(--btn-color);
color: var(--text-color);
border-radius: var(--border-radius);
padding: 20px;
font-size: 24px;
font-weight: bold;
text-align: center;
box-shadow: var(--box-shadow);
transition: transform 0.2s ease, background-color 0.3s ease;
cursor: pointer;
flex: 1;
/* Allow buttons to grow and fill available space */
}
/* Hover and active effects */
.flex-container>div:hover,
.flex-container-column>div:hover {
background-color: var(--btn-hover-color);
transform: scale(1.05);
}
.flex-container>div:active,
.flex-container-column>div:active {
transform: scale(0.95);
background-color: var(--highlight-color);
color: #fff;
}
/* Numpad specific styles */
#numpad {
display: flex;
flex-direction: column;
gap: 5px;
/* Reduced gap between rows in the numpad */
}
#numpad div {
display: flex;
/* Use flex for rows */
justify-content: center;
/* Center buttons horizontally */
gap: 10px;
/* Space between buttons */
flex-wrap: nowrap;
/* Prevent wrapping to keep buttons in one row */
}
/* Center the number-0 button */
#number-0 {
flex: 1;
/* Allow the button to grow and take full width */
display: flex;
justify-content: center;
/* Center horizontally */
align-items: center;
/* Center vertically */
height: 60px;
/* Increase height for better tap target */
}
/* Responsive adjustments */
@media (max-width: 768px) {
.flex-container {
flex-direction: column;
}
/* Ensure numpad rows remain horizontal on smaller screens */
#numpad div {
flex-direction: row;
/* Set row layout for numpad buttons */
justify-content: space-between;
/* Distribute space between buttons */
}
}
@media (max-width: 480px) {
.flex-container>div,
.flex-container-column>div {
font-size: 20px;
padding: 15px;
}
#numpad div {
font-size: 20px;
padding: 10px;
}
#number-0 {
height: 60px;
/* Keep a consistent height for the number 0 button */
}
}
</style>
<script type="application/javascript">
function sendButtonSignal(buttonCode) {
fetch('/sendSignal', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ code: buttonCode }) // Sending JSON data
})
}
</script>
</head>
<body>
<div id="buttons" class="flex-container">
<div id="power" onclick="sendButtonSignal(0x15)">Power</div>
<div id="exit" onclick="sendButtonSignal(0x13)">Exit</div>
<div id="guide" onclick="sendButtonSignal(0x47)">Guide</div>
<div id="mute" onclick="sendButtonSignal(0x16)">Mute</div>
<div id="source" onclick="sendButtonSignal(0x12)">Source</div>
</div>
<div class="flex-container">
<div id="volume" class="flex-container-column">
<div id="volume-up" onclick="sendButtonSignal(0x1B)">Volume up</div>
<div id="volume-down" onclick="sendButtonSignal(0x1A)">Volume down</div>
</div>
<div id="channel" class="flex-container-column">
<div id="channel-up" onclick="sendButtonSignal(0x19)">Channel up</div>
<div id="channel-down" onclick="sendButtonSignal(0x18)">Channel down</div>
</div>
</div>
<div id="numpad">
<div id="numpad-row-1" class="flex-container">
<div id="number-1" onclick="sendButtonSignal(0x1)">1</div>
<div id="number-2" onclick="sendButtonSignal(0x2)">2</div>
<div id="number-3" onclick="sendButtonSignal(0x3)">3</div>
</div>
<div id="numpad-row-2" class="flex-container">
<div id="number-4" onclick="sendButtonSignal(0x4)">4</div>
<div id="number-5" onclick="sendButtonSignal(0x5)">5</div>
<div id="number-6" onclick="sendButtonSignal(0x6)">6</div>
</div>
<div id="numpad-row-3" class="flex-container">
<div id="number-7" onclick="sendButtonSignal(0x7)">7</div>
<div id="number-8" onclick="sendButtonSignal(0x8)">8</div>
<div id="number-9" onclick="sendButtonSignal(0x9)">9</div>
</div>
<div id="numpad-row-4" class="flex-container">
<div id="number-0" onclick="sendButtonSignal(0x0)">0</div>
</div>
</div>
<div id="arrows" class="flex-container">
<div id="Up" onclick="sendButtonSignal(0xC)>Up</div>
<div id="Down" onclick="sendButtonSignal(0xD)>Down</div>
<div id="Left" onclick="sendButtonSignal(0xF)>Left</div>
<div id="Right" onclick="sendButtonSignal(0xE)>Right</div>
<div id="Enter" onclick="sendButtonSignal(0x10)>Enter</div>
</div>
</body>
</html>)rawliteral";
unsigned long lastTime = 0; unsigned long lastTime = 0;
unsigned long timeDelay = 5000; unsigned long timeDelay = 5000;
@@ -256,6 +58,23 @@ void setup() {
Serial.println(WiFi.localIP()); Serial.println(WiFi.localIP());
///////////////////////////////////////////////////////// /////////////////////////////////////////////////////////
//Download html text from github
HTTPClient httpClient;
httpClient.begin(githubFileURL);
httpClient.addHeader("Authorization", "token " + githubToken);
int httpResponse = httpClient.GET();
if(httpResponse > 0){
gitwebpage = httpClient.getString();
Serial.println("File content: ");
Serial.println(gitwebpage);
}else{
Serial.printf("Error code: %d\n", httpResponse);
}
httpClient.end();
//////////////////////////////////////////////////////
IrSender.begin(IR_TRANSMIT_PIN, ENABLE_LED_FEEDBACK, USE_DEFAULT_FEEDBACK_LED_PIN); IrSender.begin(IR_TRANSMIT_PIN, ENABLE_LED_FEEDBACK, USE_DEFAULT_FEEDBACK_LED_PIN);
// Specify send pin and enable feedback LED at default feedback LED pin // Specify send pin and enable feedback LED at default feedback LED pin
@@ -266,9 +85,11 @@ void setup() {
Serial.print(F("Ready to receive IR signals of protocols: ")); Serial.print(F("Ready to receive IR signals of protocols: "));
printActiveIRProtocols(&Serial); printActiveIRProtocols(&Serial);
/////////////////////////////////////////////////////////
// Define route for root // Define route for root
server.on("/", HTTP_GET, []() { server.on("/", HTTP_GET, []() {
server.send(200, "text/html", webpage); server.send(200, "text/html", gitwebpage);
}); });
// Define route for LED toggle // Define route for LED toggle