2nd Creator’s Workshop · Web3 Web4 Web5 Web6 Web7 Web8 … Load balancer 121.31.23.11 34.12.141.13 Database Server 이민호 님안녕하세요! 이민호님안녕하세요! Linux서버에Web

2nd Creator’s Workshop

2018/8/1

2nd SimPL Creators workshop - Agenda

Time Activity

09:30~10:30 Registration

10:30~11:00 Introduction to SimPL v2.2 이민호

11:00~12:00 Exercise : Web server preparation 이민호

12:00~13:30 점심

13:30~15:00 Tutorial (Plugin) 조승찬

13:20~13:40 Tutorial (Page) 이정호

13:45~16:00 Exercise (Plugin, Page 개발) 각참여기관

16:00~16:30 커피

16:30~17:30 페이지및플러그인개발결과토의 각참여기관

Minho Lee

Virtual Lab. Inc.

Introduction to SimPL

Developer’s Workshop

Motivation – Simulation Platform

계산과학 연구자실험 연구자생산 기업…


Nano소자시뮬레이션전문가

Nano 소자실험연구자

배터리시뮬레이션전문가

배터리실험연구자


시뮬레이션전문가 시뮬레이션수요자

시뮬레이션기술, 노하우 시뮬레이션사용환경

Simulation Platform Builder : Contents Management System for Simulation

SimPL : 기대효과

+

시뮬레이션코드(오픈소스, 상용, in-house,…)

노하우(전/후처리, 실행절차,…)

정형화된연구환경

“연구실표준연구체계확립”

“우리연구실코드의외부공개채널”

SimPL

Webdesign

Frontendprogramming

Backendprogramming

LinkFrontend&Backend

Test&Debug

ReleaseSetrequirements&

specs

InstallWebEnvironments

(Apache,PHP,MySQL…)

SimPL!

Setrequirements&specs

SimPL

2016/6 – 테마형계산과학플랫폼개발을위한 Contents Management System 과제시작

2017/5 – 시뮬레이션플랫폼 CMS PoC

2017/10 – 시뮬레이션플랫폼 CMS 정식개발시작 (Laravel 기반)

2017/11 – 시뮬레이션플랫폼 CMS 공식명칭 SimPL확정

2017/12 – 1st SimPL Creator’s workshop

2018/2 – SimPL v2.1

2018/7 – SimPL v2.2 & 2nd SimPL Creator’s workshop

SimPL

구동환경

개발 Framework

Laravel 5.4.1, Bootstrap 3.3.7

Apache + PHP(7.0이상) + MySQL 5.7이상 ( or MariaDB 10.2 이상)

웹서버

Python 2.7, Torque PBS Scheduler

시스템

배포

https://github.com/simpl-kist/SimPL

https://github.com/simpl-kist/SimPL

SimPL : Components & End-User

SimPL Web Server & Master Node Job Scheduler

Computing Nodes

입력

결과Page

Plugin

DatabaseSave & Load

Storage

Write(Input) & Read(Output)

Submit

Status

Job Run

Result

Input & Output

SimPL : Features

사용자

- 사용자가입/탈퇴

- 이메일인증

- 사진업로드

통계

- 최근가입자

- 플러그인별사용량

- 페이지별방문수

- 플랫폼방문수

페이지

- 플러그인호출

- 다른페이지 Include

- 원자구조시각화(VLAtoms)

- WYSIWYG 에디터

플러그인

- Solver 조회

- Solver 실행(스케줄러연동)

- 테스트

- 다른플러그인 Include (import)

- 다른플러그인호출

- Python으로할수있는거의모든것

- Database 조회/저장 (Job Table)

저장소

- 이미지업로드

- Page Include용 URL생성

SimPL : 응용분야(?)

Dynamic(!) 화학교과서

~

유료(!)웹기반시뮬레이션서비스

~

연구실전용시뮬레이션연구환경

Minho Lee

