I am relatively new to QML and Qt Quick and I am looking for recommendations on how to display the UI here:
This UI was made with QGraphicWidgets using Json as a model:
If you notice, the outside "Carriage Strength" container is basically a tree structure. A treeview list seems like the way to go, but I'm unsure if I can customize the view to contain the progress bar and html view (QWebEngineView). I will also need to be able to update specific components like the progress bar at runtime as well.
Any input is helpful. If you have any examples to point to would be great as well. Thanks in advance.
As requested below here is a sample of JSON which would be used to construct the model:
{
"SequenceHistory": [
{
"Definition": {
"ID": "carriage_strength",
"DisplayName": "Carriage Strength",
"TestArray": [
{
"ID": "sequence_one_setup",
"DisplayName": "Sequence 1 Setup",
"TestArray": [
{
"ID": "psm1_carriage_strength",
"DisplayName": "PSM1 Carriage Strength",
"Progress": 100,
"HtmlToDisplay": "<html><body>This is guide instruction</body></html>",
"Status": "Finish Failed",
},
{
"ID": "psm2_carriage_strength",
"DisplayName": "PSM2 Carriage Strength",
"Progress": 43,
"HtmlToDisplay": "<html><body>This is guide instruction</body></html>",
"Status": "In Progress"
},
{
"ID": "psm3_carriage_strength",
"DisplayName": "PSM3 Carriage Strength",
"Progress": 0,
"HtmlToDisplay": "<html><body>This is guide instruction</body></html>",
"Status": "Not Started"
},
{
"ID": "psm4_carriage_strength",
"DisplayName": "PSM4 Carriage Strength",
"Progress": 0,
"HtmlToDisplay": "<html><body>This is guide instruction</body></html>",
"Status": "Not Started"
}
],
},
],
}
}
]
}
The display name indicates the name, the progress indicates the progress bar percentage, the html indicates the html to be displayed in the WebEngineView, and the status indicates the status label. Disregard any timing info that is in the screenshot, but not in the JSON. The main difference between this JSON and the screenshot is that I added a container "Sequence 1 Setup" inside the Carriage Strength container to show that the containers can contain containers as well as items.
I make extensive use of such GUI elements, and the approach is always to represent the tree as lists of lists, that is, depending on the use case, either a ListView or a plain Repeater with a row or column container inside a Flickable, and then it is just delegate nesting.
The stock TreeView may cut it too, if you don't need access for fine-tuning and customizing the view.
I've personally ran into too much stiffness with many of the stock controls, they just don't work the way I need them to or outright lack the desired functionality, and unless it is something really standard, I prefer to roll out my own implementations, which is actually quite easy in QML.
Update:
Ok, now that you have provided an example data source, I can do a basic mock-up for you. BTW you are missing some commas in the JSON, and even tho in my example it is defined in-line, you can simply use JSON.parse(text) to get the same object from a string. Also note that modelData in each nested model refers to a different data object, basically to the respective array element index. And since only one of your arrays has more than one element, the example skips one level for the sake of brevity:
Window {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
property var jsondata: {
"SequenceHistory": [
{
"Definition": {
"ID": "carriage_strength",
"DisplayName": "Carriage Strength",
"TestArray": [
{
"ID": "sequence_one_setup",
"DisplayName": "Sequence 1 Setup",
"TestArray": [
{
"ID": "psm1_carriage_strength",
"DisplayName": "PSM1 Carriage Strength",
"Progress": 100,
"HtmlToDisplay": "<html><body>This is guide instruction</body></html>",
"Status": "Finish Failed"
},
{
"ID": "psm2_carriage_strength",
"DisplayName": "PSM2 Carriage Strength",
"Progress": 43,
"HtmlToDisplay": "<html><body>This is guide instruction</body></html>",
"Status": "In Progress"
},
{
"ID": "psm3_carriage_strength",
"DisplayName": "PSM3 Carriage Strength",
"Progress": 0,
"HtmlToDisplay": "<html><body>This is guide instruction</body></html>",
"Status": "Not Started"
},
{
"ID": "psm4_carriage_strength",
"DisplayName": "PSM4 Carriage Strength",
"Progress": 0,
"HtmlToDisplay": "<html><body>This is guide instruction</body></html>",
"Status": "Not Started"
}
],
},
],
}
}
]
}
ListView {
id: rv
anchors.fill: parent
model: jsondata.SequenceHistory
delegate: Rectangle {
width: rv.width
height: childrenRect.height // fit the expanding part
color: "grey"
Column {
spacing: 2
Row {
spacing: 10
Button {
id: exp
checkable: true
text: checked ? "+" : "-"
implicitWidth: 20
implicitHeight: 20
}
Text {
text: modelData.Definition.DisplayName
anchors.verticalCenter: parent.verticalCenter
}
}
Column {
x: 20
spacing: 2
Repeater {
// if not expanded model is null else skip one level
model: exp.checked ? 0 : modelData.Definition.TestArray[0].TestArray
delegate: Rectangle {
width: rv.width
height: childrenRect.height
color: "lightgrey"
Column {
Row {
spacing: 10
Button {
id: exp2
checkable: true
text: checked ? "+" : "-"
implicitWidth: 20
implicitHeight: 20
}
ProgressBar {
value: modelData.Progress
from: 1
to: 100
anchors.verticalCenter: parent.verticalCenter
}
Text {
text: modelData.DisplayName
anchors.verticalCenter: parent.verticalCenter
}
}
Column {
visible: exp2.checked // hide if not expanded
TextArea {
width: 300
height: 200
text: modelData.HtmlToDisplay
}
}
}
}
}
}
}
}
}
}
And the result:
Note that you can also compartmentalize things by spreading the delegates across different sources, because as you style them property, they will get bigger. I put it in a single source just for the sake of the example.
Related
I am working on a project to take a Google Form and transpile it into Lua for usage within Roblox experiences.
Take this form:
https://docs.google.com/forms/d/e/1FAIpQLSeKIzg67ZWJAr9VXfgODj0xFE73yA40lidbMcEAytP5EhwfZA/viewform
Form with a simple title and radio button
Looking at the example response objects from the onboarding guides
https://developers.google.com/forms/api/guides
I can infer that the response would look something like this
{
"formId": "FORM_ID",
"info": {
"title": "Example Form",
"description": "Example Form Description",
"documentTitle": "Example Form"
},
"settings": {
"quizSettings": {
"isQuiz": false
}
},
"revisionId": "00000021",
"responderUri": "https://docs.google.com/forms/d/e/1FAIpQLSeKIzg67ZWJAr9VXfgODj0xFE73yA40lidbMcEAytP5EhwfZA/viewform",
"items": [
{
"itemId": "5d9f9786",
"imageItem": {
"image": {
"contentUri": "DIRECT_URL",
"properties": {
"alignment": "LEFT"
}
}
}
},
{
"itemId": "0a4859c8",
"title": "Question 1",
"questionItem": {
"question": {
"questionId": "37fff47a",
"choiceQuestion": {
"type": "RADIO",
"options": [
{
"value": "Radio Button Label 1"
},
{
"value": "Radio Button Label 2"
}
]
}
}
}
}
]
}
Ideally I would like to be able to fetch form responses with API keys only, but it doesn't seem like thats allowed with the new Forms api. In that case - automatic fetching of the form information is out of the question (OAuth is far too much overhead / impractical to set up), so what I would like is the ability to easily fetch the json object for a form i'm the owner of.
I checked the network traffic for the forms page and it just returns all the HTML required to display, nothing like a the nice Form object you would get from the developer APIs. The "Try it out" feature in the API documentation still requires OAuth.
I'm trying to create a query/display that just shows a single number. I've had to do it in vega because the query involves a number of queries, then transforms involving timedeltas to merge the data together.
In my browser developer tools I can see that the data is coming through.
All I'm after here is days here is my marks section in vega:
"marks": [
{
"type": "text",
"from": { "data": "results" },
"properties": {
"enter": {
"text": "days",
"x": {"value": 10},
"y": {"value": 10},
"fill": {"value": "red"},
"fillOpacity": {"value": 1},
"fontSize": {"value": 100}
},
"update": {
"text": "days",
"x": {"value": 10},
"y": {"value": 10},
"fill": {"value": "red"},
"fillOpacity": {"value": 1},
"fontSize": {"value": 100}
}
}
}
]
I have also tried { "field": "days" } instead of "days" along with a good few attempts to change the x,y and fills etc.
I get no errors in the browser and the visualization is just blank.
Does anyone know what I'm doing wrong here?
A bit late, but I'm just facing the same situation right now.
I've managed to put up a minimal working example using Vega-Lite; not sure it is exactly as it is supposed to be, but at least it is working. You can check it out here.
The code is the following:
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"data": {
"values": [
{"a": 28}
]
},
"encoding": {
"text": {
"field": "a",
"type": "quantitative"
}
},
"mark": {
"type": "text",
"fill": "red",
"fontSize": 100,
"fillOpacity": 1,
"x": 10,
"y": 10
},
"config": {
"view": {
"stroke": "transparent"
}
}
}
A couple of remarks on the code:
I'm using your example's fill, fontSize, fillOpacity, x and y options; they could be different or even not be there.
When displaying just text, the "container" of the visualization can be seen as a small box surrounding the text in a light gray by default. The "stroke": "transparent" config option is what gets rid of this box.
I'm pretty new to Vega (just started some minutes ago), so my apologies in advance for any possible conceptual errors.
Edit
Looking pretty good in Kibana so far :)
I'm trying to use the AMAZON.LITERAL slot type in my Alexa skill, but when I try building, I see this error:
Build Failed
Slot name "{What}" is used in a sample utterance but not defined in the intent schema. Error code: UndefinedSlotName - Thursday, Apr 12, 2018, 2:08 PM
The slot is named What, and I'm 100% sure it is defined. It builds successfully if I change the slot type to anything except AMAZON.LITERAL.
Here is my entire model:
{
"interactionModel": {
"languageModel": {
"invocationName": "chores",
"intents": [
{
"name": "AMAZON.CancelIntent",
"samples": []
},
{
"name": "AMAZON.HelpIntent",
"samples": []
},
{
"name": "AMAZON.StopIntent",
"samples": []
},
{
"name": "Remember",
"slots": [
{
"name": "Who",
"type": "AMAZON.Person"
},
{
"name": "When",
"type": "AMAZON.DATE"
},
{
"name": "What",
"type": "AMAZON.LITERAL"
}
],
"samples": [
"remember {Who} {What} {When}"
]
}
],
"types": []
}
}
}
EDIT:
This is the response I got from Amazon when I submitted the bug:
We are not supporting AMAZON.Literal slot type anymore and we ask
developer to use customer slot type is they have some set of values
but if not then you can use AMAZON.SearchQuery where you will get the
whole query which customer is looking for and same you can use it in
you lambda function.
I faced the same issue. Here's the solution.
You need to define your Sample Utterances as
Remember {Neil | Who} {died | What} {yesterday | When}
Amazon made it mandatory to provide the example inputs along with your Slot names as AMAZON.LITERAL can take in a wide variety of values.
For more information, refer here.
add some sample utterances in below format and it should work:
remember {Jack|Who} {bring fruits|What} {tomorrow|When}
remember {Mark|Who} {pay bills|What} {today|When}
I have kendo grid and tree-view with check-boxes.In my application grid is filtered based on the check-box selection.My requirement is when we check the check-box in tree-view,then filtering the grid,after filtering grid filtered columns headers will be change into "italic".my treeview code is
var tree = $("#treeview").kendoTreeView({
checkboxes: {
checkChildren: true
},
dataSource: [{
id: 1,
text: "My Project",
expanded: true,
spriteCssClass: "rootfolder",
items: [{
id: 2,
text: "OrderID",
expanded: true,
spriteCssClass: "folder",
items: [{
id: 3,
text: "10248"
}, {
id: 4,
text: "10249"
}, {
id: 5,
text: "10250"
}, {
id: 6,
text: "10251"
}, {
id: 7,
text: "10252"
}]
}
]
}]
}).data("kendoTreeView");
my fiddle is http://jsfiddle.net/RHh67/79/
I worked a lot and have found one solution for your code,
with one line of CSS :)
.k-filterable a.k-grid-filter.k-state-active ~ .k-link{font-style:italic;}
here is updated fiddle link: http://jsfiddle.net/RHh67/81/
Enojy :)
Not sure of cross-browser compatibility, but works fine.
For a list of organizations I need to get their parents. In freebase.com's query editor, I am using the following query:
{
"id": "/en/daihatsu_motor_company",
"/organization/organization/parent":{id:null}
}
And I am getting the following result:
{
"code": "/api/status/ok",
"result": {
"/organization/organization/parent": {
"id": "/m/04kjl82"
},
"id": "/en/daihatsu_motor_company"
},
"status": "200 OK",
"transaction_id": "cache;cache03.p01.sjc1:8101;2012-07-10T22:54:06Z;0030"
}
However, I am expecting the id: toyota_motor_corporation.
From freebase.com's query editor, I can click on the id ("id": "/m/04kjl82") which is a link to view with the info I need:
http://www.freebase.com/view/m/04kjl82
How can I get directly the name of the parent company or its id (in the example toyota_motor_corporation)?
Thanks,
Claudio's answer is close, but if you actually want the ID, you need to tweak the query slightly since the default property returned is the name, not ID. This will get you the ID:
{
"id": "/en/daihatsu_motor_company",
"/organization/organization/parent": {
"parent": {"id":null}
}
}
which will return
"result": {
"/organization/organization/parent": {
"parent": {
"id": "/en/toyota_motor_corporation"
}
},
"id": "/en/daihatsu_motor_company"
}
Having said that, you should consider using the MID instead of the ID since that's the recommended identifier these days.
Your query is returning the id of the organization relationship between a Parent and a Child. What you want is the parent and you can get it with the following query:
{
"id": "/en/daihatsu_motor_company",
"/organization/organization/parent": {
"parent": null
}
}
which returns
{
"code": "/api/status/ok",
"result": {
"/organization/organization/parent": {
"parent": "Toyota Motor Corporation"
},
"id": "/en/daihatsu_motor_company"
},
"status": "200 OK",
"transaction_id": "cache;cache03.p01.sjc1:8101;2012-07-11T21:50:01Z;0045"
}