1 Commits

Author SHA1 Message Date
2f44691a98 added lecture 3 2025-12-10 10:21:18 +10:00
64 changed files with 2852 additions and 14275 deletions

2
.gitignore vendored
View File

@@ -1,2 +0,0 @@
node_modules
to_reform

104
embeded_details.html Normal file
View File

@@ -0,0 +1,104 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>
Embedded Details
</title>
</head>
<body bgcolor="#F0F8FF">
<details>
<summary>Menu</summary>
<ul>
<li><a href="./index.html">Home</a></li>
<li><a href="./embeded_details.html"><h4>Embeded Details</h4></a></li>
<li><a href="./opencv_details.html">OpenCV Details</a></li>
<li><a href="./photography_details.html">Photography Details</a></li>
<li><a href="./table.html">Table with filters (not working yet)</a></li>
<li><a href="./images/institute.png">Institute</a></li>
</ul>
</details>
<h2 align="center">Embedded Details</h2>
<hr width="800" align="center">
<p align="center">
<img src="./images/esp32.png" alt="ESP32" height="150">
<img src="./images/arduino.png" alt="Arduino" height="150">
<img src="./images/stm32.png" alt="STM32" height="150">
</p>
<p align="justify">My programming path started with embeded systems,
i love all the low level things that Mcu could do with just a little bit of code,
sometimes build or flashing progress could take some time to get a hand of , but after that everething usualy
goes smooth</p>
<p align="justify">The first MCU i tried was a ATmega328P,
after some time i was surprised with the debug capabilities on the Stm32
and now i'm working with esp32-s3 , that's a good chip, has internal JTAG and all the shiny wireless interfaces
but feels faulty
for some reason <i> regular segfaults with CDC</i></p>
<h3 align="center">Microcontroller Comparison Table</h3>
<table border="1" align="center" cellpadding="6" cellspacing="0">
<tr>
<th>Board/MCU</th>
<th>UART Count</th>
<th>Dynamic UART Assignment</th>
<th>ADC Channels</th>
<th>Debug Support</th>
<th>Flash Size</th>
<th>Wireless Connectivity</th>
</tr>
<tr>
<td>ESP32</td>
<td>3</td>
<td>Yes (via IO MUX)</td>
<td>18</td>
<td>JTAG, Serial</td>
<td>4MB (typical)</td>
<td>Wi-Fi, Bluetooth</td>
</tr>
<tr>
<td>ESP32-S3</td>
<td>3</td>
<td>Yes (via IO MUX)</td>
<td>20</td>
<td>JTAG, Serial</td>
<td>8MB (typical)</td>
<td>Wi-Fi, Bluetooth LE</td>
</tr>
<tr>
<td>ESP-01</td>
<td>1</td>
<td>No</td>
<td>1</td>
<td>Serial only</td>
<td>512KB/1MB</td>
<td>Wi-Fi</td>
</tr>
<tr>
<td>Arduino Uno (ATmega328P)</td>
<td>1</td>
<td>No</td>
<td>6</td>
<td>Serial, DebugWire</td>
<td>32KB</td>
<td>None</td>
</tr>
<tr>
<td>Blue Pill (STM32F103C8T6)</td>
<td>3</td>
<td>Yes (remappable)</td>
<td>10</td>
<td>SWD, Serial</td>
<td>64KB/128KB</td>
<td>None</td>
</tr>
</table>
<p align="right"> no rpi pico here , the build system has won over my temper</p>
</body>
</html>

View File

Before

Width:  |  Height:  |  Size: 198 KiB

After

Width:  |  Height:  |  Size: 198 KiB

View File

Before

Width:  |  Height:  |  Size: 159 KiB

After

Width:  |  Height:  |  Size: 159 KiB

View File

Before

Width:  |  Height:  |  Size: 106 KiB

After

Width:  |  Height:  |  Size: 106 KiB

View File

Before

Width:  |  Height:  |  Size: 229 KiB

After

Width:  |  Height:  |  Size: 229 KiB

View File

Before

Width:  |  Height:  |  Size: 22 KiB

After

Width:  |  Height:  |  Size: 22 KiB

View File

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 14 KiB

View File

Before

Width:  |  Height:  |  Size: 17 KiB

After

Width:  |  Height:  |  Size: 17 KiB

View File

Before

Width:  |  Height:  |  Size: 10 KiB

After

Width:  |  Height:  |  Size: 10 KiB

View File

Before

Width:  |  Height:  |  Size: 1.2 MiB

After

Width:  |  Height:  |  Size: 1.2 MiB

View File

Before

Width:  |  Height:  |  Size: 80 KiB

After

Width:  |  Height:  |  Size: 80 KiB

View File

Before

Width:  |  Height:  |  Size: 347 KiB

After

Width:  |  Height:  |  Size: 347 KiB

View File

Before

Width:  |  Height:  |  Size: 41 KiB

After

Width:  |  Height:  |  Size: 41 KiB

View File

Before

Width:  |  Height:  |  Size: 1.1 MiB

After

Width:  |  Height:  |  Size: 1.1 MiB

View File

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 13 KiB

View File

Before

Width:  |  Height:  |  Size: 2.3 MiB

After

Width:  |  Height:  |  Size: 2.3 MiB

View File

Before