Virtual Lab. Inc.

Web Server 준비

Web Service?

사용자가 보는 웹 서비스

Web Service?

웹 페이지를 사용자에게 보여주기까지

google.com

DNS(Domain Name Server)

Web1

Web2

Web3

Web4

Web5

Web6

Web7

Web8

…Load balancer

121.31.23.11

34.12.141.13

Database Server

님안녕하세요!이민호 이민호님안녕하세요!

Linux서버에 Web service 환경 구축

Apache, PHP, MySQL?

Apache : TCP/IP 프로토콜을이용해서사용자브라우저로웹페이지전송

PHP : 동적웹페이지를제작할수있는프로그래밍언어

MySQL : Database 관리체계(DBMS)


Apache, PHP, MySQL?

MySQL

PHP

Apache

님안녕하세요!

3번 사용자 이름이 뭐지?3번 사용자 이름은 “이민호”입니다

이민호님안녕하세요!

요청 내용이 채워진 웹페이지


(doc파일복사->붙여넣기하세요)



















Minho Lee

Virtual Lab. Inc.

SimPL 개발실습

실습 목표

SimPL 2.2를 이용한 Quantum Espresso 계산 플랫폼 제작

GUI 기반의 구조 모델링

QE Input Script 작성 기능

출력데이터로부터 데이터 추출 및 시각화

실습 순서

Sitemap(메뉴) 설계

화면 디자인 설계 및 요구 기능 정의

요구기능 Page/Plugin 분류

메뉴별 Page/Plugin 구현 및 테스트

1

2

3

4

사이트맵

QE Simulation Platform

Modeling Simulation Analysis

구조 저장

구조 목록 불러오기

구조 불러오기

구조 수정

구조 시각화

스크립트 작성

작업 제출

구조 불러오기


출력파일 처리

그래프 그리기

작업 불러오기

작업 목록 불러오기

+ About,..?

화면 디자인 및 요구 기능 정의- Modeling

화면 디자인 및 요구 기능 정의- Simulation

화면 디자인 및 요구 기능 정의- Analysis

만들어야 하는 페이지

Navigation bar(메뉴)

ManipulatorCrystal builder

: SimPL Main저장소

SimulationModeling

Analysis

: 페이지 제작 실습

: 제작 후 아래 세 페이지에 삽입

만들어야 하는 플러그인



구조 저장


구조 불러오기

구조 수정

구조 시각화

스크립트 작성

작업 제출

구조 불러오기


출력파일 처리

그래프 그리기

작업 불러오기


만들어야 하는 페이지 기능



구조 저장


구조 불러오기

구조 수정

구조 시각화

스크립트 작성

작업 제출

구조 불러오기


출력파일 처리

그래프 그리기

작업 불러오기


플러그인 호출

Workflow

준비

Modeling 페이지 제작

Simulation 페이지 제작

Analysis 페이지 제작

Workflow – 준비

디자인 등록

필요한 구성요소 가져오기http://simpl.vfab.org

필요한 파일 업로드

Navigation bar 제작

Solver 등록

Layout (Modeling)

Workflow – Modeling

외관 제작(HTML)

구조 저장 플러그인 호출하여 구조 저장

구조 리스트 불러오기플러그인 호출하여구조 리스트 작성

구조 불러오기플러그인 호출하여

구조 시각화

Layout (Simulation)

Workflow – Simulation

외관 제작(HTML)

플러그인 호출하여구조 목록 작성

플러그인 호출하여구조 시각화

작업 제출 플러그인 호출하여 작업 제출

스크립트 작성

Layout (Analysis)

Workflow – Analysis

외관 제작(HTML)

작업 불러오기 플러그인 호출하여Return값을 받아 처리- Input 값들 표시- Stdout 표시- Chart 그리기

작업 리스트 불러오기플러그인 호출하여작업 리스트 작성

Code - Header

