Icon

01.Game_​Data_​App - Exercise

Game Data App

In this exercise you will finalize a Game Data App adding the Page 3-Form and Page 4-Dashboard. You will practice the creation of a component, view customization using CSS, the configuration of the Flow Chart View and the creation of a simple interactive dashboard.

Step 8. DeploymentDeploy this workflow to KNIME Server and run it via WebPortal1. Right click the workflow in the KNIME Explorer and select Upload toServer or Hub.2. Make sure to reset the workflow before upload3. Right click the deployed workflow and Select Open > In WebPortal Refresh Button Widget nodebefore the Column SelectionWidget nodeOREnable automatic re-execution onthe Column Selection WidgetnodePULL FOR THE ANSWER Page 4aShow an interactive dashboard with game statistics Page 1Set up the match Page 2Play the game Page 3Show match results and collect user feedback Session 3 - Building and Deploying a WebPortal Data AppIn this exercise you will finalize a Game Data App adding the Page 3-Form and Page 4-Dashboard. You will practice the creation ofa component, view customization using CSS, the configuration of the Flow Chart View and the creation of a simple interactivedashboard. The first two pages are already configured. Page 1 shows a Welcome page while setting up the game session, and Page 2 let theuser play the game (3 iterations) /* CSS rules */.knime-title { font-size: 30px; font-weight: bold; text-align: center; color: #3d3a39; }.knime-table-info { display: none}.knime-table-cell { text-align: center;}.knime-table-header { background-color: #ffd700; color: #3d3a39;} (Optional) Page 4b Data App Flowchart Here we read the match results data andprepare it for the visualization. We want toshow a choropleth map and let the userselect whether it displays the wrong or thecorrect attempts. Step 1. Customize the Table View node visualization via CSS.1. Add the CSS Editor node2. Edit the CSS by adding the code provided below3. Connect the CSS Editor node to the Table View node via flowvariable connection4. Configure the Table View flow variable to use the custom CSS5. How did the view change? Step 2. Configure the Data App Flowchart to guide theuser through the flow1. Search the Data App Flowchart verified component onthe KNIME Hub and add it to the workflow -> https://kni.me/c/-o_CLuu7-qrfguqE2. With a Table Creator node, define the steps of the dataapp (Welcome, Play, Form, Dashboard) and set page 3 asthe active one.3. Configure the Data App Flowchart component to usethe correct columns. Step 3. Create the Page 3 - Form component1. Select all the nodes and components in the Page 3orange annotation. Wrap them up into a component.Name it "Page 3".2. Connect the Page 3 component to the main flow(Variable Loop End node) via flow variable connection3. Open the Page 3 component and rearrange itscomposite view via the Node Usage and Layout panel. Step 4. Set up the widgetYou want the user to select whether to display wrong orcorrect attemps, interactively. Hence,1. With a Column Filter node, filter the "WrongAttempts" and "Correct Attempts" columns2. Pass this table to a Column Selection Widget node.3. Configure the Column Selection Widget node withthe label "Attempts to display" to guide the user duringthe selection. Step 5. Set up the view1. Search the Choropleth Map verified componenton the KNIME Hub and add it to the workflow ->https://kni.me/c/L8IzuxeVxBOw4qDm2. Provide the formatted data and configure with ameaningful title. 3. Set the "color_axis_var" to use the flow variablecoming from the Column Selection Widget node Step 6. Create Page 4 -Dashboard Component1. Select all the nodes andcomponents in Page 4a and wrapthem up into a component. Name it"Page 4a".2. Rearrange the componentcomposite view.IMPORTANT: You want the user toupdate the choropleth map viewafter selecting a new configuration.What is missing to enable the viewupdate? Step 7. Validate user input dataYou want to check whether the user entered valid data or just left the defaultentries.1. With a Row Filter node, remove the entry if the email address is" example@email.com" (default)2. Define a conditional path by adding an Empty Table Switch node.3. Connect the first port of the Empty Table Switch node (non-empty table) toPage 4a - the user sees the dashboard4. Connect the second port of the Empty Table Switch node (empty table) toPage 4b - the user sees an error message Show match resultsread localmatch_results.csvSelect image andnames columns Welcome Counting Loop Start Variable Loop End Table View Data CollectionForm Match data Table Rowto Variable Table Rowto Variable Page 4b -Error Message Format Data forChoropleth Map Play Step 8. DeploymentDeploy this workflow to KNIME Server and run it via WebPortal1. Right click the workflow in the KNIME Explorer and select Upload toServer or Hub.2. Make sure to reset the workflow before upload3. Right click the deployed workflow and Select Open > In WebPortal Refresh Button Widget nodebefore the Column SelectionWidget nodeOREnable automatic re-execution onthe Column Selection WidgetnodePULL FOR THE ANSWER Page 4aShow an interactive dashboard with game statistics Page 1Set up the match Page 2Play the game Page 3Show match results and collect user feedback Session 3 - Building and Deploying a WebPortal Data AppIn this exercise you will finalize a Game Data App adding the Page 3-Form and Page 4-Dashboard. You will practice the creation ofa component, view customization using CSS, the configuration of the Flow Chart View and the creation of a simple interactivedashboard. The first two pages are already configured. Page 1 shows a Welcome page while setting up the game session, and Page 2 let theuser play the game (3 iterations) /* CSS rules */.knime-title { font-size: 30px; font-weight: bold; text-align: center; color: #3d3a39; }.knime-table-info { display: none}.knime-table-cell { text-align: center;}.knime-table-header { background-color: #ffd700; color: #3d3a39;} (Optional) Page 4b Data App Flowchart Here we read the match results data andprepare it for the visualization. We want toshow a choropleth map and let the userselect whether it displays the wrong or thecorrect attempts. Step 1. Customize the Table View node visualization via CSS.1. Add the CSS Editor node2. Edit the CSS by adding the code provided below3. Connect the CSS Editor node to the Table View node via flowvariable connection4. Configure the Table View flow variable to use the custom CSS5. How did the view change? Step 2. Configure the Data App Flowchart to guide theuser through the flow1. Search the Data App Flowchart verified component onthe KNIME Hub and add it to the workflow -> https://kni.me/c/-o_CLuu7-qrfguqE2. With a Table Creator node, define the steps of the dataapp (Welcome, Play, Form, Dashboard) and set page 3 asthe active one.3. Configure the Data App Flowchart component to usethe correct columns. Step 3. Create the Page 3 - Form component1. Select all the nodes and components in the Page 3orange annotation. Wrap them up into a component.Name it "Page 3".2. Connect the Page 3 component to the main flow(Variable Loop End node) via flow variable connection3. Open the Page 3 component and rearrange itscomposite view via the Node Usage and Layout panel. Step 4. Set up the widgetYou want the user to select whether to display wrong orcorrect attemps, interactively. Hence,1. With a Column Filter node, filter the "WrongAttempts" and "Correct Attempts" columns2. Pass this table to a Column Selection Widget node.3. Configure the Column Selection Widget node withthe label "Attempts to display" to guide the user duringthe selection. Step 5. Set up the view1. Search the Choropleth Map verified componenton the KNIME Hub and add it to the workflow ->https://kni.me/c/L8IzuxeVxBOw4qDm2. Provide the formatted data and configure with ameaningful title. 3. Set the "color_axis_var" to use the flow variablecoming from the Column Selection Widget node Step 6. Create Page 4 -Dashboard Component1. Select all the nodes andcomponents in Page 4a and wrapthem up into a component. Name it"Page 4a".2. Rearrange the componentcomposite view.IMPORTANT: You want the user toupdate the choropleth map viewafter selecting a new configuration.What is missing to enable the viewupdate? Step 7. Validate user input dataYou want to check whether the user entered valid data or just left the defaultentries.1. With a Row Filter node, remove the entry if the email address is" example@email.com" (default)2. Define a conditional path by adding an Empty Table Switch node.3. Connect the first port of the Empty Table Switch node (non-empty table) toPage 4a - the user sees the dashboard4. Connect the second port of the Empty Table Switch node (empty table) toPage 4b - the user sees an error message Show match resultsread localmatch_results.csvSelect image andnames columns Welcome Counting Loop Start Variable Loop End Table View Data CollectionForm Match data Table Rowto Variable Table Rowto Variable Page 4b -Error Message Format Data forChoropleth Map Play

Nodes

Extensions

Links

Download

To use this workflow in KNIME, download it from the below URL and open it in KNIME:

Download Workflow
Created by: emilio.silvestri
Created at: 2022-03-17
On NodePit since: 2022-11-05
Last update: 2024-11-21
Created with KNIME version: v4.6.3
Tags: Education

Deploy, schedule, execute, and monitor your KNIME workflows locally, in the cloud or on-premises – with our brand new NodePit Runner.

Try NodePit Runner!