Width:  |  Height:  |  Size: 5.2 MiB

After

Width:  |  Height:  |  Size: 5.2 MiB

View File

Before

Width:  |  Height:  |  Size: 99 KiB

After

Width:  |  Height:  |  Size: 99 KiB

View File

Before

Width:  |  Height:  |  Size: 3.9 MiB

After

Width:  |  Height:  |  Size: 3.9 MiB

View File

Before

Width:  |  Height:  |  Size: 4.4 MiB

After

Width:  |  Height:  |  Size: 4.4 MiB

View File

Before

Width:  |  Height:  |  Size: 1.9 MiB

After

Width:  |  Height:  |  Size: 1.9 MiB

View File

Before

Width:  |  Height:  |  Size: 65 KiB

After

Width:  |  Height:  |  Size: 65 KiB

View File

Before

Width:  |  Height:  |  Size: 30 KiB

After

Width:  |  Height:  |  Size: 30 KiB

View File

Before

Width:  |  Height:  |  Size: 53 KiB

After

Width:  |  Height:  |  Size: 53 KiB

View File

Before

Width:  |  Height:  |  Size: 50 KiB

After

Width:  |  Height:  |  Size: 50 KiB

View File

Before

Width:  |  Height:  |  Size: 99 KiB

After

Width:  |  Height:  |  Size: 99 KiB

0
index.css Normal file
View File

229
index.html Normal file
View File

@@ -0,0 +1,229 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/3.10.2/mdb.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/3.10.2/mdb.min.js"></script>
<link href="labs/lab4/css/bootstrap.min.css" rel="stylesheet">
<script src="labs/lab4/js/bootstrap.bundle.min.js"></script>
<title>Portfolio</title>
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-md bg-light navbar-light">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link selected-menu px-3" href="./index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link px-3" href="./embeded_details.html">Embedded</a>
</li>
<li class="nav-item">
<a class="nav-link px-3" href="./opencv_details.html">OpenCV</a>
</li>
<li class="nav-item">
<a class="nav-link px-3" href="./photography_details.html">Photography</a>
</li>
<li class="nav-item">
<a class="nav-link px-3" href="./table.html">Table</a>
</li>
<li class="nav-item">
<a class="nav-link px-3" href="./images/institute.png">Institute</a>
</li>
</ul>
</div>
</nav>
<!-- Image Gallery -->
<div class="container-fluid my-4 text-center">
<div class="row g-2">
<div class="col-lg-4 col-md-12">
<div class="hover-overlay">
<img src="./images/sqarucos.png" class="img-fluid border border-dark hover-shadow w-100 mt-0 mt-lg-2" alt="Arduino">
</div>
</div>
<div class="col-lg-4 col-md-12">
<div class="hover-overlay">
<img src="./images/sqstm32.png" class="img-fluid border border-dark hover-shadow w-100" alt="STM32">
</div>
</div>
<div class="col-lg-4 col-md-12">
<div class="hover-overlay">
<img src="./images/sqesp32.png" class="img-fluid border border-dark hover-shadow w-100 mt-0 mt-lg-2" alt="ESP32">
</div>
</div>
</div>
</div>
<!-- Main Content -->
<div class="container-fluid">
<div class="row">
<!-- Main Content Area -->
<div class="col-lg-9 col-md-12">
<!-- First Block -->
<div class="card mb-4">
<div class="card-header text-center">
<h5 class="fw-bold mb-0">Embedded Systems</h5>
</div>
<div class="card-body">
<div class="row align-items-center">
<div class="col-lg-4 col-md-12 mb-3">
<p class="text-justify">
Had several projects with different MCUs and wrote firmware for them.
My main stack consists of Platformio+EspIdf or Arduino, also tried STM32
</p>
</div>
<div class="col-lg-4 col-md-12 mb-3">
<p class="text-justify">
I love embedded development because of autonomy of produced devices, the devices are
not
dependent on any other hardware and can work autonomously
</p>
<a href="#" class="text-decoration-none small d-block text-end">More info»</a>
</div>
<div class="col-lg-4 col-md-12 mb-3">
<img src="./images/AQ_monitor.png" class="img-fluid" alt="ESP32">
</div>
</div>
</div>
</div>
<!-- Second Block -->
<div class="card mb-4">
<div class="card-header text-center">
<h5 class="fw-bold mb-0">Embedded Systems</h5>
</div>
<div class="card-body">
<div class="row align-items-center">
<div class="col-lg-3 col-md-12 mb-3">
<p class="text-justify">
Had several projects with different MCUs and wrote firmware for them.
My main stack consists of Platformio+EspIdf or Arduino, also tried STM32
</p>
</div>
<div class="col-lg-6 col-md-12 mb-3 text-center">
<img src="./images/remote.jpeg" class="img-fluid" alt="Remote">
</div>
<div class="col-lg-3 col-md-12 mb-3">
<p class="text-justify">
I love embedded development because of autonomy of produced devices, the devices
are not dependent on any other hardware and can work autonomously or off the grid
</p>
<a href="#" class="text-decoration-none small d-block text-end">More info»</a>
</div>
</div>
</div>
</div>
</div>
<!-- Sidebar -->
<div class="col-lg-3 col-md-12 border-start">
<!-- Small Info Block 1 -->
<div class="card mb-3 mt-lg-0 mt-3">
<div class="row g-0">
<div class="col-md-8 col-lg-12 col-xl-8">
<div class="card-body p-3">
<h6 class="card-title fw-bold text-end">3D Printer</h6>
<p class="card-text small text-justify">
3D printers are versatile tools used for creating prototypes,
custom parts, and artistic designs. They work by layering materials.
</p>
<a href="#" class="text-decoration-none small d-block text-end">More Info»</a>
</div>
</div>
<div class="col-md-4 col-lg-12 col-xl-4">
<div class="hover-overlay">
<img src="images/16x10/3d-printer.jpeg" class="img-fluid hover-zoom" alt="3D Printer">
<div class="mask" style="background-color: rgba(63, 107, 69, 0.2);"></div>
</div>
</div>
</div>
</div>
<!-- Small Info Block 2 -->
<div class="card mb-3">
<div class="row g-0">
<div class="col-md-8 col-lg-12 col-xl-8">
<div class="card-body p-3">
<h6 class="card-title fw-bold text-end">BLHeli ESCs</h6>
<p class="card-text small text-justify">
BLHeli ESCs are electronic speed controllers designed
for drones, offering smooth and precise motor control.
</p>
<a href="#" class="text-decoration-none small d-block text-end">More Info»</a>
</div>
</div>
<div class="col-md-4 col-lg-12 col-xl-4">
<div class="hover-overlay">
<img src="images/16x10/blheli-esc.jpeg" class="img-fluid hover-zoom" alt="BLHeli ESC">
<div class="mask" style="background-color: rgba(57, 192, 237, 0.2);"></div>
</div>
</div>
</div>
</div>
<!-- Small Info Block 3 -->
<div class="card mb-3">
<div class="row g-0">
<div class="col-md-8 col-lg-12 col-xl-8">
<div class="card-body p-3">
<h6 class="card-title fw-bold text-end">Raspberry Pi Nano</h6>
<p class="card-text small text-justify">
Raspberry Pi Nano is a compact computer ideal for learning,
prototyping, and IoT projects. It is highly energy-efficient.
</p>
<a href="#" class="text-decoration-none small d-block text-end">More Info»</a>
</div>
</div>
<div class="col-md-4 col-lg-12 col-xl-4">
<div class="hover-overlay">
<img src="images/16x10/rpi-nano.jpeg" class="img-fluid hover-zoom"
alt="Raspberry Pi Nano">
<div class="mask" style="background-color: rgba(57, 192, 237, 0.2);"></div>
</div>
</div>
</div>
</div>
<!-- Small Info Block 4 -->
<div class="card mb-3">
<div class="row g-0">
<div class="col-md-8 col-lg-12 col-xl-8">
<div class="card-body p-3">
<h6 class="card-title fw-bold text-end">Smart Thermostats</h6>
<p class="card-text small text-justify">
Smart thermostats help regulate home temperatures efficiently,
saving energy and enhancing comfort with automation.
</p>
<a href="#" class="text-decoration-none small d-block text-end">More Info»</a>
</div>
</div>
<div class="col-md-4 col-lg-12 col-xl-4">
<div class="hover-overlay">
<img src="images/16x10/thermostat.jpeg" class="img-fluid hover-zoom"
alt="Smart Thermostat">
<div class="mask" style="background-color: rgba(57, 192, 237, 0.2);"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid bg-light">
<span class="lead p-4 ">Kulesh A.</span>
<span class="lead p-4 "> Б9123-09.03.04</span>
</div>
</body>
</html>

