Skip to content

Commit

Permalink
feat(CommWebview): add example CommWebview
Browse files Browse the repository at this point in the history
  • Loading branch information
@itas109
itas109 committed Jun 30, 2024
1 parent e1617c3 commit 1e4710b
Show file tree
Hide file tree
Showing 4 changed files with 703 additions and 0 deletions.
60 changes: 60 additions & 0 deletions examples/CommWebview/CMakeLists.txt
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
#***************************************************************************
# @file CMakeLists.txt
# @author itas109 (itas109@qq.com) \n\n
# Blog : https://blog.csdn.net/itas109 \n
# Github : https://github.com/itas109 \n
# Gitee : https://gitee.com/itas109 \n
# QQ Group : 129518033
# @brief Lightweight cross-platform serial port library based on C++
# @copyright The CSerialPort is Copyright (C) 2014 itas109 <itas109@qq.com>.
# You may use, copy, modify, and distribute the CSerialPort, under the terms
# of the LICENSE file.
############################################################################
cmake_minimum_required(VERSION 2.8.12)

project(CommWebview)

# add_definitions(-DCSERIALPORT_DEBUG) # CSerialPort Debug Mode

set(CMAKE_CXX_STANDARD 11)

if (WIN32)
# WebView2.h
# curl -sSL "https://www.nuget.org/api/v2/package/Microsoft.Web.WebView2" | tar -xf - -C
elseif(APPLE)

elseif(UNIX)
# Find GTK3 and WebKit2GTK
find_package(PkgConfig REQUIRED)
pkg_check_modules(GTK3 REQUIRED gtk+-3.0)
pkg_check_modules(WEBKIT2GTK REQUIRED webkit2gtk-4.0)

include_directories(${GTK3_INCLUDE_DIRS} ${WEBKIT2GTK_INCLUDE_DIRS})
link_directories(${GTK3_LIBRARY_DIRS} ${WEBKIT2GTK_LIBRARY_DIRS})
endif()

include_directories(.)

# cserialport files
set(CSerialPortRootPath "${CMAKE_CURRENT_SOURCE_DIR}/../..")
include_directories(${CSerialPortRootPath}/include)
list(APPEND CSerialPortSourceFiles ${CSerialPortRootPath}/src/SerialPort.cpp ${CSerialPortRootPath}/src/SerialPortBase.cpp ${CSerialPortRootPath}/src/SerialPortInfo.cpp ${CSerialPortRootPath}/src/SerialPortInfoBase.cpp)
if (WIN32)
list(APPEND CSerialPortSourceFiles ${CSerialPortRootPath}/src/SerialPortInfoWinBase.cpp ${CSerialPortRootPath}/src/SerialPortWinBase.cpp)
list(APPEND CSerialPortSourceFiles ${CSerialPortRootPath}/lib/version.rc)
elseif (UNIX)
list(APPEND CSerialPortSourceFiles ${CSerialPortRootPath}/src/SerialPortInfoUnixBase.cpp ${CSerialPortRootPath}/src/SerialPortUnixBase.cpp)
endif ()

add_executable(${PROJECT_NAME} main.cpp ${CSerialPortSourceFiles})

if (WIN32)
target_link_libraries( ${PROJECT_NAME} setupapi)
elseif(APPLE)
find_library(IOKIT_LIBRARY IOKit)
find_library(FOUNDATION_LIBRARY Foundation)
find_library(WebKit_LIBRARY WebKit REQUIRED)
target_link_libraries( ${PROJECT_NAME} ${FOUNDATION_LIBRARY} ${IOKIT_LIBRARY} ${WebKit_LIBRARY})
elseif (UNIX)
target_link_libraries( ${PROJECT_NAME} pthread ${GTK3_LIBRARIES} ${WEBKIT2GTK_LIBRARIES})
endif()
37 changes: 37 additions & 0 deletions examples/CommWebview/README.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
# CSerialPort for Webview

```
cmake: 3.8.2
webview: v0.10.0
json: v3.11.3
```

## Build

```
cd example/CommWebview
mkdir bin && cd bin
cmake ..
cmake --build .
```

## Run

```
./CommWebview
```

Tree

```
tree
.
+--- CMakeLists.txt
+--- index.html
+--- json.hpp
+--- main.cpp
+--- README.md
+--- webview.h
+--- WebView2.h
```

