User Tools

Site Tools


symbols-en

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision
Previous revision
symbols-en [2019/11/09 21:32]
hermannk [Process route/block events]
symbols-en [2020/10/27 21:57] (current)
rjversluis [Alternative <g>]
Line 10: Line 10:
  
 =====Themes directory structure===== =====Themes directory structure=====
-| :!: In revision 14318 the SVG Themes are reorganised;​ Check the SVG paths. | 
 {{ :​rocview:​themes-tree.png?​0x400}}\\ {{ :​rocview:​themes-tree.png?​0x400}}\\
 The official themes are located in the subdirectory **svg/​themes**.\\ The official themes are located in the subdirectory **svg/​themes**.\\
Line 26: Line 25:
  
 =====Setup===== =====Setup=====
-{{:​rocgui-ini-svg-en.png}}\\+{{:​rocgui-ini-svg-en.png}} ​
 +|  Rocview properties, Tab '​SVG'​ with open Properties dialog to **Theme 1**  | 
 + 
 + 
 +| **Attention:​** For **RocWeb** and **andRoc** the SVG paths must be setted in the RocWeb dialog of the **[[rocrailini-rocweb-en#​rocweb_settings|Rocrail properties]]**. |
  \\  \\
  
Line 49: Line 52:
   * Windows = 10   * Windows = 10
   * Default = 10   * Default = 10
 +
 +The second field is to adjust the text pointsize from -100% to +100%. This could be of help in case multiple Rocviews, on different platforms/​resolutions,​ are connected to the same Server. \\
 +|< >|
 +^ Example ^^
 +|  {{:​rocview:​text-ps-mac-2560x1600.png?​0x100}} ​ |  {{:​rocview:​text-ps-win-1920x1280.png?​0x100}} ​ |  {{:​rocview:​text-ps-win-1920x1280-50.jpg?​0x100}} ​ |
 +|  Mac 2560x1600 ​ |  Windows 1920x1280 ​ |  Windows 1920x1280 -50%  |
  
 __The Rocview has to be restarted for changes to take affect.__\\ __The Rocview has to be restarted for changes to take affect.__\\
Line 63: Line 72:
 Only the SpDrS60 theme has the needed SVGs.\\ Only the SpDrS60 theme has the needed SVGs.\\
 {{:​rocview:​sw-routes.png}}\\ {{:​rocview:​sw-routes.png}}\\
-To get the route IDs automatically set in the switch objects the analyzer ​must be started again if the routes were generated with a revision older then 7884.\\+To get the route IDs automatically set in the switch objects the router ​must be started again if the routes were generated with a revision older then 7884.\\
 In case of manual routes use the __**[[:​select-en|Select dialog]]**__.\\ In case of manual routes use the __**[[:​select-en|Select dialog]]**__.\\
  
  
-====Route ​prio====+====Route ​priority====
 Overwrites block occupancy in case a route is reserved.\\ Overwrites block occupancy in case a route is reserved.\\
  \\  \\
  
-=====Examples===== 
  
- +=====Track/​Road Layout=====
-====Track/​Road Layout====+
 Track and road symbols can be mixed in one layout:\\ Track and road symbols can be mixed in one layout:\\
 {{:​track-road-layout.png}}\\ {{:​track-road-layout.png}}\\
Line 89: Line 96:
 The file names are predetermined for each state of a symbol as listed here: [[symbolnames-en|Symbol Names]]\\ The file names are predetermined for each state of a symbol as listed here: [[symbolnames-en|Symbol Names]]\\
  \\  \\
-The path must be conform:\\ 
-http://​www.w3.org/​TR/​SVG11/​paths.html#​PathData\\ 
  \\  \\
-But only **M**, **L**, **C** and **z** are evaluated. All coordinates are rounded to integers.\\ +=====Supported SVG Elements===== 
-The **C**urve is defined in the "​w3"​ document but not supported in Rocview and **Inkscape**. Its have never been used in the Themes.  +====Path==== 
 +  * https://​developer.mozilla.org/​en-US/​docs/​Web/​SVG/​Element/​path 
 +Only **M**, **L**, **C** and **z** are evaluated. All coordinates are rounded to integers.\\
 The following example (track with blue outline filled yellow ) shows which information is basically evaluated by Rocview: The following example (track with blue outline filled yellow ) shows which information is basically evaluated by Rocview:
- 
 <code xml> <code xml>
 <svg xmlns="​http://​www.w3.org/​2000/​svg"​ width="​32"​ height="​32">​ <svg xmlns="​http://​www.w3.org/​2000/​svg"​ width="​32"​ height="​32">​
Line 105: Line 110:
 </​code>​ </​code>​
  
-The path node maybe multiple listed.\\ +====Circle==== 
-Rotation is done in the Rocview.\\ +  * https://​developer.mozilla.org/​en-US/​docs/​Web/​SVG/​Element/​circle
- \\ +
- +
-Curves and circles:\\+
 <code xml> <code xml>
 <svg xmlns="​http://​www.w3.org/​2000/​svg"​ width="​32"​ height="​32">​ <svg xmlns="​http://​www.w3.org/​2000/​svg"​ width="​32"​ height="​32">​
Line 118: Line 120:
 </​code>​ </​code>​
  
-**Note:** To create curves it's recommended to use **<​circle .../>** and partly cover with another elementsAlternativ it's possible to use multiple short strokes or points.  +====Ellipse==== 
- \\+  ​https://developer.mozilla.org/en-US/​docs/​Web/​SVG/​Element/​ellipse 
 +<code xml> 
 +<svg xmlns="​http://​www.w3.org/​2000/​svg"​ width="​32"​ height="​32">​ 
 +  <​g>​ 
 +    <ellipse cx="​16"​ cy="​12"​ rx="​8"​ ry="​4"​ fill="​red"​ stroke="​blue"/>​ 
 +  </​g>​ 
 +</​svg>​ 
 +</​code>​
  
-==== SVG viewer and editor ==== 
-The Online tool **[[https://​www.rapidtables.com/​web/​tools/​svg-viewer-editor.html|SVG-Viewer/​Editor]]** can be useful to view SVG, create and edit. \\ 
-It's not so powerful as Inkscape, but it's much easier to use than Inkscape or others. 
-  * ** Note: ** \\ Unfortunately the tool does not check the XML conformity. SVG files edited with the tool should be e.g. be checked with a browser on it. 
  
-To become familiar with the tool, is recommend to open an SVG file from a Rocrail theme. \\ +====Polygon==== 
-Changes to the code elements make it very easy to see the effects on the Symbol representation\\ +  * https://​developer.mozilla.org/en-US/docs/Web/SVG/​Element/​polygon
-Alternatively,​ code sections on this wiki page are also suitable if they are transferred to the tool via // Copy & Paste //. \\ +
-\\ +
-Since the tool's "​New"​ function does not create a frame that matches Rocrail'​s symbols, the following frame should first be copied to the tool's Code window to create new symbols:+
 <code xml> <code xml>
-<svg width="​32" ​height="​32">​+<svg width="​100%" ​viewBox="0 0 32 32" xmlns="​http://​www.w3.org/​2000/​svg">
   <g>   <g>
-    <!-- Insert the SVG elements here -->+    <polygon points="​0,​0 31,0 31,31 0,31" fill="​red"​ stroke="​blue"/​>
   </g>   </g>
 </​svg>​ </​svg>​
 </​code>​ </​code>​
-Alternatively,​ a new SVG file can of course also be created by modifying an existing file. \\ 
-|< >| 
-^  Funktions ​ ^ 
-| {{:​wiki:​svg-viewer-new.png?​25}} New | 
-| {{:​wiki:​svg-viewer-open.png?​25}} Open SVG file | 
-| {{:​wiki:​svg-viewer-view.png?​25}} View SVG code | 
-| {{:​wiki:​svg-viewer-save.png?​25}} Save SVG file | 
- \\ 
-==== Inkscape ==== 
-You can use Inkscape http://​www.inkscape.org/​ and start to create a new 32x32 icon. 
-Rocrail supports just integers for coordinated and therefore the following settings are quite useful: 
  
-{{:inkscape_config1-en.png}}{{:inkscape_config2-en.png}}{{:​inkscape_config3-en.png}}+====Rectangle==== 
 +  * https://​developer.mozilla.org/​en-US/​docs/​Web/​SVG/​Element/​rect 
 +<code xml> 
 +<svg width="​100%"​ viewBox="​0 0 32 32" xmlns="​http://www.w3.org/​2000/​svg">​ 
 +  <g> 
 +    <rect x="​2"​ y="​2"​ rx="​5"​ width="​20"​ height="​20"​ stroke="​blue"​ fill="​red"/>​ 
 +  </​g>​ 
 +</​svg>​ 
 +</​code>​ 
 +Setting **rx > 0** will draw a rounded rectangle.\\
  
-These settings , especially '​Always snap', apply only during the creation of a path (Shift+F6) ​As soon as you try to move path nodes with the mouse Inkscape will create decimal coordinates again.+====Line==== 
 +  * https://​developer.mozilla.org/​en-US/​docs/​Web/​SVG/​Element/​line 
 +<code xml> 
 +<svg width="​100%"​ viewBox="​0 0 32 32" xmlns="​http://​www.w3.org/​2000/​svg">​ 
 +  <g> 
 +    <line x1="​0"​ y1="​0"​ x2="​31"​ y2="​31"​ stroke="​black"/>​ 
 +  </​g>​ 
 +</​svg>​ 
 +</​code>​
  
-Another useful setting is to switch on the the outline display:+====PolyLine==== 
 +  * https://​developer.mozilla.org/​en-US/​docs/​Web/​SVG/​Element/​polyline 
 +<code xml> 
 +<svg width="​100%"​ viewBox="​0 0 32 32" xmlns="​http://​www.w3.org/​2000/​svg">​ 
 +  <g> 
 +    <​polyline points="​0,​31 15,8 15,24 31,0" stroke="​blue"/>​ 
 +  </​g>​ 
 +</​svg>​ 
 +</​code>​ 
 + \\
  
-{{:​inkscape_config4-en.png}} 
  
-At the moment the only thing evaluated in Rocrail are <​path../>​.\\ 
-With Shift+F6 you can start this sequence; try to generate Lines only, no Curves.\\ 
-As soon as you're done with the graphics save the file in Inkscape and open it with a text editor to copy the path information into another new file.\\ 
  
-=====Default Symbols===== +=====Alternative <g>===== 
-Default symbols are SVG like vector graphics, and are hardcoded in the Rocgui sources.\\ +second Graphics Container((<​g></​g>​ Section)) can be added in the SVG definition which will be alternated every second.\\ 
-They only are needed when the Rocrail installation is broken, and there are only some basic symbols available! Report it if you are having trouble with symbols.\\ +**Note:** //Rocweb cannot support multiple <g> containers, and will show all overlapped.//\\
- +
- \\ +
-=====Blinking Aspects===== +
-Starting with revision 5315 a second Graphics Container((<​g></​g>​ Section)) can be added in the SVG definition which will be alternated every second.\\ +
-Only signal objects are enabled for this feature.\\+
  
 ====Example==== ====Example====
Line 184: Line 192:
  
  \\  \\
 +
 +=====Preview=====
 +{{ :​symbols:​svg-preview-de.png?​240}}
 +====Windows====
 +This extension can be used to preview SVG symbols in the file explorer:
 +  * __[[https://​github.com/​tibold/​svg-explorer-extension/​releases|SVG Viewer Extension for Windows Explorer]]__
 +
 +
 +====Ubuntu====
 +Ubuntu shows SVG previews out of the box.\\
 +
 +====macOS====
 +{{ :​symbols:​macos-svg-preview.png?​240}}
 +The Finder shows only strict formatted SVGs.\\
 +Starting with revision 2.1.381, the following SVG header format is also supported by Rocview and will enable preview in the macOS Finder:
 +<code xml>
 +<svg width="​100%"​ viewBox="​0 0 32 32" xmlns="​http://​www.w3.org/​2000/​svg">​
 +  ...
 +</​svg>​
 +</​code>​
 +For information on the viewBox attribute see:
 +  * https://​developer.mozilla.org/​en-US/​docs/​Web/​SVG/​Attribute/​viewBox
 +The former width/​height are now part of the viewBox: "x y width height"​. (Rocview only evaluates the width and height values of the viewBox.)\\
 +The width attribute is set to 100% to enable (pre)viewers to scale up to the available space. (Rocview do not evaluate this value.)\\
 +
 +If the following option is manually set in the rocview.ini,​ the conversion will be done automatically:​
 +<code xml>
 +<gui convertsvg="​true"​ ... >
 +  ...
 +</​gui>​
 +</​code>​
 +
 + \\
 +
symbols-en.1573331549.txt.gz · Last modified: 2019/11/09 21:32 by hermannk