Howto:Hacking Inkscape to add Canvas support: Difference between revisions

From FlightGear wiki
Jump to navigation Jump to search
m (+cat: Canvas)
 
(23 intermediate revisions by one other user not shown)
Line 1: Line 1:
{{Stub}}
{{Stub}}
[[File:Inkcanvas.png|thumb|Screenshot showing a custom Inkscape extension written in Python for prototyping [[Canvas]] / [[Canvas MFD Framework]] support as per [[Howto:Hacking Inkscape to add Canvas support]]]]
[[File:Inscape-Canvas-wizard.png|thumb|Screenshot showing an Inkscape dialog for a custom extension to help create MFD pages/page elements more easily.]]


To create modern avionics, Inkscape is the most common tool these days, and is recommended not just for [[Canvas]] based displays, but also those using [[Phi]] <ref>{{cite web  |url    =  https://forum.flightgear.org/viewtopic.php?p=219105#p219105  |title  =  <nowiki> FGWebPanel aka FGPanel 2.0 or: FGPanel goes html </nowiki>  |author =  <nowiki> Torsten </nowiki>  |date  =  Sep 22nd, 2014  |added  =  Sep 22nd, 2014  |script_version = 0.36  }}</ref>
To create modern avionics, Inkscape is the most common tool these days, and is recommended not just for [[Canvas]] based displays, but also those using [[Phi]] <ref>{{cite web  |url    =  https://forum.flightgear.org/viewtopic.php?p=219105#p219105  |title  =  <nowiki> FGWebPanel aka FGPanel 2.0 or: FGPanel goes html </nowiki>  |author =  <nowiki> Torsten </nowiki>  |date  =  Sep 22nd, 2014  |added  =  Sep 22nd, 2014  |script_version = 0.36  }}</ref>
Line 10: Line 13:
== Background ==
== Background ==
{{See also|FG1000}}
{{See also|FG1000}}
Traditional Unix scripts can be used to extend Inkscape's functionality. Such programs read a stream of data on standard input, transform the data in some way, and then write the modified data to standard output. This is an easy way to expand Inkscape and provide custom functionality without learning the internals of Inkscape. Libraries for reading and writing SVG data exist for many programming languages, and most provide support for XML. This tutorial describes the "ins and outs" of writing one of these scripts and making it work with Inkscape's core functionality with a focus on creating MFDs for FlightGear.


Inkscape couuld also be used to directly establish a "connection" with FlightGear (think telnet/props, httpd etc)
Inkscape couuld also be used to directly establish a "connection" with FlightGear (think telnet/props, httpd etc)
== Anatomy of an Inkscape Extension ==
TODO:
* INX FILE
* Python code
* verbs


== Extension types ==
== Extension types ==
Line 18: Line 31:
* input (read a file / data)
* input (read a file / data)
* output (write a file / data) (e.g. PropertyList/XML)
* output (write a file / data) (e.g. PropertyList/XML)
* effect (change contents in the document)
* '''effect''' (change contents in the document)
* print (output to an external device, this could be using fgfs itself)
* print (output to an external device, this could be using fgfs itself)


== Goals ==
== Goals ==
Come up with a simple Inkscape extension that can serve as the foundation for creating Canvas based MFDs more easily.
Come up with a simple Inkscape extension that can serve as the foundation for creating Canvas based MFDs more easily.
Ideally, in conjunction with Richard's MFD framework and the Emesary IPC system (eventually).
Ideally, in conjunction with Richard's MFD framework and the Emesary IPC system (eventually), maybe even taking [[Phi]] into account ?


* [[Canvas MFD Framework]]
* [[Canvas MFD Framework]]
Line 47: Line 60:
* an outer shell for the UI
* an outer shell for the UI
* an inner region to display the Canvas serving as the screen
* an inner region to display the Canvas serving as the screen
== GUI (INX File) ==
For now, this section contains a few pointers on creating a custom INX file, which is the mechanism to register a new extension with Inkscape and provide a simple UI for it.
Extensions can be supplied with values obtained through easily definable parameters. Inkscape provides the basic GUI for user input. The following parameters are supported:
* int (for an integer number input field)
* string (for a text input field)
* float (for a float number input field)
* boolean (for a checkbox)
* enum (for a dropdown list)
* optiongroup (for a dropdown list or radio buttons)
* color (for a color selector, like the one in the Fill & Stroke dialog)
For the sake of the UI there are also the following two parameters that do not provide data to the extension but alter the user input GUI.
* description (for descriptions below parameters)
* notebook (for tabs)
* [http://wiki.inkscape.org/wiki/index.php/Script_extensions Script Extensions]
* [http://wiki.inkscape.org/wiki/index.php/INX_Parameters Parameters]


== Python ==
== Python ==
{{WIP}}
{{WIP}}
To install a new extension, download and unpack the archive file. Copy the files into the directory listed at Edit > Preferences > System: User extensions. After a restart of Inkscape, the new extension will be available.
Installing is as simple as copying the script (unless it resides in your path) and its INX file to the inkscape/share/extensions ($HOME/.config/inkscape/extensions) directory. (If you install a script in your home directory be sure to copy the dependencies.)
There are two text files per extension: a Python program with file extension .py and a menu description with file extension .inx. The syntax of the latter file is that of XML while its semantics are specific to Inkscape. These files are located in different directories on different platforms:
* Linux: ~/.config/inkscape/extensions/
* Mac OS X: /Applications/Inkscape.app/Contents/Resources/extensions/
* Windows: C:\Program Files\Inkscape\share\extensions\
On Linux you willhave to make the python script executable first if you haven't done this yet. This is usually done by the usual command (or in your preferred file manager):
<syntaxhighlight lang="bash">
$ chmod a+x script.py
</syntaxhighlight>
Now start Inkscape. A new menu item in the EXtensions menu should appear.
<syntaxhighlight lang="python">
</syntaxhighlight>
== Roadmap ==
* come up with the boilerplate to add a custom extension to the inkscape menu {{progressbar|90}}
* come up with a simple wizard to create Canvas related MFD pages procedurally {{progressbar|30}}
* provide support for creating boilerplate for missing [[FG1000]] pages using templates {{Not done}}
* set up a git repository and commit the proof-of-concept


== Resources ==
== Resources ==
* https://medium.com/@xaviju/inkscape-extensions-by-non-developers-for-non-developers-a-primer-b272dda360fe
* https://inkscape.org/en/~fsmMLK/%E2%98%85inkscapemadeeasy
* https://inkscape.org/en/develop/extensions/
* https://inkscape.org/en/develop/extensions/
* http://sugarpillstudios.com/wp/?p=142
* http://sugarpillstudios.com/wp/?p=142
Line 59: Line 126:
* http://wiki.inkscape.org/wiki/index.php/PythonEffectTutorial
* http://wiki.inkscape.org/wiki/index.php/PythonEffectTutorial
* http://wiki.inkscape.org/wiki/index.php/Category:Extensions
* http://wiki.inkscape.org/wiki/index.php/Category:Extensions
* http://bazaar.launchpad.net/~inkscape.dev/inkscape/trunk/view/head:/doc/extension_system.txt


== Related ==
== Related ==
{{Appendix}}
{{Appendix}}
[[Category:Canvas|Inkscape]]

Latest revision as of 09:02, 19 October 2020

This article is a stub. You can help the wiki by expanding it.
Screenshot showing a custom Inkscape extension written in Python for prototyping Canvas / Canvas MFD Framework support as per Howto:Hacking Inkscape to add Canvas support
Screenshot showing an Inkscape dialog for a custom extension to help create MFD pages/page elements more easily.

To create modern avionics, Inkscape is the most common tool these days, and is recommended not just for Canvas based displays, but also those using Phi [1]

Tom (Canvas) mentioned originally that for cockpit instruments using Inkscape with maybe a plugin will probably fit better.[2]

Inkscape’s extension architecture can be easily used with Python. There is also some support for other scripting languages. communications between inkscape and its extensions is fairly limited and can be made to easily work for simple command-line (CLI) appliications.

Background

Traditional Unix scripts can be used to extend Inkscape's functionality. Such programs read a stream of data on standard input, transform the data in some way, and then write the modified data to standard output. This is an easy way to expand Inkscape and provide custom functionality without learning the internals of Inkscape. Libraries for reading and writing SVG data exist for many programming languages, and most provide support for XML. This tutorial describes the "ins and outs" of writing one of these scripts and making it work with Inkscape's core functionality with a focus on creating MFDs for FlightGear.


Inkscape couuld also be used to directly establish a "connection" with FlightGear (think telnet/props, httpd etc)

Anatomy of an Inkscape Extension

TODO:

  • INX FILE
  • Python code
  • verbs

Extension types

The following extension types exist for Inkscape:

  • input (read a file / data)
  • output (write a file / data) (e.g. PropertyList/XML)
  • effect (change contents in the document)
  • print (output to an external device, this could be using fgfs itself)

Goals

Come up with a simple Inkscape extension that can serve as the foundation for creating Canvas based MFDs more easily. Ideally, in conjunction with Richard's MFD framework and the Emesary IPC system (eventually), maybe even taking Phi into account ?

Integration

  • Canvas.Text
  • Canvas.Image
  • Canvas.Path
  • Canvas.Map (?)
  • MapStructure

SVG Events

Structure

Each MFD would be arranged using:

  • an outer shell for the UI
  • an inner region to display the Canvas serving as the screen

GUI (INX File)

For now, this section contains a few pointers on creating a custom INX file, which is the mechanism to register a new extension with Inkscape and provide a simple UI for it.

Extensions can be supplied with values obtained through easily definable parameters. Inkscape provides the basic GUI for user input. The following parameters are supported:

  • int (for an integer number input field)
  • string (for a text input field)
  • float (for a float number input field)
  • boolean (for a checkbox)
  • enum (for a dropdown list)
  • optiongroup (for a dropdown list or radio buttons)
  • color (for a color selector, like the one in the Fill & Stroke dialog)

For the sake of the UI there are also the following two parameters that do not provide data to the extension but alter the user input GUI.

  • description (for descriptions below parameters)
  • notebook (for tabs)


Python

WIP.png Work in progress
This article or section will be worked on in the upcoming hours or days.
See history for the latest developments.

To install a new extension, download and unpack the archive file. Copy the files into the directory listed at Edit > Preferences > System: User extensions. After a restart of Inkscape, the new extension will be available.

Installing is as simple as copying the script (unless it resides in your path) and its INX file to the inkscape/share/extensions ($HOME/.config/inkscape/extensions) directory. (If you install a script in your home directory be sure to copy the dependencies.)

There are two text files per extension: a Python program with file extension .py and a menu description with file extension .inx. The syntax of the latter file is that of XML while its semantics are specific to Inkscape. These files are located in different directories on different platforms:

  • Linux: ~/.config/inkscape/extensions/
  • Mac OS X: /Applications/Inkscape.app/Contents/Resources/extensions/
  • Windows: C:\Program Files\Inkscape\share\extensions\

On Linux you willhave to make the python script executable first if you haven't done this yet. This is usually done by the usual command (or in your preferred file manager):

$ chmod a+x script.py

Now start Inkscape. A new menu item in the EXtensions menu should appear.


Roadmap

  • come up with the boilerplate to add a custom extension to the inkscape menu 90}% completed
  • come up with a simple wizard to create Canvas related MFD pages procedurally 30}% completed
  • provide support for creating boilerplate for missing FG1000 pages using templates Not done Not done
  • set up a git repository and commit the proof-of-concept

Resources

Related

References
  1. Torsten  (Sep 22nd, 2014).  FGWebPanel aka FGPanel 2.0 or: FGPanel goes html .
  2. TheTom  (Jan 17th, 2013).  Re: Canvas custom GUI .