Detect browser type and format arduino web page accordingly

Hi

I am running a Arduino Mega 2560 with Ethernet shield (Wiznet chip)
(and using Arduino IDE 1.6.1).

I have a arduino web served page that when viewed in any browser currently looks like this

socket1on socket1off
socket2on socket2off
socket3on socket3off
socket4on socket4off
socket5on socket5off
socket6on socket6off
socket7on socket7off
socket8on socket8off
socket9on socket9off
etc …
etc …
etc …
etc …

This tall thin layout is ideal for viewing in a mobile browser.

However I desire two tall thin columns, side by side, when viewed with the laptop browser.
Because the page is taller than the height of a laptop screen, and two columns would negate any need for downward scrolling on the laptop.

To achieve these two different presentations, on these two browser types, while continuing to serve only one page from the arduino server, I would like to detect whether the arduino page is being served to a mobile browser or a large screen (laptop) browser by using code similar to this

(see http://stackoverflow.com/questions/11381673/detecting-a-mobile-browser )

window.mobilecheck = function() {
  var check = false;
  (function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))check = true})(navigator.userAgent||navigator.vendor||window.opera);
  return check;
}

and then, if the page is not being served to a mobile device, insert some some html that cause the page to be split into two columns in a way suggested by the following

void loop (
    
if (readString.indexOf("window.mobilecheck") >0){client.println("<div>");}
     
client.println("<a href='/?0on'>0on</a>&nbsp<a href='/?0off'>0off</a>
"); 
client.println("<a href='/?1on'>1on</a>&nbsp<a href='/?1off'>1off</a>
"); 

if (readString.indexOf("window.mobilecheck") >0){client.println("</div><div>");}

client.println("<a href='/?2on'>2on</a>&nbsp<a href='/?2off'>2off</a>
"); 
client.println("<a href='/?3on'>3on</a>&nbsp<a href='/?3off'>3off</a>
");


if (readString.indexOf("window.mobilecheck") >0){client.println("</div>");}

)

Questions are
o How to test for mobile browser with slightly shorter script / code than above?
o Anyone any idea how integrate the above javascript into the page?
o Will "if (readString.indexOf(“window.mobilecheck”)"work in the suggested way?

Thank you

:slight_smile:

Have a look at the hacklogs on my system at http://www.2wg.co.nz for a few examples of html requests. For example this file:

http://www.2wg.co.nz/HACKLOGS/2015/04/HACK0406.TXT/

The user-agent string indicates the technology and browser of the user. Send one or two invalid html requests to my system to see what my system receives and writes into the hack logs. Don't send three invalid requests or your IP address will be banned and you will not be able to retrieve the data you want from the current hack log file.

Also check http://useragentstring.com/ for more information.

Cheers

Catweazle NZ

Thank you CatweazleNZ :slight_smile:

I have checked those out and will do again.

Has anyone got any specific code to achieve this?