This example demonstrates how to enhance results by incorporating evidence
from client-side JavaScript.
This approach is required to perform certain tasks such as identify iPhone
and iPad models or get the screen resolution for a desktop device.
Properties containing JavaScript snippets are populated by engines in the
Pipeline and these are then bundled together into a single JavaScript
block by the 'JsonBuilder' and 'JavaScriptBuilder' elements.
This JavaScript is then used to obtain the additional evidence from the
client and pass it back to the server. The updated results can then be
used immediately on the client-side or on subsequent requests to the server.
30 from fiftyone_devicedetection.devicedetection_pipelinebuilder
import DeviceDetectionPipelineBuilder
31 from fiftyone_pipeline_core.web
import webevidence
39 resourceKey =
"!!YOUR_RESOURCE_KEY!!" 41 if resourceKey ==
"!!YOUR_RESOURCE_KEY!!":
43 You need to create a resource key at 44 https://configure.51degrees.com and paste it into the code, 45 'replacing !!YOUR_RESOURCE_KEY!! 46 To get a resourcekey with the properties used in this example go to https://configure.51degrees.com/fzzSBD8R 52 javascriptBuilderSettings = {
56 pipeline = DeviceDetectionPipelineBuilder({
"resourceKey": resourceKey,
"javascriptBuilderSettings": javascriptBuilderSettings}).build()
58 from flask
import Flask, request
65 @app.route(
'/json', methods=[
'POST'])
69 flowData = pipeline.create_flowdata()
74 flowData.evidence.add_from_dict(webevidence(request))
82 return json.dumps(flowData.jsonbundler.json)
86 def getValueHelper(flowdata, engine, propertyKey):
88 engineProperties = getattr(flowdata, engine)
90 propertyValue = getattr(engineProperties, propertyKey)
92 if propertyValue.has_value():
93 return propertyValue.value()
95 return propertyValue.no_value_message()
104 flowData = pipeline.create_flowdata()
109 flowData.evidence.add_from_dict(webevidence(request))
117 output =
"<h1>Client side evidence</h1>" 121 output += flowData.javascriptbuilder.javascript
122 output +=
"</script>" 125 output +=
"<p><b>The following values are determined by sever-side device detection on the first request:</b></p>" 127 output +=
"<b>Hardware Vendor:</b> " + getValueHelper(flowData,
"device",
"hardwarevendor")
129 output +=
"<b>Hardware Name:</b> " + str(getValueHelper(flowData,
"device",
"hardwarename"))
131 output +=
"<b>Device Type:</b> " + getValueHelper(flowData,
"device",
"devicetype")
133 output +=
"<b>Platform Vendor:</b> " + getValueHelper(flowData,
"device",
"platformvendor")
135 output +=
"<b>Platform Name:</b> " + getValueHelper(flowData,
"device",
"platformname")
137 output +=
"<b>Browser Vendor:</b> " + getValueHelper(flowData,
"device",
"browservendor")
139 output +=
"<b>Browser Name:</b> " + getValueHelper(flowData,
"device",
"browsername")
141 output +=
"<b>Browser Version:</b> " + getValueHelper(flowData,
"device",
"browserversion")
143 output +=
"<b>Screen width (pixels):</b> " + str(getValueHelper(flowData,
"device",
"screenpixelswidth"))
145 output +=
"<b>Screen height (pixels):</b> " + str(getValueHelper(flowData,
"device",
"screenpixelsheight"))
150 <p>The information shown below is determined from JavaScript running on the client-side that is able to obtain additional evidence. If no additional information appears then it may indicate an external problem such as JavaScript being disabled in your browser.</p> 152 <p>Note that the 'Hardware Name' field is intended to illustrate detection of Apple device models as this cannot be determined server-side. This can be tested to some extent using most emulators such as those in the 'developer tools' menu in Google Chrome. However, using real devices will result in more precise model numbers.</p> 154 <p id=hardwarename></p> 155 <p id=screenpixelwidth></p> 156 <p id=screenpixelheight></p> 158 window.onload = function(){ 159 fod.complete(function (data) { 160 if(data.device["hardwarename"]){ 161 document.getElementById('hardwarename').innerHTML = "<strong>Updated Hardware Name from client-side evidence:</strong> " + data.device["hardwarename"]; 163 document.getElementById('screenpixelwidth').innerHTML = "<strong>Screen width (pixels): " + data.device.screenpixelswidth + "</strong>" 164 document.getElementById('screenpixelheight').innerHTML = "<strong>Screen height (pixels): " + data.device.screenpixelsheight + "</strong>"