├── LICENSE ├── README.md ├── images └── Schematic_ESPlorer-v1.png └── src └── ESPlorerI_v1 ├── .cproject ├── .project ├── .settings ├── language.settings.xml └── org.eclipse.cdt.core.prefs ├── BMP.h ├── DMABuffer.h ├── ESP32Servo.cpp ├── ESP32Servo.h ├── ESPlorerI_v1.ino ├── Fields.cpp ├── Fields.h ├── I2C.h ├── I2SCamera.cpp ├── I2SCamera.h ├── Log.h ├── OV7670.cpp ├── OV7670.h ├── Util.cpp ├── Util.h ├── XClk.cpp ├── XClk.h └── data └── www ├── .history ├── index_20190105122150.htm ├── index_20190105133206.htm ├── script_20190105122035.js ├── script_20190105132105.js ├── script_20190105132130.js ├── script_20190105132157.js ├── script_20190105132235.js ├── script_20190105132405.js ├── script_20190105132846.js ├── script_20190105132900.js ├── style_20190105130936.css ├── style_20190105132213.css ├── style_20190105132247.css ├── style_20190105132314.css ├── style_20190105132340.css ├── style_20190105132436.css ├── style_20190105132457.css ├── style_20190105132525.css ├── style_20190105132537.css ├── style_20190105132608.css ├── style_20190105132720.css ├── style_20190105132746.css ├── style_20190105132816.css ├── style_20190105132917.css ├── style_20190105133153.css ├── style_20190105133252.css ├── style_20190105133336.css ├── style_20190105133355.css ├── style_20190105133404.css ├── style_20190105133426.css └── style_20190105133437.css ├── exit.png ├── fast.png ├── gauge.min.js ├── index.htm ├── info.png ├── lights_off.png ├── lights_on.png ├── manifest.json ├── nipplejs.min.js ├── on_off.png ├── reset.png ├── script.js ├── slow.png ├── style.css └── toolbar_spacer.png /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Joao Lopes 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # ESPlorer I - Arduino robot controller 2 | 3 | ### Arduino advanced robot firmware 4 | 5 | #### Works with the ESP32 Arduino platform. Refer to https://github.com/espressif/arduino-esp32 6 | 7 | ## Contents 8 | - [About](#about) 9 | - [Installing](#installing) 10 | - [Known issues](#known-issues) 11 | - [How it looks](#how-it-looks) 12 | - [Releases](#releases) 13 | - [Thanks](#thanks) 14 | 15 | ## About 16 | 17 | This is a firmware for the ESPlorer I robot. 18 | 19 | But can control any robots 4WD, 2WD or tank. (need some work to another motor drive than the DRV8833) 20 | 21 | The program is for Arduino ESP32, have advanced features as: 22 | 23 | - Web control (not need an app, just an browser) 24 | - Motor control by virtual joystick 25 | - Slow speed by PMW over PWM, with higher torque 26 | - Optional OV7670 VGA camera with servo 27 | - Accelerometer to anti-rollover system (not yet develop) 28 | 29 | 30 | ## Installing 31 | 32 | First have some library dependencies (please help the authors give a github start on it): 33 | 34 | - Arduino websocket: https://github.com/Links2004/arduinoWebSockets 35 | - ESP32MotorControl https://github.com/JoaoLopesF/ESP32MotorControl 36 | - RemoteDebug: https://github.com/JoaoLopesF/RemoteDebug 37 | - SerialDebug (optional): https://github.com/JoaoLopesF/SerialDebug 38 | 39 | After install it, just upload this firmware to ESP32 40 | 41 | ## Schematics 42 | 43 | Schematics of robot controller: 44 | 45 | ![Schematics](https://github.com/JoaoLopesF/ESPlorer_v1/blob/master/images/Schematic_ESPlorer-v1.png) 46 | 47 | ### Knew issues 48 | 49 | - Wrong colors on camera 50 | - Not working on L298 yet 51 | - Documentation is in construction 52 | 53 | ## How it looks 54 | 55 | See this firmware in action on ESPlorer I robot: 56 | 57 | [![Youtube](https://img.youtube.com/vi/KUckqEnlK_E/0.jpg)](https://https://www.youtube.com/watch?v=KUckqEnlK_E) 58 | 59 | ## Releases 60 | 61 | #### 0.1.0 - 2018-02-01 62 | 63 | - First Beta 64 | 65 | ## Thanks 66 | 67 | First thanks Igrr for code of OV7670. https://github.com/igrr/esp32-cam-demo 68 | And Mudassar for put it working with socket server: https://github.com/mudassar-tamboli/ESP32-OV7670-WebSocket-Camera 69 | (this code is based on Iggr code) 70 | 71 | And yoannmoinet for javascript virtual joystick https://github.com/yoannmoinet/nipplejs 72 | 73 | -------------------------------------------------------------------------------- /images/Schematic_ESPlorer-v1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JoaoLopesF/ESPlorer_v1/587334370774fca154576dddaec0bbfb6897cb9d/images/Schematic_ESPlorer-v1.png -------------------------------------------------------------------------------- /src/ESPlorerI_v1/.project: -------------------------------------------------------------------------------- 1 | 2 | 3 | ESPlorerI_v1 4 | 5 | 6 | 7 | 8 | 9 | io.sloeber.core.inoToCpp 10 | 11 | 12 | 13 | 14 | org.eclipse.cdt.managedbuilder.core.genmakebuilder 15 | clean,full,incremental, 16 | 17 | 18 | 19 | 20 | org.eclipse.cdt.managedbuilder.core.ScannerConfigBuilder 21 | full,incremental, 22 | 23 | 24 | 25 | 26 | 27 | org.eclipse.cdt.core.cnature 28 | org.eclipse.cdt.core.ccnature 29 | org.eclipse.cdt.managedbuilder.core.managedBuildNature 30 | org.eclipse.cdt.managedbuilder.core.ScannerConfigNature 31 | io.sloeber.arduinonature 32 | 33 | 34 | 35 | core/core 36 | 2 37 | /Improvelife/Desenv/Arduino/Hardware/arduino-esp32/cores/esp32 38 | 39 | 40 | core/variant 41 | 2 42 | /Improvelife/Desenv/Arduino/Hardware/arduino-esp32/variants/lolin32 43 | 44 | 45 | libraries/ArduinoOTA 46 | 2 47 | /Improvelife/Desenv/Arduino/Hardware/arduino-esp32/libraries/ArduinoOTA 48 | 49 | 50 | libraries/ESP32MotorControl 51 | 2 52 | /Improvelife/Desenv/Projetos/Arduino/SketchBook/Libraries/ESP32MotorControl 53 | 54 | 55 | libraries/ESPmDNS 56 | 2 57 | /Improvelife/Desenv/Arduino/Hardware/arduino-esp32/libraries/ESPmDNS 58 | 59 | 60 | libraries/FS 61 | 2 62 | /Improvelife/Desenv/Arduino/Hardware/arduino-esp32/libraries/FS 63 | 64 | 65 | libraries/RemoteDebug 66 | 2 67 | /Improvelife/Desenv/Projetos/Arduino/SketchBook/Libraries/RemoteDebug 68 | 69 | 70 | libraries/SPIFFS 71 | 2 72 | /Improvelife/Desenv/Arduino/Hardware/arduino-esp32/libraries/SPIFFS 73 | 74 | 75 | libraries/Servo 76 | 2 77 | ECLIPSE_HOME/arduinoPlugin/libraries/Servo/1.1.2 78 | 79 | 80 | libraries/Update 81 | 2 82 | /Improvelife/Desenv/Arduino/Hardware/arduino-esp32/libraries/Update 83 | 84 | 85 | libraries/WebServer 86 | 2 87 | /Improvelife/Desenv/Arduino/Hardware/arduino-esp32/libraries/WebServer 88 | 89 | 90 | libraries/WiFi 91 | 2 92 | /Improvelife/Desenv/Arduino/Hardware/arduino-esp32/libraries/WiFi 93 | 94 | 95 | libraries/WiFiClientSecure 96 | 2 97 | /Improvelife/Desenv/Arduino/Hardware/arduino-esp32/libraries/WiFiClientSecure 98 | 99 | 100 | libraries/arduinoWebSockets 101 | 2 102 | /Improvelife/Desenv/Projetos/Arduino/SketchBook/Libraries/arduinoWebSockets 103 | 104 | 105 | 106 | -------------------------------------------------------------------------------- /src/ESPlorerI_v1/.settings/language.settings.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /src/ESPlorerI_v1/BMP.h: -------------------------------------------------------------------------------- 1 | #pragma once 2 | 3 | //assuming pixel lines have multiples of 4 bytes sizes 4 | class BMP 5 | { 6 | 7 | static void setChar(void *buffer, int pos, char ch) 8 | { 9 | *(char*)(buffer+pos) = ch; 10 | } 11 | 12 | static void setLong(void *buffer, int pos, long l) 13 | { 14 | *(long*)(buffer+pos) = l; 15 | } 16 | 17 | static void setShort(void *buffer, int pos, short s) 18 | { 19 | *(short*)(buffer+pos) = s; 20 | } 21 | 22 | public: 23 | static const int headerSize = 54 + 12; 24 | 25 | static void construct16BitHeader(void *buffer, long xres, long yres) 26 | { 27 | setChar(buffer, 0, 'B'); 28 | setChar(buffer, 1, 'M'); 29 | 30 | long bytesPerLine = xres * 2; 31 | setLong(buffer, 2, bytesPerLine * yres + 54 + 12); //filesize 32 | setLong(buffer, 6, 0); 33 | 34 | setLong(buffer, 10, 54 + 12); //offset 35 | 36 | setLong(buffer, 14, 40); //header size 37 | setLong(buffer, 18, xres); 38 | setLong(buffer, 22, yres); 39 | setShort(buffer, 26, 1); //planes 40 | setShort(buffer, 28, 16); //bits 41 | 42 | setLong(buffer, 30, 3); //compression 3 = bit fields 43 | setLong(buffer, 38, 0); //x pix per meter 44 | setLong(buffer, 42, 0); //y pix per meter 45 | 46 | setLong(buffer, 46, 0); //biClrUsed 47 | setLong(buffer, 50, 0); //biClrImportant 48 | 49 | setLong(buffer, 54, 0xF800); //R mask 50 | setLong(buffer, 58, 0x07E0); //G mask 51 | setLong(buffer, 62, 0x001F); //B mask 52 | } 53 | }; 54 | 55 | 56 | -------------------------------------------------------------------------------- /src/ESPlorerI_v1/DMABuffer.h: -------------------------------------------------------------------------------- 1 | #pragma once 2 | 3 | #include 4 | 5 | class DMABuffer 6 | { 7 | public: 8 | lldesc_t descriptor; 9 | unsigned char* buffer; 10 | DMABuffer(int bytes) 11 | { 12 | buffer = (unsigned char *)malloc(bytes); 13 | descriptor.length = bytes; 14 | descriptor.size = descriptor.length; 15 | descriptor.owner = 1; 16 | descriptor.sosf = 1; 17 | descriptor.buf = (uint8_t*) buffer; 18 | descriptor.offset = 0; 19 | descriptor.empty = 0; 20 | descriptor.eof = 1; 21 | descriptor.qe.stqe_next = 0; 22 | } 23 | 24 | void next(DMABuffer *next) 25 | { 26 | descriptor.qe.stqe_next = &(next->descriptor); 27 | } 28 | 29 | int sampleCount() const 30 | { 31 | return descriptor.length / 4; 32 | } 33 | 34 | ~DMABuffer() 35 | { 36 | if(buffer) 37 | delete(buffer); 38 | } 39 | }; 40 | 41 | -------------------------------------------------------------------------------- /src/ESPlorerI_v1/ESP32Servo.cpp: -------------------------------------------------------------------------------- 1 | /****************************************************************************** 2 | * The MIT License 3 | * 4 | * Copyright (c) 2010, LeafLabs, LLC. 5 | * 6 | * Permission is hereby granted, free of charge, to any person 7 | * obtaining a copy of this software and associated documentation 8 | * files (the "Software"), to deal in the Software without 9 | * restriction, including without limitation the rights to use, copy, 10 | * modify, merge, publish, distribute, sublicense, and/or sell copies 11 | * of the Software, and to permit persons to whom the Software is 12 | * furnished to do so, subject to the following conditions: 13 | * 14 | * The above copyright notice and this permission notice shall be 15 | * included in all copies or substantial portions of the Software. 16 | * 17 | * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 18 | * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 19 | * MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 20 | * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS 21 | * BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN 22 | * ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN 23 | * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 24 | * SOFTWARE. 25 | *****************************************************************************/ 26 | 27 | /* 28 | * Arduino srl - www.arduino.org 29 | * Base on lib for stm32f4 (d2a4a47): https://github.com/arduino-libraries/Servo/blob/master/src/stm32f4/ServoTimers.h 30 | * 2017 Jul 5: Edited by Jaroslav Páral (jarekparal) - paral@robotikabrno.cz 31 | */ 32 | 33 | /* Note: This is copied from Arduino-ESP32-Servo Library, 34 | * just renamed files to not conflit with Servo library of Arduino 35 | */ 36 | 37 | #include "ESP32Servo.h" 38 | 39 | int ESP32Servo::channel_next_free = 0; 40 | 41 | ESP32Servo::ESP32Servo() { 42 | _resetFields(); 43 | }; 44 | 45 | ESP32Servo::~ESP32Servo() { 46 | detach(); 47 | } 48 | 49 | bool ESP32Servo::attach(int pin, int channel, 50 | int minAngle, int maxAngle, 51 | int minPulseWidth, int maxPulseWidth) 52 | { 53 | if(channel == CHANNEL_NOT_ATTACHED) { 54 | if(channel_next_free == CHANNEL_MAX_NUM) { 55 | return false; 56 | } 57 | _channel = channel_next_free; 58 | channel_next_free++; 59 | } else { 60 | _channel = channel; 61 | } 62 | 63 | _pin = pin; 64 | _minAngle = minAngle; 65 | _maxAngle = maxAngle; 66 | _minPulseWidth = minPulseWidth; 67 | _maxPulseWidth = maxPulseWidth; 68 | 69 | ledcSetup(_channel, 50, 16); // channel X, 50 Hz, 16-bit depth 70 | ledcAttachPin(_pin, _channel); 71 | return true; 72 | } 73 | 74 | 75 | bool ESP32Servo::detach() { 76 | if (!this->attached()) { 77 | return false; 78 | } 79 | 80 | if(_channel == (channel_next_free - 1)) 81 | channel_next_free--; 82 | 83 | ledcDetachPin(_pin); 84 | return true; 85 | } 86 | 87 | void ESP32Servo::write(int degrees) { 88 | degrees = constrain(degrees, _minAngle, _maxAngle); 89 | writeMicroseconds(_angleToUs(degrees)); 90 | } 91 | 92 | void ESP32Servo::writeMicroseconds(int pulseUs) { 93 | if (!attached()) { 94 | return; 95 | } 96 | pulseUs = constrain(pulseUs, _minPulseWidth, _maxPulseWidth); 97 | _pulseWidthDuty = _usToDuty(pulseUs); 98 | ledcWrite(_channel, _pulseWidthDuty); 99 | } 100 | 101 | int ESP32Servo::read() { 102 | return _usToAngle(readMicroseconds()); 103 | } 104 | 105 | int ESP32Servo::readMicroseconds() { 106 | if (!this->attached()) { 107 | return 0; 108 | } 109 | int duty = ledcRead(_channel); 110 | return _dutyToUs(duty); 111 | } 112 | 113 | bool ESP32Servo::attached() const { return _pin != PIN_NOT_ATTACHED; } 114 | 115 | int ESP32Servo::attachedPin() const { return _pin; } 116 | 117 | void ESP32Servo::_resetFields(void) { 118 | _pin = PIN_NOT_ATTACHED; 119 | _pulseWidthDuty = 0; 120 | _channel = CHANNEL_NOT_ATTACHED; 121 | _minAngle = MIN_ANGLE; 122 | _maxAngle = MAX_ANGLE; 123 | _minPulseWidth = MIN_PULSE_WIDTH; 124 | _maxPulseWidth = MAX_PULSE_WIDTH; 125 | } 126 | -------------------------------------------------------------------------------- /src/ESPlorerI_v1/ESP32Servo.h: -------------------------------------------------------------------------------- 1 | /****************************************************************************** 2 | * The MIT License 3 | * 4 | * Copyright (c) 2010, LeafLabs, LLC. 5 | * 6 | * Permission is hereby granted, free of charge, to any person 7 | * obtaining a copy of this software and associated documentation 8 | * files (the "Software"), to deal in the Software without 9 | * restriction, including without limitation the rights to use, copy, 10 | * modify, merge, publish, distribute, sublicense, and/or sell copies 11 | * of the Software, and to permit persons to whom the Software is 12 | * furnished to do so, subject to the following conditions: 13 | * 14 | * The above copyright notice and this permission notice shall be 15 | * included in all copies or substantial portions of the Software. 16 | * 17 | * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 18 | * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 19 | * MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 20 | * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS 21 | * BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN 22 | * ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN 23 | * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 24 | * SOFTWARE. 25 | *****************************************************************************/ 26 | 27 | /* 28 | * Arduino srl - www.arduino.org 29 | * Base on lib for stm32f4 (d2a4a47): https://github.com/arduino-libraries/Servo/blob/master/src/stm32f4/ServoTimers.h 30 | * 2017 Jul 5: Edited by Jaroslav Páral (jarekparal) - paral@robotikabrno.cz 31 | */ 32 | 33 | #pragma once 34 | 35 | #include "Arduino.h" 36 | 37 | class ESP32Servo { 38 | // Default min/max pulse widths (in microseconds) and angles (in 39 | // degrees). Values chosen for Arduino compatibility. These values 40 | // are part of the public API; DO NOT CHANGE THEM. 41 | static const int MIN_ANGLE = 0; 42 | static const int MAX_ANGLE = 180; 43 | 44 | static const int MIN_PULSE_WIDTH = 544; // the shortest pulse sent to a servo 45 | static const int MAX_PULSE_WIDTH = 2400; // the longest pulse sent to a servo 46 | static const int MAX_COMPARE = ((1 << 16) - 1); // 65535 47 | 48 | static const int TAU_MSEC = 20; 49 | static const int TAU_USEC = (TAU_MSEC * 1000); 50 | 51 | static const int CHANNEL_MAX_NUM = 16; 52 | 53 | public: 54 | static const int CHANNEL_NOT_ATTACHED = -1; 55 | 56 | // Pin number of unattached pins 57 | static const int PIN_NOT_ATTACHED = -1; 58 | 59 | /** 60 | * @brief Construct a new Servo instance. 61 | * 62 | * The new instance will not be attached to any pin. 63 | */ 64 | ESP32Servo(); 65 | 66 | /** 67 | * @brief Destruct a Servo instance. 68 | * 69 | * Call _() and detach(). 70 | */ 71 | ~ESP32Servo(); 72 | 73 | /** 74 | * @brief Associate this instance with a servomotor whose input is 75 | * connected to pin. 76 | 77 | * @param pin Pin connected to the servo pulse wave input. This 78 | * pin must be capable of PWM output (all ESP32 pins). 79 | * 80 | * @param minPulseWidth Minimum pulse width to write to pin, in 81 | * microseconds. This will be associated 82 | * with a minAngle degree angle. Defaults to 83 | * MIN_PULSE_WIDTH = 544. 84 | * 85 | * @param maxPulseWidth Maximum pulse width to write to pin, in 86 | * microseconds. This will be associated 87 | * with a maxAngle degree angle. Defaults to 88 | * MAX_PULSE_WIDTH = 2400. 89 | * 90 | * @param minAngle Target angle (in degrees) associated with 91 | * minPulseWidth. Defaults to 92 | * MIN_ANGLE = 0. 93 | * 94 | * @param maxAngle Target angle (in degrees) associated with 95 | * maxPulseWidth. Defaults to 96 | * MAX_ANGLE = 180. 97 | * 98 | * @sideeffect May set pinMode(pin, PWM). 99 | * 100 | * @return true if successful, false when pin doesn't support PWM. 101 | */ 102 | bool attach(int pin, int channel = CHANNEL_NOT_ATTACHED, 103 | int minAngle = MIN_ANGLE, int maxAngle = MAX_ANGLE, 104 | int minPulseWidth = MIN_PULSE_WIDTH, int maxPulseWidth = MAX_PULSE_WIDTH); 105 | 106 | /** 107 | * @brief Stop driving the servo pulse train. 108 | * 109 | * If not currently attached to a motor, this function has no effect. 110 | * 111 | * @return true if this call did anything, false otherwise. 112 | */ 113 | bool detach(); 114 | 115 | /** 116 | * @brief Set the servomotor target angle. 117 | * 118 | * @param angle Target angle, in degrees. If the target angle is 119 | * outside the range specified at attach() time, it 120 | * will be clamped to lie in that range. 121 | * 122 | * @see Servo::attach() 123 | */ 124 | void write(int degrees); 125 | 126 | /** 127 | * @brief Set the pulse width, in microseconds. 128 | * 129 | * @param pulseWidth Pulse width to send to the servomotor, in 130 | * microseconds. If outside of the range 131 | * specified at attach() time, it is clamped to 132 | * lie in that range. 133 | * 134 | * @see Servo::attach() 135 | */ 136 | void writeMicroseconds(int pulseUs); 137 | 138 | /** 139 | * Get the servomotor's target angle, in degrees. This will 140 | * lie inside the range specified at attach() time. 141 | * 142 | * @see Servo::attach() 143 | */ 144 | int read(); 145 | 146 | /** 147 | * Get the current pulse width, in microseconds. This will 148 | * lie within the range specified at attach() time. 149 | * 150 | * @see Servo::attach() 151 | */ 152 | int readMicroseconds(); 153 | 154 | /** 155 | * @brief Check if this instance is attached to a servo. 156 | * @return true if this instance is attached to a servo, false otherwise. 157 | * @see Servo::attachedPin() 158 | */ 159 | bool attached() const; 160 | 161 | /** 162 | * @brief Get the pin this instance is attached to. 163 | * @return Pin number if currently attached to a pin, PIN_NOT_ATTACHED 164 | * otherwise. 165 | * @see Servo::attach() 166 | */ 167 | int attachedPin() const; 168 | 169 | 170 | private: 171 | void _resetFields(void); 172 | 173 | int _usToDuty(int us) { return map(us, 0, TAU_USEC, 0, MAX_COMPARE); } 174 | int _dutyToUs(int duty) { return map(duty, 0, MAX_COMPARE, 0, TAU_USEC); } 175 | int _usToAngle(int us) { return map(us, _minPulseWidth, _maxPulseWidth, _minAngle, _maxAngle); } 176 | int _angleToUs(int angle){ return map(angle, _minAngle, _maxAngle, _minPulseWidth, _maxPulseWidth); } 177 | 178 | static int channel_next_free; 179 | 180 | int _pin; 181 | int _pulseWidthDuty; 182 | int _channel; 183 | int _min, _max; 184 | int _minPulseWidth, _maxPulseWidth; 185 | int _minAngle, _maxAngle; 186 | }; -------------------------------------------------------------------------------- /src/ESPlorerI_v1/Fields.cpp: -------------------------------------------------------------------------------- 1 | /***************************************** 2 | * Project : Util - Utilities 3 | * Programmer: Joao Lopes 4 | * Module : fields - toprocess delimited fields in string 5 | * Comments : TODO: make it a library to Arduino and ESP-IDF 6 | * Versions : 7 | * ------- ---------- ------------------------- 8 | * 0.1.0 2018-05-09 First version 9 | */ 10 | 11 | ///// Includes 12 | 13 | #include 14 | 15 | #include "Fields.h" 16 | #include "Util.h" 17 | 18 | ////// Variables 19 | 20 | // Vector 21 | 22 | // Arduino arch have C++ std vector ? 23 | 24 | #if defined ESP8266 || defined ESP32 || defined _GLIBCXX_VECTOR 25 | 26 | #define VECTOR_STD true 27 | 28 | // C++ std vector 29 | 30 | #include 31 | 32 | using namespace std; 33 | 34 | static vector fields; 35 | 36 | #else // This Arduino arch is not compatible with std::vector 37 | 38 | // Using a lightweight Arduino_Vector library: https://github.com/zacsketches/Arduino_Vector/ 39 | // Changed and otimized by JoaoLopesF 40 | 41 | #include 42 | 43 | static Vector fields; 44 | 45 | 46 | #endif 47 | 48 | ////// Class 49 | 50 | /** 51 | * @brief Fields C++ class constructor 52 | */ 53 | Fields::Fields(String str, const char delimiter, boolean ignoreEmpty) { 54 | 55 | // Process the string and populate a vector with this fields 56 | // TODO: see how ignore substring between '"' 57 | 58 | clear(); 59 | 60 | // Split and add it to vector 61 | 62 | int16_t pos = 0; 63 | int16_t lastPos = 0; 64 | 65 | str.concat(delimiter); 66 | int16_t size = str.length(); 67 | 68 | // Serial.print("field str="); 69 | // Serial.println(str); 70 | 71 | do { 72 | 73 | pos = str.indexOf(delimiter, lastPos); 74 | 75 | //Serial.printf("pos=%u last=%u\r\n", pos, lastPos); 76 | 77 | if (pos >= 0) { 78 | 79 | if (!(ignoreEmpty && pos == lastPos)) { 80 | 81 | String field = str.substring(lastPos, pos); 82 | 83 | //#if defined ESP8266 || defined ESP32 84 | // Serial.printf("field %s len=%u pos=%u last=%u\r\n", field.c_str(), field.length(), pos, lastPos); 85 | //#else 86 | // Serial.print ("field "); 87 | // Serial.print (field); 88 | // Serial.print (" len="); 89 | // Serial.print (field.length()); 90 | // Serial.print (" pos-"); 91 | // Serial.print (pos); 92 | // Serial.print (" last="); 93 | // Serial.println(lastPos); 94 | //#endif 95 | if (!(ignoreEmpty && field.length() == 0)) { 96 | 97 | // // Create a char* and alloc memory to it 98 | // 99 | // size_t size = field.length() + 1; 100 | // char* item = (char*) malloc(sizeof(char) * size); 101 | // memset(item, '\0', size); 102 | // strncpy (item, field.c_str(), size - 1); 103 | // 104 | // // Put it in vector 105 | // 106 | // fields.push_back((const char*) item); 107 | 108 | // Put it in vector 109 | 110 | fields.push_back(field); 111 | 112 | // Serial.print("push_back "); 113 | // Serial.println(field); 114 | } 115 | } 116 | 117 | if (pos == size) { 118 | break; 119 | } 120 | 121 | lastPos = pos + 1; 122 | } 123 | } 124 | while (pos >= 0); 125 | 126 | // // Debug (give it commented) 127 | // 128 | //#if defined ESP8266 || defined ESP32 129 | // Serial.printf("fields.size() = %u \r\n", fields.size()); 130 | // for (uint8_t i=1; i <= fields.size(); i++) { 131 | // Serial.printf("field %u = %s \r\n", i, getString(i).c_str()); 132 | // } 133 | //#else 134 | // Serial.print("fields.size() = "); 135 | // Serial.println(fields.size()); 136 | // for (uint8_t i=1; i <= fields.size(); i++) { 137 | // Serial.print("field "); 138 | // Serial.print(i); 139 | // Serial.print(" = "); 140 | // Serial.println(getString(i).c_str()); 141 | // } 142 | //#endif 143 | } 144 | 145 | /** 146 | * @brief Fields C++ class destructor 147 | */ 148 | Fields::~Fields() 149 | { 150 | // Clear the vector, free memory of items before 151 | 152 | clear(); 153 | 154 | } 155 | 156 | /////// Methods 157 | 158 | /** 159 | * @brief clear the vector 160 | */ 161 | 162 | void Fields::clear() { 163 | 164 | // // Clear the vector, free memory of items before 165 | // 166 | // for (uint8_t i = 0; i < fields.size(); i++) { 167 | // if (fields[i]) { 168 | // free ((void*)fields[i]); 169 | // } 170 | // } 171 | 172 | // Clear the vector 173 | 174 | fields.clear(); 175 | 176 | } 177 | 178 | /** 179 | * @brief Return the size of fields load in vector 180 | */ 181 | uint8_t Fields::size() { 182 | 183 | return fields.size(); 184 | } 185 | 186 | /** 187 | * @brief Get field type string 188 | */ 189 | String Fields::getString(uint8_t fieldNum) { 190 | 191 | if (fieldNum > 0 && fieldNum <= fields.size()) { 192 | return fields[fieldNum - 1]; 193 | } else { 194 | return ""; 195 | } 196 | } 197 | 198 | /** 199 | * @brief Get field type char 200 | */ 201 | char Fields::getChar(uint8_t fieldNum) { 202 | 203 | if (fieldNum > 0 && fieldNum <= fields.size()) { 204 | return fields[fieldNum - 1][0]; 205 | } else { 206 | return '\0'; 207 | } 208 | 209 | } 210 | 211 | /** 212 | * @brief Returns if the contents is numeric or not 213 | */ 214 | bool Fields::isNum(uint8_t fieldNum) { 215 | 216 | if (fieldNum > 0 && fieldNum <= fields.size()) { 217 | return strIsNum(fields[fieldNum - 1]); 218 | } else { 219 | return false; 220 | } 221 | } 222 | 223 | /** 224 | * @brief Get field type int 225 | */ 226 | int32_t Fields::getInt(uint8_t fieldNum) { 227 | 228 | if (fieldNum > 0 && fieldNum <= fields.size()) { 229 | return (strIsNum(fields[fieldNum - 1]) ? String(fields[fieldNum - 1]).toInt() : -1); 230 | } else { 231 | return 0; 232 | } 233 | } 234 | 235 | /** 236 | * @brief Get field type float 237 | */ 238 | float Fields::getFloat(uint8_t fieldNum) { 239 | 240 | if (fieldNum > 0 && fieldNum <= fields.size()) { 241 | return (strIsNum(fields[fieldNum - 1]) ? String(fields[fieldNum - 1]).toFloat() : -1.0f); 242 | } else { 243 | return 0.0f; 244 | } 245 | 246 | } 247 | 248 | //////// End 249 | -------------------------------------------------------------------------------- /src/ESPlorerI_v1/Fields.h: -------------------------------------------------------------------------------- 1 | /* 2 | * fields.h 3 | */ 4 | 5 | #ifndef UTIL_FIELDS_H_ 6 | #define UTIL_FIELDS_H_ 7 | 8 | ///// Includes 9 | 10 | #include 11 | #include 12 | 13 | ////// Definitions 14 | 15 | ///// Class 16 | 17 | class Fields 18 | { 19 | public: 20 | 21 | // Constructors 22 | 23 | Fields(String str, const char delimiter = ':', boolean ignoreEmpty = false); 24 | ~Fields(void); 25 | 26 | // Methods 27 | 28 | uint8_t size(); 29 | String getString(uint8_t fieldNum); 30 | char getChar(uint8_t fieldNum); 31 | bool isNum(uint8_t fieldNum); 32 | int32_t getInt(uint8_t fieldNum); 33 | float getFloat(uint8_t fieldNum); 34 | void clear(); 35 | }; 36 | 37 | #endif /* UTIL_FIELDS_H_ */ 38 | 39 | //////// End 40 | -------------------------------------------------------------------------------- /src/ESPlorerI_v1/I2C.h: -------------------------------------------------------------------------------- 1 | #include "Arduino.h" 2 | 3 | class I2C 4 | { 5 | void inline DELAY() 6 | { 7 | delayMicroseconds(1); 8 | } 9 | 10 | void inline SCLLOW() 11 | { 12 | pinMode(SCL, OUTPUT); 13 | digitalWrite(SCL, 0); 14 | } 15 | 16 | void inline SCLHIGH() 17 | { 18 | pinMode(SCL, INPUT_PULLUP); 19 | digitalWrite(SCL, 1); 20 | } 21 | 22 | void inline CLOCK() 23 | { 24 | DELAY(); 25 | SCLHIGH(); 26 | DELAY(); 27 | DELAY(); 28 | SCLLOW(); 29 | DELAY(); 30 | } 31 | 32 | void inline SDALOW() 33 | { 34 | pinMode(SDA, OUTPUT); 35 | digitalWrite(SDA, 0); 36 | } 37 | 38 | void inline SDAHIGH() 39 | { 40 | pinMode(SDA, OUTPUT); 41 | digitalWrite(SDA, 1); 42 | } 43 | 44 | void inline SDAPULLUP() 45 | { 46 | pinMode(SDA, INPUT_PULLUP); 47 | } 48 | 49 | void pushByte(unsigned char b) 50 | { 51 | for(char i = 0; i < 8; i++) 52 | { 53 | if(b & 0x80) 54 | SDAHIGH(); 55 | else 56 | SDALOW(); 57 | b <<= 1; 58 | CLOCK(); 59 | } 60 | } 61 | 62 | bool getAck() 63 | { 64 | SDAPULLUP(); 65 | DELAY(); 66 | SCLHIGH(); 67 | DELAY(); 68 | int r = digitalRead(SDA); 69 | SDALOW(); 70 | DELAY(); 71 | SCLLOW(); 72 | DELAY(); 73 | return r == 0; 74 | } 75 | 76 | void start() 77 | { 78 | SDAPULLUP(); 79 | DELAY(); 80 | SCLHIGH(); 81 | DELAY(); 82 | SDALOW(); 83 | DELAY(); 84 | SCLLOW(); 85 | DELAY(); 86 | } 87 | 88 | void end() 89 | { 90 | SCLHIGH(); 91 | DELAY(); 92 | SDAPULLUP(); 93 | DELAY(); 94 | } 95 | 96 | public: 97 | int SDA; 98 | int SCL; 99 | I2C(const int data, const int clock) 100 | { 101 | SDA = data; 102 | SCL = clock; 103 | pinMode(SDA, INPUT_PULLUP); 104 | pinMode(SCL, INPUT_PULLUP); 105 | digitalWrite(SDA, 0); 106 | digitalWrite(SCL, 0); 107 | } 108 | 109 | bool writeRegister(unsigned char addr, unsigned char reg, unsigned char data) 110 | { 111 | start(); 112 | pushByte(addr); 113 | 114 | if(!getAck()) 115 | { 116 | end(); 117 | return false; 118 | } 119 | 120 | pushByte(reg); 121 | if(!getAck()) 122 | { 123 | end(); 124 | return false; 125 | } 126 | 127 | pushByte(data); 128 | if(!getAck()) 129 | { 130 | end(); 131 | return false; 132 | } 133 | 134 | end(); 135 | return true; 136 | } 137 | }; 138 | -------------------------------------------------------------------------------- /src/ESPlorerI_v1/I2SCamera.cpp: -------------------------------------------------------------------------------- 1 | //parts of his code are taken from 2 | //https://github.com/igrr/esp32-cam-demo 3 | //by Ivan Grokhotkov 4 | //released under Apache License 2.0 5 | 6 | #include "I2SCamera.h" 7 | #include "Log.h" 8 | #include 9 | #include 10 | #include 11 | 12 | int I2SCamera::blocksReceived = 0; 13 | int I2SCamera::framesReceived = 0; 14 | int I2SCamera::xres = 160; 15 | int I2SCamera::yres = 120; 16 | int I2SCamera::startBlock = 0; 17 | int I2SCamera::endBlock = 0; 18 | int I2SCamera::blockSlice = 0; 19 | 20 | 21 | gpio_num_t I2SCamera::vSyncPin = (gpio_num_t)0; 22 | intr_handle_t I2SCamera::i2sInterruptHandle = 0; 23 | intr_handle_t I2SCamera::vSyncInterruptHandle = 0; 24 | int I2SCamera::dmaBufferCount = 0; 25 | int I2SCamera::dmaBufferActive = 0; 26 | DMABuffer **I2SCamera::dmaBuffer = 0; 27 | unsigned char* I2SCamera::frame = 0; 28 | int I2SCamera::framePointer = 0; 29 | int I2SCamera::frameBytes = 0; 30 | volatile bool I2SCamera::stopSignal = false; 31 | 32 | void IRAM_ATTR I2SCamera::i2sInterrupt(void* arg) 33 | { 34 | I2S0.int_clr.val = I2S0.int_raw.val; 35 | blocksReceived++; 36 | unsigned char* buf = dmaBuffer[dmaBufferActive]->buffer; 37 | dmaBufferActive = (dmaBufferActive + 1) % dmaBufferCount; 38 | 39 | // 1-30, 31-60, 61-90 ..... 40 | 41 | if (blocksReceived >= startBlock && blocksReceived <= endBlock) { 42 | if(framePointer < frameBytes) { 43 | for(int i = 0; i < xres * 4; i += 4) 44 | { 45 | frame[framePointer++] = buf[i + 2]; 46 | frame[framePointer++] = buf[i]; 47 | } 48 | } 49 | } 50 | 51 | if (blocksReceived == yres) // default yres 52 | { 53 | //Serial.printf("frameBytes %d , framePointer %d, blocksReceived %d\n", frameBytes, framePointer, blocksReceived); 54 | framePointer = 0; 55 | blocksReceived = 0; 56 | framesReceived++; 57 | if(stopSignal) 58 | { 59 | i2sStop(); 60 | stopSignal = false; 61 | } 62 | } 63 | 64 | // i2sStop(); 65 | } 66 | 67 | void IRAM_ATTR I2SCamera::vSyncInterrupt(void* arg) 68 | { 69 | GPIO.status1_w1tc.val = GPIO.status1.val; 70 | GPIO.status_w1tc = GPIO.status; 71 | if(gpio_get_level(vSyncPin)) 72 | { 73 | //frame done 74 | } 75 | } 76 | 77 | void I2SCamera::i2sStop() 78 | { 79 | esp_intr_disable(i2sInterruptHandle); 80 | esp_intr_disable(vSyncInterruptHandle); 81 | i2sConfReset(); 82 | I2S0.conf.rx_start = 0; 83 | } 84 | 85 | void I2SCamera::i2sRun() 86 | { 87 | DEBUG_PRINTLN("I2S Run"); 88 | while (gpio_get_level(vSyncPin) == 0) yield(); ///// Put yield here - Joao Lopes 89 | while (gpio_get_level(vSyncPin) != 0) yield(); 90 | 91 | esp_intr_disable(i2sInterruptHandle); 92 | i2sConfReset(); 93 | blocksReceived = 0; 94 | dmaBufferActive = 0; 95 | framePointer = 0; 96 | DEBUG_PRINT("Sample count "); 97 | DEBUG_PRINTLN(dmaBuffer[0]->sampleCount()); 98 | I2S0.rx_eof_num = dmaBuffer[0]->sampleCount(); 99 | I2S0.in_link.addr = (uint32_t)&(dmaBuffer[0]->descriptor); 100 | I2S0.in_link.start = 1; 101 | I2S0.int_clr.val = I2S0.int_raw.val; 102 | I2S0.int_ena.val = 0; 103 | I2S0.int_ena.in_done = 1; 104 | esp_intr_enable(i2sInterruptHandle); 105 | esp_intr_enable(vSyncInterruptHandle); 106 | I2S0.conf.rx_start = 1; 107 | } 108 | 109 | bool I2SCamera::initVSync(int pin) 110 | { 111 | DEBUG_PRINT("Initializing VSYNC... "); 112 | vSyncPin = (gpio_num_t)pin; 113 | gpio_set_intr_type(vSyncPin, GPIO_INTR_POSEDGE); 114 | gpio_intr_enable(vSyncPin); 115 | if(gpio_isr_register(&vSyncInterrupt, (void*)"vSyncInterrupt", ESP_INTR_FLAG_INTRDISABLED | ESP_INTR_FLAG_IRAM, &vSyncInterruptHandle) != ESP_OK) 116 | { 117 | DEBUG_PRINTLN("failed!"); 118 | return false; 119 | } 120 | DEBUG_PRINTLN("done."); 121 | return true; 122 | } 123 | 124 | void I2SCamera::deinitVSync() 125 | { 126 | esp_intr_disable(vSyncInterruptHandle); 127 | } 128 | 129 | bool I2SCamera::init(const int XRES, const int YRES, const int VSYNC, const int HREF, const int XCLK, const int PCLK, const int D0, const int D1, const int D2, const int D3, const int D4, const int D5, const int D6, const int D7) 130 | { 131 | xres = XRES; 132 | yres = YRES; 133 | frameBytes = XRES * blockSlice * 2; 134 | 135 | if (frame) { 136 | free (frame); 137 | Serial.printf("frame memory freed\n"); 138 | } 139 | 140 | frame = (unsigned char*)malloc(frameBytes); 141 | if(!frame) 142 | { 143 | DEBUG_PRINTLN("Not enough memory for frame buffer!"); 144 | return false; 145 | } 146 | i2sInit(VSYNC, HREF, PCLK, D0, D1, D2, D3, D4, D5, D6, D7); 147 | dmaBufferInit(xres * 2 * 2); //two bytes per dword packing, two bytes per pixel 148 | initVSync(VSYNC); 149 | return true; 150 | } 151 | 152 | bool I2SCamera::i2sInit(const int VSYNC, const int HREF, const int PCLK, const int D0, const int D1, const int D2, const int D3, const int D4, const int D5, const int D6, const int D7) 153 | { 154 | int pins[] = {VSYNC, HREF, PCLK, D0, D1, D2, D3, D4, D5, D6, D7}; 155 | gpio_config_t conf = { 156 | .pin_bit_mask = 0, 157 | .mode = GPIO_MODE_INPUT, 158 | .pull_up_en = GPIO_PULLUP_DISABLE, 159 | .pull_down_en = GPIO_PULLDOWN_DISABLE, 160 | .intr_type = GPIO_INTR_DISABLE 161 | }; 162 | for (int i = 0; i < sizeof(pins) / sizeof(gpio_num_t); ++i) { 163 | conf.pin_bit_mask = 1LL << pins[i]; 164 | gpio_config(&conf); 165 | } 166 | 167 | // Route input GPIOs to I2S peripheral using GPIO matrix, last parameter is invert 168 | gpio_matrix_in(D0, I2S0I_DATA_IN0_IDX, false); 169 | gpio_matrix_in(D1, I2S0I_DATA_IN1_IDX, false); 170 | gpio_matrix_in(D2, I2S0I_DATA_IN2_IDX, false); 171 | gpio_matrix_in(D3, I2S0I_DATA_IN3_IDX, false); 172 | gpio_matrix_in(D4, I2S0I_DATA_IN4_IDX, false); 173 | gpio_matrix_in(D5, I2S0I_DATA_IN5_IDX, false); 174 | gpio_matrix_in(D6, I2S0I_DATA_IN6_IDX, false); 175 | gpio_matrix_in(D7, I2S0I_DATA_IN7_IDX, false); 176 | gpio_matrix_in(0x30, I2S0I_DATA_IN8_IDX, false); 177 | gpio_matrix_in(0x30, I2S0I_DATA_IN9_IDX, false); 178 | gpio_matrix_in(0x30, I2S0I_DATA_IN10_IDX, false); 179 | gpio_matrix_in(0x30, I2S0I_DATA_IN11_IDX, false); 180 | gpio_matrix_in(0x30, I2S0I_DATA_IN12_IDX, false); 181 | gpio_matrix_in(0x30, I2S0I_DATA_IN13_IDX, false); 182 | gpio_matrix_in(0x30, I2S0I_DATA_IN14_IDX, false); 183 | gpio_matrix_in(0x30, I2S0I_DATA_IN15_IDX, false); 184 | 185 | gpio_matrix_in(VSYNC, I2S0I_V_SYNC_IDX, true); 186 | gpio_matrix_in(0x38, I2S0I_H_SYNC_IDX, false); //0x30 sends 0, 0x38 sends 1 187 | gpio_matrix_in(HREF, I2S0I_H_ENABLE_IDX, false); 188 | gpio_matrix_in(PCLK, I2S0I_WS_IN_IDX, false); 189 | 190 | // Enable and configure I2S peripheral 191 | periph_module_enable(PERIPH_I2S0_MODULE); 192 | 193 | // Toggle some reset bits in LC_CONF register 194 | // Toggle some reset bits in CONF register 195 | i2sConfReset(); 196 | // Enable slave mode (sampling clock is external) 197 | I2S0.conf.rx_slave_mod = 1; 198 | // Enable parallel mode 199 | I2S0.conf2.lcd_en = 1; 200 | // Use HSYNC/VSYNC/HREF to control sampling 201 | I2S0.conf2.camera_en = 1; 202 | // Configure clock divider 203 | I2S0.clkm_conf.clkm_div_a = 1; 204 | I2S0.clkm_conf.clkm_div_b = 0; 205 | I2S0.clkm_conf.clkm_div_num = 2; 206 | // FIFO will sink data to DMA 207 | I2S0.fifo_conf.dscr_en = 1; 208 | // FIFO configuration 209 | //two bytes per dword packing 210 | I2S0.fifo_conf.rx_fifo_mod = SM_0A0B_0C0D; //pack two bytes in one dword see :https://github.com/igrr/esp32-cam-demo/issues/29 211 | I2S0.fifo_conf.rx_fifo_mod_force_en = 1; 212 | I2S0.conf_chan.rx_chan_mod = 1; 213 | // Clear flags which are used in I2S serial mode 214 | I2S0.sample_rate_conf.rx_bits_mod = 0; 215 | I2S0.conf.rx_right_first = 0; 216 | I2S0.conf.rx_msb_right = 0; 217 | I2S0.conf.rx_msb_shift = 0; 218 | I2S0.conf.rx_mono = 0; 219 | I2S0.conf.rx_short_sync = 0; 220 | I2S0.timing.val = 0; 221 | 222 | // Allocate I2S interrupt, keep it disabled 223 | esp_intr_alloc(ETS_I2S0_INTR_SOURCE, ESP_INTR_FLAG_INTRDISABLED | ESP_INTR_FLAG_LEVEL1 | ESP_INTR_FLAG_IRAM, &i2sInterrupt, NULL, &i2sInterruptHandle); 224 | return true; 225 | } 226 | 227 | void I2SCamera::dmaBufferInit(int bytes) 228 | { 229 | dmaBufferDeinit(); 230 | 231 | dmaBufferCount = 2; 232 | dmaBuffer = (DMABuffer**) malloc(sizeof(DMABuffer*) * dmaBufferCount); 233 | for(int i = 0; i < dmaBufferCount; i++) 234 | { 235 | dmaBuffer[i] = new DMABuffer(bytes); 236 | if(i) 237 | dmaBuffer[i-1]->next(dmaBuffer[i]); 238 | } 239 | dmaBuffer[dmaBufferCount - 1]->next(dmaBuffer[0]); 240 | } 241 | 242 | void I2SCamera::dmaBufferDeinit() 243 | { 244 | 245 | if (!dmaBuffer) return; 246 | for(int i = 0; i < dmaBufferCount; i++) 247 | delete(dmaBuffer[i]); 248 | delete(dmaBuffer); 249 | dmaBuffer = 0; 250 | dmaBufferCount = 0; 251 | 252 | Serial.printf("dma buffer memory freed\n"); 253 | } 254 | -------------------------------------------------------------------------------- /src/ESPlorerI_v1/I2SCamera.h: -------------------------------------------------------------------------------- 1 | //parts of his code are taken from 2 | //https://github.com/igrr/esp32-cam-demo 3 | //by Ivan Grokhotkov 4 | //released under Apache License 2.0 5 | 6 | #pragma once 7 | 8 | #include "soc/soc.h" 9 | #include "soc/gpio_sig_map.h" 10 | #include "soc/i2s_reg.h" 11 | #include "soc/i2s_struct.h" 12 | #include "soc/io_mux_reg.h" 13 | #include "driver/gpio.h" 14 | #include "driver/periph_ctrl.h" 15 | #include "rom/lldesc.h" 16 | #include "XClk.h" 17 | #include "DMABuffer.h" 18 | 19 | class I2SCamera 20 | { 21 | public: 22 | static gpio_num_t vSyncPin; 23 | static int blocksReceived; 24 | static int framesReceived; 25 | static int xres; 26 | static int yres; 27 | static intr_handle_t i2sInterruptHandle; 28 | static intr_handle_t vSyncInterruptHandle; 29 | static int dmaBufferCount; 30 | static int dmaBufferActive; 31 | static DMABuffer **dmaBuffer; 32 | static unsigned char* frame; 33 | static int framePointer; 34 | static int frameBytes; 35 | static volatile bool stopSignal; 36 | 37 | static int startBlock; 38 | static int endBlock; 39 | static int blockSlice; 40 | 41 | typedef enum { 42 | /* camera sends byte sequence: s1, s2, s3, s4, ... 43 | * fifo receives: 00 s1 00 s2, 00 s2 00 s3, 00 s3 00 s4, ... 44 | */ 45 | SM_0A0B_0B0C = 0, 46 | /* camera sends byte sequence: s1, s2, s3, s4, ... 47 | * fifo receives: 00 s1 00 s2, 00 s3 00 s4, ... 48 | */ 49 | SM_0A0B_0C0D = 1, 50 | /* camera sends byte sequence: s1, s2, s3, s4, ... 51 | * fifo receives: 00 s1 00 00, 00 s2 00 00, 00 s3 00 00, ... 52 | */ 53 | SM_0A00_0B00 = 3, 54 | } i2s_sampling_mode_t; 55 | 56 | 57 | static inline void i2sConfReset() 58 | { 59 | const uint32_t lc_conf_reset_flags = I2S_IN_RST_M | I2S_AHBM_RST_M | I2S_AHBM_FIFO_RST_M; 60 | I2S0.lc_conf.val |= lc_conf_reset_flags; 61 | I2S0.lc_conf.val &= ~lc_conf_reset_flags; 62 | 63 | const uint32_t conf_reset_flags = I2S_RX_RESET_M | I2S_RX_FIFO_RESET_M | I2S_TX_RESET_M | I2S_TX_FIFO_RESET_M; 64 | I2S0.conf.val |= conf_reset_flags; 65 | I2S0.conf.val &= ~conf_reset_flags; 66 | while (I2S0.state.rx_fifo_reset_back); 67 | } 68 | 69 | void start() 70 | { 71 | i2sRun(); 72 | } 73 | 74 | void stop() 75 | { 76 | stopSignal = true; 77 | while(stopSignal); 78 | } 79 | 80 | void oneFrame() 81 | { 82 | start(); 83 | stop(); 84 | } 85 | 86 | static void i2sStop(); 87 | static void i2sRun(); 88 | 89 | static void dmaBufferInit(int bytes); 90 | static void dmaBufferDeinit(); 91 | 92 | static bool initVSync(int pin); 93 | static void deinitVSync(); 94 | 95 | static void IRAM_ATTR i2sInterrupt(void* arg); 96 | static void IRAM_ATTR vSyncInterrupt(void* arg); 97 | 98 | static bool i2sInit(const int VSYNC, const int HREF, const int PCLK, const int D0, const int D1, const int D2, const int D3, const int D4, const int D5, const int D6, const int D7); 99 | 100 | static bool init(const int XRES, const int YRES, const int VSYNC, const int HREF, const int XCLK, const int PCLK, const int D0, const int D1, const int D2, const int D3, const int D4, const int D5, const int D6, const int D7); 101 | }; 102 | -------------------------------------------------------------------------------- /src/ESPlorerI_v1/Log.h: -------------------------------------------------------------------------------- 1 | #pragma once 2 | #include "Arduino.h" 3 | 4 | //#define DEBUG_PRINTLN(a) Serial.println(a) 5 | //#define DEBUG_PRINT(a) Serial.print(a) 6 | //#define DEBUG_PRINTLNF(a, f) Serial.println(a, f) 7 | //#define DEBUG_PRINTF(a, f) Serial.print(a, f) 8 | 9 | #define DEBUG_PRINTLN(a) 10 | #define DEBUG_PRINT(a) 11 | #define DEBUG_PRINTLNF(a, f) 12 | #define DEBUG_PRINTF(a, f) 13 | 14 | -------------------------------------------------------------------------------- /src/ESPlorerI_v1/OV7670.cpp: -------------------------------------------------------------------------------- 1 | #include "OV7670.h" 2 | #include "XClk.h" 3 | #include "Log.h" 4 | 5 | OV7670::OV7670(Mode m, const int SIOD, const int SIOC, const int VSYNC, const int HREF, const int XCLK, const int PCLK, const int D0, const int D1, const int D2, const int D3, const int D4, const int D5, const int D6, const int D7) 6 | :i2c(SIOD, SIOC) 7 | { 8 | ClockEnable(XCLK, 20000000); //base is 80MHz 9 | 10 | DEBUG_PRINT("Waiting for VSYNC..."); 11 | pinMode(VSYNC, INPUT); 12 | while(!digitalRead(VSYNC)) yield(); ///// Put yield here - Joao Lopes 13 | while(digitalRead(VSYNC)) yield(); 14 | DEBUG_PRINTLN(" done"); 15 | 16 | mode = m; 17 | switch(mode) 18 | { 19 | 20 | // case VGA_RGB565: 21 | // blockSlice = 60; 22 | // xres = 640; 23 | // yres = 480; 24 | // VGARGB565(); 25 | // 26 | // break; 27 | // 28 | // case QVGA_RGB565: 29 | // blockSlice = 120; 30 | // xres = 320; 31 | // yres = 240; 32 | // QVGARGB565(); 33 | // break; 34 | // 35 | case QQVGA_RGB565: 36 | blockSlice = 120; 37 | xres = 160; 38 | yres = 120; 39 | QQVGARGB565(); 40 | break; 41 | 42 | // case QQQVGA_RGB565: 43 | // blockSlice = 60; 44 | // xres = 80; 45 | // yres = 60; 46 | // QQQVGARGB565(); 47 | // break; 48 | 49 | default: 50 | xres = 0; 51 | yres = 0; 52 | } 53 | //testImage(); 54 | I2SCamera::init(xres, yres, VSYNC, HREF, XCLK, PCLK, D0, D1, D2, D3, D4, D5, D6, D7); 55 | } 56 | 57 | void OV7670::testImage() 58 | { 59 | i2c.writeRegister(ADDR, 0x71, 0x35 | 0x80); 60 | } 61 | 62 | void OV7670::saturation(int s) //-2 to 2 63 | { 64 | //color matrix values 65 | i2c.writeRegister(ADDR, 0x4f, 0x80 + 0x20 * s); 66 | i2c.writeRegister(ADDR, 0x50, 0x80 + 0x20 * s); 67 | i2c.writeRegister(ADDR, 0x51, 0x00); 68 | i2c.writeRegister(ADDR, 0x52, 0x22 + (0x11 * s) / 2); 69 | i2c.writeRegister(ADDR, 0x53, 0x5e + (0x2f * s) / 2); 70 | i2c.writeRegister(ADDR, 0x54, 0x80 + 0x20 * s); 71 | i2c.writeRegister(ADDR, 0x58, 0x9e); //matrix signs 72 | } 73 | 74 | void OV7670::frameControl(int hStart, int hStop, int vStart, int vStop) 75 | { 76 | i2c.writeRegister(ADDR, REG_HSTART, hStart >> 3); 77 | i2c.writeRegister(ADDR, REG_HSTOP, hStop >> 3); 78 | i2c.writeRegister(ADDR, REG_HREF, ((hStop & 0b111) << 3) | (hStart & 0b111)); 79 | 80 | i2c.writeRegister(ADDR, REG_VSTART, vStart >> 2); 81 | i2c.writeRegister(ADDR, REG_VSTOP, vStop >> 2); 82 | i2c.writeRegister(ADDR, REG_VREF, ((vStop & 0b11) << 2) | (vStart & 0b11)); 83 | } 84 | 85 | /////////////////////////////////////// 86 | 87 | 88 | //void OV7670::QVGA() 89 | //{ 90 | // i2c.writeRegister(ADDR, REG_COM3, 0x04); //DCW enable -- done 91 | // i2c.writeRegister(ADDR, REG_COM14, 0x19); //pixel clock divided by 4, manual scaling enable, DCW and PCLK controlled by register -- done 92 | // i2c.writeRegister(ADDR, REG_SCALING_XSC, 0x3a); // -- done 93 | // i2c.writeRegister(ADDR, REG_SCALING_YSC, 0x35); // -- done 94 | // i2c.writeRegister(ADDR, REG_SCALING_DCWCTR, 0x11); //downsample by 2 95 | // i2c.writeRegister(ADDR, REG_SCALING_PCLK_DIV, 0xf1); //pixel clock divided by 8 96 | // i2c.writeRegister(ADDR, REG_SCALING_PCLK_DELAY, 0x02); 97 | //} 98 | // 99 | //void OV7670::VGA() 100 | //{ 101 | // i2c.writeRegister(ADDR, REG_COM3, 0x0); //DCW enable -- done 102 | //// i2c.writeRegister(ADDR, REG_COM14, 0x19); //pixel clock divided by 4, manual scaling enable, DCW and PCLK controlled by register -- done 103 | // i2c.writeRegister(ADDR, REG_COM14, 0); //pixel clock divided by 4, manual scaling enable, DCW and PCLK controlled by register -- done 104 | //// i2c.writeRegister(ADDR, REG_SCALING_XSC, 0x3a); // -- done 105 | //// i2c.writeRegister(ADDR, REG_SCALING_YSC, 0x35); // -- done 106 | // // i2c.writeRegister(ADDR, REG_SCALING_DCWCTR, 0x11); //downsample by 2 107 | // // i2c.writeRegister(ADDR, REG_SCALING_PCLK_DIV, 0xf0); //pixel clock divided by 8 108 | // // i2c.writeRegister(ADDR, REG_SCALING_PCLK_DELAY, 0x02); 109 | //} 110 | // 111 | // 112 | //void OV7670::VGARGB565() 113 | //{ 114 | // i2c.writeRegister(ADDR, REG_COM7, 0b10000000); //all registers default 115 | // 116 | // i2c.writeRegister(ADDR, REG_CLKRC, 0b10000000); //double clock 117 | // i2c.writeRegister(ADDR, REG_COM11, 0b1000 | 0b10); //enable auto 50/60Hz detect + exposure timing can be less... 118 | // 119 | // i2c.writeRegister(ADDR, REG_COM7, 0b100); //RGB 120 | // i2c.writeRegister(ADDR, REG_COM15, 0b11000000 | 0b010000); //RGB565 121 | // 122 | // /* 123 | // i2c.writeRegister(ADDR, REG_COM7, 0b10000000); //all registers default 124 | // 125 | // i2c.writeRegister(ADDR, REG_CLKRC, 0b10000000); //double clock 126 | // i2c.writeRegister(ADDR, REG_COM11, 0b1000 | 0b10); //enable auto 50/60Hz detect + exposure timing can be less... 127 | // 128 | // i2c.writeRegister(ADDR, REG_COM7, 0b100); //RGB 129 | // i2c.writeRegister(ADDR, REG_COM15, 0b11000000 | 0b010000); //RGB565 130 | //*/ 131 | // VGA(); 132 | // 133 | // // hstart, hstop, vstart, vstop 134 | // frameControl(168, 24, 12, 492); //no clue why horizontal needs such strange values, vertical works ok 135 | // 136 | // //i2c.writeRegister(ADDR, REG_COM10, 0x02); //VSYNC negative 137 | // //i2c.writeRegister(ADDR, REG_MVFP, 0x2b); //mirror flip 138 | // 139 | // i2c.writeRegister(ADDR, 0xb0, 0x84);// no clue what this is but it's most important for colors 140 | // saturation(0); 141 | // i2c.writeRegister(ADDR, 0x13, 0xe7); //AWB on 142 | // i2c.writeRegister(ADDR, 0x6f, 0x9f); // Simple AWB 143 | //} 144 | // 145 | // 146 | //void OV7670::QVGARGB565() 147 | //{ 148 | // i2c.writeRegister(ADDR, REG_COM7, 0b10000000); //all registers default 149 | // 150 | // i2c.writeRegister(ADDR, REG_CLKRC, 0b10000000); //double clock 151 | // i2c.writeRegister(ADDR, REG_COM11, 0b1000 | 0b10); //enable auto 50/60Hz detect + exposure timing can be less... 152 | // 153 | // i2c.writeRegister(ADDR, REG_COM7, 0b100); //RGB 154 | // i2c.writeRegister(ADDR, REG_COM15, 0b11000000 | 0b010000); //RGB565 155 | // 156 | // QVGA(); 157 | // 158 | // // hstart, hstop, vstart, vstop 159 | // frameControl(168, 24, 12, 492); //no clue why horizontal needs such strange values, vertical works ok 160 | // 161 | // //i2c.writeRegister(ADDR, REG_COM10, 0x02); //VSYNC negative 162 | // //i2c.writeRegister(ADDR, REG_MVFP, 0x2b); //mirror flip 163 | // 164 | // i2c.writeRegister(ADDR, 0xb0, 0x84);// no clue what this is but it's most important for colors 165 | // saturation(0); 166 | // i2c.writeRegister(ADDR, 0x13, 0xe7); //AWB on 167 | // i2c.writeRegister(ADDR, 0x6f, 0x9f); // Simple AWB 168 | //} 169 | // 170 | 171 | //////////////////////////////////// 172 | //void OV7670::QQQVGA() 173 | //{ 174 | // i2c.writeRegister(ADDR, REG_COM3, 0x04); //DCW enable 175 | // i2c.writeRegister(ADDR, REG_COM14, 0x1b); //pixel clock divided by 4, manual scaling enable, DCW and PCLK controlled by register 176 | // i2c.writeRegister(ADDR, REG_SCALING_XSC, 0x3a); 177 | // i2c.writeRegister(ADDR, REG_SCALING_YSC, 0x35); 178 | // i2c.writeRegister(ADDR, REG_SCALING_DCWCTR, 0x33); //downsample by 8 179 | // i2c.writeRegister(ADDR, REG_SCALING_PCLK_DIV, 0xf3); //pixel clock divided by 8 180 | // i2c.writeRegister(ADDR, REG_SCALING_PCLK_DELAY, 0x02); 181 | //} 182 | 183 | void OV7670::QQVGA() 184 | { 185 | //160x120 (1/4) 186 | //i2c.writeRegister(ADDR, REG_CLKRC, 0x01); 187 | i2c.writeRegister(ADDR, REG_COM3, 0x04); //DCW enable 188 | 189 | i2c.writeRegister(ADDR, REG_COM14, 0x1a); //pixel clock divided by 4, manual scaling enable, DCW and PCLK controlled by register 190 | i2c.writeRegister(ADDR, REG_SCALING_XSC, 0x3a); 191 | i2c.writeRegister(ADDR, REG_SCALING_YSC, 0x35); 192 | 193 | i2c.writeRegister(ADDR, REG_SCALING_DCWCTR, 0x22); //downsample by 4 194 | i2c.writeRegister(ADDR, REG_SCALING_PCLK_DIV, 0xf2); //pixel clock divided by 4 195 | i2c.writeRegister(ADDR, REG_SCALING_PCLK_DELAY, 0x02); 196 | } 197 | 198 | void OV7670::QQVGARGB565() 199 | { 200 | 201 | i2c.writeRegister(ADDR, REG_COM7, 0b10000000); //all registers default 202 | 203 | i2c.writeRegister(ADDR, REG_CLKRC, 0b10000000); //double clock 204 | //JL i2c.writeRegister(ADDR, REG_CLKRC, 0b10000000 | 0b00000001); // 30 fps clock 205 | 206 | i2c.writeRegister(ADDR, REG_COM11, 0b1000 | 0b10); //enable auto 50/60Hz detect + exposure timing can be less... 207 | //JL i2c.writeRegister(ADDR, REG_COM11, 0b10000000 | 0b1000 | 0b10); // Night mode ?? 208 | //JL i2c.writeRegister(ADDR, REG_COM11, 0b10); // Only bit 1 209 | i2c.writeRegister(ADDR, REG_COM7, 0b100); //RGB 210 | i2c.writeRegister(ADDR, REG_COM15, 0b11000000 | 0b010000); //RGB565 211 | 212 | QQVGA(); 213 | 214 | frameControl(196, 52, 8, 488); //no clue why horizontal needs such strange values, vertical works ok 215 | 216 | //i2c.writeRegister(ADDR, REG_COM10, 0x02); //VSYNC negative 217 | //i2c.writeRegister(ADDR, REG_MVFP, 0x2b); //mirror flip 218 | 219 | i2c.writeRegister(ADDR, REG_MVFP, 0b00000001 | 0b00000010); // 0x01 & black sun 220 | 221 | i2c.writeRegister(ADDR, 0xb0, 0x84);// no clue what this is but it's most important for colors 222 | 223 | saturation(0); 224 | 225 | i2c.writeRegister(ADDR, 0x13, 0xe7); //AWB on 226 | i2c.writeRegister(ADDR, 0x6f, 0x9f); // Simple AWB 227 | 228 | ///// Begin changes - Joao Lopes 229 | #ifdef REGISTERS_LINUX 230 | writeRegistersLinux(); 231 | #endif 232 | /////// End changes - Joao Lopes 233 | 234 | } 235 | 236 | //void OV7670::QQQVGARGB565() 237 | //{ 238 | // i2c.writeRegister(ADDR, REG_COM7, 0b10000000); //all registers default 239 | // 240 | // i2c.writeRegister(ADDR, REG_CLKRC, 0b10000000); //double clock 241 | // i2c.writeRegister(ADDR, REG_COM11, 0b1000 | 0b10); //enable auto 50/60Hz detect + exposure timing can be less... 242 | // 243 | // i2c.writeRegister(ADDR, REG_COM7, 0b100); //RGB 244 | // i2c.writeRegister(ADDR, REG_COM15, 0b11000000 | 0b010000); //RGB565 245 | // 246 | // QQQVGA(); 247 | // 248 | // frameControl(196, 52, 8, 488); //no clue why horizontal needs such strange values, vertical works ok 249 | // 250 | // //i2c.writeRegister(ADDR, REG_MVFP, 0x2b); //mirror flip 251 | // 252 | // i2c.writeRegister(ADDR, 0xb0, 0x84);// no clue what this is but it's most important for colors 253 | // saturation(0); 254 | // i2c.writeRegister(ADDR, 0x13, 0xe7); //AWB on 255 | // i2c.writeRegister(ADDR, 0x6f, 0x9f); // Simple AWB 256 | //} 257 | 258 | ///// Begin changes - Joao Lopes 259 | 260 | #ifdef REGISTERS_LINUX 261 | 262 | // Write registers based from linux driver: https://github.com/torvalds/linux/blob/master/drivers/media/i2c/ov7670.c 263 | 264 | struct regval_list{ 265 | uint8_t reg_num; 266 | uint8_t value; 267 | }; 268 | 269 | 270 | void OV7670::writeRegistersLinux () { 271 | 272 | const struct regval_list ov7670_default_regs[] = { // from the linux driver 273 | // { REG_CLKRC, 0x1 }, /* OV: clock scale (30 fps) */ 274 | // { REG_TSLB, 0x04 }, /* OV */ 275 | // { REG_COM7, 0 }, /* VGA */ 276 | // /* 277 | // * Set the hardware window. These values from OV don't entirely 278 | // * make sense - hstop is less than hstart. But they work... 279 | // */ 280 | // { REG_HSTART, 0x13 }, { REG_HSTOP, 0x01 }, 281 | // { REG_HREF, 0xb6 }, { REG_VSTART, 0x02 }, 282 | // { REG_VSTOP, 0x7a }, { REG_VREF, 0x0a }, 283 | // 284 | // { REG_COM3, 0 }, { REG_COM14, 0 }, 285 | // /* Mystery scaling numbers */ 286 | // { REG_SCALING_XSC, 0x3a }, 287 | // { REG_SCALING_YSC, 0x35 }, 288 | // { 0x72, 0x11 }, { 0x73, 0xf0 }, 289 | // { 0xa2, 0x02 }, { REG_COM10, 0x0 }, 290 | 291 | /* Gamma curve values */ 292 | { 0x7a, 0x20 }, { 0x7b, 0x10 }, 293 | { 0x7c, 0x1e }, { 0x7d, 0x35 }, 294 | { 0x7e, 0x5a }, { 0x7f, 0x69 }, 295 | { 0x80, 0x76 }, { 0x81, 0x80 }, 296 | { 0x82, 0x88 }, { 0x83, 0x8f }, 297 | { 0x84, 0x96 }, { 0x85, 0xa3 }, 298 | { 0x86, 0xaf }, { 0x87, 0xc4 }, 299 | { 0x88, 0xd7 }, { 0x89, 0xe8 }, 300 | 301 | /* AGC and AEC parameters. Note we start by disabling those features, 302 | then turn them only after tweaking the values. */ 303 | { REG_COM8, COM8_FASTAEC | COM8_AECSTEP | COM8_BFILT }, 304 | { REG_GAIN, 0 }, { REG_AECH, 0 }, 305 | { REG_COM4, 0x40 }, /* magic reserved bit */ 306 | { REG_COM9, 0x18 }, /* 4x gain + magic rsvd bit */ 307 | { REG_BD50MAX, 0x05 }, { REG_BD60MAX, 0x07 }, 308 | { REG_AEW, 0x95 }, { REG_AEB, 0x33 }, 309 | { REG_VPT, 0xe3 }, { REG_HAECC1, 0x78 }, 310 | { REG_HAECC2, 0x68 }, { 0xa1, 0x03 }, /* magic */ 311 | { REG_HAECC3, 0xd8 }, { REG_HAECC4, 0xd8 }, 312 | { REG_HAECC5, 0xf0 }, { REG_HAECC6, 0x90 }, 313 | { REG_HAECC7, 0x94 }, 314 | { REG_COM8, COM8_FASTAEC|COM8_AECSTEP|COM8_BFILT|COM8_AGC|COM8_AEC }, 315 | // 316 | // /* Almost all of these are magic "reserved" values. */ 317 | // { REG_COM5, 0x61 }, { REG_COM6, 0x4b }, 318 | // { 0x16, 0x02 }, { REG_MVFP, 0x07 }, 319 | // { 0x21, 0x02 }, { 0x22, 0x91 }, 320 | // { 0x29, 0x07 }, { 0x33, 0x0b }, 321 | // { 0x35, 0x0b }, { 0x37, 0x1d }, 322 | // { 0x38, 0x71 }, { 0x39, 0x2a }, 323 | // { REG_COM12, 0x78 }, { 0x4d, 0x40 }, 324 | // { 0x4e, 0x20 }, { REG_GFIX, 0 }, 325 | // { 0x6b, 0x4a }, { 0x74, 0x10 }, 326 | // { 0x8d, 0x4f }, { 0x8e, 0 }, 327 | // { 0x8f, 0 }, { 0x90, 0 }, 328 | // { 0x91, 0 }, { 0x96, 0 }, 329 | // { 0x9a, 0 }, { 0xb0, 0x84 }, 330 | // { 0xb1, 0x0c }, { 0xb2, 0x0e }, 331 | // { 0xb3, 0x82 }, { 0xb8, 0x0a }, 332 | // 333 | /* More reserved magic, some of which tweaks white balance */ 334 | { 0x43, 0x0a }, { 0x44, 0xf0 }, 335 | { 0x45, 0x34 }, { 0x46, 0x58 }, 336 | { 0x47, 0x28 }, { 0x48, 0x3a }, 337 | { 0x59, 0x88 }, { 0x5a, 0x88 }, 338 | { 0x5b, 0x44 }, { 0x5c, 0x67 }, 339 | { 0x5d, 0x49 }, { 0x5e, 0x0e }, 340 | { 0x6c, 0x0a }, { 0x6d, 0x55 }, 341 | { 0x6e, 0x11 }, { 0x6f, 0x9f }, /* "9e for advance AWB" */ 342 | { 0x6a, 0x40 }, { REG_BLUE, 0x40 }, 343 | { REG_RED, 0x60 }, 344 | { REG_COM8, COM8_FASTAEC|COM8_AECSTEP|COM8_BFILT|COM8_AGC|COM8_AEC|COM8_AWB }, 345 | 346 | /* Matrix coefficients */ 347 | { 0x4f, 0x80 }, { 0x50, 0x80 }, 348 | { 0x51, 0 }, { 0x52, 0x22 }, 349 | { 0x53, 0x5e }, { 0x54, 0x80 }, 350 | { 0x58, 0x9e }, 351 | 352 | { REG_COM16, COM16_AWBGAIN }, { REG_EDGE, 0 }, 353 | { 0x75, 0x05 }, { 0x76, 0xe1 }, 354 | { 0x4c, 0 }, { 0x77, 0x01 }, 355 | { REG_COM13, 0xc3 }, { 0x4b, 0x09 }, 356 | { 0xc9, 0x60 }, { REG_COM16, 0x38 }, 357 | { 0x56, 0x40 }, 358 | 359 | // { 0x34, 0x11 }, { REG_COM11, COM11_EXP|COM11_HZAUTO }, 360 | { 0x34, 0x11 }, { REG_COM11, COM11_EXP}, 361 | { 0xa4, 0x88 }, { 0x96, 0 }, 362 | { 0x97, 0x30 }, { 0x98, 0x20 }, 363 | { 0x99, 0x30 }, { 0x9a, 0x84 }, 364 | { 0x9b, 0x29 }, { 0x9c, 0x03 }, 365 | { 0x9d, 0x4c }, { 0x9e, 0x3f }, 366 | { 0x78, 0x04 }, 367 | 368 | // /* Extra-weird stuff. Some sort of multiplexor register */ 369 | // { 0x79, 0x01 }, { 0xc8, 0xf0 }, 370 | // { 0x79, 0x0f }, { 0xc8, 0x00 }, 371 | // { 0x79, 0x10 }, { 0xc8, 0x7e }, 372 | // { 0x79, 0x0a }, { 0xc8, 0x80 }, 373 | // { 0x79, 0x0b }, { 0xc8, 0x01 }, 374 | // { 0x79, 0x0c }, { 0xc8, 0x0f }, 375 | // { 0x79, 0x0d }, { 0xc8, 0x20 }, 376 | // { 0x79, 0x09 }, { 0xc8, 0x80 }, 377 | // { 0x79, 0x02 }, { 0xc8, 0xc0 }, 378 | // { 0x79, 0x03 }, { 0xc8, 0x40 }, 379 | // { 0x79, 0x05 }, { 0xc8, 0x30 }, 380 | // { 0x79, 0x26 }, 381 | // 382 | { 0xff, 0xff }, /* END MARKER */ 383 | }; 384 | 385 | // Write registers from linux driver 386 | 387 | uint8_t reg_addr, reg_val; 388 | for (uint8_t i=0;; i++) { 389 | reg_addr = ov7670_default_regs[i].reg_num; 390 | reg_val = ov7670_default_regs[i].value; 391 | if (reg_addr == 0xff || reg_val == 0xff) { 392 | break; 393 | } 394 | i2c.writeRegister(ADDR, reg_addr, reg_val); 395 | } 396 | 397 | } 398 | 399 | #endif // REGISTERS_LINUX 400 | 401 | /////// End changes - Joao Lopes 402 | 403 | 404 | 405 | -------------------------------------------------------------------------------- /src/ESPlorerI_v1/OV7670.h: -------------------------------------------------------------------------------- 1 | #pragma once 2 | #include "I2SCamera.h" 3 | #include "I2C.h" 4 | 5 | ///// Begin changes - Joao Lopes 6 | 7 | // Write registers based on linux driver ? 8 | 9 | //#define REGISTERS_LINUX true 10 | 11 | #ifdef REGISTERS_LINUX 12 | 13 | /* Registers * based on linux driver 14 | */ 15 | 16 | /* Registers */ 17 | #define REG_GAIN 0x00 /* Gain lower 8 bits (rest in vref) */ 18 | #define REG_BLUE 0x01 /* blue gain */ 19 | #define REG_RED 0x02 /* red gain */ 20 | #define REG_VREF 0x03 /* Pieces of GAIN, VSTART, VSTOP */ 21 | #define REG_COM1 0x04 /* Control 1 */ 22 | #define COM1_CCIR656 0x40 /* CCIR656 enable */ 23 | #define REG_BAVE 0x05 /* U/B Average level */ 24 | #define REG_GbAVE 0x06 /* Y/Gb Average level */ 25 | #define REG_AECHH 0x07 /* AEC MS 5 bits */ 26 | #define REG_RAVE 0x08 /* V/R Average level */ 27 | #define REG_COM2 0x09 /* Control 2 */ 28 | #define COM2_SSLEEP 0x10 /* Soft sleep mode */ 29 | #define REG_PID 0x0a /* Product ID MSB */ 30 | #define REG_VER 0x0b /* Product ID LSB */ 31 | #define REG_COM3 0x0c /* Control 3 */ 32 | #define COM3_SWAP 0x40 /* Byte swap */ 33 | #define COM3_SCALEEN 0x08 /* Enable scaling */ 34 | #define COM3_DCWEN 0x04 /* Enable downsamp/crop/window */ 35 | #define REG_COM4 0x0d /* Control 4 */ 36 | #define REG_COM5 0x0e /* All "reserved" */ 37 | #define REG_COM6 0x0f /* Control 6 */ 38 | #define REG_AECH 0x10 /* More bits of AEC value */ 39 | #define REG_CLKRC 0x11 /* Clocl control */ 40 | #define CLK_EXT 0x40 /* Use external clock directly */ 41 | #define CLK_SCALE 0x3f /* Mask for internal clock scale */ 42 | #define REG_COM7 0x12 /* Control 7 */ 43 | #define COM7_RESET 0x80 /* Register reset */ 44 | #define COM7_FMT_MASK 0x38 45 | #define COM7_FMT_VGA 0x00 46 | #define COM7_FMT_CIF 0x20 /* CIF format */ 47 | #define COM7_FMT_QVGA 0x10 /* QVGA format */ 48 | #define COM7_FMT_QCIF 0x08 /* QCIF format */ 49 | #define COM7_RGB 0x04 /* bits 0 and 2 - RGB format */ 50 | #define COM7_YUV 0x00 /* YUV */ 51 | #define COM7_BAYER 0x01 /* Bayer format */ 52 | #define COM7_PBAYER 0x05 /* "Processed bayer" */ 53 | #define REG_COM8 0x13 /* Control 8 */ 54 | #define COM8_FASTAEC 0x80 /* Enable fast AGC/AEC */ 55 | #define COM8_AECSTEP 0x40 /* Unlimited AEC step size */ 56 | #define COM8_BFILT 0x20 /* Band filter enable */ 57 | #define COM8_AGC 0x04 /* Auto gain enable */ 58 | #define COM8_AWB 0x02 /* White balance enable */ 59 | #define COM8_AEC 0x01 /* Auto exposure enable */ 60 | #define REG_COM9 0x14 /* Control 9 - gain ceiling */ 61 | #define REG_COM10 0x15 /* Control 10 */ 62 | #define COM10_HSYNC 0x40 /* HSYNC instead of HREF */ 63 | #define COM10_PCLK_HB 0x20 /* Suppress PCLK on horiz blank */ 64 | #define COM10_HREF_REV 0x08 /* Reverse HREF */ 65 | #define COM10_VS_LEAD 0x04 /* VSYNC on clock leading edge */ 66 | #define COM10_VS_NEG 0x02 /* VSYNC negative */ 67 | #define COM10_HS_NEG 0x01 /* HSYNC negative */ 68 | #define REG_HSTART 0x17 /* Horiz start high bits */ 69 | #define REG_HSTOP 0x18 /* Horiz stop high bits */ 70 | #define REG_VSTART 0x19 /* Vert start high bits */ 71 | #define REG_VSTOP 0x1a /* Vert stop high bits */ 72 | #define REG_PSHFT 0x1b /* Pixel delay after HREF */ 73 | #define REG_MIDH 0x1c /* Manuf. ID high */ 74 | #define REG_MIDL 0x1d /* Manuf. ID low */ 75 | #define REG_MVFP 0x1e /* Mirror / vflip */ 76 | #define MVFP_MIRROR 0x20 /* Mirror image */ 77 | #define MVFP_FLIP 0x10 /* Vertical flip */ 78 | 79 | #define REG_AEW 0x24 /* AGC upper limit */ 80 | #define REG_AEB 0x25 /* AGC lower limit */ 81 | #define REG_VPT 0x26 /* AGC/AEC fast mode op region */ 82 | #define REG_HSYST 0x30 /* HSYNC rising edge delay */ 83 | #define REG_HSYEN 0x31 /* HSYNC falling edge delay */ 84 | #define REG_HREF 0x32 /* HREF pieces */ 85 | #define REG_TSLB 0x3a /* lots of stuff */ 86 | #define TSLB_YLAST 0x04 /* UYVY or VYUY - see com13 */ 87 | #define REG_COM11 0x3b /* Control 11 */ 88 | #define COM11_NIGHT 0x80 /* NIght mode enable */ 89 | #define COM11_NMFR 0x60 /* Two bit NM frame rate */ 90 | #define COM11_HZAUTO 0x10 /* Auto detect 50/60 Hz */ 91 | #define COM11_50HZ 0x08 /* Manual 50Hz select */ 92 | #define COM11_EXP 0x02 93 | #define REG_COM12 0x3c /* Control 12 */ 94 | #define COM12_HREF 0x80 /* HREF always */ 95 | #define REG_COM13 0x3d /* Control 13 */ 96 | #define COM13_GAMMA 0x80 /* Gamma enable */ 97 | #define COM13_UVSAT 0x40 /* UV saturation auto adjustment */ 98 | #define COM13_UVSWAP 0x01 /* V before U - w/TSLB */ 99 | #define REG_COM14 0x3e /* Control 14 */ 100 | #define COM14_DCWEN 0x10 /* DCW/PCLK-scale enable */ 101 | #define REG_EDGE 0x3f /* Edge enhancement factor */ 102 | #define REG_COM15 0x40 /* Control 15 */ 103 | #define COM15_R10F0 0x00 /* Data range 10 to F0 */ 104 | #define COM15_R01FE 0x80 /* 01 to FE */ 105 | #define COM15_R00FF 0xc0 /* 00 to FF */ 106 | #define COM15_RGB565 0x10 /* RGB565 output */ 107 | #define COM15_RGB555 0x30 /* RGB555 output */ 108 | #define REG_COM16 0x41 /* Control 16 */ 109 | #define COM16_AWBGAIN 0x08 /* AWB gain enable */ 110 | #define REG_COM17 0x42 /* Control 17 */ 111 | #define COM17_AECWIN 0xc0 /* AEC window - must match COM4 */ 112 | #define COM17_CBAR 0x08 /* DSP Color bar */ 113 | 114 | /* 115 | * This matrix defines how the colors are generated, must be 116 | * tweaked to adjust hue and saturation. 117 | * 118 | * Order: v-red, v-green, v-blue, u-red, u-green, u-blue 119 | * 120 | * They are nine-bit signed quantities, with the sign bit 121 | * stored in 0x58. Sign for v-red is bit 0, and up from there. 122 | */ 123 | #define REG_CMATRIX_BASE 0x4f 124 | #define CMATRIX_LEN 6 125 | #define REG_CMATRIX_SIGN 0x58 126 | 127 | 128 | #define REG_BRIGHT 0x55 /* Brightness */ 129 | #define REG_CONTRAS 0x56 /* Contrast control */ 130 | 131 | #define REG_GFIX 0x69 /* Fix gain control */ 132 | 133 | #define REG_DBLV 0x6b /* PLL control an debugging */ 134 | #define DBLV_BYPASS 0x00 /* Bypass PLL */ 135 | #define DBLV_X4 0x01 /* clock x4 */ 136 | #define DBLV_X6 0x10 /* clock x6 */ 137 | #define DBLV_X8 0x11 /* clock x8 */ 138 | 139 | #define REG_SCALING_XSC 0x70 /* Test pattern and horizontal scale factor */ 140 | #define TEST_PATTTERN_0 0x80 141 | #define REG_SCALING_YSC 0x71 /* Test pattern and vertical scale factor */ 142 | #define TEST_PATTTERN_1 0x80 143 | 144 | #define REG_REG76 0x76 /* OV's name */ 145 | #define R76_BLKPCOR 0x80 /* Black pixel correction enable */ 146 | #define R76_WHTPCOR 0x40 /* White pixel correction enable */ 147 | 148 | #define REG_RGB444 0x8c /* RGB 444 control */ 149 | #define R444_ENABLE 0x02 /* Turn on RGB444, overrides 5x5 */ 150 | #define R444_RGBX 0x01 /* Empty nibble at end */ 151 | 152 | #define REG_HAECC1 0x9f /* Hist AEC/AGC control 1 */ 153 | #define REG_HAECC2 0xa0 /* Hist AEC/AGC control 2 */ 154 | 155 | #define REG_BD50MAX 0xa5 /* 50hz banding step limit */ 156 | #define REG_HAECC3 0xa6 /* Hist AEC/AGC control 3 */ 157 | #define REG_HAECC4 0xa7 /* Hist AEC/AGC control 4 */ 158 | #define REG_HAECC5 0xa8 /* Hist AEC/AGC control 5 */ 159 | #define REG_HAECC6 0xa9 /* Hist AEC/AGC control 6 */ 160 | #define REG_HAECC7 0xaa /* Hist AEC/AGC control 7 */ 161 | #define REG_BD60MAX 0xab /* 60hz banding step limit */ 162 | 163 | ///// Registers that not present in linux driver 164 | 165 | #define REG_SCALING_DCWCTR 0x72 166 | #define REG_SCALING_PCLK_DIV 0x73 167 | #define REG_SCALING_PCLK_DELAY 0xa2 168 | 169 | #endif 170 | 171 | ///// End changes - Joao Lopes 172 | 173 | class OV7670: public I2SCamera 174 | { 175 | public: 176 | enum Mode 177 | { 178 | QQQVGA_RGB565, 179 | QQVGA_RGB565, 180 | QVGA_RGB565, 181 | VGA_RGB565, 182 | }; 183 | int xres, yres; 184 | 185 | protected: 186 | static const int ADDR = 0x42; 187 | 188 | Mode mode; 189 | I2C i2c; 190 | 191 | void testImage(); 192 | void saturation(int s); 193 | void frameControl(int hStart, int hStop, int vStart, int vStop); 194 | void QVGA(); 195 | void QVGARGB565(); 196 | void VGA(); 197 | void VGARGB565(); 198 | 199 | void QQVGA(); 200 | void QQVGARGB565(); 201 | void QQQVGA(); 202 | void QQQVGARGB565(); 203 | void inline writeRegister(unsigned char reg, unsigned char data) 204 | { 205 | i2c.writeRegister(ADDR, reg, data); 206 | } 207 | 208 | ///// Begin changes - Joao Lopes 209 | #ifdef REGISTERS_LINUX 210 | void writeRegistersLinux(); 211 | #endif 212 | ///// End changes - Joao Lopes 213 | 214 | 215 | public: 216 | OV7670(OV7670::Mode m, const int SIOD, const int SIOC, const int VSYNC, const int HREF, const int XCLK, const int PCLK, const int D0, const int D1, const int D2, const int D3, const int D4, const int D5, const int D6, const int D7); 217 | 218 | ///// Begin changes - Joao Lopes 219 | 220 | #ifndef REGISTERS_LINUX 221 | 222 | //camera registers 223 | static const int REG_GAIN = 0x00; 224 | static const int REG_BLUE = 0x01; 225 | static const int REG_RED = 0x02; 226 | static const int REG_COM1 = 0x04; 227 | static const int REG_VREF = 0x03; 228 | static const int REG_COM4 = 0x0d; 229 | static const int REG_COM5 = 0x0e; 230 | static const int REG_COM6 = 0x0f; 231 | static const int REG_AECH = 0x10; 232 | static const int REG_CLKRC = 0x11; 233 | static const int REG_COM7 = 0x12; 234 | static const int COM7_RGB = 0x04; 235 | static const int REG_COM8 = 0x13; 236 | static const int COM8_FASTAEC = 0x80; // Enable fast AGC/AEC 237 | static const int COM8_AECSTEP = 0x40; // Unlimited AEC step size 238 | static const int COM8_BFILT = 0x20; // Band filter enable 239 | static const int COM8_AGC = 0x04; // Auto gain enable 240 | static const int COM8_AWB = 0x02; // White balance enable 241 | static const int COM8_AEC = 0x0; 242 | static const int REG_COM9 = 0x14; 243 | static const int REG_COM10 = 0x15; 244 | static const int REG_COM14 = 0x3E; 245 | static const int REG_COM11 = 0x3B; 246 | static const int COM11_NIGHT = 0x80; 247 | static const int COM11_NMFR = 0x60; 248 | static const int COM11_HZAUTO = 0x10; 249 | static const int COM11_50HZ = 0x08; 250 | static const int COM11_EXP = 0x0; 251 | static const int REG_TSLB = 0x3A; 252 | static const int REG_RGB444 = 0x8C; 253 | static const int REG_COM15 = 0x40; 254 | static const int COM15_RGB565 = 0x10; 255 | static const int COM15_R00FF = 0xc0; 256 | static const int REG_HSTART = 0x17; 257 | static const int REG_HSTOP = 0x18; 258 | static const int REG_HREF = 0x32; 259 | static const int REG_VSTART = 0x19; 260 | static const int REG_VSTOP = 0x1A; 261 | static const int REG_COM3 = 0x0C; 262 | static const int REG_MVFP = 0x1E; 263 | static const int REG_COM13 = 0x3d; 264 | static const int COM13_UVSAT = 0x40; 265 | static const int REG_SCALING_XSC = 0x70; 266 | static const int REG_SCALING_YSC = 0x71; 267 | static const int REG_SCALING_DCWCTR = 0x72; 268 | static const int REG_SCALING_PCLK_DIV = 0x73; 269 | static const int REG_SCALING_PCLK_DELAY = 0xa2; 270 | static const int REG_BD50MAX = 0xa5; 271 | static const int REG_BD60MAX = 0xab; 272 | static const int REG_AEW = 0x24; 273 | static const int REG_AEB = 0x25; 274 | static const int REG_VPT = 0x26; 275 | static const int REG_HAECC1 = 0x9f; 276 | static const int REG_HAECC2 = 0xa0; 277 | static const int REG_HAECC3 = 0xa6; 278 | static const int REG_HAECC4 = 0xa7; 279 | static const int REG_HAECC5 = 0xa8; 280 | static const int REG_HAECC6 = 0xa9; 281 | static const int REG_HAECC7 = 0xaa; 282 | static const int REG_COM12 = 0x3c; 283 | static const int REG_GFIX = 0x69; 284 | static const int REG_COM16 = 0x41; 285 | static const int COM16_AWBGAIN = 0x08; 286 | static const int REG_EDGE = 0x3f; 287 | static const int REG_REG76 = 0x76; 288 | static const int ADCCTR0 = 0x20; 289 | 290 | #endif 291 | 292 | ///// End changes - Joao Lopes 293 | 294 | }; 295 | 296 | -------------------------------------------------------------------------------- /src/ESPlorerI_v1/Util.cpp: -------------------------------------------------------------------------------- 1 | /***************************************** 2 | * Project : Util - Utilities 3 | * Programmer: Joao Lopes 4 | * Module : Util - generic utilities 5 | * Comments : TODO: make it a library to Arduino and ESP-IDF 6 | * Note this not is a C++ class (yet) 7 | * Versions : 8 | * ------- ---------- ------------------------- 9 | * 0.1.0 2018-05-09 First version 10 | */ 11 | 12 | ///// Includes 13 | 14 | #include 15 | 16 | 17 | ////// Routines 18 | 19 | // Is CR or LF ? 20 | 21 | boolean isCRLF(char character) { 22 | 23 | return (character == '\r' || character == '\n'); 24 | 25 | } 26 | 27 | //String is numeric ? 28 | 29 | boolean strIsNum(String str) { 30 | 31 | bool isNum = false; 32 | 33 | for (uint8_t i = 0; i < str.length(); i++) { 34 | isNum = isdigit(str[i]) || str[i] == '+' || 35 | str[i] == '.' || str[i] == '-'; 36 | if (!isNum) 37 | return false; 38 | } 39 | 40 | return isNum; 41 | } 42 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /src/ESPlorerI_v1/Util.h: -------------------------------------------------------------------------------- 1 | /* 2 | * Util.h 3 | * 4 | */ 5 | 6 | #ifndef UTIL_UTIL_H_ 7 | #define UTIL_UTIL_H_ 8 | 9 | // Includes 10 | 11 | #include "Arduino.h" 12 | 13 | // Prototypes 14 | 15 | boolean isCRLF(char character); 16 | 17 | //String is numeric ? 18 | 19 | boolean strIsNum(String str); 20 | 21 | #endif /* UTIL_UTIL_H_ */ 22 | 23 | //////// End 24 | -------------------------------------------------------------------------------- /src/ESPlorerI_v1/XClk.cpp: -------------------------------------------------------------------------------- 1 | //parts of his code are taken from 2 | //https://github.com/igrr/esp32-cam-demo 3 | //by Ivan Grokhotkov 4 | //released under Apache License 2.0 5 | 6 | #include "XClk.h" 7 | #include "driver/ledc.h" 8 | 9 | bool ClockEnable(int pin, int Hz) 10 | { 11 | periph_module_enable(PERIPH_LEDC_MODULE); 12 | 13 | ledc_timer_config_t timer_conf; 14 | timer_conf.bit_num = (ledc_timer_bit_t)1; 15 | timer_conf.freq_hz = Hz; 16 | timer_conf.speed_mode = LEDC_HIGH_SPEED_MODE; 17 | // timer_conf.timer_num = LEDC_TIMER_0; 18 | ///// Begin changes - Joao Lopes 19 | timer_conf.timer_num = LEDC_TIMER_1; 20 | ///// End changes - Joao Lopes 21 | esp_err_t err = ledc_timer_config(&timer_conf); 22 | if (err != ESP_OK) { 23 | return false; 24 | } 25 | 26 | ledc_channel_config_t ch_conf; 27 | ch_conf.channel = LEDC_CHANNEL_0; 28 | // ch_conf.timer_sel = LEDC_TIMER_0; 29 | ///// Begin changes - Joao Lopes 30 | ch_conf.timer_sel = LEDC_TIMER_1; 31 | ///// End changes - Joao Lopes 32 | ch_conf.intr_type = LEDC_INTR_DISABLE; 33 | ch_conf.duty = 1; 34 | ch_conf.speed_mode = LEDC_HIGH_SPEED_MODE; 35 | ch_conf.gpio_num = pin; 36 | ch_conf.hpoint = 0; 37 | err = ledc_channel_config(&ch_conf); 38 | if (err != ESP_OK) { 39 | return false; 40 | } 41 | return true; 42 | } 43 | 44 | void ClockDisable() 45 | { 46 | periph_module_disable(PERIPH_LEDC_MODULE); 47 | } 48 | 49 | -------------------------------------------------------------------------------- /src/ESPlorerI_v1/XClk.h: -------------------------------------------------------------------------------- 1 | #pragma once 2 | 3 | bool ClockEnable(int pin, int Hz); 4 | void ClockDisable(); 5 | -------------------------------------------------------------------------------- /src/ESPlorerI_v1/data/www/.history/index_20190105122150.htm: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | ESPlorer I Robot 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | Robot ESPLorer I 16 |
17 | 18 |
19 | 20 |
21 | Camera 22 | 23 | 24 |
25 |
26 | 27 | Left motor 28 | Stop 29 |
30 |
31 | 32 | 33 |
34 |
35 | 36 | Right motor 37 | Stop 38 |
39 |
40 | 41 | 1/1 42 | 43 | 44 | 45 | 46 | > 47 | 48 | 49 |
50 | 51 | -------------------------------------------------------------------------------- /src/ESPlorerI_v1/data/www/.history/index_20190105133206.htm: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | ESPlorer I Robot 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | Robot ESPLorer I 16 | 17 |
18 | 19 |
20 | Camera 21 | 22 | 23 |
24 |
25 | 26 | Left motor 27 | Stop 28 |
29 |
30 | 31 | 32 |
33 |
34 | 35 | Right motor 36 | Stop 37 |
38 |
39 | 40 | 1/1 41 | 42 | 43 | 44 | 45 | > 46 | 47 | 48 |
49 | 50 | -------------------------------------------------------------------------------- /src/ESPlorerI_v1/data/www/.history/style_20190105130936.css: -------------------------------------------------------------------------------- 1 | /* Style for ESPlorer I web page */ 2 | 3 | /* By Tag */ 4 | 5 | body { 6 | background-color: #212121; 7 | } 8 | 9 | /* By class */ 10 | 11 | .header { 12 | margin: 0 auto; 13 | text-align: center; 14 | } 15 | 16 | .title { 17 | position: absolute; 18 | left: 0px; 19 | width: 100%; 20 | text-align: center; 21 | margin: 0 auto; 22 | background-color:#080808; 23 | } 24 | 25 | .camera 26 | { 27 | position: absolute; 28 | width: 100%; 29 | max-width: 800px; 30 | height: 10px; 31 | top: 60px; 32 | left: 50%; 33 | -webkit-transform: translateX(-50%); 34 | transform: translateX(-50%); 35 | margin: 0 auto; 36 | /* background-color: rebeccapurple; */ 37 | } 38 | 39 | .gaugeMotorLeft { 40 | position: absolute; 41 | width: 33%; 42 | height: 33%; 43 | left: 0px; 44 | bottom: 15%; 45 | background-color: rebeccapurple; 46 | } 47 | 48 | .joystickMotor { 49 | position: absolute; 50 | width: 75%; 51 | height: 45%; 52 | max-height: 500px; 53 | left: 50%; 54 | -webkit-transform: translateX(-50%); 55 | transform: translateX(-50%); 56 | bottom: 0px; 57 | margin: 0 auto; 58 | /* z-index: -1; */ 59 | /* background-color:cadetblue; */ 60 | } 61 | 62 | .gaugeMotorRight{ 63 | position: absolute; 64 | width: 33%; 65 | height: 33%; 66 | right: 0px; 67 | bottom: 15%; 68 | background-color: rebeccapurple; 69 | } 70 | 71 | .footer { 72 | position: absolute; 73 | width: 100%; 74 | height: 50px; 75 | left: 0px; 76 | bottom: 0px; 77 | background-color: #080808; 78 | opacity: 0.75; 79 | filter: alpha(opacity=75); 80 | 81 | /* saw it in https://www.w3schools.com/howto/howto_css_button_group.asp */ 82 | padding: 1px 24px; /* Some padding */ 83 | cursor: pointer; /* Pointer/hand icon */ 84 | float: left; /* Float the buttons side by side */ 85 | } 86 | 87 | /* By ID */ 88 | 89 | #spanTitle { 90 | margin: 0 auto; 91 | font-size: 30px; 92 | } 93 | 94 | #spanConnection { 95 | font-size: 16px; 96 | margin: 0 auto; 97 | } 98 | 99 | #spanCamera { 100 | position: absolute; 101 | left: 0px; 102 | top: 20px; 103 | width: 100%; 104 | height: 20px; 105 | text-align: center; 106 | font-size: 20px; 107 | margin: 0 auto; 108 | /* background-color:burlywood; */ 109 | } 110 | 111 | #canvasCameraQQVGA { 112 | position: absolute; 113 | width: 160px; 114 | height: 120px; 115 | left: 0px; 116 | top: 0px; 117 | visibility: hidden; 118 | } 119 | 120 | #canvasCameraDisplay { 121 | position: absolute; 122 | top: 0px; 123 | left: 50%; 124 | -webkit-transform: translateX(-50%); 125 | transform: translateX(-50%); 126 | z-index: -1; 127 | margin: 0 auto; 128 | border-style: dotted; 129 | border-color: #545454; 130 | /* background-color: rebeccapurple; */ 131 | } 132 | 133 | #spanJoystickMotorHeader { 134 | position: absolute; 135 | top: 0px; 136 | width: 100%; 137 | height: 10%; 138 | text-align: center; 139 | margin: 0 auto; 140 | /* background-color:burlywood; */ 141 | } 142 | 143 | #spanJoystickMotorFooter { 144 | position: absolute; 145 | bottom: 0px; 146 | width: 100%; 147 | height: 10%; 148 | text-align: center; 149 | margin: 0 auto; 150 | /* background-color:burlywood; */ 151 | } 152 | 153 | #canvasGaugeMotorLeft { 154 | position: absolute; 155 | left: 0px; 156 | top: 0px; 157 | width: 100%; 158 | height: 100%; 159 | margin: 0 auto; 160 | } 161 | 162 | #spanMotorLeft { 163 | position: absolute; 164 | left: 0%; 165 | top: 50%; 166 | } 167 | 168 | #spanMotorLeftSpeed { 169 | position: absolute; 170 | left: 50%; 171 | top: 50%; 172 | } 173 | 174 | #canvasGaugeMotorRight { 175 | position: absolute; 176 | left: 0px; 177 | top: 0px; 178 | width: 100%; 179 | height: 100%; 180 | margin: 0 auto; 181 | } 182 | 183 | #spanMotorRight { 184 | position: absolute; 185 | left: 0%; 186 | top: 50%; 187 | } 188 | 189 | #spanMotorRightSpeed { 190 | position: absolute; 191 | left: 50%; 192 | top: 50%; 193 | /* background-color:burlywood; */ 194 | } 195 | 196 | #spanMotorLeft, 197 | #spanMotorLeftSpeed, 198 | #spanMotorRight, 199 | #spanMotorRightSpeed { 200 | width: 50%; 201 | height: 16px; 202 | /* color: #D9D9D9; */ 203 | text-align: center; 204 | font-size: 16px; 205 | margin: 0 auto; 206 | } 207 | 208 | #imgCameraOnOff { 209 | position: absolute; 210 | /* width: 64px; 211 | height: 64px; */ 212 | right: 10px; 213 | top: 0px; 214 | visibility: hidden; 215 | } 216 | 217 | #imgFast, 218 | #imgSlow, 219 | #imgLights, 220 | #imgReset, 221 | #imgExit { 222 | width: 48px; 223 | height: 48px; 224 | /* padding: 0px 5px; */ 225 | } 226 | #imgSpacer { 227 | width: 24px; 228 | height: 48px; 229 | /* padding: 0px 5px; */ 230 | } 231 | 232 | #spanSpeedMode { 233 | width: 48px; 234 | height: 48px; 235 | text-align: center; 236 | } 237 | 238 | /* Text effect */ 239 | 240 | #spanTitle, 241 | #spanConnection, 242 | #spanJoystickMotorHeader, 243 | #spanJoystickMotorHeaderFooter, 244 | #spanCamera, 245 | #spanSpeedMode, 246 | #spanMotorLeft, 247 | #spanMotorLeftSpeed, 248 | #spanMotorRight, 249 | #spanMotorRightSpeed { 250 | color: black; 251 | /* Text shadow saw in: https://stackoverflow.com/questions/13426875/text-border-using-css-border-around-text */ 252 | /* text-shadow: 1px 0 0 #fff, -1px 0 0 #fff, 0 1px 0 #fff, 0 -1px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff; */ 253 | text-shadow: 1px 0 0 #D9D9D9, -1px 0 0 #D9D9D9, 0 1px 0 #D9D9D9, 0 -1px 0 #D9D9D9, 1px 1px #D9D9D9, -1px -1px 0 #D9D9D9, 1px -1px 0 #D9D9D9, -1px 1px 0 #D9D9D9; 254 | } -------------------------------------------------------------------------------- /src/ESPlorerI_v1/data/www/.history/style_20190105132213.css: -------------------------------------------------------------------------------- 1 | /* Style for ESPlorer I web page */ 2 | 3 | /* By Tag */ 4 | 5 | body { 6 | background-color: #212121; 7 | } 8 | 9 | /* By class */ 10 | 11 | .header { 12 | margin: 0 auto; 13 | text-align: center; 14 | } 15 | 16 | .title { 17 | position: absolute; 18 | left: 0px; 19 | width: 100%; 20 | text-align: center; 21 | margin: 0 auto; 22 | background-color:#080808; 23 | } 24 | 25 | .camera 26 | { 27 | position: absolute; 28 | width: 100%; 29 | max-width: 800px; 30 | height: 10px; 31 | top: 60px; 32 | left: 50%; 33 | -webkit-transform: translateX(-50%); 34 | transform: translateX(-50%); 35 | margin: 0 auto; 36 | /* background-color: rebeccapurple; */ 37 | } 38 | 39 | .gaugeMotorLeft { 40 | position: absolute; 41 | width: 33%; 42 | height: 10px; 43 | left: 0px; 44 | bottom: 15%; 45 | background-color: rebeccapurple; 46 | } 47 | 48 | .joystickMotor { 49 | position: absolute; 50 | width: 75%; 51 | height: 45%; 52 | max-height: 500px; 53 | left: 50%; 54 | -webkit-transform: translateX(-50%); 55 | transform: translateX(-50%); 56 | bottom: 0px; 57 | margin: 0 auto; 58 | /* z-index: -1; */ 59 | /* background-color:cadetblue; */ 60 | } 61 | 62 | .gaugeMotorRight{ 63 | position: absolute; 64 | width: 33%; 65 | height: 33%; 66 | right: 0px; 67 | bottom: 15%; 68 | background-color: rebeccapurple; 69 | } 70 | 71 | .footer { 72 | position: absolute; 73 | width: 100%; 74 | height: 50px; 75 | left: 0px; 76 | bottom: 0px; 77 | background-color: #080808; 78 | opacity: 0.75; 79 | filter: alpha(opacity=75); 80 | 81 | /* saw it in https://www.w3schools.com/howto/howto_css_button_group.asp */ 82 | padding: 1px 24px; /* Some padding */ 83 | cursor: pointer; /* Pointer/hand icon */ 84 | float: left; /* Float the buttons side by side */ 85 | } 86 | 87 | /* By ID */ 88 | 89 | #spanTitle { 90 | margin: 0 auto; 91 | font-size: 30px; 92 | } 93 | 94 | #spanConnection { 95 | font-size: 16px; 96 | margin: 0 auto; 97 | } 98 | 99 | #spanCamera { 100 | position: absolute; 101 | left: 0px; 102 | top: 20px; 103 | width: 100%; 104 | height: 20px; 105 | text-align: center; 106 | font-size: 20px; 107 | margin: 0 auto; 108 | /* background-color:burlywood; */ 109 | } 110 | 111 | #canvasCameraQQVGA { 112 | position: absolute; 113 | width: 160px; 114 | height: 120px; 115 | left: 0px; 116 | top: 0px; 117 | visibility: hidden; 118 | } 119 | 120 | #canvasCameraDisplay { 121 | position: absolute; 122 | top: 0px; 123 | left: 50%; 124 | -webkit-transform: translateX(-50%); 125 | transform: translateX(-50%); 126 | z-index: -1; 127 | margin: 0 auto; 128 | border-style: dotted; 129 | border-color: #545454; 130 | /* background-color: rebeccapurple; */ 131 | } 132 | 133 | #spanJoystickMotorHeader { 134 | position: absolute; 135 | top: 0px; 136 | width: 100%; 137 | height: 10%; 138 | text-align: center; 139 | margin: 0 auto; 140 | /* background-color:burlywood; */ 141 | } 142 | 143 | #spanJoystickMotorFooter { 144 | position: absolute; 145 | bottom: 0px; 146 | width: 100%; 147 | height: 10%; 148 | text-align: center; 149 | margin: 0 auto; 150 | /* background-color:burlywood; */ 151 | } 152 | 153 | #canvasGaugeMotorLeft { 154 | position: absolute; 155 | left: 0px; 156 | top: 0px; 157 | width: 100%; 158 | height: 100%; 159 | margin: 0 auto; 160 | } 161 | 162 | #spanMotorLeft { 163 | position: absolute; 164 | left: 0%; 165 | top: 50%; 166 | } 167 | 168 | #spanMotorLeftSpeed { 169 | position: absolute; 170 | left: 50%; 171 | top: 50%; 172 | } 173 | 174 | #canvasGaugeMotorRight { 175 | position: absolute; 176 | left: 0px; 177 | top: 0px; 178 | width: 100%; 179 | height: 100%; 180 | margin: 0 auto; 181 | } 182 | 183 | #spanMotorRight { 184 | position: absolute; 185 | left: 0%; 186 | top: 50%; 187 | } 188 | 189 | #spanMotorRightSpeed { 190 | position: absolute; 191 | left: 50%; 192 | top: 50%; 193 | /* background-color:burlywood; */ 194 | } 195 | 196 | #spanMotorLeft, 197 | #spanMotorLeftSpeed, 198 | #spanMotorRight, 199 | #spanMotorRightSpeed { 200 | width: 50%; 201 | height: 16px; 202 | /* color: #D9D9D9; */ 203 | text-align: center; 204 | font-size: 16px; 205 | margin: 0 auto; 206 | } 207 | 208 | #imgCameraOnOff { 209 | position: absolute; 210 | /* width: 64px; 211 | height: 64px; */ 212 | right: 10px; 213 | top: 0px; 214 | visibility: hidden; 215 | } 216 | 217 | #imgFast, 218 | #imgSlow, 219 | #imgLights, 220 | #imgReset, 221 | #imgExit { 222 | width: 48px; 223 | height: 48px; 224 | /* padding: 0px 5px; */ 225 | } 226 | #imgSpacer { 227 | width: 24px; 228 | height: 48px; 229 | /* padding: 0px 5px; */ 230 | } 231 | 232 | #spanSpeedMode { 233 | width: 48px; 234 | height: 48px; 235 | text-align: center; 236 | } 237 | 238 | /* Text effect */ 239 | 240 | #spanTitle, 241 | #spanConnection, 242 | #spanJoystickMotorHeader, 243 | #spanJoystickMotorHeaderFooter, 244 | #spanCamera, 245 | #spanSpeedMode, 246 | #spanMotorLeft, 247 | #spanMotorLeftSpeed, 248 | #spanMotorRight, 249 | #spanMotorRightSpeed { 250 | color: black; 251 | /* Text shadow saw in: https://stackoverflow.com/questions/13426875/text-border-using-css-border-around-text */ 252 | /* text-shadow: 1px 0 0 #fff, -1px 0 0 #fff, 0 1px 0 #fff, 0 -1px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff; */ 253 | text-shadow: 1px 0 0 #D9D9D9, -1px 0 0 #D9D9D9, 0 1px 0 #D9D9D9, 0 -1px 0 #D9D9D9, 1px 1px #D9D9D9, -1px -1px 0 #D9D9D9, 1px -1px 0 #D9D9D9, -1px 1px 0 #D9D9D9; 254 | } -------------------------------------------------------------------------------- /src/ESPlorerI_v1/data/www/.history/style_20190105132247.css: -------------------------------------------------------------------------------- 1 | /* Style for ESPlorer I web page */ 2 | 3 | /* By Tag */ 4 | 5 | body { 6 | background-color: #212121; 7 | } 8 | 9 | /* By class */ 10 | 11 | .header { 12 | margin: 0 auto; 13 | text-align: center; 14 | } 15 | 16 | .title { 17 | position: absolute; 18 | left: 0px; 19 | width: 100%; 20 | text-align: center; 21 | margin: 0 auto; 22 | background-color:#080808; 23 | } 24 | 25 | .camera 26 | { 27 | position: absolute; 28 | width: 100%; 29 | max-width: 800px; 30 | height: 10px; 31 | top: 60px; 32 | left: 50%; 33 | -webkit-transform: translateX(-50%); 34 | transform: translateX(-50%); 35 | margin: 0 auto; 36 | /* background-color: rebeccapurple; */ 37 | } 38 | 39 | .gaugeMotorLeft { 40 | position: absolute; 41 | width: 33%; 42 | /* height: 33%; */ 43 | left: 0px; 44 | bottom: 15%; 45 | background-color: rebeccapurple; 46 | } 47 | 48 | .joystickMotor { 49 | position: absolute; 50 | width: 75%; 51 | height: 45%; 52 | max-height: 500px; 53 | left: 50%; 54 | -webkit-transform: translateX(-50%); 55 | transform: translateX(-50%); 56 | bottom: 0px; 57 | margin: 0 auto; 58 | /* z-index: -1; */ 59 | /* background-color:cadetblue; */ 60 | } 61 | 62 | .gaugeMotorRight{ 63 | position: absolute; 64 | width: 33%; 65 | height: 33%; 66 | right: 0px; 67 | bottom: 15%; 68 | background-color: rebeccapurple; 69 | } 70 | 71 | .footer { 72 | position: absolute; 73 | width: 100%; 74 | height: 50px; 75 | left: 0px; 76 | bottom: 0px; 77 | background-color: #080808; 78 | opacity: 0.75; 79 | filter: alpha(opacity=75); 80 | 81 | /* saw it in https://www.w3schools.com/howto/howto_css_button_group.asp */ 82 | padding: 1px 24px; /* Some padding */ 83 | cursor: pointer; /* Pointer/hand icon */ 84 | float: left; /* Float the buttons side by side */ 85 | } 86 | 87 | /* By ID */ 88 | 89 | #spanTitle { 90 | margin: 0 auto; 91 | font-size: 30px; 92 | } 93 | 94 | #spanConnection { 95 | font-size: 16px; 96 | margin: 0 auto; 97 | } 98 | 99 | #spanCamera { 100 | position: absolute; 101 | left: 0px; 102 | top: 20px; 103 | width: 100%; 104 | height: 20px; 105 | text-align: center; 106 | font-size: 20px; 107 | margin: 0 auto; 108 | /* background-color:burlywood; */ 109 | } 110 | 111 | #canvasCameraQQVGA { 112 | position: absolute; 113 | width: 160px; 114 | height: 120px; 115 | left: 0px; 116 | top: 0px; 117 | visibility: hidden; 118 | } 119 | 120 | #canvasCameraDisplay { 121 | position: absolute; 122 | top: 0px; 123 | left: 50%; 124 | -webkit-transform: translateX(-50%); 125 | transform: translateX(-50%); 126 | z-index: -1; 127 | margin: 0 auto; 128 | border-style: dotted; 129 | border-color: #545454; 130 | /* background-color: rebeccapurple; */ 131 | } 132 | 133 | #spanJoystickMotorHeader { 134 | position: absolute; 135 | top: 0px; 136 | width: 100%; 137 | height: 10%; 138 | text-align: center; 139 | margin: 0 auto; 140 | /* background-color:burlywood; */ 141 | } 142 | 143 | #spanJoystickMotorFooter { 144 | position: absolute; 145 | bottom: 0px; 146 | width: 100%; 147 | height: 10%; 148 | text-align: center; 149 | margin: 0 auto; 150 | /* background-color:burlywood; */ 151 | } 152 | 153 | #canvasGaugeMotorLeft { 154 | position: absolute; 155 | left: 0px; 156 | top: 0px; 157 | width: 100%; 158 | height: 100%; 159 | margin: 0 auto; 160 | } 161 | 162 | #spanMotorLeft { 163 | position: absolute; 164 | left: 0%; 165 | top: 50%; 166 | } 167 | 168 | #spanMotorLeftSpeed { 169 | position: absolute; 170 | left: 50%; 171 | top: 50%; 172 | } 173 | 174 | #canvasGaugeMotorRight { 175 | position: absolute; 176 | left: 0px; 177 | top: 0px; 178 | width: 100%; 179 | height: 100%; 180 | margin: 0 auto; 181 | } 182 | 183 | #spanMotorRight { 184 | position: absolute; 185 | left: 0%; 186 | top: 50%; 187 | } 188 | 189 | #spanMotorRightSpeed { 190 | position: absolute; 191 | left: 50%; 192 | top: 50%; 193 | /* background-color:burlywood; */ 194 | } 195 | 196 | #spanMotorLeft, 197 | #spanMotorLeftSpeed, 198 | #spanMotorRight, 199 | #spanMotorRightSpeed { 200 | width: 50%; 201 | height: 16px; 202 | /* color: #D9D9D9; */ 203 | text-align: center; 204 | font-size: 16px; 205 | margin: 0 auto; 206 | } 207 | 208 | #imgCameraOnOff { 209 | position: absolute; 210 | /* width: 64px; 211 | height: 64px; */ 212 | right: 10px; 213 | top: 0px; 214 | visibility: hidden; 215 | } 216 | 217 | #imgFast, 218 | #imgSlow, 219 | #imgLights, 220 | #imgReset, 221 | #imgExit { 222 | width: 48px; 223 | height: 48px; 224 | /* padding: 0px 5px; */ 225 | } 226 | #imgSpacer { 227 | width: 24px; 228 | height: 48px; 229 | /* padding: 0px 5px; */ 230 | } 231 | 232 | #spanSpeedMode { 233 | width: 48px; 234 | height: 48px; 235 | text-align: center; 236 | } 237 | 238 | /* Text effect */ 239 | 240 | #spanTitle, 241 | #spanConnection, 242 | #spanJoystickMotorHeader, 243 | #spanJoystickMotorHeaderFooter, 244 | #spanCamera, 245 | #spanSpeedMode, 246 | #spanMotorLeft, 247 | #spanMotorLeftSpeed, 248 | #spanMotorRight, 249 | #spanMotorRightSpeed { 250 | color: black; 251 | /* Text shadow saw in: https://stackoverflow.com/questions/13426875/text-border-using-css-border-around-text */ 252 | /* text-shadow: 1px 0 0 #fff, -1px 0 0 #fff, 0 1px 0 #fff, 0 -1px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff; */ 253 | text-shadow: 1px 0 0 #D9D9D9, -1px 0 0 #D9D9D9, 0 1px 0 #D9D9D9, 0 -1px 0 #D9D9D9, 1px 1px #D9D9D9, -1px -1px 0 #D9D9D9, 1px -1px 0 #D9D9D9, -1px 1px 0 #D9D9D9; 254 | } -------------------------------------------------------------------------------- /src/ESPlorerI_v1/data/www/.history/style_20190105132314.css: -------------------------------------------------------------------------------- 1 | /* Style for ESPlorer I web page */ 2 | 3 | /* By Tag */ 4 | 5 | body { 6 | background-color: #212121; 7 | } 8 | 9 | /* By class */ 10 | 11 | .header { 12 | margin: 0 auto; 13 | text-align: center; 14 | } 15 | 16 | .title { 17 | position: absolute; 18 | left: 0px; 19 | width: 100%; 20 | text-align: center; 21 | margin: 0 auto; 22 | background-color:#080808; 23 | } 24 | 25 | .camera 26 | { 27 | position: absolute; 28 | width: 100%; 29 | max-width: 800px; 30 | height: 10px; 31 | top: 60px; 32 | left: 50%; 33 | -webkit-transform: translateX(-50%); 34 | transform: translateX(-50%); 35 | margin: 0 auto; 36 | /* background-color: rebeccapurple; */ 37 | } 38 | 39 | .gaugeMotorLeft { 40 | position: absolute; 41 | width: 33%; 42 | height: 0; 43 | left: 0px; 44 | bottom: 15%; 45 | background-color: rebeccapurple; 46 | } 47 | 48 | .joystickMotor { 49 | position: absolute; 50 | width: 75%; 51 | height: 45%; 52 | max-height: 500px; 53 | left: 50%; 54 | -webkit-transform: translateX(-50%); 55 | transform: translateX(-50%); 56 | bottom: 0px; 57 | margin: 0 auto; 58 | /* z-index: -1; */ 59 | /* background-color:cadetblue; */ 60 | } 61 | 62 | .gaugeMotorRight{ 63 | position: absolute; 64 | width: 33%; 65 | height: 33%; 66 | right: 0px; 67 | bottom: 15%; 68 | background-color: rebeccapurple; 69 | } 70 | 71 | .footer { 72 | position: absolute; 73 | width: 100%; 74 | height: 50px; 75 | left: 0px; 76 | bottom: 0px; 77 | background-color: #080808; 78 | opacity: 0.75; 79 | filter: alpha(opacity=75); 80 | 81 | /* saw it in https://www.w3schools.com/howto/howto_css_button_group.asp */ 82 | padding: 1px 24px; /* Some padding */ 83 | cursor: pointer; /* Pointer/hand icon */ 84 | float: left; /* Float the buttons side by side */ 85 | } 86 | 87 | /* By ID */ 88 | 89 | #spanTitle { 90 | margin: 0 auto; 91 | font-size: 30px; 92 | } 93 | 94 | #spanConnection { 95 | font-size: 16px; 96 | margin: 0 auto; 97 | } 98 | 99 | #spanCamera { 100 | position: absolute; 101 | left: 0px; 102 | top: 20px; 103 | width: 100%; 104 | height: 20px; 105 | text-align: center; 106 | font-size: 20px; 107 | margin: 0 auto; 108 | /* background-color:burlywood; */ 109 | } 110 | 111 | #canvasCameraQQVGA { 112 | position: absolute; 113 | width: 160px; 114 | height: 120px; 115 | left: 0px; 116 | top: 0px; 117 | visibility: hidden; 118 | } 119 | 120 | #canvasCameraDisplay { 121 | position: absolute; 122 | top: 0px; 123 | left: 50%; 124 | -webkit-transform: translateX(-50%); 125 | transform: translateX(-50%); 126 | z-index: -1; 127 | margin: 0 auto; 128 | border-style: dotted; 129 | border-color: #545454; 130 | /* background-color: rebeccapurple; */ 131 | } 132 | 133 | #spanJoystickMotorHeader { 134 | position: absolute; 135 | top: 0px; 136 | width: 100%; 137 | height: 10%; 138 | text-align: center; 139 | margin: 0 auto; 140 | /* background-color:burlywood; */ 141 | } 142 | 143 | #spanJoystickMotorFooter { 144 | position: absolute; 145 | bottom: 0px; 146 | width: 100%; 147 | height: 10%; 148 | text-align: center; 149 | margin: 0 auto; 150 | /* background-color:burlywood; */ 151 | } 152 | 153 | #canvasGaugeMotorLeft { 154 | position: absolute; 155 | left: 0px; 156 | top: 0px; 157 | width: 100%; 158 | height: 100%; 159 | margin: 0 auto; 160 | } 161 | 162 | #spanMotorLeft { 163 | position: absolute; 164 | left: 0%; 165 | top: 50%; 166 | } 167 | 168 | #spanMotorLeftSpeed { 169 | position: absolute; 170 | left: 50%; 171 | top: 50%; 172 | } 173 | 174 | #canvasGaugeMotorRight { 175 | position: absolute; 176 | left: 0px; 177 | top: 0px; 178 | width: 100%; 179 | height: 100%; 180 | margin: 0 auto; 181 | } 182 | 183 | #spanMotorRight { 184 | position: absolute; 185 | left: 0%; 186 | top: 50%; 187 | } 188 | 189 | #spanMotorRightSpeed { 190 | position: absolute; 191 | left: 50%; 192 | top: 50%; 193 | /* background-color:burlywood; */ 194 | } 195 | 196 | #spanMotorLeft, 197 | #spanMotorLeftSpeed, 198 | #spanMotorRight, 199 | #spanMotorRightSpeed { 200 | width: 50%; 201 | height: 16px; 202 | /* color: #D9D9D9; */ 203 | text-align: center; 204 | font-size: 16px; 205 | margin: 0 auto; 206 | } 207 | 208 | #imgCameraOnOff { 209 | position: absolute; 210 | /* width: 64px; 211 | height: 64px; */ 212 | right: 10px; 213 | top: 0px; 214 | visibility: hidden; 215 | } 216 | 217 | #imgFast, 218 | #imgSlow, 219 | #imgLights, 220 | #imgReset, 221 | #imgExit { 222 | width: 48px; 223 | height: 48px; 224 | /* padding: 0px 5px; */ 225 | } 226 | #imgSpacer { 227 | width: 24px; 228 | height: 48px; 229 | /* padding: 0px 5px; */ 230 | } 231 | 232 | #spanSpeedMode { 233 | width: 48px; 234 | height: 48px; 235 | text-align: center; 236 | } 237 | 238 | /* Text effect */ 239 | 240 | #spanTitle, 241 | #spanConnection, 242 | #spanJoystickMotorHeader, 243 | #spanJoystickMotorHeaderFooter, 244 | #spanCamera, 245 | #spanSpeedMode, 246 | #spanMotorLeft, 247 | #spanMotorLeftSpeed, 248 | #spanMotorRight, 249 | #spanMotorRightSpeed { 250 | color: black; 251 | /* Text shadow saw in: https://stackoverflow.com/questions/13426875/text-border-using-css-border-around-text */ 252 | /* text-shadow: 1px 0 0 #fff, -1px 0 0 #fff, 0 1px 0 #fff, 0 -1px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff; */ 253 | text-shadow: 1px 0 0 #D9D9D9, -1px 0 0 #D9D9D9, 0 1px 0 #D9D9D9, 0 -1px 0 #D9D9D9, 1px 1px #D9D9D9, -1px -1px 0 #D9D9D9, 1px -1px 0 #D9D9D9, -1px 1px 0 #D9D9D9; 254 | } -------------------------------------------------------------------------------- /src/ESPlorerI_v1/data/www/.history/style_20190105132340.css: -------------------------------------------------------------------------------- 1 | /* Style for ESPlorer I web page */ 2 | 3 | /* By Tag */ 4 | 5 | body { 6 | background-color: #212121; 7 | } 8 | 9 | /* By class */ 10 | 11 | .header { 12 | margin: 0 auto; 13 | text-align: center; 14 | } 15 | 16 | .title { 17 | position: absolute; 18 | left: 0px; 19 | width: 100%; 20 | text-align: center; 21 | margin: 0 auto; 22 | background-color:#080808; 23 | } 24 | 25 | .camera 26 | { 27 | position: absolute; 28 | width: 100%; 29 | max-width: 800px; 30 | height: 10px; 31 | top: 60px; 32 | left: 50%; 33 | -webkit-transform: translateX(-50%); 34 | transform: translateX(-50%); 35 | margin: 0 auto; 36 | /* background-color: rebeccapurple; */ 37 | } 38 | 39 | .gaugeMotorLeft { 40 | position: absolute; 41 | width: 33%; 42 | height: 300px; 43 | left: 0px; 44 | bottom: 15%; 45 | background-color: rebeccapurple; 46 | } 47 | 48 | .joystickMotor { 49 | position: absolute; 50 | width: 75%; 51 | height: 45%; 52 | max-height: 500px; 53 | left: 50%; 54 | -webkit-transform: translateX(-50%); 55 | transform: translateX(-50%); 56 | bottom: 0px; 57 | margin: 0 auto; 58 | /* z-index: -1; */ 59 | /* background-color:cadetblue; */ 60 | } 61 | 62 | .gaugeMotorRight{ 63 | position: absolute; 64 | width: 33%; 65 | height: 33%; 66 | right: 0px; 67 | bottom: 15%; 68 | background-color: rebeccapurple; 69 | } 70 | 71 | .footer { 72 | position: absolute; 73 | width: 100%; 74 | height: 50px; 75 | left: 0px; 76 | bottom: 0px; 77 | background-color: #080808; 78 | opacity: 0.75; 79 | filter: alpha(opacity=75); 80 | 81 | /* saw it in https://www.w3schools.com/howto/howto_css_button_group.asp */ 82 | padding: 1px 24px; /* Some padding */ 83 | cursor: pointer; /* Pointer/hand icon */ 84 | float: left; /* Float the buttons side by side */ 85 | } 86 | 87 | /* By ID */ 88 | 89 | #spanTitle { 90 | margin: 0 auto; 91 | font-size: 30px; 92 | } 93 | 94 | #spanConnection { 95 | font-size: 16px; 96 | margin: 0 auto; 97 | } 98 | 99 | #spanCamera { 100 | position: absolute; 101 | left: 0px; 102 | top: 20px; 103 | width: 100%; 104 | height: 20px; 105 | text-align: center; 106 | font-size: 20px; 107 | margin: 0 auto; 108 | /* background-color:burlywood; */ 109 | } 110 | 111 | #canvasCameraQQVGA { 112 | position: absolute; 113 | width: 160px; 114 | height: 120px; 115 | left: 0px; 116 | top: 0px; 117 | visibility: hidden; 118 | } 119 | 120 | #canvasCameraDisplay { 121 | position: absolute; 122 | top: 0px; 123 | left: 50%; 124 | -webkit-transform: translateX(-50%); 125 | transform: translateX(-50%); 126 | z-index: -1; 127 | margin: 0 auto; 128 | border-style: dotted; 129 | border-color: #545454; 130 | /* background-color: rebeccapurple; */ 131 | } 132 | 133 | #spanJoystickMotorHeader { 134 | position: absolute; 135 | top: 0px; 136 | width: 100%; 137 | height: 10%; 138 | text-align: center; 139 | margin: 0 auto; 140 | /* background-color:burlywood; */ 141 | } 142 | 143 | #spanJoystickMotorFooter { 144 | position: absolute; 145 | bottom: 0px; 146 | width: 100%; 147 | height: 10%; 148 | text-align: center; 149 | margin: 0 auto; 150 | /* background-color:burlywood; */ 151 | } 152 | 153 | #canvasGaugeMotorLeft { 154 | position: absolute; 155 | left: 0px; 156 | top: 0px; 157 | width: 100%; 158 | height: 100%; 159 | margin: 0 auto; 160 | } 161 | 162 | #spanMotorLeft { 163 | position: absolute; 164 | left: 0%; 165 | top: 50%; 166 | } 167 | 168 | #spanMotorLeftSpeed { 169 | position: absolute; 170 | left: 50%; 171 | top: 50%; 172 | } 173 | 174 | #canvasGaugeMotorRight { 175 | position: absolute; 176 | left: 0px; 177 | top: 0px; 178 | width: 100%; 179 | height: 100%; 180 | margin: 0 auto; 181 | } 182 | 183 | #spanMotorRight { 184 | position: absolute; 185 | left: 0%; 186 | top: 50%; 187 | } 188 | 189 | #spanMotorRightSpeed { 190 | position: absolute; 191 | left: 50%; 192 | top: 50%; 193 | /* background-color:burlywood; */ 194 | } 195 | 196 | #spanMotorLeft, 197 | #spanMotorLeftSpeed, 198 | #spanMotorRight, 199 | #spanMotorRightSpeed { 200 | width: 50%; 201 | height: 16px; 202 | /* color: #D9D9D9; */ 203 | text-align: center; 204 | font-size: 16px; 205 | margin: 0 auto; 206 | } 207 | 208 | #imgCameraOnOff { 209 | position: absolute; 210 | /* width: 64px; 211 | height: 64px; */ 212 | right: 10px; 213 | top: 0px; 214 | visibility: hidden; 215 | } 216 | 217 | #imgFast, 218 | #imgSlow, 219 | #imgLights, 220 | #imgReset, 221 | #imgExit { 222 | width: 48px; 223 | height: 48px; 224 | /* padding: 0px 5px; */ 225 | } 226 | #imgSpacer { 227 | width: 24px; 228 | height: 48px; 229 | /* padding: 0px 5px; */ 230 | } 231 | 232 | #spanSpeedMode { 233 | width: 48px; 234 | height: 48px; 235 | text-align: center; 236 | } 237 | 238 | /* Text effect */ 239 | 240 | #spanTitle, 241 | #spanConnection, 242 | #spanJoystickMotorHeader, 243 | #spanJoystickMotorHeaderFooter, 244 | #spanCamera, 245 | #spanSpeedMode, 246 | #spanMotorLeft, 247 | #spanMotorLeftSpeed, 248 | #spanMotorRight, 249 | #spanMotorRightSpeed { 250 | color: black; 251 | /* Text shadow saw in: https://stackoverflow.com/questions/13426875/text-border-using-css-border-around-text */ 252 | /* text-shadow: 1px 0 0 #fff, -1px 0 0 #fff, 0 1px 0 #fff, 0 -1px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff; */ 253 | text-shadow: 1px 0 0 #D9D9D9, -1px 0 0 #D9D9D9, 0 1px 0 #D9D9D9, 0 -1px 0 #D9D9D9, 1px 1px #D9D9D9, -1px -1px 0 #D9D9D9, 1px -1px 0 #D9D9D9, -1px 1px 0 #D9D9D9; 254 | } -------------------------------------------------------------------------------- /src/ESPlorerI_v1/data/www/.history/style_20190105132436.css: -------------------------------------------------------------------------------- 1 | /* Style for ESPlorer I web page */ 2 | 3 | /* By Tag */ 4 | 5 | body { 6 | background-color: #212121; 7 | } 8 | 9 | /* By class */ 10 | 11 | .header { 12 | margin: 0 auto; 13 | text-align: center; 14 | } 15 | 16 | .title { 17 | position: absolute; 18 | left: 0px; 19 | width: 100%; 20 | text-align: center; 21 | margin: 0 auto; 22 | background-color:#080808; 23 | } 24 | 25 | .camera 26 | { 27 | position: absolute; 28 | width: 100%; 29 | max-width: 800px; 30 | height: 10px; 31 | top: 60px; 32 | left: 50%; 33 | -webkit-transform: translateX(-50%); 34 | transform: translateX(-50%); 35 | margin: 0 auto; 36 | /* background-color: rebeccapurple; */ 37 | } 38 | 39 | .gaugeMotorLeft { 40 | position: absolute; 41 | width: 300px; 42 | height: 300px; 43 | left: 0px; 44 | bottom: 15%; 45 | background-color: rebeccapurple; 46 | } 47 | 48 | .joystickMotor { 49 | position: absolute; 50 | width: 75%; 51 | height: 45%; 52 | max-height: 500px; 53 | left: 50%; 54 | -webkit-transform: translateX(-50%); 55 | transform: translateX(-50%); 56 | bottom: 0px; 57 | margin: 0 auto; 58 | /* z-index: -1; */ 59 | /* background-color:cadetblue; */ 60 | } 61 | 62 | .gaugeMotorRight{ 63 | position: absolute; 64 | width: 300px; 65 | height: 300px; 66 | right: 0px; 67 | bottom: 15%; 68 | background-color: rebeccapurple; 69 | } 70 | 71 | .footer { 72 | position: absolute; 73 | width: 100%; 74 | height: 50px; 75 | left: 0px; 76 | bottom: 0px; 77 | background-color: #080808; 78 | opacity: 0.75; 79 | filter: alpha(opacity=75); 80 | 81 | /* saw it in https://www.w3schools.com/howto/howto_css_button_group.asp */ 82 | padding: 1px 24px; /* Some padding */ 83 | cursor: pointer; /* Pointer/hand icon */ 84 | float: left; /* Float the buttons side by side */ 85 | } 86 | 87 | /* By ID */ 88 | 89 | #spanTitle { 90 | margin: 0 auto; 91 | font-size: 30px; 92 | } 93 | 94 | #spanConnection { 95 | font-size: 16px; 96 | margin: 0 auto; 97 | } 98 | 99 | #spanCamera { 100 | position: absolute; 101 | left: 0px; 102 | top: 20px; 103 | width: 100%; 104 | height: 20px; 105 | text-align: center; 106 | font-size: 20px; 107 | margin: 0 auto; 108 | /* background-color:burlywood; */ 109 | } 110 | 111 | #canvasCameraQQVGA { 112 | position: absolute; 113 | width: 160px; 114 | height: 120px; 115 | left: 0px; 116 | top: 0px; 117 | visibility: hidden; 118 | } 119 | 120 | #canvasCameraDisplay { 121 | position: absolute; 122 | top: 0px; 123 | left: 50%; 124 | -webkit-transform: translateX(-50%); 125 | transform: translateX(-50%); 126 | z-index: -1; 127 | margin: 0 auto; 128 | border-style: dotted; 129 | border-color: #545454; 130 | /* background-color: rebeccapurple; */ 131 | } 132 | 133 | #spanJoystickMotorHeader { 134 | position: absolute; 135 | top: 0px; 136 | width: 100%; 137 | height: 10%; 138 | text-align: center; 139 | margin: 0 auto; 140 | /* background-color:burlywood; */ 141 | } 142 | 143 | #spanJoystickMotorFooter { 144 | position: absolute; 145 | bottom: 0px; 146 | width: 100%; 147 | height: 10%; 148 | text-align: center; 149 | margin: 0 auto; 150 | /* background-color:burlywood; */ 151 | } 152 | 153 | #canvasGaugeMotorLeft { 154 | position: absolute; 155 | left: 0px; 156 | top: 0px; 157 | width: 100%; 158 | height: 100%; 159 | margin: 0 auto; 160 | } 161 | 162 | #spanMotorLeft { 163 | position: absolute; 164 | left: 0%; 165 | top: 50%; 166 | } 167 | 168 | #spanMotorLeftSpeed { 169 | position: absolute; 170 | left: 50%; 171 | top: 50%; 172 | } 173 | 174 | #canvasGaugeMotorRight { 175 | position: absolute; 176 | left: 0px; 177 | top: 0px; 178 | width: 100%; 179 | height: 100%; 180 | margin: 0 auto; 181 | } 182 | 183 | #spanMotorRight { 184 | position: absolute; 185 | left: 0%; 186 | top: 50%; 187 | } 188 | 189 | #spanMotorRightSpeed { 190 | position: absolute; 191 | left: 50%; 192 | top: 50%; 193 | /* background-color:burlywood; */ 194 | } 195 | 196 | #spanMotorLeft, 197 | #spanMotorLeftSpeed, 198 | #spanMotorRight, 199 | #spanMotorRightSpeed { 200 | width: 50%; 201 | height: 16px; 202 | /* color: #D9D9D9; */ 203 | text-align: center; 204 | font-size: 16px; 205 | margin: 0 auto; 206 | } 207 | 208 | #imgCameraOnOff { 209 | position: absolute; 210 | /* width: 64px; 211 | height: 64px; */ 212 | right: 10px; 213 | top: 0px; 214 | visibility: hidden; 215 | } 216 | 217 | #imgFast, 218 | #imgSlow, 219 | #imgLights, 220 | #imgReset, 221 | #imgExit { 222 | width: 48px; 223 | height: 48px; 224 | /* padding: 0px 5px; */ 225 | } 226 | #imgSpacer { 227 | width: 24px; 228 | height: 48px; 229 | /* padding: 0px 5px; */ 230 | } 231 | 232 | #spanSpeedMode { 233 | width: 48px; 234 | height: 48px; 235 | text-align: center; 236 | } 237 | 238 | /* Text effect */ 239 | 240 | #spanTitle, 241 | #spanConnection, 242 | #spanJoystickMotorHeader, 243 | #spanJoystickMotorHeaderFooter, 244 | #spanCamera, 245 | #spanSpeedMode, 246 | #spanMotorLeft, 247 | #spanMotorLeftSpeed, 248 | #spanMotorRight, 249 | #spanMotorRightSpeed { 250 | color: black; 251 | /* Text shadow saw in: https://stackoverflow.com/questions/13426875/text-border-using-css-border-around-text */ 252 | /* text-shadow: 1px 0 0 #fff, -1px 0 0 #fff, 0 1px 0 #fff, 0 -1px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff; */ 253 | text-shadow: 1px 0 0 #D9D9D9, -1px 0 0 #D9D9D9, 0 1px 0 #D9D9D9, 0 -1px 0 #D9D9D9, 1px 1px #D9D9D9, -1px -1px 0 #D9D9D9, 1px -1px 0 #D9D9D9, -1px 1px 0 #D9D9D9; 254 | } -------------------------------------------------------------------------------- /src/ESPlorerI_v1/data/www/.history/style_20190105132457.css: -------------------------------------------------------------------------------- 1 | /* Style for ESPlorer I web page */ 2 | 3 | /* By Tag */ 4 | 5 | body { 6 | background-color: #212121; 7 | } 8 | 9 | /* By class */ 10 | 11 | .header { 12 | margin: 0 auto; 13 | text-align: center; 14 | } 15 | 16 | .title { 17 | position: absolute; 18 | left: 0px; 19 | width: 100%; 20 | text-align: center; 21 | margin: 0 auto; 22 | background-color:#080808; 23 | } 24 | 25 | .camera 26 | { 27 | position: absolute; 28 | width: 100%; 29 | max-width: 800px; 30 | height: 10px; 31 | top: 60px; 32 | left: 50%; 33 | -webkit-transform: translateX(-50%); 34 | transform: translateX(-50%); 35 | margin: 0 auto; 36 | /* background-color: rebeccapurple; */ 37 | } 38 | 39 | .gaugeMotorLeft { 40 | position: absolute; 41 | width: 300px; 42 | height: 300px; 43 | left: 0px; 44 | bottom: 15%; 45 | background-color: rebeccapurple; 46 | } 47 | 48 | .joystickMotor { 49 | position: absolute; 50 | width: 75%; 51 | height: 45%; 52 | max-height: 500px; 53 | left: 50%; 54 | -webkit-transform: translateX(-50%); 55 | transform: translateX(-50%); 56 | bottom: 0px; 57 | margin: 0 auto; 58 | /* z-index: -1; */ 59 | /* background-color:cadetblue; */ 60 | } 61 | 62 | .gaugeMotorRight{ 63 | position: absolute; 64 | width: 300px; 65 | height: 300px; 66 | right: 0px; 67 | bottom: 15%; 68 | background-color: rebeccapurple; 69 | } 70 | 71 | .footer { 72 | position: absolute; 73 | width: 100%; 74 | height: 50px; 75 | left: 0px; 76 | bottom: 0px; 77 | background-color: #080808; 78 | opacity: 0.75; 79 | filter: alpha(opacity=75); 80 | 81 | /* saw it in https://www.w3schools.com/howto/howto_css_button_group.asp */ 82 | padding: 1px 24px; /* Some padding */ 83 | cursor: pointer; /* Pointer/hand icon */ 84 | float: left; /* Float the buttons side by side */ 85 | } 86 | 87 | /* By ID */ 88 | 89 | #spanTitle { 90 | margin: 0 auto; 91 | font-size: 30px; 92 | } 93 | 94 | #spanConnection { 95 | font-size: 16px; 96 | margin: 0 auto; 97 | } 98 | 99 | #spanCamera { 100 | position: absolute; 101 | left: 0px; 102 | top: 20px; 103 | width: 100%; 104 | height: 20px; 105 | text-align: center; 106 | font-size: 20px; 107 | margin: 0 auto; 108 | /* background-color:burlywood; */ 109 | } 110 | 111 | #canvasCameraQQVGA { 112 | position: absolute; 113 | width: 160px; 114 | height: 120px; 115 | left: 0px; 116 | top: 0px; 117 | visibility: hidden; 118 | } 119 | 120 | #canvasCameraDisplay { 121 | position: absolute; 122 | top: 0px; 123 | left: 50%; 124 | -webkit-transform: translateX(-50%); 125 | transform: translateX(-50%); 126 | z-index: -1; 127 | margin: 0 auto; 128 | border-style: dotted; 129 | border-color: #545454; 130 | /* background-color: rebeccapurple; */ 131 | } 132 | 133 | #spanJoystickMotorHeader { 134 | position: absolute; 135 | top: 0px; 136 | width: 100%; 137 | height: 10%; 138 | text-align: center; 139 | margin: 0 auto; 140 | /* background-color:burlywood; */ 141 | } 142 | 143 | #spanJoystickMotorFooter { 144 | position: absolute; 145 | bottom: 0px; 146 | width: 100%; 147 | height: 10%; 148 | text-align: center; 149 | margin: 0 auto; 150 | /* background-color:burlywood; */ 151 | } 152 | 153 | #canvasGaugeMotorLeft { 154 | position: absolute; 155 | left: 0px; 156 | top: 0px; 157 | width: 100%; 158 | height: 100%; 159 | margin: 0 auto; 160 | } 161 | 162 | #spanMotorLeft { 163 | position: absolute; 164 | left: 0%; 165 | top: 50%; 166 | } 167 | 168 | #spanMotorLeftSpeed { 169 | position: absolute; 170 | left: 50%; 171 | top: 50%; 172 | } 173 | 174 | #canvasGaugeMotorRight { 175 | position: absolute; 176 | left: 0px; 177 | top: 0px; 178 | width: 75%; 179 | height: 75%; 180 | margin: 0 auto; 181 | } 182 | 183 | #spanMotorRight { 184 | position: absolute; 185 | left: 0%; 186 | top: 50%; 187 | } 188 | 189 | #spanMotorRightSpeed { 190 | position: absolute; 191 | left: 50%; 192 | top: 50%; 193 | /* background-color:burlywood; */ 194 | } 195 | 196 | #spanMotorLeft, 197 | #spanMotorLeftSpeed, 198 | #spanMotorRight, 199 | #spanMotorRightSpeed { 200 | width: 50%; 201 | height: 16px; 202 | /* color: #D9D9D9; */ 203 | text-align: center; 204 | font-size: 16px; 205 | margin: 0 auto; 206 | } 207 | 208 | #imgCameraOnOff { 209 | position: absolute; 210 | /* width: 64px; 211 | height: 64px; */ 212 | right: 10px; 213 | top: 0px; 214 | visibility: hidden; 215 | } 216 | 217 | #imgFast, 218 | #imgSlow, 219 | #imgLights, 220 | #imgReset, 221 | #imgExit { 222 | width: 48px; 223 | height: 48px; 224 | /* padding: 0px 5px; */ 225 | } 226 | #imgSpacer { 227 | width: 24px; 228 | height: 48px; 229 | /* padding: 0px 5px; */ 230 | } 231 | 232 | #spanSpeedMode { 233 | width: 48px; 234 | height: 48px; 235 | text-align: center; 236 | } 237 | 238 | /* Text effect */ 239 | 240 | #spanTitle, 241 | #spanConnection, 242 | #spanJoystickMotorHeader, 243 | #spanJoystickMotorHeaderFooter, 244 | #spanCamera, 245 | #spanSpeedMode, 246 | #spanMotorLeft, 247 | #spanMotorLeftSpeed, 248 | #spanMotorRight, 249 | #spanMotorRightSpeed { 250 | color: black; 251 | /* Text shadow saw in: https://stackoverflow.com/questions/13426875/text-border-using-css-border-around-text */ 252 | /* text-shadow: 1px 0 0 #fff, -1px 0 0 #fff, 0 1px 0 #fff, 0 -1px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff; */ 253 | text-shadow: 1px 0 0 #D9D9D9, -1px 0 0 #D9D9D9, 0 1px 0 #D9D9D9, 0 -1px 0 #D9D9D9, 1px 1px #D9D9D9, -1px -1px 0 #D9D9D9, 1px -1px 0 #D9D9D9, -1px 1px 0 #D9D9D9; 254 | } -------------------------------------------------------------------------------- /src/ESPlorerI_v1/data/www/.history/style_20190105132525.css: -------------------------------------------------------------------------------- 1 | /* Style for ESPlorer I web page */ 2 | 3 | /* By Tag */ 4 | 5 | body { 6 | background-color: #212121; 7 | } 8 | 9 | /* By class */ 10 | 11 | .header { 12 | margin: 0 auto; 13 | text-align: center; 14 | } 15 | 16 | .title { 17 | position: absolute; 18 | left: 0px; 19 | width: 100%; 20 | text-align: center; 21 | margin: 0 auto; 22 | background-color:#080808; 23 | } 24 | 25 | .camera 26 | { 27 | position: absolute; 28 | width: 100%; 29 | max-width: 800px; 30 | height: 10px; 31 | top: 60px; 32 | left: 50%; 33 | -webkit-transform: translateX(-50%); 34 | transform: translateX(-50%); 35 | margin: 0 auto; 36 | /* background-color: rebeccapurple; */ 37 | } 38 | 39 | .gaugeMotorLeft { 40 | position: absolute; 41 | width: 300px; 42 | height: 300px; 43 | left: 0px; 44 | bottom: 15%; 45 | background-color: rebeccapurple; 46 | } 47 | 48 | .joystickMotor { 49 | position: absolute; 50 | width: 75%; 51 | height: 45%; 52 | max-height: 500px; 53 | left: 50%; 54 | -webkit-transform: translateX(-50%); 55 | transform: translateX(-50%); 56 | bottom: 0px; 57 | margin: 0 auto; 58 | /* z-index: -1; */ 59 | /* background-color:cadetblue; */ 60 | } 61 | 62 | .gaugeMotorRight{ 63 | position: absolute; 64 | width: 300px; 65 | height: 300px; 66 | right: 0px; 67 | bottom: 15%; 68 | background-color: rebeccapurple; 69 | } 70 | 71 | .footer { 72 | position: absolute; 73 | width: 100%; 74 | height: 50px; 75 | left: 0px; 76 | bottom: 0px; 77 | background-color: #080808; 78 | opacity: 0.75; 79 | filter: alpha(opacity=75); 80 | 81 | /* saw it in https://www.w3schools.com/howto/howto_css_button_group.asp */ 82 | padding: 1px 24px; /* Some padding */ 83 | cursor: pointer; /* Pointer/hand icon */ 84 | float: left; /* Float the buttons side by side */ 85 | } 86 | 87 | /* By ID */ 88 | 89 | #spanTitle { 90 | margin: 0 auto; 91 | font-size: 30px; 92 | } 93 | 94 | #spanConnection { 95 | font-size: 16px; 96 | margin: 0 auto; 97 | } 98 | 99 | #spanCamera { 100 | position: absolute; 101 | left: 0px; 102 | top: 20px; 103 | width: 100%; 104 | height: 20px; 105 | text-align: center; 106 | font-size: 20px; 107 | margin: 0 auto; 108 | /* background-color:burlywood; */ 109 | } 110 | 111 | #canvasCameraQQVGA { 112 | position: absolute; 113 | width: 160px; 114 | height: 120px; 115 | left: 0px; 116 | top: 0px; 117 | visibility: hidden; 118 | } 119 | 120 | #canvasCameraDisplay { 121 | position: absolute; 122 | top: 0px; 123 | left: 50%; 124 | -webkit-transform: translateX(-50%); 125 | transform: translateX(-50%); 126 | z-index: -1; 127 | margin: 0 auto; 128 | border-style: dotted; 129 | border-color: #545454; 130 | /* background-color: rebeccapurple; */ 131 | } 132 | 133 | #spanJoystickMotorHeader { 134 | position: absolute; 135 | top: 0px; 136 | width: 100%; 137 | height: 10%; 138 | text-align: center; 139 | margin: 0 auto; 140 | /* background-color:burlywood; */ 141 | } 142 | 143 | #spanJoystickMotorFooter { 144 | position: absolute; 145 | bottom: 0px; 146 | width: 100%; 147 | height: 10%; 148 | text-align: center; 149 | margin: 0 auto; 150 | /* background-color:burlywood; */ 151 | } 152 | 153 | #canvasGaugeMotorLeft { 154 | position: absolute; 155 | left: 0px; 156 | top: 0px; 157 | width: 100%; 158 | height: 100%; 159 | margin: 0 auto; 160 | } 161 | 162 | #spanMotorLeft { 163 | position: absolute; 164 | left: 0%; 165 | top: 50%; 166 | } 167 | 168 | #spanMotorLeftSpeed { 169 | position: absolute; 170 | left: 50%; 171 | top: 50%; 172 | } 173 | 174 | #canvasGaugeMotorRight { 175 | position: absolute; 176 | left: 0px; 177 | top: 0px; 178 | width: 300px; 179 | height: 300px; 180 | margin: 0 auto; 181 | } 182 | 183 | #spanMotorRight { 184 | position: absolute; 185 | left: 0%; 186 | top: 50%; 187 | } 188 | 189 | #spanMotorRightSpeed { 190 | position: absolute; 191 | left: 50%; 192 | top: 50%; 193 | /* background-color:burlywood; */ 194 | } 195 | 196 | #spanMotorLeft, 197 | #spanMotorLeftSpeed, 198 | #spanMotorRight, 199 | #spanMotorRightSpeed { 200 | width: 50%; 201 | height: 16px; 202 | /* color: #D9D9D9; */ 203 | text-align: center; 204 | font-size: 16px; 205 | margin: 0 auto; 206 | } 207 | 208 | #imgCameraOnOff { 209 | position: absolute; 210 | /* width: 64px; 211 | height: 64px; */ 212 | right: 10px; 213 | top: 0px; 214 | visibility: hidden; 215 | } 216 | 217 | #imgFast, 218 | #imgSlow, 219 | #imgLights, 220 | #imgReset, 221 | #imgExit { 222 | width: 48px; 223 | height: 48px; 224 | /* padding: 0px 5px; */ 225 | } 226 | #imgSpacer { 227 | width: 24px; 228 | height: 48px; 229 | /* padding: 0px 5px; */ 230 | } 231 | 232 | #spanSpeedMode { 233 | width: 48px; 234 | height: 48px; 235 | text-align: center; 236 | } 237 | 238 | /* Text effect */ 239 | 240 | #spanTitle, 241 | #spanConnection, 242 | #spanJoystickMotorHeader, 243 | #spanJoystickMotorHeaderFooter, 244 | #spanCamera, 245 | #spanSpeedMode, 246 | #spanMotorLeft, 247 | #spanMotorLeftSpeed, 248 | #spanMotorRight, 249 | #spanMotorRightSpeed { 250 | color: black; 251 | /* Text shadow saw in: https://stackoverflow.com/questions/13426875/text-border-using-css-border-around-text */ 252 | /* text-shadow: 1px 0 0 #fff, -1px 0 0 #fff, 0 1px 0 #fff, 0 -1px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff; */ 253 | text-shadow: 1px 0 0 #D9D9D9, -1px 0 0 #D9D9D9, 0 1px 0 #D9D9D9, 0 -1px 0 #D9D9D9, 1px 1px #D9D9D9, -1px -1px 0 #D9D9D9, 1px -1px 0 #D9D9D9, -1px 1px 0 #D9D9D9; 254 | } -------------------------------------------------------------------------------- /src/ESPlorerI_v1/data/www/.history/style_20190105132537.css: -------------------------------------------------------------------------------- 1 | /* Style for ESPlorer I web page */ 2 | 3 | /* By Tag */ 4 | 5 | body { 6 | background-color: #212121; 7 | } 8 | 9 | /* By class */ 10 | 11 | .header { 12 | margin: 0 auto; 13 | text-align: center; 14 | } 15 | 16 | .title { 17 | position: absolute; 18 | left: 0px; 19 | width: 100%; 20 | text-align: center; 21 | margin: 0 auto; 22 | background-color:#080808; 23 | } 24 | 25 | .camera 26 | { 27 | position: absolute; 28 | width: 100%; 29 | max-width: 800px; 30 | height: 10px; 31 | top: 60px; 32 | left: 50%; 33 | -webkit-transform: translateX(-50%); 34 | transform: translateX(-50%); 35 | margin: 0 auto; 36 | /* background-color: rebeccapurple; */ 37 | } 38 | 39 | .gaugeMotorLeft { 40 | position: absolute; 41 | width: 300px; 42 | height: 300px; 43 | left: 0px; 44 | bottom: 15%; 45 | background-color: rebeccapurple; 46 | } 47 | 48 | .joystickMotor { 49 | position: absolute; 50 | width: 75%; 51 | height: 45%; 52 | max-height: 500px; 53 | left: 50%; 54 | -webkit-transform: translateX(-50%); 55 | transform: translateX(-50%); 56 | bottom: 0px; 57 | margin: 0 auto; 58 | /* z-index: -1; */ 59 | /* background-color:cadetblue; */ 60 | } 61 | 62 | .gaugeMotorRight{ 63 | position: absolute; 64 | width: 300px; 65 | height: 300px; 66 | right: 0px; 67 | bottom: 15%; 68 | background-color: rebeccapurple; 69 | } 70 | 71 | .footer { 72 | position: absolute; 73 | width: 100%; 74 | height: 50px; 75 | left: 0px; 76 | bottom: 0px; 77 | background-color: #080808; 78 | opacity: 0.75; 79 | filter: alpha(opacity=75); 80 | 81 | /* saw it in https://www.w3schools.com/howto/howto_css_button_group.asp */ 82 | padding: 1px 24px; /* Some padding */ 83 | cursor: pointer; /* Pointer/hand icon */ 84 | float: left; /* Float the buttons side by side */ 85 | } 86 | 87 | /* By ID */ 88 | 89 | #spanTitle { 90 | margin: 0 auto; 91 | font-size: 30px; 92 | } 93 | 94 | #spanConnection { 95 | font-size: 16px; 96 | margin: 0 auto; 97 | } 98 | 99 | #spanCamera { 100 | position: absolute; 101 | left: 0px; 102 | top: 20px; 103 | width: 100%; 104 | height: 20px; 105 | text-align: center; 106 | font-size: 20px; 107 | margin: 0 auto; 108 | /* background-color:burlywood; */ 109 | } 110 | 111 | #canvasCameraQQVGA { 112 | position: absolute; 113 | width: 160px; 114 | height: 120px; 115 | left: 0px; 116 | top: 0px; 117 | visibility: hidden; 118 | } 119 | 120 | #canvasCameraDisplay { 121 | position: absolute; 122 | top: 0px; 123 | left: 50%; 124 | -webkit-transform: translateX(-50%); 125 | transform: translateX(-50%); 126 | z-index: -1; 127 | margin: 0 auto; 128 | border-style: dotted; 129 | border-color: #545454; 130 | /* background-color: rebeccapurple; */ 131 | } 132 | 133 | #spanJoystickMotorHeader { 134 | position: absolute; 135 | top: 0px; 136 | width: 100%; 137 | height: 10%; 138 | text-align: center; 139 | margin: 0 auto; 140 | /* background-color:burlywood; */ 141 | } 142 | 143 | #spanJoystickMotorFooter { 144 | position: absolute; 145 | bottom: 0px; 146 | width: 100%; 147 | height: 10%; 148 | text-align: center; 149 | margin: 0 auto; 150 | /* background-color:burlywood; */ 151 | } 152 | 153 | #canvasGaugeMotorLeft { 154 | position: absolute; 155 | left: 0px; 156 | top: 0px; 157 | width: 100%; 158 | height: 100%; 159 | margin: 0 auto; 160 | } 161 | 162 | #spanMotorLeft { 163 | position: absolute; 164 | left: 0%; 165 | top: 50%; 166 | } 167 | 168 | #spanMotorLeftSpeed { 169 | position: absolute; 170 | left: 50%; 171 | top: 50%; 172 | } 173 | 174 | #canvasGaugeMotorRight { 175 | position: absolute; 176 | left: 0px; 177 | top: 0px; 178 | width: 300px; 179 | height: 200px; 180 | margin: 0 auto; 181 | } 182 | 183 | #spanMotorRight { 184 | position: absolute; 185 | left: 0%; 186 | top: 50%; 187 | } 188 | 189 | #spanMotorRightSpeed { 190 | position: absolute; 191 | left: 50%; 192 | top: 50%; 193 | /* background-color:burlywood; */ 194 | } 195 | 196 | #spanMotorLeft, 197 | #spanMotorLeftSpeed, 198 | #spanMotorRight, 199 | #spanMotorRightSpeed { 200 | width: 50%; 201 | height: 16px; 202 | /* color: #D9D9D9; */ 203 | text-align: center; 204 | font-size: 16px; 205 | margin: 0 auto; 206 | } 207 | 208 | #imgCameraOnOff { 209 | position: absolute; 210 | /* width: 64px; 211 | height: 64px; */ 212 | right: 10px; 213 | top: 0px; 214 | visibility: hidden; 215 | } 216 | 217 | #imgFast, 218 | #imgSlow, 219 | #imgLights, 220 | #imgReset, 221 | #imgExit { 222 | width: 48px; 223 | height: 48px; 224 | /* padding: 0px 5px; */ 225 | } 226 | #imgSpacer { 227 | width: 24px; 228 | height: 48px; 229 | /* padding: 0px 5px; */ 230 | } 231 | 232 | #spanSpeedMode { 233 | width: 48px; 234 | height: 48px; 235 | text-align: center; 236 | } 237 | 238 | /* Text effect */ 239 | 240 | #spanTitle, 241 | #spanConnection, 242 | #spanJoystickMotorHeader, 243 | #spanJoystickMotorHeaderFooter, 244 | #spanCamera, 245 | #spanSpeedMode, 246 | #spanMotorLeft, 247 | #spanMotorLeftSpeed, 248 | #spanMotorRight, 249 | #spanMotorRightSpeed { 250 | color: black; 251 | /* Text shadow saw in: https://stackoverflow.com/questions/13426875/text-border-using-css-border-around-text */ 252 | /* text-shadow: 1px 0 0 #fff, -1px 0 0 #fff, 0 1px 0 #fff, 0 -1px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff; */ 253 | text-shadow: 1px 0 0 #D9D9D9, -1px 0 0 #D9D9D9, 0 1px 0 #D9D9D9, 0 -1px 0 #D9D9D9, 1px 1px #D9D9D9, -1px -1px 0 #D9D9D9, 1px -1px 0 #D9D9D9, -1px 1px 0 #D9D9D9; 254 | } -------------------------------------------------------------------------------- /src/ESPlorerI_v1/data/www/.history/style_20190105132608.css: -------------------------------------------------------------------------------- 1 | /* Style for ESPlorer I web page */ 2 | 3 | /* By Tag */ 4 | 5 | body { 6 | background-color: #212121; 7 | } 8 | 9 | /* By class */ 10 | 11 | .header { 12 | margin: 0 auto; 13 | text-align: center; 14 | } 15 | 16 | .title { 17 | position: absolute; 18 | left: 0px; 19 | width: 100%; 20 | text-align: center; 21 | margin: 0 auto; 22 | background-color:#080808; 23 | } 24 | 25 | .camera 26 | { 27 | position: absolute; 28 | width: 100%; 29 | max-width: 800px; 30 | height: 10px; 31 | top: 60px; 32 | left: 50%; 33 | -webkit-transform: translateX(-50%); 34 | transform: translateX(-50%); 35 | margin: 0 auto; 36 | /* background-color: rebeccapurple; */ 37 | } 38 | 39 | .gaugeMotorLeft { 40 | position: absolute; 41 | width: 300px; 42 | height: 300px; 43 | left: 0px; 44 | bottom: 15%; 45 | background-color: rebeccapurple; 46 | } 47 | 48 | .joystickMotor { 49 | position: absolute; 50 | width: 75%; 51 | height: 45%; 52 | max-height: 500px; 53 | left: 50%; 54 | -webkit-transform: translateX(-50%); 55 | transform: translateX(-50%); 56 | bottom: 0px; 57 | margin: 0 auto; 58 | /* z-index: -1; */ 59 | /* background-color:cadetblue; */ 60 | } 61 | 62 | .gaugeMotorRight{ 63 | position: absolute; 64 | width: 300px; 65 | height: 200px; 66 | right: 0px; 67 | bottom: 15%; 68 | background-color: rebeccapurple; 69 | } 70 | 71 | .footer { 72 | position: absolute; 73 | width: 100%; 74 | height: 50px; 75 | left: 0px; 76 | bottom: 0px; 77 | background-color: #080808; 78 | opacity: 0.75; 79 | filter: alpha(opacity=75); 80 | 81 | /* saw it in https://www.w3schools.com/howto/howto_css_button_group.asp */ 82 | padding: 1px 24px; /* Some padding */ 83 | cursor: pointer; /* Pointer/hand icon */ 84 | float: left; /* Float the buttons side by side */ 85 | } 86 | 87 | /* By ID */ 88 | 89 | #spanTitle { 90 | margin: 0 auto; 91 | font-size: 30px; 92 | } 93 | 94 | #spanConnection { 95 | font-size: 16px; 96 | margin: 0 auto; 97 | } 98 | 99 | #spanCamera { 100 | position: absolute; 101 | left: 0px; 102 | top: 20px; 103 | width: 100%; 104 | height: 20px; 105 | text-align: center; 106 | font-size: 20px; 107 | margin: 0 auto; 108 | /* background-color:burlywood; */ 109 | } 110 | 111 | #canvasCameraQQVGA { 112 | position: absolute; 113 | width: 160px; 114 | height: 120px; 115 | left: 0px; 116 | top: 0px; 117 | visibility: hidden; 118 | } 119 | 120 | #canvasCameraDisplay { 121 | position: absolute; 122 | top: 0px; 123 | left: 50%; 124 | -webkit-transform: translateX(-50%); 125 | transform: translateX(-50%); 126 | z-index: -1; 127 | margin: 0 auto; 128 | border-style: dotted; 129 | border-color: #545454; 130 | /* background-color: rebeccapurple; */ 131 | } 132 | 133 | #spanJoystickMotorHeader { 134 | position: absolute; 135 | top: 0px; 136 | width: 100%; 137 | height: 10%; 138 | text-align: center; 139 | margin: 0 auto; 140 | /* background-color:burlywood; */ 141 | } 142 | 143 | #spanJoystickMotorFooter { 144 | position: absolute; 145 | bottom: 0px; 146 | width: 100%; 147 | height: 10%; 148 | text-align: center; 149 | margin: 0 auto; 150 | /* background-color:burlywood; */ 151 | } 152 | 153 | #canvasGaugeMotorLeft { 154 | position: absolute; 155 | left: 0px; 156 | top: 0px; 157 | width: 100%; 158 | height: 100%; 159 | margin: 0 auto; 160 | } 161 | 162 | #spanMotorLeft { 163 | position: absolute; 164 | left: 0%; 165 | top: 50%; 166 | } 167 | 168 | #spanMotorLeftSpeed { 169 | position: absolute; 170 | left: 50%; 171 | top: 50%; 172 | } 173 | 174 | #canvasGaugeMotorRight { 175 | position: absolute; 176 | left: 0px; 177 | top: 0px; 178 | width: 300px; 179 | height: 200px; 180 | margin: 0 auto; 181 | } 182 | 183 | #spanMotorRight { 184 | position: absolute; 185 | left: 0%; 186 | top: 50%; 187 | } 188 | 189 | #spanMotorRightSpeed { 190 | position: absolute; 191 | left: 50%; 192 | top: 50%; 193 | /* background-color:burlywood; */ 194 | } 195 | 196 | #spanMotorLeft, 197 | #spanMotorLeftSpeed, 198 | #spanMotorRight, 199 | #spanMotorRightSpeed { 200 | width: 50%; 201 | height: 16px; 202 | /* color: #D9D9D9; */ 203 | text-align: center; 204 | font-size: 16px; 205 | margin: 0 auto; 206 | } 207 | 208 | #imgCameraOnOff { 209 | position: absolute; 210 | /* width: 64px; 211 | height: 64px; */ 212 | right: 10px; 213 | top: 0px; 214 | visibility: hidden; 215 | } 216 | 217 | #imgFast, 218 | #imgSlow, 219 | #imgLights, 220 | #imgReset, 221 | #imgExit { 222 | width: 48px; 223 | height: 48px; 224 | /* padding: 0px 5px; */ 225 | } 226 | #imgSpacer { 227 | width: 24px; 228 | height: 48px; 229 | /* padding: 0px 5px; */ 230 | } 231 | 232 | #spanSpeedMode { 233 | width: 48px; 234 | height: 48px; 235 | text-align: center; 236 | } 237 | 238 | /* Text effect */ 239 | 240 | #spanTitle, 241 | #spanConnection, 242 | #spanJoystickMotorHeader, 243 | #spanJoystickMotorHeaderFooter, 244 | #spanCamera, 245 | #spanSpeedMode, 246 | #spanMotorLeft, 247 | #spanMotorLeftSpeed, 248 | #spanMotorRight, 249 | #spanMotorRightSpeed { 250 | color: black; 251 | /* Text shadow saw in: https://stackoverflow.com/questions/13426875/text-border-using-css-border-around-text */ 252 | /* text-shadow: 1px 0 0 #fff, -1px 0 0 #fff, 0 1px 0 #fff, 0 -1px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff; */ 253 | text-shadow: 1px 0 0 #D9D9D9, -1px 0 0 #D9D9D9, 0 1px 0 #D9D9D9, 0 -1px 0 #D9D9D9, 1px 1px #D9D9D9, -1px -1px 0 #D9D9D9, 1px -1px 0 #D9D9D9, -1px 1px 0 #D9D9D9; 254 | } -------------------------------------------------------------------------------- /src/ESPlorerI_v1/data/www/.history/style_20190105132720.css: -------------------------------------------------------------------------------- 1 | /* Style for ESPlorer I web page */ 2 | 3 | /* By Tag */ 4 | 5 | body { 6 | background-color: #212121; 7 | } 8 | 9 | /* By class */ 10 | 11 | .header { 12 | margin: 0 auto; 13 | text-align: center; 14 | } 15 | 16 | .title { 17 | position: absolute; 18 | left: 0px; 19 | width: 100%; 20 | text-align: center; 21 | margin: 0 auto; 22 | background-color:#080808; 23 | } 24 | 25 | .camera 26 | { 27 | position: absolute; 28 | width: 100%; 29 | max-width: 800px; 30 | height: 10px; 31 | top: 60px; 32 | left: 50%; 33 | -webkit-transform: translateX(-50%); 34 | transform: translateX(-50%); 35 | margin: 0 auto; 36 | /* background-color: rebeccapurple; */ 37 | } 38 | 39 | .gaugeMotorLeft { 40 | position: absolute; 41 | width: 300px; 42 | height: 300px; 43 | left: 0px; 44 | bottom: 15%; 45 | background-color: rebeccapurple; 46 | } 47 | 48 | .joystickMotor { 49 | position: absolute; 50 | width: 75%; 51 | height: 45%; 52 | max-height: 500px; 53 | left: 50%; 54 | -webkit-transform: translateX(-50%); 55 | transform: translateX(-50%); 56 | bottom: 0px; 57 | margin: 0 auto; 58 | /* z-index: -1; */ 59 | /* background-color:cadetblue; */ 60 | } 61 | 62 | .gaugeMotorRight{ 63 | position: absolute; 64 | right: 0px; 65 | bottom: 15%; 66 | } 67 | 68 | .gaugeMotorLeft, 69 | .gaugeMotorRight{ 70 | width: 300px; 71 | height: 200px; 72 | background-color: rebeccapurple; 73 | } 74 | .footer { 75 | position: absolute; 76 | width: 100%; 77 | height: 50px; 78 | left: 0px; 79 | bottom: 0px; 80 | background-color: #080808; 81 | opacity: 0.75; 82 | filter: alpha(opacity=75); 83 | 84 | /* saw it in https://www.w3schools.com/howto/howto_css_button_group.asp */ 85 | padding: 1px 24px; /* Some padding */ 86 | cursor: pointer; /* Pointer/hand icon */ 87 | float: left; /* Float the buttons side by side */ 88 | } 89 | 90 | /* By ID */ 91 | 92 | #spanTitle { 93 | margin: 0 auto; 94 | font-size: 30px; 95 | } 96 | 97 | #spanConnection { 98 | font-size: 16px; 99 | margin: 0 auto; 100 | } 101 | 102 | #spanCamera { 103 | position: absolute; 104 | left: 0px; 105 | top: 20px; 106 | width: 100%; 107 | height: 20px; 108 | text-align: center; 109 | font-size: 20px; 110 | margin: 0 auto; 111 | /* background-color:burlywood; */ 112 | } 113 | 114 | #canvasCameraQQVGA { 115 | position: absolute; 116 | width: 160px; 117 | height: 120px; 118 | left: 0px; 119 | top: 0px; 120 | visibility: hidden; 121 | } 122 | 123 | #canvasCameraDisplay { 124 | position: absolute; 125 | top: 0px; 126 | left: 50%; 127 | -webkit-transform: translateX(-50%); 128 | transform: translateX(-50%); 129 | z-index: -1; 130 | margin: 0 auto; 131 | border-style: dotted; 132 | border-color: #545454; 133 | /* background-color: rebeccapurple; */ 134 | } 135 | 136 | #spanJoystickMotorHeader { 137 | position: absolute; 138 | top: 0px; 139 | width: 100%; 140 | height: 10%; 141 | text-align: center; 142 | margin: 0 auto; 143 | /* background-color:burlywood; */ 144 | } 145 | 146 | #spanJoystickMotorFooter { 147 | position: absolute; 148 | bottom: 0px; 149 | width: 100%; 150 | height: 10%; 151 | text-align: center; 152 | margin: 0 auto; 153 | /* background-color:burlywood; */ 154 | } 155 | 156 | #canvasGaugeMotorLeft { 157 | position: absolute; 158 | left: 0px; 159 | top: 0px; 160 | width: 100%; 161 | height: 100%; 162 | margin: 0 auto; 163 | } 164 | 165 | #spanMotorLeft { 166 | position: absolute; 167 | left: 0%; 168 | top: 50%; 169 | } 170 | 171 | #spanMotorLeftSpeed { 172 | position: absolute; 173 | left: 50%; 174 | top: 50%; 175 | } 176 | 177 | #canvasGaugeMotorRight { 178 | position: absolute; 179 | left: 0px; 180 | top: 0px; 181 | width: 300px; 182 | height: 200px; 183 | margin: 0 auto; 184 | } 185 | 186 | #spanMotorRight { 187 | position: absolute; 188 | left: 0%; 189 | top: 50%; 190 | } 191 | 192 | #spanMotorRightSpeed { 193 | position: absolute; 194 | left: 50%; 195 | top: 50%; 196 | /* background-color:burlywood; */ 197 | } 198 | 199 | #spanMotorLeft, 200 | #spanMotorLeftSpeed, 201 | #spanMotorRight, 202 | #spanMotorRightSpeed { 203 | width: 50%; 204 | height: 16px; 205 | /* color: #D9D9D9; */ 206 | text-align: center; 207 | font-size: 16px; 208 | margin: 0 auto; 209 | } 210 | 211 | #imgCameraOnOff { 212 | position: absolute; 213 | /* width: 64px; 214 | height: 64px; */ 215 | right: 10px; 216 | top: 0px; 217 | visibility: hidden; 218 | } 219 | 220 | #imgFast, 221 | #imgSlow, 222 | #imgLights, 223 | #imgReset, 224 | #imgExit { 225 | width: 48px; 226 | height: 48px; 227 | /* padding: 0px 5px; */ 228 | } 229 | #imgSpacer { 230 | width: 24px; 231 | height: 48px; 232 | /* padding: 0px 5px; */ 233 | } 234 | 235 | #spanSpeedMode { 236 | width: 48px; 237 | height: 48px; 238 | text-align: center; 239 | } 240 | 241 | /* Text effect */ 242 | 243 | #spanTitle, 244 | #spanConnection, 245 | #spanJoystickMotorHeader, 246 | #spanJoystickMotorHeaderFooter, 247 | #spanCamera, 248 | #spanSpeedMode, 249 | #spanMotorLeft, 250 | #spanMotorLeftSpeed, 251 | #spanMotorRight, 252 | #spanMotorRightSpeed { 253 | color: black; 254 | /* Text shadow saw in: https://stackoverflow.com/questions/13426875/text-border-using-css-border-around-text */ 255 | /* text-shadow: 1px 0 0 #fff, -1px 0 0 #fff, 0 1px 0 #fff, 0 -1px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff; */ 256 | text-shadow: 1px 0 0 #D9D9D9, -1px 0 0 #D9D9D9, 0 1px 0 #D9D9D9, 0 -1px 0 #D9D9D9, 1px 1px #D9D9D9, -1px -1px 0 #D9D9D9, 1px -1px 0 #D9D9D9, -1px 1px 0 #D9D9D9; 257 | } -------------------------------------------------------------------------------- /src/ESPlorerI_v1/data/www/.history/style_20190105132746.css: -------------------------------------------------------------------------------- 1 | /* Style for ESPlorer I web page */ 2 | 3 | /* By Tag */ 4 | 5 | body { 6 | background-color: #212121; 7 | } 8 | 9 | /* By class */ 10 | 11 | .header { 12 | margin: 0 auto; 13 | text-align: center; 14 | } 15 | 16 | .title { 17 | position: absolute; 18 | left: 0px; 19 | width: 100%; 20 | text-align: center; 21 | margin: 0 auto; 22 | background-color:#080808; 23 | } 24 | 25 | .camera 26 | { 27 | position: absolute; 28 | width: 100%; 29 | max-width: 800px; 30 | height: 10px; 31 | top: 60px; 32 | left: 50%; 33 | -webkit-transform: translateX(-50%); 34 | transform: translateX(-50%); 35 | margin: 0 auto; 36 | /* background-color: rebeccapurple; */ 37 | } 38 | 39 | .gaugeMotorLeft { 40 | position: absolute; 41 | left: 0px; 42 | } 43 | 44 | .joystickMotor { 45 | position: absolute; 46 | width: 75%; 47 | height: 45%; 48 | max-height: 500px; 49 | left: 50%; 50 | -webkit-transform: translateX(-50%); 51 | transform: translateX(-50%); 52 | bottom: 0px; 53 | margin: 0 auto; 54 | /* z-index: -1; */ 55 | /* background-color:cadetblue; */ 56 | } 57 | 58 | .gaugeMotorRight{ 59 | position: absolute; 60 | right: 0px; 61 | } 62 | 63 | .gaugeMotorLeft, 64 | .gaugeMotorRight{ 65 | width: 300px; 66 | height: 200px; 67 | bottom: 15%; 68 | background-color: rebeccapurple; 69 | } 70 | 71 | .footer { 72 | position: absolute; 73 | width: 100%; 74 | height: 50px; 75 | left: 0px; 76 | bottom: 0px; 77 | background-color: #080808; 78 | opacity: 0.75; 79 | filter: alpha(opacity=75); 80 | 81 | /* saw it in https://www.w3schools.com/howto/howto_css_button_group.asp */ 82 | padding: 1px 24px; /* Some padding */ 83 | cursor: pointer; /* Pointer/hand icon */ 84 | float: left; /* Float the buttons side by side */ 85 | } 86 | 87 | /* By ID */ 88 | 89 | #spanTitle { 90 | margin: 0 auto; 91 | font-size: 30px; 92 | } 93 | 94 | #spanConnection { 95 | font-size: 16px; 96 | margin: 0 auto; 97 | } 98 | 99 | #spanCamera { 100 | position: absolute; 101 | left: 0px; 102 | top: 20px; 103 | width: 100%; 104 | height: 20px; 105 | text-align: center; 106 | font-size: 20px; 107 | margin: 0 auto; 108 | /* background-color:burlywood; */ 109 | } 110 | 111 | #canvasCameraQQVGA { 112 | position: absolute; 113 | width: 160px; 114 | height: 120px; 115 | left: 0px; 116 | top: 0px; 117 | visibility: hidden; 118 | } 119 | 120 | #canvasCameraDisplay { 121 | position: absolute; 122 | top: 0px; 123 | left: 50%; 124 | -webkit-transform: translateX(-50%); 125 | transform: translateX(-50%); 126 | z-index: -1; 127 | margin: 0 auto; 128 | border-style: dotted; 129 | border-color: #545454; 130 | /* background-color: rebeccapurple; */ 131 | } 132 | 133 | #spanJoystickMotorHeader { 134 | position: absolute; 135 | top: 0px; 136 | width: 100%; 137 | height: 10%; 138 | text-align: center; 139 | margin: 0 auto; 140 | /* background-color:burlywood; */ 141 | } 142 | 143 | #spanJoystickMotorFooter { 144 | position: absolute; 145 | bottom: 0px; 146 | width: 100%; 147 | height: 10%; 148 | text-align: center; 149 | margin: 0 auto; 150 | /* background-color:burlywood; */ 151 | } 152 | 153 | #canvasGaugeMotorLeft { 154 | position: absolute; 155 | left: 0px; 156 | top: 0px; 157 | width: 100%; 158 | height: 100%; 159 | margin: 0 auto; 160 | } 161 | 162 | #spanMotorLeft { 163 | position: absolute; 164 | left: 0%; 165 | top: 50%; 166 | } 167 | 168 | #spanMotorLeftSpeed { 169 | position: absolute; 170 | left: 50%; 171 | top: 50%; 172 | } 173 | 174 | #canvasGaugeMotorRight { 175 | position: absolute; 176 | left: 0px; 177 | top: 0px; 178 | width: 300px; 179 | height: 200px; 180 | margin: 0 auto; 181 | } 182 | 183 | #spanMotorRight { 184 | position: absolute; 185 | left: 0%; 186 | top: 50%; 187 | } 188 | 189 | #spanMotorRightSpeed { 190 | position: absolute; 191 | left: 50%; 192 | top: 50%; 193 | /* background-color:burlywood; */ 194 | } 195 | 196 | #spanMotorLeft, 197 | #spanMotorLeftSpeed, 198 | #spanMotorRight, 199 | #spanMotorRightSpeed { 200 | width: 50%; 201 | height: 16px; 202 | /* color: #D9D9D9; */ 203 | text-align: center; 204 | font-size: 16px; 205 | margin: 0 auto; 206 | } 207 | 208 | #imgCameraOnOff { 209 | position: absolute; 210 | /* width: 64px; 211 | height: 64px; */ 212 | right: 10px; 213 | top: 0px; 214 | visibility: hidden; 215 | } 216 | 217 | #imgFast, 218 | #imgSlow, 219 | #imgLights, 220 | #imgReset, 221 | #imgExit { 222 | width: 48px; 223 | height: 48px; 224 | /* padding: 0px 5px; */ 225 | } 226 | #imgSpacer { 227 | width: 24px; 228 | height: 48px; 229 | /* padding: 0px 5px; */ 230 | } 231 | 232 | #spanSpeedMode { 233 | width: 48px; 234 | height: 48px; 235 | text-align: center; 236 | } 237 | 238 | /* Text effect */ 239 | 240 | #spanTitle, 241 | #spanConnection, 242 | #spanJoystickMotorHeader, 243 | #spanJoystickMotorHeaderFooter, 244 | #spanCamera, 245 | #spanSpeedMode, 246 | #spanMotorLeft, 247 | #spanMotorLeftSpeed, 248 | #spanMotorRight, 249 | #spanMotorRightSpeed { 250 | color: black; 251 | /* Text shadow saw in: https://stackoverflow.com/questions/13426875/text-border-using-css-border-around-text */ 252 | /* text-shadow: 1px 0 0 #fff, -1px 0 0 #fff, 0 1px 0 #fff, 0 -1px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff; */ 253 | text-shadow: 1px 0 0 #D9D9D9, -1px 0 0 #D9D9D9, 0 1px 0 #D9D9D9, 0 -1px 0 #D9D9D9, 1px 1px #D9D9D9, -1px -1px 0 #D9D9D9, 1px -1px 0 #D9D9D9, -1px 1px 0 #D9D9D9; 254 | } -------------------------------------------------------------------------------- /src/ESPlorerI_v1/data/www/.history/style_20190105132816.css: -------------------------------------------------------------------------------- 1 | /* Style for ESPlorer I web page */ 2 | 3 | /* By Tag */ 4 | 5 | body { 6 | background-color: #212121; 7 | } 8 | 9 | /* By class */ 10 | 11 | .header { 12 | margin: 0 auto; 13 | text-align: center; 14 | } 15 | 16 | .title { 17 | position: absolute; 18 | left: 0px; 19 | width: 100%; 20 | text-align: center; 21 | margin: 0 auto; 22 | background-color:#080808; 23 | } 24 | 25 | .camera 26 | { 27 | position: absolute; 28 | width: 100%; 29 | max-width: 800px; 30 | height: 10px; 31 | top: 60px; 32 | left: 50%; 33 | -webkit-transform: translateX(-50%); 34 | transform: translateX(-50%); 35 | margin: 0 auto; 36 | /* background-color: rebeccapurple; */ 37 | } 38 | 39 | .gaugeMotorLeft { 40 | position: absolute; 41 | left: 0px; 42 | } 43 | 44 | .joystickMotor { 45 | position: absolute; 46 | width: 75%; 47 | height: 45%; 48 | max-height: 500px; 49 | left: 50%; 50 | -webkit-transform: translateX(-50%); 51 | transform: translateX(-50%); 52 | bottom: 0px; 53 | margin: 0 auto; 54 | /* z-index: -1; */ 55 | /* background-color:cadetblue; */ 56 | } 57 | 58 | .gaugeMotorRight{ 59 | position: absolute; 60 | right: 0px; 61 | } 62 | 63 | .gaugeMotorLeft, 64 | .gaugeMotorRight{ 65 | width: 300px; 66 | height: 200px; 67 | bottom: 15%; 68 | background-color: rebeccapurple; 69 | } 70 | 71 | .footer { 72 | position: absolute; 73 | width: 100%; 74 | height: 50px; 75 | left: 0px; 76 | bottom: 0px; 77 | background-color: #080808; 78 | opacity: 0.75; 79 | filter: alpha(opacity=75); 80 | 81 | /* saw it in https://www.w3schools.com/howto/howto_css_button_group.asp */ 82 | padding: 1px 24px; /* Some padding */ 83 | cursor: pointer; /* Pointer/hand icon */ 84 | float: left; /* Float the buttons side by side */ 85 | } 86 | 87 | /* By ID */ 88 | 89 | #spanTitle { 90 | margin: 0 auto; 91 | font-size: 30px; 92 | } 93 | 94 | #spanConnection { 95 | font-size: 16px; 96 | margin: 0 auto; 97 | } 98 | 99 | #spanCamera { 100 | position: absolute; 101 | left: 0px; 102 | top: 20px; 103 | width: 100%; 104 | height: 20px; 105 | text-align: center; 106 | font-size: 20px; 107 | margin: 0 auto; 108 | /* background-color:burlywood; */ 109 | } 110 | 111 | #canvasCameraQQVGA { 112 | position: absolute; 113 | width: 160px; 114 | height: 120px; 115 | left: 0px; 116 | top: 0px; 117 | visibility: hidden; 118 | } 119 | 120 | #canvasCameraDisplay { 121 | position: absolute; 122 | top: 0px; 123 | left: 50%; 124 | -webkit-transform: translateX(-50%); 125 | transform: translateX(-50%); 126 | z-index: -1; 127 | margin: 0 auto; 128 | border-style: dotted; 129 | border-color: #545454; 130 | /* background-color: rebeccapurple; */ 131 | } 132 | 133 | #spanJoystickMotorHeader { 134 | position: absolute; 135 | top: 0px; 136 | width: 100%; 137 | height: 10%; 138 | text-align: center; 139 | margin: 0 auto; 140 | /* background-color:burlywood; */ 141 | } 142 | 143 | #spanJoystickMotorFooter { 144 | position: absolute; 145 | bottom: 0px; 146 | width: 100%; 147 | height: 10%; 148 | text-align: center; 149 | margin: 0 auto; 150 | /* background-color:burlywood; */ 151 | } 152 | 153 | #canvasGaugeMotorLeft { 154 | position: absolute; 155 | left: 0px; 156 | top: 0px; 157 | width: 100%; 158 | height: 100%; 159 | margin: 0 auto; 160 | } 161 | 162 | #spanMotorLeft { 163 | position: absolute; 164 | left: 0%; 165 | top: 50%; 166 | } 167 | 168 | #spanMotorLeftSpeed { 169 | position: absolute; 170 | left: 50%; 171 | top: 50%; 172 | } 173 | 174 | #canvasGaugeMotorRight { 175 | position: absolute; 176 | left: 0px; 177 | top: 0px; 178 | width: 100%; 179 | height: 100%; 180 | margin: 0 auto; 181 | } 182 | 183 | #spanMotorRight { 184 | position: absolute; 185 | left: 0%; 186 | top: 50%; 187 | } 188 | 189 | #spanMotorRightSpeed { 190 | position: absolute; 191 | left: 50%; 192 | top: 50%; 193 | /* background-color:burlywood; */ 194 | } 195 | 196 | #spanMotorLeft, 197 | #spanMotorLeftSpeed, 198 | #spanMotorRight, 199 | #spanMotorRightSpeed { 200 | width: 50%; 201 | height: 16px; 202 | /* color: #D9D9D9; */ 203 | text-align: center; 204 | font-size: 16px; 205 | margin: 0 auto; 206 | } 207 | 208 | #imgCameraOnOff { 209 | position: absolute; 210 | /* width: 64px; 211 | height: 64px; */ 212 | right: 10px; 213 | top: 0px; 214 | visibility: hidden; 215 | } 216 | 217 | #imgFast, 218 | #imgSlow, 219 | #imgLights, 220 | #imgReset, 221 | #imgExit { 222 | width: 48px; 223 | height: 48px; 224 | /* padding: 0px 5px; */ 225 | } 226 | #imgSpacer { 227 | width: 24px; 228 | height: 48px; 229 | /* padding: 0px 5px; */ 230 | } 231 | 232 | #spanSpeedMode { 233 | width: 48px; 234 | height: 48px; 235 | text-align: center; 236 | } 237 | 238 | /* Text effect */ 239 | 240 | #spanTitle, 241 | #spanConnection, 242 | #spanJoystickMotorHeader, 243 | #spanJoystickMotorHeaderFooter, 244 | #spanCamera, 245 | #spanSpeedMode, 246 | #spanMotorLeft, 247 | #spanMotorLeftSpeed, 248 | #spanMotorRight, 249 | #spanMotorRightSpeed { 250 | color: black; 251 | /* Text shadow saw in: https://stackoverflow.com/questions/13426875/text-border-using-css-border-around-text */ 252 | /* text-shadow: 1px 0 0 #fff, -1px 0 0 #fff, 0 1px 0 #fff, 0 -1px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff; */ 253 | text-shadow: 1px 0 0 #D9D9D9, -1px 0 0 #D9D9D9, 0 1px 0 #D9D9D9, 0 -1px 0 #D9D9D9, 1px 1px #D9D9D9, -1px -1px 0 #D9D9D9, 1px -1px 0 #D9D9D9, -1px 1px 0 #D9D9D9; 254 | } -------------------------------------------------------------------------------- /src/ESPlorerI_v1/data/www/.history/style_20190105132917.css: -------------------------------------------------------------------------------- 1 | /* Style for ESPlorer I web page */ 2 | 3 | /* By Tag */ 4 | 5 | body { 6 | background-color: #212121; 7 | } 8 | 9 | /* By class */ 10 | 11 | .header { 12 | margin: 0 auto; 13 | text-align: center; 14 | } 15 | 16 | .title { 17 | position: absolute; 18 | left: 0px; 19 | width: 100%; 20 | text-align: center; 21 | margin: 0 auto; 22 | background-color:#080808; 23 | } 24 | 25 | .camera 26 | { 27 | position: absolute; 28 | width: 100%; 29 | max-width: 800px; 30 | height: 10px; 31 | top: 60px; 32 | left: 50%; 33 | -webkit-transform: translateX(-50%); 34 | transform: translateX(-50%); 35 | margin: 0 auto; 36 | /* background-color: rebeccapurple; */ 37 | } 38 | 39 | .gaugeMotorLeft { 40 | position: absolute; 41 | left: 0px; 42 | } 43 | 44 | .joystickMotor { 45 | position: absolute; 46 | width: 75%; 47 | height: 45%; 48 | max-height: 500px; 49 | left: 50%; 50 | -webkit-transform: translateX(-50%); 51 | transform: translateX(-50%); 52 | bottom: 0px; 53 | margin: 0 auto; 54 | /* z-index: -1; */ 55 | /* background-color:cadetblue; */ 56 | } 57 | 58 | .gaugeMotorRight{ 59 | position: absolute; 60 | right: 0px; 61 | } 62 | 63 | .gaugeMotorLeft, 64 | .gaugeMotorRight{ 65 | width: 300px; 66 | height: 200px; 67 | bottom: 15%; 68 | /* background-color: rebeccapurple; */ 69 | } 70 | 71 | .footer { 72 | position: absolute; 73 | width: 100%; 74 | height: 50px; 75 | left: 0px; 76 | bottom: 0px; 77 | background-color: #080808; 78 | opacity: 0.75; 79 | filter: alpha(opacity=75); 80 | 81 | /* saw it in https://www.w3schools.com/howto/howto_css_button_group.asp */ 82 | padding: 1px 24px; /* Some padding */ 83 | cursor: pointer; /* Pointer/hand icon */ 84 | float: left; /* Float the buttons side by side */ 85 | } 86 | 87 | /* By ID */ 88 | 89 | #spanTitle { 90 | margin: 0 auto; 91 | font-size: 30px; 92 | } 93 | 94 | #spanConnection { 95 | font-size: 16px; 96 | margin: 0 auto; 97 | } 98 | 99 | #spanCamera { 100 | position: absolute; 101 | left: 0px; 102 | top: 20px; 103 | width: 100%; 104 | height: 20px; 105 | text-align: center; 106 | font-size: 20px; 107 | margin: 0 auto; 108 | /* background-color:burlywood; */ 109 | } 110 | 111 | #canvasCameraQQVGA { 112 | position: absolute; 113 | width: 160px; 114 | height: 120px; 115 | left: 0px; 116 | top: 0px; 117 | visibility: hidden; 118 | } 119 | 120 | #canvasCameraDisplay { 121 | position: absolute; 122 | top: 0px; 123 | left: 50%; 124 | -webkit-transform: translateX(-50%); 125 | transform: translateX(-50%); 126 | z-index: -1; 127 | margin: 0 auto; 128 | border-style: dotted; 129 | border-color: #545454; 130 | /* background-color: rebeccapurple; */ 131 | } 132 | 133 | #spanJoystickMotorHeader { 134 | position: absolute; 135 | top: 0px; 136 | width: 100%; 137 | height: 10%; 138 | text-align: center; 139 | margin: 0 auto; 140 | /* background-color:burlywood; */ 141 | } 142 | 143 | #spanJoystickMotorFooter { 144 | position: absolute; 145 | bottom: 0px; 146 | width: 100%; 147 | height: 10%; 148 | text-align: center; 149 | margin: 0 auto; 150 | /* background-color:burlywood; */ 151 | } 152 | 153 | #canvasGaugeMotorLeft { 154 | position: absolute; 155 | left: 0px; 156 | top: 0px; 157 | width: 100%; 158 | height: 100%; 159 | margin: 0 auto; 160 | } 161 | 162 | #spanMotorLeft { 163 | position: absolute; 164 | left: 0%; 165 | top: 50%; 166 | } 167 | 168 | #spanMotorLeftSpeed { 169 | position: absolute; 170 | left: 50%; 171 | top: 50%; 172 | } 173 | 174 | #canvasGaugeMotorRight { 175 | position: absolute; 176 | left: 0px; 177 | top: 0px; 178 | width: 100%; 179 | height: 100%; 180 | margin: 0 auto; 181 | } 182 | 183 | #spanMotorRight { 184 | position: absolute; 185 | left: 0%; 186 | top: 50%; 187 | } 188 | 189 | #spanMotorRightSpeed { 190 | position: absolute; 191 | left: 50%; 192 | top: 50%; 193 | /* background-color:burlywood; */ 194 | } 195 | 196 | #spanMotorLeft, 197 | #spanMotorLeftSpeed, 198 | #spanMotorRight, 199 | #spanMotorRightSpeed { 200 | width: 50%; 201 | height: 16px; 202 | /* color: #D9D9D9; */ 203 | text-align: center; 204 | font-size: 16px; 205 | margin: 0 auto; 206 | } 207 | 208 | #imgCameraOnOff { 209 | position: absolute; 210 | /* width: 64px; 211 | height: 64px; */ 212 | right: 10px; 213 | top: 0px; 214 | visibility: hidden; 215 | } 216 | 217 | #imgFast, 218 | #imgSlow, 219 | #imgLights, 220 | #imgReset, 221 | #imgExit { 222 | width: 48px; 223 | height: 48px; 224 | /* padding: 0px 5px; */ 225 | } 226 | #imgSpacer { 227 | width: 24px; 228 | height: 48px; 229 | /* padding: 0px 5px; */ 230 | } 231 | 232 | #spanSpeedMode { 233 | width: 48px; 234 | height: 48px; 235 | text-align: center; 236 | } 237 | 238 | /* Text effect */ 239 | 240 | #spanTitle, 241 | #spanConnection, 242 | #spanJoystickMotorHeader, 243 | #spanJoystickMotorHeaderFooter, 244 | #spanCamera, 245 | #spanSpeedMode, 246 | #spanMotorLeft, 247 | #spanMotorLeftSpeed, 248 | #spanMotorRight, 249 | #spanMotorRightSpeed { 250 | color: black; 251 | /* Text shadow saw in: https://stackoverflow.com/questions/13426875/text-border-using-css-border-around-text */ 252 | /* text-shadow: 1px 0 0 #fff, -1px 0 0 #fff, 0 1px 0 #fff, 0 -1px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff; */ 253 | text-shadow: 1px 0 0 #D9D9D9, -1px 0 0 #D9D9D9, 0 1px 0 #D9D9D9, 0 -1px 0 #D9D9D9, 1px 1px #D9D9D9, -1px -1px 0 #D9D9D9, 1px -1px 0 #D9D9D9, -1px 1px 0 #D9D9D9; 254 | } -------------------------------------------------------------------------------- /src/ESPlorerI_v1/data/www/.history/style_20190105133153.css: -------------------------------------------------------------------------------- 1 | /* Style for ESPlorer I web page */ 2 | 3 | /* By Tag */ 4 | 5 | body { 6 | background-color: #212121; 7 | } 8 | 9 | /* By class */ 10 | 11 | .header { 12 | margin: 0 auto; 13 | text-align: center; 14 | } 15 | 16 | .title { 17 | position: absolute; 18 | left: 0px; 19 | width: 100%; 20 | text-align: center; 21 | margin: 0 auto; 22 | background-color:#080808; 23 | } 24 | 25 | .camera 26 | { 27 | position: absolute; 28 | width: 100%; 29 | max-width: 800px; 30 | height: 10px; 31 | top: 60px; 32 | left: 50%; 33 | -webkit-transform: translateX(-50%); 34 | transform: translateX(-50%); 35 | margin: 0 auto; 36 | /* background-color: rebeccapurple; */ 37 | } 38 | 39 | .gaugeMotorLeft { 40 | position: absolute; 41 | left: 0px; 42 | } 43 | 44 | .joystickMotor { 45 | position: absolute; 46 | width: 75%; 47 | height: 45%; 48 | max-height: 500px; 49 | left: 50%; 50 | -webkit-transform: translateX(-50%); 51 | transform: translateX(-50%); 52 | bottom: 0px; 53 | margin: 0 auto; 54 | /* z-index: -1; */ 55 | /* background-color:cadetblue; */ 56 | } 57 | 58 | .gaugeMotorRight{ 59 | position: absolute; 60 | right: 0px; 61 | } 62 | 63 | .gaugeMotorLeft, 64 | .gaugeMotorRight{ 65 | width: 300px; 66 | height: 200px; 67 | bottom: 15%; 68 | /* background-color: rebeccapurple; */ 69 | } 70 | 71 | .footer { 72 | position: absolute; 73 | width: 100%; 74 | height: 50px; 75 | left: 0px; 76 | bottom: 0px; 77 | background-color: #080808; 78 | opacity: 0.75; 79 | filter: alpha(opacity=75); 80 | 81 | /* saw it in https://www.w3schools.com/howto/howto_css_button_group.asp */ 82 | padding: 1px 24px; /* Some padding */ 83 | cursor: pointer; /* Pointer/hand icon */ 84 | float: left; /* Float the buttons side by side */ 85 | } 86 | 87 | /* By ID */ 88 | 89 | #spanTitle { 90 | font-size: 30px; 91 | margin: 0 auto; 92 | } 93 | 94 | #spanConnection { 95 | font-size: 16px; 96 | margin: 0 auto; 97 | } 98 | 99 | #spanCamera { 100 | position: absolute; 101 | left: 0px; 102 | top: 20px; 103 | width: 100%; 104 | height: 20px; 105 | text-align: center; 106 | font-size: 20px; 107 | margin: 0 auto; 108 | /* background-color:burlywood; */ 109 | } 110 | 111 | #canvasCameraQQVGA { 112 | position: absolute; 113 | width: 160px; 114 | height: 120px; 115 | left: 0px; 116 | top: 0px; 117 | visibility: hidden; 118 | } 119 | 120 | #canvasCameraDisplay { 121 | position: absolute; 122 | top: 0px; 123 | left: 50%; 124 | -webkit-transform: translateX(-50%); 125 | transform: translateX(-50%); 126 | z-index: -1; 127 | margin: 0 auto; 128 | border-style: dotted; 129 | border-color: #545454; 130 | /* background-color: rebeccapurple; */ 131 | } 132 | 133 | #spanJoystickMotorHeader { 134 | position: absolute; 135 | top: 0px; 136 | width: 100%; 137 | height: 10%; 138 | text-align: center; 139 | margin: 0 auto; 140 | /* background-color:burlywood; */ 141 | } 142 | 143 | #spanJoystickMotorFooter { 144 | position: absolute; 145 | bottom: 0px; 146 | width: 100%; 147 | height: 10%; 148 | text-align: center; 149 | margin: 0 auto; 150 | /* background-color:burlywood; */ 151 | } 152 | 153 | #canvasGaugeMotorLeft { 154 | position: absolute; 155 | left: 0px; 156 | top: 0px; 157 | width: 100%; 158 | height: 100%; 159 | margin: 0 auto; 160 | } 161 | 162 | #spanMotorLeft { 163 | position: absolute; 164 | left: 0%; 165 | top: 50%; 166 | } 167 | 168 | #spanMotorLeftSpeed { 169 | position: absolute; 170 | left: 50%; 171 | top: 50%; 172 | } 173 | 174 | #canvasGaugeMotorRight { 175 | position: absolute; 176 | left: 0px; 177 | top: 0px; 178 | width: 100%; 179 | height: 100%; 180 | margin: 0 auto; 181 | } 182 | 183 | #spanMotorRight { 184 | position: absolute; 185 | left: 0%; 186 | top: 50%; 187 | } 188 | 189 | #spanMotorRightSpeed { 190 | position: absolute; 191 | left: 50%; 192 | top: 50%; 193 | /* background-color:burlywood; */ 194 | } 195 | 196 | #spanMotorLeft, 197 | #spanMotorLeftSpeed, 198 | #spanMotorRight, 199 | #spanMotorRightSpeed { 200 | width: 50%; 201 | height: 16px; 202 | /* color: #D9D9D9; */ 203 | text-align: center; 204 | font-size: 16px; 205 | margin: 0 auto; 206 | } 207 | 208 | #imgCameraOnOff { 209 | position: absolute; 210 | /* width: 64px; 211 | height: 64px; */ 212 | right: 10px; 213 | top: 0px; 214 | visibility: hidden; 215 | } 216 | 217 | #imgFast, 218 | #imgSlow, 219 | #imgLights, 220 | #imgReset, 221 | #imgExit { 222 | width: 48px; 223 | height: 48px; 224 | /* padding: 0px 5px; */ 225 | } 226 | #imgSpacer { 227 | width: 24px; 228 | height: 48px; 229 | /* padding: 0px 5px; */ 230 | } 231 | 232 | #spanSpeedMode { 233 | width: 48px; 234 | height: 48px; 235 | text-align: center; 236 | } 237 | 238 | /* Text effect */ 239 | 240 | #spanTitle, 241 | #spanConnection, 242 | #spanJoystickMotorHeader, 243 | #spanJoystickMotorHeaderFooter, 244 | #spanCamera, 245 | #spanSpeedMode, 246 | #spanMotorLeft, 247 | #spanMotorLeftSpeed, 248 | #spanMotorRight, 249 | #spanMotorRightSpeed { 250 | color: black; 251 | /* Text shadow saw in: https://stackoverflow.com/questions/13426875/text-border-using-css-border-around-text */ 252 | /* text-shadow: 1px 0 0 #fff, -1px 0 0 #fff, 0 1px 0 #fff, 0 -1px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff; */ 253 | text-shadow: 1px 0 0 #D9D9D9, -1px 0 0 #D9D9D9, 0 1px 0 #D9D9D9, 0 -1px 0 #D9D9D9, 1px 1px #D9D9D9, -1px -1px 0 #D9D9D9, 1px -1px 0 #D9D9D9, -1px 1px 0 #D9D9D9; 254 | } -------------------------------------------------------------------------------- /src/ESPlorerI_v1/data/www/.history/style_20190105133252.css: -------------------------------------------------------------------------------- 1 | /* Style for ESPlorer I web page */ 2 | 3 | /* By Tag */ 4 | 5 | body { 6 | background-color: #212121; 7 | } 8 | 9 | /* By class */ 10 | 11 | .header { 12 | margin: 0 auto; 13 | text-align: center; 14 | } 15 | 16 | .title { 17 | position: absolute; 18 | left: 0px; 19 | width: 100%; 20 | text-align: center; 21 | margin: 0 auto; 22 | background-color:#080808; 23 | } 24 | 25 | .camera 26 | { 27 | position: absolute; 28 | width: 100%; 29 | max-width: 800px; 30 | height: 10px; 31 | top: 60px; 32 | left: 50%; 33 | -webkit-transform: translateX(-50%); 34 | transform: translateX(-50%); 35 | margin: 0 auto; 36 | /* background-color: rebeccapurple; */ 37 | } 38 | 39 | .gaugeMotorLeft { 40 | position: absolute; 41 | left: 0px; 42 | } 43 | 44 | .joystickMotor { 45 | position: absolute; 46 | width: 75%; 47 | height: 45%; 48 | max-height: 500px; 49 | left: 50%; 50 | -webkit-transform: translateX(-50%); 51 | transform: translateX(-50%); 52 | bottom: 0px; 53 | margin: 0 auto; 54 | /* z-index: -1; */ 55 | /* background-color:cadetblue; */ 56 | } 57 | 58 | .gaugeMotorRight{ 59 | position: absolute; 60 | right: 0px; 61 | } 62 | 63 | .gaugeMotorLeft, 64 | .gaugeMotorRight{ 65 | width: 300px; 66 | height: 200px; 67 | bottom: 15%; 68 | /* background-color: rebeccapurple; */ 69 | } 70 | 71 | .footer { 72 | position: absolute; 73 | width: 100%; 74 | height: 50px; 75 | left: 0px; 76 | bottom: 0px; 77 | background-color: #080808; 78 | opacity: 0.75; 79 | filter: alpha(opacity=75); 80 | 81 | /* saw it in https://www.w3schools.com/howto/howto_css_button_group.asp */ 82 | padding: 1px 24px; /* Some padding */ 83 | cursor: pointer; /* Pointer/hand icon */ 84 | float: left; /* Float the buttons side by side */ 85 | } 86 | 87 | /* By ID */ 88 | 89 | #spanTitle { 90 | font-size: 30px; 91 | margin: 0 auto; 92 | } 93 | 94 | #spanConnection { 95 | position: absolute; 96 | right: 0px; 97 | font-size: 16px; 98 | margin: 0 auto; 99 | } 100 | 101 | #spanCamera { 102 | position: absolute; 103 | left: 0px; 104 | top: 20px; 105 | width: 100%; 106 | height: 20px; 107 | text-align: center; 108 | font-size: 20px; 109 | margin: 0 auto; 110 | /* background-color:burlywood; */ 111 | } 112 | 113 | #canvasCameraQQVGA { 114 | position: absolute; 115 | width: 160px; 116 | height: 120px; 117 | left: 0px; 118 | top: 0px; 119 | visibility: hidden; 120 | } 121 | 122 | #canvasCameraDisplay { 123 | position: absolute; 124 | top: 0px; 125 | left: 50%; 126 | -webkit-transform: translateX(-50%); 127 | transform: translateX(-50%); 128 | z-index: -1; 129 | margin: 0 auto; 130 | border-style: dotted; 131 | border-color: #545454; 132 | /* background-color: rebeccapurple; */ 133 | } 134 | 135 | #spanJoystickMotorHeader { 136 | position: absolute; 137 | top: 0px; 138 | width: 100%; 139 | height: 10%; 140 | text-align: center; 141 | margin: 0 auto; 142 | /* background-color:burlywood; */ 143 | } 144 | 145 | #spanJoystickMotorFooter { 146 | position: absolute; 147 | bottom: 0px; 148 | width: 100%; 149 | height: 10%; 150 | text-align: center; 151 | margin: 0 auto; 152 | /* background-color:burlywood; */ 153 | } 154 | 155 | #canvasGaugeMotorLeft { 156 | position: absolute; 157 | left: 0px; 158 | top: 0px; 159 | width: 100%; 160 | height: 100%; 161 | margin: 0 auto; 162 | } 163 | 164 | #spanMotorLeft { 165 | position: absolute; 166 | left: 0%; 167 | top: 50%; 168 | } 169 | 170 | #spanMotorLeftSpeed { 171 | position: absolute; 172 | left: 50%; 173 | top: 50%; 174 | } 175 | 176 | #canvasGaugeMotorRight { 177 | position: absolute; 178 | left: 0px; 179 | top: 0px; 180 | width: 100%; 181 | height: 100%; 182 | margin: 0 auto; 183 | } 184 | 185 | #spanMotorRight { 186 | position: absolute; 187 | left: 0%; 188 | top: 50%; 189 | } 190 | 191 | #spanMotorRightSpeed { 192 | position: absolute; 193 | left: 50%; 194 | top: 50%; 195 | /* background-color:burlywood; */ 196 | } 197 | 198 | #spanMotorLeft, 199 | #spanMotorLeftSpeed, 200 | #spanMotorRight, 201 | #spanMotorRightSpeed { 202 | width: 50%; 203 | height: 16px; 204 | /* color: #D9D9D9; */ 205 | text-align: center; 206 | font-size: 16px; 207 | margin: 0 auto; 208 | } 209 | 210 | #imgCameraOnOff { 211 | position: absolute; 212 | /* width: 64px; 213 | height: 64px; */ 214 | right: 10px; 215 | top: 0px; 216 | visibility: hidden; 217 | } 218 | 219 | #imgFast, 220 | #imgSlow, 221 | #imgLights, 222 | #imgReset, 223 | #imgExit { 224 | width: 48px; 225 | height: 48px; 226 | /* padding: 0px 5px; */ 227 | } 228 | #imgSpacer { 229 | width: 24px; 230 | height: 48px; 231 | /* padding: 0px 5px; */ 232 | } 233 | 234 | #spanSpeedMode { 235 | width: 48px; 236 | height: 48px; 237 | text-align: center; 238 | } 239 | 240 | /* Text effect */ 241 | 242 | #spanTitle, 243 | #spanConnection, 244 | #spanJoystickMotorHeader, 245 | #spanJoystickMotorHeaderFooter, 246 | #spanCamera, 247 | #spanSpeedMode, 248 | #spanMotorLeft, 249 | #spanMotorLeftSpeed, 250 | #spanMotorRight, 251 | #spanMotorRightSpeed { 252 | color: black; 253 | /* Text shadow saw in: https://stackoverflow.com/questions/13426875/text-border-using-css-border-around-text */ 254 | /* text-shadow: 1px 0 0 #fff, -1px 0 0 #fff, 0 1px 0 #fff, 0 -1px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff; */ 255 | text-shadow: 1px 0 0 #D9D9D9, -1px 0 0 #D9D9D9, 0 1px 0 #D9D9D9, 0 -1px 0 #D9D9D9, 1px 1px #D9D9D9, -1px -1px 0 #D9D9D9, 1px -1px 0 #D9D9D9, -1px 1px 0 #D9D9D9; 256 | } -------------------------------------------------------------------------------- /src/ESPlorerI_v1/data/www/.history/style_20190105133336.css: -------------------------------------------------------------------------------- 1 | /* Style for ESPlorer I web page */ 2 | 3 | /* By Tag */ 4 | 5 | body { 6 | background-color: #212121; 7 | } 8 | 9 | /* By class */ 10 | 11 | .header { 12 | margin: 0 auto; 13 | text-align: center; 14 | } 15 | 16 | .title { 17 | position: absolute; 18 | left: 0px; 19 | width: 100%; 20 | text-align: center; 21 | margin: 0 auto; 22 | background-color:#080808; 23 | } 24 | 25 | .camera 26 | { 27 | position: absolute; 28 | width: 100%; 29 | max-width: 800px; 30 | height: 10px; 31 | top: 60px; 32 | left: 50%; 33 | -webkit-transform: translateX(-50%); 34 | transform: translateX(-50%); 35 | margin: 0 auto; 36 | /* background-color: rebeccapurple; */ 37 | } 38 | 39 | .gaugeMotorLeft { 40 | position: absolute; 41 | left: 0px; 42 | } 43 | 44 | .joystickMotor { 45 | position: absolute; 46 | width: 75%; 47 | height: 45%; 48 | max-height: 500px; 49 | left: 50%; 50 | -webkit-transform: translateX(-50%); 51 | transform: translateX(-50%); 52 | bottom: 0px; 53 | margin: 0 auto; 54 | /* z-index: -1; */ 55 | /* background-color:cadetblue; */ 56 | } 57 | 58 | .gaugeMotorRight{ 59 | position: absolute; 60 | right: 0px; 61 | } 62 | 63 | .gaugeMotorLeft, 64 | .gaugeMotorRight{ 65 | width: 300px; 66 | height: 200px; 67 | bottom: 15%; 68 | /* background-color: rebeccapurple; */ 69 | } 70 | 71 | .footer { 72 | position: absolute; 73 | width: 100%; 74 | height: 50px; 75 | left: 0px; 76 | bottom: 0px; 77 | background-color: #080808; 78 | opacity: 0.75; 79 | filter: alpha(opacity=75); 80 | 81 | /* saw it in https://www.w3schools.com/howto/howto_css_button_group.asp */ 82 | padding: 1px 24px; /* Some padding */ 83 | cursor: pointer; /* Pointer/hand icon */ 84 | float: left; /* Float the buttons side by side */ 85 | } 86 | 87 | /* By ID */ 88 | 89 | #spanTitle { 90 | font-size: 30px; 91 | margin: 0 auto; 92 | } 93 | 94 | #spanConnection { 95 | position: absolute; 96 | left: 0px; 97 | top: 22px; 98 | font-size: 16px; 99 | margin: 0 auto; 100 | } 101 | 102 | #spanCamera { 103 | position: absolute; 104 | left: 0px; 105 | top: 20px; 106 | width: 100%; 107 | height: 20px; 108 | text-align: center; 109 | font-size: 20px; 110 | margin: 0 auto; 111 | /* background-color:burlywood; */ 112 | } 113 | 114 | #canvasCameraQQVGA { 115 | position: absolute; 116 | width: 160px; 117 | height: 120px; 118 | left: 0px; 119 | top: 0px; 120 | visibility: hidden; 121 | } 122 | 123 | #canvasCameraDisplay { 124 | position: absolute; 125 | top: 0px; 126 | left: 50%; 127 | -webkit-transform: translateX(-50%); 128 | transform: translateX(-50%); 129 | z-index: -1; 130 | margin: 0 auto; 131 | border-style: dotted; 132 | border-color: #545454; 133 | /* background-color: rebeccapurple; */ 134 | } 135 | 136 | #spanJoystickMotorHeader { 137 | position: absolute; 138 | top: 0px; 139 | width: 100%; 140 | height: 10%; 141 | text-align: center; 142 | margin: 0 auto; 143 | /* background-color:burlywood; */ 144 | } 145 | 146 | #spanJoystickMotorFooter { 147 | position: absolute; 148 | bottom: 0px; 149 | width: 100%; 150 | height: 10%; 151 | text-align: center; 152 | margin: 0 auto; 153 | /* background-color:burlywood; */ 154 | } 155 | 156 | #canvasGaugeMotorLeft { 157 | position: absolute; 158 | left: 0px; 159 | top: 0px; 160 | width: 100%; 161 | height: 100%; 162 | margin: 0 auto; 163 | } 164 | 165 | #spanMotorLeft { 166 | position: absolute; 167 | left: 0%; 168 | top: 50%; 169 | } 170 | 171 | #spanMotorLeftSpeed { 172 | position: absolute; 173 | left: 50%; 174 | top: 50%; 175 | } 176 | 177 | #canvasGaugeMotorRight { 178 | position: absolute; 179 | left: 0px; 180 | top: 0px; 181 | width: 100%; 182 | height: 100%; 183 | margin: 0 auto; 184 | } 185 | 186 | #spanMotorRight { 187 | position: absolute; 188 | left: 0%; 189 | top: 50%; 190 | } 191 | 192 | #spanMotorRightSpeed { 193 | position: absolute; 194 | left: 50%; 195 | top: 50%; 196 | /* background-color:burlywood; */ 197 | } 198 | 199 | #spanMotorLeft, 200 | #spanMotorLeftSpeed, 201 | #spanMotorRight, 202 | #spanMotorRightSpeed { 203 | width: 50%; 204 | height: 16px; 205 | /* color: #D9D9D9; */ 206 | text-align: center; 207 | font-size: 16px; 208 | margin: 0 auto; 209 | } 210 | 211 | #imgCameraOnOff { 212 | position: absolute; 213 | /* width: 64px; 214 | height: 64px; */ 215 | right: 10px; 216 | top: 0px; 217 | visibility: hidden; 218 | } 219 | 220 | #imgFast, 221 | #imgSlow, 222 | #imgLights, 223 | #imgReset, 224 | #imgExit { 225 | width: 48px; 226 | height: 48px; 227 | /* padding: 0px 5px; */ 228 | } 229 | #imgSpacer { 230 | width: 24px; 231 | height: 48px; 232 | /* padding: 0px 5px; */ 233 | } 234 | 235 | #spanSpeedMode { 236 | width: 48px; 237 | height: 48px; 238 | text-align: center; 239 | } 240 | 241 | /* Text effect */ 242 | 243 | #spanTitle, 244 | #spanConnection, 245 | #spanJoystickMotorHeader, 246 | #spanJoystickMotorHeaderFooter, 247 | #spanCamera, 248 | #spanSpeedMode, 249 | #spanMotorLeft, 250 | #spanMotorLeftSpeed, 251 | #spanMotorRight, 252 | #spanMotorRightSpeed { 253 | color: black; 254 | /* Text shadow saw in: https://stackoverflow.com/questions/13426875/text-border-using-css-border-around-text */ 255 | /* text-shadow: 1px 0 0 #fff, -1px 0 0 #fff, 0 1px 0 #fff, 0 -1px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff; */ 256 | text-shadow: 1px 0 0 #D9D9D9, -1px 0 0 #D9D9D9, 0 1px 0 #D9D9D9, 0 -1px 0 #D9D9D9, 1px 1px #D9D9D9, -1px -1px 0 #D9D9D9, 1px -1px 0 #D9D9D9, -1px 1px 0 #D9D9D9; 257 | } -------------------------------------------------------------------------------- /src/ESPlorerI_v1/data/www/.history/style_20190105133355.css: -------------------------------------------------------------------------------- 1 | /* Style for ESPlorer I web page */ 2 | 3 | /* By Tag */ 4 | 5 | body { 6 | background-color: #212121; 7 | } 8 | 9 | /* By class */ 10 | 11 | .header { 12 | margin: 0 auto; 13 | text-align: center; 14 | } 15 | 16 | .title { 17 | position: absolute; 18 | left: 0px; 19 | width: 100%; 20 | text-align: center; 21 | margin: 0 auto; 22 | background-color:#080808; 23 | } 24 | 25 | .camera 26 | { 27 | position: absolute; 28 | width: 100%; 29 | max-width: 800px; 30 | height: 10px; 31 | top: 60px; 32 | left: 50%; 33 | -webkit-transform: translateX(-50%); 34 | transform: translateX(-50%); 35 | margin: 0 auto; 36 | /* background-color: rebeccapurple; */ 37 | } 38 | 39 | .gaugeMotorLeft { 40 | position: absolute; 41 | left: 0px; 42 | } 43 | 44 | .joystickMotor { 45 | position: absolute; 46 | width: 75%; 47 | height: 45%; 48 | max-height: 500px; 49 | left: 50%; 50 | -webkit-transform: translateX(-50%); 51 | transform: translateX(-50%); 52 | bottom: 0px; 53 | margin: 0 auto; 54 | /* z-index: -1; */ 55 | /* background-color:cadetblue; */ 56 | } 57 | 58 | .gaugeMotorRight{ 59 | position: absolute; 60 | right: 0px; 61 | } 62 | 63 | .gaugeMotorLeft, 64 | .gaugeMotorRight{ 65 | width: 300px; 66 | height: 200px; 67 | bottom: 15%; 68 | /* background-color: rebeccapurple; */ 69 | } 70 | 71 | .footer { 72 | position: absolute; 73 | width: 100%; 74 | height: 50px; 75 | left: 0px; 76 | bottom: 0px; 77 | background-color: #080808; 78 | opacity: 0.75; 79 | filter: alpha(opacity=75); 80 | 81 | /* saw it in https://www.w3schools.com/howto/howto_css_button_group.asp */ 82 | padding: 1px 24px; /* Some padding */ 83 | cursor: pointer; /* Pointer/hand icon */ 84 | float: left; /* Float the buttons side by side */ 85 | } 86 | 87 | /* By ID */ 88 | 89 | #spanTitle { 90 | font-size: 30px; 91 | margin: 0 auto; 92 | } 93 | 94 | #spanConnection { 95 | position: absolute; 96 | left: 0px; 97 | top: 22px; 98 | text-align: center; 99 | font-size: 16px; 100 | margin: 0 auto; 101 | } 102 | 103 | #spanCamera { 104 | position: absolute; 105 | left: 0px; 106 | top: 20px; 107 | width: 100%; 108 | height: 20px; 109 | text-align: center; 110 | font-size: 20px; 111 | margin: 0 auto; 112 | /* background-color:burlywood; */ 113 | } 114 | 115 | #canvasCameraQQVGA { 116 | position: absolute; 117 | width: 160px; 118 | height: 120px; 119 | left: 0px; 120 | top: 0px; 121 | visibility: hidden; 122 | } 123 | 124 | #canvasCameraDisplay { 125 | position: absolute; 126 | top: 0px; 127 | left: 50%; 128 | -webkit-transform: translateX(-50%); 129 | transform: translateX(-50%); 130 | z-index: -1; 131 | margin: 0 auto; 132 | border-style: dotted; 133 | border-color: #545454; 134 | /* background-color: rebeccapurple; */ 135 | } 136 | 137 | #spanJoystickMotorHeader { 138 | position: absolute; 139 | top: 0px; 140 | width: 100%; 141 | height: 10%; 142 | text-align: center; 143 | margin: 0 auto; 144 | /* background-color:burlywood; */ 145 | } 146 | 147 | #spanJoystickMotorFooter { 148 | position: absolute; 149 | bottom: 0px; 150 | width: 100%; 151 | height: 10%; 152 | text-align: center; 153 | margin: 0 auto; 154 | /* background-color:burlywood; */ 155 | } 156 | 157 | #canvasGaugeMotorLeft { 158 | position: absolute; 159 | left: 0px; 160 | top: 0px; 161 | width: 100%; 162 | height: 100%; 163 | margin: 0 auto; 164 | } 165 | 166 | #spanMotorLeft { 167 | position: absolute; 168 | left: 0%; 169 | top: 50%; 170 | } 171 | 172 | #spanMotorLeftSpeed { 173 | position: absolute; 174 | left: 50%; 175 | top: 50%; 176 | } 177 | 178 | #canvasGaugeMotorRight { 179 | position: absolute; 180 | left: 0px; 181 | top: 0px; 182 | width: 100%; 183 | height: 100%; 184 | margin: 0 auto; 185 | } 186 | 187 | #spanMotorRight { 188 | position: absolute; 189 | left: 0%; 190 | top: 50%; 191 | } 192 | 193 | #spanMotorRightSpeed { 194 | position: absolute; 195 | left: 50%; 196 | top: 50%; 197 | /* background-color:burlywood; */ 198 | } 199 | 200 | #spanMotorLeft, 201 | #spanMotorLeftSpeed, 202 | #spanMotorRight, 203 | #spanMotorRightSpeed { 204 | width: 50%; 205 | height: 16px; 206 | /* color: #D9D9D9; */ 207 | text-align: center; 208 | font-size: 16px; 209 | margin: 0 auto; 210 | } 211 | 212 | #imgCameraOnOff { 213 | position: absolute; 214 | /* width: 64px; 215 | height: 64px; */ 216 | right: 10px; 217 | top: 0px; 218 | visibility: hidden; 219 | } 220 | 221 | #imgFast, 222 | #imgSlow, 223 | #imgLights, 224 | #imgReset, 225 | #imgExit { 226 | width: 48px; 227 | height: 48px; 228 | /* padding: 0px 5px; */ 229 | } 230 | #imgSpacer { 231 | width: 24px; 232 | height: 48px; 233 | /* padding: 0px 5px; */ 234 | } 235 | 236 | #spanSpeedMode { 237 | width: 48px; 238 | height: 48px; 239 | text-align: center; 240 | } 241 | 242 | /* Text effect */ 243 | 244 | #spanTitle, 245 | #spanConnection, 246 | #spanJoystickMotorHeader, 247 | #spanJoystickMotorHeaderFooter, 248 | #spanCamera, 249 | #spanSpeedMode, 250 | #spanMotorLeft, 251 | #spanMotorLeftSpeed, 252 | #spanMotorRight, 253 | #spanMotorRightSpeed { 254 | color: black; 255 | /* Text shadow saw in: https://stackoverflow.com/questions/13426875/text-border-using-css-border-around-text */ 256 | /* text-shadow: 1px 0 0 #fff, -1px 0 0 #fff, 0 1px 0 #fff, 0 -1px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff; */ 257 | text-shadow: 1px 0 0 #D9D9D9, -1px 0 0 #D9D9D9, 0 1px 0 #D9D9D9, 0 -1px 0 #D9D9D9, 1px 1px #D9D9D9, -1px -1px 0 #D9D9D9, 1px -1px 0 #D9D9D9, -1px 1px 0 #D9D9D9; 258 | } -------------------------------------------------------------------------------- /src/ESPlorerI_v1/data/www/.history/style_20190105133404.css: -------------------------------------------------------------------------------- 1 | /* Style for ESPlorer I web page */ 2 | 3 | /* By Tag */ 4 | 5 | body { 6 | background-color: #212121; 7 | } 8 | 9 | /* By class */ 10 | 11 | .header { 12 | margin: 0 auto; 13 | text-align: center; 14 | } 15 | 16 | .title { 17 | position: absolute; 18 | left: 0px; 19 | width: 100%; 20 | text-align: center; 21 | margin: 0 auto; 22 | background-color:#080808; 23 | } 24 | 25 | .camera 26 | { 27 | position: absolute; 28 | width: 100%; 29 | max-width: 800px; 30 | height: 10px; 31 | top: 60px; 32 | left: 50%; 33 | -webkit-transform: translateX(-50%); 34 | transform: translateX(-50%); 35 | margin: 0 auto; 36 | /* background-color: rebeccapurple; */ 37 | } 38 | 39 | .gaugeMotorLeft { 40 | position: absolute; 41 | left: 0px; 42 | } 43 | 44 | .joystickMotor { 45 | position: absolute; 46 | width: 75%; 47 | height: 45%; 48 | max-height: 500px; 49 | left: 50%; 50 | -webkit-transform: translateX(-50%); 51 | transform: translateX(-50%); 52 | bottom: 0px; 53 | margin: 0 auto; 54 | /* z-index: -1; */ 55 | /* background-color:cadetblue; */ 56 | } 57 | 58 | .gaugeMotorRight{ 59 | position: absolute; 60 | right: 0px; 61 | } 62 | 63 | .gaugeMotorLeft, 64 | .gaugeMotorRight{ 65 | width: 300px; 66 | height: 200px; 67 | bottom: 15%; 68 | /* background-color: rebeccapurple; */ 69 | } 70 | 71 | .footer { 72 | position: absolute; 73 | width: 100%; 74 | height: 50px; 75 | left: 0px; 76 | bottom: 0px; 77 | background-color: #080808; 78 | opacity: 0.75; 79 | filter: alpha(opacity=75); 80 | 81 | /* saw it in https://www.w3schools.com/howto/howto_css_button_group.asp */ 82 | padding: 1px 24px; /* Some padding */ 83 | cursor: pointer; /* Pointer/hand icon */ 84 | float: left; /* Float the buttons side by side */ 85 | } 86 | 87 | /* By ID */ 88 | 89 | #spanTitle { 90 | font-size: 30px; 91 | margin: 0 auto; 92 | } 93 | 94 | #spanConnection { 95 | position: absolute; 96 | left: 0px; 97 | top: 22px; 98 | width: 100%; 99 | text-align: center; 100 | font-size: 16px; 101 | margin: 0 auto; 102 | } 103 | 104 | #spanCamera { 105 | position: absolute; 106 | left: 0px; 107 | top: 20px; 108 | width: 100%; 109 | height: 20px; 110 | text-align: center; 111 | font-size: 20px; 112 | margin: 0 auto; 113 | /* background-color:burlywood; */ 114 | } 115 | 116 | #canvasCameraQQVGA { 117 | position: absolute; 118 | width: 160px; 119 | height: 120px; 120 | left: 0px; 121 | top: 0px; 122 | visibility: hidden; 123 | } 124 | 125 | #canvasCameraDisplay { 126 | position: absolute; 127 | top: 0px; 128 | left: 50%; 129 | -webkit-transform: translateX(-50%); 130 | transform: translateX(-50%); 131 | z-index: -1; 132 | margin: 0 auto; 133 | border-style: dotted; 134 | border-color: #545454; 135 | /* background-color: rebeccapurple; */ 136 | } 137 | 138 | #spanJoystickMotorHeader { 139 | position: absolute; 140 | top: 0px; 141 | width: 100%; 142 | height: 10%; 143 | text-align: center; 144 | margin: 0 auto; 145 | /* background-color:burlywood; */ 146 | } 147 | 148 | #spanJoystickMotorFooter { 149 | position: absolute; 150 | bottom: 0px; 151 | width: 100%; 152 | height: 10%; 153 | text-align: center; 154 | margin: 0 auto; 155 | /* background-color:burlywood; */ 156 | } 157 | 158 | #canvasGaugeMotorLeft { 159 | position: absolute; 160 | left: 0px; 161 | top: 0px; 162 | width: 100%; 163 | height: 100%; 164 | margin: 0 auto; 165 | } 166 | 167 | #spanMotorLeft { 168 | position: absolute; 169 | left: 0%; 170 | top: 50%; 171 | } 172 | 173 | #spanMotorLeftSpeed { 174 | position: absolute; 175 | left: 50%; 176 | top: 50%; 177 | } 178 | 179 | #canvasGaugeMotorRight { 180 | position: absolute; 181 | left: 0px; 182 | top: 0px; 183 | width: 100%; 184 | height: 100%; 185 | margin: 0 auto; 186 | } 187 | 188 | #spanMotorRight { 189 | position: absolute; 190 | left: 0%; 191 | top: 50%; 192 | } 193 | 194 | #spanMotorRightSpeed { 195 | position: absolute; 196 | left: 50%; 197 | top: 50%; 198 | /* background-color:burlywood; */ 199 | } 200 | 201 | #spanMotorLeft, 202 | #spanMotorLeftSpeed, 203 | #spanMotorRight, 204 | #spanMotorRightSpeed { 205 | width: 50%; 206 | height: 16px; 207 | /* color: #D9D9D9; */ 208 | text-align: center; 209 | font-size: 16px; 210 | margin: 0 auto; 211 | } 212 | 213 | #imgCameraOnOff { 214 | position: absolute; 215 | /* width: 64px; 216 | height: 64px; */ 217 | right: 10px; 218 | top: 0px; 219 | visibility: hidden; 220 | } 221 | 222 | #imgFast, 223 | #imgSlow, 224 | #imgLights, 225 | #imgReset, 226 | #imgExit { 227 | width: 48px; 228 | height: 48px; 229 | /* padding: 0px 5px; */ 230 | } 231 | #imgSpacer { 232 | width: 24px; 233 | height: 48px; 234 | /* padding: 0px 5px; */ 235 | } 236 | 237 | #spanSpeedMode { 238 | width: 48px; 239 | height: 48px; 240 | text-align: center; 241 | } 242 | 243 | /* Text effect */ 244 | 245 | #spanTitle, 246 | #spanConnection, 247 | #spanJoystickMotorHeader, 248 | #spanJoystickMotorHeaderFooter, 249 | #spanCamera, 250 | #spanSpeedMode, 251 | #spanMotorLeft, 252 | #spanMotorLeftSpeed, 253 | #spanMotorRight, 254 | #spanMotorRightSpeed { 255 | color: black; 256 | /* Text shadow saw in: https://stackoverflow.com/questions/13426875/text-border-using-css-border-around-text */ 257 | /* text-shadow: 1px 0 0 #fff, -1px 0 0 #fff, 0 1px 0 #fff, 0 -1px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff; */ 258 | text-shadow: 1px 0 0 #D9D9D9, -1px 0 0 #D9D9D9, 0 1px 0 #D9D9D9, 0 -1px 0 #D9D9D9, 1px 1px #D9D9D9, -1px -1px 0 #D9D9D9, 1px -1px 0 #D9D9D9, -1px 1px 0 #D9D9D9; 259 | } -------------------------------------------------------------------------------- /src/ESPlorerI_v1/data/www/.history/style_20190105133426.css: -------------------------------------------------------------------------------- 1 | /* Style for ESPlorer I web page */ 2 | 3 | /* By Tag */ 4 | 5 | body { 6 | background-color: #212121; 7 | } 8 | 9 | /* By class */ 10 | 11 | .header { 12 | margin: 0 auto; 13 | text-align: center; 14 | } 15 | 16 | .title { 17 | position: absolute; 18 | left: 0px; 19 | width: 100%; 20 | text-align: center; 21 | margin: 0 auto; 22 | background-color:#080808; 23 | } 24 | 25 | .camera 26 | { 27 | position: absolute; 28 | width: 100%; 29 | max-width: 800px; 30 | height: 10px; 31 | top: 60px; 32 | left: 50%; 33 | -webkit-transform: translateX(-50%); 34 | transform: translateX(-50%); 35 | margin: 0 auto; 36 | /* background-color: rebeccapurple; */ 37 | } 38 | 39 | .gaugeMotorLeft { 40 | position: absolute; 41 | left: 0px; 42 | } 43 | 44 | .joystickMotor { 45 | position: absolute; 46 | width: 75%; 47 | height: 45%; 48 | max-height: 500px; 49 | left: 50%; 50 | -webkit-transform: translateX(-50%); 51 | transform: translateX(-50%); 52 | bottom: 0px; 53 | margin: 0 auto; 54 | /* z-index: -1; */ 55 | /* background-color:cadetblue; */ 56 | } 57 | 58 | .gaugeMotorRight{ 59 | position: absolute; 60 | right: 0px; 61 | } 62 | 63 | .gaugeMotorLeft, 64 | .gaugeMotorRight{ 65 | width: 300px; 66 | height: 200px; 67 | bottom: 15%; 68 | /* background-color: rebeccapurple; */ 69 | } 70 | 71 | .footer { 72 | position: absolute; 73 | width: 100%; 74 | height: 50px; 75 | left: 0px; 76 | bottom: 0px; 77 | background-color: #080808; 78 | opacity: 0.75; 79 | filter: alpha(opacity=75); 80 | 81 | /* saw it in https://www.w3schools.com/howto/howto_css_button_group.asp */ 82 | padding: 1px 24px; /* Some padding */ 83 | cursor: pointer; /* Pointer/hand icon */ 84 | float: left; /* Float the buttons side by side */ 85 | } 86 | 87 | /* By ID */ 88 | 89 | #spanTitle { 90 | font-size: 30px; 91 | left: 0px; 92 | top: 0px; 93 | margin: 0 auto; 94 | } 95 | 96 | #spanConnection { 97 | position: absolute; 98 | left: 0px; 99 | top: 22px; 100 | width: 100%; 101 | text-align: center; 102 | font-size: 16px; 103 | margin: 0 auto; 104 | } 105 | 106 | #spanCamera { 107 | position: absolute; 108 | left: 0px; 109 | top: 20px; 110 | width: 100%; 111 | height: 20px; 112 | text-align: center; 113 | font-size: 20px; 114 | margin: 0 auto; 115 | /* background-color:burlywood; */ 116 | } 117 | 118 | #canvasCameraQQVGA { 119 | position: absolute; 120 | width: 160px; 121 | height: 120px; 122 | left: 0px; 123 | top: 0px; 124 | visibility: hidden; 125 | } 126 | 127 | #canvasCameraDisplay { 128 | position: absolute; 129 | top: 0px; 130 | left: 50%; 131 | -webkit-transform: translateX(-50%); 132 | transform: translateX(-50%); 133 | z-index: -1; 134 | margin: 0 auto; 135 | border-style: dotted; 136 | border-color: #545454; 137 | /* background-color: rebeccapurple; */ 138 | } 139 | 140 | #spanJoystickMotorHeader { 141 | position: absolute; 142 | top: 0px; 143 | width: 100%; 144 | height: 10%; 145 | text-align: center; 146 | margin: 0 auto; 147 | /* background-color:burlywood; */ 148 | } 149 | 150 | #spanJoystickMotorFooter { 151 | position: absolute; 152 | bottom: 0px; 153 | width: 100%; 154 | height: 10%; 155 | text-align: center; 156 | margin: 0 auto; 157 | /* background-color:burlywood; */ 158 | } 159 | 160 | #canvasGaugeMotorLeft { 161 | position: absolute; 162 | left: 0px; 163 | top: 0px; 164 | width: 100%; 165 | height: 100%; 166 | margin: 0 auto; 167 | } 168 | 169 | #spanMotorLeft { 170 | position: absolute; 171 | left: 0%; 172 | top: 50%; 173 | } 174 | 175 | #spanMotorLeftSpeed { 176 | position: absolute; 177 | left: 50%; 178 | top: 50%; 179 | } 180 | 181 | #canvasGaugeMotorRight { 182 | position: absolute; 183 | left: 0px; 184 | top: 0px; 185 | width: 100%; 186 | height: 100%; 187 | margin: 0 auto; 188 | } 189 | 190 | #spanMotorRight { 191 | position: absolute; 192 | left: 0%; 193 | top: 50%; 194 | } 195 | 196 | #spanMotorRightSpeed { 197 | position: absolute; 198 | left: 50%; 199 | top: 50%; 200 | /* background-color:burlywood; */ 201 | } 202 | 203 | #spanMotorLeft, 204 | #spanMotorLeftSpeed, 205 | #spanMotorRight, 206 | #spanMotorRightSpeed { 207 | width: 50%; 208 | height: 16px; 209 | /* color: #D9D9D9; */ 210 | text-align: center; 211 | font-size: 16px; 212 | margin: 0 auto; 213 | } 214 | 215 | #imgCameraOnOff { 216 | position: absolute; 217 | /* width: 64px; 218 | height: 64px; */ 219 | right: 10px; 220 | top: 0px; 221 | visibility: hidden; 222 | } 223 | 224 | #imgFast, 225 | #imgSlow, 226 | #imgLights, 227 | #imgReset, 228 | #imgExit { 229 | width: 48px; 230 | height: 48px; 231 | /* padding: 0px 5px; */ 232 | } 233 | #imgSpacer { 234 | width: 24px; 235 | height: 48px; 236 | /* padding: 0px 5px; */ 237 | } 238 | 239 | #spanSpeedMode { 240 | width: 48px; 241 | height: 48px; 242 | text-align: center; 243 | } 244 | 245 | /* Text effect */ 246 | 247 | #spanTitle, 248 | #spanConnection, 249 | #spanJoystickMotorHeader, 250 | #spanJoystickMotorHeaderFooter, 251 | #spanCamera, 252 | #spanSpeedMode, 253 | #spanMotorLeft, 254 | #spanMotorLeftSpeed, 255 | #spanMotorRight, 256 | #spanMotorRightSpeed { 257 | color: black; 258 | /* Text shadow saw in: https://stackoverflow.com/questions/13426875/text-border-using-css-border-around-text */ 259 | /* text-shadow: 1px 0 0 #fff, -1px 0 0 #fff, 0 1px 0 #fff, 0 -1px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff; */ 260 | text-shadow: 1px 0 0 #D9D9D9, -1px 0 0 #D9D9D9, 0 1px 0 #D9D9D9, 0 -1px 0 #D9D9D9, 1px 1px #D9D9D9, -1px -1px 0 #D9D9D9, 1px -1px 0 #D9D9D9, -1px 1px 0 #D9D9D9; 261 | } -------------------------------------------------------------------------------- /src/ESPlorerI_v1/data/www/.history/style_20190105133437.css: -------------------------------------------------------------------------------- 1 | /* Style for ESPlorer I web page */ 2 | 3 | /* By Tag */ 4 | 5 | body { 6 | background-color: #212121; 7 | } 8 | 9 | /* By class */ 10 | 11 | .header { 12 | margin: 0 auto; 13 | text-align: center; 14 | } 15 | 16 | .title { 17 | position: absolute; 18 | left: 0px; 19 | width: 100%; 20 | text-align: center; 21 | margin: 0 auto; 22 | background-color:#080808; 23 | } 24 | 25 | .camera 26 | { 27 | position: absolute; 28 | width: 100%; 29 | max-width: 800px; 30 | height: 10px; 31 | top: 60px; 32 | left: 50%; 33 | -webkit-transform: translateX(-50%); 34 | transform: translateX(-50%); 35 | margin: 0 auto; 36 | /* background-color: rebeccapurple; */ 37 | } 38 | 39 | .gaugeMotorLeft { 40 | position: absolute; 41 | left: 0px; 42 | } 43 | 44 | .joystickMotor { 45 | position: absolute; 46 | width: 75%; 47 | height: 45%; 48 | max-height: 500px; 49 | left: 50%; 50 | -webkit-transform: translateX(-50%); 51 | transform: translateX(-50%); 52 | bottom: 0px; 53 | margin: 0 auto; 54 | /* z-index: -1; */ 55 | /* background-color:cadetblue; */ 56 | } 57 | 58 | .gaugeMotorRight{ 59 | position: absolute; 60 | right: 0px; 61 | } 62 | 63 | .gaugeMotorLeft, 64 | .gaugeMotorRight{ 65 | width: 300px; 66 | height: 200px; 67 | bottom: 15%; 68 | /* background-color: rebeccapurple; */ 69 | } 70 | 71 | .footer { 72 | position: absolute; 73 | width: 100%; 74 | height: 50px; 75 | left: 0px; 76 | bottom: 0px; 77 | background-color: #080808; 78 | opacity: 0.75; 79 | filter: alpha(opacity=75); 80 | 81 | /* saw it in https://www.w3schools.com/howto/howto_css_button_group.asp */ 82 | padding: 1px 24px; /* Some padding */ 83 | cursor: pointer; /* Pointer/hand icon */ 84 | float: left; /* Float the buttons side by side */ 85 | } 86 | 87 | /* By ID */ 88 | 89 | #spanTitle { 90 | font-size: 30px; 91 | left: 0px; 92 | top: 0px; 93 | margin: 0 auto; 94 | } 95 | 96 | #spanConnection { 97 | position: absolute; 98 | left: 0px; 99 | top: 30px; 100 | width: 100%; 101 | text-align: center; 102 | font-size: 16px; 103 | margin: 0 auto; 104 | } 105 | 106 | #spanCamera { 107 | position: absolute; 108 | left: 0px; 109 | top: 20px; 110 | width: 100%; 111 | height: 20px; 112 | text-align: center; 113 | font-size: 20px; 114 | margin: 0 auto; 115 | /* background-color:burlywood; */ 116 | } 117 | 118 | #canvasCameraQQVGA { 119 | position: absolute; 120 | width: 160px; 121 | height: 120px; 122 | left: 0px; 123 | top: 0px; 124 | visibility: hidden; 125 | } 126 | 127 | #canvasCameraDisplay { 128 | position: absolute; 129 | top: 0px; 130 | left: 50%; 131 | -webkit-transform: translateX(-50%); 132 | transform: translateX(-50%); 133 | z-index: -1; 134 | margin: 0 auto; 135 | border-style: dotted; 136 | border-color: #545454; 137 | /* background-color: rebeccapurple; */ 138 | } 139 | 140 | #spanJoystickMotorHeader { 141 | position: absolute; 142 | top: 0px; 143 | width: 100%; 144 | height: 10%; 145 | text-align: center; 146 | margin: 0 auto; 147 | /* background-color:burlywood; */ 148 | } 149 | 150 | #spanJoystickMotorFooter { 151 | position: absolute; 152 | bottom: 0px; 153 | width: 100%; 154 | height: 10%; 155 | text-align: center; 156 | margin: 0 auto; 157 | /* background-color:burlywood; */ 158 | } 159 | 160 | #canvasGaugeMotorLeft { 161 | position: absolute; 162 | left: 0px; 163 | top: 0px; 164 | width: 100%; 165 | height: 100%; 166 | margin: 0 auto; 167 | } 168 | 169 | #spanMotorLeft { 170 | position: absolute; 171 | left: 0%; 172 | top: 50%; 173 | } 174 | 175 | #spanMotorLeftSpeed { 176 | position: absolute; 177 | left: 50%; 178 | top: 50%; 179 | } 180 | 181 | #canvasGaugeMotorRight { 182 | position: absolute; 183 | left: 0px; 184 | top: 0px; 185 | width: 100%; 186 | height: 100%; 187 | margin: 0 auto; 188 | } 189 | 190 | #spanMotorRight { 191 | position: absolute; 192 | left: 0%; 193 | top: 50%; 194 | } 195 | 196 | #spanMotorRightSpeed { 197 | position: absolute; 198 | left: 50%; 199 | top: 50%; 200 | /* background-color:burlywood; */ 201 | } 202 | 203 | #spanMotorLeft, 204 | #spanMotorLeftSpeed, 205 | #spanMotorRight, 206 | #spanMotorRightSpeed { 207 | width: 50%; 208 | height: 16px; 209 | /* color: #D9D9D9; */ 210 | text-align: center; 211 | font-size: 16px; 212 | margin: 0 auto; 213 | } 214 | 215 | #imgCameraOnOff { 216 | position: absolute; 217 | /* width: 64px; 218 | height: 64px; */ 219 | right: 10px; 220 | top: 0px; 221 | visibility: hidden; 222 | } 223 | 224 | #imgFast, 225 | #imgSlow, 226 | #imgLights, 227 | #imgReset, 228 | #imgExit { 229 | width: 48px; 230 | height: 48px; 231 | /* padding: 0px 5px; */ 232 | } 233 | #imgSpacer { 234 | width: 24px; 235 | height: 48px; 236 | /* padding: 0px 5px; */ 237 | } 238 | 239 | #spanSpeedMode { 240 | width: 48px; 241 | height: 48px; 242 | text-align: center; 243 | } 244 | 245 | /* Text effect */ 246 | 247 | #spanTitle, 248 | #spanConnection, 249 | #spanJoystickMotorHeader, 250 | #spanJoystickMotorHeaderFooter, 251 | #spanCamera, 252 | #spanSpeedMode, 253 | #spanMotorLeft, 254 | #spanMotorLeftSpeed, 255 | #spanMotorRight, 256 | #spanMotorRightSpeed { 257 | color: black; 258 | /* Text shadow saw in: https://stackoverflow.com/questions/13426875/text-border-using-css-border-around-text */ 259 | /* text-shadow: 1px 0 0 #fff, -1px 0 0 #fff, 0 1px 0 #fff, 0 -1px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff; */ 260 | text-shadow: 1px 0 0 #D9D9D9, -1px 0 0 #D9D9D9, 0 1px 0 #D9D9D9, 0 -1px 0 #D9D9D9, 1px 1px #D9D9D9, -1px -1px 0 #D9D9D9, 1px -1px 0 #D9D9D9, -1px 1px 0 #D9D9D9; 261 | } -------------------------------------------------------------------------------- /src/ESPlorerI_v1/data/www/exit.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JoaoLopesF/ESPlorer_v1/587334370774fca154576dddaec0bbfb6897cb9d/src/ESPlorerI_v1/data/www/exit.png -------------------------------------------------------------------------------- /src/ESPlorerI_v1/data/www/fast.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JoaoLopesF/ESPlorer_v1/587334370774fca154576dddaec0bbfb6897cb9d/src/ESPlorerI_v1/data/www/fast.png -------------------------------------------------------------------------------- /src/ESPlorerI_v1/data/www/index.htm: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | ESPlorer I Robot 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | Robot ESPLorer I 18 | 19 |
20 | 21 |
22 | Camera 23 | 24 | 25 |
26 |
27 |
28 | 29 | Left motor 30 | Stop 31 |
32 | 33 |
34 | 35 | Right motor 36 | Stop 37 |
38 | 39 |
40 |
41 | 42 | 1/1 43 | 44 | 45 | 46 | 47 | > 48 | 49 | 50 |
51 | 52 | -------------------------------------------------------------------------------- /src/ESPlorerI_v1/data/www/info.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JoaoLopesF/ESPlorer_v1/587334370774fca154576dddaec0bbfb6897cb9d/src/ESPlorerI_v1/data/www/info.png -------------------------------------------------------------------------------- /src/ESPlorerI_v1/data/www/lights_off.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JoaoLopesF/ESPlorer_v1/587334370774fca154576dddaec0bbfb6897cb9d/src/ESPlorerI_v1/data/www/lights_off.png -------------------------------------------------------------------------------- /src/ESPlorerI_v1/data/www/lights_on.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JoaoLopesF/ESPlorer_v1/587334370774fca154576dddaec0bbfb6897cb9d/src/ESPlorerI_v1/data/www/lights_on.png -------------------------------------------------------------------------------- /src/ESPlorerI_v1/data/www/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "ESPlorer I Robot", 3 | "name": "ESPlorer I Robot", 4 | "icons": [ 5 | { 6 | "src": "/robot.png", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | } 10 | ], 11 | "start_url": "http://192.168.4.1", 12 | "display": "fullscreen", 13 | "orientation": "portrait" 14 | } -------------------------------------------------------------------------------- /src/ESPlorerI_v1/data/www/on_off.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JoaoLopesF/ESPlorer_v1/587334370774fca154576dddaec0bbfb6897cb9d/src/ESPlorerI_v1/data/www/on_off.png -------------------------------------------------------------------------------- /src/ESPlorerI_v1/data/www/reset.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JoaoLopesF/ESPlorer_v1/587334370774fca154576dddaec0bbfb6897cb9d/src/ESPlorerI_v1/data/www/reset.png -------------------------------------------------------------------------------- /src/ESPlorerI_v1/data/www/slow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JoaoLopesF/ESPlorer_v1/587334370774fca154576dddaec0bbfb6897cb9d/src/ESPlorerI_v1/data/www/slow.png -------------------------------------------------------------------------------- /src/ESPlorerI_v1/data/www/style.css: -------------------------------------------------------------------------------- 1 | /* Style for ESPlorer I web page */ 2 | 3 | /* View port */ 4 | 5 | @viewport{ 6 | zoom: 1.0; 7 | width: device-width; 8 | } 9 | 10 | /* By Tag */ 11 | 12 | body { 13 | background-color: #212121; 14 | } 15 | 16 | /* By class */ 17 | 18 | .header { 19 | margin: 0 auto; 20 | text-align: center; 21 | } 22 | 23 | .title { 24 | position: absolute; 25 | left: 0px; 26 | width: 100%; 27 | text-align: center; 28 | margin: 0 auto; 29 | background-color:#080808; 30 | } 31 | 32 | .camera 33 | { 34 | position: absolute; 35 | width: 100%; 36 | max-width: 800px; 37 | height: 10px; 38 | top: 60px; 39 | left: 50%; 40 | -webkit-transform: translateX(-50%); 41 | transform: translateX(-50%); 42 | margin: 0 auto; 43 | /* background-color: rebeccapurple; */ 44 | } 45 | 46 | .gaugeMotorLeft { 47 | position: absolute; 48 | left: 0px; 49 | opacity: 0.5; 50 | filter: alpha(opacity=50); /* For IE8 and earlier */ 51 | } 52 | 53 | .joystickMotor { 54 | position: absolute; 55 | width: 100%; 56 | height: 55%; 57 | max-height: 500px; 58 | left: 50%; 59 | -webkit-transform: translateX(-50%); 60 | transform: translateX(-50%); 61 | bottom: 0px; 62 | margin: 0 auto; 63 | /* z-index: -1; */ 64 | /* background-color:cadetblue; */ 65 | } 66 | 67 | .gaugeMotorRight{ 68 | position: absolute; 69 | right: 0px; 70 | opacity: 0.5; 71 | filter: alpha(opacity=50); /* For IE8 and earlier */ 72 | } 73 | 74 | .gaugeMotorLeft, 75 | .gaugeMotorRight{ 76 | width: 100px; 77 | height: 100px; 78 | top: 50px; 79 | background-color: #212121; 80 | /* border-style: dotted; 81 | border-color: #404040; */ 82 | z-index: -1; 83 | } 84 | 85 | .footer { 86 | position: absolute; 87 | width: 100%; 88 | height: 50px; 89 | left: 0px; 90 | bottom: 0px; 91 | background-color: #080808; 92 | opacity: 0.75; 93 | filter: alpha(opacity=75); 94 | 95 | /* saw it in https://www.w3schools.com/howto/howto_css_button_group.asp */ 96 | padding: 1px 24px; /* Some padding */ 97 | cursor: pointer; /* Pointer/hand icon */ 98 | float: left; /* Float the buttons side by side */ 99 | } 100 | 101 | /* By ID */ 102 | 103 | #spanTitle { 104 | font-size: 30px; 105 | left: 0px; 106 | top: 0px; 107 | margin: 0 auto; 108 | } 109 | 110 | #spanConnection { 111 | position: absolute; 112 | left: 0px; 113 | top: 30px; 114 | width: 100%; 115 | text-align: center; 116 | font-size: 16px; 117 | margin: 0 auto; 118 | } 119 | 120 | #spanCamera { 121 | position: absolute; 122 | left: 0px; 123 | top: 10px; 124 | width: 100%; 125 | height: 20px; 126 | text-align: center; 127 | font-size: 20px; 128 | margin: 0 auto; 129 | /* background-color:burlywood; */ 130 | } 131 | 132 | #canvasCameraQQVGA { 133 | position: absolute; 134 | width: 160px; 135 | height: 120px; 136 | left: 0px; 137 | top: 0px; 138 | visibility: hidden; 139 | } 140 | 141 | #canvasCameraDisplay { 142 | position: absolute; 143 | top: 0px; 144 | left: 50%; 145 | -webkit-transform: translateX(-50%); 146 | transform: translateX(-50%); 147 | z-index: -1; 148 | margin: 0 auto; 149 | border-style: dotted; 150 | border-color: #545454; 151 | /* background-color: rebeccapurple; */ 152 | } 153 | 154 | #spanJoystickMotorHeader { 155 | position: absolute; 156 | top: 0px; 157 | width: 100%; 158 | height: 10%; 159 | text-align: center; 160 | margin: 0 auto; 161 | /* background-color:burlywood; */ 162 | } 163 | 164 | #spanJoystickMotorFooter { 165 | position: absolute; 166 | bottom: 0px; 167 | width: 100%; 168 | height: 10%; 169 | text-align: center; 170 | margin: 0 auto; 171 | /* background-color:burlywood; */ 172 | } 173 | 174 | #canvasGaugeMotorLeft { 175 | position: absolute; 176 | left: 0px; 177 | top: 0px; 178 | width: 100%; 179 | height: 100%; 180 | margin: 0 auto; 181 | } 182 | 183 | #spanMotorLeft { 184 | position: absolute; 185 | left: 5px; 186 | top: 50%; 187 | text-align: left; 188 | } 189 | 190 | #spanMotorLeftSpeed { 191 | position: absolute; 192 | right: 5px; 193 | top: 50%; 194 | text-align: right; 195 | } 196 | 197 | #canvasGaugeMotorRight { 198 | position: absolute; 199 | left: 0px; 200 | top: 0px; 201 | width: 100%; 202 | height: 100%; 203 | margin: 0 auto; 204 | } 205 | 206 | #spanMotorRightSpeed { 207 | position: absolute; 208 | left: 5px; 209 | top: 50%; 210 | text-align: left; 211 | } 212 | 213 | #spanMotorRight { 214 | position: absolute; 215 | right: 5px; 216 | top: 50%; 217 | text-align: right; 218 | /* background-color:burlywood; */ 219 | } 220 | 221 | #spanMotorLeft, 222 | #spanMotorLeftSpeed, 223 | #spanMotorRight, 224 | #spanMotorRightSpeed { 225 | width: 50%; 226 | height: 12px; 227 | /* color: #D9D9D9; */ 228 | font-size: 12px; 229 | margin: 0 auto; 230 | } 231 | 232 | #imgCameraOnOff { 233 | position: absolute; 234 | width: 27px; 235 | height: 32px; 236 | right: 10px; 237 | top: 10px; 238 | /* visibility: hidden; */ 239 | } 240 | 241 | #imgFast, 242 | #imgSlow, 243 | #imgLights, 244 | #imgReset, 245 | #imgExit { 246 | width: 48px; 247 | height: 48px; 248 | /* padding: 0px 5px; */ 249 | } 250 | #imgSpacer { 251 | width: 24px; 252 | height: 48px; 253 | /* padding: 0px 5px; */ 254 | } 255 | 256 | #spanSpeedMode { 257 | width: 48px; 258 | height: 48px; 259 | text-align: center; 260 | } 261 | 262 | /* Text effect */ 263 | 264 | #spanTitle, 265 | #spanConnection, 266 | #spanJoystickMotorHeader, 267 | #spanJoystickMotorHeaderFooter, 268 | #spanCamera, 269 | #spanSpeedMode, 270 | #spanMotorLeft, 271 | #spanMotorLeftSpeed, 272 | #spanMotorRight, 273 | #spanMotorRightSpeed { 274 | color: black; 275 | /* Text shadow saw in: https://stackoverflow.com/questions/13426875/text-border-using-css-border-around-text */ 276 | /* text-shadow: 1px 0 0 #fff, -1px 0 0 #fff, 0 1px 0 #fff, 0 -1px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff; */ 277 | text-shadow: 1px 0 0 #D9D9D9, -1px 0 0 #D9D9D9, 0 1px 0 #D9D9D9, 0 -1px 0 #D9D9D9, 1px 1px #D9D9D9, -1px -1px 0 #D9D9D9, 1px -1px 0 #D9D9D9, -1px 1px 0 #D9D9D9; 278 | } -------------------------------------------------------------------------------- /src/ESPlorerI_v1/data/www/toolbar_spacer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JoaoLopesF/ESPlorer_v1/587334370774fca154576dddaec0bbfb6897cb9d/src/ESPlorerI_v1/data/www/toolbar_spacer.png --------------------------------------------------------------------------------