Несколько недель назад мы создали инструмент для интерактивного дизайна с помощью Javascript/HTML/css и пытаемся понять, как его можно разместить с помощью Python Streamlit. Мы собираемся перенести его на Python и загрузить на сервер Streamlit.
Вот окончательный результат, попробуйте нажать на 00_Ouside, и таблица будет представлена ниже.
Необходимые инструменты/пакеты
- Python: streamlit/codecs/streamlit.components.v1
- HTML-файл с кодом JS, Bootstrap, jQuery и т. д.
Шаги:
- Объедините все скрипты в файл HTML отсюда и назовите его ID.html.
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="lib/style.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body style= "width: 100%">
<nav>
<div class="nav nav-tabs" id="nav-tab" role="tablist">
<button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">1F</button>
<button class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">2F</button>
</div>
</nav>
<div class="tab-content" id="nav-tabContent">
<!-- 1F -->
<div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
<!-- 1 -->
<div class="container P-5">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 465.88 311.58">
<g style="isolation:isolate">
<g id="Layer_2" data-name="Layer 2">
<g id="Layer_2-2" data-name="Layer 2" style="mix-blend-mode:hue">
<polygon id="_05" data-name="#05" points="182.08 193.8 230.86 145.02 302.53 145.02 302.53 197.62 248.23 251.94 240.21 251.94 182.08 193.8" fill="#eacbc6" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<rect id="_99" data-name="#99" x="406.8" y="177.99" width="58.08" height="132.59" fill="#6ac9cd" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<polygon id="_08" data-name="#08" points="158.47 145.12 192.58 111 390.72 111 390.72 136.91 464.88 136.91 464.88 1 127.71 1 127.71 114.36 158.47 145.12" fill="#f7f2da" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<rect id="_09" data-name="#09" x="435.91" y="136.91" width="28.97" height="41.08" fill="#cb8c84" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<polygon id="Pic_02" data-name="#02" points="161.18 204.15 196.53 239.49 212.15 223.87 240.21 251.94 248.23 251.94 256.24 243.92 293.18 280.86 293.18 300.38 114.25 300.38 114.25 251.09 161.18 204.15" fill="#d4eded" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<polygon id="Pic_03" data-name="#03" points="380.24 197.62 380.24 300.38 293.18 300.38 293.18 280.86 256.24 243.92 302.53 197.62 380.24 197.62" fill="#acdee0" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<rect id="_06" data-name="#06" x="302.53" y="145.02" width="35.43" height="52.6" fill="#cb8c84" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Pic_00" data-name="#00" d="M18,279.68H1V210.51H18Zm0-163.86H1V185H18Zm0-94.69H1V90.3H18Z" fill="#e8f5f5" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<polygon id="Pic_01" data-name="#01" points="127.71 170.68 161.18 204.15 114.11 251.23 114.25 300.38 98.52 300.38 98.52 156.78 112.41 156.78 112.41 170.68 127.71 170.68" fill="#e8f5f5" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<polygon id="_07" data-name="#07" points="354.98 145.02 337.97 145.02 337.97 197.62 380.24 197.62 380.24 177.99 354.98 177.99 354.98 145.02" fill="#e0ada6" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<polygon id="_04" data-name="#04" points="112.41 144.59 98.52 144.59 98.52 1 127.71 1 127.71 170.68 112.41 170.68 112.41 144.59" fill="#d0ecf4" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
</g></g></g></svg>
<iframe class ='w-100 h-100 p-5 d-none' id='No-00' src="https://docs.google.com/spreadsheets/d/e/2PACX-1vSayAWfft0Xg6-P5FZ2EbOrnZQ8F3OxqnowcWhuR-67JoXScakotQhIYeAZ8_yPN8JNyzNJUYHCz-pI/pubhtml?gid=1139802226&single=true&widget=true&headers=false"></iframe>
<iframe class ='w-100 h-100 p-5 d-none' id='No-01' src="https://docs.google.com/spreadsheets/d/e/2PACX-1vSayAWfft0Xg6-P5FZ2EbOrnZQ8F3OxqnowcWhuR-67JoXScakotQhIYeAZ8_yPN8JNyzNJUYHCz-pI/pubhtml?gid=978138215&single=true&widget=true&headers=false"></iframe>
<iframe class ='w-100 h-100 p-5 d-none' id='No-02' src="https://docs.google.com/spreadsheets/d/e/2PACX-1vSayAWfft0Xg6-P5FZ2EbOrnZQ8F3OxqnowcWhuR-67JoXScakotQhIYeAZ8_yPN8JNyzNJUYHCz-pI/pubhtml?gid=325041474&single=true&widget=true&headers=false"></iframe>
</div>
</div>
<!-- 2F -->
<div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
<div class="container">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 459.13 301.21">
<g style="isolation:isolate">
<g id="Layer_2" data-name="Layer 2">
<g id="Layer_2-2" data-name="Layer 2" style="mix-blend-mode:hue">
<polygon id="_16" data-name="#16" points="295.28 33.6 295.28 1 193.23 1 193.23 10.92 209.38 10.92 209.38 33.6 295.28 33.6" fill="#6ac9cd" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<polygon id="_10" data-name="#10" points="452.13 179.12 452.13 251.7 458.13 251.7 458.13 16.02 435.46 16.02 435.46 127.1 389.25 127.1 389.25 145.3 403 145.3 403 179.12 452.13 179.12" fill="#e8f5f5" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<rect id="_21" data-name="#21" x="57.13" y="276.56" width="34.02" height="23.64" fill="#a0c4da" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<rect id="Pic_13" data-name="#13" x="386.7" y="1" width="48.76" height="79.75" fill="#cb8c84" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<rect id="_99" data-name="#99" x="394.58" y="179.12" width="57.55" height="72.58" fill="#6ac9cd" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<rect id="_15" data-name="#15" x="193.79" y="33.6" width="138.34" height="76.55" fill="#a0c4da" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<polygon id="_14" data-name="#14" points="386.7 1 295.28 1 295.28 10.92 365.64 10.92 365.64 80.75 386.7 80.75 386.7 1" fill="#acdee0" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<polygon id="_19" data-name="#19" points="37.71 83.02 113.26 83.02 113.26 1 1 1 1 59.63 37.71 59.63 37.71 83.02" fill="#d4dfeb" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<polygon id="_25" data-name="#25" points="346.56 300.21 458.13 300.21 458.13 251.7 394.58 251.7 394.58 179.12 403 179.12 403 145.3 323.6 145.3 323.6 275.43 346.56 275.43 346.56 300.21" fill="#f7f2da" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<rect id="_24" data-name="#24" x="309.71" y="275.43" width="36.85" height="24.78" fill="#a0c4da" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<polygon id="Pic_17" data-name="#17" points="193.23 10.92 193.23 1 113.26 1 113.26 83.02 193.79 83.02 193.79 33.6 209.38 33.6 209.38 10.92 193.23 10.92" fill="#d4dfeb" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<rect id="_18" data-name="#18" x="92.31" y="83.02" width="55.14" height="33.45" fill="#a0c4da" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<rect id="_22" data-name="#22" x="37.29" y="154.66" width="263.63" height="121.9" fill="#d4dfeb" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<rect id="_23" data-name="#23" x="119.21" y="288.87" width="165.81" height="11.34" fill="#acdee0" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<polygon id="_20" data-name="#20" points="92.31 83.02 92.31 116.47 23.68 116.47 23.68 300.21 1 300.21 1 83.02 92.31 83.02" fill="#d4eded" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<polygon id="_11" data-name="#11" points="365.64 80.75 365.64 145.3 389.25 145.3 389.25 127.1 435.46 127.1 435.46 80.75 365.64 80.75" fill="#d4eded" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<rect id="_12" data-name="#12" x="435.46" y="1" width="22.68" height="15.02" fill="#acdee0" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/></g></g></g></svg>
</svg>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" ></script>
<script >
$(document).ready(function(){
$('svg #Pic_00').tooltip({ placement : "top" , title: '00 Outside',});
$('svg #Pic_01').tooltip({ placement : "top" , title: '01 Entry',});
$('svg #Pic_02').tooltip({ placement : "top" , title: '02 Reception',});
$('svg #_11').tooltip({ placement : "top" , title: '11',});
$('svg #_12').tooltip({ placement : "top" , title: '12',});
$('svg #_16').tooltip({ placement : "top" , title: '16',});
$('svg #_21').tooltip({ placement : "top" , title: '21',});
$('svg #_99').tooltip({ placement : "top" , title: '99',});
$No_00 = $('#No-00');
$('#Pic_00').click(function() {
$No_00.removeClass('d-none');
});
$('#Pic_00').dblclick(function() {
$No_00.addClass('d-none');
});
$No_01 = $('#No-01');
$('#Pic_01').click(function() {
$No_01.removeClass('d-none');
});
$('#Pic_01').dblclick(function() {
$No_01.addClass('d-none');
});
$No_02 = $('#No-02');
$('#Pic_02').click(function() {
$No_02.removeClass('d-none');
});
$('#Pic_02').dblclick(function() {
$No_02.addClass('d-none');
});
});
</script>
</body>
</html>
2. Создайте py-файл с именем app.py и импортируйте все необходимые пакеты.
3. В app.py настройте стиль холста.
prcnt_width = 100
max_width_str = f"max-width: {prcnt_width}%;"
st.markdown(f"""
<style>
.block-container{{{max_width_str} ; background-color:white; padding-x:auto; height: auto; padding-y:auto; }}
header {{visibility: hidden;}}
footer {{visibility: hidden;}}
""",
unsafe_allow_html=True, )
4. Определите функцию, которая отображает файл HTML.
def ID_Tool(ID_html, height= 1000): ID_file = codecs.open(ID_html,'r') page = ID_file.read() components.html(page, height=height, scrolling=1)
5. Вот полный скрипт app.py, и вы можете развернуть его на сервере Streamlit. (Как его развернуть?)
import streamlit as st
import codecs
import streamlit.components.v1 as components
prcnt_width = 100
max_width_str = f"max-width: {prcnt_width}%;"
st.markdown(f"""
<style>
.block-container{{{max_width_str} ; background-color:white; padding-x:auto; height: auto; padding-y:auto; }}
header {{visibility: hidden;}}
footer {{visibility: hidden;}}
""",
unsafe_allow_html=True, )
def ID_Tool(ID_html, height= 1000):
ID_file = codecs.open(ID_html,'r')
page = ID_file.read()
components.html(page, height=height, scrolling=1)
def main():
ID_Tool('ID.html')
if __name__ == '__main__':
main()
Спасибо и наслаждайтесь! Если вы хотите поддержать Informula, вы можете купить нам кофе здесь :)
