How to use the mesa.visualization.modules.CanvasGrid function in Mesa

def setUp(self):

        self.user_params = {
            'width': 1,
            'height': 1,
            'key1': UserSettableParameter('number', "Test Parameter", 101),
            'key2': UserSettableParameter('slider', "Test Parameter", 200, 0, 300, 10)
        }

        self.viz_elements = [
            CanvasGrid(self.portrayal, 10, 10, 20, 20),
            TextElement(),
            # ChartModule([{"Label": "Wolves", "Color": "#AA0000"},  # Todo - test chart module
            #              {"Label": "Sheep", "Color": "#666666"}])
        ]

        self.server = ModularServer(MockModel, self.viz_elements, "Test Model", model_params=self.user_params)

def main(x_size, y_size):
    """ This function sets up a canvas to graphically represent the model 'MoneyModel'
    and a chart, than it runs the server and runs the model in model.py in the browser """
    grid = CanvasGrid(agent_portrayal, x_size, y_size, 500, 500)

    chart = ChartModule([{"Label": "Gini",
                          "Color": "Black"}],
                        data_collector_name='datacollector')
    # the simulation uses a class DataCollector, that collects the data and
    # relays it from self.datacollector to the webpage

    server = ModularServer(MoneyModel,
                           [grid, chart],
                           "ABCE and MESA integrated",
                           x_size * y_size, x_size, y_size)
    server.port = 8534  # change this number if address is in use
    server.launch()

each tick to indicate how to draw the cell in its current state.
    :param cell:  the cell in the simulation
    :return: the portrayal dictionary.
    '''
    assert cell is not None
    portrayal = {"Shape": "rect", "w": 1, "h": 1, "Filled": "true", "Layer": 0}
    x, y = cell.getX(), cell.getY()
    portrayal["x"] = x
    portrayal["y"] = y
    colors = {CGoLCell.DEAD: "white",
              CGoLCell.ALIVE: "black"}
    portrayal["Color"] = colors[cell.getState()]
    return portrayal

# Make a world that is 50x50, on a 250x250 display.
canvas_element = CanvasGrid(cgol_draw, 50, 50, 250, 250)

parameters = {"width": 50, "height": 50}

server = ModularServer(CGoLModel, [canvas_element], "Game of Life", parameters)
server.launch()

portrayal["Color"] = color

    return portrayal


# dictionary of user settable parameters - these map to the model __init__ parameters
model_params = {"init_people": UserSettableParameter("slider", "People", 25, 1, 200,
                                                    description="Initial Number of People"),
                "rich_threshold": UserSettableParameter("slider", "Rich Threshold", 10, 1, 20,
                                                   description="Upper End of Random Initial Wallet Amount"),
                "reserve_percent": UserSettableParameter("slider", "Reserves", 50, 1, 100,
                                                    description="Percent of deposits the bank has to hold in reserve")
                }

# set the portrayal function and size of the canvas for visualization
canvas_element = CanvasGrid(person_portrayal, 20, 20, 500, 500)

# map data to chart in the ChartModule
chart_element = ChartModule([{"Label": "Rich", "Color": RICH_COLOR},
                             {"Label": "Poor", "Color": POOR_COLOR},
                             {"Label": "Middle Class", "Color": MID_COLOR}])

# create instance of Mesa ModularServer
server = ModularServer(BankReserves, [canvas_element, chart_element],
                       "Bank Reserves Model",
                       model_params=model_params
                       )

portrayal["r"] = 0.3
    elif agent.wealth > 1:
        portrayal["Color"] = "#ffff66"
        portrayal["Layer"] = 0
        portrayal["r"] = 0.2
    elif agent.wealth > 0:
        portrayal["Color"] = "#ffd966"
        portrayal["Layer"] = 1
        portrayal["r"] = 0.1
    else:
        portrayal["Color"] = "#ff8c66"
        portrayal["Layer"] = 2
        portrayal["r"] = 0.0
    return portrayal

grid = CanvasGrid(agent_portrayal, economy_scale, economy_scale, 650, 650)
chart = ChartModule([
    {"Label": "Gini", "Color": "#6aa35e"}],
    data_collector_name='datacollector',
    canvas_height=600, canvas_width=550
)
#text = TextElement(js_code="document.write(5 + 6);")

server = ModularServer(WealthModel, [grid, chart], "Wealth Model", { "N" : economy_scale*economy_scale, "width" : economy_scale, "height" : economy_scale} )
server.port = 8521
server.launch()

elif type(agent) is Sugar:
        if agent.amount != 0:
            portrayal["Color"] = color_dic[agent.amount]
        else:
            portrayal["Color"] = "#D6F5D6"
        portrayal["Shape"] = "rect"
        portrayal["Filled"] = "true"
        portrayal["Layer"] = 0
        portrayal["w"] = 1
        portrayal["h"] = 1

    return portrayal


canvas_element = CanvasGrid(SsAgent_portrayal, 50, 50, 500, 500)
chart_element = ChartModule([{"Label": "SsAgent", "Color": "#AA0000"}])

server = ModularServer(SugarscapeCg, [canvas_element, chart_element],
                       "Sugarscape 2 Constant Growback")
# server.launch()

'''
    if agent is None:
        return
    portrayal = {"Shape": "circle", "r": 0.5, "Filled": "true", "Layer": 0}

    if agent.type == 0:
        portrayal["Color"] = ["#FF0000", "#FF9999"]
        portrayal["stroke_color"] = "#00FF00"
    else:
        portrayal["Color"] = ["#0000FF", "#9999FF"]
        portrayal["stroke_color"] = "#000000"
    return portrayal


