Create application scenarios

If the user needs to customize the design instance, he can create it on a new file according to the provided two instance templates. Creating a new instance is divided into the following two steps:

At resources > templates, create the html view file
At java > controller, create and edit the controller JAVA file

Create html

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Interactive Genetic Algorithm</title>
    <link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="cation-content">
    <div class="cation-flex">
        <div class="cation-middle">
            <div class="card-list">
                <div class="card-individual">
                    <div class="card-view">
                    </div>
                    <div class="card-fitness">
                        <input type="number" class="fitness" max="10" min="0" value="5"/>
                    </div>
                </div>
            </div>
        </div>
        <div class="cation-right">
            <div id="app">
                <ul>
                    <li>Selection Operator：{{ selectionOperator | selectionFilter }}</li>
                    <li>Crossover Operator：{{ crossoverOperator | crossoverFilter}}</li>
                    <li>Mutation Operator：{{ mutationOperator | mutationFilter}}</li>
                    <li>Encoding：{{ code | codeFilter }}</li>
                    <li>Population Size：{{ size }}</li>
                    <li>Stop Generation：{{ generation }}</li>
                    <li>Crossover Rate：{{ crossover }}</li>
                    <li>Mutation Rate：{{ mutation }}</li>
                </ul>
            </div>
            <div class="btn-group">
                <a class="btn-next" href="/">
                    Parameters
                </a>
                <a class="btn-next" id="next">
                    Evolution
                </a>
            </div>
            <div class="btn-group">
                <a class="btn-next" id="save">
                    Save
                </a>
                <a class="btn-next" href="/chart" target="_blank">
                    chart
                </a>
            </div>
            <div class="times">
                <a data-index="1">1</a>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>
</body>
</html>

After creating the html template, now we need to create a route to return this view and register it with the system. Therefore, a routing function needs to be added in java > controller > IndexController as shown below.

    @GetMapping("xxxDesign") //The access address can be the file name
    public String vaseDesign(ModelMap map) {
        return prefix + "htmlFileName"; //html file name
    }

Create controller

Create a controller and implement the evolution function, which acts as a population evolution function, and calls this function asynchronously.

@Controller
@RequestMapping("/path")//
public class xxxController extends BaseController{
    @PostMapping("/evolution")
    @ResponseBody
    public List<VaseVO> evolution(String configStr, String populationStr) {
        //population list
        List<xxxVO> list = JSONArray.parseArray(populationStr, xxxVO.class);
        //parameter configuration
        ConfigVO config = JSONObject.parseObject(configStr, ConfigVO.class);
       
        Selection selection = getSelection(config);//selection operator
        Crossover crossover = getCrossover(config);//crossover operator
        //mutation boundary range
        List<Integer> parameterRange=new ArrayList<>(Arrays.asList(8,8,8,8,8,8,8,8,64));
        Mutation mutation = getMutation(config,parameterRange);//mutation operator
        
        double crossoverRate = config.getCrossover();//crossover rate
        double mutationRate = config.getMutation(); //mutation rate

        GeneticAlgorithm ga = new GeneticAlgorithm(selection, crossover, mutation, crossoverRate, mutationRate);
        
        //population coding...
        
        Population newPopulation = ga.evolve(new Population(chromosomes));
        
        //population decoding...
       
    }
}

Create html​

Create controller​

Create html

Create controller