CellPotts/app.jl.html at main · BuiltWithGenie/CellPotts · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<div class="row">
    <h3>Cellular Potts model</h3>
    <q-icon id="icskg" color="info" name="info" size="40px">
        <q-popup-proxy>
            <q-banner>
                This app shows an interactive Cellular Potts model, a computational model of cells and tissues used to simulate collective cell behavior. It is built on top of the <a href="https://github.com/RobertGregg/CellularPotts.jl" id="iq2e5"> CellularPotts.jl</a> package.
            </q-banner>
        </q-popup-proxy>
    </q-icon>
</div>
<div class="row">
    <div class="st-col col-12 col-sm st-module items-center justify-center">
        <div class="row">
            <st-big-number id="iv016" title="Cells" :number="N_cells"></st-big-number>
            <st-big-number id="inymi" title="Iteration" :number="t"></st-big-number>
        </div>
        <plotly id="iaywr" data="W3siZ2J0eXBlIjoiSGVhdG1hcCIsInoiOiIkX3tub2RlSURzfSIsInR5cGUiOiJoZWF0bWFwIiwibmFtZSI6IlRyYWNlIiwiZmlsbGNvbG9yIjoiI2ZmZmZmZiIsImNvbG9yc2NhbGUiOiJ0d2lsaWdodCIsImZpbGwiOiJ0b3plcm95Iiwic2hvd3NjYWxlIjpmYWxzZX1d" config="eyJzY3JvbGxab29tIjp0cnVlfQ==" layout="eyJ0aXRsZSI6IkNlbGx1bGFyIFBvdHSgbW9kZWwiLCJwbG90X2JnY29sb3IiOiIjZmZmZmZmIiwic2hvd2xlZ2VuZCI6ZmFsc2UsIm1hcmdpbiI6eyJiIjowLCJsIjowLCJyIjowLCJ0IjoiMCJ9fQ=="></plotly>
    </div>
    <div id="ih6yo" class="st-col st-module col-3">
        <q-badge id="ihx5i" label="Cell volume (px)"></q-badge>
        <q-slider id="i5f5t" :min="100" v-model="volume" :max="500" :step="100" :marker-labels="true" :markers="true" :dense="false"></q-slider>
        <q-badge id="i9uen" label="Number of cells"></q-badge>
        <q-slider id="ill1i" :min="1" v-model="N" :max="3" :step="1" :marker-labels="true" :markers="true"></q-slider>
        <q-badge id="i8eib" label="Space size"></q-badge>
        <q-slider id="i5bn8" :min="100" v-model="S" :max="250" :step="50" :markers="true" :marker-labels="true"></q-slider>
        <q-badge id="ipduj" label="Iterations"></q-badge>
        <q-slider id="iw4sd" :min="100" v-model="iterations" :max="250" :step="50" :markers="true" :marker-labels="true"></q-slider>
        <q-badge id="ikh8c" label="Division interval"></q-badge>
        <q-checkbox id="i9j8b" class="mb-5" v-model="division"></q-checkbox>
        <q-slider v-if="division" id="iw4sd-2" class="-mt-10" :min="40" v-model="interval" :max="100" :step="30" :markers="true" :marker-labels="true"></q-slider>
        <q-badge id="i9tea" label="Adhesion penalty"></q-badge>
        <q-slider id="ir45j" :min="0" v-model="adhesion" :max="50" :step="10" :markers="true" :marker-labels="true"></q-slider>
        <q-badge id="iok9u" label="Volume penalty"></q-badge>
        <q-slider id="ihqcq" :min="0" v-model="volumePenalty" :max="50" :step="10" :markers="true" :marker-labels="true"></q-slider>
        <q-badge id="iczux" label="Migration speed"></q-badge>
        <q-slider id="i0q3j" :min="0" v-model="migration" :max="500" :step="100" :markers="true" :marker-labels="true"></q-slider>
        <q-btn id="igwgg" color="primary" label="Animate" v-on:click="animate = true"></q-btn>
    </div>
</div>