Arranging data retrieved from an UNO to display on a webpage in two separate columns

Can someone direct me to where I need to look how to change the webpage
display of a queried Arduino's field inputs/setpoints?
I have about 24 individual data points I retrieve from an UNO through a browser.
The problem is the displayed values are too long for a one column output.
Is there a straightforward way to have the latter half of data points be displayed
in a second column on the webpage?
I fear this may be rather involved to accomplish code wise. But then again a simple
solution might exist.

thanks...

A table should work.

use CSS
Define two sections (or articles)
fix the section with (for example in em based on the maximum line length you want to display)
define the section style as vertical-align:top;display:inline-block
Let the browser decide to display the two blocks side by side (for example on displays in landscape) or one after the other (displays in portrait mode).

or use a definition list and split it in two colums (also with CSS / CSS3).

two examples:

a) the article Manuell and "As description list" float depending on the space of the screen.
b) two columns within the description list.

html

<!doctype html>
<html>
<head>
<title>a title</title>
<meta charset='utf-8'>
<link rel='stylesheet' href='f.css'>
<meta name="viewport" content="width=device-width">
</head>
<body>
<header>
<h1>A name of your UNO</h1>
</header>
<main>
<article>
<h2>Manuell</h2>
<p> some text</p>
<p> some text</p>
<p> some text</p>
</article>
<article>
<h2>As description list</h2>
<dl class='colums'>
  <dt>key0</dt>
  <dd>value</dd>
  <dt>key1</dt>
  <dd>value</dd>
  <dt>key2</dt>
  <dd>value</dd>
  <dt>key3</dt>
  <dd>value</dd>
  <dt>key4</dt>
  <dd>value</dd>
  <dt>key5</dt>
  <dd>value</dd>
  <dt>key6</dt>
  <dd>value</dd>
  <dt>key7</dt>
  <dd>value</dd>
  <dt>key8</dt>
  <dd>value</dd>
  <dt>key9</dt>
  <dd>value</dd>
  <dt>key10</dt>
  <dd>value</dd>
</dl>
</article>
 </main>
<footer>
<p>a footer line</p>
</footer> </body>
</html>

the style sheet: f.css

* {font-family:sans-serif}
body{margin:5px}
h1, h2{color:white;background:#8A0829;text-align:center}
h1{font-size:1.2em;margin:1px;padding:5px}
h2{font-size:1.0em}
h3{font-size:0.9em}
main{text-align:center}
article{vertical-align:top;display:inline-block;margin:0.2em;padding:0.1em;border-style:solid;border-width:thin;border-color:#C0C0C0;text-align:center;background-color:#E5E5E5;width:25em}
article h2{margin-top:0;padding-bottom:1px}
section{margin-bottom:0.2em;clear:both}
select{font-size:1.5em}
footer{font-size:0.7em;color:dimgray;background:silver;text-align:center;margin-bottom:5px} 
/* quick demo for style of a description list with two columns */
dl{columns:2; -webkit-columns:2; -moz-columns:2;}
dt {float:left; clear:left; width:5em; text-alixgn:right; font-weight:bold; color: green;}
dt::after {content: ":";}
dd{margin: 0 0 0 5em; padding: 0 0 0.5em 0;}

Solution a) would need that you split the content in two articles
Solution b) allows you to "print" your parameters from Arduino just as long list.

If you play around with some media query you can even make the columns more dynamic.
So this should just give you a first start.

1 Like

I couldn't resist.
A css with a media query, to make the number of columns more flexible:

* {font-family:sans-serif}
body{margin:5px}
h1, h2{color:white;background:#8A0829;text-align:center}
h1{font-size:1.2em;margin:1px;padding:5px}
h2{font-size:1.0em}
h3{font-size:0.9em}
main{text-align:center}
article{vertical-align:top;display:inline-block;margin:0.2em;padding:0.1em;border-style:solid;border-width:thin;border-color:#C0C0C0;text-align:center;background-color:#E5E5E5;width:20em}
article h2{margin-top:0;padding-bottom:1px}
section{margin-bottom:0.2em;clear:both}
select{font-size:1.5em}
footer{font-size:0.7em;color:dimgray;background:silver;text-align:center;margin-bottom:5px} 
/* quick demo for style of a description list with two columns */

dt {float:left; clear:left; width:5em; text-alixgn:right; font-weight:bold; color:green}
dt::after {content: ":"}
dd{margin: 0 0 0 5em; padding: 0 0 0.5em 0}

/* tablet, landscape iPad, lo-res laptops ands desktops */
@media (min-width:961px)  {
article{width:25em}
dl{columns:2; -webkit-columns:2; -moz-columns:2}
 }

1 Like

Since Op is using an UNO, I believe you are mistaken.

1 Like

So do you insert the html screen formatting code into the beginning area of the UNO sketch that responds to a web client request?

ok :))))))))))

you could combine it into one file.
But I would split the HTML and the f.css in two "files", like shown. First it reduces file size and second, you could activate browser caching to minimize bandwith and reduce load for the UNO.

And what, exactly, makes you believe that? An Uno still uses HTML to format the display, just like any web server. The formatting he wants can be done directly in the HTML, or in CSS, or a numbeer of other ways, all done in the same way as it is done for ANY webpage.

Have you considered Middleware on an old PC or Raspiberry Pi? You can really "lean-up" the Arduino code, avoid HTML formatting and provide a strong webserver environment on your LAN.
Serial output directly into NodeRED - Arduino for STM32 (stm32duino.com)

NodeRED is free, very well supported, multiplatform.

However, I do agree with your line of thinking, generally. forum.Arduino.cc provides more answers and more thought than many other sites; thus we seem to have questions that are often out-of-bounds. Much is due to the non-Arduino hardware and 3rd-party cores.

1 Like

I was under the impression any HTML used for webpage data display would be embedded in the
Arduino sketch code. If that is the case then someone like myself with no HTML coding experience would want to know the proper format for embedding the code. If it means I must
learn HTML then I will probably abort my goal and just let the data flow unformatted onto the webpage as it currently appears. This is a decision someone has to make regarding the level of involvement required to learn another coding language. I was hoping this formatting issue would have an easier solution but after looking at the HTML material presented by others on this thread I am feeling as a neophyte a little overwhelmed.
At least I now fully realize what is required to format webpage data.

I certainly appreciate your input on this formatting issue. It appears to be more involved that
I can tackle as a neophyte. I have not completely abandoned my goal but I now realize manipulating data on a webpage is a little more involved than I realized.

do you really want to give up already?
it all starts with somehow "clean" HTML. The example in #5 contains some things that are not mandatory, but I hope the structure is clear. If not - ask or google for the html tags - you will find lot of information how to structure a html.

the nice advantage of a clean html is that you can develop your style stepwise. both screenshots in #5 and #6 are made with the same html ("your data") but with slight modification of the CSS only. The css contains more that you need for the start, I just started with something I had by the hand (from one of my Arduinos). I guess you can reduce the css to 30% - just start deleting line wise from top to bottom and see what's happening after each deleted line.

In your code it says "some text". Is that where the data points need inserting?

My (partial) code:

WiFiClient client = server.available();
    if (client)
    {
      Serial.println("new client");
      String currentLine = "";
      while (client.connected())
      {
        if (client.available())
        {
          char c = client.read();
          Serial.write(c);
          if (c == '\n')
          {
            if (currentLine.length() == 0)
            {
              StackString<53> AString = StackString<53>("                                  Boiler House");
              client.println(AString.c_str());
              StackString<53> BString = StackString<53>("                                  ************");
              client.println(BString.c_str());
              client.println();
              StackString<53> CString = StackString<53>("                               Tank Room Temp =  ");
              CString.append(tank_rm_temp);
              client.println(CString.c_str());
              client.println();

Code you provided:

<html>
<head>
<title>a title</title>
<meta charset='utf-8'>
<link rel='stylesheet' href='f.css'>
<meta name="viewport" content="width=device-width">
</head>
<body>
<header>
<h1>A name of your UNO</h1>
</header>
<main>
<article>
<h2>Manuell</h2>
<p> some text</p>
<p> some text</p>
<p> some text</p>
</article>
<article>
<h2>As description list</h2>
<dl class='colums'>
  <dt>key0</dt>
  <dd>value</dd>
  <dt>key1</dt>
  <dd>value</dd>
  <dt>key2</dt>
  <dd>value</dd>
  <dt>key3</dt>
  <dd>value</dd>
  <dt>key4</dt>
  <dd>value</dd>
  <dt>key5</dt>
  <dd>value</dd>
  <dt>key6</dt>
  <dd>value</dd>
  <dt>key7</dt>
  <dd>value</dd>
  <dt>key8</dt>
  <dd>value</dd>
  <dt>key9</dt>
  <dd>value</dd>
  <dt>key10</dt>
  <dd>value</dd>
</dl>
</article>
 </main>
<footer>
<p>a footer line</p>
</footer> </body>
</html>
the style sheet: f.css

* {font-family:sans-serif}
body{margin:5px}
h1, h2{color:white;background:#8A0829;text-align:center}
h1{font-size:1.2em;margin:1px;padding:5px}
h2{font-size:1.0em}
h3{font-size:0.9em}
main{text-align:center}
article{vertical-align:top;display:inline-block;margin:0.2em;padding:0.1em;border-style:solid;border-width:thin;border-color:#C0C0C0;text-align:center;background-color:#E5E5E5;width:25em}
article h2{margin-top:0;padding-bottom:1px}
section{margin-bottom:0.2em;clear:both}
select{font-size:1.5em}
footer{font-size:0.7em;color:dimgray;background:silver;text-align:center;margin-bottom:5px} 
/* quick demo for style of a description list with two columns */
dl{columns:2; -webkit-columns:2; -moz-columns:2;}
dt {float:left; clear:left; width:5em; text-alixgn:right; font-weight:bold; color: green;}
dt::after {content: ":";}
dd{margin: 0 0 0 5em; padding: 0 0 0.5em 0;}

It is up to you.

either a list of single lines "some text" or as description list when you have something like pairs of a description ("key") and a value.

Show a screenshot of how your page looks like today and show the html.

This is going to sound stupid but when you imbed HTML code in an Arduino sketch does the compiler know how to interpret that or does it just ignore it?

There is obviously not much to the HTML screenshot. Lol

I don't understand your question. The compiler understands c++. As long as you put your html in c++ code the compiler will be able to compile that. There is nothing to interpret of the html for the compiler. If you had a display you could ask yourself, if the compiler interprets the text you print on the display.

you hided the interesting fact in the picture. Please post html in code tags.

Imho a first easy step would be to put the "Boiler House" in one list and "Control/Alarm Parameters" in another one.

Btw, if you need support how to integrate something in your code you should start to post your code. Something another one can compile easily without lot of 3rd party dependencies.

The C/C++ compiler has no knowledge of HTML, rather it treats the code as a character string. It is the responsibility of the browser to interpret and format the incoming characters.

Quick test:

Wow ... HTML in notepad. This is the junk the browser sees.

<!doctype html><html itemscope="" itemtype="http://schema.org/WebPage" lang="en"><head><meta content="IE=edge" http-equiv="X-UA-Compatible"><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta content="Search the world's information, including webpages, images, videos and more. Google has many special features to help you find exactly what you're looking for." name="description"><meta content="noodp" name="robots"><meta content="text/html; charset=UTF-8" http-equiv="Content-Type"><meta content="/logos/doodles/2022/seasonal-holidays-2022-6753651837109831.4-law.gif" itemprop="image"><meta content="Seasonal Holidays 2022" property="twitter:title"><meta content="" property="twitter:description"><meta content="summary_large_image" property="twitter:card"><meta content="@GoogleDoodles" property="twitter:site"><meta content="https://www.google.com/logos/doodles/2022/seasonal-holidays-2022-6753651837109831.2-2xa.gif" property="twitter:image"><meta content="https://www.google.com/logos/doodles/2022/seasonal-holidays-2022-6753651837109831.2-2xa.gif" property="og:image"><meta content="1150" property="og:image:width"><meta content="460" property="og:image:height"><meta content="https://www.google.com/logos/doodles/2022/seasonal-holidays-2022-6753651837109831.2-2xa.gif" property="og:url"><meta content="video.other" property="og:type"><title>Google</title><script nonce="b4IFeZLjD3TgDqSxqglrRQ">(function(){window.google={kEI:'pMiZY9fRC466qtsPjdq6yA0',kEXPI:'0,1359409,6058,207,4804,2316,383,246,5,1129120,1197769,380721,16115,28684,22431,1361,12319,2816,14764,4998,13228,3847,10622,22741,5081,1593,1279,2742,149,1103,840,1983,4314,3514,606,2023,2297,14678,3220,2844,7,4773,28444,553,1851,15324,432,3,346,1244,1,5444,149,11323,2652,4,1528,2304,7039,6344,13965,1714,5708,4163,3192,11444,2216,2980,1457,15351,1435,5824,2533,4094,4052,3,3541,1,42154,2,14022,2373,342,23024,5679,1020,2381,22667,6075,4567,6259,23418,1252,5835,14967,4333,2204,5280,445,2,2,1,10957,13669,2006,8155,7381,2,3,15964,874,9625,10008,8,1921,5784,3995,5864,6550,9365,9543,4832,7,26497,20136,14,82,891,2999,751,3015,1,6848,2009,1511,760,742,679,109,830,403,280,899,850,29,2208,1644,1125,3785,4982,142,80,243,1963,1285,2411,1183,558,814,1542,2318,2,82,1417,2,39,527,906,82,2095,350,90,62,337,96,427,937,96,42,291,2260,409,723,144,12,769,471,960,3,261,523,3,216,98,2316,135,787,175,342,246,930,1,863,599,777,947,1,856,301,18,1445,1467,441,71,3,442,96,599,552,156,1100,92,68,696,187,394,1085,1054,200,5,342,103,356,718,130,89,19,139,323,303,161,77,115,10,83,343,6,11,3,182,1,255,75,44,1,233,280,504,428,165,337,3,500,43,1,571,12,3112,797,555,260,17,93,102,37,144,282,36,12,108,18,123,148,668,279,400,2,21,1,241,664,225,39,357,74,173,399,2,265,357,317,211,569,120,2,141,477,1,6,328,9,434,668,1654,77,161,4,16,1,75,2,554,1773,5275097,5998827,2804423,3311,141,795,19736,1,298,48,2759,41,403,1,2,2,355,5,2,20,11,1,3,23946880,512,20,2737931,1303679,1964,16673,3405,5595,11,3834,5132,1767',kBL:'oABN'};google.sn='webhp';google.kHL='en';})();(function(){
var f=this||self;var h,k=[];function l(a){for(var b;a&&(!a.getAttribute||!(b=a.getAttribute("eid")));)a=a.parentNode;return b||h}function m(a){for(var b=null;a&&(!a.getAttribute||!(b=a.getAttribute("leid")));)a=a.parentNode;return b}
function n(a,b,c,d,g){var e="";c||-1!==b.search("&ei=")||(e="&ei="+l(d),-1===b.search("&lei=")&&(d=m(d))&&(e+="&lei="+d));d="";!c&&f._cshid&&-1===b.search("&cshid=")&&"slh"!==a&&(d="&cshid="+f._cshid);c=c||"/"+(g||"gen_204")+"?atyp=i&ct="+a+"&cad="+b+e+"&zx="+Date.now()+d;/^http:/i.test(c)&&"https:"===window.location.protocol&&(google.ml&&google.ml(Error("a"),!1,{src:c,glmm:1}),c="");return c};h=google.kEI;google.getEI=l;google.getLEI=m;google.ml=function(){return null};google.log=function(a,b,c,d,g){if(c=n(a,b,c,d,g)){a=new Image;var e=k.length;k[e]=a;a.onerror=a.onload=a.onabort=function(){delete k[e]};a.src=c}};google.logUrl=n;}).call(this);(function(){google.y={};google.sy=[];google.x=function(a,b){if(a)var c=a.id;else{do c=Math.random();while(google.y[c])}google.y[c]=[a,b];return!1};google.sx=function(a){google.sy.push(a)};google.lm=[];google.plm=function(a){google.lm.push.apply(google.lm,a)};google.lq=[];google.load=function(a,b,c){google.lq.push([[a],b,c])};google.loadAll=function(a,b){google.lq.push([a,b])};google.bx=!1;google.lx=function(){};}).call(this);google.f={};(function(){
document.documentElement.addEventListener("submit",function(b){var a;if(a=b.target){var c=a.getAttribute("data-submitfalse");a="1"===c||"q"===c&&!a.elements.q.value?!0:!1}else a=!1;a&&(b.preventDefault(),b.stopPropagation())},!0);document.documentElement.addEventListener("click",function(b){var a;a:{for(a=b.target;a&&a!==document.documentElement;a=a.parentElement)if("A"===a.tagName){a="1"===a.getAttribute("data-nohref");break a}a=!1}a&&b.preventDefault()},!0);}).call(this);</script><style>#gbar,#guser{font-size:13px;padding-top:1px !important;}#gbar{height:22px}#guser{padding-bottom:7px !important;text-align:right}.gbh,.gbd{border-top:1px solid #c9d7f1;font-size:1px}.gbh{height:0;position:absolute;top:24px;width:100%}@media all{.gb1{height:22px;margin-right:.5em;vertical-align:top}#gbar{float:left}}a.gb1,a.gb4{text-decoration:underline !important}a.gb1,a.gb4{color:#00c !important}.gbi .gb4{color:#dd8e27 !important}.gbf .gb4{color:#900 !important}
</style><style>body,td,a,p,.h{font-family:arial,sans-serif}body{margin:0}#gog{padding:3px 10px 0}td{line-height:.8em}.gac_m td{line-height:17px}form{margin-bottom:20px}.h{color:#1558d6}em{font-weight:bold;font-style:normal}.lst{height:25px;width:496px}.gsfi,.lst{font:18px arial,sans-serif}.gsfs{font:17px arial,sans-serif}.ds{display:-ms-inline-box;display:inline-block;margin:3px 0 4px;margin-left:4px}input{font-family:inherit}body{background:#fff;color:#000}a{color:#4b11a8;text-decoration:none}a:hover,a:active{text-decoration:underline}.fl a{color:#1558d6}a:visited{color:#4b11a8}.sblc{padding-top:5px}.sblc a{display:block;margin:2px 0;margin-left:13px;font-size:11px}.lsbb{background:#f8f9fa;border:solid 1px;border-color:#dadce0 #70757a #70757a #dadce0;height:30px}.lsbb{display:inline-block}#WqQANb a{display:inline-block;margin:0 12px}.lsb{background:url(/images/nav_logo229.png) 0 -261px repeat-x;border:none;color:#000;cursor:pointer;height:30px;margin:0;outline:0;font:15px arial,sans-serif;vertical-align:top}.lsb{overflow:visible;padding:0 6px;width:auto}.lsb:active{background:#dadce0}.lst:focus{outline:none}</style><script nonce="b4IFeZLjD3TgDqSxqglrRQ">(function(){window.google.erd={jsr:1,bv:1700,sd:true,de:true};
var h=this||self;var k,l=null!=(k=h.mei)?k:1,n,p=null!=(n=h.sdo)?n:!0,q=0,r,t=google.erd,v=t.jsr;google.ml=function(a,b,d,m,e){e=void 0===e?2:e;b&&(r=a&&a.message);if(google.dl)return google.dl(a,e,d),null;if(0>v){window.console&&console.error(a,d);if(-2===v)throw a;b=!1}else b=!a||!a.message||"Error loading script"===a.message||q>=l&&!m?!1:!0;if(!b)return null;q++;d=d||{};b=encodeURIComponent;var c="/gen_204?atyp=i&ei="+b(google.kEI);google.kEXPI&&(c+="&jexpid="+b(google.kEXPI));c+="&srcpg="+b(google.sn)+"&jsr="+b(t.jsr)+"&bver="+b(t.bv);var f=a.lineNumber;void 0!==f&&(c+="&line="+f);var g=
a.fileName;g&&(0<g.indexOf("-extension:/")&&(e=3),c+="&script="+b(g),f&&g===window.location.href&&(f=document.documentElement.outerHTML.split("\n")[f],c+="&cad="+b(f?f.substring(0,300):"No script found.")));c+="&jsel="+e;for(var u in d)c+="&",c+=b(u),c+="=",c+=b(d[u]);c=c+"&emsg="+b(a.name+": "+a.message);c=c+"&jsst="+b(a.stack||"N/A");12288<=c.length&&(c=c.substr(0,12288));a=c;m||google.log(0,"",a);return a};window.onerror=function(a,b,d,m,e){r!==a&&(a=e instanceof Error?e:Error(a),void 0===d||"lineNumber"in a||(a.lineNumber=d),void 0===b||"fileName"in a||(a.fileName=b),google.ml(a,!1,void 0,!1,"SyntaxError"===a.name||"SyntaxError"===a.message.substring(0,11)||-1!==a.message.indexOf("Script error")?3:0));r=null;p&&q>=l&&(window.onerror=null)};})();</script></head><body bgcolor="#fff"><script nonce="b4IFeZLjD3TgDqSxqglrRQ">(function(){var src='/images/nav_logo229.png';var iesg=true;document.body.onload = function(){window.n && window.n();if (document.images){new Image().src=src;}
if (!iesg){document.f&&document.f.q.focus();document.gbqf&&document.gbqf.q.focus();}
}
})();</script><div id="mngb"><div id=gbar><nobr><b class=gb1>Search</b> <a class=gb1 href="https://www.google.com/imghp?hl=en&tab=wi">Images</a> <a class=gb1 href="https://maps.google.com/maps?hl=en&tab=wl">Maps</a> <a class=gb1 href="https://play.google.com/?hl=en&tab=w8">Play</a> <a class=gb1 href="https://www.youtube.com/?tab=w1">YouTube</a> <a class=gb1 href="https://news.google.com/?tab=wn">News</a> <a class=gb1 href="https://mail.google.com/mail/?tab=wm">Gmail</a> <a class=gb1 href="https://drive.google.com/?tab=wo">Drive</a> <a class=gb1 style="text-decoration:none" href="https://www.google.com/intl/en/about/products?tab=wh"><u>More</u> &raquo;</a></nobr></div><div id=guser width=100%><nobr><span id=gbn class=gbi></span><span id=gbf class=gbf></span><span id=gbe></span><a href="http://www.google.com/history/optout?hl=en" class=gb4>Web History</a> | <a  href="/preferences?hl=en" class=gb4>Settings</a> | <a target=_top id=gb_70 href="https://accounts.google.com/ServiceLogin?hl=en&passive=true&continue=https://www.google.com/%3Fgws_rd%3Dssl&ec=GAZAAQ" class=gb4>Sign in</a></nobr></div><div class=gbh style=left:0></div><div class=gbh style=right:0></div></div><center><br clear="all" id="lgpd"><div id="lga"><img alt="Seasonal Holidays 2022" border="0" height="200" src="/logos/doodles/2022/seasonal-holidays-2022-6753651837109831.4-law.gif" title="Seasonal Holidays 2022" width="500" id="hplogo"><br></div><form action="/search" name="f"><table cellpadding="0" cellspacing="0"><tr valign="top"><td width="25%">&nbsp;</td><td align="center" nowrap=""><input value="en" name="hl" type="hidden"><input name="source" type="hidden" value="hp"><input name="biw" type="hidden"><input name="bih" type="hidden"><div class="ds" style="height:32px;margin:4px 0"><input class="lst" style="margin:0;padding:5px 8px 0 6px;vertical-align:top;color:#000" autocomplete="off" value="" title="Google Search" maxlength="2048" name="q" size="57"></div><br style="line-height:0"><span class="ds"><span class="lsbb"><input class="lsb" value="Google Search" name="btnG" type="submit"></span></span><span class="ds"><span class="lsbb"><input class="lsb" id="tsuid_1" value="I'm Feeling Lucky" name="btnI" type="submit"><script nonce="b4IFeZLjD3TgDqSxqglrRQ">(function(){var id='tsuid_1';document.getElementById(id).onclick = function(){if (this.form.q.value){this.checked = 1;if (this.form.iflsig)this.form.iflsig.disabled = false;}
else top.location='/doodles/';};})();</script><input value="AJiK0e8AAAAAY5nWtGFREvG74jP-7ugxWtjfy7nbfe0X" name="iflsig" type="hidden"></span></span></td><td class="fl sblc" align="left" nowrap="" width="25%"><a href="/advanced_search?hl=en&amp;authuser=0">Advanced search</a></td></tr></table><input id="gbv" name="gbv" type="hidden" value="1"><script nonce="b4IFeZLjD3TgDqSxqglrRQ">(function(){var a,b="1";if(document&&document.getElementById)if("undefined"!=typeof XMLHttpRequest)b="2";else if("undefined"!=typeof ActiveXObject){var c,d,e=["MSXML2.XMLHTTP.6.0","MSXML2.XMLHTTP.3.0","MSXML2.XMLHTTP","Microsoft.XMLHTTP"];for(c=0;d=e[c++];)try{new ActiveXObject(d),b="2"}catch(h){}}a=b;if("2"==a&&-1==location.search.indexOf("&gbv=2")){var f=google.gbvu,g=document.getElementById("gbv");g&&(g.value=a);f&&window.setTimeout(function(){location.href=f},0)};}).call(this);</script></form><div id="gac_scont"></div><div style="font-size:83%;min-height:3.5em"><br></div><span id="footer"><div style="font-size:10pt"><div style="margin:19px auto;text-align:center" id="WqQANb"><a href="/intl/en/ads/">Advertising Programs</a><a href="/services/">Business Solutions</a><a href="/intl/en/about.html">About Google</a></div></div><p style="font-size:8pt;color:#70757a">&copy; 2022 - <a href="/intl/en/policies/privacy/">Privacy</a> - <a href="/intl/en/policies/terms/">Terms</a></p></span></center><script nonce="b4IFeZLjD3TgDqSxqglrRQ">(function(){window.google.cdo={height:757,width:1440};(function(){var a=window.innerWidth,b=window.innerHeight;if(!a||!b){var c=window.document,d="CSS1Compat"==c.compatMode?c.documentElement:c.body;a=d.clientWidth;b=d.clientHeight}a&&b&&(a!=google.cdo.width||b!=google.cdo.height)&&google.log("","","/client_204?&atyp=i&biw="+a+"&bih="+b+"&ei="+google.kEI);}).call(this);})();</script> <script nonce="b4IFeZLjD3TgDqSxqglrRQ">(function(){google.xjs={ck:'xjs.hp.JRDAiPnp180.L.I11.O',cs:'ACT90oFmsVfsfklctjpP_kUgitptvOReCQ',excm:[]};})();</script>  <script nonce="b4IFeZLjD3TgDqSxqglrRQ">(function(){var u='/xjs/_/js/k\x3dxjs.hp.en_US.UfODvAsspjM.O/am\x3dAADIBABQAGAB/d\x3d1/ed\x3d1/rs\x3dACT90oE_oB05ccF2HBqSdijmxR-VxM7QRw/m\x3dsb_he,d';var amd=0;
var d=this||self,e=function(a){return a};var g;var l=function(a,b){this.g=b===h?a:""};l.prototype.toString=function(){return this.g+""};var h={};
function m(){var a=u;google.lx=function(){p(a);google.lx=function(){}};google.bx||google.lx()}
function p(a){google.timers&&google.timers.load&&google.tick&&google.tick("load","xjsls");var b=document;var c="SCRIPT";"application/xhtml+xml"===b.contentType&&(c=c.toLowerCase());c=b.createElement(c);if(void 0===g){b=null;var k=d.trustedTypes;if(k&&k.createPolicy){try{b=k.createPolicy("goog#html",{createHTML:e,createScript:e,createScriptURL:e})}catch(q){d.console&&d.console.error(q.message)}g=b}else g=b}a=(b=g)?b.createScriptURL(a):a;a=new l(a,h);c.src=a instanceof l&&a.constructor===l?a.g:"type_error:TrustedResourceUrl";var f,n;(f=(a=null==(n=(f=(c.ownerDocument&&c.ownerDocument.defaultView||window).document).querySelector)?void 0:n.call(f,"script[nonce]"))?a.nonce||a.getAttribute("nonce")||"":"")&&c.setAttribute("nonce",f);document.body.appendChild(c);google.psa=!0};google.xjsu=u;setTimeout(function(){0<amd?google.caft(function(){return m()},amd):m()},0);})();function _DumpException(e){throw e;}
function _F_installCss(c){}
(function(){google.jl={blt:'none',chnk:0,dw:false,dwu:true,emtn:0,end:0,ico:false,ikb:0,ine:false,injs:'none',injt:0,injth:0,injv2:false,lls:'default',pdt:0,rep:0,snet:true,strt:0,ubm:false,uwp:true};})();(function(){var pmc='{\x22d\x22:{},\x22sb_he\x22:{\x22agen\x22:true,\x22cgen\x22:true,\x22client\x22:\x22heirloom-hp\x22,\x22dh\x22:true,\x22ds\x22:\x22\x22,\x22fl\x22:true,\x22host\x22:\x22google.com\x22,\x22jsonp\x22:true,\x22msgs\x22:{\x22cibl\x22:\x22Clear Search\x22,\x22dym\x22:\x22Did you mean:\x22,\x22lcky\x22:\x22I\\u0026#39;m Feeling Lucky\x22,\x22lml\x22:\x22Learn more\x22,\x22psrc\x22:\x22This search was removed from your \\u003Ca href\x3d\\\x22/history\\\x22\\u003EWeb History\\u003C/a\\u003E\x22,\x22psrl\x22:\x22Remove\x22,\x22sbit\x22:\x22Search by image\x22,\x22srch\x22:\x22Google Search\x22},\x22ovr\x22:{},\x22pq\x22:\x22\x22,\x22rfs\x22:[],\x22sbas\x22:\x220 3px 8px 0 rgba(0,0,0,0.2),0 0 0 1px rgba(0,0,0,0.08)\x22,\x22stok\x22:\x22Hu5yXfRbumzBiOPVfULVacTKWkE\x22}}';google.pmc=JSON.parse(pmc);})();</script>        </body></html>