wiki:Envi_WebIf_Template

Index by Title

Browse files


How to install

Automatic installation through script

  • UpdateEnviTemplate_manual_v....sh is the script with manual override folders. More info inside the script
  • UpdateEnviTemplate_autouni_v....sh is an automated script that automatically locates needed folders. More info inside the script
  • Copy script file *.sh to your server into folder (for example: script) which is located in config directory of OSCam (for example: /etc/tuxbox/config/script/)
  • Set file mode for file *.sh (chmod 777 UpdateEnviTemplate.sh)
  • Set folder with scripts in Webif of OSCam in item "CONFIG" -> part Webif -> Script settings -> Http script: Write /etc/tuxbox/config/script/
  • Save
  • Now in item "SCRIPTS" you can choose autoupdate script which is called Name_of_script.sh
  • When run is success full it should report: scriptname: Name_of_script.sh scriptresult: done returncode: 0 . Anything other then 0 indicates an error while processing this script.
  • Reload page
  • Now is Envi Template as main Webif.

NOTE: Script was tested on enigma2, raspberry pi, i686 (Xubuntu), x86_64

Manual installation

(Envi as main Webif)

Basic information about Envi

Author: skyndas

About idea: When studying the Touch interface, which is implemented directly in Oscamu I got the idea "Why not use responsive design for use on all devices?".

Envi Template have design for monitor and use responsive design for smartphones and tablets. More info in The tested device.
For view on the monitor can be used Styleswitcher for selecting other design. More Info in Preview of Envi

CAUTION : Envi_template don´t make(s) call(s) to outside world. All is offline from http server.

Envi Template is ready for basic OSCam, not for modern OSCam from Gorgone.

Compatibility list Envi Template with OSCam revision

Last update of Template 05.07.2015

Envi Plugin

GEO IP Location

Forum: http://www.streamboard.tv/wbb2/thread.php?threadid=43813

GEOAPI IP Location displays the geographic location of users connected to the OSCam in status.html.

CAUTION : GEOAPI Jquery script make call to outside world to "http://ip-api.com/" databases server after click button 'Show GEOAPI'

Basic info about ip-api.com

http://ip-api.com/ provides free usage of its Geo IP API through multiple response formats. He support IPv4 and IPv6. Their system will automatically ban any IP addresses doing over 250 requests per minute. To unban your IP click http://ip-api.com/docs/unban

Preview GEOAPI Plugin

Envi_plugin_01

Preview of Envi

Style Switcher

NOTE: (It is available only for PC monitor)

Preview Styleswitcher - Basic settings

styleswitcher_preview

1. Change Webif style from Original OSCam Webif to Envi Template
2. Change Envi template color style
3. Change background color - we can use custom color with color picker
4. Show information about Envi Template
5. Other settings - we can e.g. rotate OSCam logo and other ......
6. We can add pattern to Webif
7. We can set font family or size

Preview Styleswitcher - Extended settings

styleswitcher_preview_1

1. Change colors in Main menu
2. Change colors in Submenu
3. Change colors in Footer
4. Change colors in Tables
5. Change colors in Livelog
6. Change colors in Files

Colors and Patterns in Styleswitcher

  • Background colors
                                     
Default
Basic background
  White
Color: #FFF
  5% Black
Color: #F2F2F2
  10% Black
Color: #E5E5E5
  20% Black
Color: #CCC
  30% Black
Color: #B3B3B3
  40% Black
Color: #999
  Light Brown
Color: #CDB38B
  Dark Brown
Color: #946D40
  Light Slate Gray
Color: #71918A

styleswitcher_preview_2
Custom color picker

You can setting custom background color over color picker
  • Background patterns
       
Default
Basic pattern
  Diagonal line
Transparent pattern
  Diamond
Transparent pattern
  Dots1
Transparent pattern
  Squares 1
Transparent pattern
 
       
Squares 2
Transparent pattern
  XXX
