Parse JSON data using jq and curl from command line - json

I would like to parse JSON data using jq and curl from command line but I haven't been successful. In fact, I would like to get the value of response > textAnnotations > description but i'm doing something wrong. Here is my command :
curl -X POST > response.txt \
-H "Content-Type: application/json; charset=utf-8" \
--data "{
'requests': [
{
'image': {
'source': {
'imageUri': 'http://adn-cdn2.avadeo.net/articles/vignettes/grandes/146.jpg'
}
},
'features': [
{
'type': 'TEXT_DETECTION'
}
]
}
]
}" "https://vision.googleapis.com/v1/images:annotate?key=XXXXXXXXXXXXXXXXXXX" | jq -r '.responses.textAnnotations.description'
And here is the Curl answer if I do not filter with JQ :
{
"responses": [
{
"textAnnotations": [
{
"locale": "und",
"description": "24\nmois\n12\nmois\n",
"boundingPoly": {
"vertices": [
{
"x": 12,
"y": 24
},
{
"x": 285,
"y": 24
},
{
"x": 285,
"y": 206
},
{
"x": 12,
"y": 206
}
]
}
},
{
"description": "24",
"boundingPoly": {
"vertices": [
{
"x": 216,
"y": 24
},
{
"x": 285,
"y": 24
},
{
"x": 285,
"y": 83
},
{
"x": 216,
"y": 83
}
]
}
},
{
"description": "mois",
"boundingPoly": {
"vertices": [
{
"x": 223,
"y": 83
},
{
"x": 280,
"y": 84
},
{
"x": 280,
"y": 110
},
{
"x": 223,
"y": 109
}
]
}
},
{
"description": "12",
"boundingPoly": {
"vertices": [
{
"x": 12,
"y": 122
},
{
"x": 81,
"y": 122
},
{
"x": 81,
"y": 179
},
{
"x": 12,
"y": 179
}
]
}
},
{
"description": "mois",
"boundingPoly": {
"vertices": [
{
"x": 19,
"y": 177
},
{
"x": 76,
"y": 176
},
{
"x": 76,
"y": 205
},
{
"x": 19,
"y": 206
}
]
}
}
],
"fullTextAnnotation": {
"pages": [
{
"width": 300,
"height": 225,
"blocks": [
{
"boundingBox": {
"vertices": [
{
"x": 216,
"y": 24
},
{
"x": 285,
"y": 24
},
{
"x": 285,
"y": 83
},
{
"x": 216,
"y": 83
}
]
},
"paragraphs": [
{
"boundingBox": {
"vertices": [
{
"x": 216,
"y": 24
},
{
"x": 285,
"y": 24
},
{
"x": 285,
"y": 83
},
{
"x": 216,
"y": 83
}
]
},
"words": [
{
"boundingBox": {
"vertices": [
{
"x": 216,
"y": 24
},
{
"x": 285,
"y": 24
},
{
"x": 285,
"y": 83
},
{
"x": 216,
"y": 83
}
]
},
"symbols": [
{
"boundingBox": {
"vertices": [
{
"x": 216,
"y": 25
},
{
"x": 248,
"y": 25
},
{
"x": 248,
"y": 76
},
{
"x": 216,
"y": 76
}
]
},
"text": "2"
},
{
"property": {
"detectedBreak": {
"type": "EOL_SURE_SPACE"
}
},
"boundingBox": {
"vertices": [
{
"x": 255,
"y": 24
},
{
"x": 285,
"y": 24
},
{
"x": 285,
"y": 83
},
{
"x": 255,
"y": 83
}
]
},
"text": "4"
}
]
}
]
}
],
"blockType": "TEXT"
},
{
"boundingBox": {
"vertices": [
{
"x": 223,
"y": 83
},
{
"x": 280,
"y": 84
},
{
"x": 280,
"y": 110
},
{
"x": 223,
"y": 109
}
]
},
"paragraphs": [
{
"boundingBox": {
"vertices": [
{
"x": 223,
"y": 83
},
{
"x": 280,
"y": 84
},
{
"x": 280,
"y": 110
},
{
"x": 223,
"y": 109
}
]
},
"words": [
{
"boundingBox": {
"vertices": [
{
"x": 223,
"y": 83
},
{
"x": 280,
"y": 84
},
{
"x": 280,
"y": 110
},
{
"x": 223,
"y": 109
}
]
},
"symbols": [
{
"boundingBox": {
"vertices": [
{
"x": 223,
"y": 89
},
{
"x": 242,
"y": 89
},
{
"x": 242,
"y": 108
},
{
"x": 223,
"y": 108
}
]
},
"text": "m"
},
{
"boundingBox": {
"vertices": [
{
"x": 246,
"y": 88
},
{
"x": 259,
"y": 88
},
{
"x": 259,
"y": 108
},
{
"x": 246,
"y": 108
}
]
},
"text": "o"
},
{
"boundingBox": {
"vertices": [
{
"x": 262,
"y": 83
},
{
"x": 264,
"y": 83
},
{
"x": 264,
"y": 109
},
{
"x": 262,
"y": 109
}
]
},
"text": "i"
},
{
"property": {
"detectedBreak": {
"type": "EOL_SURE_SPACE"
}
},
"boundingBox": {
"vertices": [
{
"x": 269,
"y": 89
},
{
"x": 280,
"y": 89
},
{
"x": 280,
"y": 108
},
{
"x": 269,
"y": 108
}
]
},
"text": "s"
}
]
}
]
}
],
"blockType": "TEXT"
},
{
"boundingBox": {
"vertices": [
{
"x": 12,
"y": 122
},
{
"x": 81,
"y": 122
},
{
"x": 82,
"y": 206
},
{
"x": 13,
"y": 206
}
]
},
"paragraphs": [
{
"boundingBox": {
"vertices": [
{
"x": 12,
"y": 122
},
{
"x": 81,
"y": 122
},
{
"x": 82,
"y": 206
},
{
"x": 13,
"y": 206
}
]
},
"words": [
{
"boundingBox": {
"vertices": [
{
"x": 12,
"y": 122
},
{
"x": 81,
"y": 122
},
{
"x": 81,
"y": 179
},
{
"x": 12,
"y": 179
}
]
},
"symbols": [
{
"boundingBox": {
"vertices": [
{
"x": 12,
"y": 122
},
{
"x": 43,
"y": 122
},
{
"x": 43,
"y": 175
},
{
"x": 12,
"y": 175
}
]
},
"text": "1"
},
{
"property": {
"detectedBreak": {
"type": "EOL_SURE_SPACE"
}
},
"boundingBox": {
"vertices": [
{
"x": 50,
"y": 122
},
{
"x": 81,
"y": 122
},
{
"x": 81,
"y": 179
},
{
"x": 50,
"y": 179
}
]
},
"text": "2"
}
]
},
{
"boundingBox": {
"vertices": [
{
"x": 19,
"y": 177
},
{
"x": 76,
"y": 176
},
{
"x": 76,
"y": 205
},
{
"x": 19,
"y": 206
}
]
},
"symbols": [
{
"boundingBox": {
"vertices": [
{
"x": 19,
"y": 186
},
{
"x": 38,
"y": 186
},
{
"x": 38,
"y": 205
},
{
"x": 19,
"y": 205
}
]
},
"text": "m"
},
{
"boundingBox": {
"vertices": [
{
"x": 42,
"y": 186
},
{
"x": 55,
"y": 186
},
{
"x": 55,
"y": 206
},
{
"x": 42,
"y": 206
}
]
},
"text": "o"
},
{
"boundingBox": {
"vertices": [
{
"x": 58,
"y": 177
},
{
"x": 60,
"y": 177
},
{
"x": 60,
"y": 205
},
{
"x": 58,
"y": 205
}
]
},
"text": "i"
},
{
"property": {
"detectedBreak": {
"type": "EOL_SURE_SPACE"
}
},
"boundingBox": {
"vertices": [
{
"x": 65,
"y": 186
},
{
"x": 76,
"y": 186
},
{
"x": 76,
"y": 205
},
{
"x": 65,
"y": 205
}
]
},
"text": "s"
}
]
}
]
}
],
"blockType": "TEXT"
}
]
}
],
"text": "24\nmois\n12\nmois\n"
}
}
]
}
Can you please help me ?
Thank you all :)