<style>button{background-color:black;color:white !important;border:solid 1px #ddd9d8; border-radius:7.5px;padding:3px 10px !important;

}div{padding:5px;

}textarea{width:100%;border-radius:7.5px;

}label{margin: 0 5px;

font-size:16px;}canvas{width:100%;

}select{min-width:100px;border-radius:7.5px;padding: 5px 10px;

}input{border-radius:7.5px;padding: 3px 10px;

}</style>

Code – Navbar(HTML)

<div style="overflow: hidden;"><div style="width:50%;float:left;">

<img src="/repo/about_logo.png" style="height: 75px;"></div><div style="width: 50%; float: left; text-align: right; padding-top: 20px; font-size:

18px;" class=""><a href="/ex_modeling" class="" style="margin-right: 10px;">Modeling</a><a href="/ex_simulation" style="margin-right: 10px;">Simulation</a><a href="/ex_analysis">Analysis</a>

</div></div>

Code – Modeling(HTML)

<div>{{kCMS|PAGE|ex_nav}}</div><div class=""><select id="structure_list" size="0">

<option value="Select" selected="">Select</option>

</select><input id="structure_name" type="text"><button class="" id="structure_save">butto

n</button></div><div class="">{{kCMS|PAGE|ex_manipulator}}</div><div style="overflow: hidden;"><div style="width: 66%; float: left;">

<div style="height:500px;">{{kCMS|VLATOMS|vla|widht:500,height:5

00}}

</div></div><div style="width: 33%; float: left;">

<div class="">{{kCMS|PAGE|ex_cb}}</div>

</div></div>

코드 – Modeling(저장, 구조 목록 불러오기, 구조 불러오기)

<script>$('#structure_save').click(function(){

var name=$('#structure_name').val();var structure=vla.Structure;kCms.callPlugin("save_structure",{

"name":name,"structure":structure,

},function(ret){ }

)})//save structure $(document).ready(function(){

kCms.callPlugin("load_structure_list",{},function(ret){

var output=JSON.parse(ret.output);for(var i=0 ; i<output.length ; i++){

$('#structure_list').append('<option value='+output[i].id+'>'+output[i].name+'</option>');

}}

)})//load structure list $('#structure_list').change(function(){

var idx=$('#structure_list').find('option:selected').val(); kCms.callPlugin("load_structure",{

"idx":idx,},function(ret){var output=JSON.parse(ret.output); $('#str

ucture_name').val(output[0].name);var input=JSON.parse(output[0].input); vla.Structure = V

Latoms.Utils.redefineStructure(input.structure);vla.update.atomsChanged=true;vla.update.bondsChanged=true;vla.setOptimalCamPosition();

})

})//load structure

</script>

Code – Simulation(HTML)

<div class="">{{kCMS|PAGE|ex_nav}}</div><div><select class="" id="structure_list" size="0"><option value="Select" selected="">Select</option>

</select></div><div style="overflow: hidden;"><div style="width: 66%; float: left;"><div style="height:500px;">{{kCMS|VLATOMS|vla|widht:500,height:500}}

</div></div><div style="width: 33%; float: left;" class=""><label class="">Input Script (no structure)</label><textarea style="height: 480px;" id="qe_input_no

_str" class="">QE Input Script --></textarea></div>

</div><div style="text-align: right;"><button id="make_script">Make Script</button>

</div><div style="overflow: hidden;"><div style="width: 66%; float: left;"><label>Input Script</label><textarea id="qe_input_with_str" class="" style="

height: 300px;"></textarea></div><div style="width: 33%; float: left;"><label>Run</label><br><span>Name</span><input id="job_name" type="text"><button id="job_run">Run</button>

</div></div>

Code – Simulation(Sample QE Input)&CONTROLcalculation = 'scf'nstep = 1prefix = 'VLAB'outdir = './output/'

pseudo_dir = './'/&SYSTEMecutwfc = 44.0991708ecutrho = 176.3966832occupations = 'smearing'lda_plus_u = .FALSE.nat = 8ntyp = 1ibrav = 0degauss = 0.01Hubbard_U(1) = 0