View File

@@ -1 +0,0 @@
node_modules

File diff suppressed because it is too large Load Diff

View File

@@ -1,30 +0,0 @@
{
"name": "template_pug",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack --mode production",
"serve": "webpack serve --open --mode development",
"dev": "webpack --mode development",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"chokidar": "^4.0.3",
"css-loader": "^6.8.1",
"filemanager-webpack-plugin": "^8.0.0",
"glob": "^11.0.3",
"html-webpack-plugin": "^5.5.3",
"pug": "^2.0.4",
"pug-loader": "^2.4.0",
"style-loader": "^3.3.3",
"stylus": "^0.61.0",
"stylus-loader": "^7.1.3",
"webpack": "^5.89.0",
"webpack-cli": "^5.1.4",
"webpack-dev-server": "^4.15.1"
}
}

View File

@@ -1,36 +0,0 @@
block variables
- var title = 'Самые высокие здания и сооружения'
-
var dictMenu = {'Главная': 'index.html',
'Небоскребы' : "#",
'Башни': "#",
'Список': "#"
}
- var listImages = ['image1.jpg', 'image2.jpg', 'image3.jpg', 'image4.jpg', 'image5.jpg']
-
var listSections = [
{'header' : 'Бурдж-Халифа в Дубае, ОАЭ',
'image' : 'image7.jpg',
'text' : 'Небоскрёб высотой 828 метров, самое высокое сооружение в мире. Форма здания напоминает сталагмит.'
},
{'header' : 'Токийское небесное дерево, Япония',
'image' : 'image6.jpg',
'text' : 'Телевизионная башня в районе Сумида самая высокая среди телебашен мира. Высота телебашни вместе с антенной составляет 634 метра.'
},
{'header' : 'CN Tower, Канада',
'image' : 'image8.jpg',
'text' : 'Си-Эн Тауэр — самое высокое свободно стоящее сооружение в мире с 1976 по 2007 год. Его высота составляет 553,33 метра.'
}
]
-
var structures = [
{
menuItem: "Ворота Запада, США",
pict: "image1_big.jpg",
firstP: `Арка в Сент-Луисе, также известная под именем «Врата на запад» — мемориал, являющийся частью Джефферсоновского национального экспансиального мемориала, а также визитной карточкой Сент-Луиса, штат Миссури, США.`,
secondP: `Арка была спроектирована финско-американским архитектором Ээро Саариненом в 1947 году. Её высота 192 метра в самой высокой точке, ширина её основания также 192 метра.
Таким образом арка является самым высоким памятником на территории США. Её строительство началось 12 февраля 1963 года и было закончено 28 октября 1965 года. Памятник открылся для посетителей 24 июля 1967 года.`
}
]