Both responses and textAnnotations are arrays, so as far as i remember, you have to either loop through them, or access the first response element's first textAnnotation like so: responses[0].textAnnotations[0].description
I suggest looping if possible.

If you want all the descriptions under .responses[].textAnnotations you could write:
.responses[].textAnnotations[].description
which is short for:
.responses[] | .textAnnotations[] |.description
which is effectively a "for" loop within a "for" loop.

Related

How to add text on bar chart in vega lite

I am trying to add text label to bar chart, but it not showing it. Here is a example i want to achieve
Here is code
{ "$schema": "https://vega.github.io/schema/vega-lite/v5.json", "background": "#EFF1EF", "width": 500, "height": 26, "autosize":"pad", "data": { "values": [ { "standarts": { "divisions": [ { "a": { "mean": 135, "part1": 10, "part2": 60, "part5": 130,
"part7": 198, "part9": 255, "goal": { "value": 150 } } } ] } } ] }, "transform": [ {"calculate": "datum.standarts.divisions", "as": "D"}, {"flatten": ["D"]}, {"calculate": "datum.D.a", "as": "x"} ], "encoding": { "x": {"field": "x", "type": "quantitative","scale":{"domain":[0,300]},
"stack": null}, "opacity": {"value": 1} }, "layer": [ { "mark":{"type":"bar", "color" : "#b2b7b4", "cornerRadius": 40}, "encoding": {"x": {}} }, { "mark": {"type": "bar", "color": "#0ef9e5", "height": 25}, "encoding": {"x": {"field": "x.mean"}} }, { "mark":{"type":
"text", "align":"center"}, "encoding": {"text": {"field": "x.mean"}} }, { "mark":{"type": "rule"}, "encoding": {"x": {"field":"x.goal.value", "title":["Target"],"axis":{ "titleFont": "Google Sans", "titleFontSize": 16, "titleFontWeight":700, "titleY":
8} }}} ], "config": { "axis": {"ticks": false, "labels": false, "domain": false}, "rule": { "strokeWidth": 4, "strokeDash": [ 0.2, 8 ], "strokeCap": "round", "align":"center" } } }
this is code
And link to editor
vega-lite editor
text part is still not working.
I used documentation on vega-lite website and example codes, but still no success.
Thanks for the help.
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"background": "#EFF1EF",
"width": 500,
"height": 26,
"autosize": "pad",
"data": {
"values": [
{
"standarts": {
"divisions": [
{
"a": {
"mean": 135,
"part1": 10,
"part2": 60,
"part5": 130,
"part7": 198,
"part9": 255,
"goal": {"value": 150}
}
}
]
}
}
]
},
"transform": [
{"calculate": "datum.standarts.divisions", "as": "D"},
{"flatten": ["D"]},
{"calculate": "datum.D.a", "as": "x"}
],
"encoding": {
"x": {
"field": "x",
"type": "quantitative",
"scale": {"domain": [0, 300]},
"stack": null
},
"opacity": {"value": 1}
},
"layer": [
{
"mark": {"type": "bar", "color": "#b2b7b4", "cornerRadius": 40},
"encoding": {"x": {}}
},
{
"mark": {"type": "bar", "color": "#0ef9e5", "height": 25},
"encoding": {"x": {"field": "x.mean"}}
},
{
"mark": {"type": "text", "align": "right", "dx": -10},
"encoding": {"text": {"field": "x.mean"}, "x": {"field": "x.mean"}}
},
{
"mark": {"type": "text", "align": "center", "dy": -30},
"encoding": {
"text": {"field": "x.goal.value"},
"x": {"field": "x.goal.value"}
}
},
{
"mark": {"type": "rule"},
"encoding": {
"x": {
"field": "x.goal.value",
"title": ["Target"],
"axis": {
"titleFont": "Google Sans",
"titleFontSize": 16,
"titleFontWeight": 700,
"titleY": 8
}
}
}
}
],
"config": {
"axis": {"ticks": false, "labels": false, "domain": false},
"rule": {
"strokeWidth": 4,
"strokeDash": [0.2, 8],
"strokeCap": "round",
"align": "center"
}
}
}