184 changes: 184 additions & 0 deletions examples/CommWebview/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,184 @@
<!DOCTYPE html>
<html lang='en'>

<head>
<meta charset='utf-8'>
<title>CSerialPort Webview Example</title>

<style>
#header {
text-align: center;
padding: 1px;
}

#left {
position: absolute;
width: 55%;
height: 100%;
}

#right {
margin-left: 55%;
height: 100%;
}

#receive {
width: 50vw;
white-space: pre-wrap;
word-wrap: break-word;
}

#log {
width: 40vw;
white-space: pre-wrap;
word-wrap: break-word;
}
</style>
</head>

<body>
<div id='header'>CSerialPort Webview Example</div>

<hr />

<div>
<label>PortName</label>
<select id='listPortSelect'></select>
<label>BaudRate</label>
<select id='baudRateSelect'></select>
<button id='onOpen' onclick='onOpen()'>open</button>
<button id='onClose' onclick='onClose()'>close</button>
<input type='checkbox' id='setDtr' onclick='onSetDtr(this)' />
<label>setDtr</label>
<input type='checkbox' id='setRts' onclick='onSetRts(this)' />
<label>setRts</label>
</div>

<hr />

<div>
<input type='checkbox' id='isSendHex' />
<label>isSendHex</label>
<label>Send</label>
<input id='send' type='text' style='width:230px;' value='https://github.com/itas109/CSerialPort'>
<button id='onSend' onclick='onSend()'>send</button>
</div>

<hr />

<div id='left'>
<h2>Receive</h2>
<input type='checkbox' id='isReceiveHex' onclick='onSetReceiveMode()' />
<label>isReceiveHex</label>
<button id='clearReceive' onclick='onClearReceive()'>clear</button>
<pre id='receive'></pre>
</div>

<div id='right'>
<h2>Log</h2>
<button id='clearLog' onclick='onClear()'>clear</button>
<pre id='log'></pre>
</div>

<script>
// tile
(async function listPort() {
let result = await window.getVersion();
document.title += ' - ' + result.version;
})();

// listPortSelect
const listPortSelect = document.getElementById('listPortSelect');
(async function listPort() {
const listPorts = await window.listPorts();
listPorts.forEach(listPort => {
const optionElement = document.createElement('option');
optionElement.value = listPort.portName;
optionElement.textContent = listPort.portName;
listPortSelect.appendChild(optionElement);
});
})();

// baudRateSelect
const baudRateSelect = document.getElementById('baudRateSelect');
const baudRateArray = [110, 300, 600, 1200, 2400, 4800, 9600, 14400, 19200, 38400, 57600, 115200, 921600];
baudRateArray.forEach(baudRate => {
const option = document.createElement('option');
option.value = baudRate;
option.text = baudRate;
if (baudRate === 9600) {
option.selected = true; // default selected
}
baudRateSelect.appendChild(option);
});
</script>
<script>
function output(str, id = '#log') {
document.querySelector(id).textContent += str + '\n';
}

function outputReceive(str, id = '#receive') {
document.querySelector(id).textContent += str;
}

function onClear(id = '#log') {
document.querySelector(id).textContent = '';
}

function onClearReceive(id = '#receive') {
document.querySelector(id).textContent = '';
}

async function onOpen() {
const params = {
portName: document.querySelector('#listPortSelect option:checked').value,
baudRate: parseInt(document.querySelector('#baudRateSelect option:checked').value)
};

await window.init(params);
let result = await window.open({});
output(JSON.stringify(result));
}

async function onClose() {
await window.close({});
output('close ok');
}

async function onSend() {
const str = document.querySelector('#send').value;
const params = {
isHex: document.querySelector('#isSendHex').checked,
data: encodeURI(str),
size: str.length
};
let result;
result = await window.writeData(params);
output(JSON.stringify(result));
}

async function onSetReceiveMode() {
const params = {
isReceiveHex: document.querySelector('#isReceiveHex').checked
};
await window.setReceiveMode(params);
}

async function onSetDtr(checkbox) {
await window.setDtr({
isSet: checkbox.checked
});
output('setDtr ' + checkbox.checked);
}

async function onSetRts(checkbox) {
await window.setRts({
isSet: checkbox.checked
});
output('setRts ' + checkbox.checked);
}
</script>

</body>

</html>
Loading

0 comments on commit 1e4710b

Please sign in to comment.