diff --git a/fiftyone_devicedetection_examples/src/fiftyone_devicedetection_examples/cloud/gettingstarted_web/app.py b/fiftyone_devicedetection_examples/src/fiftyone_devicedetection_examples/cloud/gettingstarted_web/app.py index b92e65359..37000400f 100644 --- a/fiftyone_devicedetection_examples/src/fiftyone_devicedetection_examples/cloud/gettingstarted_web/app.py +++ b/fiftyone_devicedetection_examples/src/fiftyone_devicedetection_examples/cloud/gettingstarted_web/app.py @@ -145,6 +145,36 @@ def jsonroute(): return json.dumps(flowdata.jsonbundler.json) + # Next we serve the client-side JavaScript from its own route. The other + # Pipeline APIs ship a web integration that intercepts '/51Degrees.core.js' + # for this, so the page can reference the script by that name. There is no + # such integration for Flask, so the example wires up the route itself. + + @staticmethod + @app.route('/51Degrees.core.js') + def core_js(): + + # Create the flowdata object for the JavaScript route + flowdata = GettingStartedWeb.pipeline.create_flowdata() + + # Add any information from the request (headers, cookies and additional + # client side provided information). Query parameters are included, so + # the per-request 'fod-js-enable-cookies' override is picked up here and + # applied by the JavaScriptBuilder engine. + + flowdata.evidence.add_from_dict(webevidence(request)) + + # Process the flowdata + + flowdata.process() + + # Return the JavaScript from the JavaScriptBuilder engine + + response = make_response(flowdata.javascriptbuilder.javascript) + response.headers["Content-Type"] = "application/x-javascript" + + return response + # In the main route we dynamically update the screen's device property display # using the above JSON route diff --git a/fiftyone_devicedetection_examples/src/fiftyone_devicedetection_examples/cloud/gettingstarted_web/templates/index.html b/fiftyone_devicedetection_examples/src/fiftyone_devicedetection_examples/cloud/gettingstarted_web/templates/index.html index cc4b2f427..4d94a55c3 100644 --- a/fiftyone_devicedetection_examples/src/fiftyone_devicedetection_examples/cloud/gettingstarted_web/templates/index.html +++ b/fiftyone_devicedetection_examples/src/fiftyone_devicedetection_examples/cloud/gettingstarted_web/templates/index.html @@ -131,6 +131,9 @@

Device data

Browser Version:{{ utils.get_human_readable(data.device, "browserversion") }} Screen width (pixels):{{ utils.get_human_readable(data.device, "screenpixelswidth") }} Screen height (pixels):{{ utils.get_human_readable(data.device, "screenpixelsheight") }} + {# The device id identifies the matched hardware, platform and browser profiles, + so it is the compact form of everything else in this table. #} + Device Id:{{ utils.get_human_readable(data.device, "deviceid") }} @@ -153,18 +156,13 @@

Client-side evidence and Apple models

{# - This script is constructed by the fiftyone_pipeline_core package. - It adds a JavaScript include for 51Degrees.core.js. - The 51Degrees pipeline will dynamically generate JavaScript, which includes a - JSON representation of the contents of flow data, i.e. the results from device detection. - That script raises the 'complete' event with the refined flow data. The shared - examples.js helper subscribes to it and appends a results table into #content. + 51Degrees.core.js is built by the fiftyone_pipeline_core package and served by the + matching route in app.py. It includes a JSON representation of the contents of flow + data, i.e. the results from device detection, and raises the 'complete' event with the + refined flow data. The shared examples.js helper subscribes to it and appends a results + table into #content. #} -{% autoescape false %} - -{% endautoescape %} +