Thread Rating:
  • 1 Vote(s) - 5 Average
  • 1
  • 2
  • 3
  • 4
  • 5
10 - HTML y programación
#1
Buenas compañer@s, en el minicursillo de hoy vamos a ver como crear funciones y programar dentro de una página web, algunos os preguntaréis para que sirve esto, pues para poder hacer con vuestro servidor lo que os apetezca, antes de seguir os recomiendo que veáis este vídeo creado por Roberto, el cual explica muy bien y en el cual podéis ver algunas de las cosas que podéis hacer.

Hoy vamos a crear una página web, la cual nos va a mostrar los datos de nuestra estación metereológica virtual, una de las cosas que vamos a hacer es que la página web sea dinámica, es decir que según los datos que aparezcan haremos que cambien las imágenes que nos muestra la estación.

Para ello lo primero que debemos hacer es bajarnos esta carpeta y pegarla en la carpeta raíz de nuestro servidor, descomprimida que os conozco  Wink .

Ahora abriremos el configurador de windows de excontrol y crearemos los diferentes sensores que necesitamos para crear nuestra estación.
   

Luego entraremos en el código en la sección NewMeteo()
   

Y guardamos configurando correctamente nuestra ip y datos del server.

Después creamos el ins, con el programa insGenerator de Roberto, aquí tenéis más información.
Central-->CargarNuevaRCC-->Seleccionamos el Rcc que acabamos de crear
y nos quedará algo así:
   
Ahora guardamos y copiamos este ins en la carpeta wwroot y reiniciamos el server.

Creamos una nueva página web en Visual Studio

Os explico que vamos a hacer, vamos a crear una tabla en la cual vamos a mostrar los datos de nuestra estación, para los que no recordeís como se hacen las tablar en HTML, pasaros por este enlace.

Vamos a crear la tabla y vamos a introducir la imagen de la temperatura y su valor
Code:
<table class="TabControl">          
               <tr>
                   <td class="ImgLogo" >
                       <img alt='' src='../Img/s_temperatura.png' class='CmdControl' />
                   </td>
                   <td><h2> <%=Temperatura() %></h2></td>                      
               </tr>
</table>

Creamos una función llamada Temperatura que devolverá la temperatura actual
Code:
Function Temperatura() As String
           Return SensorValue(0, 0) + "ºC"
       End Function

Ahora vamos a hacer algo un poco más complicado, como hacer que varíe la imagen de la dirección del viento según su posición.
en nuestra tabla, añadiremos las respectivas funciones.
Code:
<tr>
                   <td class="ImgLogo" >
                       <%=ImagenDireccionViento() %></td>
                   <td><h2> <%=DireccionViento() %></h2></td>
              </tr>

Aquí vemos que realiza cada función.
En la función DireccionViento(), obtenemos los valores de la Aemet y los traducimos, agradecer a Domobur este cacho de código
Code:
Function DireccionViento() As String
            Select Case SensorValue(0, 3)

                Case 1
                    Return "Norte"
                Case 2
                    Return "NorEste"
                Case 3
                    Return "Este"
                Case 4
                    Return "SurEste"
                Case 5
                    Return "Sur"
                Case 6
                    Return "SurOeste"
                Case 7
                    Return "Oeste"
                Case 8
                    Return "NorOeste"
                Case Else
                    Return "Error en la lectura"
            End Select
 End Function
Como vemos esta función nos devolverá el nombre de la dirección del viento

y en la función ImagenDireccionViento(), vamos a hacer que se cambie la imagen según su direccion
Code:
     Function ImagenDireccionViento() As String
            Select Case SensorValue(0, 3)

                Case 1
                    Return "<img alt='' src='../meteo/norte.png' class='CmdControl'/>"

                Case 2
                    Return "<img alt='' src='../meteo/noreste.png' class='CmdControl'/>"

                Case 3
                    Return "<img alt='' src='../meteo/este.png' class='CmdControl'/>"

                Case 4
                    Return "<img alt='' src='../meteo/sureste.png' class='CmdControl'/>"

                Case 5
                    Return "<img alt='' src='../meteo/sur.png' class='CmdControl'/>"

                Case 6
                    Return "<img alt='' src='../meteo/suroeste.png' class='CmdControl'/>"

                Case 7
                    Return "<img alt='' src='../meteo/oeste.png' class='CmdControl'/>"

                Case 8
                    Return "<img alt='' src='../meteo/noreste.png' class='CmdControl'/>"

                Case Else
                    Return "<img alt='' src='../meteo/viento.png' class='CmdControl'/>"
            End Select

        End Function