View File

@@ -1,2 +0,0 @@
h2= 'Hello World!'
img(src= require("../images/img1.jpg"))

View File

@@ -1,20 +0,0 @@
include ../components/data.pug
mixin createMenu(menu, active)
each value, key in menu
if active == key
a.active(href= value)= key
else
a(href= value)= key
mixin createMenuBuild(menu, active)
each value, key in menu
a(href= value)= key
a.active(href= "")= active
mixin createSection()
each item in listSections
section
h3= item.header
img(src= require("../images/" + item.image))
p= item.text
a(href="#") &hellip;

Binary file not shown.

Before

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 162 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 17 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 35 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 27 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 28 KiB

View File

@@ -1 +0,0 @@
import './styles/main.styl'

View File

@@ -1,19 +0,0 @@
extends template
block nav
title #{structures[0].menuItem}
nav
+createMenuBuild(dictMenu, structures[0].menuItem)
block header
h2= structures[0].menuItem
block content
img.big(src= require("../images/" + structures[0].pict))
section
p= structures[0].firstP
p= structures[0].secondP

View File

@@ -1,19 +0,0 @@
extends template
block nav
nav
+createMenu(dictMenu, 'Главная')
block content
div.images
each pict in listImages
a(href= "building.html")
img(src= require("../images/" + pict))
article
each item in listSections
section
h3= item.header
img(src= require("../images/" + item.image))
p= item.text
a(href="#") &hellip;

View File

@@ -1,18 +0,0 @@
include ../components/mixin.pug
include ../components/data.pug
doctype html
html(lang="ru")
head
title #{title}
body
block header
h2= title
block nav
block content
block footer
footer
h4 &copy; Пример html-страницы

View File

@@ -1,84 +0,0 @@
colorText = #6f6d6d
back(size)
background-color #f1f1f1
box-shadow 4px 5px 10px rgba(0, 0, 0, 0.4)
padding: size + "%"
margin 0 0 1% 0
html
color colorText
nav
back(0)
text-align right
& a
display inline-block
padding 1%
color colorText
text-decoration: none
&:hover
&.active
background-color #f87777
color #f8f8f8
div.images
display grid
grid-template-columns repeat(5, 1fr)
grid-gap 0.5%
back(1)
& img
width: 100%
@media (max-width: 600px)
grid-template-rows repeat(5, 1fr)
grid-template-columns 1fr
& img
width 80%
margin auto
article
width 80%
margin auto
display grid
grid-template-columns repeat(3, 1fr)
grid-gap 4%
@media (max-width: 600px)
grid-template-rows repeat(3, 1fr)
grid-template-columns 1fr
& section
display grid
grid-template-columns 1fr 2fr
grid-gap 2%
align-items center
back(2)
& h3
grid-column 1/3
margin 0
text-align center
& img
width: 100%
footer
background-color colorText
color white
@media (max-width: 600px)
margin 3vh 0
& h4
padding:10px
.big
width 50vw
@media (max-width: 600px)
width 100vw
section
display grid
grid-template-columns 1fr 1fr
@media (max-width: 600px)
grid-template-columns 1fr

View File

@@ -1,69 +0,0 @@
const HtmlWebpackPlugin = require("html-webpack-plugin");
const FileManagerPlugin = require("filemanager-webpack-plugin");
const path = require("path");
const fs = require("fs");
const pagesDir = path.join(__dirname, "src", "pages");
const pages = fs.readdirSync(pagesDir).filter(file => file.endsWith(".pug"));
module.exports = {
output: {
path: path.join(__dirname, "dist"),
filename: "index.[contenthash].js",
assetModuleFilename: path.join("images", "[name].[contenthash][ext]"),
},
entry: path.join(__dirname, "src", "index.js"),
module: {
rules: [
{
test: /\.pug$/,
loader: "pug-loader",
},
{
test: /\.(png|jpg|jpeg|gif)$/i,
type: "asset/resource",
},
{
test: /\.svg$/,
type: "asset/resource",
generator: {
filename: path.join("icons", "[name].[contenthash][ext]"),
},
},
{
test: /\.styl$/,
use: [
{
loader: "style-loader",
},
{
loader: "css-loader",
},
{
loader: "stylus-loader",
},
],
},
],
},
plugins: [
...pages.map(
(page) =>
new HtmlWebpackPlugin({
template: path.join(pagesDir, page),
filename: page.replace(".pug", ".html"),
})
),
new FileManagerPlugin({
events: {
onStart: {
delete: ["dist"],
},
},
}),
],
devServer: {
watchFiles: path.join(__dirname, "src"),
port: 9000,
},
};

