Skip to content

Commit

Permalink
Add support for color picking in models
Browse files Browse the repository at this point in the history
  • Loading branch information
@xianfei
xianfei committed May 1, 2022
1 parent 0e8a7b1 commit e941d67
Show file tree
Hide file tree
Showing 18 changed files with 172 additions and 32 deletions.
2 changes: 1 addition & 1 deletion main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -210,7 +210,7 @@ if (argv.bsmode) {
if(args.useGlass) {
myBrowserWindow = blurBrowserWindow;
addtionalArgs ={
vibrancy : "dark",
vibrancy : "light",
backgroundColor: "#00000000"
}
}
Expand Down
77 changes: 58 additions & 19 deletions mainview/framework.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,7 @@
>
<i
class="mdui-icon material-icons"
onclick="maximizeBtn()"
onclick="window.maximizeBtn()"
style="font-size: 20px; margin-top: 0"
>fullscreen</i
>
Expand Down Expand Up @@ -186,22 +186,22 @@
></div> -->
<button
v-bind:class="tab=='model'?'mdui-btn select mdui-color-theme':'mdui-btn'"
onclick="app.tab='model'"
onclick="sysmocapApp.tab='model'"
>
<i class="mdui-icon material-icons">folder_open</i
>{{language.titlebar.modelLib}}
</button>
<button
v-bind:class="tab=='render'?'mdui-btn select mdui-color-theme':'mdui-btn'"
onclick="app.tab='render'"
onclick="sysmocapApp.tab='render'"
>
<i class="mdui-icon material-icons"
>filter_center_focus</i
>{{language.titlebar.mocap}}
</button>
<button
v-bind:class="tab=='settings'?'mdui-btn select mdui-color-theme':'mdui-btn'"
onclick="app.tab='settings'"
onclick="sysmocapApp.tab='settings'"
>
<i class="mdui-icon material-icons">settings</i
>{{language.titlebar.settings}}
Expand Down Expand Up @@ -230,6 +230,21 @@ <h1 class="mdui-text-color-theme">
</h1>
<div class="flex-container" id="userModels">
<div
v-if="settings.ui.useNewModelUI"
class="model-item-new"
v-for="model in builtIn"
v-on:click="require('electron').ipcRenderer.send('openModelViewer', {model:model,backgroundColor:$event.currentTarget.style.getPropertyValue('--md-sys-color-primary-container'),color:$event.currentTarget.style.getPropertyValue('--md-sys-color-primary'),textColor:$event.currentTarget.style.getPropertyValue('--md-sys-color-on-primary-container'),useGlass:settings.ui.useGlass});"
>
<img class="my-img" v-bind:src="model.picBg" />
<div class="desc">
<h2>{{model.name}}</h2>
<div class="type">
{{model.type.toUpperCase()}}
</div>
</div>
</div>
<div
v-if="!settings.ui.useNewModelUI"
v-for="model in builtIn"
class="mdui-ripple model-item"
v-on:click="require('electron').ipcRenderer.send('openModelViewer', {model:model,backgroundColor:bg,color:'#fff',useGlass:settings.ui.useGlass});"
Expand Down Expand Up @@ -262,7 +277,12 @@ <h1>{{model.name}}</h1>
</div>
</div>
<div
v-for="i in [1,2,3,4,5]"
v-for="i in [1,2,3,4,5,6]"
class="model-item-new"
style="visibility: hidden; height: 1px"
></div>
<div
v-for="i in [1,2,3,4,5,6]"
class="model-item"
style="visibility: hidden; height: 1px"
></div>
Expand Down Expand Up @@ -314,7 +334,7 @@ <h1>{{model.name}}</h1>
<span style="margin-left: 60px"></span>
<button
class="mdui-btn mdui-color-theme"
onclick="startMocap(this)"
onclick="window.startMocap(this)"
>
<i class="mdui-icon material-icons">play_arrow</i
>{{language.tabMocap.start}}
Expand Down Expand Up @@ -406,16 +426,6 @@ <h1 class="mdui-text-color-theme">
<div></div>
</div>
</div>
<div class="settings-item" v-show="platform!=='web'">
<label class="mdui-switch">
<span>{{language.tabSettings.ui.useGlass}}</span>
<input
type="checkbox"
v-model="settings.ui.useGlass"
/>
<i class="mdui-switch-icon"></i>
</label>
</div>
<div class="settings-item">
<span>{{language.tabSettings.ui.language}}</span>
<select
Expand All @@ -428,6 +438,26 @@ <h1 class="mdui-text-color-theme">
<option value="en">English</option>
</select>
</div>
<div class="settings-item" v-show="platform!=='web'">
<label class="mdui-switch">
<span>{{language.tabSettings.ui.useGlass}}</span>
<input
type="checkbox"
v-model="settings.ui.useGlass"
/>
<i class="mdui-switch-icon"></i>
</label>
</div>
<div class="settings-item" v-show="platform!=='web'">
<label class="mdui-switch">
<span>使用新版模型库UI (beta)</span>
<input
type="checkbox"
v-model="settings.ui.useNewModelUI"
/>
<i class="mdui-switch-icon"></i>
</label>
</div>
<!-- Setting Tab: Preview -->
<h1 class="mdui-text-color-theme">
{{language.tabSettings.preview.name}}
Expand Down Expand Up @@ -487,7 +517,7 @@ <h1 class="mdui-text-color-theme" v-show="platform!=='web'">
<div
class="settings-item"
v-show="settings.forward.enableForwarding"
onclick="mdui.prompt('','修改端口号',(s)=>{app.settings.forward.port = parseInt(s)},()=>{},{defaultValue:app.settings.forward.port})"
onclick="mdui.prompt('','修改端口号',(s)=>{window.sysmocapApp.settings.forward.port = parseInt(s)},()=>{},{defaultValue:window.sysmocapApp.settings.forward.port})"
>
<span>{{language.tabSettings.forward.port}}</span>
<span
Expand Down Expand Up @@ -552,7 +582,7 @@ <h1 class="mdui-text-color-theme">
<span>Show FPS</span>
<input
type="checkbox"
v-model="settings.output.antialias"
v-model="settings.output.showFPS"
/>
<i class="mdui-switch-icon"></i>
</label>
Expand Down Expand Up @@ -803,6 +833,15 @@ <h1 class="mdui-text-color-theme" v-show="platform!=='web'">
</div>
</div>

<script src="framework.js"></script>
<script src="framework.js" type="module" async></script>

<script>
if (typeof require != "undefined") {
// import electron remote
remote = require("@electron/remote");

ipcRenderer = require("electron").ipcRenderer;
}
</script>
</body>
</html>
30 changes: 26 additions & 4 deletions mainview/framework.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,14 @@ var ipcRenderer = null;
var remote = null;
var platform = "web";

import {
argbFromHex,
themeFromSourceColor,
themeFromImage,
sourceColorFromImage,
applyTheme,
} from "../utils/material-color-utilities/dist/index.js";

if (typeof require != "undefined") {
// import electron remote
remote = require("@electron/remote");
Expand Down Expand Up @@ -72,6 +80,16 @@ if (typeof require != "undefined") {
).color;
},
},
mounted() {
var modelOnload = async function () {
for (var e of document.querySelectorAll(".my-img")) {
var theme = await themeFromImage(e);

applyTheme(theme, { target: e.parentElement, dark: false });
}
};
if (this.settings.ui.useNewModelUI) modelOnload();
},
watch: {
settings: {
handler(newVal, oldVal) {
Expand All @@ -92,6 +110,8 @@ if (typeof require != "undefined") {
},
});

window.sysmocapApp = app;

remote.app.getGPUInfo("complete").then((info) => {
app.glRenderer = info.auxAttributes.glRenderer;
});
Expand Down Expand Up @@ -144,15 +164,15 @@ if (typeof require != "undefined") {

var isMax = false;

function maximizeBtn() {
window.maximizeBtn = function () {
if (isMax) {
remote.getCurrentWindow().restore();
document.getElementById("maxbtn").innerHTML =
'<i onclick="maximizeBtn()" class="mdui-icon material-icons" style="font-size: 20px; margin-top:0;">fullscreen</i>';
'<i onclick="window.maximizeBtn()" class="mdui-icon material-icons" style="font-size: 20px; margin-top:0;">fullscreen</i>';
} else {
remote.getCurrentWindow().maximize();
document.getElementById("maxbtn").innerHTML =
'<i onclick="maximizeBtn()" class="mdui-icon material-icons" style="font-size: 20px; margin-top:0;">fullscreen_exit</i>';
'<i onclick="window.maximizeBtn()" class="mdui-icon material-icons" style="font-size: 20px; margin-top:0;">fullscreen_exit</i>';
}
isMax = !isMax;
}
Expand Down Expand Up @@ -402,6 +422,8 @@ if (typeof require != "undefined") {
},
});

window.sysmocapApp = app;

fetch("../models/models.json")
.then((e) => {
return e.json();
Expand All @@ -412,7 +434,7 @@ if (typeof require != "undefined") {
});
}

function startMocap(e) {
window.startMocap = function(e) {
if (e.innerHTML.indexOf(app.language.tabMocap.start) != -1) {
localStorage.setItem("modelInfo", app.selectModel);
localStorage.setItem("useCamera", app.videoSource);
Expand Down
65 changes: 65 additions & 0 deletions mainview/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -143,3 +143,68 @@ button {
background-color: #ff6060;
color: #fff;
}


.model-item-new {
position: relative;
display: inline-block;
min-width: 240px;
max-width: 360px;
flex: 1;
height: 100px;
border-radius: 20px;
overflow: hidden;
box-shadow: var(--md-sys-color-primary-container) 0px 0px 5px;
/* border: solid #ccc 0.1px; */
margin: 8px;
}
.model-item-new:hover {
outline: solid var(--md-sys-color-primary) 2px;
outline-offset:3px;
}

.model-item-new img {
position: absolute;
height: 100%;
margin-left: -20px;
}

.model-item-new .desc {
position: absolute;
z-index: 10;
background: linear-gradient(
to right,
rgba(255, 255, 255, 0),
var(--md-sys-color-primary-container),
var(--md-sys-color-primary-container),
var(--md-sys-color-primary-container),
var(--md-sys-color-primary-container)
);
color: var(--md-sys-color-on-primary-container);
height: 100%;
left: 60px;
width: calc(100% - 60px);
padding-left: 100px;
text-align: right;
}

.model-item-new .desc h2 {
margin-top: 21px;
margin-left: -50px;
width: calc(100% - 70px);
font-weight: 500;
line-height: 20px;
}

.model-item-new .type {
background-color: var(--md-sys-color-primary);
color: var(--md-sys-color-on-primary);
width: 40px;
height: 18px;
text-align: center;
border-radius: 5px;
font-size: 10px;
line-height: 18px;
margin-left: calc(100% - 162px);
font-weight: 200;
}
Binary file added models/img/Amaris.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added models/img/Ashtra.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added models/img/Fox.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added models/img/Hanako.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added models/img/IceDwen.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added models/img/Natsuki.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added models/img/Sendagaya.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added models/img/VAL.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added models/img/sample-model-2.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
7 changes: 7 additions & 0 deletions models/models.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
"path": "../models/test.vrm",
"type": "vrm",
"pic": "../models/3.jpg",
"picBg": "../models/img/Ashtra.png",
"accessories":{
"Shoes":"Bodybaked_4",
"Coats":"Bodybaked_5"
Expand All @@ -14,6 +15,7 @@
"path": "../models/three-vrm-girl.vrm",
"type": "vrm",
"pic": "../models/1.jpg",
"picBg": "../models/img/Hanako.png",
"accessories":{
"Shoes":"Shoes",
"Pants":"Bottoms"
Expand All @@ -24,6 +26,7 @@
"path": "../models/VAL.vrm",
"type": "vrm",
"pic": "../models/4.jpg",
"picBg": "../models/img/VAL.png",
"accessories":{
"Ponytail":"Ponytail",
"Tail":"Tail",
Expand All @@ -38,6 +41,7 @@
"path": "../models/shibu_sendagaya.vrm",
"type": "vrm",
"pic": "../models/5.jpg",
"picBg": "../models/img/Sendagaya.png",
"accessories":{
"Shoes":"Bodybaked_3",
"Bow tie":"Bodybaked_2",
Expand All @@ -49,6 +53,7 @@
"path": "../models/SampleA.vrm",
"type": "vrm",
"pic": "../models/6.jpg",
"picBg": "../models/img/Amaris.png",
"accessories":{
"Shoes":"Bodybaked_6",
"Coats":"Bodybaked_5",
Expand All @@ -60,6 +65,7 @@
"path": "../models/SampleB.vrm",
"type": "vrm",
"pic": "../models/2.jpg",
"picBg": "../models/img/Natsuki.png",
"accessories":{
"Shoes":"Bodybaked_6",
"Pants":"Bodybaked_5"
Expand All @@ -70,6 +76,7 @@
"path": "../models/bdd.glb",
"type": "glb",
"pic": "../models/8.jpg",
"picBg": "../models/img/IceDwen.png",
"binding":{
"Hips":"Hips",
"Neck":"Neck",
Expand Down
Loading

0 comments on commit e941d67

Please sign in to comment.