app.jl.html

<div id="gbTemplateContainer-2" class="container">
    <header>
        <h1 id="i37x">Photovoltaic charge controller </h1>
    </header>
    <div class="row">
    <div class="col-9 pr-20">
        <div class="row">
            <div class="st-col col-12 col-sm st-module" style="padding: 0px !important;">
                <plotly id="i8iv" :data="trace" :layout="layout" config="{'displaylogo':false}"></plotly>
            </div>
        </div>
        <div class="row pt-10">
            <div class="st-col col-4  st-module pl-5 pr-5 pb-5">
                <h2>Simulation description</h2><br>
                This dashboard simulates one of the examples in the <a href="https://ai4energy.github.io/Ai4EComponentLib.jl/dev/tutorials/Electrochemistry/#MPPT-Controller"> Ai4EComponentLib.jl</a> package, a library of ModelingToolkit models. The circuit implements a MPPT controller, which tracks the maximum voltage current (VI) value so that the system can charge the battery at the maximum power output.
            </div>
            <div id="it9g5" class="st-col col-8 st-module p-5" style="padding-top: 25px !important;">
                <q-img class="mt-10" id="i8f4a" src="diagram.svg"></q-img>
            </div>
        </div>
    </div>
        <div id="isubp" class="st-col st-module col-3">
            <h5 id="i1nhi">Simulation parameters</h5>
            <q-select id="iyac5" label="States to plot" :multiple="true" :use-chips="true" :options="states" v-model="selected_states"></q-select>
            <br>
            <p>Duration:</p>
            <q-slider id="ivdik" v-model="T" color="primary" :label="true" :max="3" :min="1" :step="0.5" :markers="true"></q-slider>
            <div>
                <q-btn id="iwqy" style="margin-left:auto;margin-right:auto;display:block" label="Simulate" v-on:click="simulate = true" color="primary" icon="timer" :loading="simulate"></q-btn>
                                    <br>
                                        <div style="width:75px;margin-top:5px;margin-left:auto;margin-right:auto;display:block">
                            <q-icon name="upload_file" size="25px" style="cursor:pointer;margin-right:10px"><q-popup-proxy>
                                    <q-uploader label="Upload results" hide-upload-btn auto-upload v-on:failed="function(event) { handle_event(event, 'failed') }" v-on:uploaded="function(event) { handle_event(event, 'uploaded') }" no-thumbnails v-on:finish="function(event) { handle_event(event, 'finished') }" :url="'/____/upload/' + channel_" v-on:rejected="function(event) { handle_event(event, 'rejected') }" max-files=1 accept=".bson" style="max-width: 95%; width: 95%; margin: 0 auto;"></q-uploader>
                                </q-popup-proxy></q-icon>
                                <q-icon style="cursor:pointer;margin-left:10px" name="download" size="25px" v-on:click="function(event) { handle_event(event, 'download') }"/>
                        </div>
            </div>
            <br>
            <h5> Component configuration </h5>
                <component-props :components="components"></component-props>
        </div>
    </div>
</div>