69
lec-tasks/lecture3.txt Normal file
View File

@@ -0,0 +1,69 @@
ol#list(type="I")
li Препроцессоры HTML
ul(type="disc")
li.first
a(href="#") Haml
li Pug
li Препроцессоры CSS
ul(type="circle")
li.first SAAS
li Stylus
- var tag = 'h'
- var i = 1
#{tag+i} Уровень #{i}
- i++
#{tag+i} Уровень #{i}
- i++
#{tag+i} Уровень #{i}
- i++
#{tag+i} Уровень #{i}
- var products ={"Товар":"Цена","ручка":30.5, "карандаш":50, "альбом":156, "тетрадь":21.5, "ластик":10.2}
table
each name,price in products
tr
td #{name}
td #{price}
table
- for(var i=0;i<10;i++)
tr
- for(var j=0;j<10;j++)
- if((i + j) % 2 == 0)
td.white
- else
td.black
mixin createList(listType, items, tag)
- var dispListType = "ul"
- if (listType == "ol")
- dispListType = "ol"
#{dispListType}.list
each item in items
li
#{tag} #{item}
// Вызов миксина
+createList('ul', ['Python', 'JavaScript', 'Java'], 'strong')
size=1%
section
box-shadow: size size (2*size) rgba(0,0,0,0.5)
padding:size*2
margin:size*4

48
opencv_details.html Normal file
View File

@@ -0,0 +1,48 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>
OpenCV Details
</title>
</head>
<body bgcolor="#F0F8FF">
<details>
<summary>Menu</summary>
<ul>
<li><a href="./index.html">Home</a></li>
<li><a href="./embeded_details.html"><h4>Embeded Details</h4></a></li>
<li><a href="./opencv_details.html">OpenCV Details</a></li>
<li><a href="./photography_details.html">Photography Details</a></li>
<li><a href="./table.html">Table with filters (not working yet)</a></li>
<li><a href="./images/institute.png">Institute</a></li>
</ul>
</details>
<h2 align="center">OpenCV Details</h2>
<hr width="800" align="center">
<p align="center">
<img src="./images/opencv.png" alt="OpenCV" height="150" align="top">
as mentioned before i love when programs are able to <i>see</i> things <br>
my experience with opencv started with simple hight level functions like detectCircle or findContours and
etc...<br>
Right now i'm crawling deeper into the library , and the idea of standartisation of parameters between different
cameras is appealig to me <br>
so i'm trying to understand how all that works from the math side<br>
Additionally, I'm exploring Re-Identification (ReId) techniques,
they are used for recognizing and tracking objects across different camera views or consecutive frames.
</p>
<hr width="500" align="center">
<p>
One of many projects I've worked on is <a href="https://github.com/OkunElya/ArucoNGP-MapCreator"
target="_blank">ArucoNGP-MapCreator</a>.<br>
The idea was to create a relative map of Aruco markers just from photos of pairs (or more) of them.<br>
It can also estimate the camera's position in the world relative to a specific marker, using only images
containing any marker.<br>
It was also my first deep dive into linear algebra.<br>
</p>
</body>
</html>

6695
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@@ -1,30 +0,0 @@
{
"name": "template_pug",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack --mode production",
"serve": "webpack serve --open --mode development",
"dev": "webpack --mode development",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"chokidar": "^4.0.3",
"css-loader": "^6.8.1",
"filemanager-webpack-plugin": "^8.0.0",
"glob": "^11.0.3",
"html-webpack-plugin": "^5.5.3",
"pug": "^2.0.4",
"pug-loader": "^2.4.0",
"style-loader": "^3.3.3",
"stylus": "^0.61.0",
"stylus-loader": "^7.1.3",
"webpack": "^5.89.0",
"webpack-cli": "^5.1.4",
"webpack-dev-server": "^4.15.1"
}
}

42
photography_details.html Normal file
View File

@@ -0,0 +1,42 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>
Photography Details
</title>
</head>
<body bgcolor="#F0F8FF">
<details>
<summary>Menu</summary>
<ul>
<li><a href="./index.html">Home</a></li>
<li><a href="./embeded_details.html">Embeded Details</a></li>
<li><a href="./opencv_details.html">OpenCV Details</a></li>
<li><a href="./photography_details.html"><h4>Photography Details</h4></a></li>
<li><a href="./table.html">Table with filters (not working yet)</a></li>
<li><a href="./images/institute.png">Institute))</a></li>
</ul>
</details>
<h2 align="center">Photography Details</h2>
<hr width="800" align="center">
<p align="center">
Usually i capture landcape scenes with SLR camera, the main workhorse is Nikon D3100 with kit and 70-210mm
</p>
<p align="center">
<img src="images/photos/image0.png" alt="Photo 0" width="200">
<img src="images/photos/image1.png" alt="Photo 1" width="200">
<img src="images/photos/image2.png" alt="Photo 2" width="200">
</p>
<p align="center">
<img src="images/photos/image3.png" alt="Photo 3" width="200">
<img src="images/photos/image4.png" alt="Photo 4" width="200">
<img src="images/photos/image5.png" alt="Photo 5" width="200">
</p>
</body>
</html>