Transparent pattern
  XXX
Transparent pattern
  XXX
Transparent pattern
  Dark full image
Full image

Envi Tips and Tricks

Own background pattern

  1. create css file (e.g. envi_custom.css)
  2. add css style for background pattern
  3. move file into config folder of oscam
  4. select envi_custom.css in "Configuration" -> part "Webif" in "Http css:"
  5. set checkbox for "Http prepend embedded css:" to checked
  6. save and reload.

Download example of file "envi_custom.css" http://www.streamboard.tv/oscam-addons/browser/oscam-template/Envi_template/branches/tips_tricks/own_patterns/

Preview of own style

styleswitcher_ownpatterns

About color design of Envi

Basic colors for Envi

  • Color #D80320 for:
    • links in Sub Menu
  • Color #BD0000 for:
    • style author in footer
    • links in footer
  • Color #F00 for:
    • h4 in shutdown.html (color from original WebIf)
  • Color #131517 for:
    • background in Main Menu
  • Linear gradient from #F5F5F5 to #EEE for:
    • background in Sub Menu
  • Color #000 for:
    • border color in footer
  • Color #222 for:
    • thead in tables
                                     
#F00423   #D80320     #F02     #BD0000     #F00     #131517   #F5F5F5     #EEE       #000       #222  

The tested device

Desktops

  • Desktops
    • 1280 x 1024
    • 1280 x 960
    • 1280 x 800
    • 1280 x 768
    • 1280 x 720

NOTE: Everything is displayed

Tablets

Mobile

Supported browsers

  • Android browser
  • Google Chrome
  • Dolphin Browser
  • Safari

The tested devices

APPLE ------------------

  • iPhone 4
  • iPhone 4S
  • iPhone 5
  • iPhone 5C
  • iPhone 5S

HTC ---------------------

  • HTC 7 Mozart
  • HTC 7 Trophy
  • HTC Evo
  • HTC Evo 3D
  • HTC Evo LTE
  • HTC Desire
  • HTC Desire C
  • HTC Desire HD
  • HTC Desire Z
  • HTC HD2
  • HTC J Butterfly
  • HTC Legend
  • HTC Sensation
  • HTC Sensation XL
  • HTC Sensation XE
  • HTC Thunderbolt
  • HTC Titan II
  • HTC Touch HD
  • HTC One
  • HTC One S
  • HTC One SV
  • HTC One V
  • HTC One X
  • HTC One X+
  • HTC One XL
  • HTC Velocity 4G
  • HTC Wildfire S
  • HTC Windows Phone 8X

NEXUS -------------------

  • Nexus 5
  • Nexus One
  • Nexus S

SAMSUNG -----------------

  • Samsung Galaxy Note 2 N7100
  • Samsung Galaxy Note 3 N9005
  • Samsung Galaxy S3
  • Samsung Galaxy S3 mini
  • Samsung Galaxy S4
  • Samsung Galaxy S4 mini
  • Samsung Galaxy S5

Improvements over the original WebIf

Scroll to Top

Link for scrolling the pages up is placed in the footer. Scrolling use jQuery animation.

This idea has been added to the original WebIf without using Jqeury by ultra47 ( Oscam changeset http://www.streamboard.tv/oscam/changeset/10081)

Marking column for sorting table

If you click on sorting in tables readers and users will be designated column.

Marking columns in table

This idea has been added to the original WebIf by ultra47 ( Oscam changeset http://www.streamboard.tv/oscam/changeset/10083)

Smart search in Tables

Display number of rows by SearchTerm and Highlight the cells that contain the search term.

Count_rows_by_SearchTerm

Thanks

Special thanks for helping to develop: ultra47,schorsch100,gismo2004 - and all the testers.

Last modified 6 years ago Last modified on 07/05/15 19:26:01

Attachments (11)

Download all attachments as: .zip

Note: See TracWiki for help on using the wiki.