Supervisely
About SuperviselyEcosystemContact usSlack
  • 💻Supervisely Developer Portal
  • 🎉Getting Started
    • Installation
    • Basics of authentication
    • Intro to Python SDK
    • Environment variables
    • Supervisely annotation format
      • Project Structure
      • Project Meta: Classes, Tags, Settings
      • Objects
      • Tags
      • Image Annotation
      • Video Annotation
      • Point Clouds Annotation
      • Point Cloud Episode Annotation
      • Volumes Annotation
    • Python SDK tutorials
      • Images
        • Images
        • Image and object tags
        • Spatial labels on images
        • Keypoints (skeletons)
        • Multispectral images
        • Multiview images
        • Advanced: Optimized Import
        • Advanced: Export
      • Videos
        • Videos
        • Video and object tags
        • Spatial labels on videos
      • Point Clouds
        • Point Clouds (LiDAR)
        • Point Cloud Episodes and object tags
        • 3D point cloud object segmentation based on sensor fusion and 2D mask guidance
        • 3D segmentation masks projection on 2D photo context image
      • Volumes
        • Volumes (DICOM)
        • Spatial labels on volumes
      • Common
        • Iterate over a project
        • Iterate over a local project
        • Progress Bar tqdm
        • Cloning projects for development
    • Command Line Interface (CLI)
      • Enterprise CLI Tool
        • Instance administration
        • Workflow automation
      • Supervisely SDK CLI
    • Connect your computer
      • Linux
      • Windows WSL
      • Troubleshooting
  • 🔥App development
    • Basics
      • Create app from any py-script
      • Configuration file
        • config.json
        • Example 1. Headless
        • Example 2. App with GUI
        • v1 - Legacy
          • Example 1. v1 Modal Window
          • Example 2. v1 app with GUI
      • Add private app
      • Add public app
      • App Compatibility
    • Apps with GUI
      • Hello World!
      • App in the Image Labeling Tool
      • App in the Video Labeling Tool
      • In-browser app in the Labeling Tool
    • Custom import app
      • Overview
      • From template - simple
      • From scratch - simple
      • From scratch GUI - advanced
      • Finding directories with specific markers
    • Custom export app
      • Overview
      • From template - simple
      • From scratch - advanced
    • Neural Network integration
      • Overview
      • Serving App
        • Introduction
        • Instance segmentation
        • Object detection
        • Semantic segmentation
        • Pose estimation
        • Point tracking
        • Object tracking
        • Mask tracking
        • Image matting
        • How to customize model inference
        • Example: Custom model inference with probability maps
      • Serving App with GUI
        • Introduction
        • How to use default GUI template
        • Default GUI template customization
        • How to create custom user interface
      • Inference API
      • Training App
        • Overview
        • Tensorboard template
        • Object detection
      • High level scheme
      • Custom inference pipeline
      • Train and predict automation model pipeline
    • Advanced
      • Advanced debugging
      • How to make your own widget
      • Tutorial - App Engine v1
        • Chapter 1 Headless
          • Part 1 — Hello world! [From your Python script to Supervisely APP]
          • Part 2 — Errors handling [Catching all bugs]
          • Part 3 — Site Packages [Customize your app]
          • Part 4 — SDK Preview [Lemons counter app]
          • Part 5 — Integrate custom tracker into Videos Annotator tool [OpenCV Tracker]
        • Chapter 2 Modal Window
          • Part 1 — Modal window [What is it?]
          • Part 2 — States and Widgets [Customize modal window]
        • Chapter 3 UI
          • Part 1 — While True Script [It's all what you need]
          • Part 2 — UI Rendering [Simplest UI Application]
          • Part 3 — APP Handlers [Handle Events and Errors]
          • Part 4 — State and Data [Mutable Fields]
          • Part 5 — Styling your app [Customizing the UI]
        • Chapter 4 Additionals
          • Part 1 — Remote Developing with PyCharm [Docker SSH Server]
      • Custom Configuration
        • Fixing SSL Certificate Errors in Supervisely
        • Fixing 400 HTTP errors when using HTTP instead of HTTPS
      • Autostart
      • Coordinate System
      • MLOps Workflow integration
    • Widgets
      • Input
        • Input
        • InputNumber
        • InputTag
        • BindedInputNumber
        • DatePicker
        • DateTimePicker
        • ColorPicker
        • TimePicker
        • ClassesMapping
        • ClassesColorMapping
      • Controls
        • Button
        • Checkbox
        • RadioGroup
        • Switch
        • Slider
        • TrainValSplits
        • FileStorageUpload
        • Timeline
        • Pagination
      • Text Elements
        • Text
        • TextArea
        • Editor
        • Copy to Clipboard
        • Markdown
        • Tooltip
        • ElementTag
        • ElementTagsList
      • Media
        • Image
        • LabeledImage
        • GridGallery
        • Video
        • VideoPlayer
        • ImagePairSequence
        • Icons
        • ObjectClassView
        • ObjectClassesList
        • ImageSlider
        • Carousel
        • TagMetaView
        • TagMetasList
        • ImageAnnotationPreview
        • ClassesMappingPreview
        • ClassesListPreview
        • TagsListPreview
        • MembersListPreview
      • Selection
        • Select
        • SelectTeam
        • SelectWorkspace
        • SelectProject
        • SelectDataset
        • SelectItem
        • SelectTagMeta
        • SelectAppSession
        • SelectString
        • Transfer
        • DestinationProject
        • TeamFilesSelector
        • FileViewer
        • Dropdown
        • Cascader
        • ClassesListSelector
        • TagsListSelector
        • MembersListSelector
        • TreeSelect
        • SelectCudaDevice
      • Thumbnails
        • ProjectThumbnail
        • DatasetThumbnail
        • VideoThumbnail
        • FolderThumbnail
        • FileThumbnail
      • Status Elements
        • Progress
        • NotificationBox
        • DoneLabel
        • DialogMessage
        • TaskLogs
        • Badge
        • ModelInfo
        • Rate
        • CircleProgress
      • Layouts and Containers
        • Card
        • Container
        • Empty
        • Field
        • Flexbox
        • Grid
        • Menu
        • OneOf
        • Sidebar
        • Stepper
        • RadioTabs
        • Tabs
        • TabsDynamic
        • ReloadableArea
        • Collapse
        • Dialog
        • IFrame
      • Tables
        • Table
        • ClassicTable
        • RadioTable
        • ClassesTable
        • RandomSplitsTable
        • FastTable
      • Charts and Plots
        • LineChart
        • GridChart
        • HeatmapChart
        • ApexChart
        • ConfusionMatrix
        • LinePlot
        • GridPlot
        • ScatterChart
        • TreemapChart
        • PieChart
      • Compare Data
        • MatchDatasets
        • MatchTagMetas
        • MatchObjClasses
        • ClassBalance
        • CompareAnnotations
      • Widgets demos on github
  • 😎Advanced user guide
    • Objects binding
    • Automate with Python SDK & API
      • Start and stop app
      • User management
      • Labeling Jobs
  • 🖥️UI widgets
    • Element UI library
    • Supervisely UI widgets
    • Apexcharts - modern & interactive charts
    • Plotly graphing library
  • 📚API References
    • REST API Reference
    • Python SDK Reference
Powered by GitBook
On this page
  • Introduction
  • Function signature
  • Parameters
  • max
  • colors
  • disabled
  • allow_half
  • texts
  • show_text
  • text_color
  • void_color
  • disabled_void_color
  • Methods and attributes
  • Mini App Example
  • Import libraries
  • Init API client
  • Example 1
  • Example 2
  • Example 3

Was this helpful?

Edit on GitHub
  1. App development
  2. Widgets
  3. Status Elements

Rate

PreviousModelInfoNextCircleProgress

Last updated 1 year ago

Was this helpful?

Introduction

Rate widget in Supervisely that allows users to provide a rating using a graphical interface. It provides a customizable rating scale and supports features like disabling the widget, allowing half ratings, and displaying text labels.

Function signature

Rate(
    value=None,
    max=5,
    disabled=False,
    allow_half=False,
    texts=[],
    show_text=False,
    text_color="#1F2D3D",
    text_template="",
    colors=["#F7BA2A", "#F7BA2A", "#F7BA2A"],
    void_color="#C6D1DE",
    disabled_void_color="#EFF2F7",
    widget_id=None,
)
rate_default

Parameters

Parameters
Type
Description

value

Union[int, float]

Rating score

max

int

Max rating score

disabled

bool

Whether Rate is read-only

allow_half

bool

Whether picking half start is allowed

texts

List[str]

Text array

show_text

bool

Whether to display texts

text_color

str

Color of texts

text_template

str

Text template when the component is read-only

colors

List[str]

Color array for icons

void_color

str

Color of unselected icons

disabled_void_color

str

Color of unselected read-only icons

widget_id

str

ID of the widget

max

Determine max rating score.

type: int

default value: 5

rate = Rate(max=15)

colors

Determine color array for icons. It should have 3 elements, each of which corresponds with a score level

type: List[str]

default value: ["#F7BA2A", "#F7BA2A", "#F7BA2A"]

rate = Rate(colors=["#1414E4", "#2DE414", "#F7BA2A"])

disabled

Determine whether Rate is read-only.

type: bool

default value: False

rate = Rate(disabled=True)

allow_half

Determine whether picking half start is allowed.

type: bool

default value: False

rate = Rate(allow_half=True)

texts

Determine text array for each star. Available if show_text is True

type: List[str]

default value: []

show_text

Determine whether to display texts.

type: bool

default value: False

infos = ["oops", "disappointed", "normal", "good", "great"]
rate = Rate(texts=infos, show_text=True)

text_color

Determine color of texts.

type: str

default value: "#1F2D3D"

infos = ["oops", "disappointed", "normal", "good", "great"]
rate = Rate(texts=infos, show_text=True, text_color="#E414BB")

void_color

Determine color of unselected icons.

type: str

default value: "#C6D1DE"

rate = Rate(void_color="#1459E4")

disabled_void_color

Determine color of unselected read-only icons.

type: str

default value: "#C6D1DE"

rate = Rate(disabled_void_color="#5D6D7E", disabled=True)

Methods and attributes

Attributes and Methods
Description

is_disabled

Property return True if Rate is read-only.

get_value()

Get Rate score value.

set_value(value: Union[int, float])

Set Rate score value.

get_max_value()

Get max rating score.

set_max_value(value: int)

Set max rating score.

get_colors()

Get color array for icons.

set_colors()

Set color array for icons.

disable()

Enable rate`s read-only property.

enable()

Disable rate`s read-only property.

allow_half_precision()

Enable picking half star.

disallow_half_precision()

Disable picking half star.

get_texts()

Return text array for each star.

set_texts(value: List[str])

Set text for each star.

show_text()

Enable displaying texts.

hide_text()

Disable displaying texts.

get_text_color()

Get color of texts.

set_text_color(value: str)

Set color of texts.

get_void_color()

Get color of unselected icons.

set_void_color(value: str)

Set color of unselected icons.

get_disabled_void_color()

Get color of unselected read-only icons.

set_disabled_void_color(value: str)

Set color of unselected read-only icons.

value_changed(func)

Decorator function is handled when input Rate is changed.

Mini App Example

You can find this examples in our Github repository:

Import libraries

import os

import supervisely as sly
from dotenv import load_dotenv
from supervisely.app.widgets import Button, Card, Container, Field, Input, InputNumber, Rate, Text

Init API client

First, we load environment variables with credentials and init API for communicating with Supervisely Instance:

load_dotenv("local.env")
load_dotenv(os.path.expanduser("~/supervisely.env"))

api = sly.Api()

In this guide, let's look at 3 examples of using the widget Rate in the one app.

Example 1

Initialize Rate widget

infos = ["oops", "disappointed", "normal", "good", "great"]
colors = ["#656565", "#F7BA2A", "#F6568E"]
rate = Rate(
    text_color="#656565",
    disabled=True,
    value=4,
    show_text=True,
    colors=colors,
    max=5,
    text_template="points",
)

Prepare InputNumber, Button and Card widgets we will use in this example

btn = Button("Enable / Disable")

card = Card("Disabled rate", content=Container([rate, btn]))

Add functions to control widgets from python code

@btn.click
def enable_btn_click():
    rate.enable() if rate.is_disabled else rate.disable()

Create app

Prepare a layout for app using Card widget with the content parameter.

layout = Container(widgets=[card])

Create an app object with layout parameter.

app = sly.Application(layout=layout)

Example 2

Initialize Rate widget

colors = ["#656565", "#F7BA2A", "#F6568E"]
rate = Rate(
    text_color="#656565",
    allow_half=True,
    value=4.2,
    show_text=True,
    colors=colors,
)

Prepare InputNumber, Button and Card widgets we will use in this example

btn = Button("Set value")
input_num = InputNumber(value=rate.get_value(), min=0, max=5, step=0.1)

card = Card("Set rating", content=Container([rate, input_num, btn]))

Add functions to control widgets from python code

@btn.click
def set_value_btn_click():
    new_value = input_num.get_value()
    rate.set_value(new_value)

Create app

Prepare a layout for app using Card widget with the content parameter.

layout = Container(widgets=[card])

Create an app object with layout parameter.

app = sly.Application(layout=layout)

Example 3

Initialize Rate widget

infos = ["oops", "disappointed", "normal", "good", "great"]
colors = ["#656565", "#F7BA2A", "#F6568E"]
rate = Rate(
    texts=infos,
    text_color="#656565",
    show_text=True,
    colors=colors,
    void_color="#F6568E",
)

Prepare Input, Field, Text, Button and Card widgets we will use in this example

text_input = Input()
text_field = Field(
    content=text_input,
    title="Enter texts for rate",
    description="Enter 5 string values separated by commas",
)
text = Text(status="text")
btn = Button("Set texts")


card = Card(
    "Rate",
    content=Container([rate, text, text_field, btn]),
)

Add functions to control widgets from python code

@rate.value_changed
def rate_changed(value):
    text.text = f"Rate value: {value} stars"


@btn.click
def set_texts_btn_click():
    text = text_input.get_value()
    if len(text.split()) != 5:
        return
    rate.set_texts(text.split(", "))

Create app

Prepare a layout for app using Card widget with the content parameter.

layout = Container(widgets=[card])

Create an app object with layout parameter.

app = sly.Application(layout=layout)
max
colors
disabled
allow_half
texts
text_color
void_color
disabled_void_color

layout
layout
layout
🔥
supervisely-ecosystem/ui-widgets-demos/status-elements/008_rate/src/main.py