diff --git a/docs/features/custom-logo.md b/docs/features/custom-logo.md index bc9ea753..0fd236fe 100644 --- a/docs/features/custom-logo.md +++ b/docs/features/custom-logo.md @@ -11,20 +11,16 @@ This is an exclusive feature of DASH Pro. Check it out [here](https://espdash.pr
-Energy Card Preview -  -Energy Card Preview +Logo Preview

-If you are not familiar with the interface yet, the dashboard has an sidebar which can be expanded and collapsed, in that case the logo switches between "mini" and "large" scale version. +Your ESP-DASH dashboard's sidebar contains the spot which can be updated to add your own company/product logo. This enables you with complete customization and maintains your brand value among customers. -Both these logos can be changed by the user by modifying the `logo.h` & `logo.cpp` file in the library source directory. +### Setting Logo -### Setting Custom Logo - -The logo used in DASH is image file converted to byte array. We'll go through the process below: +The logo used in ESP-DASH is image file converted to byte array. We'll go through the process below: #### What you'll need - You'll need a compatible logo image ( jpeg / png / gif / tif etc. ) or an SVG file ( recommended due to small file size ). Important: Please make sure your image is optimized and small in file size. @@ -38,13 +34,12 @@ The logo used in DASH is image file converted to byte array. We'll go through th #### Step 2: Setting custom logo in sketch -Now once your custom logo has been prepared, let's set it in our ESP-DASH Pro library. To do so, the library contains 2 files which contain the variable that govern 'mini' and 'large' logos used by our webpage. +Now once your custom logo has been prepared, let's set it in your ESP-DASH Pro library: 1. Go to `logo.h` -2. Set `DASH_MINI_LOGO_MIME` to your image file type. To find your file's mime type, use this utility: https://www.htmlstrip.com/mime-file-type-checker -3. Set `DASH_MINI_LOGO_WIDTH` & `DASH_MINI_LOGO_HEIGHT` according to your desired size which will be displayed on the webpage. -4. Replace the array length of `DASH_MINI_LOGO` with the newly generated array length. +2. Set `DASH_LOGO_MIME` to your image file type. To find your file's mime type, use this utility: https://www.htmlstrip.com/mime-file-type-checker +3. Set `DASH_LOGO_WIDTH` & `DASH_LOGO_HEIGHT` according to your desired size which will be displayed on the webpage. +4. Replace the array length of `DASH_LOGO` with the newly generated array length. 5. Now open `logo.cpp` -6. Replace the data inside `DASH_MINI_LOGO` with new data generated just before using File2Raw. +6. Replace the data inside `DASH_LOGO` with new data generated just before using File2Raw. -Once done, you may repeat the same steps as above for `DASH_LARGE_LOGO`. diff --git a/static/img/v4/custom-logo.png b/static/img/v4/custom-logo.png index ad37b9ec..874cf7fb 100644 Binary files a/static/img/v4/custom-logo.png and b/static/img/v4/custom-logo.png differ diff --git a/versioned_docs/version-v4.x.x/features/custom-logo.md b/versioned_docs/version-v4.x.x/features/custom-logo.md index bc9ea753..21a5a549 100644 --- a/versioned_docs/version-v4.x.x/features/custom-logo.md +++ b/versioned_docs/version-v4.x.x/features/custom-logo.md @@ -10,27 +10,23 @@ This is an exclusive feature of DASH Pro. Check it out [here](https://espdash.pr
- -Energy Card Preview -  -Energy Card Preview +Logo Preview

-If you are not familiar with the interface yet, the dashboard has an sidebar which can be expanded and collapsed, in that case the logo switches between "mini" and "large" scale version. - -Both these logos can be changed by the user by modifying the `logo.h` & `logo.cpp` file in the library source directory. - +Your ESP-DASH dashboard's sidebar contains the spot which can be updated to add your own company/product logo. This enables you with complete customization and maintains your brand value among customers. -### Setting Custom Logo +### Setting Logo -The logo used in DASH is image file converted to byte array. We'll go through the process below: +The logo used in ESP-DASH is image file converted to byte array. We'll go through the process below: #### What you'll need + - You'll need a compatible logo image ( jpeg / png / gif / tif etc. ) or an SVG file ( recommended due to small file size ). Important: Please make sure your image is optimized and small in file size. - Know the MIME file type of your image. You can use [HTTPStrip's mime utility](https://www.htmlstrip.com/mime-file-type-checker). #### Step 1: Procedure to convert logo into byte array + 1. Go to [File2Raw Utility](https://file2raw.labrat.one/) ( I created this utility a few years back for the purpose of converting files into byte array for C++ applications ). 2. Select your logo. 3. Select "Gzip Compress" & "Use PROGMEM (Arduino)". @@ -38,13 +34,11 @@ The logo used in DASH is image file converted to byte array. We'll go through th #### Step 2: Setting custom logo in sketch -Now once your custom logo has been prepared, let's set it in our ESP-DASH Pro library. To do so, the library contains 2 files which contain the variable that govern 'mini' and 'large' logos used by our webpage. +Now once your custom logo has been prepared, let's set it in your ESP-DASH Pro library: 1. Go to `logo.h` -2. Set `DASH_MINI_LOGO_MIME` to your image file type. To find your file's mime type, use this utility: https://www.htmlstrip.com/mime-file-type-checker -3. Set `DASH_MINI_LOGO_WIDTH` & `DASH_MINI_LOGO_HEIGHT` according to your desired size which will be displayed on the webpage. -4. Replace the array length of `DASH_MINI_LOGO` with the newly generated array length. +2. Set `DASH_LOGO_MIME` to your image file type. To find your file's mime type, use this utility: +3. Set `DASH_LOGO_WIDTH` & `DASH_LOGO_HEIGHT` according to your desired size which will be displayed on the webpage. +4. Replace the array length of `DASH_LOGO` with the newly generated array length. 5. Now open `logo.cpp` -6. Replace the data inside `DASH_MINI_LOGO` with new data generated just before using File2Raw. - -Once done, you may repeat the same steps as above for `DASH_LARGE_LOGO`. +6. Replace the data inside `DASH_LOGO` with new data generated just before using File2Raw.