Como veis jugamos con la ruta de enlace de la imagen, si no os acordáis tenéis aquí una chuleta.

Entonces vamos a añadir todo el código para que podáis ver como funciona.
Code:
<%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/Site.Master" CodeBehind="Pan20.aspx.vb" Inherits="WebApp.Pan20" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="FeaturedContent" runat="server">
   <section class="featured">
       <div class="content-wrapper"  id="Inicio">
           <hgroup class="title"><h1  >Estación Metereológica</h1></hgroup>
       </div>
   </section>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="server">
   <asp:Panel ID="PanelControls" runat="server" CssClass="background">
      <table class="TabControl">          
               <tr>
                   <td class="ImgLogo" >
                       <img alt='' src='../Img/s_temperatura.png' class='CmdControl' />
                   </td>
                   <td><h2> <%=Temperatura() %></h2></td>                      
               </tr>
  <tr>
<tr>
                   <td class="ImgLogo" >
                       <img alt='' src='../Img/temperatura.png' class='CmdControl' />
                   </td>
                   <td><h2> <%=TemperaturaMax() %></h2></td>                      
               </tr>
<tr>
                   <td class="ImgLogo" >
                       <img alt='' src='../Img/temperaturades.png' class='CmdControl' />
                   </td>
                   <td><h2> <%=TemperaturaMin() %></h2></td>                      
               </tr>
                <tr>
                   <td class="ImgLogo" >
                       <img alt='' src='../Img/s_humedad.png' class='CmdControl' />
                   <td><h2> <%=Humedad() %></h2></td>    
 <tr>
                   <td class="ImgLogo" >
                       <img alt='' src='../meteo/viento.png' class='CmdControl' />
                   </td>
                   <td><h2> <%=VelocidadViento() %></h2></td>                      
               </tr>
                <tr>
                   <td class="ImgLogo" >
                       <%=ImagenDireccionViento() %></td>
                   <td><h2> <%=DireccionViento() %></h2></td>
              </tr>
                  <tr>
                   <td class="ImgLogo" ><%=ImagenLluviaActual() %>
                       </td>
                   <td><h2> <%=LluviaActual() %></h2></td>
              </tr>
                 <tr>
                   <td class="ImgLogo" ><%=ImagenLluviaDia() %>
                       </td>
                   <td><h2> <%=LluviaDia() %></h2></td>
              </tr>
                  <tr>
                   <td class="ImgLogo" > <img alt='' src='../meteo/11.png' class="stretch" alt="" /></td>
                   <td><h2> Orto <%=Orto() %></h2></td>
              </tr>
                     <tr>
                   <td class="ImgLogo" ><img alt='' src='../meteo/11n.png' class="stretch" alt="" /> </td>
                       
                   <td><h2> Ocaso <%=Ocaso() %></h2></td>
              </tr>
             </table>

   </asp:Panel>
   <asp:UpdatePanel ID="UpdatePanel1" runat="server">
       <ContentTemplate><asp:Timer ID="Timer1" runat="server" Interval="4000"></asp:Timer>
     
       </ContentTemplate>
   </asp:UpdatePanel>
    <script runat="server">
        'ALGUNAS DE LAS FUNCIONES SON:

        'CircuitValue(central As Integer nuemro de central empezando pro cero , index As Integer numero de circuito)
        'CondicionadoValue(central As Integer, index As Integer) As Boolean
        'SetPointValue(central As Integer, index As Integer) As Integer
        'AlarmaValue(central As Integer, index As Integer) As Byte
        'SensorValue(central As Integer, index As Integer) As Double
        'Internal_Connection() As Boolean
        'Public_Ip() As String

        Function Temperatura() As String
            Return SensorValue(0, 0).ToString + " ºC"
        End Function

        Function TemperaturaMax() As String
            Return SensorValue(0, 10).ToString + " ºC Máxima"
        End Function

        Function TemperaturaMin() As String
            Return SensorValue(0, 11).ToString + " ºC Mínima"
        End Function

        Function Humedad() As String
            Return SensorValue(0, 1).ToString + " %"
        End Function

        Function VelocidadViento() As String
            Return SensorValue(0, 2).ToString + " Km/h"
        End Function

        Function ImagenDireccionViento() As String
            Select Case SensorValue(0, 3)

                Case 1
                    Return "<img alt='' src='../meteo/norte.png' class='CmdControl'/>"

                Case 2
                    Return "<img alt='' src='../meteo/noreste.png' class='CmdControl'/>"

                Case 3
                    Return "<img alt='' src='../meteo/este.png' class='CmdControl'/>"

                Case 4
                    Return "<img alt='' src='../meteo/sureste.png' class='CmdControl'/>"

                Case 5
                    Return "<img alt='' src='../meteo/sur.png' class='CmdControl'/>"

                Case 6
                    Return "<img alt='' src='../meteo/suroeste.png' class='CmdControl'/>"

                Case 7
                    Return "<img alt='' src='../meteo/oeste.png' class='CmdControl'/>"

                Case 8
                    Return "<img alt='' src='../meteo/noreste.png' class='CmdControl'/>"

                Case Else
                    Return "<img alt='' src='../meteo/viento.png' class='CmdControl'/>"
            End Select

        End Function

        Function DireccionViento() As String
            Select Case SensorValue(0, 3)

                Case 1
                    Return "Norte"
                Case 2
                    Return "NorEste"
                Case 3
                    Return "Este"
                Case 4
                    Return "SurEste"
                Case 5
                    Return "Sur"
                Case 6
                    Return "SurOeste"
                Case 7
                    Return "Oeste"
                Case 8
                    Return "NorOeste"
                Case Else
                    Return "Error en la lectura"
            End Select

        End Function
        Function LluviaActual() As String
            Return SensorValue(0, 4).ToString + " mm/hora"
        End Function

        Function ImagenLluviaActual() As String
            If SensorValue(0, 4) < 1 Then
                Return "<img alt='' src='../meteo/14.png' class='CmdControl'/>"
            End If
            If SensorValue(0, 4) >= 1 And SensorValue(0, 4) < 3 Then
                Return "<img alt='' src='../meteo/24.png' class='CmdControl'/>"
            End If
            If SensorValue(0, 4) >= 3 And SensorValue(0, 4) < 6 Then
                Return "<img alt='' src='../meteo/44.png' class='CmdControl'/>"
            End If
            If SensorValue(0, 4) >= 6 Then
                Return "<img alt='' src='../meteo/64.png' class='CmdControl'/>"
            End If
            Return ""
        End Function

        Function LluviaDia() As String
            Return SensorValue(0, 5).ToString + " mm/día"
        End Function

        Function ImagenLluviaDia() As String
            If SensorValue(0, 5) < 1 Then
                Return "<img alt='' src='../meteo/14.png' class='CmdControl'/>"
            End If
            If SensorValue(0, 5) >= 1 And SensorValue(0, 5) < 3 Then
                Return "<img alt='' src='../meteo/24.png' class='CmdControl'/>"
            End If
            If SensorValue(0, 5) >= 3 And SensorValue(0, 5) < 6 Then
                Return "<img alt='' src='../meteo/44.png' class='CmdControl'/>"
            End If
            If SensorValue(0, 5) > 6 Then
                Return "<img alt='' src='../meteo/64.png' class='CmdControl'/>"
            End If
            Return ""
        End Function

        Function Orto() As String
            Return SensorValue(0, 6).ToString + ":" + SensorValue(0, 8).ToString
        End Function

        Function Ocaso() As String
            Return SensorValue(0, 7).ToString + ":" + SensorValue(0, 9).ToString
        End Function


   </script>
</asp:Content>

Y este es el resultado final
   
#2
Esta de lujo... gracias :-)
#3
Eres un crack

2 gigas pa ti solo te mereces.
#4
Espectacular.

Gracias por enseñarnos de manera fácil a los que más nos cuesta

ONEPLUS 5T


Forum Jump:


Users browsing this thread: 1 Guest(s)