happy_element = HappyElement()
canvas_element = CanvasGrid(schelling_draw, 20, 20, 500, 500)
happy_chart = ChartModule([{"Label": "happy", "Color": "Black"}])

model_params = {
    "height": 20,
    "width": 20,
    "density": UserSettableParameter("slider", "Agent density", 0.8, 0.1, 1.0, 0.1),
    "minority_pc": UserSettableParameter("slider", "Fraction minority", 0.2, 0.00, 1.0, 0.05),
    "homophily": UserSettableParameter("slider", "Homophily", 3, 0, 8, 1)
}

server = ModularServer(Schelling,
                       [canvas_element, happy_element, happy_chart],
                       "Schelling", model_params)
server.launch()

def main(x_size, y_size):
    """ This function sets up a canvas to graphically represent the model 'MoneyModel'
    and a chart, than it runs the server and runs the model in model.py in the browser """
    grid = CanvasGrid(agent_portrayal, x_size, y_size, 500, 500)

    chart = ChartModule([{"Label": "Gini",
                          "Color": "Black"}],
                        data_collector_name='datacollector')
    # the simulation uses a class DataCollector, that collects the data and
    # relays it from self.datacollector to the webpage

    server = ModularServer(MoneyModel,
                           [grid, chart],
                           "abcEconomics and MESA integrated",
                           x_size * y_size, x_size, y_size)
    server.port = 8534  # change this number if address is in use
    server.launch()

each tick to indicate how to draw the cell in its current state.

    :param cell:  the cell in the simulation

    :return: the portrayal dictionary.

    '''
    assert cell is not None
    portrayal = {"Shape": "rect", "w": 1, "h": 1, "Filled": "true", "Layer": 0}
    portrayal["x"] = cell.get_row()
    portrayal["y"] = cell.get_col()
    portrayal["Color"] = _COLORS[cell.get_state()]
    return portrayal


canvas_element = CanvasGrid(color_patch_draw,
                            grid_rows, grid_cols,
                            canvas_width, canvas_height)

server = ModularServer(ColorPatches,
                       [canvas_element], "Color Patches",
                       {"width": canvas_width, "height": canvas_height})

"On Fire": "#880000",
          "Burned Out": "#000000"}


def forest_fire_portrayal(tree):
    if tree is None:
        return
    portrayal = {"Shape": "rect", "w": 1, "h": 1, "Filled": "true", "Layer": 0}
    (x, y) = tree.get_pos()
    portrayal["x"] = x
    portrayal["y"] = y
    portrayal["Color"] = COLORS[tree.condition]
    return portrayal


canvas_element = CanvasGrid(forest_fire_portrayal, 100, 100, 500, 500)
tree_chart = ChartModule([{"Label": label, "Color": color} for (label, color) in COLORS.items()])
pie_chart = PieChartModule([{"Label": label, "Color": color} for (label, color) in COLORS.items()])

model_params = {
    "height": 100,
    "width": 100,
    "density": UserSettableParameter("slider", "Tree density", 0.65, 0.01, 1.0, 0.01)
}
server = ModularServer(ForestFire, [canvas_element, tree_chart, pie_chart], "Forest Fire", model_params)