Iconos
Galería de iconos para usar dentro de la plataforma,
Tamaño y color
Las siguientes clases las podrás utilizar para modificar el tamaño y color de los iconos dentro de la plataforma.
Tamaño
Para aplicar los estilos es necesario agregar una clase, a continuación, tomando el ejemplo anterior, podremos ver la estructura que tienen.
//ic-x1
<i class="i-cog ic-x1"></i>
//ic-x2
<i class="i-cog ic-x2"></i>
//ic-x3
<i class="i-cog ic-x3"></i>
//ic-x4
<i class="i-cog ic-x4"></i>
//ic-x5
<i class="i-cog ic-x5"></i>
//ic-x6
<i class="i-cog ic-x6"></i>
//ic-x7
<i class="i-cog ic-x7"></i>
//ic-x8
<i class="i-cog ic-x8"></i>
Color
Para aplicar los estilos es necesario agregar las siguientes clases:
//Verde
<i class="i-cog ic-green"></i>
//Azul
<i class="i-cog ic-blue"></i>
//Amarillo
<i class="i-cog ic-yellow"></i>
//Naranja
<i class="i-cog ic-orange"></i>
//Rojo
<i class="i-cog ic-red"></i>
//Gris
<i class="i-cog ic-gray"></i>
//Blanco
<i class="i-cog ic-white"></i>
//Negro
<i class="i-cog ic-black"></i>
Contenedor para iconos
Se contemplaron 2 tipos de contenedores para los iconos, uno de forma circular y un segundo de forma cuadrada.
Contenedor circular
La clase necesaria para poder obtener este contendor circular es encapCustom y el resultado seria como el sigueinte.
La estructura del ejemplo anterior, sería la siguiente.
<div class="encapCustom">
<i class="i-bat-50"></i>
</div>
<div class="encapCustom">
<i class="i-signal-r"></i>
</div>
<div class="encapCustom">
<i class="i-speed-s"></i>
</div>
<div class="encapCustom">
<i class="i-sat"></i>
</div>
<div class="encapCustom">
<i class="i-vol-down"></i>
</div>
<div class="encapCustom">
<i class="i-edit"></i>
</div>
<div class="encapCustom">
<i class="i-key-vpn"></i>
</div>
<div class="encapCustom">
<i class="i-light"></i>
</div>
Contenedor cuadrado
Tomando de base la clase encapCustom, al agregar la clase ecSquare se obtendrá la forma cuadrada del contenedor, como se muestra a continuación.
La estructura del ejemplo anterior, sería la siguiente.
<div class="encapCustom ecSquare">
<i class="i-bat-50"></i>
</div>
<div class="encapCustom ecSquare">
<i class="i-signal-r"></i>
</div>
<div class="encapCustom ecSquare">
<i class="i-speed-s"></i>
</div>
<div class="encapCustom ecSquare">
<i class="i-sat"></i>
</div>
<div class="encapCustom ecSquare">
<i class="i-vol-down"></i>
</div>
<div class="encapCustom ecSquare">
<i class="i-edit"></i>
</div>
<div class="encapCustom ecSquare">
<i class="i-key-vpn"></i>
</div>
<div class="encapCustom ecSquare">
<i class="i-light"></i>
</div>
Tamaños de contenedor
Los contenedores pueden variar su tamaño, dependiendo de las necesidades del usuario, se contemplaron 7 tamaños mas el tamaño por default que tienen los contenedores, como se muestra a continuación.
La clases clases para obtener estos tamaños van del ec-x2 al ec-x8, como se mostrará a continuación.
//Tamaño por default
<div class="encapCustom ecSquare">
<i class="i-bat-50"></i>
</div>
//Tamaño 2
<div class="encapCustom ec-x2">
<i class="i-signal-r"></i>
</div>
//Tamaño 3
<div class="encapCustom ecSquare ec-x3">
<i class="i-speed-s"></i>
</div>
//Tamaño 4
<div class="encapCustom ec-x4">
<i class="i-sat"></i>
</div>
//Tamaño 5
<div class="encapCustom ecSquare ec-x5">
<i class="i-vol-down"></i>
</div>
//Tamaño 6
<div class="encapCustom ec-x6">
<i class="i-edit"></i>
</div>
//Tamaño 7
<div class="encapCustom ecSquare ec-x7">
<i class="i-key-vpn"></i>
</div>
//Tamaño 8
<div class="encapCustom ec-x8">
<i class="i-light"></i>
</div>
Cancelar icono
Para poder disponer de todos los iconos en su modalidad de cancelado, se agrego una clase para lograr este fin.
Para aplicar los estilos es necesario agregar la clase iconCancel, a continuación, tomando el ejemplo anterior, podremos ver la estructura que tienen.
<i class="i-cog"></i>
<i class="i-cog iconCancel"></i>
<i class="i-bat-0"></i>
<i class="i-bat-0 iconCancel"></i>
<i class="i-driver"></i>
<i class="i-driver iconCancel"></i>
<i class="i-camera"></i>
<i class="i-camera iconCancel"></i>
<i class="i-calendar "></i>
<i class="i-calendar iconCancel"></i>
Colores
Al icono de cancelar se le podran aplicar colores predeterminados, como se muestra a continuación.
Solo sera necesario aplicar una clase adicional para poder obtener el cambio de color del icono de cancelar. A continuación se mostrará el ejemplo anterior con las clases que se aplicaron.
//Color rojo, clase "icolRed" <i class="i-cog iconCancel icolRed"></i> //Color verde, clase "icolGreen" <i class="i-bat-0 iconCancel icolGreen"></i> //Color azul, clase "icolBlue" <i class="i-driver iconCancel icolBlue"></i> //Color amarillo, clase "icolYellow" <i class="i-camera iconCancel icolYellow"></i> //Color naranja, clase "icolOrange" <i class="i-calendar iconCancel icolOrange"></i> //Color negro, clase "icolBlack" <i class="i-sims iconCancel icolBlack"></i>
Superponer iconos
Para poner algun indicador sobre los iconos, se agregaron clases para obtener lo siguiente.
La estructura y clases del ejemplo anterior son los siguientes, cabe mencionar que en el caso de la alerta, la estructura es un poco diferente
//Icono de checkbox seleccionado "iconCheckOn"
<i class="i-fuel iconCheckOn"></i>
//Icono de checkbox sin seleccionar "iconCheckOff"
<i class="i-fuel iconCheckOff"></i>
//Icono activado "iconOn"
<i class="i-fuel iconOn"></i>
//Icono desactivado "iconOff"
<i class="i-fuel iconOff"></i>
//Icono de notificación "iconNotif"
<i class="i-fuel iconNotif"></i>
//Icono de alerta "iconAlert"
<i class="i-fuel iconAlert">
<i></i>
</i>
Posición
Los iconos superpuestos mostrados anteriormente, por defualt su posición es en la parte inferior derecha, pero pensando que se pudieran necesitar en alguna posición diferente, se pueden tambien mostrar asi.
La estructura y clases del ejemplo anterior es la siguiente:
//Posición por default, no necesita clas
<i class="i-fuel iconOn"></i>
//Posición inferior izquierda "iposLB"
<i class="i-fuel iconOn iposLB"></i>
//Posición superior izquierda "iposLT"
<i class="i-fuel iconOn iposLT"></i>
//Posición superior derecha "iposRT"
<i class="i-fuel iconOn iposRT"></i>
Colores
Al icono superpuesto se le podran aplicar colores predeterminados, como se muestra a continuación.
Solo sera necesario aplicar una clase adicional para poder obtener el cambio de color del icono superpuesto. A continuación se mostrará el ejemplo anterior con las clases que se aplicaron.
//Color rojo, clase "icolRed"
<i class="i-fuel iconOn icolRed"></i>
//Color verde, clase "icolGreen"
<i class="i-fuel iconOn icolGreen"></i>
//Color azul, clase "icolBlue"
<i class="i-fuel iconOn icolBlue"></i>
//Color amarillo, clase "icolYellow"
<i class="i-fuel iconOn icolYellow"></i>
//Color naranja, clase "icolOrange"
<i class="i-fuel iconOn icolOrange"></i>
//Color negro, clase "icolBlack"
<i class="i-fuel iconOn icolBlack"></i>
Animación iconos
Las siguientes animaciones estaran disponibles para todos los iconos de la plataforma.
Intermitencia
En esta animación el icono aparece y desaparece de forma intermitente, como se muestra a continuación.
Para obtener la animación, ese nesario agregar la clase icolInter, la estructura del ejemplo anterior es la siguiente:
<i class="i-alarm icolInter"></i>
Rotación
En esta animación el icono rotara, es ideal para aplicar a un loader.
Para obtener la animación, ese nesario agregar la clase icolRot, la estructura del ejemplo anterior es la siguiente:
<i class="i-not-on icolRot"></i>
Movimiento 1
En esta animación el icono se mueve de manera horizontal, es perfecta para los iconos de notificacion (campana).
Para obtener la animación, ese nesario agregar la clase icolMov, la estructura del ejemplo anterior es la siguiente:
<i class="i-not-on icolMov"></i>
Iconos 3D
Galería de iconos 3D disponibles en la plataforma para los activos de los usuarios.
Vehículos
Maquinaría amarilla
Maquinaría agricola
Servicios
Transporte marítimo
Marcadores
Dentro de la plataforma, se tienen los siguientes marcadores para utilizar en el mapa.
Marcador por tipo (general, evento y alerta)
El marcador por defualt, se muestra con la sigueinte url:
https://static-1.service24gps.com/commons/svg/marker_general.php
y se muestra de la siguiente manera:
Para obtener el icono de alerta, solo es necesario pasar el parámetro ?type=3, la url deberia quedar asi.
https://static-1.service24gps.com/commons/svg/marker_general.php?type=3
y se muestra de la siguiente manera:
Para obtener el icono de evento, solo es necesario pasar el parámetro ?type=2, la url deberia quedar asi.
https://static-1.service24gps.com/commons/svg/marker_general.php?type=2
y se muestra de la siguiente manera:
