Changes
5 changed files (+153/-12)
-
-
@@ -12,10 +12,12 @@import Browser import Browser.Navigation exposing (Key) import Html exposing (hr, node, p) import Html.Attributes exposing (attribute) import Html.LivingStandard exposing (..) import Json.Decode import Parameters import Parameters.App import Preferences import Preferences.App import Template exposing (template) import Url exposing (Url)
-
@@ -118,7 +120,24 @@ , body =[ node "x-app-layout" [] [ node "x-preview" [ slot "preview" ] [ slot "preview" , attribute "print-theme" (case model.parameters.parameters.rendering.colorSchema of Parameters.BlackOnWhite -> "black-on-white" Parameters.WhiteOnBlack -> "white-on-black" ) , attribute "preview-theme" (case model.preferences.preferences.previewTheme of Preferences.SystemTheme -> "system" Preferences.PrintTheme -> "print" ) ] [ template model.parameters.parameters [] ] , node "x-panel" [ slot "parameters" ]
-
-
-
@@ -82,10 +82,16 @@ A4 ->( mm 210, mm 297 ) type ColorSchema = BlackOnWhite | WhiteOnBlack type alias Rendering = { size : CanvasSize , margin : Length , lineWidth : Length , colorSchema : ColorSchema }
-
@@ -137,5 +143,6 @@ , rendering ={ size = A4 , margin = mm 10 , lineWidth = mm 0.3 , colorSchema = BlackOnWhite } }
-
-
-
@@ -15,7 +15,7 @@ import Html.Attributes exposing (..)import Html.Events exposing (onInput) import Html.LivingStandard exposing (..) import Length exposing (Length, toMM) import Parameters exposing (Parameters) import Parameters exposing (ColorSchema(..), Parameters) import Parameters.Constraints exposing (NumberConstraints, constraints) import Parameters.Key as Key exposing (Key(..)) import Parameters.Parser exposing (Error(..), parseInt, parseLength)
-
@@ -70,6 +70,7 @@type Msg = FieldChanged Key String | ColorSchemaChanged ColorSchema parseField : Key -> (String -> Result Error a) -> Fields -> Result Error a
-
@@ -203,6 +204,18 @@Err errors -> ( { model | fields = fields, errors = errors }, Cmd.none ) ColorSchemaChanged schema -> let { parameters } = model { rendering } = parameters in ( { model | parameters = { parameters | rendering = { rendering | colorSchema = schema } } } , Cmd.none ) -- VIEW
-
@@ -302,7 +315,7 @@ descriptionId key =Key.toString key ++ "_description" type alias FieldProps msg = type alias NumberFieldProps msg = { key : Key , title : List (Html.Html msg) , description : List (Html.Html msg)
-
@@ -311,8 +324,8 @@ , attrs : List (Html.Attribute msg)} field : Model -> FieldProps Msg -> Html.Html Msg field model { key, title, description, attrs, unit } = numberField : Model -> NumberFieldProps Msg -> Html.Html Msg numberField model { key, title, description, attrs, unit } = node "x-field" [] [ label [ for (Key.toString key), slot "title" ] title
-
@@ -346,6 +359,48 @@ )] type alias RadioBoxProps msg = { label : List (Html.Html msg) , description : List (Html.Html msg) , key : Key , value : String , checked : Bool , onCheck : msg } radioBox : RadioBoxProps msg -> List (Html.Attribute msg) -> Html.Html msg radioBox { label, description, key, value, checked, onCheck } attrs = let id = Key.toString key ++ "_" ++ value choiceDescriptionId = id ++ "__description" in node "x-radio-box" [ if checked then attribute "checked" "" else class "" ] [ Html.label [ for id, slot "label" ] label , Html.p [ Html.Attributes.id choiceDescriptionId, slot "description" ] description , input (type_ "radio" :: Html.Attributes.id id :: Html.Attributes.name (Key.toString key) :: Html.Attributes.value value :: Html.Attributes.checked checked :: Html.Events.onCheck (\_ -> onCheck) :: ariaDescribedBy [ choiceDescriptionId ] :: attrs ) [] ] type alias GroupProps msg = { title : List (Html.Html msg) , description : Maybe (List (Html.Html msg))
-
@@ -366,7 +421,7 @@ view : Model -> List (Html.Html Msg)view model = [ group { title = [ text "General" ], description = Nothing } [ field model [ numberField model { key = LugWidth , title = [ text "Lug width" ] , description =
-
@@ -380,14 +435,14 @@ ], hr [] [] , group { title = [ text "Buckle / Clasp" ], description = Nothing } [ field model [ numberField model { key = BuckleHoleCount , title = [ text "Hole Count" ] , description = [ text "Set 0 to disable buckle holes generation." ] , unit = Nothing , attrs = step "1" :: intFieldAttrs constraints.longPiece.buckleHole.count } , field model , numberField model { key = BuckleHoleDiameter , title = [ text "Hole Diameter" ] , description =
-
@@ -402,7 +457,7 @@ ], hr [] [] , group { title = [ text "Rendering" ], description = Nothing } [ field model [ numberField model { key = CanvasMargin , title = [ text "Print Margin" ] , description =
-
@@ -410,7 +465,7 @@ [ text "Lower values can cause printing problems depending on your printer." ], unit = Just "mm" , attrs = step "1.0" :: lengthFieldAttrs constraints.rendering.margin } , field model , numberField model { key = LineWidth , title = [ text "Line Width" ] , description =
-
@@ -418,5 +473,30 @@ [ text "Stroke width (thickness) of the cutting lines and seam lines." ], unit = Just "mm" , attrs = step "0.1" :: lengthFieldAttrs constraints.rendering.lineWidth } , node "x-field" [] [ label [ for (Key.toString ColorSchema), slot "title" ] [ text "Color Schema" ] , p [ id (descriptionId ColorSchema), slot "description" ] [ text "Color schema of the template." ] , radioBox { key = ColorSchema , label = [ text "Black on White" ] , description = [ text "Select this if you print the template with a regular printer." ] , value = "bow" , checked = model.parameters.rendering.colorSchema == BlackOnWhite , onCheck = ColorSchemaChanged BlackOnWhite } [] , radioBox { key = ColorSchema , label = [ text "White on Black" ] , description = [ text "For digital output. Printing this with an inkjet printer is not a good idea." ] , value = "wob" , checked = model.parameters.rendering.colorSchema == WhiteOnBlack , onCheck = ColorSchemaChanged WhiteOnBlack } [] ] ] ]
-
-
-
@@ -16,6 +16,7 @@ | BuckleHoleCount| BuckleHoleDiameter | CanvasMargin | LineWidth | ColorSchema toString : Key -> String
-
@@ -35,3 +36,6 @@ "canvas-margin"LineWidth -> "line-width" ColorSchema -> "color-schema"
-
-
-
@@ -16,13 +16,44 @@ padding: min(5dvh, 5vw);} ::slotted(svg) { --_bow-bg: white; --_bow-fg: black; --_wob-bg: black; --_wob-fg: white; --_print-bg: var(--_bow-bg); --_print-fg: var(--_bow-fg); --_preview-bg: var(--_print-bg); --_preview-fg: var(--_print-fg); font-family: "Barlow", sans-serif; border: 1px solid #0002; max-width: 100%; max-height: 100%; background-color: var(--_preview-bg); border-radius: 2px; box-shadow: 1px 1px 5px #0003; color: var(--_preview-fg); } :host([print-theme="white-on-black"]) ::slotted(svg) { --_print-bg: var(--_wob-bg); --_print-fg: var(--_wob-fg); print-color-adjust: exact; } :host([preview-theme="system"]) ::slotted(svg) { --_preview-bg: var(--_bow-bg); --_preview-fg: var(--_bow-fg); @media (prefers-color-scheme: dark) { --_preview-bg: var(--_wob-bg); --_preview-fg: var(--_wob-fg); print-color-adjust: exact; } } .gesture-plane {
-
@@ -59,10 +90,10 @@ width: 100%;height: 100%; border: none; background-color: white; background-color: var(--_print-bg); border-radius: 0; box-shadow: none; color: black; color: var(--_print-fg); transform: none !important; }
-