Textract JSON data to Image drawing with Kendo UI Angular 11

I have a JSON object which was extracted from an Image using AWS Textract after that I'm trying to draw same image using this textract data.
I'm trying to use Kendo Angular Drawing API for this and with limited documentation and usage examples I'm not completely sure about how to implement this from the geometry values in the JSON
Sample extracted object
{
"BlockType": "WORD",
"Confidence": 99.93840789794922,
"Text": "The",
"TextType": "PRINTED",
"Geometry": {
"BoundingBox": {
"Width": 0.036412131041288376,
"Height": 0.014151308685541153,
"Left": 0.13431107997894287,
"Top": 0.03131059184670448
},
"Polygon": [
{
"X": 0.13431107997894287,
"Y": 0.03131059184670448
},
{
"X": 0.17072321474552155,
"Y": 0.03131059184670448
},
{
"X": 0.17072321474552155,
"Y": 0.045461900532245636
},
{
"X": 0.13431107997894287,
"Y": 0.045461900532245636
}
]
},
"Id": "da6d85a6-3c79-484b-a07d-d84e968844ae",
"Page": 1,
"SearchKey": "The"
},
{
"BlockType": "WORD",
"Confidence": 99.77457427978516,
"Text": "Standard",
"TextType": "PRINTED",
"Geometry": {
"BoundingBox": {
"Width": 0.08427372574806213,
"Height": 0.013822372071444988,
"Left": 0.17733719944953918,
"Top": 0.03183155879378319
},
"Polygon": [
{
"X": 0.17733719944953918,
"Y": 0.03183155879378319
},
{
"X": 0.2616109251976013,
"Y": 0.03183155879378319
},
{
"X": 0.2616109251976013,
"Y": 0.04565393179655075
},
{
"X": 0.17733719944953918,
"Y": 0.04565393179655075
}
]
},
"Id": "e6587cca-2e7e-4231-9978-4b303241645b",
"Page": 1,
"SearchKey": "Standard"
},
{
"BlockType": "WORD",
"Confidence": 99.82964324951172,
"Text": "Bill",
"TextType": "PRINTED",
"Geometry": {
"BoundingBox": {
"Width": 0.035674601793289185,
"Height": 0.014618489891290665,
"Left": 0.26750874519348145,
"Top": 0.03160806745290756
},
"Polygon": [
{
"X": 0.26750874519348145,
"Y": 0.03160806745290756
},
{
"X": 0.30318334698677063,
"Y": 0.03160806745290756
},
{
"X": 0.30318334698677063,
"Y": 0.04622655734419823
},
{
"X": 0.26750874519348145,
"Y": 0.04622655734419823
}
]
},
"Id": "a6947531-ae08-40b3-8161-8fa78d430ad4",
"Page": 1,
"SearchKey": "Bill"
},
{
"BlockType": "WORD",
"Confidence": 99.97029876708984,
"Text": "of",
"TextType": "PRINTED",
"Geometry": {
"BoundingBox": {
"Width": 0.022517522796988487,
"Height": 0.014790677465498447,
"Left": 0.3098187744617462,
"Top": 0.03196505829691887
},
"Polygon": [
{
"X": 0.3098187744617462,
"Y": 0.03196505829691887
},
{
"X": 0.33233630657196045,
"Y": 0.03196505829691887
},
{
"X": 0.33233630657196045,
"Y": 0.04675573855638504
},
{
"X": 0.3098187744617462,
"Y": 0.04675573855638504
}
]
},
"Id": "53853140-e3c4-4f3a-a4b7-67ad39e1bb32",
"Page": 1,
"SearchKey": "of"
},
{
"BlockType": "WORD",
"Confidence": 99.88966369628906,
"Text": "Lading",
"TextType": "PRINTED",
"Geometry": {
"BoundingBox": {
"Width": 0.06747607886791229,
"Height": 0.01772529073059559,
"Left": 0.3355117440223694,
"Top": 0.032798975706100464
},
"Polygon": [
{
"X": 0.3355117440223694,
"Y": 0.032798975706100464
},
{
"X": 0.40298783779144287,
"Y": 0.032798975706100464
},
{
"X": 0.40298783779144287,
"Y": 0.0505242682993412
},
{
"X": 0.3355117440223694,
"Y": 0.0505242682993412
}
]
},
"Id": "5060d908-2318-48ad-bd6c-e4694501a8ce",
"Page": 1,
"SearchKey": "Lading"
},
{
"BlockType": "WORD",
"Confidence": 99.94490814208984,
"Text": "Form",
"TextType": "PRINTED",
"Geometry": {
"BoundingBox": {
"Width": 0.051753073930740356,
"Height": 0.014337458647787571,
"Left": 0.4095679521560669,
"Top": 0.033189330250024796
},
"Polygon": [
{
"X": 0.4095679521560669,
"Y": 0.033189330250024796
},
{
"X": 0.46132102608680725,
"Y": 0.033189330250024796
},
{
"X": 0.46132102608680725,
"Y": 0.04752678796648979
},
{
"X": 0.4095679521560669,
"Y": 0.04752678796648979
}
]
},
"Id": "3cf3fb15-e77f-48a5-bf76-be35d32f8be6",
"Page": 1,
"SearchKey": "Form"
},
Canvas drawing is completely new to me and I'm little lost about this implementation
Any recommendations will help me thanks
The retrieved data from AWS Textract are not exactly images.
The simplest way to say it is that they are blocks of recognized text, as stated at their webpage:
Amazon Textract makes it easy to add document text detection and
analysis to your applications. The Amazon Textract Text Detection API
can detect typed and handwritten text in a variety of documents
including financial reports, medical records, and tax forms. For
documents with structured data, you can use the Amazon Textract
Document Analysis API to extract text, forms and tables. Furthermore,
if you would like to process invoices and receipts, you can use the
AnalyzeExpense API.
Those blocks are the results of the text-detection operation. A Block represents items that are recognized in a document within a group of pixels close to each other (see more here). They only represent something for the input you've sent to the API.
I've made the following snippet which does what you ask. However, the gathered response from the API is meant to be used as your implementation needs; and may not be the following way:
var data = [{
"BlockType": "WORD",
"Confidence": 99.93840789794922,
"Text": "The",
"TextType": "PRINTED",
"Geometry": {
"BoundingBox": {
"Width": 0.036412131041288376,
"Height": 0.014151308685541153,
"Left": 0.13431107997894287,
"Top": 0.03131059184670448
},
"Polygon": [
{
"X": 0.13431107997894287,
"Y": 0.03131059184670448
},
{
"X": 0.17072321474552155,
"Y": 0.03131059184670448
},
{
"X": 0.17072321474552155,
"Y": 0.045461900532245636
},
{
"X": 0.13431107997894287,
"Y": 0.045461900532245636
}
]
},
"Id": "da6d85a6-3c79-484b-a07d-d84e968844ae",
"Page": 1,
"SearchKey": "The"
},
{
"BlockType": "WORD",
"Confidence": 99.77457427978516,
"Text": "Standard",
"TextType": "PRINTED",
"Geometry": {
"BoundingBox": {
"Width": 0.08427372574806213,
"Height": 0.013822372071444988,
"Left": 0.17733719944953918,
"Top": 0.03183155879378319
},
"Polygon": [
{
"X": 0.17733719944953918,
"Y": 0.03183155879378319
},
{
"X": 0.2616109251976013,
"Y": 0.03183155879378319
},
{
"X": 0.2616109251976013,
"Y": 0.04565393179655075
},
{
"X": 0.17733719944953918,
"Y": 0.04565393179655075
}
]
},
"Id": "e6587cca-2e7e-4231-9978-4b303241645b",
"Page": 1,
"SearchKey": "Standard"
},
{
"BlockType": "WORD",
"Confidence": 99.82964324951172,
"Text": "Bill",
"TextType": "PRINTED",
"Geometry": {
"BoundingBox": {
"Width": 0.035674601793289185,
"Height": 0.014618489891290665,
"Left": 0.26750874519348145,
"Top": 0.03160806745290756
},
"Polygon": [
{
"X": 0.26750874519348145,
"Y": 0.03160806745290756
},
{
"X": 0.30318334698677063,
"Y": 0.03160806745290756
},
{
"X": 0.30318334698677063,
"Y": 0.04622655734419823
},
{
"X": 0.26750874519348145,
"Y": 0.04622655734419823
}
]
},
"Id": "a6947531-ae08-40b3-8161-8fa78d430ad4",
"Page": 1,
"SearchKey": "Bill"
},
{
"BlockType": "WORD",
"Confidence": 99.97029876708984,
"Text": "of",
"TextType": "PRINTED",
"Geometry": {
"BoundingBox": {
"Width": 0.022517522796988487,
"Height": 0.014790677465498447,
"Left": 0.3098187744617462,
"Top": 0.03196505829691887
},
"Polygon": [
{
"X": 0.3098187744617462,
"Y": 0.03196505829691887
},
{
"X": 0.33233630657196045,
"Y": 0.03196505829691887
},
{
"X": 0.33233630657196045,
"Y": 0.04675573855638504
},
{
"X": 0.3098187744617462,
"Y": 0.04675573855638504
}
]
},
"Id": "53853140-e3c4-4f3a-a4b7-67ad39e1bb32",
"Page": 1,
"SearchKey": "of"
},
{
"BlockType": "WORD",
"Confidence": 99.88966369628906,
"Text": "Lading",
"TextType": "PRINTED",
"Geometry": {
"BoundingBox": {
"Width": 0.06747607886791229,
"Height": 0.01772529073059559,
"Left": 0.3355117440223694,
"Top": 0.032798975706100464
},
"Polygon": [
{
"X": 0.3355117440223694,
"Y": 0.032798975706100464
},
{
"X": 0.40298783779144287,
"Y": 0.032798975706100464
},
{
"X": 0.40298783779144287,
"Y": 0.0505242682993412
},
{
"X": 0.3355117440223694,
"Y": 0.0505242682993412
}
]
},
"Id": "5060d908-2318-48ad-bd6c-e4694501a8ce",
"Page": 1,
"SearchKey": "Lading"
},
{
"BlockType": "WORD",
"Confidence": 99.94490814208984,
"Text": "Form",
"TextType": "PRINTED",
"Geometry": {
"BoundingBox": {
"Width": 0.051753073930740356,
"Height": 0.014337458647787571,
"Left": 0.4095679521560669,
"Top": 0.033189330250024796
},
"Polygon": [
{
"X": 0.4095679521560669,
"Y": 0.033189330250024796
},
{
"X": 0.46132102608680725,
"Y": 0.033189330250024796
},
{
"X": 0.46132102608680725,
"Y": 0.04752678796648979
},
{
"X": 0.4095679521560669,
"Y": 0.04752678796648979
}
]
},
"Id": "3cf3fb15-e77f-48a5-bf76-be35d32f8be6",
"Page": 1,
"SearchKey": "Form"
},
{
"BlockType": "WORD",
"Confidence": 99.93840789794922,
"Text": "The",
"TextType": "PRINTED",
"Geometry": {
"BoundingBox": {
"Width": 0.036412131041288376,
"Height": 0.014151308685541153,
"Left": 0.13431107997894287,
"Top": 0.03131059184670448
},
"Polygon": [
{
"X": 0.13431107997894287,
"Y": 0.03131059184670448
},
{
"X": 0.17072321474552155,
"Y": 0.03131059184670448
},
{
"X": 0.17072321474552155,
"Y": 0.045461900532245636
},
{
"X": 0.13431107997894287,
"Y": 0.045461900532245636
}
]
},
"Id": "da6d85a6-3c79-484b-a07d-d84e968844ae",
"Page": 1,
"SearchKey": "The"
},
{
"BlockType": "WORD",
"Confidence": 99.77457427978516,
"Text": "Standard",
"TextType": "PRINTED",
"Geometry": {
"BoundingBox": {
"Width": 0.08427372574806213,
"Height": 0.013822372071444988,
"Left": 0.17733719944953918,
"Top": 0.03183155879378319
},
"Polygon": [
{
"X": 0.17733719944953918,
"Y": 0.03183155879378319
},
{
"X": 0.2616109251976013,
"Y": 0.03183155879378319
},
{
"X": 0.2616109251976013,
"Y": 0.04565393179655075
},
{
"X": 0.17733719944953918,
"Y": 0.04565393179655075
}
]
},
"Id": "e6587cca-2e7e-4231-9978-4b303241645b",
"Page": 1,
"SearchKey": "Standard"
},
{
"BlockType": "WORD",
"Confidence": 99.82964324951172,
"Text": "Bill",
"TextType": "PRINTED",
"Geometry": {
"BoundingBox": {
"Width": 0.035674601793289185,
"Height": 0.014618489891290665,
"Left": 0.26750874519348145,
"Top": 0.03160806745290756
},
"Polygon": [
{
"X": 0.26750874519348145,
"Y": 0.03160806745290756
},
{
"X": 0.30318334698677063,
"Y": 0.03160806745290756
},
{
"X": 0.30318334698677063,
"Y": 0.04622655734419823
},
{
"X": 0.26750874519348145,
"Y": 0.04622655734419823
}
]
},
"Id": "a6947531-ae08-40b3-8161-8fa78d430ad4",
"Page": 1,
"SearchKey": "Bill"
},
{
"BlockType": "WORD",
"Confidence": 99.97029876708984,
"Text": "of",
"TextType": "PRINTED",
"Geometry": {
"BoundingBox": {
"Width": 0.022517522796988487,
"Height": 0.014790677465498447,
"Left": 0.3098187744617462,
"Top": 0.03196505829691887
},
"Polygon": [
{
"X": 0.3098187744617462,
"Y": 0.03196505829691887
},
{
"X": 0.33233630657196045,
"Y": 0.03196505829691887
},
{
"X": 0.33233630657196045,
"Y": 0.04675573855638504
},
{
"X": 0.3098187744617462,
"Y": 0.04675573855638504
}
]
},
"Id": "53853140-e3c4-4f3a-a4b7-67ad39e1bb32",
"Page": 1,
"SearchKey": "of"
},
{
"BlockType": "WORD",
"Confidence": 99.88966369628906,
"Text": "Lading",
"TextType": "PRINTED",
"Geometry": {
"BoundingBox": {
"Width": 0.06747607886791229,
"Height": 0.01772529073059559,
"Left": 0.3355117440223694,
"Top": 0.032798975706100464
},
"Polygon": [
{
"X": 0.3355117440223694,
"Y": 0.032798975706100464
},
{
"X": 0.40298783779144287,
"Y": 0.032798975706100464
},
{
"X": 0.40298783779144287,
"Y": 0.0505242682993412
},
{
"X": 0.3355117440223694,
"Y": 0.0505242682993412
}
]
},
"Id": "5060d908-2318-48ad-bd6c-e4694501a8ce",
"Page": 1,
"SearchKey": "Lading"
},
{
"BlockType": "WORD",
"Confidence": 99.94490814208984,
"Text": "Form",
"TextType": "PRINTED",
"Geometry": {
"BoundingBox": {
"Width": 0.051753073930740356,
"Height": 0.014337458647787571,
"Left": 0.4095679521560669,
"Top": 0.033189330250024796
},
"Polygon": [
{
"X": 0.4095679521560669,
"Y": 0.033189330250024796
},
{
"X": 0.46132102608680725,
"Y": 0.033189330250024796
},
{
"X": 0.46132102608680725,
"Y": 0.04752678796648979
},
{
"X": 0.4095679521560669,
"Y": 0.04752678796648979
}
]
},
"Id": "3cf3fb15-e77f-48a5-bf76-be35d32f8be6",
"Page": 1,
"SearchKey": "Form"
}
];
const zoom = 1400;
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const drawer = {
BoundingBox: drawBoundingBox,
Polygon: drawPolygon,
};
ctx.strokeStyle = "#0000ff";
ctx.lineWidth = 1;
data.forEach((args) => {
if (args.Geometry) {
for (var key in args.Geometry) {
if (typeof drawer[key] === 'function') {
drawer[key](args.Geometry[key], args.Text);
} else {
console.error('Unsupported object, you\'ll need to add support here!');
}
}
}
});
function drawBoundingBox(args, text) {
ctx.beginPath();
ctx.rect(args.Left * zoom, args.Top * zoom, args.Width * zoom, args.Height * zoom);
ctx.stroke();
ctx.font = (args.Height * zoom) + "px Arial";
ctx.fillText(text, (args.Left * zoom), (args.Top * zoom) + (args.Height * zoom));
}
function drawPolygon(args, text) {
ctx.beginPath();
ctx.moveTo(args[0].X * zoom, args[0].Y * zoom);
for (var i = 1; i < args.length; i++) {
ctx.lineTo(args[i].X * zoom, args[i].Y * zoom);
}
ctx.lineTo(args[0].X * zoom, args[0].Y * zoom);
ctx.stroke();
const h = ((args[args.length - 1].Y - args[0].Y) * zoom);
ctx.font = h + "px Arial";
ctx.strokeText(text, args[0].X * zoom, (args[0].Y + h) * zoom);
}
<canvas width="850" height="450" id="canvas"></canvas>
Canvas Drawing
This is the output for the example JSON data you've provided by using the snippet code:
Canvas drawing is not that hard. To code the snippet I've shared to you, you only need knowledge on 3 subjects (Text, Rect and lineTo)
Kendo Angular Drawing
I've ported the vanilla code to Kendo Angular Drawing in this stackblitz sample, I'd like to let you know that vanilla is a lot easier to use than Kendo, this is the output:
In both cases, canvas and kendo; I had to add a zoom variable because your X, Y values were too small.

