mirror of
https://github.com/rvtr/rmc_website.git
synced 2025-10-31 13:31:21 -04:00
306 lines
11 KiB
HTML
306 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>Bringing RNGTool to Your Wrist (Maybe) | rmc's site</title>
|
|
<link rel="icon" type="image/png" href="/icon.png"/>
|
|
<link rel="stylesheet" type="text/css" href="/assets/css/styledsi.css">
|
|
<link id="pagestyle" rel="stylesheet" type="text/css" href="">
|
|
<link rel="alternate" type="application/atom+xml" href="https://ianskinner1982.github.io/feed.xml">
|
|
<script src="/assets/bootstrap/js/bootstrap.bundle.js"></script>
|
|
<script src="/assets/js/main.js"></script>
|
|
|
|
<meta property="og:title" content="Bringing RNGTool to Your Wrist (Maybe)">
|
|
|
|
<meta property="og:locale" content="en_US">
|
|
<meta name="description" content="Bringing RNGTool to Your Wrist (Maybe) | rmc's site">
|
|
<meta property="og:description" content="Bringing RNGTool to Your Wrist (Maybe) | rmc's site">
|
|
<link rel="canonical" href="https://ianskinner1982.github.io">
|
|
<meta property="og:url" content="https://ianskinner1982.github.io">
|
|
<meta property="og:site_name" content="rmc's site">
|
|
|
|
<meta property="og:image" content="https://ianskinner1982.github.io/icon.png">
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
</head>
|
|
<body>
|
|
<style>
|
|
body {
|
|
background-image: url('/assets/dsi/background.jpg');
|
|
}
|
|
.nav ul {
|
|
list-style-type: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
padding-left: 3.5%;
|
|
/* overflow: hidden; */
|
|
}
|
|
.navstd {
|
|
float: left;
|
|
}
|
|
.navalt {
|
|
float: right;
|
|
}
|
|
.container {
|
|
position: relative;
|
|
}
|
|
.imageOne {
|
|
z-index: 0;
|
|
}
|
|
.imageTwo {
|
|
z-index: 1;
|
|
}
|
|
.imageThree {
|
|
z-index: 2;
|
|
}
|
|
.image {
|
|
position: absolute;
|
|
width: 100px;
|
|
height: 100px;
|
|
}
|
|
.navimgoverlay {
|
|
opacity: 0.0;
|
|
text-align: center;
|
|
float: left;
|
|
padding-top: .6vw;
|
|
width: 6vw;
|
|
height: auto;
|
|
}
|
|
.navimgoverlay:hover {
|
|
opacity: 1.0;
|
|
width: 6vw;
|
|
}
|
|
.navimg {
|
|
text-align: center;
|
|
float: left;
|
|
padding-top: .6vw;
|
|
width: 6vw;
|
|
height: auto;
|
|
}
|
|
.navicon {
|
|
text-align: center;
|
|
float: left;
|
|
padding-top: 2.1vw;
|
|
padding-left: 1.38vw;
|
|
width: 3.2vw;
|
|
height: auto;
|
|
}
|
|
.navedge {
|
|
text-align: center;
|
|
float: left;
|
|
margin: 1%;
|
|
width: 1.5vw;
|
|
height: auto;
|
|
}
|
|
.navpadding li {
|
|
padding-top: 1.5%;
|
|
}
|
|
.image2 {
|
|
position: absolute;
|
|
border-color: #FFFFFF
|
|
width: auto;
|
|
height: auto;
|
|
}
|
|
.image3 {
|
|
position: relative;
|
|
border-color: #FFFFFF
|
|
width: auto;
|
|
height: auto;
|
|
}
|
|
.text {
|
|
position: absolute;
|
|
text-align: left;
|
|
border-color: #FFFFFF;
|
|
font-size: 30px;
|
|
font-size: 1.5vw;
|
|
padding-top: 2vw;
|
|
padding-left: 6vw;
|
|
}
|
|
.icon {
|
|
padding-top:2.2vw;
|
|
margin-left: -9.3vw;
|
|
z-index: 2;
|
|
}
|
|
.launch {
|
|
padding-top: 2.1vw;
|
|
padding-left: .7vw;
|
|
font-size: 30px;
|
|
font-size: 1.5vw;
|
|
z-index: 2;
|
|
position: relative;
|
|
}
|
|
|
|
.titleimgoverlay {
|
|
margin: 0% 2% 0%;
|
|
opacity: 0.0;
|
|
text-align: center;
|
|
float: left;
|
|
width: 16vw;
|
|
height: auto;
|
|
}
|
|
.titleimgoverlay:hover {
|
|
opacity: 1.0;
|
|
}
|
|
.titleimg {
|
|
margin: 0% 2% 0%;
|
|
text-align: center;
|
|
float: left;
|
|
width: 16vw;
|
|
height: auto;
|
|
margin-bottom: 10vw;
|
|
}
|
|
.titleedge {
|
|
text-align: center;
|
|
float: left;
|
|
margin: 1%;
|
|
width: 18vw;
|
|
height: auto;
|
|
}
|
|
.titlepadding li {
|
|
padding-top: 1.5%;
|
|
margin: 0% 2% 0%
|
|
}
|
|
|
|
</style>
|
|
<body>
|
|
<div class="nav">
|
|
<nav>
|
|
<ul>
|
|
<li class="navedge"><img src="/assets/dsi/leftbracket.png" style="width:1.5vw;height:auto;margin:auto;"/></li>
|
|
<div class="navpadding">
|
|
<li class="navimg">
|
|
<div class="container">
|
|
<div class="imageOne image"><img src="/assets/dsi/boxfull.png" class="navimg"></div>
|
|
<div class="imageTwo image"><img src="/assets/dsi/back.png" class="navicon"></div>
|
|
<div class="imageThree image"><a href="/"><img src="/assets/dsi/boxoverlay.png" class="navimgoverlay"></a></div>
|
|
</div>
|
|
</li>
|
|
<li class="navimg">
|
|
<div class="container">
|
|
<div class="imageOne image"><img src="/assets/dsi/boxfull.png" class="navimg"></div>
|
|
<div class="imageTwo image"><img src="/assets/dsi/home.png" class="navicon"></div>
|
|
<div class="imageThree image"><a href="/blog"><img src="/assets/dsi/boxoverlay.png" class="navimgoverlay"></a></div>
|
|
</div>
|
|
</li>
|
|
<li class="navimg">
|
|
<div class="container">
|
|
<div class="imageOne image"><img src="/assets/dsi/boxfull.png" class="navimg"></div>
|
|
<div class="imageTwo image"><img src="/assets/dsi/twldevapps.png" class="navicon"></div>
|
|
<div class="imageThree image"><a href="/aaaaaaa/"><img src="/assets/dsi/boxoverlay.png" class="navimgoverlay"></a></div>
|
|
</div>
|
|
</li>
|
|
<li class="navimg">
|
|
<div class="container">
|
|
<div class="imageOne image"><img src="/assets/dsi/boxfull.png" class="navimg"></div>
|
|
<div class="imageTwo image"><img src="/assets/dsi/devshop.png" class="navicon"></div>
|
|
<div class="imageThree image"><a href="/gaming/htmls/DEBUG/startup.html"><img src="/assets/dsi/boxoverlay.png" class="navimgoverlay"></a></div>
|
|
</div>
|
|
</li>
|
|
<li class="navimg">
|
|
<div class="container">
|
|
<div class="imageOne image"><img src="/assets/dsi/box.png" class="navimg"></div>
|
|
<div class="imageThree image"><img src="/assets/dsi/boxoverlay.png" class="navimgoverlay"></div>
|
|
</div>
|
|
</li>
|
|
<li class="navimg">
|
|
<div class="container">
|
|
<div class="imageOne image"><img src="/assets/dsi/box.png" class="navimg"></div>
|
|
<div class="imageThree image"><img src="/assets/dsi/boxoverlay.png" class="navimgoverlay"></div>
|
|
</div>
|
|
</li>
|
|
<li class="navimg">
|
|
<div class="container">
|
|
<div class="imageOne image"><img src="/assets/dsi/box.png" class="navimg"></div>
|
|
<div class="imageThree image"><img src="/assets/dsi/boxoverlay.png" class="navimgoverlay"></div>
|
|
</div>
|
|
</li>
|
|
<li class="navimg">
|
|
<div class="container">
|
|
<div class="imageOne image"><img src="/assets/dsi/box.png" class="navimg"></div>
|
|
<div class="imageThree image"><img src="/assets/dsi/boxoverlay.png" class="navimgoverlay"></div>
|
|
</div>
|
|
</li>
|
|
<li class="navimg">
|
|
<div class="container">
|
|
<div class="imageOne image"><img src="/assets/dsi/box.png" class="navimg"></div>
|
|
<div class="imageThree image"><img src="/assets/dsi/boxoverlay.png" class="navimgoverlay"></div>
|
|
</div>
|
|
</li>
|
|
<li class="navimg">
|
|
<div class="container">
|
|
<div class="imageOne image"><img src="/assets/dsi/box.png" class="navimg"></div>
|
|
<div class="imageThree image"><img src="/assets/dsi/boxoverlay.png" class="navimgoverlay"></div>
|
|
</div>
|
|
</li>
|
|
<li class="navimg">
|
|
<div class="container">
|
|
<div class="imageOne image"><img src="/assets/dsi/box.png" class="navimg"></div>
|
|
<div class="imageThree image"><img src="/assets/dsi/boxoverlay.png" class="navimgoverlay"></div>
|
|
</div>
|
|
</li>
|
|
<li class="navimg">
|
|
<div class="container">
|
|
<div class="imageOne image"><img src="/assets/dsi/box.png" class="navimg"></div>
|
|
<div class="imageThree image"><img src="/assets/dsi/boxoverlay.png" class="navimgoverlay"></div>
|
|
</div>
|
|
</li>
|
|
<li class="navimg">
|
|
<div class="container">
|
|
<div class="imageOne image"><img src="/assets/dsi/boxfull.png" class="navimg"></div>
|
|
<div class="imageTwo image"><img src="/assets/dsi/discord.png" class="navicon"></div>
|
|
<div class="imageThree image"><a href="https://discord.gg/XZxxZngwDQ"><img src="/assets/dsi/boxoverlay.png" class="navimgoverlay"></a></div>
|
|
</div>
|
|
</li>
|
|
<li class="navimg">
|
|
<div class="container">
|
|
<div class="imageOne image"><img src="/assets/dsi/boxfull.png" class="navimg"></div>
|
|
<div class="imageTwo image"><img src="/assets/dsi/github.png" class="navicon"></div>
|
|
<div class="imageThree image"><a href="https://github.com/IanSkinner1982/ianskinner1982.github.io/"><img src="/assets/dsi/boxoverlay.png" class="navimgoverlay"></a></div>
|
|
</div>
|
|
</li>
|
|
</div>
|
|
<li class="navedge"><img src="/assets/dsi/rightbracket.png" style="width:1.5vw;height:auto;margin:auto;"/></li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
|
|
<div id="content-wrap">
|
|
<div class="text-center pt-3">
|
|
<h1>Bringing RNGTool to Your Wrist (Maybe)</h1>
|
|
<h3>2022-02-01</h3>
|
|
<h4>NinjaCheetah</h4>
|
|
<p><a href=/blog><- Back</a></p>
|
|
</div>
|
|
<div class="container">
|
|
<hr>
|
|
<p>Hmm this title sounds familiar...</p>
|
|
<p>More RNGTool updates! This time I'm porting RNGTool to watchOS rather than iOS. And it's interesting. The most difficult part of this is dealing with the limited screen real estate that the Apple Watch has. The solution? Cutting out the fat.</p>
|
|
<p>RNGTool is by no means a visually simple app. I've definitely overcomplicated its UI. This gives me a good chance to really cut out any parts of the app's UI that aren't needed so that you can fit the parts that matter. The actual process of porting the app's code was a lot easier than from macOS to iOS because most of the parts that aren't support on watchOS were being removed anyway, so I won't go over it here.</p>
|
|
<p>Here's the interesting part, a comparison of the iOS and watchOS apps:</p>
|
|
<div style="display:inline-block;padding-left:8px;">
|
|
<img src="https://cdn.ncxprogramming.com/file/blog/2022-02-01/rngtool-mobile-number-mode.png" width="20%">
|
|
<img src="https://cdn.ncxprogramming.com/file/blog/2022-02-01/rngtool-wrist-number-mode.png" width="15%">
|
|
</div>
|
|
<div style="display:inline-block;padding-left:8px;">
|
|
<img src="https://cdn.ncxprogramming.com/file/blog/2022-02-01/rngtool-mobile-dice-mode.png" width="20%">
|
|
<img src="https://cdn.ncxprogramming.com/file/blog/2022-02-01/rngtool-wrist-dice-mode.png" width="15%">
|
|
</div>
|
|
<div style="display:inline-block;padding-left:8px;">
|
|
<img src="https://cdn.ncxprogramming.com/file/blog/2022-02-01/rngtool-mobile-about.png" width="20%">
|
|
<img src="https://cdn.ncxprogramming.com/file/blog/2022-02-01/rngtool-wrist-about.png" width="15%">
|
|
</div>
|
|
<p>Unfortunately those are all of the screens I've completely finished at this point. I will likely make a post updating on when I finish the rest.</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</body>
|
|
<footer>
|
|
<br><br><br><footer class="bg-light text-lg-start border-top align-items-center text-center" style="text-align:center;">
|
|
<div class="text-center p-3 align-items-center" style="font-size: 8px;">
|
|
Copyright © 2021-<span id="footerDate"></span> Ian M. Skinner <a href="/contactus" class="text-reset fw-bold">Contact me.</a>
|
|
</div>
|
|
</footer>
|
|
|
|
</footer>
|
|
</html>
|