Renderers

Response from your server can be much more than plain text. You can render more complex items using special renderers like buttons, lists, forms, images, gifs, audio player, etc. Renderers are inbuilt.

What we know is that output can be a 'string' or a list of 'strings'. These strings could also be executables by calling other commands.

With renderers, we add one more possibility, where you send a {content, renderer} pair. Content has to be sent in the format expected by the renderer.

Below we list our renderers that you can use instead of strings.

So to recap a general output can look like:

[
    "some string hello world",
    "/happy birthday",
    {
        "content": {"keys-pertinent-to-this-renderer": "values"},
        "renderer": "some renderer"
    }
]

You can vertically stack the output, mix and match any style of response!

List of renderers

decorated-text

{
    "content": {
        "text": text,
        "fgcolor": fgcolor,
        "bgcolor": bgcolor,
        "size": size in pixels,
        "padding-left": padding-left,
        "padding-right": padding-right,
        "padding-top": padding-top,
        "padding-bottom": padding-bottom,
        "bold": false,
        "underline": false,
        "font": font,
        "border-color": border-color,
        "border-width": 0,
    },
    "renderer": "text"
}

Can be done using a command as well.

/text fgcolor:#000 bgcolor:#fff size:20 padding-left:5 padding-right:5 etc.

Everything except text is optional.

For specific renderers, also check out:
fontsize
fontcolor

horizontal-line

Show a horizontal line across the entire width of the parent.

{
    "content": "",
    "renderer": "hr"
}

or using /hr

fontsize

Expected json:

{
    "content": {
        "text": last_price,
        "size": 25
    },
    "renderer": "fontsize"
}

Alternatively, you can use /fontsize
example: /fontsize 25 "Hello world"

fontcolor

Expected json:

{
    "content": {
        "text": text,
        "fgcolor": fgcolor
    },
    "renderer": "fontcolor"
}

Alternatively, you can use /fontcolor
example: /fontcolor green hello world

list

Expected json:

{
    "content": [
        "Mercury",
        "Venus",
        "Alpha Centauri"
        "Earth",
        "Mars"
    ],
    "renderer": "list"
}

or using command:
/list Mercury Venus "Alpha Centauri" Earth Mars

button

{
    "content": {
        "executable": executable,
        "color": color,
        "replace": replace,
        "commandlink": commandlink,
    },
    "renderer": "button"
}

text size should also be mentioned in this.

Tabs (with exec)

Tabs with content

??

Tabs with exec or content (mixed)

Horizontal list

This one is slightly complex, so it is advised to use /horizontal_list

For the adventurous ones:

version=1

{
    "content": {
        "executables": [
            Any Content-renderer pair1,
            Any Content-renderer pair2,
        ]
    },
    "renderer": "hlist"
}

version=2

{
    "content": {
        "items": [
            Any Content-renderer pair1,
            Any Content-renderer pair2,
        ]
    },
    "renderer": "hlist"
}

iconbutton

??

{
    "content": {
        "url": "icon url",

    },
    "renderer": "iconbutton"
}

Input text

Shows an input text box for use mainly in nano apps. To be used with a form, standalone input_text doesn't help.

Command form: /input_text phone placeholder:"Enter phone number"

Whole form:

{
    "content": {
        "name": "name",
        "placeholder": "Placeholder text written within the box to prompt the user"
    }
    "renderer": "input_text"
}

Input autocomplete text

Shows an input text box for use mainly in nano apps. The text box is tied to an endpoint which suggests autocompletion text when user types in this input box. To be used in a form. Check form renderer to learn more

Command form:
/input_autocomplete country {/country autocomplete} placeholder:"Enter country name"

In this example, as the user starts typing their country name, Let's say the user plans to type India, as soon as they type say "In" we fire "/country autocomplete In" and this will return all countries that startwith "In" and the user can select from the list.

'placeholder' is optional.

Whole form:

{
    "content": {
        "name": "name",
        "endpoint": "/endpoint"
        "placeholder": "Placeholder text written within the box to prompt the user"
    }
    "renderer": "input_autocomplete"
}

Checkbox

Shows a list of items with a checkbox. To be used in a form to gather user input.

Command form: /checkbox fruits [mango apple banana orange] placeholder:"Choose your favourite fruits"

'placeholder' is optional.

Whole form:

{
    "content": {
        "name": "fruits",
        "options": [
            "mango",
            "apple",
            "banana",
            "orange",
        ],
        "placeholder": "Choose your favourite fruits"
    }
    "renderer": "checkbox"
}

Radio button

Radio button is to make the user select only one option. Radio button is the same as checkboxes mentioned above.

Command form /radio_button favcity [Mumbai "New York" London] placeholder:"Choose your favourite city"

renderer is "radio_button"

Form

Form is slightly complex, so better to use /form instead of the content renderer style.

TODO: Move the following stuff in /form documentation and link it from here.

/form favourites {/input_text name} {/input_autocomplete country {/country autocomplete}} {/radio_button fruits [mango apple orange]}

As you rightly guessed, this line is very powerful and exhaustive. It will create a form with a inputbox asking for your name, then an autocomplete asking for a country name and then radio buttons for fruits.

As this is a form, /form will add a submit button at the end. After filling the form when submit is hit, it will store all the data input by the user.

By default all fields are mandatory but this can be tweaked using validations at each input element level.

2-column table (only text)

{
    "content": {
        "left-header": "Header text for left",
        "right-header": "Header text for right",
        "left-width": "0.4",
        "items": [
            {
                "lefttext": "Text on the left",
                "righttext": "Text on the right",
            },
            {...},
            {...},
            {...},
        ],
    },
    "renderer": "2col-table-text-text"
}

2-column table (text and button)

{
    "content": {
        "left-header": "Header text for left",
        "left-width": "0.9",
        "right-header": "Header text for right side",
        "items": [
            {
                "text": "text",
                "btn-text": "Text for button",
                "btn-exec": "executable to call on delete"
            },
            {...},
            {...},
            {...},
        ],
    },
    "renderer": "2col-table-text-button"
}

??

image

{
    "content": {
        "url": "image-url",
        "width": "image-width",
        "height": "image-height",
    },
    "renderer": "image"
}

width and height are optional

gif

{
    "content": {
        "url": "gif-url",
        "width": "gif-width",
        "height": "gif-height",
    },
    "renderer": "gif"
}

width and height are optional

audio

version=1

{
    "content": {
        "url": "audio-stream-url",
    },
    "renderer": "audio",
    "version": 1
}

version=2 default

{
    "content": {
        "url": "audio-stream-url",
    },
    "renderer": "audio",
    "version": 2
}

label

version=1

{
    "content": {
        "text": text,
        "fg": fgcolor,
        "bg": bgcolor
    },
    "renderer": "label"
}

version=2 default

{
    "content": {
        "text": text,
        "fgcolor": fgcolor,
        "bgcolor": bgcolor
    },
    "renderer": "label"
}
{
    "content": {
        "text": text,
        "fgcolor": fgcolor,
        "bgcolor": bgcolor
    },
    "renderer": "banner"
}

list-of-buttons

Its a navigation list menu with single text items.

{
    "content": {
        "items": [
            {
                "text": "text of that list item",
                "exec": "onclick executable"
            },
            {...},
            {...},
        ]
    },
    "renderer": "list-of-buttons"
}

imagebutton

{
    "content": {
        "url": "url of the image",
        "width": "image-width",
        "height": "image-height",
        "exec": "on click executable"
    },
    "renderer": "imagebutton"
}

width and height are optional.

version=1

{
    "content": {
        "link": "url",
        "text": "display text for this link"
    },
    "renderer": "link"
}

version=2 default

{
    "content": {
        "url": "url",
        "text": "display text for this link"
    },
    "renderer": "link"
}

video

results matching ""

    No results matching ""