/&ELECTRONSmixing_mode = 'plain'mixing_beta = 0.3scf_must_converge = .FALSE.electron_maxstep = 200

/&IONS

/&CELL

/K_POINTS {automatic}1 1 1 0 0 0

Code – Simulation(구조 목록 불러오기, 구조 불러오기)

<script>$(document).ready(function(){kCms.callPlugin("load_structure_list",{},function(ret){var output=JSON.parse(ret.output);console.log('output',output);for(var i=0 ; i<output.length ; i++){$('#structure_list').append('<option value='+o

utput[i].id+'>'+output[i].name+'</option>'); }

})

})//load structure list$('#structure_list').change(function(){var idx=$('#structure_list').find('option:selected').

val();kCms.callPlugin("load_structure",

{"idx":idx,

},function(ret){var output=JSON.parse(ret.output);console.log('output',output);$('#structure_name').val(output[0].name);var input=JSON.parse(output[0].input);vla.Structure = VLatoms.Utils.redefineStructure(

input.structure);vla.update.atomsChanged=true;vla.update.bondsChanged=true;vla.setOptimalCamPosition();

})

})//load structure

Code – Simulation(스크립트 작성)

function vlatoms_to_qe(vla) {let script = "\n";script += "ATOMIC_SPECIES\n";let atom_type = Object.keys(vla.Structure.formula.formulaA

rr);for (let i = 0, len = atom_type.length; i < len; i++) {

script += atom_type[i] + " " + AtomParam[atom_type[i]].mass+" "+atom_type[i] + ".UPF\n";

}script += "\n";script += "CELL_PARAMETERS {angstrom}\n";let cell_a = [];let cell_b = [];let cell_c = [];for (let i = 0; i < 3; i++) {

cell_a[i] = vla.Structure.a[i].toFixed(5);cell_b[i] = vla.Structure.b[i].toFixed(5);cell_c[i] = vla.Structure.c[i].toFixed(5);

}script += cell_a.join(" ") + "\n";script += cell_b.join(" ") + "\n";script += cell_c.join(" ") + "\n";script += "\n";

script += "ATOMIC_POSITIONS {angstrom}\n";let atoms = vla.Structure.atoms;for (let i = 0, len = atoms.length; i < len; i++) {

script += atoms[i].element + " " + atoms[i].x.toFixed(5) + " " + atoms[i].y.toFixed(5) + " " + atoms[i].z.toFixed(5) + "\n";

}return script;

}//vlatoms to qe format

$('#make_script').click(function(){var input_script=$('#qe_input_no_str').val();input_script+=vlatoms_to_qe(vla);$('#qe_input_with_str').val(input_script);

})//make script

Code – Simulation(작업 제출)

$('#run_job').click(function(){var name=$('#job_name').val();var input_script=$('#qe_input_with_str').val();var element=Object.keys(vla.Structure.formula.formulaArr);var structure=vla.Structure;

kCms.callPlugin("run_job",{

"name":name,"input_script":input_script,"element":element,"structure":structure,

},function(ret){console.log('ret',ret); }

)})

</script>

Code – Analysis(HTML)

<div>{{kCMS|PAGE|ex_nav}}</div><div><select id="job_list" size="0"><option value="Select" selected="">Select</option>

</select></div><div style="overflow: hidden;"><div style="width:50%;float:left;"><label>Structure</label><div style="height: 350px;">{{kCMS|VLATOMS|vla|widht:500,height:500}}

</div></div><div style="width:50%;float:left;"><label>Input Script</label><textarea style="height: 350px;" id="input_script"

> </textarea></div>

</div><div style="overflow: hidden;"><div style="width:50%;float:left;"><label>stdout</label><textarea id="stdout" style="height: 350px;" class