View File

@@ -1,124 +0,0 @@
-
// Данные для меню навигации
var menuItems = {
Home: './index.html',
Embedded: './embeded_details.html',
OpenCV: './opencv_details.html',
Photography: './photography_details.html',
Table: './table.html',
Institute: './images/institute.png'
};
// Данные для боковых карточек
var smallCards = [
{
header: 'Заголовок',
text: '3D printers are versatile tools used for creating prototypes, custom parts, and artistic designs. They work by layering materials.',
image: '../images/16x10/3d-printer.jpeg',
imageAlt: '3D Printer',
link: '#',
},
{
header: 'BLHeli ESCs',
text: 'BLHeli ESCs are electronic speed controllers designed for drones, offering smooth and precise motor control.',
image: '../images/16x10/blheli-esc.jpeg',
imageAlt: 'BLHeli ESC',
link: '#',
},
{
header: 'Raspberry Pi Nano',
text: 'Raspberry Pi Nano is a compact computer ideal for learning, prototyping, and IoT projects. It is highly energy-efficient.',
image: '../images/16x10/rpi-nano.jpeg',
imageAlt: 'Raspberry Pi Nano',
link: '#',
},
{
header: 'Smart Thermostats',
text: 'Smart thermostats help regulate home temperatures efficiently, saving energy and enhancing comfort with automation.',
image: '../images/16x10/thermostat.jpeg',
imageAlt: 'Smart Thermostat',
link: '#',
}
];
const pages = {
embedded: {
title: 'Embedded Details',
slug: 'embedded',
menuTitle: 'Embeded Details',
images: [
{ src: './images/esp32.png', alt: 'ESP32', height: 150 },
{ src: './images/arduino.png', alt: 'Arduino', height: 150 },
{ src: './images/stm32.png', alt: 'STM32', height: 150 }
],
paragraphs: [
"My programming path started with embeded systems, i love all the low level things that Mcu could do with just a little bit of code, sometimes build or flashing progress could take some time to get a hand of , but after that everething usualy goes smooth",
"The first MCU i tried was a ATmega328P, after some time i was surprised with the debug capabilities on the Stm32 and now i'm working with esp32-s3 , that's a good chip, has internal JTAG and all the shiny wireless interfaces but feels faulty for some reason <i>regular segfaults with CDC</i>"
],
table: {
title: 'Microcontroller Comparison Table',
headers: ['Board/MCU', 'UART Count', 'Dynamic UART Assignment', 'ADC Channels', 'Debug Support', 'Flash Size', 'Wireless Connectivity'],
rows: [
['ESP32', '3', 'Yes (via IO MUX)', '18', 'JTAG, Serial', '4MB (typical)', 'Wi-Fi, Bluetooth'],
['ESP32-S3', '3', 'Yes (via IO MUX)', '20', 'JTAG, Serial', '8MB (typical)', 'Wi-Fi, Bluetooth LE'],
['ESP-01', '1', 'No', '1', 'Serial only', '512KB/1MB', 'Wi-Fi'],
['Arduino Uno (ATmega328P)', '1', 'No', '6', 'Serial, DebugWire', '32KB', 'None'],
['Blue Pill (STM32F103C8T6)', '3', 'Yes (remappable)', '10', 'SWD, Serial', '64KB/128KB', 'None']
]
},
footer: "no rpi pico here , the build system has won over my temper"
},
opencv: {
title: 'OpenCV Details',
slug: 'opencv',
menuTitle: 'OpenCV Details',
images: [
{ src: './images/opencv.png', alt: 'OpenCV', height: 150 }
],
paragraphs: [
"as mentioned before i love when programs are able to <i>see</i> things",
"my experience with opencv started with simple hight level functions like detectCircle or findContours and etc...",
"Right now i'm crawling deeper into the library , and the idea of standartisation of parameters between different cameras is appealig to me",
"so i'm trying to understand how all that works from the math side",
"Additionally, I'm exploring Re-Identification (ReId) techniques, they are used for recognizing and tracking objects across different camera views or consecutive frames."
],
content: {
type: 'text',
text: "One of many projects I've worked on is <a href=\"https://github.com/OkunElya/ArucoNGP-MapCreator\" target=\"_blank\">ArucoNGP-MapCreator</a>.<br>The idea was to create a relative map of Aruco markers just from photos of pairs (or more) of them.<br>It can also estimate the camera's position in the world relative to a specific marker, using only images containing any marker.<br>It was also my first deep dive into linear algebra."
}
},
photography: {
title: 'Photography Details',
slug: 'photography',
menuTitle: 'Photography Details',
images: [],
paragraphs: [
"Usually i capture landcape scenes with SLR camera, the main workhorse is Nikon D3100 with kit and 70-210mm"
],
gallery: [
[
{ src: 'images/photos/image0.png', alt: 'Photo 0', width: 200 },
{ src: 'images/photos/image1.png', alt: 'Photo 1', width: 200 },
{ src: 'images/photos/image2.png', alt: 'Photo 2', width: 200 }
],
[
{ src: 'images/photos/image3.png', alt: 'Photo 3', width: 200 },
{ src: 'images/photos/image4.png', alt: 'Photo 4', width: 200 },
{ src: 'images/photos/image5.png', alt: 'Photo 5', width: 200 }
]
]
}
};
-
const menu = [
{ href: './index.html', title: 'Home' },
{ href: './embeded_details.html', title: 'Embeded Details' },
{ href: './opencv_details.html', title: 'OpenCV Details' },
{ href: './photography_details.html', title: 'Photography Details' },
{ href: './table.html', title: 'Table with filters (not working yet)' },
{ href: './images/institute.png', title: 'Institute' }
];

