Vera - Variable Web Widget (html/php)

parkerc · July 31, 2016, 4:09pm

Hi

Please could someone help me make the following value …

http://192.168.1.234:3480/data_request?id=variableget&DeviceNum=237&serviceId=urn:upnp-org:serviceId:TemperatureSensor1&Variable=CurrentTemperature&output_format=json

… Into something that I could add some text like room name and make it all look pretty on a web page?

This will also help me to integrate more with Panic’s Status Board (http://forum.micasaverde.com/index.php?topic=31204.0)

parkerc · July 31, 2016, 4:12pm

I’ve found some code online that presents it how I would like it to look (as it will be overplayed on a black background) but can’t work out what needs to change to show values from Vera.

[code]

    <style type="text/css" media="screen">
        @font-face
        {
            font-family: "Roadgeek2005SeriesD";
        src: url("/fonts/Roadgeek 2005 Series D.otf");
        }
        body, *
        {
        }
        body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td
        {
            margin: 0;
            padding: 0;
        }
        fieldset,img
        {
            border: 0;
        }
        /* Settin' up the page */
        html, body, #main
        {
            overflow: hidden; /* */
        }
        body
        {
            color: white;
            font-family: 'Roadgeek2005SeriesD', sans-serif;
            font-size: 20px;
            line-height: 24px;
        }
        body, html, #main
        {
            background: transparent !important;
        }
        #spacepeopleContainer
        {
            width: 250px;
            height: 250px;
            text-align: center;
            background-size: 250px 187px;
        }
        #spacepeopleContainer *
        {
            font-weight: normal;
        }
        h1
        {
            font-size: 120px;
            line-height: 120px;
            margin-top: 15px;
            margin-bottom: 28px;
            color: white;
            text-shadow:0px -2px 0px black;
            text-transform: uppercase;
        }
        h2
        {
            width: 180px;
            margin: 0px auto;
            padding-top: 24px;
            font-size: 16px;
            line-height: 18px;
            color: #7e7e7e;
            text-transform: uppercase;
        }
        #month {
            font-size: 36px;
            color: rgba(0, 108, 230, 1);
        }
        h3#dow
        {
            width: 180px;
            margin: 0px auto;
            padding-top: 20px;
            font-size: 24px;
            line-height: 16px;
            color: rgba(241, 42, 22, 1);
            font-weight: normal;
        }
    </style>

</head>

<body onload="updateCal()">
    <div id="main">

        <div id="spacepeopleContainer">

            <h3 id="dow"></h3>
            <h2 id="month"></h2>
            <h1 id="day"></h1>

        </div><!-- spacepeopleContainer -->

    </div><!-- main -->
</body>
    <script type="text/javascript" charset="utf-8" async defer>
        function updateCal() {
            var weekday = new Array('Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday');
            var months = new Array('January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December');
            var todayObj = new Date();
            var docDow = document.getElementById("dow")
            var docMonth = document.getElementById("month")
            var docDay = document.getElementById("day")
            docDow.innerHTML = weekday[todayObj.getDay()];
            docMonth.innerHTML = months[todayObj.getMonth()];
            docDay.innerHTML = todayObj.getDate();
        }
    </script>

[/code]

I’ve tried to manipulate the body and script section (the above is still the original) but I can’t get anything to work. (I’m not a programmer)

parkerc · July 31, 2016, 4:28pm

This was my failed attempt - any ideas?

[code]

[/code]

parkerc · July 31, 2016, 4:42pm