End of file expected. json(0)

I want to use this JSON file for pandas, but this JSON file has some problem.
I got an error from the time I downloaded it, but I couldn't find the answer.
{
"content": "http://com.dataturks.a96-i23.open.s3.amazonaws.com/2c9fafb064277d86016431e33e4e003d/8186c3d1-e9d4-4550-8ec1-a062a7628787___0-26.jpg.jpeg",
"annotation": [{
"label": ["Face"],
"notes": "",
"points": [{
"x": 0.08615384615384615,
"y": 0.3063063063063063
}, {
"x": 0.1723076923076923,
"y": 0.45345345345345345
}],
"imageWidth": 650,
"imageHeight": 333
}, {
"label": ["Face"],
"notes": "",
"points": [{
"x": 0.583076923076923,
"y": 0.2912912912912913
}, {
"x": 0.6584615384615384,
"y": 0.46846846846846846
}],
"imageWidth": 650,
"imageHeight": 333
}],
"extras": null
} {
"content": "http://com.dataturks.a96-i23.open.s3.amazonaws.com/2c9fafb064277d86016431e33e4e003d/d1c32c8e-8050-482d-a6c8-b101ccba5b65___0de0ee708a4a47039e441d488615ebb7.png",
"annotation": [{
"label": ["Face"],
"notes": "",
"points": [{
"x": 0.7053087757313109,
"y": 0.23260437375745527
}, {
"x": 0.7692307692307693,
"y": 0.36182902584493043
}],
"imageWidth": 1280,
"imageHeight": 697
}],
"extras": null
}
It shows this message.
Error: Parse error on line 29:
..., "extras": null} { "content": "http:
---------------------^
Expecting 'EOF', '}', ',', ']', got '{'
How can I solve this problem?
Try this: it should work!
There's a problem with the way you started your JSON file
Use a square bracket to start and end with a square bracket [ ]
[
{
"content": "http://com.dataturks.a96-i23.open.s3.amazonaws.com/2c9fafb064277d86016431e33e4e003d/8186c3d1-e9d4-4550-8ec1-a062a7628787___0-26.jpg.jpeg",
"annotation": [{
"label": ["Face"],
"notes": "",
"points": [{
"x": 0.08615384615384615,
"y": 0.3063063063063063
}, {
"x": 0.1723076923076923,
"y": 0.45345345345345345
}],
"imageWidth": 650,
"imageHeight": 333
}, {
"label": ["Face"],
"notes": "",
"points": [{
"x": 0.583076923076923,
"y": 0.2912912912912913
}, {
"x": 0.6584615384615384,
"y": 0.46846846846846846
}],
"imageWidth": 650,
"imageHeight": 333
}],
"extras": null
} {
"content": "http://com.dataturks.a96-i23.open.s3.amazonaws.com/2c9fafb064277d86016431e33e4e003d/d1c32c8e-8050-482d-a6c8-b101ccba5b65___0de0ee708a4a47039e441d488615ebb7.png",
"annotation": [{
"label": ["Face"],
"notes": "",
"points": [{
"x": 0.7053087757313109,
"y": 0.23260437375745527
}, {
"x": 0.7692307692307693,
"y": 0.36182902584493043
}],
"imageWidth": 1280,
"imageHeight": 697
}],
"extras": null
}
]
Your JSON structure is wrong. Probably you want get array inside :
[
{
"content": "http://com.dataturks.a96-i23.open.s3.amazonaws.com/2c9fafb064277d86016431e33e4e003d/8186c3d1-e9d4-4550-8ec1-a062a7628787___0-26.jpg.jpeg",
"annotation": [
{
"label": [
"Face"
],
"notes": "",
"points": [
{
"x": 0.08615384615384615,
"y": 0.3063063063063063
},
{
"x": 0.1723076923076923,
"y": 0.45345345345345345
}
],
"imageWidth": 650,
"imageHeight": 333
},
{
"label": [
"Face"
],
"notes": "",
"points": [
{
"x": 0.583076923076923,
"y": 0.2912912912912913
},
{
"x": 0.6584615384615384,
"y": 0.46846846846846846
}
],
"imageWidth": 650,
"imageHeight": 333
}
],
"extras": null
},
{
"content": "http://com.dataturks.a96-i23.open.s3.amazonaws.com/2c9fafb064277d86016431e33e4e003d/d1c32c8e-8050-482d-a6c8-b101ccba5b65___0de0ee708a4a47039e441d488615ebb7.png",
"annotation": [
{
"label": [
"Face"
],
"notes": "",
"points": [
{
"x": 0.7053087757313109,
"y": 0.23260437375745527
},
{
"x": 0.7692307692307693,
"y": 0.36182902584493043
}
],
"imageWidth": 1280,
"imageHeight": 697
}
],
"extras": null
}
]

How to convert json from text to vaild string

i have json's in text files and i like to embed them into strings in my case cpp
is there any tool or utility to do this ?
for example i have this long json and i like to concert to valid string .
{
"rigidBodies": [
{
"name": "car_test_mapping",
"imagePath": "car_body_test.png",
"origin": {
"x": 0,
"y": 0
},
"polygons": [
[
{
"x": 0.782500028610229,
"y": 0.21000000834465
},
{
"x": 0.727500081062317,
"y": 0.340000003576279
},
{
"x": 0.179999947547913,
"y": 0.422500014305115
},
{
"x": 0.179999947547913,
"y": 0.260000020265579
}
],
[
{
"x": 0.179999947547913,
"y": 0.260000020265579
},
{
"x": 0.00249993801116943,
"y": 0.265000015497208
},
{
"x": 0,
"y": -0.00499993562698364
},
{
"x": 0.992500066757202,
"y": -0.00499993562698364
},
{
"x": 0.990000009536743,
"y": 0.1875
},
{
"x": 0.782500028610229,
"y": 0.21000000834465
}
]
],
"circles": [],
"shapes": [
{
"type": "POLYGON",
"vertices": [
{
"x": 0.00249993801116943,
"y": 0.265000015497208
},
{
"x": 0.179999947547913,
"y": 0.260000020265579
},
{
"x": 0.179999947547913,
"y": 0.422500014305115
},
{
"x": 0.727500081062317,
"y": 0.340000003576279
},
{
"x": 0.782500028610229,
"y": 0.21000000834465
},
{
"x": 0.990000009536743,
"y": 0.1875
},
{
"x": 0.992500066757202,
"y": -0.00499993562698364
},
{
"x": 0,
"y": -0.00499993562698364
}
]
}
]
}
],
"dynamicObjects": []
}
You must use JSON.stringify.see documentation

source code of the HTML5 version of Angry birds visible?

Today I read that Rovio released Angry birds for Chrome i.e HTML5 compatible. Does it mean that anyone can see the source code of the HTML5 version of the game now?
Yes, but it's not very readable as it looks to be generated from a Java input, probably via GWT.
The levels are stored as JSON – here's the level 2 file:
{
"camera": [
{
"bottom": -51.69,
"id": "Slingshot",
"left": -28.397,
"right": 47.013,
"top": -51.69,
"x": 28.621,
"y": -13.985
},
{
"bottom": -49.048,
"id": "Castle",
"left": 12.344,
"right": 82.582,
"top": -49.048,
"x": 66.776,
"y": -13.929
}
],
"counts": {
"birds": 5,
"blocks": 27
},
"id": "pack1/Level57.lua",
"scoreEagle": 29000,
"scoreGold": 60000,
"scoreSilver": 47000,
"theme": "BACKGROUND_BLUE_GRASS",
"world": {
"bird_1": {
"angle": 0,
"id": "BIRD_RED",
"x": 9.93,
"y": -4.328
},
"bird_2": {
"angle": 0,
"id": "BIRD_RED",
"x": 7.489,
"y": -4.339
},
"bird_3": {
"angle": 0,
"id": "BIRD_RED",
"x": 5.417,
"y": -4.249
},
"bird_4": {
"angle": 0,
"id": "BIRD_RED",
"x": 3.42,
"y": -4.339
},
"bird_5": {
"angle": 0,
"id": "BIRD_RED",
"x": 0,
"y": -1.035
},
"block_1": {
"angle": 90.027,
"id": "STONE_BLOCK_4X1",
"x": 61.498,
"y": -7.314
},
"block_10": {
"angle": 180,
"id": "TERRAIN_TEXTURED_HILLS_10X10",
"x": 74.143,
"y": -0.157
},
"block_11": {
"angle": 180,
"id": "TERRAIN_TEXTURED_HILLS_10X10",
"x": 83.499,
"y": -0.107
},
"block_12": {
"angle": 180,
"id": "TERRAIN_TEXTURED_HILLS_10X10",
"x": 92.925,
"y": -0.058
},
"block_13": {
"angle": 0,
"id": "TERRAIN_TEXTURED_HILLS_10X10",
"x": 7.156,
"y": 1.484
},
"block_14": {
"angle": 135,
"id": "TERRAIN_TEXTURED_HILLS_10X10",
"x": 111.252,
"y": -18.195
},
"block_15": {
"angle": 24.537,
"id": "TERRAIN_TEXTURED_HILLS_5X5",
"x": 3.616,
"y": -0.22
},
"block_16": {
"angle": 45,
"id": "TERRAIN_TEXTURED_HILLS_5X5",
"x": 11.912,
"y": -0.041
},
"block_17": {
"angle": 45,
"id": "TERRAIN_TEXTURED_HILLS_5X5",
"x": 103.199,
"y": -0.037
},
"block_18": {
"angle": 45,
"id": "TERRAIN_TEXTURED_HILLS_5X5",
"x": 106.374,
"y": -3.514
},
"block_19": {
"angle": 45,
"id": "TERRAIN_TEXTURED_HILLS_5X5",
"x": 109.7,
"y": -0.188
},
"block_2": {
"angle": 89.999,
"id": "STONE_BLOCK_4X1",
"x": 68.165,
"y": -7.317
},
"block_20": {
"angle": 359.713,
"id": "PIG_BASIC_SMALL",
"x": 85.85,
"y": -15.34
},
"block_21": {
"angle": 2.262,
"id": "PIG_BASIC_SMALL",
"x": 75.084,
"y": -11.419
},
"block_22": {
"angle": 7.16,
"id": "PIG_BASIC_SMALL",
"x": 68.143,
"y": -11.427
},
"block_23": {
"angle": 0.153,
"id": "PIG_BASIC_SMALL",
"x": 61.475,
"y": -11.411
},
"block_24": {
"angle": 179.984,
"id": "WOOD_BLOCK_4X1",
"x": 85.911,
"y": -13.755
},
"block_25": {
"angle": 180.065,
"id": "WOOD_BLOCK_4X1",
"x": 75.051,
"y": -9.834
},
"block_26": {
"angle": 180.172,
"id": "WOOD_BLOCK_4X1",
"x": 68.284,
"y": -9.842
},
"block_27": {
"angle": 0.112,
"id": "WOOD_BLOCK_4X1",
"x": 61.463,
"y": -9.83
},
"block_3": {
"angle": 90.017,
"id": "STONE_BLOCK_4X1",
"x": 74.983,
"y": -7.316
},
"block_4": {
"angle": 270,
"id": "STONE_BLOCK_8X1",
"x": 85.892,
"y": -9.272
},
"block_5": {
"angle": 359.999,
"id": "TERRAIN_TEXTURED_HILLS_32X2",
"x": 75.877,
"y": -4.433
},
"block_6": {
"angle": 225.001,
"id": "TERRAIN_TEXTURED_HILLS_10X10",
"x": 98.165,
"y": -5.15
},
"block_7": {
"angle": 225.001,
"id": "TERRAIN_TEXTURED_HILLS_10X10",
"x": 104.615,
"y": -11.599
},
"block_8": {
"angle": 90,
"id": "TERRAIN_TEXTURED_HILLS_10X10",
"x": 64.836,
"y": -0.135
},
"block_9": {
"angle": 135,
"id": "TERRAIN_TEXTURED_HILLS_10X10",
"x": 60.034,
"y": 1.675
}
}
}
This means that you could potentially inject your own levels by intercepting the requests.
Yes, but it is heavily obfuscated, see small part of code below:
function d3(){this.b=new Date}
function MK(){this.o=EU.d.Nc()}
function TE(b,c){b.i.k=c;b.f=4}
function PU(b,c,d){b.f=c;b.g=d}
function YF(b){b.f=6;b.b=false}
function YH(b){b.f=6;b.b=false}
function iG(b){b.f=7;b.b=false}
They use the google PlayN framework for the HTML5 port.
See https://developers.google.com/playn/
It means you can see the HTML5 code, but it will not be very useful since it's compiled with GWT and not very understandable.