=""></textarea></div><div style="width:50%;float:left;"><label>Chart</label><canvas style="height: 350px;" id="energy_chart"

></canvas></div>

</div>

Code – Analysis(작업 목록 불러오기, 작업 불러오기)

<script>$(document).ready(function(){

kCms.callPlugin("load_job_list",{},function(ret){

console.log('ret',ret);var output=JSON.parse(ret.output);console.log('output',output);for(var i=0 ; i<output.length ; i++){

$('#job_list').append('<option value='+output[i].id+'>'+output[i].name+'</option>');

}}

)})//load job list$('#job_list').change(function(){

var idx=$('#job_list').find('option:selected').val(); kCms.callPlugin("load_job",{

"idx":idx,},function(ret){

console.log('ret',ret);

var output=JSON.parse(ret.output);console.log('output',output);$('#stdout').val(output.stdout);e_chart.data.datasets[0].data.push({

x:0,y:output.energy[0]

});e_chart.update();var input=JSON.parse(output.input);console.log('input',input);$('#input_script').val(input.input_script);vla.Structure = VLatoms.Utils.redefineStructure(input.str

ucture);vla.update.atomsChanged=true;vla.update.bondsChanged=true;vla.setOptimalCamPosition();

})

})//load job

Code – Analysis(차트 그리기)

var e_chart;$(document).ready(function(){

e_chart = new Chart(document.getElementById('energy_chart').getContext('2d'),{

type:'scatter',data:{},options:{

scales:{yAxes: [{

ticks: {beginAtZero:true

}}]

}},

})})//make chart$(document).ready(function(){

e_chart.data.datasets.push({label:'Energy(Ry)',data:[],borderColor:"rgb(4,90,58)",

showLine:true,fill:false

});e_chart.update();})

//add_data_set</script>

Code – Plugin(구조 저장)

name=kCms['input']['name']structure=kCms['input']['structure']dbid=saveJob({"name":name,"input":json.dumps({"structure":structure

})})

print dbid

Code – Plugin(구조 목록 불러오기)

ret=getJobs({"pluginAlias":"save_structure","cols":["id","name"]

})

print ret

Code – Plugin(구조 불러오기)

idx=kCms['input']['idx']

ret=getJobs({"id":idx,"cols":["name","input"]

})print ret

Code – Plugin(작업 제출)

import os

name=kCms['input']['name']input_script=kCms['input']['input_script']element=kCms['input']['element']structure=kCms['input']['structure']

f=open("input.pw.x","w")f.write(input_script)f.close()#make input file

for i in element:repo=getRepo(i+".UPF")f=open(i+".UPF","w")f.write(repo)f.close()

#make potential file

solver=getSolver("QE_6.3_pw.x")solverExec=solver['path']+" "+solver['execcmd'] + " >stdout"os.system(solverExec)

dbid=saveJob({"name":name,"input":json.dumps({

"structure":structure,"input_script":input_script

})})

print dbid

Code – Plugin(작업 목록 불러오기)

ret=getJobs({"pluginAlias":"run_job","cols":["id","name"]

})

print ret

Code – Plugin(작업 불러오기)

import reimport subprocess

def get_qe_energy(path):line=subprocess.check_output("grep '!' "+pa

th,shell=True)line_arr=line.strip().split("=")energy=re.split("\s+",line_arr[-1].strip())return energy

idx=kCms['input']['idx']ret=getJobs({"id":idx,"cols":["input","jobdir"]

})ret=json.loads(ret)[0]path=ret['jobdir']+"/stdout"

energy=get_qe_energy(path)stdout=file_get_contents(path)

retData={}retData['energy']=energyretData['stdout']=stdoutretData['input']=ret['input']print json.dumps(retData)

Documents

2nd Creator’s Workshop · Web3 Web4 Web5 Web6 Web7 Web8 … Load balancer 121.31.23.11 34.12.141.13 Database Server 이민호 님안녕하세요! 이민호님안녕하세요! Linux서버에Web