View File

@@ -1,72 +0,0 @@
include data.pug
-
// Данные для меню навигации
const navbarItems = {
Home: './index.html',
Embedded: './embeded_details.html',
OpenCV: './opencv_details.html',
Photography: './photography_details.html',
Table: './table.html',
Institute: './images/institute.png'
};
const smallCards = [
{
header: 'Заголовок',
text: '3D printers are versatile tools used for creating prototypes, custom parts, and artistic designs. They work by layering materials.',
image: require('../images/16x10/3d-printer.jpeg'),
imageAlt: '3D Printer',
link: '#',
},
{
header: 'BLHeli ESCs',
text: 'BLHeli ESCs are electronic speed controllers designed for drones, offering smooth and precise motor control.',
image: require('../images/16x10/blheli-esc.jpeg'),
imageAlt: 'BLHeli ESC',
link: '#',
},
{
header: 'Raspberry Pi Nano',
text: 'Raspberry Pi Nano is a compact computer ideal for learning, prototyping, and IoT projects. It is highly energy-efficient.',
image: require('../images/16x10/rpi-nano.jpeg'),
imageAlt: 'Raspberry Pi Nano',
link: '#',
},
{
header: 'Smart Thermostats',
text: 'Smart thermostats help regulate home temperatures efficiently, saving energy and enhancing comfort with automation.',
image: require('../images/16x10/thermostat.jpeg'),
imageAlt: 'Smart Thermostat',
link: '#',
}
];
const galleryImages= [
{ src: require('../images/sqarucos.png'), alt: 'ESP32'},
{ src: require('../images/sqstm32.png'), alt: 'Arduino'},
{ src: require('../images/sqesp32.png'), alt: 'STM32'}
]
mixin navbarMixin(selectedItem)
.navbar
each navbarUrl,navbarName in navbarItems
if navbarName == selectedItem
a.navbar__link__wrapper(href=navbarUrl)
.navbar__item.navbar__item_selected #{navbarName}
else
a.navbar__link__wrapper(href=navbarUrl)
.navbar__item #{navbarName}
mixin infoCardsMinxin()
each cardData in smallCards
.small-card
.small-card__content
h3.small-card__header #{cardData.header}
p.small-card__text #{cardData.text}
a.small-card__link(href=cardData.link) Подробнее»
.small-card__image
img(src=cardData.image alt=cardData.imageAlt)
mixin galleryMixin()
each img in galleryImages
img.gallery__image(src=img.src alt=img.alt)

View File

@@ -1,69 +0,0 @@
include data.pug
mixin detailsPage(pageData)
doctype html
html(lang="en")
head
meta(charset="UTF-8")
title= pageData.title
body(bgcolor="#F0F8FF")
//- Menu
details
summary Menu
ul
each item in menu
li
if item.title === pageData.menuTitle
a(href=item.href)
h4= item.title
else
a(href=item.href)= item.title
//- Page Title
h2(align="center")= pageData.title
hr(width="800" align="center")
//- Header Images
if pageData.images && pageData.images.length > 0
p(align="center")
each img in pageData.images
if img.height
img(src=img.src alt=img.alt height=img.height)
else if img.width
img(src=img.src alt=img.alt width=img.width)
else
img(src=img.src alt=img.alt)
//- Paragraphs
if pageData.paragraphs
each para in pageData.paragraphs
p(align="justify")!= para
//- Table (for embedded page)
if pageData.table
h3(align="center")= pageData.table.title
table(border="1" align="center" cellpadding="6" cellspacing="0")
tr
each header in pageData.table.headers
th= header
each row in pageData.table.rows
tr
each cell in row
td= cell
//- Content (for opencv page)
if pageData.content
hr(width="500" align="center")
p!= pageData.content.text
//- Gallery (for photography page)
if pageData.gallery
each row in pageData.gallery
p(align="center")
each img in row
img(src=img.src alt=img.alt width=img.width)
//- Footer
if pageData.footer
p(align="right")= pageData.footer

View File

@@ -1 +0,0 @@
import './styles/main.styl'

View File

