Главная Обзор Помощь
Вход
SunnyMirror
/
netron
зеркало из https://github.com/lutzroeder/netron.git
2
0
Ответвить 0
Файлы Задачи 0 Вики
Просмотр исходного кода

SVG spinner overlay

Lutz Roeder 7 лет назад
Родитель
1eda933bf7
Сommit
c6853e4a29
6 измененных файлов с 48 добавлено и 50 удалено
Единый вид Показать статистику Diff
  1. 1 1
      setup.py
  2. 5 0
      src/spinner.svg
  3. 3 3
      src/view-browser.html
  4. 4 2
      src/view-electron.html
  5. 33 39
      src/view.css
  6. 2 5
      src/view.js

+ 1 - 1
setup.py
Просмотреть файл 

@@ -77,7 +77,7 @@ setuptools.setup(
 
     package_data={
 
     package_data={
 
         'netron': [ 
         'netron': [ 
             'netron', 'netron.py',
 
             'netron', 'netron.py',
 
-            'logo.svg', 'favicon.ico', 'icon.png',
 
+            'logo.svg', 'spinner.svg', 'favicon.ico', 'icon.png',
 
             'onnx-model.js', 'onnx.js', 'onnx-metadata.json',
 
             'onnx-model.js', 'onnx.js', 'onnx-metadata.json',
 
             'tf-model.js', 'tf.js', 'tf-metadata.json',
 
             'tf-model.js', 'tf.js', 'tf-metadata.json',
 
             'tflite-model.js', 'tflite.js', 'tflite-metadata.json',
 
             'tflite-model.js', 'tflite.js', 'tflite-metadata.json',

+ 5 - 0
src/spinner.svg
Просмотреть файл 

@@ -0,0 +1,5 @@
 
+<svg xmlns='http://www.w3.org/2000/svg' width='1024' height='1024' viewBox='0 0 1024 1024'>
 
+    <g id='spinner' transform='translate(512, 512)' style='opacity: 1'>
 
+        <path d="M-431,0 A-431,-431 0 0,1 0,-431" stroke-width='24' stroke='#e6e6e6' fill='None' />
 
+    </g>
 
+</svg>

+ 3 - 3
src/view-browser.html
Просмотреть файл 

@@ -15,12 +15,12 @@
 
 </head>
 
 </head>
 
 <body>
 
 <body>
 
 <div id='welcome' class='background' style='display: block'>
 
 <div id='welcome' class='background' style='display: block'>
 
-    <a href='https://github.com/lutzroeder/Netron' target='_blank'>
 
-        <img id='logo' class='center' src='logo.svg' width='128' height='128'>
 
+    <a class='center logo' href='https://github.com/lutzroeder/Netron' target='_blank'>
 
+        <img class='logo absolute' src='logo.svg' />
 
+        <img id='spinner' class='spinner logo absolute' src='spinner.svg' style='display: none;' />
 
     </a>
 
     </a>
 
     <button id='open-file-button' class='center' style='top: 200px; width: 125px; opacity: 0;'>Open Model...</button>
 
     <button id='open-file-button' class='center' style='top: 200px; width: 125px; opacity: 0;'>Open Model...</button>
 
     <input type="file" id="open-file-dialog" style="display:none" multiple="false" accept=".onnx, .pb, .meta, .tflite, .keras, .h5, .json, .mlmodel, .caffemodel">
 
     <input type="file" id="open-file-dialog" style="display:none" multiple="false" accept=".onnx, .pb, .meta, .tflite, .keras, .h5, .json, .mlmodel, .caffemodel">
 
-    <div id='spinner' class='spinner' style='display: none'></div>
 
     <!-- Preload fonts to workaround Chrome SVG layout issue -->
 
     <!-- Preload fonts to workaround Chrome SVG layout issue -->
 
     <div style='font-weight: normal; color: #e6e6e6; user-select: none;'>.</div>
 
     <div style='font-weight: normal; color: #e6e6e6; user-select: none;'>.</div>
 
     <div style='font-weight: 600; color: #e6e6e6; user-select: none;'>.</div>
 
     <div style='font-weight: 600; color: #e6e6e6; user-select: none;'>.</div>

+ 4 - 2
src/view-electron.html
Просмотреть файл 

@@ -8,9 +8,11 @@
 
 </head>
 
 </head>
 
 <body>
 
 <body>
 
 <div id='welcome' class='background' style='display: block'>
 
 <div id='welcome' class='background' style='display: block'>
 
-    <img id='logo' class='center' src='logo.svg' width='128' height='128'>
 
+    <a class='center logo' target='_blank'>
 
+        <img class='logo absolute' src='logo.svg' />
 
+        <img id='spinner' class='spinner logo absolute' src='spinner.svg' style='display: none;' />
 
+    </a>
 
     <button id='open-file-button' class='center' style='top: 200px; width: 125px; opacity: 0;'>Open Model...</button>
 
     <button id='open-file-button' class='center' style='top: 200px; width: 125px; opacity: 0;'>Open Model...</button>
 
-    <div id='spinner' class='spinner' style='display: none'></div>
 
     <!-- Preload fonts to workaround Chrome SVG layout issue -->
 
     <!-- Preload fonts to workaround Chrome SVG layout issue -->
 
     <div style='font-weight: normal; color: #e6e6e6; user-select: none;'>.</div>
 
     <div style='font-weight: normal; color: #e6e6e6; user-select: none;'>.</div>
 
     <div style='font-weight: 600; color: #e6e6e6; user-select: none;'>.</div>
 
     <div style='font-weight: 600; color: #e6e6e6; user-select: none;'>.</div>

+ 33 - 39
src/view.css
Просмотреть файл 

@@ -1,4 +1,11 @@
 
 
 
+body {
 
+    margin: 0;
 
+    font-family: 'Open Sans', --apple-system, "Helvetica Neue", Helvetica, Arial, sans-serf;
 
+    font-size: 12px;
 
+    text-rendering: geometricPrecision;
 
+}
 
+
 
 .background {
 
 .background {
 
     position: fixed;
 
     position: fixed;
 
     top: 0;
 
     top: 0;
 
@@ -20,11 +27,32 @@
 
     -moz-user-select: none;
 
     -moz-user-select: none;
 
 }
 
 }
 
 
 
-body {
 
-    margin: 0;
 
-    font-family: 'Open Sans', --apple-system, "Helvetica Neue", Helvetica, Arial, sans-serf;
 
-    font-size: 12px;
 
-    text-rendering: geometricPrecision;
 
+.absolute { 
+    position: absolute;
 
+    top: 0;
 
+    bottom: 0;
 
+    left: 0;
 
+    right: 0;
 
+}
 
+
 
+.logo {
 
+    width: 128px;
 
+    height: 128px;
 
+}
 
+
 
+.spinner {
 
+    -webkit-animation: orbit 0.5s infinite linear;
 
+    animation: orbit 0.5s infinite linear;
 
+}
 
+
 
+@-webkit-keyframes orbit {
 
+    0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
 
+    100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
 
+}
 
+
 
+@keyframes orbit {
 
+      0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 
+      100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
 
 }
 
 }
 
 
 
 .background button {
 
 .background button {
 
@@ -59,40 +87,6 @@ body {
 
     outline: 0;
 
     outline: 0;
 
 }
 
 }
 
 
 
-@-webkit-keyframes orbit {
 
-    0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
 
-    100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
 
-}
 
-
 
-@keyframes orbit {
 
-      0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 
-      100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
 
-}
 
-
 
-.spinner, .spinner:after {
 
-    border-radius: 50%;
 
-    width: 104px;
 
-    height: 104px;
 
-}
 
-  
-.spinner {
 
-    margin: auto;
 
-    position: fixed;
 
-    top: 0;
 
-    left: 0;
 
-    right: 0;
 
-    bottom: 0;
 
-    border-top: 4px solid #bbb;
 
-    border-right: 4px solid #bbb;
 
-    border-bottom: 4px solid #bbb;
 
-    border-left: 4px solid #e6e6e6;
 
-    -webkit-transform: translateZ(0);
 
-    -ms-transform: translateZ(0);
 
-    transform: translateZ(0);
 
-    -webkit-animation: orbit 1.1s infinite linear;
 
-    animation: orbit 0.5s infinite linear;
 
-}
 
-
 
 .sidebar {
 
 .sidebar {
 
     font-family: 'Open Sans', --apple-system, "Helvetica Neue", Helvetica, Arial, sans-serf;
 
     font-family: 'Open Sans', --apple-system, "Helvetica Neue", Helvetica, Arial, sans-serf;
 
     font-size: 12px;
 
     font-size: 12px;

+ 2 - 5
src/view.js
Просмотреть файл 

@@ -45,14 +45,12 @@ class View {
 
         if (page == 'welcome') {
 
         if (page == 'welcome') {
 
             document.body.style.cursor = 'default';
 
             document.body.style.cursor = 'default';
 
             welcomeElement.style.display = 'block';
 
             welcomeElement.style.display = 'block';
 
-            var offsetHeight1 = welcomeElement.offsetHeight; 
             openFileButton.style.display = 'block';
 
             openFileButton.style.display = 'block';
 
             openFileButton.style.opacity = 1;
 
             openFileButton.style.opacity = 1;
 
             spinnerElement.style.display = 'none';
 
             spinnerElement.style.display = 'none';
 
             graphElement.style.display = 'none';
 
             graphElement.style.display = 'none';
 
             graphElement.style.opacity = 0;
 
             graphElement.style.opacity = 0;
 
             toolbarElement.style.display = 'none';
 
             toolbarElement.style.display = 'none';
 
-
 
             this._model = null;
 
             this._model = null;
 
             this._graph = false;
 
             this._graph = false;
 
         }
 
         }
 
@@ -60,14 +58,13 @@ class View {
 
         if (page == 'spinner') {
 
         if (page == 'spinner') {
 
             document.body.style.cursor = 'wait';
 
             document.body.style.cursor = 'wait';
 
             welcomeElement.style.display = 'block';
 
             welcomeElement.style.display = 'block';
 
-            openFileButton.style.opacity = 0;
 
             spinnerElement.style.display = 'block';
 
             spinnerElement.style.display = 'block';
 
-            var offsetHeight2 = spinnerElement.offsetHeight;
 
+            openFileButton.style.display = 'block';
 
             graphElement.style.display = 'block';
 
             graphElement.style.display = 'block';
 
             graphElement.style.opacity = 0;
 
             graphElement.style.opacity = 0;
 
             toolbarElement.style.display = 'none';
 
             toolbarElement.style.display = 'none';
 
         }
 
         }
 
-    
+
 
         if (page == 'graph') {
 
         if (page == 'graph') {
 
             welcomeElement.style.display = 'none';
 
             welcomeElement.style.display = 'none';
 
             openFileButton.style.display = 'none';
 
             openFileButton.style.display = 'none';