Question about webpage refreshing

Archive
21

@ harleydk -

You codes works well! I can refresh my temperature value without refreshing complete webpage now. Thank you very much!!!

But I still have a problem after inserting a picture in webpage, the webpage seems always loading. The picture on the webpage works not well.

how can I let the picture stay fixed , I only want to refresh the temperature value, I don’t want to see the situation that webpage is always loading, if I run my webpag (see picture).

the html file is as follow, I have only insert a image and CSS file in the html file.


<!DOCTYPE html>
<html>
<head>
    <title>Temperature test page</title>
    <link rel="stylesheet" type="text/css" href="index_styling.css" />
    <img src="TYP400102.bin" alt="TYP400102" width="100" height="100">
    <!--Load jquery for ajax functionality-->
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script type="text/javascript">

        //        The code in our 'ready' function runs when the page has loaded
        $(document).ready(function () {

            //            We'll use the windows-object's setInterval function to run our update code very 5000 milliseconds
            window.setInterval(function () {

                //            We'll use the jquery ajax $get function to retrieve our data from the data file
                $.get('data.txt', function (data) {

            ..............................................................
           .................................................................
          ....................................................................
22

@ Architect -

I’m sorry, I don’t understand what is " scratch"?

Can you show me a example? thank you very much!

23

Something like this:

string correctString = "{ \"T1\": " + T1_String + ", \"T2\": " + T2_String + ... + " }";

you need to fill the rest of the values

24

Hello workhard10,

it’s kind of difficult to say without knowing more about your setup, but you could try this,

go to Image to base64 data-URI converter and upload your image and use the resulting in your web page instead of the one you have now. Example code below. This will put your image inline, so you won’t have to reference it externally. Usually not the best of solutions, but, again, without knowing more about your setup it’s hard to help further. Hope it works out for you.


<!DOCTYPE html>
<html>
<head>
    <title>Temperature test page</title>
    <link rel="stylesheet" type="text/css" href="index_styling.css" />
   <img width="275" height="95" title="" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAARMAAABfCAMAAAD8mtMpAAAC/VBMVEUBIrIZH6qfBSGwAyWSDiTEAym9DifSCyysGCiQISvJES3eDDLMFinYGDDdFyzkGjbmGzGhMTePNjwsSa3JKDQYTukOZh3iKDKKQUPvKzHwKjnoLUDFODyxQUTAQEPuNT3kOEDeO0anS0xJYKH2OTf0Oz6fVVY5aN3zRErSXAD3SkflUE2cZmTgU1tGg1DAYV32U1HXXVyVcG60aGO1cSLOcAKfeEncbgD4YVaugED5Z1+1enfNfxGqf3x5ibPjfACgh168hTKXi3nJfHuih4WdjXP5dGnJih7mhQDvenOKla2ck5Bcqm7wjwDnkQhxne++llbfiYa6m1/JmkHyioDwmQDZnSe+nZnnoA7Wmpb6nwDyoQy+p3jTqUa5qpD5pgDoqB+5q6v4npH/rgCps834rxD/tADiuDvWs7D+uQ3/wCLiwXTPwqSZ1az+xjWw0rvjyYrg0K722YvH6tL35bX98tT99uEAQOKlpqNIh/03dPsAVP1UivYqSvC7vLnn6ebr7ert8Pjw8+8iYvojXvr19/P5+/j3+/4aR 

rest of image data omitted - wall of text etc.

=O1cSLOcAKfeEncbgD4YVaugED5Z1+1enfNfxGqf3x5ibPjfACgh168hTKXi3nJfHuih4WdjXP5dGnJih7mhQDvenOKla2ck5Bcqm7wjwDnkQhxne++llbfiYa6m1/JmkHyioDwmQDZnSe+nZnnoA7Wmpb6nwDyoQy+p3jTqUa5qpD5pgDoqB+5q6v4npH/rgCps834rxD/tADiuDvWs7D+uQ3/wCLiwXTPwqSZ1az+xjWw0rvjyYrg0K722YvH6tL35bX98tT99uEAQOKlpqNIh/03dPsAVP1UivYqSvC7vLnn6ebr7ert8Pjw" />
    <!--Load jquery for ajax functionality-->
25

I suspect you will find more information if you look at the requests your client is making - install netmon and look at the HTTP requests and you’ll see what might be going on.

But the first thing I would try is to remove the IMG reference and show that the reloading is actually going on. Then I would change your page logic to wait for say 5 seconds (enough time for the image to actually load) before it starts calling the refresh. I suspect that this is just Firefox saying there’s data still being loaded so it displays the spinning icon.

26

@ harleydk -

thank you very much for your suggestion!!

I have tried your method, I have found the problem. The website which you gave tells me that the maximal size of picture is 32768 bytes. My picture was too big (it was 181KB). I have reduced the size of picture(29 KB). It’s running much better now! (see picture).

I have some questions:

Qusetion1:
You can see a heating-system in the picture, and the heating-system is actually a Background image (size: 29KB). Because of reducing the size of image I find the quality of image is bad and not clear. It is possible that the quality of image is good, but the size of image is small?

Question2:
There are 16 temperatures in the heating-system, and the resolution of temperature is 0.1. but I find that the value “0” and Decimal point will be not always showed. For example “T16: 20.0” will be showed as “T16: 20” and the last value “0” and decimal point will be lost. why? How can I show the “0” and Decimal point, when T16 is 20.0?

Question 3:
I have defined 16 temperatures, and the define in data.txt file will be showed like as follow:


{ "T1": A1, "T2": A2, "T3": A3, "T4": A4, "T5": A5, "T6": A6, "T7": A7, "T8": A8,
  "T9": B1, "T10": B2, "T11": B3, "T12": B4, "T13": B5, "T14": B6, "T15": B7, "T16": B8 }

the “A1…A8” and “B1…B8” will be updataed(replaced) with real temperature values every 5 scend periodly and the data.txt file runs well in my VisualStudio project.

But actually I have also defined something like as follow at the first time:


{ "T1": value1, "T2": value2, "T3": value3, "T4": value4, "T5": value5, "T6": value6, "T7": value7, "T8": value8,
  "T9": value9, "T10": value10, "T11": value11, "T12": value12, "T13":value13, "T14": value14, "T15": value15, "T16": value16 }

with the above data.txt I can olny show T1 to T9 correctly, and the T10 to T16 are always same as T10. why? I find that the “0” is very special,
I should avoid write something with “0” in the data.txt. if not, it will happen something wrong, when the data.txt is updated.
but I want to write “value1…value16” in the data.txt file, how can I resolve the problem?

27

@ Brett -

thank you for help, I have installed a “Microsoft Network Monitor 3.4”. I can watch the HTTP requests now.

28

Is that a jpg-image? Try and save as png. Ideally an image like that should be a svg image. Low-size, crystal clear, scalable. Here’s some inspiration: http://svg-edit.googlecode.com/svn/branches/2.6/editor/svg-editor.html

Format the numbers. Maybe this can be of help to you: Google Code Archive - Long-term storage for Google Code Project Hosting.

Please link to your webpage so I can read the page source.

29

@ harleydk -

About Question 1: It is resolved.

About Question 2:

I have tried the “number formatting and parsing plugin for jQuery”, but not successful. I can give you my project codes. The project is about a heating system, there are 16 temperature value, I use random function for the 16 temperatur. the random function produce random value 0 to 100. How can I show these values with resolution 0.1 (for example T1:10.0, T2: 24.0)?

About Question 3:
here is the project codes link ( Microsoft OneDrive - Access files anywhere. Create docs with free Office Online. ), the project is edited specailly by myself. I think it can run in your EMX, if you have EMX/Cobra/Spider Kit. I hope you can help me, how I can define the data.txt as fowllow


{ "T1": value1, "T2": value2, "T3": value3, "T4": value4, "T5": value5, "T6": value6, "T7": value7, "T8": value8,
  "T9": value9, "T10": value10, "T11": value11, "T12": value12, "T13":value13, "T14": value14, "T15": value15, "T16": value16 }

something about my project code:
if you type the IP of Cobra/Spider in Firefox, you can can see my heating system. for example my IP of spider is 192.168.178.204, and my IPv4 is 192.168.178.74

30

@ andre.m -

no, it doesn’t work, I have also tried with “New Image —> PNG Image” last week.

31

@ andre.m -

thank you so much!!! It works.

I have change the extension of png file from *.png to *.dat and write EventCallback as follow:


        private static void TYP400101_PNG(object sender, HttpServer.EventCallbackEventArgs e)
        {
            e.BinaryResponse = Resources.GetBytes(Resources.BinaryResources.TYP400101_PNG);
            e.ResponseContentType = "image/png";
        }

what about “SVG” file? Can netmf support “SVG” file? I have checked the “HttpHelper.cs” of webserver and I find the method as follow:
The webserver is from WouterH’s example 186 (linke: http://www.tinyclr.com/codeshare/entry/186).


        /// <summary>
        /// Returns a matching content type for the given file extension.
        /// </summary>
        /// <param name="extension">The file extension.</param>
        /// <returns>A matching content type or null for unsupported extensions.</returns>
        /// <remarks>See http://reference.sitepoint.com/html/mime-types-full</remarks>
        public static string GetContentType(string extension)
        {
            switch (extension.ToLower())
            {
                case ".htm":
                case ".html":
                case ".htmls":
                    return "text/html";
                case ".js":
                    return "text/javascript";
                case ".jpe":
                case ".jpg":
                case ".jpeg":
                    return "image/jpeg";
                case ".gif":
                    return "image/gif";
                case ".png":
                    return "image/png";
                case ".ico":
                    return "image/x-icon";
                case ".pdf":
                    return "application/pdf";
                case ".arj":
                case ".lzh":
                case ".exe":
                case ".rar":
                case ".tar":
                case ".zip":
                    return "application/octet-stream";
                case ".mid":
                case ".midi":
                    return "application/x-midi";
                default:
                    return null;
            }
        }

There is no SVG type in the method. Do you have any idea, how to use a SVG file?
Or because netmf can’t support the SVG file, I can’t use SVG file for project for ever.

32

@ andre.m -

thank you !!! the SVG file works too now. After setting the PNG file I have a new problem.

I set the “TYP400101_PNG.dat” as background image, I want to move the “Temperature parameter” to the right position in the imagine.

but I can’t see the background image from design view, why? (SVG file has also the problem)

if I can’t see the background image, it is very hard for me to move the “Temperature parameter” to to the right position in the imagine. Can you help me?

33

@ andre.m -

I don’t understand it.

How can I add a handler for this *.data file?

34

@ andre.m -

The webserver is from WouterH’s example 186 (linke: http://www.tinyclr.com/codeshare/entry/186).

here is my project codes link ( Microsoft OneDrive - Access files anywhere. Create docs with free Office Online. )

35

@ andre.m -

yes.

If I run my EMX, I can see a “heating system” after typing the IP of EMX in firefox.

36

@ andre.m -

I have done it in my project, but it doen’t work, I still can’t see the background from design view, when I edit the source of html file.

only After running my project and typing IP in firefox I can see good background from webpage.

37

@ andre.m -

yes.

38

@ andre.m -

I have also tried the *.bin image. I can see the background of *.bin image, when I edit the html source.

I can’t see background of SVG image and PNG image, when I edit the html source.

39

@ andre.m -

anyway thank you very much for your help today!!!

40

what is the Content-Type of *.php file? I didn’t find it from the link, that you gave me.