Add color schema

Changes

5 changed files (+153/-12)

• src/Main.elm
  • @@ -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" ]
• src/Parameters.elm
  • @@ -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 } }
• src/Parameters/App.elm
  • @@ -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 + } + [] + ] ] ]
• src/Parameters/Key.elm
  • @@ -16,6 +16,7 @@ | BuckleHoleCount
    | BuckleHoleDiameter | CanvasMargin | LineWidth + | ColorSchema toString : Key -> String
  • @@ -35,3 +36,6 @@ "canvas-margin"
    LineWidth -> "line-width" + + ColorSchema -> + "color-schema"
• src/elements/x-preview.css
  • @@ -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; }