If anyone is able to help more, I found this within the forum which was posted by @TisDone (http://forum.micasaverde.com/index.php/topic,12883.msg94933.html#msg94933) as example of an individual control link to turn something on or off via a web widget that he got working…

It would be great to have some on/off widgets as well.

<li><b>Theremin:</b>    <a href="#" onclick="miosExecute(12,1)">On</a> <a href="#" onclick="miosExecute(12,0)">Off</a></li>

miosExcute() is a javascript function defined within the section of his webpage:

<script type="text/javascript">
	function miosExecute(DeviceNum,Requested) {
		$.get("http://10.46.1.6:3480/data_request?id=action&output_format=xml&DeviceNum="+DeviceNum+"&serviceId=urn:upnp-org:serviceId:SwitchPower1&action=SetTarget&newTargetValue="+Requested);
	
	return false;
	}
</script>

RichardTSchaefer · July 31, 2016, 4:52pm

This is not an introduction type of problem …
There is a LOT of details to discuss how to solve this problem.
Much beyond the typical scope of this forum.

It’s a much simpler problem to cause a change on Vera … then it is to get the status of something on Vera and display it in your web page.

prophead · July 31, 2016, 4:56pm

You could write a scene which contains luup code to build a web page on the vera web server then read that page in browser or status board, that’s what I’m doing for my last triggered time status board.
|-<:)

parkerc · July 31, 2016, 4:57pm

Thanks @RTS

I had a feeling changing things was going to be difficult

My focus is to have some web widgets/panels that show basics status information and as I can get those value with a direct http request call, it would be good to be able to format them so they could work in a panel/widget .

parkerc · July 31, 2016, 5:00pm

[quote=“prophead, post:6, topic:193192”]You could write a scene which contains luup code to build a web page on the vera web server then read that page in browser or status board, that’s what I’m doing for my last triggered time status board.
|-<:)[/quote]

Hey @prophead thanks - I’m not a programmer, but I do what I can to work stuff out from examples I find online

Are you are able to share more on the lua code you use for your status board ? I just assumed if I wanted to show e.g the house temperature, it would be easier just to call that standard http request and just format the result…

prophead · July 31, 2016, 5:12pm

With the firmware in a “transition” state lua code cannot at the moment use % symbols, which I need in my code to do it right. I have some stopgap code which works around this issue, but it’s ugly. My stopgap is about twice as big as it should be if I could write lua right. I’ll package it up later for you, but it’s ugly. Once the firmware issue is resolved and code can save with %'s again, I’ll clean it up.

This is set to run every 10 minutes.

|-<:)

[quote=“parkerc, post:8, topic:193192”][quote=“prophead, post:6, topic:193192”]You could write a scene which contains luup code to build a web page on the vera web server then read that page in browser or status board, that’s what I’m doing for my last triggered time status board.
|-<:)[/quote]

Hey @prophead thanks - I’m not a programmer, but I do what I can to work stuff out from examples I find online

Are you are able to share more on the lua code you use for your status board ? I just assumed if I wanted to show e.g the house temperature, it would be easier just to call that standard http request and just format the result…[/quote]

prophead · July 31, 2016, 5:16pm

Please see UGLY code attached. But, hey, it works, and could at least show you my method.

|-<:)

[quote=“parkerc, post:8, topic:193192”][quote=“prophead, post:6, topic:193192”]You could write a scene which contains luup code to build a web page on the vera web server then read that page in browser or status board, that’s what I’m doing for my last triggered time status board.
|-<:)[/quote]

Hey @prophead thanks - I’m not a programmer, but I do what I can to work stuff out from examples I find online

Are you are able to share more on the lua code you use for your status board ? I just assumed if I wanted to show e.g the house temperature, it would be easier just to call that standard http request and just format the result…[/quote]

parkerc · August 3, 2016, 6:58am

Thanks for sharing that @prophead.

Can you think of a way we could incorporate the things you’ve done with this template on GitHub - so it follows the same look and feel of other Status Boards?

The above template looks like it creates a table too - so if there is a way to write information to that (or create the whole thing each time) that would be a nice looking widget/panel ?

prophead · August 8, 2016, 9:57pm

Now that Vera has FINALLY fixed the % encoding bug here is the less ugly code I promised for last tripped time table generation for status board.
|-<:)