mirror of
https://github.com/0x1d/esp8266-laser.git
synced 2025-12-14 18:15:22 +01:00
inital
This commit is contained in:
fryakatkop
1
.gitignore
vendored
Normal file
1
.gitignore
vendored
Normal file
@@ -0,0 +1 @@
|
||||
/data-dev/maincontrols.txt
|
||||
341
Esp8266-Spiffs-ApWebseverPortal.ino
Normal file
341
Esp8266-Spiffs-ApWebseverPortal.ino
Normal file
@@ -0,0 +1,341 @@
|
||||
/*
|
||||
modified by fryakatkop nov2015
|
||||
|
||||
|
||||
FSWebServer - Example WebServer with SPIFFS backend for esp8266
|
||||
Copyright (c) 2015 Hristo Gochkov. All rights reserved.
|
||||
This file is part of the ESP8266WebServer library for Arduino environment.
|
||||
|
||||
This library is free software; you can redistribute it and/or
|
||||
modify it under the terms of the GNU Lesser General Public
|
||||
License as published by the Free Software Foundation; either
|
||||
version 2.1 of the License, or (at your option) any later version.
|
||||
This library is distributed in the hope that it will be useful,
|
||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
|
||||
Lesser General Public License for more details.
|
||||
You should have received a copy of the GNU Lesser General Public
|
||||
License along with this library; if not, write to the Free Software
|
||||
Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA
|
||||
|
||||
upload the contents of the data folder with MkSPIFFS Tool ("ESP8266 Sketch Data Upload" in Tools menu in Arduino IDE)
|
||||
or you can upload the contents of a folder if you CD in that folder and run the following command:
|
||||
for file in `ls -A1`; do curl -F "file=@$PWD/$file" esp8266fs.local/edit; done
|
||||
|
||||
access the sample web page at http://esp8266fs.local *edit* dns will catch all request and response with 302
|
||||
edit the page by going to http://esp8266fs.local/edit
|
||||
*/
|
||||
#include <ESP8266WiFi.h>
|
||||
#include <WiFiClient.h>
|
||||
#include <ESP8266WebServer.h>
|
||||
#include <ESP8266mDNS.h>
|
||||
#include <DNSServer.h>
|
||||
#include <FS.h>
|
||||
|
||||
#define DBG_OUTPUT_PORT Serial
|
||||
|
||||
const char *ssid = "ESP-test";
|
||||
const char *password = "";
|
||||
|
||||
/* hostname for mDNS. Should work at least on windows. Try http://esp8266.local */
|
||||
const char *myHostname = "esp8266";
|
||||
|
||||
const char *metaRefreshStr = "<head><meta http-equiv=\"refresh\" content=\"3; url=http://192.168.4.1/index.html\" /></head><body><p>redirecting...</p></body>";
|
||||
|
||||
// DNS server
|
||||
const byte DNS_PORT = 53;
|
||||
DNSServer dnsServer;
|
||||
|
||||
// LED Animations
|
||||
unsigned long previousMillis = 0;
|
||||
bool ledAniRider = 0;
|
||||
bool ledAniFlipper = 0;
|
||||
bool ledAniDir = 0;
|
||||
int ledAniPos = 0;
|
||||
int interval = 100; // ms
|
||||
|
||||
/* Soft AP network parameters */
|
||||
IPAddress apIP(192, 168, 4, 1); // note: update metaRefreshStr string if ip change!
|
||||
IPAddress netMsk(255, 255, 255, 0);
|
||||
|
||||
// Web server
|
||||
ESP8266WebServer server(80);
|
||||
|
||||
// Gpios with LEDs
|
||||
byte ledIoNames[] = {5, 4, 13, 12, 14, 16 }; // GPIO 5&4 12&13 flipped on my board so dirty patch here 5<->4 12<->13
|
||||
|
||||
|
||||
//format bytes
|
||||
String formatBytes(size_t bytes){
|
||||
if (bytes < 1024){
|
||||
return String(bytes)+"B";
|
||||
} else if(bytes < (1024 * 1024)){
|
||||
return String(bytes/1024.0)+"KB";
|
||||
} else if(bytes < (1024 * 1024 * 1024)){
|
||||
return String(bytes/1024.0/1024.0)+"MB";
|
||||
} else {
|
||||
return String(bytes/1024.0/1024.0/1024.0)+"GB";
|
||||
}
|
||||
}
|
||||
|
||||
String getContentType(String filename){
|
||||
if(server.hasArg("download")) return "application/octet-stream";
|
||||
else if(filename.endsWith(".htm")) return "text/html";
|
||||
else if(filename.endsWith(".html")) return "text/html";
|
||||
else if(filename.endsWith(".css")) return "text/css";
|
||||
else if(filename.endsWith(".js")) return "application/javascript";
|
||||
else if(filename.endsWith(".png")) return "image/png";
|
||||
else if(filename.endsWith(".gif")) return "image/gif";
|
||||
else if(filename.endsWith(".jpg")) return "image/jpeg";
|
||||
else if(filename.endsWith(".ico")) return "image/x-icon";
|
||||
else if(filename.endsWith(".xml")) return "text/xml";
|
||||
else if(filename.endsWith(".pdf")) return "application/x-pdf";
|
||||
else if(filename.endsWith(".zip")) return "application/x-zip";
|
||||
else if(filename.endsWith(".gz")) return "application/x-gzip";
|
||||
return "text/plain";
|
||||
}
|
||||
|
||||
bool handleFileRead(String path){
|
||||
DBG_OUTPUT_PORT.println("handleFileRead: " + path);
|
||||
if(path.endsWith("/")) path += "index.html";
|
||||
String contentType = getContentType(path);
|
||||
String pathWithGz = path + ".gz";
|
||||
if(SPIFFS.exists(pathWithGz) || SPIFFS.exists(path)){
|
||||
if(SPIFFS.exists(pathWithGz))
|
||||
path += ".gz";
|
||||
File file = SPIFFS.open(path, "r");
|
||||
size_t sent = server.streamFile(file, contentType);
|
||||
file.close();
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
void handleFileList() {
|
||||
if(!server.hasArg("dir")) {server.send(500, "text/plain", "BAD ARGS"); return;}
|
||||
|
||||
String path = server.arg("dir");
|
||||
DBG_OUTPUT_PORT.println("handleFileList: " + path);
|
||||
Dir dir = SPIFFS.openDir(path);
|
||||
path = String();
|
||||
|
||||
String output = "[";
|
||||
while(dir.next()){
|
||||
File entry = dir.openFile("r");
|
||||
if (output != "[") output += ',';
|
||||
bool isDir = false;
|
||||
output += "{\"type\":\"";
|
||||
output += (isDir)?"dir":"file";
|
||||
output += "\",\"name\":\"";
|
||||
output += String(entry.name()).substring(1);
|
||||
output += "\"}";
|
||||
entry.close();
|
||||
}
|
||||
|
||||
output += "]";
|
||||
server.send(200, "text/json", output);
|
||||
}
|
||||
|
||||
void handleLeds()
|
||||
{
|
||||
if(server.arg("LED") ) {
|
||||
int pin = server.arg("LED").toInt();
|
||||
bool onOFF = server.arg("state").toInt();
|
||||
digitalWrite(pin, onOFF);
|
||||
}
|
||||
String json = "{ \"leds\": [";
|
||||
for (int i = 0; i < sizeof(ledIoNames); i++)
|
||||
{
|
||||
bool state = digitalRead(ledIoNames[i]);
|
||||
json += "{ \"" + String(i) + "\": [";
|
||||
json += "\""+String(ledIoNames[i])+"\", ";
|
||||
json += "\""+String(state)+"\" ] }";
|
||||
if(!(i == sizeof(ledIoNames)-1))
|
||||
json += ",";
|
||||
|
||||
}
|
||||
json += "] }";
|
||||
server.send(200, "text/json", json);
|
||||
json = String();
|
||||
|
||||
}
|
||||
|
||||
void clearAll() {
|
||||
//stop Animations
|
||||
ledAniRider = 0;
|
||||
ledAniFlipper = 0;
|
||||
ledAniPos = 0;
|
||||
ledAniDir = 0;
|
||||
// clear all leds
|
||||
for (int i = 0; i < sizeof(ledIoNames); i++) {
|
||||
digitalWrite(ledIoNames[i], LOW);
|
||||
}
|
||||
}
|
||||
|
||||
void setup(void){
|
||||
DBG_OUTPUT_PORT.begin(115200);
|
||||
DBG_OUTPUT_PORT.print("\n");
|
||||
DBG_OUTPUT_PORT.setDebugOutput(true);
|
||||
SPIFFS.begin();
|
||||
{
|
||||
Dir dir = SPIFFS.openDir("/");
|
||||
while (dir.next()) {
|
||||
String fileName = dir.fileName();
|
||||
size_t fileSize = dir.fileSize();
|
||||
DBG_OUTPUT_PORT.printf("FS File: %s, size: %s\n", fileName.c_str(), formatBytes(fileSize).c_str());
|
||||
}
|
||||
DBG_OUTPUT_PORT.printf("\n");
|
||||
}
|
||||
|
||||
// Setup LED pins
|
||||
for (int i = 0; i < sizeof(ledIoNames); i++) {
|
||||
pinMode(ledIoNames[i],OUTPUT);
|
||||
}
|
||||
|
||||
//WIFI INIT
|
||||
DBG_OUTPUT_PORT.printf("Connecting to %s\n", ssid);
|
||||
WiFi.mode(WIFI_AP);
|
||||
WiFi.softAP(ssid, password);
|
||||
|
||||
|
||||
DBG_OUTPUT_PORT.println("");
|
||||
DBG_OUTPUT_PORT.print("Connected! IP address: ");
|
||||
DBG_OUTPUT_PORT.println ( WiFi.softAPIP() );
|
||||
|
||||
/* Setup the DNS server redirecting all the domains to the apIP */
|
||||
dnsServer.setErrorReplyCode(DNSReplyCode::NoError);
|
||||
dnsServer.start(DNS_PORT, "*", apIP);
|
||||
|
||||
// Setup MDNS responder
|
||||
if (!MDNS.begin(myHostname)) {
|
||||
Serial.println("Error setting up MDNS responder!");
|
||||
} else {
|
||||
Serial.println("mDNS responder started");
|
||||
// Add service to MDNS-SD
|
||||
MDNS.addService("http", "tcp", 80);
|
||||
}
|
||||
|
||||
|
||||
//SERVER INIT
|
||||
//list directory
|
||||
server.on("/listFiles", HTTP_GET, handleFileList);
|
||||
//called when the url is not defined here
|
||||
//use it to load content from SPIFFS
|
||||
server.onNotFound([](){
|
||||
if(!handleFileRead(server.uri()))
|
||||
server.send(302, "text/html", metaRefreshStr);
|
||||
});
|
||||
// handle led requests
|
||||
server.on("/leds", HTTP_GET, handleLeds);
|
||||
server.on("/clearAll", HTTP_GET, clearAll);
|
||||
server.on("/rider", HTTP_GET, [](){
|
||||
ledAniPos = 0;
|
||||
ledAniDir = 0;
|
||||
ledAniFlipper = 0;
|
||||
ledAniRider = 1;
|
||||
});
|
||||
server.on("/flipper", HTTP_GET, [](){
|
||||
ledAniPos = 0;
|
||||
ledAniDir = 0;
|
||||
ledAniRider = 0;
|
||||
ledAniFlipper = 1;
|
||||
});
|
||||
//get heap status, analog input value and all GPIO statuses in one json call
|
||||
server.on("/all", HTTP_GET, [](){
|
||||
String json = "{";
|
||||
json += "\"heap\":"+String(ESP.getFreeHeap());
|
||||
json += ", \"analog\":"+String(analogRead(A0));
|
||||
json += ", \"gpio\":"+String((uint32_t)(((GPI | GPO) & 0xFFFF) | ((GP16I & 0x01) << 16)));
|
||||
json += "}";
|
||||
server.send(200, "text/json", json);
|
||||
json = String();
|
||||
});
|
||||
server.begin();
|
||||
DBG_OUTPUT_PORT.println("HTTP server started");
|
||||
|
||||
}
|
||||
|
||||
void loop(void){
|
||||
//DNS
|
||||
dnsServer.processNextRequest();
|
||||
//HTTP
|
||||
server.handleClient();
|
||||
|
||||
// LED Animation
|
||||
if(ledAniRider || ledAniFlipper)
|
||||
{
|
||||
unsigned long currentMillis = millis();
|
||||
|
||||
if (currentMillis - previousMillis >= interval) {
|
||||
// save the last time you blinked the LED
|
||||
previousMillis = currentMillis;
|
||||
|
||||
if(ledAniRider)
|
||||
{
|
||||
if(ledAniDir == 0)
|
||||
{
|
||||
if(ledAniPos < sizeof(ledIoNames))
|
||||
{
|
||||
digitalWrite(ledIoNames[ledAniPos], HIGH);
|
||||
digitalWrite(ledIoNames[ledAniPos -1], LOW);
|
||||
ledAniPos++;
|
||||
}
|
||||
else
|
||||
{
|
||||
ledAniDir = 1;
|
||||
digitalWrite(ledIoNames[ledAniPos], HIGH);
|
||||
digitalWrite(ledIoNames[ledAniPos +1], LOW);
|
||||
ledAniPos--;
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
if(ledAniPos >= 0)
|
||||
{
|
||||
digitalWrite(ledIoNames[ledAniPos], HIGH);
|
||||
digitalWrite(ledIoNames[ledAniPos +1], LOW);
|
||||
ledAniPos--;
|
||||
}
|
||||
else
|
||||
{
|
||||
ledAniDir = 0;
|
||||
digitalWrite(ledIoNames[ledAniPos], HIGH);
|
||||
digitalWrite(ledIoNames[ledAniPos -1], LOW);
|
||||
ledAniPos++;
|
||||
}
|
||||
}
|
||||
}
|
||||
else if(ledAniFlipper)
|
||||
{
|
||||
if(ledAniDir == 0)
|
||||
{
|
||||
if(ledAniPos < sizeof(ledIoNames))
|
||||
{
|
||||
digitalWrite(ledIoNames[ledAniPos], HIGH);
|
||||
ledAniPos++;
|
||||
}
|
||||
else
|
||||
{
|
||||
ledAniDir = 1;
|
||||
digitalWrite(ledIoNames[ledAniPos], LOW);
|
||||
ledAniPos--;
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
if(ledAniPos >= 0)
|
||||
{
|
||||
digitalWrite(ledIoNames[ledAniPos], LOW);
|
||||
ledAniPos--;
|
||||
}
|
||||
else
|
||||
{
|
||||
ledAniDir = 0;
|
||||
digitalWrite(ledIoNames[ledAniPos], HIGH);
|
||||
ledAniPos++;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
BIN
data-dev/favicon.ico
Normal file
BIN
data-dev/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
257
data-dev/index.html
Normal file
257
data-dev/index.html
Normal file
@@ -0,0 +1,257 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
|
||||
<title>Esp8266 - FsWebserver</title>
|
||||
<link rel="stylesheet" type="text/css" href="style.css">
|
||||
<script type="text/javascript">
|
||||
|
||||
//var ledGpNames = [5, 4, 13, 12, 14, 16]; // 4 & 5 flipped on my board dirty hack here
|
||||
|
||||
function updateLeds(initial, cb)
|
||||
{
|
||||
var nocache = "&nocache=" + Math.random() *10001;
|
||||
//var uri = "json.json";
|
||||
var uri = "leds";
|
||||
|
||||
if(!initial) {
|
||||
uri += "?LED=" + cb.value + "&state=" + (Number(cb.checked)) + nocache;
|
||||
}
|
||||
else
|
||||
{
|
||||
uri += "?" + nocache;
|
||||
}
|
||||
console.log(uri);
|
||||
var xh = new XMLHttpRequest();
|
||||
xh.onreadystatechange = function(){
|
||||
if (xh.readyState == 4){
|
||||
if(xh.status == 200) {
|
||||
if (this.responseText != null) {
|
||||
var res = JSON.parse(xh.responseText);
|
||||
var ledDiv;
|
||||
if(initial)
|
||||
{
|
||||
var ledInput;
|
||||
var ledLabel;
|
||||
var ledBarDiv = document.getElementById("ledBar");
|
||||
var clearAllMacroBtn = document.createElement("a");
|
||||
clearAllMacroBtn.setAttribute("class", "ledMacroButton");
|
||||
clearAllMacroBtn.setAttribute("href", "javascript:handleLedMarco(\"clearAll\")");
|
||||
clearAllMacroBtn.innerHTML = "Clear All Leds";
|
||||
}
|
||||
|
||||
for (var i = 0; i < res.leds.length; i++) {
|
||||
var ledPin = res.leds[i][i][0];
|
||||
var ledState = res.leds[i][i][1];
|
||||
var ledName = "LED" + ledPin;
|
||||
if(initial)
|
||||
{
|
||||
ledDiv = "";
|
||||
ledInput = "";
|
||||
ledLabel = "";
|
||||
ledDiv = document.createElement("div");
|
||||
ledDiv.setAttribute("class", "ledDiv");
|
||||
ledBarDiv.appendChild(ledDiv);
|
||||
ledInput = document.createElement("input");
|
||||
ledInput.type = "checkbox";
|
||||
ledInput.value = (Number(ledPin));
|
||||
ledInput.setAttribute("id", ledName);
|
||||
ledInput.setAttribute("name", ledName);
|
||||
ledInput.setAttribute("onClick", "updateLeds(false, this)");
|
||||
ledDiv.appendChild(ledInput);
|
||||
ledLabel = document.createElement("label");
|
||||
ledLabel.setAttribute("for", ledName);
|
||||
ledLabel.innerHTML = ledPin;
|
||||
ledDiv.appendChild(ledLabel);
|
||||
}
|
||||
var ledElement = document.getElementsByName(ledName)[0];
|
||||
if(res.leds[i][i][1] === "1")
|
||||
{
|
||||
ledElement.checked = true;
|
||||
}
|
||||
else
|
||||
{
|
||||
ledElement.checked = false;
|
||||
}
|
||||
}
|
||||
|
||||
if(initial)
|
||||
{
|
||||
ledBarDiv.appendChild(clearAllMacroBtn);
|
||||
}
|
||||
|
||||
for (var i = 0; i < res.leds.length; i++) {
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
xh.overrideMimeType("text/json");
|
||||
//console.log(uri);
|
||||
xh.open("GET", uri, true);
|
||||
xh.send(null);
|
||||
};
|
||||
|
||||
function clearAll() {
|
||||
|
||||
};
|
||||
|
||||
function run(){
|
||||
if(!running){
|
||||
running = true;
|
||||
updateLeds()();
|
||||
}
|
||||
}
|
||||
function dec2bin(dec){
|
||||
dec = parseInt(dec, 10)
|
||||
return (dec >>> 0).toString(2);
|
||||
}
|
||||
|
||||
function fillLedBar() {
|
||||
|
||||
updateLeds();
|
||||
}
|
||||
function handleLedMarco(arg)
|
||||
{
|
||||
arg = "/" + arg;
|
||||
console.log("uri: " + arg );
|
||||
var xh = new XMLHttpRequest();
|
||||
xh.onreadystatechange = function(){
|
||||
if (xh.readyState == 4){
|
||||
if(xh.status == 200) {
|
||||
if (this.responseText != null) {
|
||||
var res = JSON.parse(xh.responseText);
|
||||
for (var i = 0; i < res.leds.length; i++) {
|
||||
var ledName = "LED" + i;
|
||||
var ledElement = document.getElementsByName(ledName)[0];
|
||||
if(res.leds[i] === "1")
|
||||
{
|
||||
ledElement.checked = true;
|
||||
}
|
||||
else
|
||||
{
|
||||
ledElement.checked = false;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
xh.overrideMimeType("text/json");
|
||||
//console.log(uri);
|
||||
xh.open("GET", arg, true);
|
||||
xh.send(null);
|
||||
}
|
||||
function onBodyLoad(){
|
||||
// init LEDbar
|
||||
updateLeds(true);
|
||||
// run the loop per default
|
||||
//run();
|
||||
}
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body id="index" style="margin:0; padding:0;" onload="onBodyLoad()">
|
||||
<div id="Main">
|
||||
<div id="pageTitle">
|
||||
<!-- SVG Glitch from: http://codepen.io/DirkWeber/pen/ArFvk -->
|
||||
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="460px" height="85px" viewBox="0 0 460 85">
|
||||
<defs>
|
||||
<filter id="filter">
|
||||
<feFlood flood-color="#66bebe" result="black" />
|
||||
<feFlood flood-color="#206060" result="flood1" />
|
||||
<feFlood flood-color="#369e9e" result="flood2" />
|
||||
<feOffset in="SourceGraphic" dx="3" dy="0" result="off1a"/>
|
||||
<feOffset in="SourceGraphic" dx="2" dy="0" result="off1b"/>
|
||||
<feOffset in="SourceGraphic" dx="-4" dy="0" result="off2a"/>
|
||||
<feOffset in="SourceGraphic" dx="-2" dy="0" result="off2b"/>
|
||||
<feComposite in="flood1" in2="off1a" operator="in" result="comp1" />
|
||||
<feComposite in="flood2" in2="off2a" operator="in" result="comp2" />
|
||||
|
||||
<feMerge x="0" width="100%" result="merge1">
|
||||
<feMergeNode in = "black" />
|
||||
<feMergeNode in = "comp1" />
|
||||
<feMergeNode in = "off1b" />
|
||||
|
||||
<animate
|
||||
attributeName="y"
|
||||
id = "y"
|
||||
dur ="4s"
|
||||
|
||||
values = '104px; 104px; 30px; 105px; 30px; 2px; 2px; 50px; 40px; 105px; 105px; 20px; 6ßpx; 40px; 104px; 40px; 70px; 10px; 30px; 104px; 102px'
|
||||
|
||||
keyTimes = '0; 0.362; 0.368; 0.421; 0.440; 0.477; 0.518; 0.564; 0.593; 0.613; 0.644; 0.693; 0.721; 0.736; 0.772; 0.818; 0.844; 0.894; 0.925; 0.939; 1'
|
||||
|
||||
repeatCount = "indefinite" />
|
||||
|
||||
<animate attributeName="height"
|
||||
id = "h"
|
||||
dur ="4s"
|
||||
|
||||
values = '10px; 0px; 10px; 30px; 50px; 0px; 10px; 0px; 0px; 0px; 10px; 50px; 40px; 0px; 0px; 0px; 40px; 30px; 10px; 0px; 50px'
|
||||
|
||||
keyTimes = '0; 0.362; 0.368; 0.421; 0.440; 0.477; 0.518; 0.564; 0.593; 0.613; 0.644; 0.693; 0.721; 0.736; 0.772; 0.818; 0.844; 0.894; 0.925; 0.939; 1'
|
||||
|
||||
repeatCount = "indefinite" />
|
||||
</feMerge>
|
||||
|
||||
|
||||
<feMerge x="0" width="100%" y="60px" height="65px" result="merge2">
|
||||
<feMergeNode in = "black" />
|
||||
<feMergeNode in = "comp2" />
|
||||
<feMergeNode in = "off2b" />
|
||||
|
||||
<animate attributeName="y"
|
||||
id = "y"
|
||||
dur ="4s"
|
||||
values = '103px; 104px; 69px; 53px; 42px; 104px; 78px; 89px; 96px; 100px; 67px; 50px; 96px; 66px; 88px; 42px; 13px; 100px; 100px; 104px;'
|
||||
|
||||
keyTimes = '0; 0.055; 0.100; 0.125; 0.159; 0.182; 0.202; 0.236; 0.268; 0.326; 0.357; 0.400; 0.408; 0.461; 0.493; 0.513; 0.548; 0.577; 0.613; 1'
|
||||
|
||||
repeatCount = "indefinite" />
|
||||
|
||||
<animate attributeName="height"
|
||||
id = "h"
|
||||
dur = "4s"
|
||||
|
||||
values = '0px; 0px; 0px; 16px; 16px; 12px; 12px; 0px; 0px; 5px; 10px; 22px; 33px; 11px; 0px; 0px; 10px'
|
||||
|
||||
keyTimes = '0; 0.055; 0.100; 0.125; 0.159; 0.182; 0.202; 0.236; 0.268; 0.326; 0.357; 0.400; 0.408; 0.461; 0.493; 0.513; 1'
|
||||
|
||||
repeatCount = "indefinite" />
|
||||
</feMerge>
|
||||
|
||||
<feMerge>
|
||||
<feMergeNode in="SourceGraphic" />
|
||||
|
||||
<feMergeNode in="merge1" />
|
||||
<feMergeNode in="merge2" />
|
||||
|
||||
</feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
<g>
|
||||
<text id="titleGlitch" style="filter: url(#filter);" x="0" y="45">ESP8266-Arduino</text>
|
||||
<text id="titleText" x="10" y="75">AP Server Portal</text>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div id="ledControls">
|
||||
<text class="sectionTitle">LED Controls:</text>
|
||||
<text class="sectionDesc">Click on the LEDs to light em Up! </text>
|
||||
<div id="ledBar"></div>
|
||||
|
||||
<text class="sectionDesc">also try a Animation:</text>
|
||||
<div class="ledMacroButtons">
|
||||
<a class="ledMacroButton" href="javascript:handleLedMarco('rider')">Rider</a>
|
||||
<a class="ledMacroButton" href="javascript:handleLedMarco('flipper')">Flipper</a>
|
||||
<a class="ledMacroButton" href="javascript:handleLedMarco('clearAll')">stop & ClearAll</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
1
data-dev/leds
Normal file
1
data-dev/leds
Normal file
@@ -0,0 +1 @@
|
||||
{ "leds": [{ "0": ["5", "1" ] },{ "1": ["4", "0" ] },{ "2": ["13", "0" ] },{ "3": ["12", "0" ] },{ "4": ["14", "0" ] },{ "5": ["16", "0" ] }] }
|
||||
0
data-dev/main.js
Normal file
0
data-dev/main.js
Normal file
157
data-dev/style.css
Normal file
157
data-dev/style.css
Normal file
@@ -0,0 +1,157 @@
|
||||
body {
|
||||
font-size: 14px;
|
||||
font-family: "Bookman Old Style","Serifa BT","URW Bookman L","itc bookman",times,serif;
|
||||
background: #00979d none repeat scroll 0px 0px;
|
||||
align: Center;
|
||||
}
|
||||
#Main {
|
||||
width: 460px;
|
||||
margin: 5px 3px 3px 12px;
|
||||
}
|
||||
|
||||
|
||||
@import "compass/css3";
|
||||
|
||||
text#titleGlitch {
|
||||
fill: #006666;
|
||||
font-weight: bold;
|
||||
text-shadow: 2px 2px black;
|
||||
font-family: sans-serif;
|
||||
font-size: 48px;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
text#titleText {
|
||||
fill: #006666;
|
||||
text-shadow: 1px 1px black;
|
||||
font-family: sans-serif;
|
||||
font-size: 26px;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
svg {
|
||||
border: solid 1px black;
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
display: block;
|
||||
position: relative;
|
||||
/*overflow: hidden; */
|
||||
background: #66bebe;
|
||||
-webkit-border-radius: 10px;
|
||||
-moz-border-radius: 10px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
#ledControls {
|
||||
margin-top:3px;
|
||||
padding: 10px;
|
||||
border: solid black 1px;
|
||||
background: #66bebe;
|
||||
-webkit-border-radius: 10px;
|
||||
-moz-border-radius: 10px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.sectionTitle {
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
font-family: "impact","Bookman Old Style","Serifa BT","URW Bookman L","itc bookman",times,serif;
|
||||
float: left;
|
||||
clear: left;
|
||||
color: #006666;
|
||||
text-shadow: 2px 2px black;
|
||||
}
|
||||
.sectionDesc {
|
||||
font-weight: bold;
|
||||
float: left;
|
||||
clear: left;
|
||||
}
|
||||
#ledBar {
|
||||
float:none;
|
||||
clear:left;
|
||||
margin-left: 7px;
|
||||
padding-top: 10px;
|
||||
overflow: auto;
|
||||
}
|
||||
.ledDiv {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: #add;
|
||||
margin: 3px 3px;
|
||||
float:left;
|
||||
line-height: 30px;
|
||||
|
||||
border-radius: 100%;
|
||||
position: relative;
|
||||
-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.5);
|
||||
-moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.5);
|
||||
box-shadow: 0px 1px 3px rgba(0,0,0,0.5);
|
||||
}
|
||||
.ledDiv label {
|
||||
display: block;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 100px;
|
||||
text-align: center;
|
||||
|
||||
-webkit-transition: all .1s ease;
|
||||
-moz-transition: all .1s ease;
|
||||
-o-transition: all .1s ease;
|
||||
-ms-transition: all .1s ease;
|
||||
transition: all .1s ease;
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
left: 5px;
|
||||
z-index: 1;
|
||||
|
||||
background: #663300;
|
||||
|
||||
-webkit-box-shadow:inset 0px 1px 3px rgba(0,0,0,0.5);
|
||||
-moz-box-shadow:inset 0px 1px 3px rgba(0,0,0,0.5);
|
||||
box-shadow:inset 0px 1px 3px rgba(0,0,0,0.5);
|
||||
}
|
||||
.ledDiv input[type="checkbox"] {
|
||||
visibility: hidden;
|
||||
}
|
||||
.ledDiv input[type=checkbox]:checked + label {
|
||||
background: #ff9900;
|
||||
}
|
||||
.ledMacroButtons {
|
||||
padding: 18px 5px 15px 5px;
|
||||
text-decoration: none;
|
||||
float:none;
|
||||
clear:left;
|
||||
}
|
||||
.ledMacroButton {
|
||||
height: 50px;
|
||||
background: #00989d;
|
||||
background-image: -webkit-linear-gradient(top, #00989d, #0a787a);
|
||||
background-image: -moz-linear-gradient(top, #00989d, #0a787a);
|
||||
background-image: -ms-linear-gradient(top, #00989d, #0a787a);
|
||||
background-image: -o-linear-gradient(top, #00989d, #0a787a);
|
||||
background-image: linear-gradient(to bottom, #00989d, #0a787a);
|
||||
-webkit-border-radius: 17;
|
||||
-moz-border-radius: 17;
|
||||
border-radius: 17px;
|
||||
text-shadow: 6px 4px 4px #4d424d;
|
||||
-webkit-box-shadow: 0px 1px 3px #666666;
|
||||
-moz-box-shadow: 0px 1px 3px #666666;
|
||||
box-shadow: 0px 1px 3px #666666;
|
||||
color: #fafafa;
|
||||
font-size:12px;
|
||||
padding: 10px 15px 10px 15px;
|
||||
border: solid #26b3b3 4px;
|
||||
text-decoration: none;
|
||||
margin: 23px 4px 23px 6px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.ledMacroButton:hover {
|
||||
background: #307070;
|
||||
background-image: -webkit-linear-gradient(top, #307070, #66bebe);
|
||||
background-image: -moz-linear-gradient(top, #307070, #66bebe);
|
||||
background-image: -ms-linear-gradient(top, #307070, #66bebe);
|
||||
background-image: -o-linear-gradient(top, #307070, #66bebe);
|
||||
background-image: linear-gradient(to bottom, #307070, #66bebe);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
BIN
data/favicon.ico
Normal file
BIN
data/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
257
data/index.html
Normal file
257
data/index.html
Normal file
@@ -0,0 +1,257 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
|
||||
<title>Esp8266 - FsWebserver</title>
|
||||
<link rel="stylesheet" type="text/css" href="style.css">
|
||||
<script type="text/javascript">
|
||||
|
||||
//var ledGpNames = [5, 4, 13, 12, 14, 16]; // 4 & 5 flipped on my board dirty hack here
|
||||
|
||||
function updateLeds(initial, cb)
|
||||
{
|
||||
var nocache = "&nocache=" + Math.random() *10001;
|
||||
//var uri = "json.json";
|
||||
var uri = "leds";
|
||||
|
||||
if(!initial) {
|
||||
uri += "?LED=" + cb.value + "&state=" + (Number(cb.checked)) + nocache;
|
||||
}
|
||||
else
|
||||
{
|
||||
uri += "?" + nocache;
|
||||
}
|
||||
console.log(uri);
|
||||
var xh = new XMLHttpRequest();
|
||||
xh.onreadystatechange = function(){
|
||||
if (xh.readyState == 4){
|
||||
if(xh.status == 200) {
|
||||
if (this.responseText != null) {
|
||||
var res = JSON.parse(xh.responseText);
|
||||
var ledDiv;
|
||||
if(initial)
|
||||
{
|
||||
var ledInput;
|
||||
var ledLabel;
|
||||
var ledBarDiv = document.getElementById("ledBar");
|
||||
var clearAllMacroBtn = document.createElement("a");
|
||||
clearAllMacroBtn.setAttribute("class", "ledMacroButton");
|
||||
clearAllMacroBtn.setAttribute("href", "javascript:handleLedMarco(\"clearAll\")");
|
||||
clearAllMacroBtn.innerHTML = "Clear All Leds";
|
||||
}
|
||||
|
||||
for (var i = 0; i < res.leds.length; i++) {
|
||||
var ledPin = res.leds[i][i][0];
|
||||
var ledState = res.leds[i][i][1];
|
||||
var ledName = "LED" + ledPin;
|
||||
if(initial)
|
||||
{
|
||||
ledDiv = "";
|
||||
ledInput = "";
|
||||
ledLabel = "";
|
||||
ledDiv = document.createElement("div");
|
||||
ledDiv.setAttribute("class", "ledDiv");
|
||||
ledBarDiv.appendChild(ledDiv);
|
||||
ledInput = document.createElement("input");
|
||||
ledInput.type = "checkbox";
|
||||
ledInput.value = (Number(ledPin));
|
||||
ledInput.setAttribute("id", ledName);
|
||||
ledInput.setAttribute("name", ledName);
|
||||
ledInput.setAttribute("onClick", "updateLeds(false, this)");
|
||||
ledDiv.appendChild(ledInput);
|
||||
ledLabel = document.createElement("label");
|
||||
ledLabel.setAttribute("for", ledName);
|
||||
ledLabel.innerHTML = ledPin;
|
||||
ledDiv.appendChild(ledLabel);
|
||||
}
|
||||
var ledElement = document.getElementsByName(ledName)[0];
|
||||
if(res.leds[i][i][1] === "1")
|
||||
{
|
||||
ledElement.checked = true;
|
||||
}
|
||||
else
|
||||
{
|
||||
ledElement.checked = false;
|
||||
}
|
||||
}
|
||||
|
||||
if(initial)
|
||||
{
|
||||
ledBarDiv.appendChild(clearAllMacroBtn);
|
||||
}
|
||||
|
||||
for (var i = 0; i < res.leds.length; i++) {
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
xh.overrideMimeType("text/json");
|
||||
//console.log(uri);
|
||||
xh.open("GET", uri, true);
|
||||
xh.send(null);
|
||||
};
|
||||
|
||||
function clearAll() {
|
||||
|
||||
};
|
||||
|
||||
function run(){
|
||||
if(!running){
|
||||
running = true;
|
||||
updateLeds()();
|
||||
}
|
||||
}
|
||||
function dec2bin(dec){
|
||||
dec = parseInt(dec, 10)
|
||||
return (dec >>> 0).toString(2);
|
||||
}
|
||||
|
||||
function fillLedBar() {
|
||||
|
||||
updateLeds();
|
||||
}
|
||||
function handleLedMarco(arg)
|
||||
{
|
||||
arg = "/" + arg;
|
||||
console.log("uri: " + arg );
|
||||
var xh = new XMLHttpRequest();
|
||||
xh.onreadystatechange = function(){
|
||||
if (xh.readyState == 4){
|
||||
if(xh.status == 200) {
|
||||
if (this.responseText != null) {
|
||||
var res = JSON.parse(xh.responseText);
|
||||
for (var i = 0; i < res.leds.length; i++) {
|
||||
var ledName = "LED" + i;
|
||||
var ledElement = document.getElementsByName(ledName)[0];
|
||||
if(res.leds[i] === "1")
|
||||
{
|
||||
ledElement.checked = true;
|
||||
}
|
||||
else
|
||||
{
|
||||
ledElement.checked = false;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
xh.overrideMimeType("text/json");
|
||||
//console.log(uri);
|
||||
xh.open("GET", arg, true);
|
||||
xh.send(null);
|
||||
}
|
||||
function onBodyLoad(){
|
||||
// init LEDbar
|
||||
updateLeds(true);
|
||||
// run the loop per default
|
||||
//run();
|
||||
}
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body id="index" style="margin:0; padding:0;" onload="onBodyLoad()">
|
||||
<div id="Main">
|
||||
<div id="pageTitle">
|
||||
<!-- SVG Glitch from: http://codepen.io/DirkWeber/pen/ArFvk -->
|
||||
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="460px" height="85px" viewBox="0 0 460 85">
|
||||
<defs>
|
||||
<filter id="filter">
|
||||
<feFlood flood-color="#66bebe" result="black" />
|
||||
<feFlood flood-color="#206060" result="flood1" />
|
||||
<feFlood flood-color="#369e9e" result="flood2" />
|
||||
<feOffset in="SourceGraphic" dx="3" dy="0" result="off1a"/>
|
||||
<feOffset in="SourceGraphic" dx="2" dy="0" result="off1b"/>
|
||||
<feOffset in="SourceGraphic" dx="-4" dy="0" result="off2a"/>
|
||||
<feOffset in="SourceGraphic" dx="-2" dy="0" result="off2b"/>
|
||||
<feComposite in="flood1" in2="off1a" operator="in" result="comp1" />
|
||||
<feComposite in="flood2" in2="off2a" operator="in" result="comp2" />
|
||||
|
||||
<feMerge x="0" width="100%" result="merge1">
|
||||
<feMergeNode in = "black" />
|
||||
<feMergeNode in = "comp1" />
|
||||
<feMergeNode in = "off1b" />
|
||||
|
||||
<animate
|
||||
attributeName="y"
|
||||
id = "y"
|
||||
dur ="4s"
|
||||
|
||||
values = '104px; 104px; 30px; 105px; 30px; 2px; 2px; 50px; 40px; 105px; 105px; 20px; 6ßpx; 40px; 104px; 40px; 70px; 10px; 30px; 104px; 102px'
|
||||
|
||||
keyTimes = '0; 0.362; 0.368; 0.421; 0.440; 0.477; 0.518; 0.564; 0.593; 0.613; 0.644; 0.693; 0.721; 0.736; 0.772; 0.818; 0.844; 0.894; 0.925; 0.939; 1'
|
||||
|
||||
repeatCount = "indefinite" />
|
||||
|
||||
<animate attributeName="height"
|
||||
id = "h"
|
||||
dur ="4s"
|
||||
|
||||
values = '10px; 0px; 10px; 30px; 50px; 0px; 10px; 0px; 0px; 0px; 10px; 50px; 40px; 0px; 0px; 0px; 40px; 30px; 10px; 0px; 50px'
|
||||
|
||||
keyTimes = '0; 0.362; 0.368; 0.421; 0.440; 0.477; 0.518; 0.564; 0.593; 0.613; 0.644; 0.693; 0.721; 0.736; 0.772; 0.818; 0.844; 0.894; 0.925; 0.939; 1'
|
||||
|
||||
repeatCount = "indefinite" />
|
||||
</feMerge>
|
||||
|
||||
|
||||
<feMerge x="0" width="100%" y="60px" height="65px" result="merge2">
|
||||
<feMergeNode in = "black" />
|
||||
<feMergeNode in = "comp2" />
|
||||
<feMergeNode in = "off2b" />
|
||||
|
||||
<animate attributeName="y"
|
||||
id = "y"
|
||||
dur ="4s"
|
||||
values = '103px; 104px; 69px; 53px; 42px; 104px; 78px; 89px; 96px; 100px; 67px; 50px; 96px; 66px; 88px; 42px; 13px; 100px; 100px; 104px;'
|
||||
|
||||
keyTimes = '0; 0.055; 0.100; 0.125; 0.159; 0.182; 0.202; 0.236; 0.268; 0.326; 0.357; 0.400; 0.408; 0.461; 0.493; 0.513; 0.548; 0.577; 0.613; 1'
|
||||
|
||||
repeatCount = "indefinite" />
|
||||
|
||||
<animate attributeName="height"
|
||||
id = "h"
|
||||
dur = "4s"
|
||||
|
||||
values = '0px; 0px; 0px; 16px; 16px; 12px; 12px; 0px; 0px; 5px; 10px; 22px; 33px; 11px; 0px; 0px; 10px'
|
||||
|
||||
keyTimes = '0; 0.055; 0.100; 0.125; 0.159; 0.182; 0.202; 0.236; 0.268; 0.326; 0.357; 0.400; 0.408; 0.461; 0.493; 0.513; 1'
|
||||
|
||||
repeatCount = "indefinite" />
|
||||
</feMerge>
|
||||
|
||||
<feMerge>
|
||||
<feMergeNode in="SourceGraphic" />
|
||||
|
||||
<feMergeNode in="merge1" />
|
||||
<feMergeNode in="merge2" />
|
||||
|
||||
</feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
<g>
|
||||
<text id="titleGlitch" style="filter: url(#filter);" x="0" y="45">ESP8266-Arduino</text>
|
||||
<text id="titleText" x="10" y="75">AP Server Portal</text>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div id="ledControls">
|
||||
<text class="sectionTitle">LED Controls:</text>
|
||||
<text class="sectionDesc">Click on the LEDs to light em Up! </text>
|
||||
<div id="ledBar"></div>
|
||||
|
||||
<text class="sectionDesc">also try a Animation:</text>
|
||||
<div class="ledMacroButtons">
|
||||
<a class="ledMacroButton" href="javascript:handleLedMarco('rider')">Rider</a>
|
||||
<a class="ledMacroButton" href="javascript:handleLedMarco('flipper')">Flipper</a>
|
||||
<a class="ledMacroButton" href="javascript:handleLedMarco('clearAll')">stop & ClearAll</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
157
data/style.css
Normal file
157
data/style.css
Normal file
@@ -0,0 +1,157 @@
|
||||
body {
|
||||
font-size: 14px;
|
||||
font-family: "Bookman Old Style","Serifa BT","URW Bookman L","itc bookman",times,serif;
|
||||
background: #00979d none repeat scroll 0px 0px;
|
||||
align: Center;
|
||||
}
|
||||
#Main {
|
||||
width: 460px;
|
||||
margin: 5px 3px 3px 12px;
|
||||
}
|
||||
|
||||
|
||||
@import "compass/css3";
|
||||
|
||||
text#titleGlitch {
|
||||
fill: #006666;
|
||||
font-weight: bold;
|
||||
text-shadow: 2px 2px black;
|
||||
font-family: sans-serif;
|
||||
font-size: 48px;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
text#titleText {
|
||||
fill: #006666;
|
||||
text-shadow: 1px 1px black;
|
||||
font-family: sans-serif;
|
||||
font-size: 26px;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
svg {
|
||||
border: solid 1px black;
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
display: block;
|
||||
position: relative;
|
||||
/*overflow: hidden; */
|
||||
background: #66bebe;
|
||||
-webkit-border-radius: 10px;
|
||||
-moz-border-radius: 10px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
#ledControls {
|
||||
margin-top:3px;
|
||||
padding: 10px;
|
||||
border: solid black 1px;
|
||||
background: #66bebe;
|
||||
-webkit-border-radius: 10px;
|
||||
-moz-border-radius: 10px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.sectionTitle {
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
font-family: "impact","Bookman Old Style","Serifa BT","URW Bookman L","itc bookman",times,serif;
|
||||
float: left;
|
||||
clear: left;
|
||||
color: #006666;
|
||||
text-shadow: 2px 2px black;
|
||||
}
|
||||
.sectionDesc {
|
||||
font-weight: bold;
|
||||
float: left;
|
||||
clear: left;
|
||||
}
|
||||
#ledBar {
|
||||
float:none;
|
||||
clear:left;
|
||||
margin-left: 7px;
|
||||
padding-top: 10px;
|
||||
overflow: auto;
|
||||
}
|
||||
.ledDiv {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: #add;
|
||||
margin: 3px 3px;
|
||||
float:left;
|
||||
line-height: 30px;
|
||||
|
||||
border-radius: 100%;
|
||||
position: relative;
|
||||
-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.5);
|
||||
-moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.5);
|
||||
box-shadow: 0px 1px 3px rgba(0,0,0,0.5);
|
||||
}
|
||||
.ledDiv label {
|
||||
display: block;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 100px;
|
||||
text-align: center;
|
||||
|
||||
-webkit-transition: all .1s ease;
|
||||
-moz-transition: all .1s ease;
|
||||
-o-transition: all .1s ease;
|
||||
-ms-transition: all .1s ease;
|
||||
transition: all .1s ease;
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
left: 5px;
|
||||
z-index: 1;
|
||||
|
||||
background: #663300;
|
||||
|
||||
-webkit-box-shadow:inset 0px 1px 3px rgba(0,0,0,0.5);
|
||||
-moz-box-shadow:inset 0px 1px 3px rgba(0,0,0,0.5);
|
||||
box-shadow:inset 0px 1px 3px rgba(0,0,0,0.5);
|
||||
}
|
||||
.ledDiv input[type="checkbox"] {
|
||||
visibility: hidden;
|
||||
}
|
||||
.ledDiv input[type=checkbox]:checked + label {
|
||||
background: #ff9900;
|
||||
}
|
||||
.ledMacroButtons {
|
||||
padding: 18px 5px 15px 5px;
|
||||
text-decoration: none;
|
||||
float:none;
|
||||
clear:left;
|
||||
}
|
||||
.ledMacroButton {
|
||||
height: 50px;
|
||||
background: #00989d;
|
||||
background-image: -webkit-linear-gradient(top, #00989d, #0a787a);
|
||||
background-image: -moz-linear-gradient(top, #00989d, #0a787a);
|
||||
background-image: -ms-linear-gradient(top, #00989d, #0a787a);
|
||||
background-image: -o-linear-gradient(top, #00989d, #0a787a);
|
||||
background-image: linear-gradient(to bottom, #00989d, #0a787a);
|
||||
-webkit-border-radius: 17;
|
||||
-moz-border-radius: 17;
|
||||
border-radius: 17px;
|
||||
text-shadow: 6px 4px 4px #4d424d;
|
||||
-webkit-box-shadow: 0px 1px 3px #666666;
|
||||
-moz-box-shadow: 0px 1px 3px #666666;
|
||||
box-shadow: 0px 1px 3px #666666;
|
||||
color: #fafafa;
|
||||
font-size:12px;
|
||||
padding: 10px 15px 10px 15px;
|
||||
border: solid #26b3b3 4px;
|
||||
text-decoration: none;
|
||||
margin: 23px 4px 23px 6px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.ledMacroButton:hover {
|
||||
background: #307070;
|
||||
background-image: -webkit-linear-gradient(top, #307070, #66bebe);
|
||||
background-image: -moz-linear-gradient(top, #307070, #66bebe);
|
||||
background-image: -ms-linear-gradient(top, #307070, #66bebe);
|
||||
background-image: -o-linear-gradient(top, #307070, #66bebe);
|
||||
background-image: linear-gradient(to bottom, #307070, #66bebe);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user