WEB-SKINS - MikroTikmum.mikrotik.com/presentations/PL12/pawel.pdf · WEB-SKINS Idea, usage and...
Transcript of WEB-SKINS - MikroTikmum.mikrotik.com/presentations/PL12/pawel.pdf · WEB-SKINS Idea, usage and...
![Page 1: WEB-SKINS - MikroTikmum.mikrotik.com/presentations/PL12/pawel.pdf · WEB-SKINS Idea, usage and examples IP-PRO Paweł Ciepliński 1](https://reader030.fdocuments.net/reader030/viewer/2022020319/5d1abd6d88c993e6408ca027/html5/thumbnails/1.jpg)
WEB-SKINS Idea, usage and examples
IP-PRO Paweł Ciepliński www.ip-pro.eu 1
![Page 2: WEB-SKINS - MikroTikmum.mikrotik.com/presentations/PL12/pawel.pdf · WEB-SKINS Idea, usage and examples IP-PRO Paweł Ciepliński 1](https://reader030.fdocuments.net/reader030/viewer/2022020319/5d1abd6d88c993e6408ca027/html5/thumbnails/2.jpg)
Another Interface ?
IP-PRO Paweł Ciepliński www.ip-pro.eu 2
![Page 3: WEB-SKINS - MikroTikmum.mikrotik.com/presentations/PL12/pawel.pdf · WEB-SKINS Idea, usage and examples IP-PRO Paweł Ciepliński 1](https://reader030.fdocuments.net/reader030/viewer/2022020319/5d1abd6d88c993e6408ca027/html5/thumbnails/3.jpg)
A simple WEB based winbox ?
IP-PRO Paweł Ciepliński www.ip-pro.eu 3
![Page 4: WEB-SKINS - MikroTikmum.mikrotik.com/presentations/PL12/pawel.pdf · WEB-SKINS Idea, usage and examples IP-PRO Paweł Ciepliński 1](https://reader030.fdocuments.net/reader030/viewer/2022020319/5d1abd6d88c993e6408ca027/html5/thumbnails/4.jpg)
What are Skins ?
Its a feature that will allow some extra functionality we do not have in winbox like:
• Enabling / Disabling every single field
• Creating and Customize Status page
• Translate interface to your Language
• Limit possible options in combo boxes
• Put Notes and explenations
IP-PRO Paweł Ciepliński www.ip-pro.eu 4
![Page 5: WEB-SKINS - MikroTikmum.mikrotik.com/presentations/PL12/pawel.pdf · WEB-SKINS Idea, usage and examples IP-PRO Paweł Ciepliński 1](https://reader030.fdocuments.net/reader030/viewer/2022020319/5d1abd6d88c993e6408ca027/html5/thumbnails/5.jpg)
Why do I need that ?
Lets start with some use cases:
• Giving limited Access to device
• Giving status access to device
• Simplify Configuration for Customers
• Translate Interface to your Language
IP-PRO Paweł Ciepliński www.ip-pro.eu 5
![Page 6: WEB-SKINS - MikroTikmum.mikrotik.com/presentations/PL12/pawel.pdf · WEB-SKINS Idea, usage and examples IP-PRO Paweł Ciepliński 1](https://reader030.fdocuments.net/reader030/viewer/2022020319/5d1abd6d88c993e6408ca027/html5/thumbnails/6.jpg)
Giving limited Access to device
Use case:
ISP wants to give limited access to CPE to his customer for:
• Check signal strenght in wireless interface
• Allow to control Leases in DHCP-Server
IP-PRO Paweł Ciepliński www.ip-pro.eu 6
![Page 7: WEB-SKINS - MikroTikmum.mikrotik.com/presentations/PL12/pawel.pdf · WEB-SKINS Idea, usage and examples IP-PRO Paweł Ciepliński 1](https://reader030.fdocuments.net/reader030/viewer/2022020319/5d1abd6d88c993e6408ca027/html5/thumbnails/7.jpg)
Giving limited Access to device
IP-PRO Paweł Ciepliński www.ip-pro.eu 7
User can see only what you enable him to see
![Page 8: WEB-SKINS - MikroTikmum.mikrotik.com/presentations/PL12/pawel.pdf · WEB-SKINS Idea, usage and examples IP-PRO Paweł Ciepliński 1](https://reader030.fdocuments.net/reader030/viewer/2022020319/5d1abd6d88c993e6408ca027/html5/thumbnails/8.jpg)
Why do I need that ?
Lets start with some use cases:
• Giving limited Access to device
• Giving status access to device
• Simplify Configuration for Customers
• Translate Interface to your Language
IP-PRO Paweł Ciepliński www.ip-pro.eu 8
![Page 9: WEB-SKINS - MikroTikmum.mikrotik.com/presentations/PL12/pawel.pdf · WEB-SKINS Idea, usage and examples IP-PRO Paweł Ciepliński 1](https://reader030.fdocuments.net/reader030/viewer/2022020319/5d1abd6d88c993e6408ca027/html5/thumbnails/9.jpg)
Giving status access to device
Use case:
ISP wants to give read only access to CPE but only to certain parameters:
• Check some parameters like signal or IP
IP-PRO Paweł Ciepliński www.ip-pro.eu 9
![Page 10: WEB-SKINS - MikroTikmum.mikrotik.com/presentations/PL12/pawel.pdf · WEB-SKINS Idea, usage and examples IP-PRO Paweł Ciepliński 1](https://reader030.fdocuments.net/reader030/viewer/2022020319/5d1abd6d88c993e6408ca027/html5/thumbnails/10.jpg)
Giving status access to device
IP-PRO Paweł Ciepliński www.ip-pro.eu 10
Only Status Page is Shown
![Page 11: WEB-SKINS - MikroTikmum.mikrotik.com/presentations/PL12/pawel.pdf · WEB-SKINS Idea, usage and examples IP-PRO Paweł Ciepliński 1](https://reader030.fdocuments.net/reader030/viewer/2022020319/5d1abd6d88c993e6408ca027/html5/thumbnails/11.jpg)
Why do I need that ?
Lets start with some use cases:
• Giving limited Access to device
• Giving status access to device
• Simplify Configuration for Customers
• Translate Interface to your Language
IP-PRO Paweł Ciepliński www.ip-pro.eu 11
![Page 12: WEB-SKINS - MikroTikmum.mikrotik.com/presentations/PL12/pawel.pdf · WEB-SKINS Idea, usage and examples IP-PRO Paweł Ciepliński 1](https://reader030.fdocuments.net/reader030/viewer/2022020319/5d1abd6d88c993e6408ca027/html5/thumbnails/12.jpg)
Simplify Configuration for Customers
Use case:
Want to sell Mikrotik Router to non experience Person and give him Interface that is easier then Winbox itself
IP-PRO Paweł Ciepliński www.ip-pro.eu 12
![Page 13: WEB-SKINS - MikroTikmum.mikrotik.com/presentations/PL12/pawel.pdf · WEB-SKINS Idea, usage and examples IP-PRO Paweł Ciepliński 1](https://reader030.fdocuments.net/reader030/viewer/2022020319/5d1abd6d88c993e6408ca027/html5/thumbnails/13.jpg)
Simplify Configuration for Customers
IP-PRO Paweł Ciepliński www.ip-pro.eu 13
Menu is Limited
PPP is called VPN
Secrets are called VPN Accounts
![Page 14: WEB-SKINS - MikroTikmum.mikrotik.com/presentations/PL12/pawel.pdf · WEB-SKINS Idea, usage and examples IP-PRO Paweł Ciepliński 1](https://reader030.fdocuments.net/reader030/viewer/2022020319/5d1abd6d88c993e6408ca027/html5/thumbnails/14.jpg)
Why do I need that ?
Lets start with some use cases:
• Giving limited Access to device
• Giving status access to device
• Simplify Configuration for Customers
• Translate Interface to your Language
IP-PRO Paweł Ciepliński www.ip-pro.eu 14
![Page 15: WEB-SKINS - MikroTikmum.mikrotik.com/presentations/PL12/pawel.pdf · WEB-SKINS Idea, usage and examples IP-PRO Paweł Ciepliński 1](https://reader030.fdocuments.net/reader030/viewer/2022020319/5d1abd6d88c993e6408ca027/html5/thumbnails/15.jpg)
Translate Interface
Use case:
Your employees / customers / network operator are not very good with English Language. Translate it to them :)
IP-PRO Paweł Ciepliński www.ip-pro.eu 15
![Page 16: WEB-SKINS - MikroTikmum.mikrotik.com/presentations/PL12/pawel.pdf · WEB-SKINS Idea, usage and examples IP-PRO Paweł Ciepliński 1](https://reader030.fdocuments.net/reader030/viewer/2022020319/5d1abd6d88c993e6408ca027/html5/thumbnails/16.jpg)
Translate Interface
IP-PRO Paweł Ciepliński www.ip-pro.eu 16
![Page 17: WEB-SKINS - MikroTikmum.mikrotik.com/presentations/PL12/pawel.pdf · WEB-SKINS Idea, usage and examples IP-PRO Paweł Ciepliński 1](https://reader030.fdocuments.net/reader030/viewer/2022020319/5d1abd6d88c993e6408ca027/html5/thumbnails/17.jpg)
What you should now about Skins
IP-PRO Paweł Ciepliński www.ip-pro.eu 17
• How to create them
• How to apply them
• What are:
– Separators,
– Tabs,
– Limits
– Notes
![Page 18: WEB-SKINS - MikroTikmum.mikrotik.com/presentations/PL12/pawel.pdf · WEB-SKINS Idea, usage and examples IP-PRO Paweł Ciepliński 1](https://reader030.fdocuments.net/reader030/viewer/2022020319/5d1abd6d88c993e6408ca027/html5/thumbnails/18.jpg)
How to Create Skins
IP-PRO Paweł Ciepliński www.ip-pro.eu 18
![Page 19: WEB-SKINS - MikroTikmum.mikrotik.com/presentations/PL12/pawel.pdf · WEB-SKINS Idea, usage and examples IP-PRO Paweł Ciepliński 1](https://reader030.fdocuments.net/reader030/viewer/2022020319/5d1abd6d88c993e6408ca027/html5/thumbnails/19.jpg)
How to Create Skins
IP-PRO Paweł Ciepliński www.ip-pro.eu 19
![Page 20: WEB-SKINS - MikroTikmum.mikrotik.com/presentations/PL12/pawel.pdf · WEB-SKINS Idea, usage and examples IP-PRO Paweł Ciepliński 1](https://reader030.fdocuments.net/reader030/viewer/2022020319/5d1abd6d88c993e6408ca027/html5/thumbnails/20.jpg)
How to Create Skins
IP-PRO Paweł Ciepliński www.ip-pro.eu 20
• First of All create new SKIN by setting its name and pressing Save Button
![Page 21: WEB-SKINS - MikroTikmum.mikrotik.com/presentations/PL12/pawel.pdf · WEB-SKINS Idea, usage and examples IP-PRO Paweł Ciepliński 1](https://reader030.fdocuments.net/reader030/viewer/2022020319/5d1abd6d88c993e6408ca027/html5/thumbnails/21.jpg)
How to Create Skins
IP-PRO Paweł Ciepliński www.ip-pro.eu 21
• Start with enabling and disabling some options in new skins
• Disabled option will not be visible in that SKIN
![Page 22: WEB-SKINS - MikroTikmum.mikrotik.com/presentations/PL12/pawel.pdf · WEB-SKINS Idea, usage and examples IP-PRO Paweł Ciepliński 1](https://reader030.fdocuments.net/reader030/viewer/2022020319/5d1abd6d88c993e6408ca027/html5/thumbnails/22.jpg)
How to Create Skins
IP-PRO Paweł Ciepliński www.ip-pro.eu 22
• In Design Mode you can click on text and replace it to you own text
![Page 23: WEB-SKINS - MikroTikmum.mikrotik.com/presentations/PL12/pawel.pdf · WEB-SKINS Idea, usage and examples IP-PRO Paweł Ciepliński 1](https://reader030.fdocuments.net/reader030/viewer/2022020319/5d1abd6d88c993e6408ca027/html5/thumbnails/23.jpg)
How to Create Skins - Separators
IP-PRO Paweł Ciepliński www.ip-pro.eu 23
You can edit existing Separators
![Page 24: WEB-SKINS - MikroTikmum.mikrotik.com/presentations/PL12/pawel.pdf · WEB-SKINS Idea, usage and examples IP-PRO Paweł Ciepliński 1](https://reader030.fdocuments.net/reader030/viewer/2022020319/5d1abd6d88c993e6408ca027/html5/thumbnails/24.jpg)
How to Create Skins - TABS
IP-PRO Paweł Ciepliński www.ip-pro.eu 24
Or add New Custom Tab
![Page 25: WEB-SKINS - MikroTikmum.mikrotik.com/presentations/PL12/pawel.pdf · WEB-SKINS Idea, usage and examples IP-PRO Paweł Ciepliński 1](https://reader030.fdocuments.net/reader030/viewer/2022020319/5d1abd6d88c993e6408ca027/html5/thumbnails/25.jpg)
How to Create Skins - TABS
IP-PRO Paweł Ciepliński www.ip-pro.eu 25
Tabs with no LABEL are called Separators
![Page 26: WEB-SKINS - MikroTikmum.mikrotik.com/presentations/PL12/pawel.pdf · WEB-SKINS Idea, usage and examples IP-PRO Paweł Ciepliński 1](https://reader030.fdocuments.net/reader030/viewer/2022020319/5d1abd6d88c993e6408ca027/html5/thumbnails/26.jpg)
How to Create Skins - Notes
IP-PRO Paweł Ciepliński www.ip-pro.eu 26
If Configration is too difficult make a notes for your employee
![Page 27: WEB-SKINS - MikroTikmum.mikrotik.com/presentations/PL12/pawel.pdf · WEB-SKINS Idea, usage and examples IP-PRO Paweł Ciepliński 1](https://reader030.fdocuments.net/reader030/viewer/2022020319/5d1abd6d88c993e6408ca027/html5/thumbnails/27.jpg)
How to Create Skins - Limits
IP-PRO Paweł Ciepliński www.ip-pro.eu 27
Limit will make limited choice in Combo Boxes
![Page 28: WEB-SKINS - MikroTikmum.mikrotik.com/presentations/PL12/pawel.pdf · WEB-SKINS Idea, usage and examples IP-PRO Paweł Ciepliński 1](https://reader030.fdocuments.net/reader030/viewer/2022020319/5d1abd6d88c993e6408ca027/html5/thumbnails/28.jpg)
How to Create Skins - Limits
IP-PRO Paweł Ciepliński www.ip-pro.eu 28
Limit will make limited choice in Combo Boxes
![Page 29: WEB-SKINS - MikroTikmum.mikrotik.com/presentations/PL12/pawel.pdf · WEB-SKINS Idea, usage and examples IP-PRO Paweł Ciepliński 1](https://reader030.fdocuments.net/reader030/viewer/2022020319/5d1abd6d88c993e6408ca027/html5/thumbnails/29.jpg)
How to Create Skins - Limits
IP-PRO Paweł Ciepliński www.ip-pro.eu 29
Properties can be also be a read only
![Page 30: WEB-SKINS - MikroTikmum.mikrotik.com/presentations/PL12/pawel.pdf · WEB-SKINS Idea, usage and examples IP-PRO Paweł Ciepliński 1](https://reader030.fdocuments.net/reader030/viewer/2022020319/5d1abd6d88c993e6408ca027/html5/thumbnails/30.jpg)
How to USE Skins
IP-PRO Paweł Ciepliński www.ip-pro.eu 30
• Skins are JSON files located in Files in skins directory
![Page 31: WEB-SKINS - MikroTikmum.mikrotik.com/presentations/PL12/pawel.pdf · WEB-SKINS Idea, usage and examples IP-PRO Paweł Ciepliński 1](https://reader030.fdocuments.net/reader030/viewer/2022020319/5d1abd6d88c993e6408ca027/html5/thumbnails/31.jpg)
JSON Files
IP-PRO Paweł Ciepliński www.ip-pro.eu 31
![Page 32: WEB-SKINS - MikroTikmum.mikrotik.com/presentations/PL12/pawel.pdf · WEB-SKINS Idea, usage and examples IP-PRO Paweł Ciepliński 1](https://reader030.fdocuments.net/reader030/viewer/2022020319/5d1abd6d88c993e6408ca027/html5/thumbnails/32.jpg)
How to USE Skins
IP-PRO Paweł Ciepliński www.ip-pro.eu 32
• First We need to create new User Group in /system user menu
![Page 33: WEB-SKINS - MikroTikmum.mikrotik.com/presentations/PL12/pawel.pdf · WEB-SKINS Idea, usage and examples IP-PRO Paweł Ciepliński 1](https://reader030.fdocuments.net/reader030/viewer/2022020319/5d1abd6d88c993e6408ca027/html5/thumbnails/33.jpg)
How to USE Skins
IP-PRO Paweł Ciepliński www.ip-pro.eu 33
• Second – Create user in that Group.
![Page 34: WEB-SKINS - MikroTikmum.mikrotik.com/presentations/PL12/pawel.pdf · WEB-SKINS Idea, usage and examples IP-PRO Paweł Ciepliński 1](https://reader030.fdocuments.net/reader030/viewer/2022020319/5d1abd6d88c993e6408ca027/html5/thumbnails/34.jpg)
Mass Configuration
IP-PRO Paweł Ciepliński www.ip-pro.eu 34
• Copy your JSON file to skin directory and place config of your users
• Use a new export compact to make job easier
![Page 35: WEB-SKINS - MikroTikmum.mikrotik.com/presentations/PL12/pawel.pdf · WEB-SKINS Idea, usage and examples IP-PRO Paweł Ciepliński 1](https://reader030.fdocuments.net/reader030/viewer/2022020319/5d1abd6d88c993e6408ca027/html5/thumbnails/35.jpg)
THANK YOU
IP-PRO Paweł Ciepliński www.ip-pro.eu 35
More Information at:
http://www.ip-pro.eu/articles/51-web-skins