@@ -1,51 +0,0 @@
include ../components/mixins.pug
-
const infoBlockA = {
header: "Embedded Systems",
text: "Had a serval projects with different MCUs and wrote firmware for them. My main stack consists of Platformio+EspIdf or Arduino, also tried STM32 asdadas",
description: "I love embeded development beceuse of autonomity of produced devices, the redices are not dependant on any other hardware and can work autunomously",
img: require('../images/AQ_monitor.png'),
imgAlt: "ESP32"
}
const infoBlockB = {
header: "Embedded Systems",
text: "Had a serval projects with different MCUs and wrote firmware for them. My main stack consists of Platformio+EspIdf or Arduino, also tried STM32",
description: "I love embeded development device because of autonomity of produced devices, the devices are not dependant on any other hardware and can work autunomously or off the grid",
img: require('../images/remote.jpeg'),
imgAlt: "ESP32"
}
html(lang="en")
head
meta(charset="UTF-8")
title Portfolio
body
+navbarMixin("Home")
.gallery
+galleryMixin()
.main-container
.main-container__content
article.info-block
h2.info-block__header #{infoBlockA.header}
.info-block__container.info-block__container_layout-a
p.info-block__text #{infoBlockA.text}
.info-block__details
p.info-block__description #{infoBlockA.description}
a.info-block__link(href="#") More info
img.info-block__image(src=infoBlockA.img alt=infoBlockA.imgAlt)
article.info-block
h2.info-block__header #{infoBlockB.header}
.info-block__container.info-block__container_layout-b
p.info-block__text #{infoBlockB.text}
img.info-block__image(src=infoBlockB.img alt=infoBlockB.imgAlt)
.info-block__details
p.info-block__description #{infoBlockB.description}
a.info-block__link(href="#") More info
.sidebar
+infoCardsMinxin()

View File

@@ -1,166 +0,0 @@
// Миксины для переиспользования
double-border()
border-top double thick silver
border-bottom double thick silver
flex-center()
display flex
align-items center
justify-content center
text-center-bold()
text-align center
font-weight bold
display block
grid-responsive(columns)
display grid
grid-template-columns columns
grid-template-rows 1fr
// Основные стили
.navbar
double-border()
font-size 0
grid-responsive(repeat(7, min-content))
justify-items start
&__link__wrapper
color black
text-decoration none
&__item
display inline-block
width max-content
height 3em
line-height 3em
text-align center
vertical-align middle
padding 0 10px
margin 0 10px
overflow hidden
text-overflow ellipsis
font-size medium
&_selected
color green
font-weight bold
border-left double thin silver
border-right double thin silver
.gallery
display flex
flex-direction row
width 90%
margin auto
&__image
margin auto
width 100%
border thin solid black
&:nth-child(2n+1)
margin-top 10px
.main-container
grid-responsive(3fr 1fr)
.info-block
border solid thin black
padding 2vw
margin 1vw 0
&__header
text-center-bold()
&__container
&_layout-a
grid-responsive(3fr 3fr 2fr)
&_layout-b
grid-responsive(4fr 7fr 4fr)
& > *
margin 2vw
&__text, &__description
text-align justify
&__image
margin auto
width 100%
&__link
color inherit
.sidebar
border-left thin solid black
margin 30px 0 0 50px
.small-card
margin 20px 10px 0
grid-responsive(1fr 1fr)
&__content
text-align justify
&__header
text-center-bold()
text-align right
&__link
display block
text-align right
color inherit
&__image
& img
width 100%
margin-left:10px
@media screen and (max-width: 1000px)
.small-card
display flex
flex-direction column
.sidebar
margin 0
width:100%
@media screen and (max-width: 800px)
.navbar
grid-responsive(1fr 1fr)
grid-template-rows 1fr 1fr 1fr
justify-items center
&__item
&_selected
border-bottom double thick silver
border-left none
border-right none
.gallery
display inline-flex
flex-direction column
width 100%
&__image
width 100%
height 100%
&:nth-child(2n+1)
margin-top 0px
.main-container
display flex
flex-direction column
.info-block
&__container
&_layout-a, &_layout-b
display flex
flex-direction column

View File

@@ -1,2 +0,0 @@
// Импорт стилей для главной страницы
@import 'index.styl'

2360
table.html Normal file

File diff suppressed because it is too large Load Diff

View File

@@ -1,69 +0,0 @@
const HtmlWebpackPlugin = require("html-webpack-plugin");
const FileManagerPlugin = require("filemanager-webpack-plugin");
const path = require("path");
const fs = require("fs");
const pagesDir = path.join(__dirname, "src", "pages");
const pages = fs.readdirSync(pagesDir).filter(file => file.endsWith(".pug"));
module.exports = {
output: {
path: path.join(__dirname, "dist"),
filename: "index.[contenthash].js",
assetModuleFilename: path.join("images", "[name].[contenthash][ext]"),
},
entry: path.join(__dirname, "src", "index.js"),
module: {
rules: [
{
test: /\.pug$/,
loader: "pug-loader",
},
{
test: /\.(png|jpg|jpeg|gif)$/i,
type: "asset/resource",
},
{
test: /\.svg$/,
type: "asset/resource",
generator: {
filename: path.join("icons", "[name].[contenthash][ext]"),
},
},
{
test: /\.styl$/,
use: [
{
loader: "style-loader",
},
{
loader: "css-loader",
},
{
loader: "stylus-loader",
},
],
},
],
},
plugins: [
...pages.map(
(page) =>
new HtmlWebpackPlugin({
template: path.join(pagesDir, page),
filename: page.replace(".pug", ".html"),
})
),
new FileManagerPlugin({
events: {
onStart: {
delete: ["dist"],
},
},
}),
],
devServer: {
watchFiles: path.join(__dirname, "src"),
port: 9000,
},
};